大家好，又见面了，我是你们的朋友全栈君。
在用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类型
*/
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/158952.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...