标签:
(1) 对于ID定义型,每个ID在页面中只能用一次。尽管一个ID在页面内多次使用也能实现效果,但是这样写不规范。如果同一个样式页面内多次使用,应该用class定义型。
(2) ID可与标记定义型结合使用,例子:
<!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" /> <style type="text/css"> h2#title{color:red;} </style> <title>定义选择器</title> </head> <body> <h2 id="title">能实现效果</h2> <p id="title">无法实现效果</p> </body>上面例子中,h2#title的意思是只有应用于属性名称h2的title才起效果。
(3) class定义型可以与ID定义型混合使用,例子:
<!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" /> <style type="text/css"> ul#list{color:red;} .style1{color:blue;} .style2{color:green;} </style> <title>定义选择器</title> </head> <body> <ul id="list"> <li class="style1">类目一</li> <li class="style2">类目二</li> <li>类目三</li> </ul> </body>
类似地,如果将.style应用于其他属性名称,例如<div class="style">定义型混用</div> 这里的.style是不起作用的。
(5) class定义型支持同时引用多种样式,例如:
<!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" /> <style type="text/css"> .setting{color:red;} .setting1{font-size:40px;} .setting2{font-style:italic;} </style> <title>定义选择器</title> </head> <body> <p class="setting setting1">定义选择器学习</p> <p class="setting setting2">定义选择器复习</p> </body>
p{color:red;font-size:50px;font_weight:bold}第二个层叠样式表文档,标题:css2.css
p{color:green;font-size:50px;font_weight:bold}HTML文档:
<!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" /> <link rel="stylesheet" type="text/css" href="css1.css" /> <link rel="stylesheet" type="text/css" href="css2.css" /> <title>定义选择器</title> </head> <body> <p>层叠样式</p> </body>因为css2.css在css1.css的下方,因此文档内容的颜色会设置为绿色。
<!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" /> <style type="text/css"> p i{color:red;font-size:50px;} div i{color:green;font-size:40px;} </style> <title>定义选择器</title> </head> <body> <p>定义选择器<i>学习</i></p> <div>定义选择器<i>复习</i></div> </body>在这段代码中,p i{}和div i{}中分别定义了<p></p>和<div></div>中标记<i></i>的属性设定值。这样写的效果是不同的标记内的<i>标记赋予了不同的属性,比较简洁。注意,如果要设定标记<p></p>和<div></div>的属性,需要另外再写。
标签:
原文地址:http://blog.csdn.net/codemonkeysama/article/details/51339545