1.设置段落的blackground-color属性
p{blackground-color:red;
}
设置border(边框)属性
p{blackground-color:red;
border:1px solid gray; 宽度为一个像素,实线,灰色
}
注:在CSS中元素名称的两边不加<>
2.把CSS引入到XHTML中:在<head>元素里添加样式的开始和结束标志
(把CSS用于HTML有3中方式:链接的样式表(使用link),嵌入式样式表(使用style元素嵌入到head中),内联样式表(直接内联到元素中),此处为嵌入式样式表)
<head>
<style type=“text/css”>
p{
color:maroon;
}
</style>
</head>
3.为标题添加样式
h1{
font-family:sans-serif;(把字体设置为sans-serif)
color:gray;(设置字体颜色为gray)
}
h2{
font-family:sans-serif;(把字体设置为sans-serif)
color:gray;(设置字体颜色为gray)
}
注意:规则相同时可整合到一起
h1,h2{
font-family:sans-serif;(把字体设置为sans-serif)
color:gray;(设置字体颜色为gray)
}
4.给欢迎词加底部边框下划线
border-bottom:1px solid blac;
例如:
h1,h2{
font-family:sans-serif;
color:gray;
border-bottom:1px solid black;
}
区别:指定只针对<h1>的规划
h1,h2{
font-family:sans-serif; (使用sans-serif字体时没有“衬线”)
color:gray;
}
h1{
border-bottom:1px solid black;
}
5.对多个页面进行相同的CSS设计
①取出"lounge.html"里的规则并以一个名为“lounge.css”的CSS文件保存它们(把style元素删除)
注意:CSS文件中只包含从lounge.html剪切过来的CSS规则,不包括<style>
②把"lounge.html"链接到外部样式表(经常称CSS文件为“样式表”):
使用<link>的HTML元素实现这个功能
<head>
<link type="text/css" rel="stylesheet" href="lounge.css" />
</head>
解释:
link:使用<link>元素来链接外部信息
type="text/css":信息的类型是"text/css",也就是一个CSS样式表
rel="stylesheet":rel属性指明XHTML文件和你要链接的东西之间的关系。我们要链接到一个样式表,因此将值设为“stylesheet”
href="lounge.css":样式表定位于这个href(现在我们使用的是相对链接,但它可以是一个完整的URL)
<link>是一个空元素
③对其他页面进行类似的处理
注意:链接的路径是否需要改动,如:
<link type="text/css" rel="stylesheet" href="../lounge.css" />