第二章 常用CSS和规范笔记

1. 用css去调整界面的元素的展示效果
    层叠样式表:用来描述元素在界面中的展示效果,可以方便将界面的元素的展示效果分离出来单独控制.
    层叠:在样式中一个层次结构,更具体的样式覆盖通用样式
    样式表:适用某一些**符合条件**的元素,有一定规则的
    代码示例:
   

<li style='color: #ff0036;'>这是一个列表</li>

2.样式分三种
    行内样式:直接写在标签中的样式,以分号间隔多条样式
        特点:对于页面的结构展示来说不直观,不予维护;
        行内样式比内联样式优先级高.
    内联样式:存放在head标签下的style标签之中,不予维护;
      

 <style>
         p{
           color: red;
           width: 100px;
           height: 100px;
         }
</style>

    外联样式
        在head中添加<link rel="stylesheet" href="style.css" />
        href是样式文件的路径
3. 样式标签中的注释
    /*这是样式style标签的注释
    里面可以写很多很多年多的描述信息
    */
4.CSS的结构和语法
    选择器{
        样式属性:值;
        样式属性:值;    
    }----声明块
    满足条件的所有元素,单条样式分号作为分隔
    同样的选择器,后写会覆盖前一个样式
    代码示例:
   

p{
     color: red;
     width: 100px;
     height: 100px;
    }

5.常用的样式:width/height/color/background-color/font-size
代码示例
  

 div{
       width: 100px;/* 宽度*/
       height: 100px;/* 高度*/
       background: red;
       color:yellow;
    }

6.三种选择器命名方式
    .box1{/*class选择器*/
      width: 100px;/* 宽度*/
      height: 100px;/* 高度*/
    }
    <li class='box1'>这是一个列表</li>
    <div class='box1'>这是二个列表</div>
    class一类相似物体,可以重复出现

    #box1{/*id选择器*/
      width: 100px;/* 宽度*/
      height: 100px;/* 高度*/
    }
    <li id='box1'>这是一个列表</li>
    id当前页面唯一性的命名

    li{/*tag选择器*/
      width: 100px;/* 宽度*/
      height: 100px;/* 高度*/
    }
    <li>这是一个列表</li> 唯一性

7.优先级
    行内元素 > id >class选择器>tagNama(标签)
    !important 优先级最高(不推荐)

8.CSS命名规范
命名以字母开头,不能单个字母,不允许带有广告的单词
ad/adber/advertising
全小写
9.选择器组合
A、后代选择器: 希望能从特殊结构中选择符合条件的元素
例如: div p{…}
从div里面选中p标签,可以跳级,没有直接关系,选中的元素永远是最后一个挨着大括号的元素

B、子代选择器: 后代选择器的强化版
例如: div>p{…}
从div里面选中p标签,不可以跳级,严格的父子关系,选中的元素永远是挨着大括号的元素

C、相邻(毗(pi4)邻)选择器: 不不不,我是问你身后挨着小姐姐
例如: li+li{…}
如果li同级相邻的为li标签,选择后面那个li标签同级关系,选中的元素永远是挨着大括号的元素

D、兄弟后代选择器: 不不不,我是问你身后的所有的小姐姐
例如: a~li{…}/* shift+tab上面的那个键*/
如果a同级的有li标签,都能选择得到,选中的元素永远是挨着大括号的元素