css基础知识

css3

1. 学习目标
    1) 如何重置样式
    2) 如何优化样式
        1. 如何布局
        2. 如何细化
2. 认识css
    层叠样式表，用于修饰HTML结构的（布局、样式修饰）
        <div>
            <div>左</div>
            <div>右</div>
        </div>
    1) 什么是布局？
        默认情况下，左、右是上下排列（块元素的特点是独占一行空间！）
        可以使用css技术，让其进行左右排列
    2) 什么是样式修饰
        排列（居中，居左，居右）
        字体（粗细、大小、颜色）
        背景（背景色，背景图片，背景渲染起点，背景填充方式）

3. css语法
    1. 样式
        选择器1 {
            key1:val1;     /*规则 */
            key2:val2;
            ....
        }
        选择器2 {
            key1:val1;     /*规则 */
            key2:val2;
            ....
        }
        什么是选择器？
            精确选择要添加样式的目的地
        .header > div:first-child{
            float:left;
            text-align: left;
            color: #666666;
        }
        解释：
            选择器        .header > div:first-child 
            规则             {key:val}
                文本类 text-
                字体类 font-
                背景色 background
                布局类 float position ...

1. css如何应用到html中
   1) 嵌入在html(header)标签中【上课】

   将css写在html中
   

   2) 外部导入一个单独的css文件【项目】

   将css写在一个单独的css文件中，然后通过link导入到html中
   

   3) 嵌入在html标签中【较少，修改别人代码】

   将css写在html中的标签的属性中
   

2. 选择器
   1) 基本选择器

   id选择器 
       #two {}
   类选择器
       .second{}
   标签选择器
       p {}        
   或者选择器
       .first , .second {}
   并且选择器
       div.first{}

   2) 层次选择器

   子代选择器 (建议在5层以内)
       div.first > p {}
   后代选择器
       div.first li {}
   下一个兄弟选择器
        #two_li + li
   之后所有兄弟选择器
        #two_li ~ li

   3) 过滤器

   1. 伪元素过滤器（伪元素选择器）
       ::after（在选中元素的内部的后面插入一个元素，伪元素没有开始结束标签）
       ::before（在选中元素的内部的前面插入一个元素，伪元素没有开始结束标签）
       
       ul>li::before{}
       ul>li::after{}
   
       <ul>
           <li> <span></span> </li>
           <li> <span></span> </li>
           <li> <span></span> </li>
       </ul>
   
   2. 伪类过滤器（伪类选择器）
       :first-child
       :last-child
       :nth-child(n)
   
       :only-child(独生子)
   
       :first-of-type(同类型的第一个)
       :last-of-type
       :nth-of-type
       
       :hover(光标放上去以后变颜色)
       :visited(访问过后变颜色)
       :active(激活，按住鼠标不放的时候变颜色)
   
   3.属性过滤器(一般应用在表单)
       选择器[class = ' ']    
       div[id]        选中div元素，并且这个元素具有id属性
       div[id=one]    选中div并且id属性值为one，等价于div#one
       div[id~=0]    选中div并且id的值之一为0
       div[id$=0]    选中div并且id以0结尾
       div[id^=0]    选中div并且id以0开头
       div[id*=0]    选中div并且id的值中包含0

   4.选择器优先级

   特权：!important (添加在规则上，优先级最高)
   
   权值:
   1000 声明在style属性中的规则
   100 id选择器
   10 类选择器，伪类选择器，属性选择器
   1 元素选择器，伪元素选择器