本文主要是介绍CSS引入方式和选择符的讲解和运用小结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的样式表语言,它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现...
一、前言
CSS 是一种格式化网页的标准方式，它拓展了 html 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。
二、CSS 是什么
CSS 即层叠样式表（Cascading Style Sheets），是一种用于描述网页文档（如 HTML 或 XML）外观和格式的样式表语言。它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现更灵活、更高效的网页设计。
CSS 能够对文本的字体、颜色、大小、行间距等进行设置，还能为元素添加背景颜色、背景图片，设置元素的边框样式、圆角效果等，让网页更美观。例如：
p {
color: blue;
font-size: 16pphpx;
}在 CSS 里，注释是用来给代码添加说明或者解释的内容，浏览器会忽略这些注释内容。CSS 注释有且只有一种格式 /**/ ：
/* 这是一个单行的CSS注释 */
p {
/* 为段落文本设置颜色为蓝色 */
color: blue;
/*
这是一个多行www.chinasem.cn注释
这里可以写更多的说明内容
*/
font-size: 16px;
}三、CSS 引入方式
1、行内样式
行内样式也叫内联样式，是各种引用 CSS 方式中最直接的一种。行内样式就是通过直接设置各个元素的 style 属性，从而达到设置样式的目的。行内样式的格式为：
<标签>
2、内部样式表
内部样式表是指样式表的定义处于 HTML 文件一个单独的区域，与 HTML 的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一的控制和管理。
内部样式表处于页面的 <head> 与 </headhttp://www.chinasem.cn> 标签之间，内部样式表的格式为：
<head>
<style>
标签 {
属性: 属性值;
}
</style>
</head>3、链入外部样式表
外部样式表把声明的样式存放在独立的样式文件（.css 文件）中，当页面需要使用样式时，通过 < link >标签外链接外部样式表的文件即可。使用外部样式表，改变一个文件就能改变整个站点的外观China编程。
①用< link >标签链接样式表文件
< link >标签必须放到页面的<head> ...</head> 标签对内。其格式为：
<head> ... <link rel="stylesheet" href="外部样式表文件名.css"> ... </head>
其中，rel 属性用于指定链接的文档与当前文档的关系，当链入外部样式表时，它的值需设为 “ stylesheet ”；href 属性用于指定外部 CSS 文件的路径，可以是相对路径，也可以是绝对路径。
②样式表文件的格式
样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为 .css 。样式表文件的内容是定义的样式表，不包含 HTML 标签。样式表文件的格式为：
选择器 {
属性1: 属性值1;
属性2: 属性值2;
/* 可以有更多属性 */
}四、CSS 选择符（选择器）
基本选择符包括标签选择符、class 类选择符和 id 选择符。
1、标签选择符
CSS 中的标签选择符（也称为元素选择器）是最基础的选择符类型，它通过 HTML 标签的名称来选择页面中所有该类型的元素，并为这些元素应用统一的样式。语法如下：
标签名 {
属性: 属性值;
/* 可以有更多的属性 - 值对 */
}2、class 类选择符
在 CSS 里，class 类选择符是一种极为实用的选择符，它能够依据元素的 class 属性值来选择元素并应用样式。类选择符以点号（.）开头，后面紧跟类名，语法如下：
.class-name {
属性: 属性值;
/* 可以有更多属性 - 值对 */
}3、id 选择符
在 CSS 里，id 选择符是一种用于精准选择特定元素的选择器，它依据元素的 id 属性值来定位元素。id 选择符以井号（#）开头，后面紧跟元素的 id 属性值，语法如下：
#id-name {
属性:属性值;
/* 可添加更多的属性 - 值对 */
}五、练习
1、练习一下三种 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>css三种引入方式</title>
<style>
h3{
color: blue;
font-size: 30px;
font-family: 宋体;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>
测试CSS的引入方式：行内式
</h2>
<h3>
测试CSS的引入方式：内嵌式
</h3>
<h4>
测试CSS的引入方式：外链式
</h4>
</body>
</html>运行结果：
2、练习一下 CSS 三种选择符
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, in编程China编程itial-scale=1.0">
<style>
/* 标签选择器 */
p {
color: blue;
}
/* 类选择器 */
.red-text {
color: red;
}
/* id选择器 */
#green-text {
color: green;
}
</style>
</head>
<body>
<p>这是使用标签选择器设置为蓝色的文本。</p>
<span class="red-text">这是使用类选择器设置为红色的文本。</span>
<p id="green-text">这是使用id选择器设置为绿色的文本。</p>
</body>
</html>运行结果：
到此这篇关于CSS引入方式和选择符的讲解和运用的文章就介绍到这了,更多相关CSS引入方式和选择符内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章，希望大家以后多多支持China编程(www.chinasem.cn)！
这篇关于CSS引入方式和选择符的讲解和运用小结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
