css是指层叠样式表,用来进行网页风格设计。采用css技术能够更加精确、有效的控制页面的布局、字体、颜色、背景和其他效果实现。
下面就做一个简单的把外部css文件嵌套在html中的范例:
首先建立一个完整的html网页,在这里文件名为poetry1.html
<html>
<head>
<title>
CSS样式表范例
</title>
</head>
<body>
<h1>古诗欣赏</h1>
<h2>春夜喜雨</h2>
<p>好雨知时节,<br>
当春乃发生。<br>
随风潜入夜,<br>
润物细无声。<br>
</p>
<p>
[唐]杜甫
</p>
</body>
</html>
接下来建立相应的css文件,poetry1.css。css的语法格式为:选择器{属性:属性子},例body{color:red}。
由于上面的html代码中有两个相同的标记<p></p>,为了能让标记相同的这两部分内容显示不同的效果,在这里我们给上面的p标记分别加上一个id属性a和b,同时加上引用css文件的语句<link rel="stylesheet" type="text/css" href="poetry2.css" />。
修改上面的poetry1.html代码为:
<html>
<head>
<title>
CSS样式表范例
</title>
<link rel="stylesheet" type="text/css" href="poetry1.css" />
</head>
<body>
<h1>古诗欣赏</h1>
<h2>春夜喜雨</h2>
<p id="a">好雨知时节,<br>
当春乃发生。<br>
随风潜入夜,<br>
润物细无声。<br>
</p>
<p id="b">
[唐]杜甫
</p>
</body>
</html>
相应的poetry1.css文件代码如下所示:
body{
text-align:center;
}
h1{
font-style:italic;
color:#977c00;
font-size:40pt;
}
h2{
display:block;
font-size:30pt;
background-color:RGB(218,196,255);
}
#a{
display:block;
font-size:20pt;
color:red;
background-color:RGB(175,175,175);
word-spacing:40;
line-height:60px;
}
#b{
display:block;
font-size:15pt;
color:blue;
background-color:RGB(255,128,255);
}
这里强调一下:
1,如果对于相同名称的标记想使用不同的显示样式,则选择符可以使“#”加上该名称的ID属性值。例#a。
2,如果相对不同名称的标记使用相同的样式,则选择符可以是“.”加上标记的class属性。以后遇到该属性再加以解释说明。
到这里就可以直接在IE浏览器中运行poetry.html文件了。
效果如下图所示: