先来看一段代码:
<body style = "background-color:Silver;color:Blue">
<h1 style = "text-align:center">用1级标题显示文字</h1>
<h2 style = "text-align:center">用2级标题显示文字</h2>
<p style = "font-size:20px;font-family:隶书;text-align:center">文字大小20px,字体隶书</p>
<p style = "text-align:center;color:#008080">正常字体 <b>粗体 </b><i>斜体 </i><u>下划线</u></p>
</body>
在visual studio中运行一下,得到如图1的运行结果。
上述代码使用元素的style属性控制HTML5元素的样式,这种方式称为“内联式”。其优点是直观、方便。但缺点也十分突出,如果页面中有多个元素需要使用相同的样式,就需要进行多次重复书写,修改起来也是非常麻烦。为了解决这个问题,就产生了级联表样式(Cascading Style Sheets,CSS),简称样式表,是一种将页面元素样式设置集中化的方法,引入CSS的主要目的就是为了将页面结构与页面外观表现分离。
我们来看一个使用“嵌入式”样式定义方法,代码如下:
<head>
<title>嵌入式样式控制</title>
<style type = "text/css">
h1{font-size:20pt;color:Red}
h2{font-size:15pt;color:Blue}
</style>
</head>
<body>
<div>
<h1>第1章 ASP.NET与Visual Studio开发平台</h1>
<h2>1.1 C/S和B/S架构体系</h2>
<h2>1.2 ASP.NET的体系结构</h2>
<h1>第2章 网页设计基础</h1>
<h2>2.1 HTML5标记语言</h2>
<h2>2.2 style与CSS</h2>
</div>
</body>
运行结果如图2所示。
h2{font-size:15pt;color:Blue}
改为:
h2{font-size:15pt;color:Green}
运行结果如图3所示。
<head>
<link type = "text/css" href="样式文件名.css" rel = "stylesheet">
</head>
上述代码说明:rel = "stylesheet"的含义是,将当前文档关联到一个级联样式表中。href属性指出了被关联文件的名称,如果.css文件没有存放在当前目录中,应写出文件所在的URL。
使用“外部链接式”控制样式可以将样式定义应用到更为广泛的范围。
如果一个网页中同时使用了“内联式”、“嵌入式”、“外部链接式”样式定义,而且三种不同方式对同样的标记元素定义冲突,那结果会怎样呢?
答案是,浏览器将采用“就近原则”的有限原则,即采用与该元素位置最近的样式定义。
CSS常用选择器
(1)类型选择器
“类型选择器”也称为“标记选择器”或“标签选择器”,它是以网页中现有标记为名称的选择器,用于统一设置某种标记的样式。例如,前面“嵌入式”定义方法中的例子,使用的就是“类型选择器”。
(2)ID选择器和类选择器
为了使相同的网页元素具有不同的外观设置,可以通过指定元素ID名称并以该ID值为选择器设置样式。ID选择器书写时必须以“#”开头。
类选择器通过类名称指定一组样式设置,网页中的元素通过引用该类来应用这样的样式设置。类选择器书写时必须以“.”开头。举例代码如下:
<head>
<title>ID选择器和类选择器示例</title>
<meta charset = "utf-8" />
<style type = "text/css">
#img_300{width:300px}
#img_200{width:200px}
.img_auto{width:auto;height:auto;max-width:100%;max-height:100%;}
.imgdiv{position:absolute;top:20px;left:520px;width:100px;height:71px;}
</style>
</head>
<body>
<img id = "img_300" src = "1.jpg" alt = "not found"/>
<img id = "img_200" src = "1.jpg" alt = "not found"/>
<div class = "imgdiv">
<img class = "img_auto" src = "1.jpg" alt = "not founf" />
</div>
</body>
运行结果如图4所示,这里选用了一张小狗的图片。
<img id = "img_300" src = "1.jpg" alt = "not found"/>
<img id = "img_200" src = "1.jpg" alt = "not found"/>
使用类选择器的代码为:
<div class = "imgdiv">
<img class = "img_auto" src = "1.jpg" alt = "not founf" />
</div>
比较一下,一个使用的id,另一个使用的是class,所以称为ID选择器、类选择器。类选择器img_auto中的max-width和max-height是针对图片元素所在容器的div而言的,也就是说图片自动缩放最大占满div的范围,而div的大小及显示位置有类选择器imgdiv决定(层采用绝对定位方式;距离页面顶端20px;距离页面左端520px;层大小为宽100px,高71px)。
(3)包含选择器和组群选择器
包含选择器用于设置某元素下面子元素的样式。示例代码如下:
<style type = "text/css">
div a{font-size:36px;font-family:黑体}
</style>
上述代码的含义是,使用包含选择器设置<div>
标记下所有<a>
子标记的字号为36px,字体为黑体。
如果希望<div>
标记下的所有子标记都采用上述设置,可将代码改写成如下形式:
<style type = "text/css">
div *{font-size:36px;font-family:黑体}
</style>
其中*
为通配符选择器,表示所有子标记。
群组选择器可以对若干个不同元素进行统一的样式设置。例如,下列代码使用群组选择器使body、ul、li、a和p这几个元素具有相同的样式(内外边距均为0):
<style type = "text/css">
body,ul,li,a,p{padding:0;margin:0}
</style>