从零开始学习html

前言：

今天是学习html第三天，让我们看看今天的学习成果。

学习内容：

1、css介绍、css书写的位置、css的语法
2、4类选择器

css介绍：

css中文名叫层叠样表网页是一个多层的结构，css可以给每一层结构设置样式，最终你看到的是最上面的一层。

css书写的位置:

第一种方式：内联样式/行内样式

        书写位置：开始标签  style属性，讲css样式写在style属性值里面

              可以写多个样式，只要用分隔号；隔开即可

        优缺点：

          优点：有针对性

          缺点：1、结构和表现耦合了

               2、修改起来不方便

        注意：不推荐使用

第二种方式：内部样式表

       书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，

            在花括号里面书写css样式，可以写多组样式，样式之间用；隔开,

                最后一个样式后可以不加分隔号，但一般都加上

        优缺点：

          缺点：复用率不高

        注意：css比较多的时候，不推荐使用

            但教学期间，用的可能比较多

 第三种方式：外部样式表

      书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中

          对应的html结构，在花括号里面书写css样式,

          然后在head标签内写一个link标签将对应的css文件引入到html文件内

     注意：推荐使用

css的语法：

 CSS的语法：

        选择器  声明块    

        选择器：有多种选择器

        声明块：具体的css样式，是写在花括号里面

        样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

4类选择器：

常用选择器：

1、元素选择器（标签选择器）

      作用：选中对应标签的内容

      语法：标签名{css样式····}

      例子：h1{}，h3{},p{}

2、id选择器

      作用：选中对应id属性值的内容

      语法：#id属性值{}

      例子：#p1{},#p2{}····

      注意：id属性值不能重复使用

3、class选择器

      class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用

      作用：选中对应class属性值的内容

      语法：.class属性值{}

      注意：class属性值可以起多个，中间用空格隔开即开

      例子：.s1{},.ss{},.pp{}

4、通配选择器

          作用：选中所有的标签，进行设置

          语法：*{}

复合选择器：

1、交集选择器

      作用：选中同时符合多个条件的内容

      语法：选择器1选择器2选择器3····{}

      注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面

      例子：p#p1.pp{},div.ss{}

2、并集选择器（群组选择器）

      作用：同时选中对应的内容

      语法：选择器1,选择器2,选择器3····{}

      例子：.red,#red1,div,p{}

关系选择器:

1、子元素选择器

      作用：通过指定的父元素找到指定的子元素

      语法：父元素>子元素{}

      例子：#red>.green{},   .pp>em{}

2、后代选择器

      作用：通过指定的祖先元素找到指定的后代元素

      语法：祖先元素 后代元素{}

      例子：.class .red{},#red p{}

3、下一个兄弟选择器

      作用：通过指定的兄长找到紧挨着我的一个兄弟

      语法：兄+弟{}

4、选择下面所有的兄弟(前面的不选)

      作用：通过指定的兄长找到下面所有的兄弟

      语法：兄～弟{}

      例子：#red～.p1{}

属性选择器：

 1:属性选择器

            通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

            语法：[属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素