<!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>css规范</title> <style type="text/css"> body{color:red;font-size:12px;} </style> </head> <body> <p>xxxx</p> <p>xxxx</p> <p>xxxx</p> <div>xxxx</div> <div>xxxx</div> <ul>xxxx</ul> <dl>xxxx</dl> </body> </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" /> <title>行内样式表</title> </head> <body> <p>xxxx</p> <p>xxxx</p> <p>xxxx</p> <div>xxxx</div> <div style="color:#F00;font-size:12px;">xxxx</div> <ul>xxxx</ul> <dl>xxxx</dl> </body> </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" /> <title>内嵌样式表</title> <style> ul{font-size:12px; color:red;} div{font-size:14px; color:#03C;} </style> </head> <body> <p>xxxx</p> <p>xxxx</p> <p>xxxx</p> <div>xxxx</div> <div>xxxx</div> <ul>xxxx</ul> <dl>xxxx</dl> </body> </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" /> <title>外部样式表－－链接式</title> <link rel="stylesheet" href="link.css" type="text/css" /> </head> <body> <p>xxxx</p> <p>xxxx</p> <p>xxxx</p> <div>xxxx</div> <div>xxxx</div> <ul>xxxx</ul> <dl>xxxx</dl> </body> </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" /> <title>显示模式</title> <style type="text/css"> div{height:100px; width:200px; background-color:#F00; display:inline;} p{height:100px; width:200px; background-color:#F00; display:inline;} span{height:100px; width:200px; background-color:#F00; display:block;} font{height:100px; width:200px; background-color:#F00; display:block;} b{height:100px; width:200px; background-color:#F00; display:block} a{width:100px; height:50px; background-color:#036; display:inline-block;} </style> </head> <body> <div>123</div> <p>123</p> <span>abc</span> <font>abc</font> <b>abc</b> <a>百度</a> <a>百度</a> <a>百度</a> </body> </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" /> <title>选择器分类</title> <style type="text/css"> .suiyi{color:#F00; font-size:12px;} .lan{color:#03C;} </style> </head> <body> <div>xxxx</div> <div class="suiyi">xxxx</div> <div>xxxx</div> <div class="lan">xxxx</div> </body> </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" /> <title>类选择器</title> <style type="text/css"> .g{color:#176CEE; font-size:200px; font-weight:bold; } .o{color:#D4412D;font-size:200px; font-weight:bold;} .oo{color:#FFB404; font-size:200px; font-weight:bold; } </style> </head> <body> <span class="g">G</span> <span class="o">o</span> <span class="oo">o</span> <span class="g">g</span>le </body> </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" /> <title>id选择器</title> <style type="text/css"> #zuihou{color:#F00;} h1{color:#F00;} </style> </head> <body> <div>xxxx</div> <h1>xxxx</h1> <h1>xxxx</h1> <div>xxxx</div> <p>xxxx</p> <div>xxxx</div> <div id="zuihou">xxxx</div> </body> </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" /> <title>层叠性</title> <style type="text/css"> div{color:#F00;} div{color:#00F;} </style> </head> <body> <div>xxxx</div> </body> </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" /> <title>继承性</title> <style type="text/css"> div{color:#F00;} strong{color:#00F;} </style> </head> <body> <div>我在<strong> <b>xxxx</b></strong>zzzz呢</div> </body> </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" /> <title>小说排行榜</title> </head> <body> <h2 align="center" style="color:#ffff00;font-size:18px;">今日小说排行榜</h2> <table width="800" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#d7d7d7" height="350" style="color:#00f; font-size:14px;"> <tr bgcolor="#f1f1f1"> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr bgcolor="#ffffff" style="color:#0F0; "> <td align="center">1</td> <td align="center">武动乾坤</td> <td align="center"><img src="up.jpg" width="13" height="11" /></td> <td align="center">623557</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">2</td> <td align="center">鬼吹灯</td> <td align="center"><img src="up.jpg" width="13" height="11" /></td> <td align="center">1</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">3</td> <td align="center">武动乾坤</td> <td align="center"><img src="down.jpg" width="13" height="11" /></td> <td align="center">1</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">4</td> <td align="center">武动乾坤</td> <td align="center"><img src="up.jpg" width="13" height="11" /></td> <td align="center">45</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">5</td> <td align="center">武动乾坤</td> <td align="center"><img src="up.jpg" width="13" height="11" /></td> <td align="center">455</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">6</td> <td align="center">武动乾坤</td> <td align="center"><img src="down.jpg" width="13" height="11" /></td> <td align="center">2554</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr bgcolor="#ffffff"> <td align="center">7</td> <td align="center">武动乾坤</td> <td align="center"><img src="up.jpg" width="13" height="11" /></td> <td align="center">44</td> <td align="center">123456</td> <td align="center"><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> </table> </body> </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" /> <title>优先级</title> <link rel="stylesheet" href="yxj.css" type="text/css" /> <style type="text/css"> div{color:#0F0;} h1{color:#F00;} .lv{color:#0F0;} .dada{font-size:100px;} #lan{color:#00F;} </style> </head> <body> <div style="color:#00F;">xxxx</div> <h1 id="lan" class="lv dada" style="color:#F0F">xxxx</h1> </body> </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" /> <title>百度一下，你就知道</title> <style type="text/css"> div{text-align:center;} body{font-size:12px;} .search{width:420px; height:25px;} .tj{height:30px; width:100px;} .nav{height:60px; font-size:14px;} .bk{font-size:14px; height:60px;} .sou{height:50px;} .map{height:60px;} .copyright{line-height:25px;} font{ font-family:Arial, Helvetica, sans-serif;} </style> </head> <body> <div class="logo"><img src="bdlogo.gif" width="270" height="129" title="百度一下，你就知道"/></div> <div class="nav"><a href="#">新 闻</a> <strong>网 页</strong> <a href="#">贴 吧</a> <a href="#">知 道</a> <a href="#">音 乐</a> <a href="#">图 片</a> <a href="#">视 频</a> <a href="#">地 图</a></div> <div class="sou"><input type="text" class="search" /> <input type="submit" value="百度一下" class="tj"/></div> <div class="bk"><a href="#">百科</a> <a href="#">文库</a> <a href="#">hao123</a> | <a href="#">更多>></a></div> <div class="map"><img src="ic.jpg" /> <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></div> <div class="copyright"><a href="#">把百度设为主页</a> <a href="#">安装百度卫士</a><br /> <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a><br /> <font>©</font>2013 Baidu 使用百度前必读 京ICP证030173号</div> </body> </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" /> <title>样式倾斜</title> <style> em{color:#F00; font-style: normal;} strong{color:#03C; font-weight:normal;} </style> </head> <body> xxxx-聚集众多<em>java培训</em>大师，口碑最好的<em>java培训</em>机构，先就业... <em>java培训</em>的龙头老大,<strong>口碑</strong>最好的<em>java培训</em>、.net培训、PHP培训、网页培训机构，问天下培训机构谁敢争锋? 就业率高居中国培训机... www.xxxx.cn/ 2012-3-1 - 百度快照 北京尚学堂-口碑最好的<em>java培训</em>机构，就业后分期还！就业率居北京... 尚学堂是北京口碑最好的<em>java培训</em>机构，就业率始终位居北京<em>java培训</em>机构首位，并为学员提供就业后分期还等服务！提供java视频教程下载，师资:马士兵，高淇等等，是国内... www.bjsxt.com/ 2012-2-29 - 百度快照 北京<em>java培训</em>谁最好？java基础,java视频领导品牌-动力节点java培... 北京<em>java培训</em>领导品牌:动力节点<em>java培训</em>机构，创造全班最低薪资每月5000元的记录，拥有国内最具实战能力的<em>java培训</em>讲师，整体就业率高达95%，在<em>java培训</em>行业遥遥领先！... www.bjpowernode.com/ 2012-3-1 - 百度快照 </body> </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" /> <title>导入</title> <style type="text/css"> @import url(link.css); </style> </head> <body> <p>xxxx</p> <p>xxxx</p> <p>xxxx</p> <div>xxxx</div> <div>xxxx</div> <ul>xxxx</ul> <dl>xxxx</dl> </body> </html>
@charset "utf-8"; /* CSS Document */ @import url(demo.css); p{color:#00f; font-size:12px;}
转载请备注。