理解CSS：基础、应用与选择器详解-CSDN博客

本文链接：https://blog.csdn.net/DREAM_yao/article/details/113990551

本文详细介绍了CSS的基础知识，包括CSS的语法规则、与HTML的三种结合方式，以及选择器的使用，如标签选择器、id选择器、class选择器和组合选择器。通过实例展示了如何通过CSS控制网页样式，帮助读者深入理解CSS在网页设计中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS 介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、语法规则

在这里插入图片描述
选择器： 浏览器根据“选择器”来决定受CSS样式影响的html标签（元素）
属性： 要改变的样式名，例如：color，font-size
每个声明之间使用 ; 分隔开来。
注释：/* 注释内容 */

三、CSS 和 HTML 结合

3.1 方式一

在标签的 style 属性上设置 “ key:value value; ” 修改样式

<!--需求
    分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
-->
    <div style="border: red 1px solid ">这是一个div标签</div> <br/>

3.2 方式二

在head 标签中，使用 style 标签定义自己需要的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            color: red;
            border: 1px solid blue;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
</body>
</html>

3.3 方式三

在这里插入图片描述

把 CSS 样式写成一个单独的CSS文件，再在 head 标签中通过 link 标签即可复用

<link href="test.css" rel="stylesheet" type="text/css"/>

四、CSS 选择器

浏览器根据“选择器”来决定受CSS样式影响的html标签（元素）

4.1 标签名选择器

通过标签名选择器决定哪些标签被动的使用这个样式

格式：

标签名{
	属性：值;
}

<style type="text/css">
   /* 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 
   并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。*/
    div{
        color: blue;
        font-size: 30px;
        font-style: italic;/* 字体样式 */
        border: yellow 1px solid;
    }
    span{
        color: yellow;
        font-size: 20px;
        border: blue 5px dashed;
    }
</style>

4.2 id 选择器

让我们通过 id 属性选择性使用这个样式

格式

#id属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01{
            font-style: italic;
            font-size: 7px;
        }
        #div02{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div id="div02">02 这是一个div标签<</div>
</body>
</html>

4.3 class 选择器

通过class 属性有效的选择使用这个样式

格式

.class属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .divClass01{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .divClass02{
            color: gray;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div class="divClass01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签</div>
</body>
</html>

4.4 组合选择器

可以让多个选择器共用一个css代码
格式

选择器1，选择器2……选择器n{
属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01 ,.divClass02 ,p,span{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签<</div>
    <p>03这是一个p标签</p>
    <span>04这是一个span标签</span>
</body>
</html>