零基础学CSS（二）

一.颜色的表现形式

1.英文单词表示 eg：red，pink....

2.十六进制表示：eg：#ff0000；

取值范围：（0~9，a~f）之间

常见颜色值：#ffo红色   #0f0绿色  #00f蓝色  #000黑色  #fff白色

3.rgb（red，green，blue）

取值（0~255）之间

0,0,0黑色     255,255,255 白色

4.rgba（red，green，blue，Alpha）

Alpha（透明度）取值0~1之间，1完全不透明，0完全透明。0.5半透明

二.单位

1.绝对单位：px，cm

2.相对单位：百分比：父元素的百分比

                     rem：根据html的font-size来说的

                     em：如果自身有font-size，就一自身的font-size来说，如果没有，就以父元素的来说的

三.文本属性

1.text-align：设置文本的对齐方式

left（默认）  right      center     justify（两端对其）

2.text-indent：设置首行缩进，单位采用（em）

3.color：设置字体颜色

4.text-decoration：设置文本的装饰效果

overline 上线          underline 下划线        line-throungh 贯穿线         none（默认，可以用来去点a标签的默认的下划线）

 注：单行文本水平垂直居中：设置line-height的值等于盒子的height即可

四.css中的复合选择器

 两个或者多个基本选择器任意组合，目的是为了更精确的选中标签

1.后代选择器

语法：选择器1     选择器2{css样式}

 ul li {
          border: 1px solid red;
      }

2.子代选择器

语法：选择器1>选择器2{css样式}

ul>li{
          font-size: 20px;
      }

3.交集选择器

语法：选择器1选择器2{css样式}

 li.first{
          background: pink;
      }

4.群组选择器

语法：选择器1，选择器2，选择器3...{css样式}

 ul,div{
          width: 100px;
      }

5.伪类选择器：是选择器的螺栓，控制选择器的状态

语法：选择器：伪类{css样式}

有代表性的是a标签，他有四种状态，四种状态如果同时存在就按照顺序：L-V-H-A

a:link        未访问状态

a:vixited        访问后的状态

a:hover        鼠标悬停时的状态

a:active         鼠标激活（鼠标点击不松手）状态

开发过程中一般只有hover

 a:link{
          color: red;
      }
      a:visited{
          color: black;
      }
      a:hover{
          color: blue;
      }
      a:active{
          color: pink;
      }

五.边框

给别设置语法：

border-top/border-right/border-bottom/border-left:

后面有三个值分别是线的粗细、线型、颜色

线型：solid 实线        dotted 点状线        dashed 虚线        double 双线

也可以四个方向同时设置：border：粗细 线型 颜色  

特殊值：none（去点边框）

            border-top: 5px solid red;
            border-left: 5px dotted black;
            border-bottom: 5px double pink;
            border-right: 5px dashed blue;

也可以分别属性设置 四个方向同时设置

border-width：设置边框的粗细

border-style：设置线型

border-color：设置边框颜色

备注：支持四个值，顺时针给值，代表上 右 下 左，

        支持一个值，代表四个方向值一直

        支持两个值，代表 上下   左右

        支持三个值，代表 上   左右   下

六.边框制作三角形

div{
           width: 0;
           border-width: 50px;
           border-style: solid;
           border-color: red transparent transparent;
       }