样式

样式的格式：
样式名 样式的值 多个样式之间使用分号分隔

内联
优点：控制精确
缺点：代码重用性很差


内嵌样式
优点： 代码重用性好
缺点：控制不精确

外部样式
优点：重用性最好
缺点 控制最不精确

内联优先级最高

内嵌次之
外部样式再次

<div id="d1">准确控制</div> id不能使用中文打头

选择器的分类：

*{color:#009}
*表示所有

#d1{color:#0FC}
id选择器

.c1{color:#09F}
class选择器
span{color:#C09} 标签选择器 用标签名做选择器

选择器的优先级


标签选择器大于*(表示所有)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    	<style type="text/css">
        #d1{ text-decoration:none; color:blue}
		
		#a1{ width:300px;
			text-align:center;
			height:300px;
			background-color:#0C9;
			vertical-align:middle;
			color:#FFF;
			line-height:300px;
			}
			#annui{ width:104px;
					height:104px;
					background-color:#09F;
					font-size:16px;
					margin:20px 30px 20px 30px
					
					
				}
				*{ margin:0px auto; padding:0px}
        
        </style>
    
    
    
    
    </head>
    
        <body>
        	<div style="width:200px; height:200px; background-color:#03F; background-image:url(917912.jpg); background-repeat:no-repeat; background-position: left; background-size:600px 600px">wenzi</div>
            
            
            <div style=" font-family:微软雅黑; font-size:16px; font-weight:bold; font-style: italic; color:#909; text-decoration:underline">ziti</div>
            
            <a id="d1" href="http://www.baidu.com">chaolianjie</a>
            
           <center> <div id="a1">ceshi</div></center>
        
        	<div id="annui">baiduyixia</div>
            <br/>
            	<p style="text-indent:30px;">
                
            
            </p>
            
            
            
            
            
            
            
        </body>
    </html>

　　


class选择器大于标签选择器


id选择器大于class选择器


越精确的优先级越高

 

posted @ 2016-11-26 22:44  心若微漪  阅读(191)  评论(0)  编辑  收藏  举报