姓名：小明 性别：男 班别：19计机预师班在以上例子中，“姓名”可以称为字段或者属性，姑且叫它“属性”吧，而后面的“小明”则是属性值，这样子就形成了一种明确的数据组，同样道理，先看一下CSS代码：
background-color：red;
color:green;
font-size:2em;
......- 标签（tag）
<html>
<head>
<style>
p{
background-color:red;
color:green; font-size:2em;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧，再次留意这里的颜色</b>
</body>
</html>- 类（class）和ID
我们有这么一个场景：在以下代码中，我们给p标签加上了绿色的字体颜色，也就是说第12~13行的文字是绿色的，那如果我需要给“注意这里显示的颜色”和“再留意显示这里的颜色”这两行文本添加不同的颜色，怎么办呢？
NEWS.KemAOWanG.ORg.Cn<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧，再次留意这里的颜色</b>
</body>
</html> <html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧，再次留意这里的颜色</b>
</body>
</html>在以上代码中，我在第15行的p标签内加了一个class属性，属性值为“yellow”，然后第9~11行则是对yellow类的具体实现，像这样就可以给“注意这里显示的颜色”这行文本加了黄色（yellow）的效果了。
总结一下类的语法：.<类名>{<具体的CSS代码>}。 注意：类名是自定义的，你喜欢用什么类名就什么类名，但是，你所起的类名也要符合一些规则：一是必须以字母或者下划线（_）作为开头，后面可以加数字，不能加其他符号；二是类名是对大小写敏感的，也就是说一个字母的大写和小写状态是两个不一样的类名。 好了，接下来是另外一种实现方法，用ID. ID方法的实现在形式上跟类（class）差不多，在CSS选择器中，类的语法是，在类名前面加一个点（.），而ID的不一样的地方在于，它在ID名前面加的是一个#号，具体做法如下： NEWS.KemAOWanG.ORg.Cn <html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
#yellow{
color:yellow;
}
</style>
</head>
<body>
<p id="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧，再次留意这里的颜色</b>
</body>
</html>以上案例中，通过ID的方法，也可以把“注意这里显示的颜色”文本修改成黄色（yellow）显示效果。
大家可以对比类和ID的实现方法，两者只是在符号和引用方式上存在不一样，那真的只是在形式上不一样吗？ 并不是这样的，之所以存在这两种方式，因为这两者它们有各自的特性。 类的特性：类的最大特征是可复用，可以在多个不同的标签中应用同一个类。比如以下这个案例： <html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b class="yellow">好吧，再次留意这里的颜色</b>
</body>
</html>在以上代码中，我定义了一个yellow类（第9~11行），然后分别应用到“注意这里显示的颜色”（第15行）和“好吧，再次留意这里的颜色”（第17行）文本上。
ID的特性：ID，顾名思义，就是身份标识，身份标识具有唯一性，而ID的作用，就是标识唯一性，也就是说，只要在某个标签上应用一个ID，那就不能再在其他标签上使用该ID了。
<html>
<head>
<style>
p{
color: brown;
}
.cl{
color: black;
}
#ii{
color: green;
}
</style>
</head>
<body>
<p class="cl">注意这里显示的颜色</p> <!-- 显示颜色为black -->
<p class="cl" id="ii">再留意这里显示的颜色</p> <!-- 显示颜色为green -->
</body>
</html>符号选择器 符号选择器，严格来讲，不能称之为“选择器”，它指的是在使用选择器的时候，用上一些符号，使得选择器的功能更加丰富。在这里介绍三个。
-
-
- 星号（*）
- 空格（ ）
- 逗号（,）
-
1.星号（*）：星号代表“包含所有”的意思，比如：
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<p>基础科目：</p>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<ul>
<p>专业科目</p>
<li>计算机</li>
<li>幼儿教育</li>
</ul>
</body>
</html>- 给各自的“ul”添加类，用这个“li”的父元素来限定各自的子元素（如第15行和第21行所示）。
- 用“空格”限定（如第4~11行所示）。
<html>
<head>
<style>
.ul1 li{
color: blue;
font-weight: bold;
}
.ul2 li{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="ul1">
<p>基础科目：</p>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<ul class="ul2">
<p>专业科目</p>
<li>计算机</li>
<li>幼儿教育</li>
</ul>
</body>
</html> <html>
<head>
<style>
p,b,.cl,#ii{
color: brown;
font-weight: bold;
}
</style>
</head>
<body>
<p>注意这里显示的颜色</p>
<p>再留意显示这里的颜色</p>
<b>好吧，再次留意这里的颜色</b>
<div class="cl">用类的方式标识选择器</div>
<p id="ii">用ID的方式标识选择器</p>
</body>
</html>VS Code一些常用快捷键
CTRL+？：添加注释 CTRL+Enter：强制换行，无论光标在不在末端。好了，当你看到这里，你对CSS是什么应该有详尽的了解了，那就开始先相关技术文档自学吧！