CSS实现和选择器

本课内容：

一、实现CSS四种方式

1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)

2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)

3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入

<style type=”text/css”>@import url(“1.css”);</style>

4，通过HTML头标签中的link标签链接一个CSS文件

<link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>

二、选择器

标签选择器 div{}

类选择器 .haha

id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)

类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高

 

三、CSS笔记

css：将网页内容和显示样式进行分离，提高了显示功能。

 

CSS层叠样式表cascading style sheets

       将网页中的样式单独分离出来，完全由CSS控制，增强样式复用性和扩展性。

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

CSS与HTML结合的4中方式：

1、每个HTML标签都有style属性

2、当页面中有多个标签具有相同样式时，可定义style标签封装样式以复用

       <style type=”text/css”>css代码</style>

3、当多个页面使用相同样式时，可将样式单独封装为CSS文件导入

       <style type=”text/css”>@import url(“1.css”);</style>

4、通过HTML头标签中的link标签链接一个CSS文件

       <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>

技巧：为提高样式的复用性和可扩展性，将多个样式单独定义并封装为CSS文件，如p.css、div.css……在一个总的CSS文件中，使用import导入这些CSS文件，然后在HTML页面中用link标签将这个总的CSS文件导入即可。

优先级：就近原则       标签上设置的style属性可以覆盖其他样式

 

选择器：

1、标签选择器：每个HTML标签名即为一个选择器

2、类选择器：标签中的class属性指定   定义样式要加点  js引用时用className

3、ID选择器：标签的id属性，尽量保证唯一，便于JavaScript获取元素

4、扩展选择器：

       a、关联选择器：标签中的标签  table div表示表格中的div区域

       b、组合选择器：多个选择器     逗号分隔

       c、为元素选择器：元素的状态 如超链接的默认状态、点击状态、悬停状态等

                     a:link      a:visited         a:hover           a:active   LVHA顺序

                     删除超链接默认下划线：text-decoration：none

                     p:first-letter    p:first-line             focus:IE6不支持

CSS滤镜：通过一些代码丰富了的样式

网页设计时，DIV+CSS

       DIV和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果

       可加border、color等属性，P标签中不要嵌套DIV标签

 

四、代码一

1 
     16 17 18 19 
     20 21 
     22 
     23 
     24 
     33 
     34 
     35 
     36 46 
     47 
     48 
     49 
     50 51 52     
     62      
     63 64 65     
     66     
     67     
     
      这是一个div区域1
     
68     
     
      这是一个div区域2
     
69     span区域170     span区域271     
这是一个段落1
72     
这是一个段落2
73 74     75 76 

 

 

五、代码二

     
     
     
伪元素选择器演示
     
    
             
     
      这是一个div
      区域1
     
        
     
      这是一个div区域2
     
        span区域1        span区域2        
这是一个段落1
        
这是一个段落2