传智播客学习总结---CSS层叠样式表

CSS(Cascading Style Sheets)层叠样式表作用是将网页内容和显示样式进行分离，提高了显示功能。

CSS代码格式：

       选择器名称 { 属性名：属性值；属性名：属性值；……}

选择器（对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果）：

  标签选择器：

例：<style type ="text/css">

h1{
　color:red;
　font-size:25px;
}

</style>

类选择器（在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置，相同标签设置不同样式的时候，用class进行区分。不同标签进行相同设置的时候，用class进行统一定义）

例：<style type="text/css">

                     .title{

                            color:blue;

                            font-size:12px;

                     }

              </style>

      

<p class="title">类选择器</p>

       ID选择器：(使用方法跟class选择器基本相同,格式为#ID值)

                     例：<style type="text/css">

                                   #title{

                                          color:blue;

                            font-size:12px;

                     }

              </style>

              <p id="title">ID选择器</p>

扩展选择器：

       1，关联选择器：标签中是可以嵌套标签的，关联选择器可以让相同标签下的不同标签有不同样式。例：p b{
　　                            color:maroon;
　                         　    text-decoration:underline;

}

<p> <b> 关联选择器</b> </p>

             

2，组合选择器：对多个不同选择器进行相同设置。

       例：p,b{

                     color:maroon;
　                         text-decoration:underline;

              }

<p> 组合选择器</p>

<b> 组合选择器</b>

3，伪元素选择器：通常表示标签的某种状态，一般都是事先定义好的

       格式：标签名：伪元素。类名

    例：a:link  超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态。

a:active 点击超链接时的状态。

                    

CSS与HTML在网页代码中结合的四种方式：

1 使用html标签的style属性，将css的代码作为style属性的值存在。

    例：<table style="width:50%;border:solid 1px;">

    相对比较灵活，适用于局部修改，但对于多个标签同一样式比较麻烦。

2 使用style标签。将css代码进行封装。该标签要定义在head标签中。

       例：<style type="text/css">

                     p{

                            background:#ffffff;

                     }

              </style>
       适用于对多个标签的同一样式进行修改，但局部不灵活。

3 使用style标签，通过css代码的import，导入一个已存在的css文件。将css代码存放在css文件中。

例：<style type="text/css">

        @import url(table.css);

</style>

4 通过Html标签link，链接一个css文件进来。

例：<link rel="stylesheet" type="text/css" href="table.css" media="screen" />

 

样式优先级：

       由上到下，由外到内。优先级由低到高。