CSS（二）

一、选择器的优先级

1.选择器相同，引入方式不同：

　　就近原则

2.引入方式相同，选择器不同：

　　行内 > id选择器 > 类选择器 > 标签选择器

除此以外，我们还可以自己设置强制让该样式为最高优先级，通过添加 !important方式。但是不推荐这样使用，因为过多的使用会使样式文件混乱，不易维护，迫不得已才使用它

二、宽和高

width属性可以为元素设置宽度

height属性可以为元素设置高度

注意：只有块儿级标签才能设置宽度，内联标签的宽度由内容来决定

<style>
     div {
        width: 200px;
        height: 400px;
     }
     span {
        width: 200px;
        height: 400px;
     }
</style>

三、文字样式

1.字体

font-family：设置文字字体

font-size：设置字体大小

font-weight：设置字体粗细

　　normal：普通　　bold：粗体　　lighter：更细

2.文本颜色（三种方式）

十六进制　　color：#FF0000

一个rgb值　　color：rgb(255,0,0)

颜色名称　　color：red

还有rgba，比rgb多一个值，多出来的第四个值指定了色彩的亮度，范围在0.0~1.0

    <style>
        p {
            font-family: 'Microsoft YaHei UI';
            font-size: 48px;
            font-weight: lighter;
            color: yellow;
            color: #FF6129;
            color: rgb(199,93,255);
            color: rgba(199,93,255,0.2);
        }
    </style>

3.文字对齐

text-align属性规定了元素中的文本的水平对齐方式

left：左对齐（默认）　　right：右对齐　　center：居中对齐　　justify：两端对齐

4.文字装饰

text-decoration属性用来给文字添加特殊效果

none：没有线　　underline：文本下一条线　　overline：文本上一条线　　line-throuth：穿过文本的一条线

常用的使用为去掉a标签下面的一条线

    <style>
        p {
            /*text-align: justify;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            font-size: 16px;
            text-indent: 32px;
        }
        a {
            text-decoration: none;
            color: red;
        }
    </style>

四、背景属性

background-color：背景颜色

background-image：背景图片

背景重复：

　　repeat：背景图片平铺排满整个网页

　　repeat-x：水平方向平铺

　　repeat-y：竖直方向平铺

　　no-repeat：不平铺

background-position：背景位置，有两个值left、top，表示距离左边界和上边界距离

注意：该属性前面都是background，可以简写为：

background + 任意属性值（顺序随意）

    div {
            background-color: yellow;
            color: red;
        }
        .c1 {
             400px;
            height: 400px;
            background-color: gray;
            background-image: url("111.png");
            background-repeat: no-repeat;  /*不平铺*/
            /*background-repeat: repeat-x;  */
            /*background-repeat: repeat-y;*/
            background-position: 50% 50%; /*第一个调节左右  第二个调节上下*/

            /*支持简写*/
            background: center center url("111.png") hotpink no-repeat;
        }

五、边框

border-width：边框宽度

border-style：边框格式

　　none：无边框　　dotted：点线边框　　dashed：虚线边框　　solid：实线边框

border-color：边框颜色

简写方式：border：2px solid red

    <style>
        p {
            border-style: dotted;  /*样式*/
            border-color: red;  /*边框颜色*/
            border-width: 10px;  /*边框粗细*/
            border-left: solid;
            border-right: dashed;
            border-top: dotted;
            border-bottom: solid;
            border-left-color: deeppink;
            /*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/

            /*简写*/
            border: solid 3px red;  /*只要把参数写进去就可以  不需要考虑顺序*/
        }
        div {
            height: 500px;
            width: 500px;
            border: 3px solid red;
        }
        span {
            height: 200px;
            width: 200px;
            border: 5px solid green;
        }
    </style>

border-radius：该属性可以实现画圆，将值设置为长或者宽的一半就可以得到一个圆形

    <style>
        div {
            height: 150px;
            width: 150px;
            border-radius: 50%;
            background-image: url("111.png");
            background-repeat: no-repeat;
            background-color: aqua;
        }
    </style>

六、dispaly属性

用于控制HTML元素的显示效果

block：将行内标签变成块儿级标签

inline：将块儿级标签变成行内标签

inline-block：使元素同时具有行内元素和块儿级元素的特点

none：隐藏某个元素，且不会占用空间

七、CSS盒子模型

margin：用于控制与元素之间的距离，最基本用途就是控制元素周围空间的间隔，达到相互隔开目的

padding：用于控制内容与边框之间的距离

content：盒子的内容

1.margin外边距

    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        div {
            border: 5px solid red;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: yellowgreen;
            margin-bottom: 50px;
            margin-left: 100px;
            margin: 20px;  /*上下左右*/
            margin: 20px 40px;  /*第一个是上下   第二个是左右*/
            margin: 20px 40px 60px;  /*上   左右   下*/
            margin: 20px 40px 60px 80px;  /*上  右 下 左  顺时针*/
            margin: 0 auto;  /*水平居中*/
        }
    </style>

2.padding内填充

 <style> 
    .c3 {
            border: 3px solid black;
            height: 400px;
            width: 400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/
        }
</style>

八、浮动

元素可以看做是将贴在墙上的一幅画，而浮动元素就是将这幅画给撕出来，那么这幅画就可以在墙上可以随意滑动，而且相比较与墙面，距离我们更近

任何元素都可以浮动

left：向左浮动

right：向右浮动

none：不浮动

浮动的元素是脱离正常文档流的自身多大就会占多大不再有独占一行的概念

    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
    </style>

浮动缺陷：

　　浮动会造成父标签塌陷的问题

解决方法：

　　clear属性：专门用来清除浮动所带来的负面影响父标签塌陷的问题

　　1.在写页面之前先定义好清除浮动的css代码

.clearfix:after {
     content: "";
     display: block;
     clear: both;
}

　　2.谁塌陷了就给谁加上clearfix样式类

九、定位

static：无定位（默认值）

relative：相对定位

相当于标签原有的位置做偏移

absolute：绝对定位

相当于已经定位过的(static>>>relative)父标签做偏移

fix：固定定位

相当于浏览器窗口固定在某个位置始终不变

    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            /*position: static;  !*默认值*!*/
            position: relative;  /*相对定位*/
            left: 100px;
            top: 100px;
        }
        .c2 {
            height: 50px;
            width: 100px;
            background: green;
            position: relative;
        }
        .c3 {
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc {
            height: 50px;
            width: 100px;
            background-color: #4e4e4e;
            color: white;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>

是否脱离正常文档流

验证这个标签原来所占用的位置还在不在

结论：

　　不脱离：相对定位

　　脱离：绝对定位、固定定位

九、z-index

控制z轴的距离，设置层叠顺序

z-index值大的盖住数值小的

    <style>
        .modal {
            background-color: #808080;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            opacity: 0.4;
        }
        .form {
            background-color: white;
            height: 200px;
            width: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -50px;
        }
    </style>

十、透明度

opacity：取值范围：0~1，0完全透明，1完全不透明

    <style>
        .c1 {
            background-color: rgba(128,128,128,0.4);
        }
        .c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>

十一、溢出属性

overflow

圆形头像示例：

    <style>
        body {
            margin: 0;
            background-color: antiquewhite;
        }
        .c1 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 5px solid white;
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;*/
            overflow: hidden;
        }
        img {
            max-width: 100%;
        }
    </style>