文章目录
- 前言
- 一、CSS样式表是什么？
- 二、使用内容
- 1.CSS选择器
- 2.在页面中包含CSS
- 总结
前言
如果我们只是使用HTML那些东西做个网站的前端界面，毫无疑问会是10年、05年才有翻盖手机时候的上网风格。因为传统的HTML语句要实现页面美化在设计上时十分麻烦的，而CSS的出现改变了这个情况。
一、CSS样式表是什么？
CSS样式表是为弥补HTML在显示属性设定上的不足而指定的一套拓展样式标准。
CSS规则：CSS样式表包含三部分，选择器、属性和属性值。语法格式如下：
选择器{ 属性1:属性值;
属性2：属性值；
<!--...-->
}选择器： 所有的HTML语言中的标记都是通过不同的CSS选择器来控制的。对于选择器的命名，和我们创建类名时一样，可以自定义，但不同的是有的选择器命名时，需要按照一定的格式。
属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表属性、表格属性等内容。当有多个属性时用“;”分号隔开。这些属性的使用取决于浏览器的支持程度，因此，当我们在一个高级浏览器中搭建网站时，可能在其他的浏览器不适用，需要进行调试。
属性值：某属性的指定值。属性值和属性之间用冒号（:）分开。
以下表格将介绍CSS样式表各个属性，以及各个属性的属性值：
| 属性 | 解释 | 对应属性值举例 |
| color | 定义文本颜色 | red、#00ff00、rgb(255,0,0) |
| font-size | 定义字体大小 | 12px、16px等像素值 |
| font-family | 定义字体类型 | 宋体、楷体 |
| background-color | 定义背景颜色 | blue、#00ff00、rgb(255,0,0) |
| margin | 定义元素外边距 | 18px、10px等像素值 |
| padding | 定义元素内边距 | 20px、9px等像素值 |
| border | 定义边框的样式、宽度和颜色 | 1px solid black（1px厚，实心，黑色的边框） |
| width | 定义元素宽度 | 24px、36px等像素值 |
| height | 定义元素高度 | 28px、30px等像素值 |
| text-align | 定义文本对齐方式 | left、right、center、jusify等 |
| display | 定义元素的显示方式 | block、inline、inline-block、flex、grid等 |
| position | 定义元素的定义方式 | static、relative、absolute、fixed等 |
| float | 定义元素的浮动方式 | left、right、none等 |
| text-decoration | 定义文本装饰效果 | none、underline、overline、line-through等 |
| text-transform | 定义文本转换效果 | uppercase、lowercase、capitalize、none |
| text-overflow | 定义文本溢出时的处理效果 | clip、ellipsis、string |
| box-shadow | 定义元素的阴影效果 | h-shadow v-shadow blur spread color inset（控制阴影效果的六个不同的属性值） |
| border-radius | 定义元素的圆角效果 | 24px、36px等像素值 |
| opacity | 定义元素的透明度 | 0（完全透明）到1（不透明）之间的值 |
| z-index | 定义元素的堆叠顺序 | 整数值 |
实操展示：
<style>
h1{ <--! h1为选择器名 -->
font-family:宋体； <!-- 属性:属性值 -->
color:red;
}
</style><style>标签是用来在HTML文档中嵌入CSS样式代码，并控制元素的外观和布局。需要注意的是，要使用<style>标签生效，需要将它放置在<head>标签的内部。
选择器名h1可以根据需求自定义。
二、使用内容
1.CSS选择器
CSS选择器经常使用的是标记选择器、类别选择器、id选择器等。这些选择器可以根据不同的HTML进行控制，实现各种效果。
（1）标记选择器
CSS标记选择器用于声明页面中哪些标记采用哪些CSS样式。例如，创建a标记选择器用于声明中所有<a>标记的样式风格。
实操展示：定义h1标记选择器，在该标记选择器中定义<h1>标记的样式风格
<head>
<style>
h1{
font-size:9px;
color:#F80;
}
</style>
<head>这便是一个普普通通的标记选择器。
进一步展示一下它是如何使用的：
<html>
<head>
<style>
h1{
font-size:90px;
color:#F90;
}
</style>
</head>
<title>网站</title>
<body>
<h1> 仙人已乘黄鹤去 此地空余黄鹤楼 </h1>
<!-- 注释：此处在html中所有创建的h1,会自动调用title中同名为h1的标记选择器，采用相同的样式 -->
</body>
</html>运行结果：
第一，无论是什么选择器，<style>标记和所有选择器要写在<head>标记中。
第二，标记选择器的名称与标记同名，定义的样式对所有同名标记风格统一。
（2）类别选择器
类别选择器和标记选择器一样，名称都是由开发者自己定义，属性和属性值的使用也一样。不同处是，类别选择器以"."点号开头。
语法如下：
<head>
<style>
.类别选择器名1{
属性名:属性值1;
}
.类别选择器名2{
属性名:属性值2;
}
</style>
</head>使用标记选择器十分便捷，但是使用它后，所有该标记的样式都会被迫统一，无法实现每个标记的样式不同。这时候使用如上的类别选择器就十分轻巧了。将对于的效果引用于不同的标记即可。
实操展示：
<html>
<head>
<style>
.h1_red{
font-size: 45px;
color:red;
}
.h1_blue{
font-size: 45px;
color:blue;
}
.h1_green{
font-size: 45px;
color:green;
}
</style>
</head>
<title>网站</title>
<body>
<h1 class="h1_red"> 这是一个红色标题 </h1>
<!-- 注释：使用class选择相同类别的不同样式的选择器-->
<h1 class="h1_blue"> 这是一个蓝色标题 </h1>
<h1 class="h1_green"> 这是一个绿色标题</h1>
</body>
</html>运行结果：
第一，在标记中，使用class来选择相同类别的不同样式的选择器，直接在引号中输入名称即可，没有“.”点号。
第二，类别选择器可以下划线区分样式的不同，更加直观的引用。
（3）id选择器
id选择器是通过HTML中的id属性来选择并添加样式的，与类别选择器基本相同。不同之处在于id是唯一的，即开发者定义的id选择器只能被使用一次。
命名id选择器以"#"号开始，语法如下：
<head>
<style>
#id选择器名{
属性名:属性值;
}
#id选择器名{
属性名:属性值;
}
</style>
</head>id选择器以"#"号开头，只能使用一次。id选择器名称自定义，建议直观些。
实操展示：
<html>
<head>
<style>
#t1{
font-size:25;
color:red;
}
#p{
font-size:20;
}
</style>
</head>
<title>网站</title>
<body>
<h1 id="t1" align="center"> 震惊！数年的食用油竟然被工业用油污染！</h1>
<p id="p">
据XX社报报道，河北散装食用油罐装车出现运完煤油、柴油等工业用油后，未经清洗，直接罐装食用油。食用油安全令人担忧。
</p>
</body>
</html>运行结果：
如上图所示，在使用id选择器时，在标记中直接引用id值即可，写入引号中。id选择器以#号开头，同时只能使用一次。
2.在页面中包含CSS
所谓“在页面中包含CSS”，就是在实际开发中向HTML写入CSS码的具体操作。
（1）行内样式
行内样式比较简单粗暴，直接定义在HTML标记里边，通过style属性来实现。
语法如下：
<标记 style=" 属性:属性值 ">
<!--标记的内容-->
</标记>行内样式直接通过style关键字在标记中明确了样式类型。
实操展示：
<html>
<title>网站</title>
<body>
<h1 style="color:red; text-align:center;"> 红色标题</h1>
<h1 style="color: blue; text-align:center;"> 蓝色标题</h1>
<h1 style="color: green; text-align:center;"> 绿色标题</h1>
</body>
</html>运行结果：
不足之处在于不能灵活多变，只是硬板地敲出标记的样式。
（2）内嵌式
内嵌式样式表就是在<head>标记中使用<style></style>标记将CSS样式包含在页面中。语法格式如下：
<head>
<style>
选择器名{
属性:属性值;
}
</style>
</head>所谓内嵌式，不过是我们刚接触到看到的写法，在<head>标记中使用<style>标记，在里边创建选择器，进行使用。具体的实操展示我在这里就不展示了，因为 1.CSS选择器的实操展示都是在介绍内嵌式写法。
（3）链接式
链接式式CSS样式表最常用的一种引用样式表的方法。将CSS样式定义在一个单独的文件中，然后在HTML文件中使用<link>标记引用，这是最有效的CSS样式的方式，麻烦的是更改CSS样式需要切换文件，并且要确保文件的存在。
<link>标记的语法如下：
<link rel='stylesheet' href='path' type='text/css'>rel：定义外部文档和调用文档间的关系。
href：CSS文档的绝对或相对路径。
type：指外部文件的MME类型。
注：简单使用的话，我们通常只使用href属性即可。
实操展示：创建两个文件，一个CSS文件，一个HTML文件，HTML文件调用CSS文件。
CSS文件：
/* Style for links */
h1{
color: red; /* 设置链接文本颜色为蓝色 */
font-size: 45px; /* 移除链接的下划线 */
text-align:center;
}
p{
font-size: 35px; /* 鼠标悬停时显示下划线 */
}CSS文件中写明了两个选择器，一个是h1标题样式，另一个是p段落样式。
HTML文件（已引用上面的CSS文件）：
<html>
<title>网站</title>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<!--以上已经使用了链接式样式表，该HTML的样式由CSS文件的选择器决定-->
<body>
<h1> 论人生的意义与未来的思考 </h1>
<p> 人生的意义在于我们追求自己渴望的美好事物的过程。而对于未来的思考，非人力所可能企及，需要顺应自然和社会规律，不可执念过深。
</p>
</body>
</html>运行结果：
如上图所示，HTML文件并没有创建任何CSS选择器进行装饰，通过<link>标记将一个CSS文件进行引用到HTML文件，CSS文件中写的所有选择器都修饰于HTML文件。这种链接式，链接外部CSS表的方法使得样式和内容分离，提高代码的可维护性和灵活性。
总结
以上就是CSS样式表，以及应用到HTML文件上的具体方法，本文仅仅简单介绍了CSS的使用，而CSS样式表提供了大量能使我们精美地开发网站的界面和UI。有批评和补充的内容，欢迎读者在评论区中留言。
