|
nbsp;
一、In-linenbsp;行内nbsp;
行内样式是在html标签里直接使用style属性nbsp;
nbsp;nbsp;
lt;pnbsp;style="color:nbsp;red"gt;textlt;/pgt;nbsp;
设定段落文字红色。nbsp;
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。nbsp;
二、Internalnbsp;内部nbsp;
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。nbsp;
nbsp;nbsp;
lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Strict//EN"nbsp;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"gt;nbsp;
lt;htmlgt;nbsp;
lt;headgt;nbsp;
lt;titlegt;CSSnbsp;Examplelt;/titlegt;nbsp;
lt;stylenbsp;type="text/css"gt;nbsp;
nbsp;nbsp;nbsp;nbsp;pnbsp;{nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;color:nbsp;red;nbsp;
nbsp;nbsp;nbsp;nbsp;}nbsp;
nbsp;nbsp;nbsp;nbsp;anbsp;{nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;color:nbsp;blue;nbsp;
nbsp;nbsp;nbsp;nbsp;}nbsp;
lt;/stylegt;nbsp;
...nbsp;
所有段落文字红色，链接蓝色。nbsp;
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。nbsp;
三、外部nbsp;
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：nbsp;
nbsp;nbsp;
pnbsp;{nbsp;
nbsp;nbsp;nbsp;nbsp;color:nbsp;red;nbsp;
}nbsp;
anbsp;{nbsp;
nbsp;nbsp;nbsp;nbsp;color:nbsp;blue;nbsp;
}nbsp;
如果上面保存为“web.css”，HTML里面的链接就像下面：nbsp;
nbsp;nbsp;
lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Strict//EN"nbsp;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"gt;nbsp;
lt;htmlgt;nbsp;
lt;headgt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;titlegt;CSSnbsp;Examplelt;/titlegt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;linknbsp;rel="stylesheet"nbsp;type="text/css"nbsp;href="web.css"nbsp;/gt;nbsp;
...nbsp;
后面教程里会讲到其他外联样式的方法，现在已经足够了。nbsp;
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存为"web.css"在html目录。nbsp;
nbsp;nbsp;
lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Strict//EN"nbsp;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"gt;nbsp;
lt;htmlgt;nbsp;
lt;headgt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;titlegt;Mynbsp;firstnbsp;webnbsp;pagelt;/titlegt;nbsp;
nbsp;nbsp;nbsp;nbsp;lt;linknbsp;rel="stylesheet"nbsp;type="text/css"nbsp;href="web.css"nbsp;/gt;nbsp;
lt;/headgt;nbsp;
...nbsp;
保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。nbsp;
（编辑：宁德站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
