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

一、前言

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">
  ...
</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 style="color: brown; font-size: 30px; font-family:楷体">
    测试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, 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>

运行结果：