1.css选择符

　　选择符又称为选择器，定义了将影响文档中的哪些部分。

　　-1.元素选择符

　　　　通配符：*{}

　　　　　　下面的例子（test.css） 匹配文档中所有的标签

*{
       background-color: blue;}

　　　　　　一般情况下，我们会在html初始化的时候使用通配符，例子如下，将上和左边距都设为0

*{
        padding: 0;     margin: 0; }

　　　　类选择敷：.类名称{}

　　　　　　下面的例子，将p标签的内容变为绿色

　　　　　　

1 index.html代码如下 2  3  4  5     
      6      7     
      8  9 10     
haha
11     hehe12 13 14 15 css.css代码如下16 *{17      padding: 0;18      margin: 0;19  }20 21 .hp{22     color:green;23 }

　　　　id选择符：#id名称{}

　　　　　　下面的例子，将span标签内容变为紫色

index.html代码如下    
             
         
haha
    hehecss.css代码如下*{
        padding: 0;     margin: 0; }.hp{
       color:green;}#hs{
       color: purple;}

　　　　类型选择符（标签选择符）：标签{}

　　　　　　下面的例子将li标签内容变为红色

index.html代码如下    
             
         
haha
    hehe    
     
        
      
我是列表
        
      
我是列表
        
      
我是列表
        
      
我是列表
    
     
css.css代码如下*{
        padding: 0;     margin: 0; }.hp{
       color:green;}#hs{
       color: purple;}li{
       color: red;}

 

　　-2.关系选择符

　　　　- 子元素选择器：父亲>儿子

　　　　- 兄弟选择器：你自己~你的兄弟

　　　　　　1.本身不起作用

　　　　　　2.之前的元素不起作用

　　　　　　例子：下面的代码只有第二个和第三个h3标签会变色

inde.html代码如下    
             
         
这是一个标题
    
这是一个文字段落
    
这是一个文字段落
    
这是一个标题
    
这是一个文字段落
    
这是一个标题
    
这是一个文字段落
    
这是一个文字段落
css.css代码如下p~h3{
       color: brown;}

　　　　- 相邻选择器：E+F

　　　　　　下面的例子中，第三行和最后一行变色

index.html代码如下    
             
         
这是一个标题
    
这是一个文字段落
    
这是一个文字段落
    
这是一个标题
    
这是一个文字段落
    
这是一个标题
    
这是一个文字段落
    
这是一个文字段落
css.css代码如下p+p{
       color: red;}

　　　　- 包含选择器：EF

　　　　　　下面的例子，所有的ul，li标签内容全部变成红色

inde.html代码如下    
             
         
     
        
      
列表项目
        
      
            
       
                
        
列表项目
                
        
列表项目
                
        
列表项目
                
        
列表项目
            
       
        
        
      
列表项目
        
      
列表项目
    
     
css.css代码如下ul li{
       color: red;}

　　-3.属性选择符

　　　　1.属性

　　　　2.写法:

　　　　　　　　1)当前元素[属性]{}

　　　　　　　　　　例子：haha变色而hehe不变色

    
                 haha    hehe

　　　　　　　　2)当前元素[属性=“属性值”]{}

　　　　　　　　　　例子，第一个百度标签会变为红色

    
                 百度一下    百度一下    百度一下    百度一下

　　-4.伪类选择符

　　　　- 定义：它允许给html标签的某种状态设置样式

　　　　　　1）元素：link：设置超链接a在未被访问前的样式

　　　　　　2）元素：visited：设置超链接a在其链接地址已被访问过时的样式

　　　　　　3）元素：hover：设置元素在其鼠标悬停时的样式

　　　　　　4）元素：active：设置元素在被用户激活(在鼠标点击与释放之间的事件)时的样式

　　　　- 注意：

　　　　　　1）a：hover必须位于a：link和a：visited之后，a：active必须位于a:hover之后

　　　　　　2）可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te(active)，即使用love，hate两个单词来记忆

　　　　　　例子：

    
                 
     
        
      
伪类选择器
    
     

　　-5.伪对象选择符

　　　　-1.元素：before{}：设置在对象前发生的内容，用来和content属性一起使用，并且必须定义content属性。

　　　　-2.元素：after{}：设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性。

选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注：！important要写在属性值后面，分号的前面。

　　例:

　　　　p{

　　　　　　color: red !important;

　　　　}

    
                 
        优先级    

 

2.css的背景，颜色，边框

　　1.背景：纯色，图片

　　　　background-attchment：背景图像是否固定或者随着页面的其余部分滚动。

　　　　background-color：设置元素的背景颜色

　　　　background-image：把图片设置为背景

　　　　background-position：设置背景图片的起始位置

　　　　background-repeat：背景图片是否以及如何重复

　　

    
                
哈哈
   
哈哈
   
哈哈

　　2.边框

　　　　border-width：边框宽度

　　　　border-style：边框样式

　　　　border-color：边框颜色

　　　　border-radius：设置圆角边框

　　　　box-shadow：设置对角阴影

　　　　boder-image：边框背景图片

　　3.颜色

　　　　1.颜色值

　　　　　　1.color name(用颜色名称表示)：color：red；

　　　　　　2.HEX（十六进制数值表示法）：color：#ff0000；

　　　　　　3.RGB(三原色：红绿蓝)

　　　　　　4.RGBA(三原色+不透明度[0.0-1.0])

　　　　　　5.透明色：color：transparent

　　　　2.属性

　　　　　　opacity：<number>    设置对象的不透明度

　　　　　　1：不透明

　　　　　　0：完全透明

　　　　例子：