CSS 样式介绍(二)

各种样式属性的作用

1.文字相关的样式属性

p {
    color: blue;  /**文字的颜色**/
    font-size: 20px;  /**文字的大小**/
    <!----font-family属性,如果写了多个。则默认选择第一个字体,系统里面没有会再选择第二个。如果字体名中包含空格、#、$等符号该字体必须加英文状态下的单引号或者双引导 例如font-family: "Microsoft YaHei"; 尽量使用系统默认字体,尽量写unicode字体 写宋体和微软雅黑 "\5B8B\4F53" "5FAE\8F6F\96C5\9ED1"-->
    font-family: "Microsoft YaHei", tahoma; /**文字的字体**/
    font-weight: 400;/**文字的粗细 400等于normal ,700的bold**/
    font-style: italic; /**文字斜体还是正常的**/
    /**font:综合设置字体样式 font属性用于对字体样式进行综合设置,基本语法如下:{font: font-style font-weight font-size font-family} 不能更换顺序*/
    font: normal 900 30px "宋体";  
    /**必须保留 font-size 和 font-family 否则 font 不起作用**/
    font: 30px "宋体";   
}

strong {
    font-weight: normal; /**粗体标签设置font-weight:让粗体变为不加粗**/
}

em {
    font-style: normal; /**斜体标签设置font-style:让斜体变为不斜体*/
}

#line-height {
    line-height: 50px; /*每行的高度*/
    text-align: left; /*文字对齐方式*/
    text-indent: 2em; /*首行缩进,建议用em设置 1em就是一个字的宽度*/
    letter-spacing: 10px;  /*每个字的间距*/
    text-decoration: none; /**取消下划线 文本装饰**/
    word-spacing: 20px; /*单词的间距*/
    color: rgba(0, 0, 0, 0.5);  /*颜色透明度 css3*/
    text-shadow: 4px 5px 5px red; /*文字阴影 css3, text-shadow带了4个参数水平位置 垂直位置 模糊距离 颜色*/
}

2.块级元素、行内元素、行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- link 标签就是把外面的css 引入到当前的html页面中,就是css 和 html页面的桥梁 -->
    <link rel="stylesheet" type="text/css" href="xxx.css">

    <!-- 内部样式表:H写在HTML文档 的head头部里面 -->
    <style type="text/css"> /*--type 类型 css 文本,type="text/css"在HTML5文档里面可以省略-*/
        .demo {
            color: pink;
        }

      
        .demo2 {
            display: inline; /* 块元素转成行内元素*/
            width: 300px; /* 因为是行内元素所以宽高无效*/
            height: 200px; 
            color: pink;
        }

        .demo3 {
            display: block; /* 行内元素转成块元素*/
            width: 300px;
            height: 200px;
            background: pink;
        }

        .demo4 {
            display: inline-block; /* 转成行内块元素*/
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- css样式表:行内式(内联样式表)、内部样式表(内嵌样式表)、外部样式表(链入样式表) -->
    <!-- 我们修改一小点样式的时候,可以通过内联样式表 快速完成,直接在标签内部写样式 -->
    <!-- 内部样式表:H写在HTML文档 的head头部里面 -->
    <div style="color: #FFF232; font-size: 15px">SDK叫啥的的</div>
    

    <div class="demo">山东矿机</div>

    <!-- HTML 标签一般分为块标签和行内标签两种类型,也可以称块元素和行内元素 -->
    <!-- 块级元素(block-level) 通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用语网页布局和网页结构的搭建。-->
    <div>div就是块级元素,最典型的块级元素</div>
    <fieldset>
        <legend> 块级元素特点</legend>
        <ul>
        <li>1.总是从新行开始</li>
        <li>2.高度、行高、外边距及内边距都是可以控制</li>
        <li>3.宽度默认是100%</li>
        <li>4.可以容纳内联元素和其他块元素。</li>
    </ul>
    </fieldset>

    <!--行内元素(内联元素 inline-level)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等熟悉,常用于控制页面中文本的样式,如<a> <strong> <em> <span>等,span是典型的行内元素-->
    <span>123 </span>
    <span>345</span>
    <span> 567 </span>
    <fieldset>
        <legend> 行内元素特点</legend>
        <ul>
            <li>1.和相邻行内元素在一行上</li>
            <li>2.宽、高是无效的,但水平方向的padding和margin可以设置,垂直方向无效</li>
            <li>3.默认宽度就是它本身的内容宽度</li>
            <li>4.行内元素只能容纳文本或其他行内元素(a 标签除外,比较特殊)</li>
        </ul>
    </fieldset>

    <!--行内块元素(inline-block) 在行内元素中有几个特殊的标签 <img /> <input /> <td> 可以对它们设置宽、高、对齐属性,有些资料会称它们为行内块元素-->
    <input type="text" name="" /> <img src="#" />
    <fieldset>
         <legend> 行内块元素特点</legend>
         <ul>
            <li>1.和相邻 行内元素(行内块)在一行上,但之间会有空白间隙</li>
            <li>2.默认宽度就是它本身内容的宽度</li>
            <li>3.高度、行高、外边距、内边距都可以控制</li>
        </ul>
    </fieldset>

    <!-- 标签显示模式转换属性:display -->
    <fieldset>
         <legend> 标签显示模式转换</legend>
         <ul>
            <li>1.块转行内:display: inline;</li>
            <li>2.行内转块:display: block;</li>
            <li>3.块、行内元素转换为行内块:display: inline-block;</li>
        </ul>
    </fieldset>

    <div class="demo2">块级转行内</div>
    <span class="demo3">行内转块级</span><br />

    <a href="#" class="demo4">百度</a>
</body>
</html>

3.背景样式属性

div {
    width: 600px;
    height: 300px;
    background-color: pink; /*背景图片*/
    background-image: url(test.png); /*背景图片*/
    /*background-repeat:照片是否平铺,repeat-x水平平铺,repeat-y 垂直平铺,repeat水平垂直平铺, no-repeat不平铺*/
    background-repeat: no-repeat; 
            
    /* 1.利用方位名词 top bottom center left right来更改背景图片位置。(如果方位名词只写一个那么另外一个默认是center)*/
    background-position: left bottom;
    background-position: center center;
    background-position: left;
    /**2.利用精确单位更改背景图片位置: 第一个是x坐标,第二个是y 坐标**/
    background-position: 10px 30px; 
    /**3.利用精确单位和方位更改背景图片位置**/
    background-position: center 20px; /**代表水平居中 垂直距离20px**/

    /*background-size:指定对象背景图的尺寸大小:宽度 高度, 尽量只改一个值,另外一个会等比例缩放,防止图片失真、变形*/
    background-size: 80px;
    background-size: 50%;  /**通过百分比缩放图片大小***/
    /*cover 会自动调整缩放比例,保证图片始终填充满背景区域,如果溢出部分则互被隐藏*/
    background-size: cover;
    /*contain 会自动调整缩放比例,保证图片完整的显示在背景区域。如何背景区域宽高比例不相同,不会填充背景区域*/
    background-size: contain;

    /**background-attachment背景图固定:默认是scroll可以滚动的,fixed代表不可滚动*/
    background-attachment: fixed;
    /**背景属性简写: background属性的值的书写顺序官方并没有强制标准的为了可读性,建议大家如下写:
            background 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
    background: #000 url(test.png) no-repeat scroll bottom right;
    /*放多张图,为了避免背景色将图片盖住,背景色通常都定义在最后一组上,不定义在前面是防止颜色被后面的覆盖掉*/
    background: url(test.png) no-repeat scroll bottom right,
            url(test.png) no-repeat scroll top right #ccc;
}

a:hover { /**鼠标经过给我的链接添加背景图片**/
    background: url(test.png) no-repeat;
}

4.css3样式特性

  • 1.重叠性(重叠的属性以最后样式为准)
  • 2.继承性:所谓继承性是指书写css样式表时,子标签会继承父标签的某些样式,如字体、字号、文字颜色,跟文字类有关系的属性可以继承
  • 3.优先级性: 0, 0, 0, 0。特殊性公式:从左往右,左边最大
  • 标签选择器 0, 0, 0, 1
  • 类选择器 0, 0, 1, 0
  • 伪类选择器 0, 0, 1, 0
  • id选择器 0, 1, 0, 0
  • 行内式更高,就是在标签内写样式 1, 0, 0, 0
  • 最大的 不是选择器,是!important 一旦出现优先执行
  • 特别注意:继承的权重为0
p {
    color: orange!important; /**级别最大**/
}

ul li { /*权重叠加 0 0 0 2*/
    color: green;
}

li { /**0 0 0 1**/ 
   color: red;
}

<nav class="daohanglan">
            <ul>
                <li>继承的权重为0</li>
            </ul>
</nav>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,401评论 1 88
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 1,057评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,405评论 1 40
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 654评论 0 6
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 868评论 0 6