HTML编辑笔记4

1.CSS(层叠样式表)

2.CSS语法

    选择器{

        属性名1:属性值1;

        属性名2:属性值2;

     }

3.引用CSS的三种方式

    第一种:行内样式

        例:<a style="color:red;">内部样式</a>

    第二种:内部样式

        在head标签中,写入style标签.

        例:

          <head>

              .......

              <style type="text/css">

                  h1{

                    .........

                  }

              </style>

          </head>

    第三种:外部样式

        使用步骤:

            a)创建一个以.css为后缀的文件(css文件)

            b)在html中通过link引入css文件

                <link rel="stylesheet" href="css文件路径"/>

4.基本选择器

    4.1 标签选择器

        标签名{}

    4.2 类选择器

        .class属性值{}

    4.3 id选择器

        #id属性值{}

5.层次选择器

    5.1 后代选择器

        父元素 子元素{}

    5.2 子选择器

        父元素>子元素{}

    5.3 相邻兄弟选择器

        本元素+相邻兄弟元素{} 

    5.4 通用兄弟选择器

       本元素~兄弟元素{}

6.结构伪类选择器

    E F:first-child{}    //第一个子元素

    E F:last-child{}    //最后一个子元素

    E F:nth-child(?){}   // ?表示第几个子元素,还可以使odd奇数,even偶数

    E F:first-of-type{}  //指定类型的第一个元素

    E F:last-of-type{}  //指定类型的最后一个元素

    E F:nth-of-type(?){}   //?表示指定类型第几个子元素

注意: 

    E F:nth-child(n)在父级里从一个元素开始查找,不分类型.

    E F:nth-of-type(n)在父级里先看类型,再看位置.

7. 属性选择器

    E[attr] //具有属性attr的元素

    E[attr=val] //属性attr的值是val的元素

    E[attr^=val] //属性attr的值以val开头的元素

    E[attr$=val] //属性attr的值以val结尾的元素

    E[attr*=val] //属性attr的值包含val的元素

posted @ 2017-11-06 07:42  0w0  阅读(145)  评论(0编辑  收藏  举报