CSS(层叠样式表)

  CSS层叠样式表是用在标准文档流中的,它的引用方式分为以下三种;

  1 使用外部样式表

       格式<link rel="stylesheet"  href=".css">  表示引用外部资源,该代码放在HTML文件中的head标签中,

       特点:实现了内容结构与表现形式代码的分离,方便重复使用和维护;

     使HTML的代码更加简洁,有利于程序员和搜索引擎的优化。

  2 使用内部样式表

      格式 <head>

      <style>

        (css代码)

      </style>

    </head>

  特点:没有了样式表的文件,在某些时候可以提升效率;

     多了页面难以共享样式,不利于代码的重复使用;

     HTML和CSS代码相互混合,不利于程序员和搜索引擎的阅读。

  3 使用行内样式表

      格式:<style=" ">   (添加在body的具体的某一个元素内 如<p> <i>)   CSS代码写在元素的style属性中,行内样式表不写选择器。

   特点:没有了样式表的文件,在某些时候可以提升效率;

     多了页面难以共享样式,不利于代码的重复使用;

     HTML和CSS代码相互混合,不利于程序员和搜索引擎的阅读;

     与javacript操作的是行内样式;

     在测试模式使用时,可以立即展现出效果。

  CSS的注释格式:/*注释内容*/

  CSS代码格式:h1{color:red;text-align:center}     (h1表示选择器 表示该规则应用到那个元素上    color:red;text-align:center  表示声明块有哪些规则)

      CSS选择器:

       1 元素选择器:      书写格式:  标记名{   声明块   }           (表示所有的该标记名都将应用该标签的规则)

    2  类选择器:        书写格式:.类名{    声明块  }                  (所有class属性为指定类名的元素都将应用该标签的规则)

   3  ID选择器:         书写格式 : #ID值{   声明块      }               (属性为ID值的元素将应用该标签的规则)

           4  组合选择器:     书写格式:  例如h1,h2,h3{    声明块  }          (该规则将同时应用到多个选择器上)

           5  伪类选择器:     书写格式:  元素名称:伪类名称  例如 a:link { 声明块  }   (表示用户在未点击的相关信息)

   6  后代选择器:      书写格式:父级选择器名称+空格+子级选择器名称{   声明块     }  例如div p{  声明块  }     (表示该规则将应用到父级元素的具体子级元素)

   7 子级选择器:      书写格式: 父级元素名称>子级元素名称 {  声明块  }    (与后代选择器相似)

        弄清楚各个选择器的应用范围和什么时候使用不同的样式表,这样可以在编写代码时候减少错误率,同时还能提高代码书写的效率。

原文地址:https://www.cnblogs.com/whitesnow/p/7638520.html