CSS引入方式和选择符的讲解和运用小结

Table of Contents

一、前言

CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。

二、CSS 是什么

CSS 即层叠样式表（Cascading Style Sheets），是一种用于描述网页文档（如 HTML 或 XML）外观和格式的样式表语言。它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现更灵活、更高效的网页设计。

CSS 能够对文本的字体、颜色、大小、行间距等进行设置，还能为元素添加背景颜色、背景图片，设置元素的边框样式、圆角效果等，让网页更美观。例如：

p {    color: blue;    font-size: 16px;}

在 CSS 里，注释是用来给代码添加说明或者解释的内容，浏览器会忽略这些注释内容。CSS 注释有且只有一种格式 /**/ ：

/* 这是一个单行的CSS注释 */p {    /* 为段落文本设置颜色为蓝色 */    color: blue;    /*     这是一个多行注释    这里可以写更多的说明内容    */    font-size: 16px;}

三、CSS 引入方式

1、行内样式

行内样式也叫内联样式，是各种引用 CSS 方式中最直接的一种。行内样式就是通过直接设置各个元素的 style 属性，从而达到设置样式的目的。行内样式的格式为：

<标签 style="属性: 属性值;">

2、内部样式表

内部样式表是指样式表的定义处于 HTML 文件一个单独的区域，与 HTML 的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一的控制和管理。

内部样式表处于页面的 <head> 与 </head> 标签之间，内部样式表的格式为：

<head>    <style>        标签 {            属性: 属性值;        }    </style></head>

3、链入外部样式表

外部样式表把声明的样式存放在独立的样式文件（.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;    /* 可以有更多属性 */}

四、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" rel="external nofollow" ></head><body>      <h2 style="color: brown; font-size: 30px; font-family:楷体">    测试CSS的引入方式：行内式    </h2>    <h3>        测试CSS的引入方式：内嵌式       </h3>    <h4>        测试CSS的引入方式：外链式       </h4></body></html>

运行结果：

2、练习一下 CSS 三种选择符