本文已参与「新人创作礼」活动，一起开启掘金创作之路。

[CSS]

层叠样式脚本

HTML CSS 都是前端的内容

HTML 四凉八柱

CSS 装修公司

提倡HTML与CSS分离

CSS 样式

元素内容的颜色 color

元素内容的背景色 backgrount-color

字体大小 font-size

RGB颜色

[0-255][0-255][0-255]

白色 255 255 255 ffffff

黑色 0 0 0 000000

RGB颜色查询对照表

CSS与HTML 进行组合的时候有三种

1、内联样式

把样式表写在标签内部作为标签中的style属性值出现

事实胜于雄辩，疗效胜于一切

2、内部样式

\ CSS\ \ \ \ span {\ background-color:pink;\ }\ .blood {\ color:black;\ background-color:red;\ font-size:40px;\ }\ #xb {\ color:black;\ background-color:green;\ font-size:40px;\ }\

3、外部样式

css 单独存放时，后缀名.css

css.css

span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}

testCss3.htm;

\ \

选择器

CSS 给指定标签相应的样式

标签选择器

span {
background-color:pink;
}

没有对就，没有

类选择器

.blood {
color:black;
background-color:red;
font-size:40px;
}

<span class="blood">伤害

id 选择器

#xb {
color:black;
background-color:green;
font-size:40px;
}

事实胜于<span id="xb">

下面给出所有的测试源码

testCss1.html（内联样式）

<html>
	<head>
		<title>CSS</title>
		<meta charset="utf-8">
	</head>
	<body>
		<span style="color:#ffffff;background-color:#000000;font-size:30px;">
		事实胜于雄辩，疗效胜于一切</span>
	</body>
</html>

testCss2.html（内部样式）

<html>
<head>
	<title>CSS</title>
	<meta charset="utf-8">
	
<style type="text/css">
span {
		background-color:pink;
}
.blood {
	color:black;
	background-color:red;
	font-size:40px;
}
#xb {
	color:black;
	background-color:green;
	font-size:40px;
}
</style>
</head>
<body>
	<span>事实胜于<span id="xb">雄辩</span>，疗效<span class="blood">胜于</span>一切。</span>
	<span>没有对就，没有<span class="blood">伤害</span>！</span>
</body>
</html>

testCss3.html（外部样式）

<html>
<head>
	<title>CSS</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
<body>
	<span>事实胜于<span id="xb">雄辩</span>，疗效<span class="blood">胜于</span>一切。</span>
	<span>没有对就，没有<span class="blood">伤害</span>！</span>
</body>
</html>