css折叠样式(2)——定义样式表
第一样式表可用(1)嵌入式样式表(2)引入式样式表,两种方式来实现,
如下我便以代码的形式放在下面:
(1)嵌入式样式表
demo.html
<!doctypehtml><html><head><metacharset="utf-8"><title>CSS样式使用</title><styletype="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><divclass="div1"id="divid">css定义样式</div><h2>这是定义样式1</h2><h3>这是定义样式2</h3><p>这是定义样式3</p><pclass="p1">这是定义样式4</p><pid="pid">这是定义样式5</p><ahref="http://www.baidu.com/1"target="_blank">百度1</a><ahref="http://www.baidu.com/2"target="_blank">百度2</a><ahref="http://www.baidu.com/3"target="_blank">百度3</a><ahref="http://www.baidu.com/4"target="_blank">百度4</a><ahref="http://www.baidu.com/5"target="_blank">百度5</a></body></html>
(2)引入式样式表
demo.html
<!doctypehtml><html><head><title>Css样式使用</title><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="style.css"></head><body><h2>css样式使用</h2><ahref="http://www.baidu.com/1"target="_blank">百度1</a><ahref="http://www.baidu.com/2"target="_blank">百度2</a><ahref="http://www.baidu.com/3"target="_blank">百度3</a><ahref="http://www.baidu.com/4"target="_blank">百度4</a><ahref="http://www.baidu.com/5"target="_blank">百度5</a><br><h2>这是定义样式1</h2><h3>这是定义样式2</h3><p>这是定义样式3</p><pclass="p1">这是定义样式4</p><pid="pid">这是定义样式5</p><div>css的html定义样式</div><divclass="div1">css的class定义样式</div><divid="divid">css的id定义样式</div><divclass="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样式定义*/
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。