本文共 3430 字，大约阅读时间需要 11 分钟。

css:渲染

层叠样式表	作用:		渲染页面		提高工作效率格式:	选择器{属性:值;属性1:值1;}后缀名:	.css 独立的css(样式)文件

和html元素的整合

方式1:内联样式表 通过标签的style属性设置样式	方式2:内部样式表 在当前页面中使用的样式		通过head标签的style子标签导入		例如:

方式3:外部样式表 有独立的css文件		通过head标签的link子标签导入		例如:

			
   				
   								
   
     hello css 内联样式表
   
		
   
     hello css 内部样式表
   
		
   
     hello css 外部样式表
   
			

选择器

id选择器		要求:			html元素必须有id属性且有值   
   			css中通过"#"引入,后面加上id的值  #id1{...}	class选择器		要求:			html元素必须有class属性且有值 
   			css中通过"."引入,后面加上class的值  .cls1{...}	元素选择器		直接用元素(标签)名即可   xxx{...}	派生的选择器	属性选择器★		要求:			html元素必须有一个属性不论属性是什么且有值  
   			css中通过下面的方式使用				元素名[属性="属性值"]{....}				例如:					xxx[nihao="wohenhao"]{....}

div[attr="val"]{	color: green;}

后代选择器		选择器 后代选择器{...}   在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式了解的选择器	锚伪类选择器

a:link {color: #FF0000}	/* 未访问的链接 */a:visited {color: #00FF00}	/* 已访问的链接 */a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */a:active {color: #0000FF}	/* 选定的链接 */

选择器使用小结:	id选择器:一个元素(标签)	class选择器:一类元素 	元素选择器:一种元素	属性选择器:元素选择器的特殊用法使用的时候注意:(了解)	若多个样式作用于一个元素的时候		不同的样式,会叠加		相同的样式,最近原则	若多个选择器作用于一个元素的时候		越特殊优先级越高 id优先级最高

   Hello CSS

属性(了解)

字体	font-family:设置字体(隶书) 设置字体家族	font-size:设置字体大小	font-style:设置字体风格文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进	color:文本颜色	line-height:设置行高	text-decoration: 向文本添加修饰。 none underline	text-align:对齐文本列表:	list-style-type:设置列表项的类型 例如:a 1  实心圆 	list-style-image:设置图片最为列表项类型 使用的时候使用 url函数  url("/i/arrow.gif");背景:	background-color:设置背景颜色	background-image:设置图片作为背景 url尺寸:	width:	height:浮动:	float: 可选值 left right	分类:	clear:设置元素的两边是否有其他的浮动元素		值为:both 两边都不允许有浮动元素	display:设置是否及如何显示元素。		none 此元素不会被显示。 		block 此元素将显示为块级元素，此元素前后会带有换行符。 		inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

框模型:(理解)

一个元素外面有padding(内边距) border(边框) margin(外边距)	padding:元素和边框的距离	margin:元素最外层的空白上面这三个属性都有简写的属性	若设置大小的时候 四个值:顺序 上右下左		padding:10px 10px 10px 10px		若只写一个的话 代表四个边使用同一个值  padding:10px		若只写两个个的话 代表四个边使用同一个值 padding:10px 20px		若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30pxborder(边框)	还可以设置颜色 风格	简写属性:		border:宽度	风格 颜色;		border:5px solid red;				solid:实线		dashed:虚线		double:双实线

首页

采用css实现布局

			
   								
   
				
    
					
     				
    
				
    
					
     				
    
				
    
					
     登录					
     注册					
     购物车				
    
			
   
									
   
				
    
					
     
首页 
     					
     
首页 
     					
     
首页 
     				
    
    							
   
						
    			
    
				
     			
    
								
    			
   
    				
     
					
      热门商品					
      				
     
				
     
					
      
						
       					
      
					
      
						
       
							
        						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
						
       
							
        							
        
电饭煲
							
        
200
						
       
					
      
									
     
			
   
						
   
				
    			
   
			
   
				
    			
   
									
   
				
    
					
     
						关于我们						关于我们						关于我们						关于我们						关于我们					
					
     
						Copyright © 2005-2016 传智商城 版权所有					
				
    
			
   
	

转载地址：http://mcdvi.baihongyu.com/