WEB基础__CSS 层叠样式表

CSS 层叠样式表

将网页中的样式分离出来，完全由CSS来控制

增强样式的利用性以及可扩展性。

格式：

   选择器{属性名：属性值; 属性名：属性值。。。}

 

CSS和Html代码相结合的四种方式：

1，每一个Html标签都有一个style属性。

2，当页面有多个标签须要相同样式时，可以进行利用。

    <style> 

        css代码

    </style>

3,当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个CSS文件。

   通过在每个页面中定义

   <style>

        @import  url("1.css");

   </style>

4,通过html中head标签中的link标签连接一个css文件。

   < link  rel="stylesheet"  href="1.css" />

 

  技巧：为了提高相同的样式的利用性以及可扩展性，可以将多个标签样式进行单独定义,并封装成CSS文件

      p.css,div.css.....

      在一个css文件中使用css的import将多个标签样式文件导入

      然后在html页面上，使用link标签导入这个总的css文件即可。

      如：1.css

          @import  url("p.css");

          @import  url("div.css");

         < link  rel="stylesheet"  href="1.css"  />

 

      -----------------------

 

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

 

      选择器 ：其实就是样式要作用的标签容器。当样式分离后，Html作用在于用标签封装数据，然后将css加载到指定标签上

 

选择器的基本分类：

 1，标签选择器：就是html中的每一个标签名。

 2，类选择器：就是每一个标签中的class属性。用 . 来标识。

      只用来给CSS所使用，可以对不同标签进行相同样式设定。

如：

div.haha{   //指明为标签是div  其class == haha 的样式 

background-color:#ff3;    

}

.haha {  // 不管什么标签，是所有 class == haha 的样式

 

}

<div  class=”haha”> 这是一个div区域< /div>

 

    预定样式，可以实现动态效果。

 

 3，ID选择器：就是每一个标签中的ID属性，但是要保证ID唯一性，用 # 来标识。

   ID不公可以被CSS所使用，还可以被javascript所使用。

    如：

#qq{  //为所有id == qq 的样式

 

}

<div  id=”qq”> 这是一个div区域< /div>

 

        选择器优先级：style属性>ID > class > 标签

 

扩展选择器：

 1，关联选择器：就是对标签中的标签进行样式定义。选择器 选择器。。。

如：

div  a{  //表示div标签中的a标签的样式

 

}

 2，组合选择器：对多个选择器进行相同样式的定义。将多个选择器通过，隔开的形式。

如：

.haha , div b{  // 表示所有类名class==haha 和div标签下b标签的样式

}

 3，伪元素选择器：其实就是元素的一种状态。

     a:link : 超链接被点前状态

     a:visited : 超连接点击后状态

     a:hover : 悬停在超链接上的状态

     a:action : 点击超链接时

    在定义这些状态时，有一个顺序：l v h a

 

   p:first-letter  段落中的第一个字母

   p:first-line   段落的第一行文本

    :focus   具有焦点的元素，IE6不支持，但FireFox支持

 

CSS滤镜：其实就是通过一些代码完成丰富的样式。

 

当使用到CSS的更多属性时，需要查阅CSS api

 

网页设计的时候 div+css

     div:等级区域

     span:块级区域

     p:行级区域  p中不要嵌套div ，因为都是行级