html学习分享（3）（有关css的部分）

css全称中文层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS具有以下特点：

1、丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

下面开始介绍有关css的用法

css的书写位置

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

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

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

        优缺点：

          优点：有针对性

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

               2、修改起来不方便

        注意：不推荐使用

      css语法：样式名，样式值

               color   设置字体的颜色  red  green  yellow  

               font-size  设置字体的大小   px   默认的字体大小是16px

               background-color  设置背景颜色   red  green  yellow  

/* 四种常用的选择器 */

需求一：标题变红色 */

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

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

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

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

    h1{

        color: red;

      }

       需求二：将第一句诗变绿色 */

      /* 2、id选择器

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

      语法：#id属性值{}

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

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

     #p1{

        color: green;

      }

      需求三：将第二句诗也变绿色 */

      3、class选择器

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

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

      语法：.class属性值{}

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

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

     .s1{

       color: orange;

     }

      需求四：给所有的标签字体变为24px */

      4、通配选择器

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

          语法：*{}

          */

      *{

        font-size: 24px;

      }

      /* 复合选择器两种 交集选择器，并集选择器  */

      /* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */

      /* 1、交集选择器

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

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

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

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

      */

      /* 需求二：将h1,h3字体颜色变为棕色*/

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

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

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

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

      */

      /* 用关系选择器来选中 */

      /* 需求一：为div的子元素h2设置一个字体颜色红色 */

      /* 1、子元素选择器

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

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

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

      */

    div>h2{

        color: red;

      }

      /* 需求二：div里的span元素字体都变为30px */

      /* 2、后代选择器

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

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

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

     

      */

      #cs span{

        font-size: 30px;

      }

      /* 需求三:通过衣服p标签找到生鲜区,加背景色粉丝*/

      /*

      3、下一个兄弟选择器

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

      语法：兄+弟{} */

      .p1+span{

        background-color: pink;

      }

      /* 需求四:

      通过衣服区找到下面所有的兄弟，设置字体颜色棕色*/

     

      /*

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

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

      语法：兄～弟{}

      例子：#red～.p1{}

     

      */

      .p1~span{

        color: orange;

      }

      */

今天就学了这么多谢谢大家