一、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.com">百度</a></li><li><a href="http://www.csdn.com">CSDN</a></li><li><a>HTML</a></li><li><a href="http://www.runoob.com">菜鸟教程</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.com">链接</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>

运行结果：