前端基础笔记-CSS-02-复合选择器、标签显示模式、行高、背景、三大特性

css复合选择器

链接伪类选择器：

顺序不可变动，在实际开发中，一般先在a{}中写好共有的样式，然后再在a:link{}等中写各自的样式。

例：

    
    
"nav">   
        

            
"#">公司首页
            
"#">公司简介
            
"#">公司产品
            
"#">联系我们
        
    
    
    
"sitenav">    
        
"site-l">左侧侧导航栏
        
"site-r">"#">登录
    

标签显示模式(display)

块级元素

行内元素（内联元素）

行内块元素
在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
• 默认宽度就是它本身内容的宽度。
• 高度，行高、外边距以及内边距都可以控制。

标签显示模式转换

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

用到的时候写在style里相应的css选择器中即可。

行高

行高的测量

如何使文字垂直居中：
文字的行高等于盒子的高度。

行高=上距离+文字内容+下距离。因为上距离=下距离，所以只要行高=盒子高度，文字看起来就是垂直居中的。

css背景

背景颜色background-color: pink;

背景图片background-image : url(images/demo.png);

背景平铺background-repeat : ;

背景位置background-position:x坐标 y坐标;

背景附着background-attachment: ;

背景简写一般顺序background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

背景透明(css3)background: rgba(0, 0, 0, 0.3);
前三位为RGB值代表颜色，最后一个参数值为alpha透明度，取值在0-1之间。

css三大特性

层叠性

css样式冲突采取的原则：就近原则，后来居上。写在后面的会覆盖前面的。样式不冲突则不会层叠。
例：

    
    
    
    


    

        
层叠性
    

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
例：

    
    
    
    


    

        
继承性
    

优先级

1.权重计算
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，如果选择器相同，那就按层叠性原则执行；如果选择器不同，就会出现优先级问题。

从左到右，左边的优先级大于右边的优先级，四位之间没有进位。在使用！important时，只要将它加在属性值后面即可。

2.权重叠加
上述权重都是针对每个单位的，所以在出现复合选择器等情况时，就会出现权重叠加。注意，这个叠加是没有进位的。
例

• div ul li ------> 0,0,0,3 （三个标签选择器
• .nav ul li ------> 0,0,1,2 （类选择器+两个标签选择器
• a:hover -----—> 0,0,1,1 （标签选择器+伪类选择器
• 0,0,0,5 + 0,0,0,5 =0,0,0,10

3.继承的权重是0
例：

    
    
    
    


    
"nav">
        
继承的权重为0
    

在这个例子中，从表面上看，.nav是类选择器，权重为0,0,1,0，而p是标签选择器，权重为0,0,0,1，应该是.nav的优先级大于p的优先级。但是，表现样式的内容在p标签里，.nav没有直接选中p标签，red属性值是从.nav里继承过来的，继承的权重为0。所以小于p标签的权重。

4.关于css权重的六道题目
1）

    
    
    
    


    

        

            

                试问这行字体是什么颜色的？
            
        
    

在这个例子中，表现样式的标签为div，两个都选中了div，因此直接比较权重即可，div div>div

2）

    

    
"father">
        
试问这行字体是什么颜色的？
    

这个例子中，一个是继承权重为0，一个是标签选择器权重为0,0,0,1

3）

    
    
	

		

			

				

					

						

							

								

									

										

											

												
"me">试问这行文字是什么颜色的
											
										
									
								
							
						
					
				
			
		
	

在这个例子中，表现样式的标签为div，两个都是选中了的，第一个为标签选择器的叠加，第二个为ID选择器，根据权重的计算，左边大于右边，ID选择器的优先级是大于标签选择器的叠加的.

4）

		
	
		
"father" class="c1">
			
"c2">
				试问这行字体是什么颜色的？
			
		
	

5）

	

	
"box1" class="c1">
		
"box2" class="c2">
			
"box3" class="c3">
				文字
			
		
	

6）

		
	
		
"father" class="c1">
			
"son" class="c2">
				试问这行字体是什么颜色的？