第五章：网页的样式
link /lɪŋk/ style /staɪl/
attribute /əˈtrɪbjuːt/ class /klɑːs/
attribute /əˈtrɪbjuːt/ hover /ˈhɒvə(r)/
active /ˈæktɪv/ focus /ˈfəʊkəs/
visited /'vɪzɪtɪd/ before /bɪˈfɔː(r)/
after /ˈɑːftə(r)/
CSS简介
CSS全称为层叠样式表,通常又称为风格样式表，它是用来进行网页风格设计的。
CSS拥有对网页对象和模型样式编辑的能力，是目前基于文本展示最优秀的文本展示语言。
在网页中，CSS通过设立样式表，可以统一地控制HTML中各标签的显示属性，如设置字体的颜色，大小，样式等。使用CSS还可以设置文本居中显示，文本与图片的对齐方式，超链接的不同效果等。
CSS同样也是一种标识性语言
引入CSS的四种方式
根据CSS在HTML文档中的使用方法和作用范围不同，在HTML页面中使用CSS样式有4种方法，分别是内联样式(行内样式)，内部样式表(内嵌样式)，外部样式表(链接外部样式)和导入外部样式。
内联样式（行内样式）
语法：
<标记名 style="样式属性：样式属性值；样式属性：样式属性值"></标记名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<h1 style="color: blue">关雎</h1>
<h2 style="color: green">佚名〔先秦〕</h2>
<p style="color: orange">关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
<p style="color: red">参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
<p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
</body>
</html>运行结果：
内部样式表（内嵌样式）
语法：
<style type="text/css">
选择符 1{样式属性：样式属性值；样式属性：样式属性值；...}
选择符 1{样式属性：样式属性值；样式属性：样式属性值；...}
选择符 1{样式属性：样式属性值；样式属性：样式属性值；...}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表(内嵌样式)</title>
<style type="text/css">
h1{color: red}
h2{color: orange}
p{color: green}
</style>
</head>
<body>
<h1>关雎</h1>
<h2>佚名〔先秦〕</h2>
<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
<p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
<p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
</body>
</html>运行结果：
外部样式表（链接外部样式）
外部样式表是把CSS代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中引用外部样式表即可。
链接
最低0.47元/天 解锁文章
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
