CSS样式指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Miracle_Yan/article/details/85011414

一，简介

CSS 指层叠样式表（Cascading Style Sheets）。主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。通俗的来讲，我们可以用 CSS 来美化我们的 HTML 页面。CSS 可以让我们从HTML结构和样式分离出来，使用 CSS 可以减少网页的代码量，增加网页的浏览速度。

二，基本语法

CSS语法由三部分构成：选择器、属性和值，书写方式如下：

选择器 {
	属性1：属性1的值；
	属性2：属性2的值；
	属性3：属性3的值；
}

三，CSS 的引入方式

有三种方法可以在站点网页上使用样式表：

外联式 Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式 Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式 Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

代码示例：
test.html：

<!DOCTYPE html>
<html>
<head>
	<title>Test Demo</title>
	<meta charset="utf-8">
	<!-- 嵌入式，使用<style type="text/css"></style>包裹，通常定义在 <head></head> 标签体内 -->
	<style type="text/css">
		/*修改h2标题的字体眼色为蓝色*/
		h2 {
			color: blue;
		}
	</styl*e>//*-
	<!-- 外联式，使用<link rel="stylesheet" type="text/css" href="outer.css">引入，通常定义在 <head></head> 标签体内 -->
	<!-- href 属性值指定需要引入的 css 样式文件链接 -->
	<link rel="stylesheet" type="text/css" href="outer.css">
</head>
<body>
	<!-- 内联式，直接嵌套在标签体内 -->
	<h1 style="color: red;">1231312312</h1>
	<h2>1231312312</h2>
	<h3>1231312312</h3>
</body>
</html>

outer.css：

/*修改h3标题的字体颜色为粉红色*/
h3 {
	color: pink;
}

显示效果：
CSS 引入方式

四，常用的 CSS 选择器

1，元素选择器

您可以使用元素类型作为选择器来选择元素的所有实例。
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Test Demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*统一设置所有<p>标签的文字的颜色、大小、加粗和倾斜*/
		p {
			color: blue;
			font-size: 30px;
			font-weight: bold;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>12345678</p>
	<p>abcdefgh</p>
	<p>一二三四</p>
</body>
</html>

显示效果：
元素选择器

2，class 选择器

class选择器选择具有特定类的元素。
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Test Demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*class 选择器，使用.类的名称，来选择具有特定类的元素*/
		.a {
			color: blue;
			font-size: 30px;
			font-weight: bold;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p class="a">12345678</p>
	<p class="a">abcdefgh</p>
	<p>一二三四</p>
</body>
</html>

显示效果：
class 选择器

3，id 选择器

ID 选择器通过 id 属性选择元素。
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Test Demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*id 选择器，使用“#ID名称”，来选择指定ID的元素*/
		/*ID命名必须唯一，不能重复*/
		#a {
			color: blue;
			font-size: 30px;
			font-weight: bold;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p id="a">12345678</p>
	<p class="a">abcdefgh</p>
	<p>一二三四</p>
</body>
</html>

显示效果：
ID 选择器

五，选择器优先级

选择器优先级大小，有以下几个原则：

内联式 > 嵌入式 > 外联式
按搜索的精度，id 选择器 > class 选择器 > 元素选择器
就近原则，相同优先级下，距离 HTML 元素越近优先级越高

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Test Demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		p {
			color: red;
		}
		#a {
			color: blue;
		}
		.b {
			color: pink;
		}
		.c {
			color: yellow;
		}
	</style>
</head>
<body>
	<!-- 内联式 > 嵌入式 > 外联式 -->
	<p style="color: blue;">12345678</p><!-- 显示蓝色 -->
	<p>ABCDEFGH</p><!-- 显示红色 -->
	<!-- 按搜索的精度，id 选择器 > class 选择器 > 元素选择器 -->
	<p id="a" class="b">abcdefgh</p><!-- 显示蓝色 -->
	<!-- css 样式声明中，.c 的声明更靠近 HTML 元素，所以字体的颜色为粉红色 -->
	<p class="b c">一二三四</p><!-- 显示黄色 -->
	<p class="c b">一二三四</p><!-- 显示黄色 -->
</body>
</html>