Table of Contents
CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。
CSS 即层叠样式表（Cascading Style Sheets），是一种用于描述网页文档（如 HTML 或 XML）外观和格式的样式表语言。它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现更灵活、更高效的网页设计。
CSS 能够对文本的字体、颜色、大小、行间距等进行设置，还能为元素添加背景颜色、背景图片，设置元素的边框样式、圆角效果等，让网页更美观。例如：
p { color: blue; font-size: 16px;}
在 CSS 里，注释是用来给代码添加说明或者解释的内容，浏览器会忽略这些注释内容。CSS 注释有且只有一种格式 /**/ ：
/* 这是一个单行的CSS注释 */p { /* 为段落文本设置颜色为蓝色 */ color: blue; /* 这是一个多行注释 这里可以写更多的说明内容 */ font-size: 16px;}
行内样式也叫内联样式，是各种引用 CSS 方式中最直接的一种。行内样式就是通过直接设置各个元素的 style 属性，从而达到设置样式的目的。行内样式的格式为：
<标签 style="属性: 属性值;">
内部样式表是指样式表的定义处于 HTML 文件一个单独的区域，与 HTML 的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一的控制和管理。
内部样式表处于页面的 <head> 与 </head> 标签之间，内部样式表的格式为：
<head> <style> 标签 { 属性: 属性值; } </style></head>
外部样式表把声明的样式存放在独立的样式文件（.css 文件）中，当页面需要使用样式时，通过 < link >标签外链接外部样式表的文件即可。使用外部样式表，改变一个文件就能改变整个站点的外观。
①用< link >标签链接样式表文件
< link >标签必须放到页面的<head> ...</head> 标签对内。其格式为：
<head> ... <link rel="stylesheet" href="外部样式表文件名.css" rel="external nofollow" > ...</head>
其中，rel 属性用于指定链接的文档与当前文档的关系，当链入外部样式表时，它的值需设为 “ stylesheet ”；href 属性用于指定外部 CSS 文件的路径，可以是相对路径，也可以是绝对路径。
②样式表文件的格式
样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为 .css 。样式表文件的内容是定义的样式表，不包含 HTML 标签。样式表文件的格式为：
选择器 { 属性1: 属性值1; 属性2: 属性值2; /* 可以有更多属性 */}
基本选择符包括标签选择符、class 类选择符和 id 选择符。
CSS 中的标签选择符（也称为元素选择器）是最基础的选择符类型，它通过 HTML 标签的名称来选择页面中所有该类型的元素，并为这些元素应用统一的样式。语法如下：
标签名 { 属性: 属性值; /* 可以有更多的属性 - 值对 */}
在 CSS 里，class 类选择符是一种极为实用的选择符，它能够依据元素的 class 属性值来选择元素并应用样式。类选择符以点号（.）开头，后面紧跟类名，语法如下：
.class-name { 属性: 属性值; /* 可以有更多属性 - 值对 */}
在 CSS 里，id 选择符是一种用于精准选择特定元素的选择器，它依据元素的 id 属性值来定位元素。id 选择符以井号（#）开头，后面紧跟元素的 id 属性值，语法如下：
#id-name { 属性:属性值; /* 可添加更多的属性 - 值对 */}
示例代码：
<!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" rel="external nofollow" ></head><body> <h2 style="color: brown; font-size: 30px; font-family:楷体"> 测试CSS的引入方式：行内式 </h2> <h3> 测试CSS的引入方式：内嵌式 </h3> <h4> 测试CSS的引入方式：外链式 </h4></body></html>
运行结果：
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-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引入方式和选择符内容请搜索知识百科网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持知识百科网！
WiFi已连接却无法上网怎么办? 无线路由器连接上但不能上网的解决办法
蜀ICP备2020029785号