一、CSS概念
CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
二、CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，大体格式如下：
目前记住样式大概是由选择器，属性和值三部分构成，将在下面第四点选择器根据不同选择器具体展开介绍。
三、文字控制的属性
font-size----------控制文字的字号大小，需要加上px单位；
color---------------控制文字的颜色，只针对文字有效；
font-family-------设置文字的字体，中文需要用引号括着；
text-align---------设置文本水平对方式，值有三个：left center right。
四、选择器
1、选择器概念
在 CSS 中，选择器是选取需设置样式的元素的模式。
2、选择器类别
按照选择器的功能分为不同类别，常用的是元素选择器、类选择器和ID选择器，还有其他类型的选择器，如：集体选择器、属性选择器和后代选择器等，掌握各种选择器的用法，综合使用，创建出更精美的页面。
3、选择器具体介绍
3.1、元素选择器
概念：
元素选择器是最常见的 CSS 选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，注意元素选择器名字只能是html里原来拥有的名字，不能自定义。
设置元素选择器这里介绍两种使用方法：第一种是在具体某个元素内设置，第二种是在<head>标签里建<style>标签添加元素样式，然后在需要使用的元素中调用这个样式，
第一种举例如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:blue">这是一个一级标题标签所标记的文本内容，因为给文字控制属性中的颜色属性赋值bulr，所以我是蓝色的</h1>
<h1>这是一个一级标题标签所标记的对比文本内容，无进行样式设置</h1>
<p style="color:blue">这是一个段落标签所标记的文本内容，因为给文字控制属性中的颜色属性赋值bulr，所以我是蓝色的</p>
<p>这是一个段落标签所标记的对比文本内容，无进行样式设置</p>
</body>
</html>运行结果：
代码解析：
上面这段代码除去原来的html格式，只看<body>标签里的内容就行，当我们想对某个具体的元素进行样式设置时，如标题或段落中的文字，只需要在html元素的开始标签添加style="color(属性）:blur（值）"，注意要加双引号。
style 表示这一段的 css 样式内容， 表示引入 css 的样式。
再举个例子介绍元素选择器的第二种使用方法。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color:blue;
background-color: coral;
}
</style>
</head>
<body>
<h2>我是在"<"head">"标签里设置样式的结果1</h2>
<h2>我是在"<"head">"标签里设置样式的结果2</h2>
<h3>我是对比段落文本，样式没有改变</h3>
</body>
</html>运行结果：
代码解析：
注意<style>所在位置是在<head>标签里，在<style>中的元素内容是：
h2{
color:blue;
background-color: coral;
}
其中h2是选择器，也是html的元素，因此叫元素选择器，在选择器后加{}，在{}里加属性，并且赋值，那么这个网页里所以被<h2>标签标记的文本，都使用我们规定好的属性。如果想把段落<p>标记的文本改为红色，只需要改为：
p{
color:red;
background-color: coral;
}
3.2、类选择器
概念：在 CSS 中，类选择器以一个点号显示：.classA{color:blur;}
在上面的例子中，所有拥有classA 类的 HTML 元素颜色均为蓝色。
注意：类的名字可以自定义，但是类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
举个例子理解一下类选择器
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ClassSelect1_color{
color:sandybrown;
background-color: royalblue;
}
.ClassSelect2_size{
font-size:40px;
}
</style>
</head>
<body>
<h4>对比文本，没有使用类选择器样式</h4>
<h4 class="ClassSelect1_color">使用ClassSelect1_color的文本，我的字体颜色和背景颜色发生变化</h4>
<h4 class="ClassSelect2_size">使用ClassSelect2_size的文本，我的字体大小发生变化</h4>
<hr>
<p>对比文本，多个类样式选择器的使用，注意类之间用空格隔开</p>
<p class="ClassSelect1_color ClassSelect2_size">使用ClassSelect1_color和ClassSelect2_size的文本，我的字体颜色、大小和背景颜色都发生变化</p>
<hr>
</body>
</html>运行结果：
代码解析：
先看一下我们加了什么内容
上面我们在<style>里加了连个类，分别为.ClassSelect1_color和 .ClassSelect2_size，其中.ClassSelect1_color一个定义了字体大小和背景颜色，.ClassSelect2_size定义了字体大小，在<body>中的元素调用这些类，从而使得元素内容有类定义的样式设置，调用格式是： <h4（开始标签） class="ClassSelect2_size（类名）">文本内容</h4>类可以只调用一个也可以调用多个，调用多个类时注意用空格把类名分隔开。
3.3、ID选择器
概念：ID选择器的格式：#+id名 在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。因为匹配需要，所以要注意 id 名称在文档内必须是唯一的，id属性名可以自定义，但是不要使用数字开头的 id 属性！在某些浏览器中可能出问题。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ID选择器{
color:white;
background-color: seagreen;
}
</style>
</head>
<body>
<h4 id="ID选择器">此段落用了ID选择器进行修饰</h4>
<h4>此段落为对比段落，没有进行修饰</h4>
</body>
</html>运行结果：
代码解析：
在上面的代码里，我们在<style>中定义一个名为ID选择器的id选择器，定义这个选择器的内容为设置字体为白色，背景颜色为绿色，当<body>中的元素id属性赋的值和我们定义的id选择器名相同时，元素内容显示为id选择器定义的样式。
3.4、集体选择器
概念：集体选择器，换种说法是选择器的集体声明，就是几个选择器在一起，就一起把它们的样式都给定义了。在我们使用选择器的时候,有些标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>集体选择器</title>
</head>
<style>
p,#_color,a{
color:white;
background-color: tan;
</style>
<body>
<h4>标题一</h4>
<p>文本一</p>
<p>文本二</p>
<p>文本三</p>
<a href = "集体选择器.html">链接1</a>
<a href = "集体选择器.html">链接2</a>
<span id = "_color">使用类样式_color的span标签内容</span>
<span>没有使用类样式_color的span标签内容</span>
<p>文本四</p>
<h4>标题二</h4>
<a href = "集体选择器.html">链接3</a>
<h4>标题三</h4>
</body>
</html>运行结果：
代码解析：
在<style>里定义了段落P，id属性_color和超链接a的一个集体选择器，当出现这个集体中的段落P和超链接a，并且<span>标签id属性被赋值为_color时，对应的元素会显示集体选择器定义的样式，与集体中元素所在位置无关，不属于这个集体的元素或者id不一样的元素不会拥有改样式。
3.5、属性选择器
概念：对带有指定属性的HTML元素设置样式。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
</head>
<style>
.is_title[title]{
color:rgba(245, 241, 1, 0.904);
}
</style>
<body>
<a class="is_title" href="属性选择器.html" title="链接1">链接1</a>
<a class="is_title" href="属性选择器.html" title="链接2">链接1</a>
<a class="is_title" href="属性选择器.html">链接3（没有写name属性，所以没有样式）</a>
<p class="is_title" title="这是name属性的值">有title属性的p标签</p>
<p class="is_title" >没有title属性的p标签</p>
</body>
</html>运行结果：
代码解析：
在<style>中添加属性选择器，这个属性选择器像一个多了属性条件的类选择器，元素想要拥有属性选择器定义的样式，要先把这个元素赋值为属性选择器定义的类，并且这个元素还要拥有属性选择器选择的属性才行。
属性选择器起到一个筛选作用，如下例子
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[href]{
color: red;
}
</style>
</head>
<body>
<h1>资源连接：</h1>
<ul>
<li><a href="http://www.baidu">百度</a></li>
<li><a href="http://www.csdn">CSDN</a></li>
<li><a>HTML</a></li>
<li><a href="http://www.runoob">菜鸟教程</a></li>
<li><a>CSS</a></li>
</ul>
</body>
</html>
运行结果：
代码解析：<ur>和<li>标签可跳到第五点、拓展资料查看
3.6、后代选择器
概念：后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。元素的后代可以是元素的第一代、第二代、第三代等等。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p span{
color: red;
}
._a a{
color: green;
}
</style>
</head>
<body>
<p>
这是p元素
<span>这是p的后代span子元素</span>
的内容 有p有span，生效
</p>
<p>
这是一个没有包含 span 子元素的 p 元素，不生效
</p>
<hr>
使用类样式的后代选择器
<p class="_a">
<a href="http://www.baidu">链接</a>
使用了_a类的p元素，且有a标签，生效
</p>
<p class="_a">
使用了类_a的p元素，但是没有a元素，不生效
</p>
</body>
</html>运行结果：
代码解析：
在<style>中添加了后代选择器p span{}，表示当p标签中拥有span标签时，span标签生效，还添加了后代选择器._a a{},表示类名为_a的类样式下的a标签生效。在后代标签中，如：
p span{
color: red;
}
只有当左边的标签或者属性，放在左边的是高一级的，是前辈，当满足前辈要求时，放在右边的标签或属性，称为后辈才会生效。
3.7、相邻元素选择器
概念：选择器可选择紧接在另一元素后的元素，就是选择相邻的选择器，注意使用时要和定义的顺序一致。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 + span {
color:red;
}
span + p {
color:violet
}
</style>
</head>
<body>
<h1>标题1</h1>
<span>我是span1的内容，我的上方是h1标签，我离得最近，所以字体颜色变红</span>
<p>我是p的内容，我离span1最近且按顺序排在span后面，所以字体颜色是紫色的</p>
<p>我上面有p标签隔开了我和第一个span标签，虽然我相邻的后边有span标签，但是和前面定义的顺序不一样，所以我的字体颜色不变</p>
<span>我是span2的内容</span>
</body>
</html>运行结果：
代码解析：
在<style>中定义了两相邻元素选择器，一个是 h1 + span {color:red; }，另一个是span + p {color:violet}，在<body>里用h1、span、p标签相邻的方式调用样式，从中得知，只有按相邻元素选择器中规定的元素种类和顺序出现，且满足相邻关系时，才能成功调用选择器。
五、拓展资料
1、span概念
span标签是超文本标记语言（HTML）的行内标签，span的前后不会换行，它没有结构的意义，纯粹是应用样式，被用来组合文档中的行内元素。span没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化。<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。
<span> 与<div>，<span>在CSS定义中属于一个行内元素，而<div>是块级元素，我们可能通俗地理解为<div>为大容器，它在它所包含的HTML元素的前面及后面都引入了行分隔，大容器当然可以放一个小容器了,<span>就是小容器。
2、<ul></ul>和<li></li>标签标签
<ul>标签定义无序列表。将<ul>标签与<li>标签一起使用可创建无序列表。用 li 将会以列表的形式呈现文本；列表每一项都要用<li></li>标签。方便理解，来个例子如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
运行结果：
更多推荐
《CSS基础入门篇》
发布评论