什么是CSS？
CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用于网页样式设计的语言。通过CSS，我们可以给HTML标记添加不同的样式，让网页看上去更加美观。
比较常见的CSS样式包括文字样式、背景样式、边框样式、布局样式等等。
如何添加CSS样式？
添加CSS样式的方法有三种：行内样式、内部样式和外部样式。下面我们分别来详细介绍一下。
一、行内样式
行内样式是指在HTML标记的style属性中添加CSS样式。它的语法格式如下：
<p style="样式属性1:属性值1;样式属性2:属性值2;...">这是一个段落。</p>其中，样式属性和属性值之间要用冒号隔开，多个样式属性之间要用分号隔开。例如，下面是一个添加了行内样式的段落：
<p style="color:red;font-size:20px;">这是一个红色字体大小为20px的段落。</p>行内样式的优缺点：
行内样式的优点是可以快速地为一个标记添加样式，并且可以覆盖其他样式表中的样式。缺点是不方便管理，当有大量的样式需要添加时，会显得很混乱。
二、内部样式
内部样式是指在HTML文档头部使用<style>标记来定义CSS样式。它的语法格式如下：
<head>
<style type="text/css">
标签名{
样式属性1:属性值1;
样式属性2:属性值2;
...
}
</style>
</head>
其中，type属性规定了样式表的类型，通常设置为"text/css"。标签名可以是HTML标记，也可以是类或ID选择器（下面会细讲）。样式属性和属性值之间的格式与行内样式一样。例如，下面是一个使用内部样式的段落：
<head>
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>这是一个红色字体大小为20px的段落。</p>
</body>
内部样式的优缺点：
内部样式的优点是可以将多个同类标记的样式合并到同一个样式表中，便于管理。缺点是如果同一个样式表需要应用到多个HTML文档中，就需要分别复制到每个文档中，比较麻烦。
三、外部样式
外部样式是指将CSS样式定义在一个独立的CSS文件中，然后在HTML文档中使用<link>标记引入。它的语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
其中，rel属性规定了文档之间的关系，type属性和上面一样设置为"text/css"，href属性指向CSS文件的路径。例如，下面是一个外部样式的样式表：
/* style.css */
p{
color:red;
font-size:20px;
}
然后，在HTML文档中使用<link>标记引入它：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个红色字体大小为20px的段落。</p>
</body>
外部样式的优缺点：
外部样式的优点是可以将样式与HTML代码分离，实现结构与样式的分离，使代码更加清晰，易于维护。缺点是增加了一个CSS文件的请求，可能会影响页面加载速度。
选择器
CSS中的选择器是指选择要应用样式的HTML标记或其他元素。常见的选择器包括标签选择器、类选择器、ID选择器、后代选择器、子元素选择器等等。
1. 标签选择器
标签选择器是指选择所有指定标记的元素。例如，下面的CSS代码将会选择所有的<p>标记并将其文字颜色设置为红色：
p{
color:red;
}
2. 类选择器
类选择器是指选择使用了指定类名的元素。类名需要以“.”开头。例如，下面的CSS代码将会选择所有带有“myclass”类的元素，并将它们的文字颜色设置为蓝色：
.myclass{
color:blue;
}
在HTML代码中添加类名可以使用class属性。例如：
<p class="myclass">这是一个带有myclass类的段落。</p>3. ID选择器
ID选择器是指选择使用了指定ID的元素。ID需要以“#”开头。例如，下面的CSS代码将会选择ID为“myid”的元素，并将它们的文字颜色设置为绿色：
#myid{
color:green;
}
在HTML代码中添加ID可以使用id属性。但是，ID应该是唯一的，同一个HTML文档中不应该出现两个相同的ID。例如：
<p id="myid">这是一个ID为“myid”的段落。</p>4. 后代选择器
后代选择器是指根据某个父元素中后代元素的类型或其他属性来选择元素。后代选择器使用空格隔开不同的标记或选择器。例如，下面的CSS代码将会选择所有在class为“mydiv”的<div>元素下面的<p>元素，并将它们的文字颜色设置为橙色：
.mydiv p{
color:orange;
}
在HTML代码中，可以使用嵌套来实现这种关系：
<div class="mydiv">
<p>这是一个在class为“mydiv”的<div>中的<p>元素。</p>
</div>
5. 子元素选择器
子元素选择器是指选择某个父元素中直接包含某种子元素的元素。子元素选择器使用“>”隔开不同的标记或选择器。例如，下面的CSS代码将会选择所有在class为“mydiv”的<div>元素下面的直接子元素<p>元素，并将它们的文字颜色设置为紫色：
.mydiv>p{
color:purple;
}
在HTML代码中，也可以使用嵌套来实现这种关系，但是只有class为“mydiv”的<div>中的<p>元素会被选中：
<div class="mydiv">
<p>这是一个在class为“mydiv”的<div>中的<p>元素。</p>
<span>这是class为“mydiv”的<div>中的一个<span>元素，不会被选中。</span>
</div>
总结
CSS是一种用于网页样式设计的语言，它可以通过行内样式、内部样式、外部样式三种方式进行使用。CSS中的选择器可以用来选择HTML中的元素，使我们可以将不同的样式应用到不同的元素上。