关键词：
前言
CSS代码由
选择器和一条或多条声明组成的，选择器是需要改变样式的 HTML标签，在CSS中由分号隔开每条代码为声明，且声明是以大括号括起来的。
之前我们阐述了CSS的基本概念，其中选择器是需要改变样式的 HTML标签，然而选择器分为三种：标签选择器、id选择器、class选择器，它们的作用都是设置CSS样式。
一、CSS选择器
（一）标签选择器
标签选择器对HTML中的标签设计样式。
例如，下列html代码中，设置h2标签样式字号为25像素且为红色，p标签样式字号为15像素且为蓝色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2
color: red;
font-size: 25px;
p
color: blue;
font-size: 15px;
</style>
</head>
<body>
<h2>CSS</h2>
<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
</html>
运行结果如下：
（二）id选择器
id选择器，可以通过在CSS 使用"#“对特定 id 的 HTML标签设计特定的样式 ，即可对html中多个标签进行不同的CSS样式设置。若不使用”#"，则表示作用于当前html代码中所有该类型标签进行样式设置。
要注意多个id选择器不能同时使用，即id标签只能被引用一次。
例如，下列html代码中，id=style1的文本样式设置为红色、字号为15像素；id=style2的文本样式设置为蓝色、字号为15像素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#style1
color: red;
font-size: 15px;
#style2
color: blue;
font-size: 15px;
</style>
</head>
<body>
<p id="style1">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
<p id="style2">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
</html>
运行结果如下：
（三）类别选择器
类别选择器（class选择器），即用于对一组标签的样式设计，它可作用于多个标签且多次使用，通过设置html中标签的class属性，然后在CSS中使用“.”进行引用。
也可以在html标签中使用多个选择器名称，之间用空格隔开，从而对某个或多个标签设计多个样式。
例如，下列html代码中，对class="other red "的h2标签文字进行居中对齐、设置为红色，对class="red"的p标签样式设置为红色、字号为10像素，对class="blue"的p标签样式设置为蓝色、字号为15像素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2.other
text-align: center;
.red
color: red;
font-size: 10px;
.blue
color: blue;
font-size: 15px;
</style>
</head>
<body>
<h2>以下是CSS的介绍：</h2>
<h2 class="other red">CSS</h2>
<p class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
<p class="blue">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p class="blue">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
</body>
</html>
运行结果如下：
id标签也可以和class标签混合使用，例如下列html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red
color: red;
font-size: 20px;
#style
color: blue;
font-size: 20px;
</style>
</head>
<body>
<h2>以下是CSS的介绍：</h2>
<h2 class="red">CSS</h2>
<p id="red" class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
</body>
</html>
二、针对标签的选择器嵌套
当要对html标签中嵌套的标签进行样式设计时，在CSS代码中通过标签 嵌套的标签 两个选择器来表示，标签和嵌套的标签中用空格隔开。
例如，下列html代码中，对文本中的“HTML”进行样式设计：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p span
color: red;
font-size: 18px;
</style>
</head>
<body>
<h2>CSS</h2>
<p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p>
</body>
</html>
运行结果如下：
三、集体声明和全局声明
（一）集体声明
在CSS代码中通过","对多个选择器间隔，即可对多个html标签进行集体声明。
例如，下列html代码中，对html中的h2标签和p标签进行统一的样式设计：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2,p
color: red;
font-size: 18px;
</style>
</head>
<body>
<h2>CSS</h2>
<p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p>
</body>
</html>
运行结果如下：
（二）全局声明
在CSS代码中通过"*"对所有html标签进行统一的样式设计，即为全局声明。
例如，下列html代码中，对html中的所有标签进行统一的样式设计：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*
color: orangered;
font-size: 18px;
</style>
</head>
<body>
<h2>CSS</h2>
<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
<p>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
</body>
</html>
运行结果如下：
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
web前端开发笔记——第三章css语言第四节css列表表格样式(代码片段)
目录一、CSS列表样式（一）设计列表项前标志类型（二）设计列表项前标志位置（三）设计列表项图片（四）设计整体列表属性二、CSS表格样式（一）设计表格大小（二）设计表格边... 查看详情
web前端开发笔记——第三章css语言第一节css的基本概念和样式表(代码片段)
目录一、CSS和HTML二、CSS的基本语法格式三、CSS样式设置（一）行内样式（二）内嵌样式（三）引用外部CSS文件四、多重样式优先级结语一、CSS和HTMLCSS，又称为层叠样式表，HTML标签定义网页的内容... 查看详情
web前端开发笔记——第二章html语言第二节基本标签(代码片段)
目录前言一、标题标签二、段落标签和段内换行三、预留格式标签四、行内组合标签五、水平线标签六、注释标签七、空格字符例题（创建一个网页）结语前言本节主要讲解HTML的一些基本标签。一、标题标签下面红框中... 查看详情
web前端开发笔记——第三章css语言第三节文本字体背景超链接样式属性(代码片段)
目录一、CSS文本属性二、CSS字体属性（一）常用文本字体样式属性（二）设置整体font属性三、CSS背景属性（一）背景颜色（二）背景图片（三）图片平铺方式（四）图片位置（五... 查看详情
web前端开发笔记——第三章css语言第五节盒子模型(代码片段)
目录一、CSS布局与定位二、盒子模型三、盒子模型的组成四、设置边框的属性五、设置外、内边距的属性六、overflow属性结语一、CSS布局与定位在CSS中对一个网页进行布局与定位，首先通过盒子模型，即页面元素的大小、... 查看详情
web前端开发笔记——第三章css语言第七节圆角边框阴影(代码片段)
目录前言一、圆角边框（一）border-×-×-radius（二）border-radius二、阴影（一）基本阴影设置（二）内部阴影设置结语前言本节介绍仅在CSS3中的新内容，例如圆角边框、盒子阴影等等。一、圆角边... 查看详情
web前端开发笔记——第三章css语言第八节css3文本文字设置(代码片段)
目录前言一、文本阴影二、强制换行三、字体设置结语前言本节中的仅支持CSS3中的新语法，比如文字的阴影、长文本的换行等等。一、文本阴影通过定义text-shadow来对文本进行阴影设置，其属性依次是水平阴影距离、垂... 查看详情
web前端开发笔记——第四章javascript程序设计第二节变量(代码片段)
目录一、JavaScript中的注释二、变量的命名规则三、变量声明以及赋值四、变量作用域五、变量提升一、JavaScript中的注释JavaScript中单行注释通过“//”，多行注释通过“/*”开头并以“*/”结尾。二、变量的命名规则JavaScript中... 查看详情
web前端开发笔记——第二章html语言第三节文本格式化标签(代码片段)
目录前言一、文本加粗、斜体标签二、文本字体缩小、放大标签三、文本下标、上标标签四、文本下划线、删除线标签五、双引号字符结语前言这里主要介绍对html语言中对文本的处理。一、文本加粗、斜体标签使用b标签或strong... 查看详情
必备前端基础知识-第二节2：css属性(代码片段)
文章目录一：CSS属性一览表二：常用属性详解（1）字体属性（2）文本属性（3）背景属性一：CSS属性一览表W3C：元素属性A：align-content规定弹性容器内的行之间的对齐方式，当项目不... 查看详情
必备前端基础知识-第二节1：css概述和选择器(代码片段)
文章目录一：CSS概述（1）概述（2）语法规范（3）CSS引入方式二：选择器（1）基础选择器①：标签选择器②：类选择器③：id选择器④：通配符选择器总结（2）复合选... 查看详情
必备前端基础知识-第二节1：css概述和选择器(代码片段)
文章目录一：CSS概述（1）概述（2）语法规范（3）CSS引入方式二：选择器（1）基础选择器①：标签选择器②：类选择器③：id选择器④：通配符选择器总结（2）复合选... 查看详情
前端开发笔记css基础（上）
CSS介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地... 查看详情
必备前端基础知识-第二节3：css盒模型和浮动(代码片段)
文章目录一：盒模型（1）border（2）padding（3）margin二：flex布局一：盒模型盒模型：在HTML中，每个标签（或元素）相当于是一个盒子，这个盒子由以下四个部分构成边框border... 查看详情
前端开发笔记css基础（上）(代码片段)
CSS介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配... 查看详情
web前端培训都有哪些课程
...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发：版本控制工具、NodeJS核心技术第四阶段前端框架：Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发：能够独立开发小程序，提... 查看详情
『编写高质量代码web前端开发修炼手册』读书笔记--高质量的css
1、怪异模式和DTD标准模式：浏览器根据规范表现页面怪异模式：模拟老浏览器行为防止老站点无法工作（为了兼容老式浏览器的代码），如果漏写DTD（DocumentTypeDefinition文档定义类型）声明，firefox会按照标准模式来解析网页，但... 查看详情
学习web前端开发，需要掌握哪些知识
...（AJAX、浏览器缓存、JS对象高级、ES6、JQuery）第四阶段：前端主流框架（前端工程化、AugularJS、VueJS、ReactNative、微信小程序）参考技术A您好，学习web前端开发需要掌握的有8个阶段：阶段1.前端核心基础HTML+_CSS核心、JavaScript基础... 查看详情