第一样式表可用(1)嵌入式样式表(2)引入式样式表,两种方式来实现,
如下我便以代码的形式放在下面:
(1)嵌入式样式表
demo.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS样式使用</title> <style type="text/css"> div{background:red;font-size:20px} <!--HTML标记定义 --> .div1{background-color:green;font-size:20px;} <!--class定义样式 --> #divid{background-color:blue;font-size:20px;} <!--id定义样式 --> <!---组合选择器不能与其他选择器共存--> p,h2,h3,.p1,#pid {color:red;font-size:20px;} <!--组合定义样式 --> a:link { color:red; } a:hover { color:green; } a:active { color:yellow; } a:visited { color:blue; } </style> </head> <body> <div class="div1" id="divid">css定义样式</div> <h2>这是定义样式1</h2> <h3>这是定义样式2</h3> <p>这是定义样式3</p> <p class="p1">这是定义样式4</p> <p id="pid">这是定义样式5</p> <a href="http://www.baidu.com/1" target="_blank">百度1</a> <a href="http://www.baidu.com/2" target="_blank">百度2</a> <a href="http://www.baidu.com/3" target="_blank">百度3</a> <a href="http://www.baidu.com/4" target="_blank">百度4</a> <a href="http://www.baidu.com/5" target="_blank">百度5</a> </body> </html>
(2)引入式样式表
demo.html
<!doctype html> <html> <head> <title>Css样式使用</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>css样式使用</h2> <a href="http://www.baidu.com/1" target="_blank">百度1</a> <a href="http://www.baidu.com/2" target="_blank">百度2</a> <a href="http://www.baidu.com/3" target="_blank">百度3</a> <a href="http://www.baidu.com/4" target="_blank">百度4</a> <a href="http://www.baidu.com/5" target="_blank">百度5</a> <br> <h2>这是定义样式1</h2> <h3>这是定义样式2</h3> <p>这是定义样式3</p> <p class="p1">这是定义样式4</p> <p id="pid">这是定义样式5</p> <div>css的html定义样式</div> <div class="div1">css的class定义样式</div> <div id="divid">css的id定义样式</div> <div class="div1" id="divid">css定义样式的优先级:id > class >HTML 样式</div> </body> </html>
style.css
body{ background-color:yellow; color:#fff } p,h2,h3,.p1,#pid {color:red;font-size:20px;} /* 组合样式定义*/ a:link { color:red; } /* 显示红色*/ a:hover { color:green; } /* 鼠标移动至该处变绿色*/ a:active { color:yellow; } /* 鼠标点击该处时变×××*/ a:visited { color:blue; } /* 鼠标点击该处后变蓝色*/ div{background:red;font-size:20px} /* HTML样式定义 */ .div1{background-color:green;font-size:20px;} /* class样式定义 */ #divid{background-color:blue;font-size:20px;} /* id样式定义 */
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。