CSS样式表的使用 - 好文

在用html5写网页的时候，结合CSS能够让页面更美观。由于只在做课程设计和实习的时候使用过，并没有系统的学习过，使得自己对于CSS的使用一直处于能用，但是容易弄混的阶段。为了弄清楚CSS样式表的使用，特地看书系统学习，现总结如下：

CSS是通过选择器对不同的HTML标签进行控制，从而实现各种效果。常用的CSS选择器有标签选择器、类别选择器、id选择器。

标签选择器的使用

HTML网页是由很多标签组成的，例如图像标签<img>、超链接标签<a>、表格标签<table>，CSS标签选择器就是声明页面中哪些标签使用哪些CSS样式。例如设置a标签的字体和颜色样式风格：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
a{ font-size: 20px; color: #F93; } </style> </head> <body> <a href="">标签选择器</a>
</body> </html>
运行结果：

标签选择器有一定的局限性，如果声明标签选择器，那么页面中所有的该标签内容都会有相应的变化。

类别选择器的使用

类别选择器的名称由用户自己定义，并以"."号开头，要应用类别选择器的HTML标签，只需使用class属性来声明即可。例如设置h标签的字体样式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; color: red; } .two{ font-family:
"宋体"; font-size: 16px; color: blue; } </style> </head> <body> <h2
class="one">类别选择器one</h2> <p>正文内容</p> <h2 class="two">类别选择器two</h2> <p>正文内容</p>
</body> </html>
运行结果：

一个HTML标签不仅可以使用一种类别选择器，还可以同时加载多个类别选择器的样式，在多种类别选择器之间用空格进行分割即可。例如设置div标签的样式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; } .two{ background-color: green; }
</style> </head> <body> <div class="one">你好</div> <div class="two">你好</div>
<div class="one two">你好</div> </body> </html>
运行结果：

一般情况下class定义的样式可以重复调用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; color: red; } </style> </head> <body>
<div class="one">你好</div> <div class="one">很高兴见到你</div> </body> </html>
运行结果：

id选择器的使用

id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同，但是由于HTML页面中不能包含两个相同点的id标记，因此定义的id选择器也就只能被使用一次。命名id选择器要以"#"开头，后面加HTML标记中的id属性值。例如设置p标签的样式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
#one{ font-size: 18px; } #two{ font-size: 24px; } #three{ font-size: 36px; }
</style> </head> <body> <p id="one">ID选择器</p> <p id="two">ID选择器</p> <p
id="three">ID选择器</p> </body> </html>
运行结果：

在了解了用CSS设置样式后，如何实现在页面中包含CSS样式呢？实现方式有行内样式、内嵌式和链接式。

行内样式

行内样式是直接定义在HTML标签之内，通过style属性来实现，容易理解，但是灵活性不强。例如通过行内样式定义文字的颜色和大小：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> </head>
<body> <p style="color: #F00;font-size: 36px;">行内样式</p> <p style="color:
#F00;font-size: 24px;">行内样式</p> <p style="color: #F00;font-size:
18px;">行内样式</p> </body> </html>
运行结果：

内嵌式

内嵌式样式就是在页面中使用<style></style>标记将CSS样式包含在页面中，内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整，更加便于维护。示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-size: 36px; color: red; } .two{ font-size: 24px; color: yellow; }
.three{ font-size: 18px; color: greenyellow; } </style> </head> <body> <p
class="one">行内样式</p> <p class="two">行内样式</p> <p class="three">行内样式</p> </body>
</html>
运行结果：

链接式

链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后再HTML页面中通过<link>标签引用，是一种最为有效的使用CSS样式的方式。实例：

首先创建一个.css样式表，我这里取名为“demo.css”，如下图：

在该表中定义标签样式如下：
h1{ color:#6CFw; font-family: "trebuchet ms",arial,helvetica,sans-serif; } p{
color: #F0Cs; font-weight: 200; font-size: 24px; }

在页面中通过<link>标签将CSS样式表引入到页面中，此时CSS样式表定义的内容将自动加载到页面中。代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <link
href="css/demo.css" /> </head> <body> <h1>页面一</h1> <p>链接式</p> </body> </html>
运行结果如下：

<link>标签的语法结构如下：
<link rel='stylesheet' href='path' type='text/css'> /*参数说明： *
rel:定义外部文档和调用文档之间的关系 *href:CSS文档的绝对路径或相对路径 *type:指的是外部文件的MIME类型 */

热门工具换一换