样式的格式:
样式名 样式的值 多个样式之间使用分号分隔
内联
优点:控制精确
缺点:代码重用性很差
内嵌样式
优点: 代码重用性好
缺点:控制不精确
外部样式
优点:重用性最好
缺点 控制最不精确
内联优先级最高
内嵌次之
外部样式再次
<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{ 300px; text-align:center; height:300px; background-color:#0C9; vertical-align:middle; color:#FFF; line-height:300px; } #annui{ 104px; height:104px; background-color:#09F; font-size:16px; margin:20px 30px 20px 30px } *{ margin:0px auto; padding:0px} </style> </head> <body> <div style="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选择器
越精确的优先级越高