当前位置：首页 > article >正文

CSS（快速入门）

article 2026/5/11 5:02:24

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

一、什么是CSS?
二、基本语法规范
三、CSS选择器
- 3.1 标签选择器
- 3.2 id选择器
- 3.3 class选择器
- 3.4 通配符选择器
- 3.5 复合选择器
四、常用CSS样式
- 4.1 color
- 4.2 font-size
- 4.3 border
- 4.4 background-color
- 4.5 改变显示模式
- 4.6 padding
- 4.7 margin

一、什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式。

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

CSS 可以理解为"东方四大邪术" 之化妆术.
即对页面的展示进行"化妆“。

CSS前 VS CSS修饰后的效果展示：
在这里插入图片描述

二、基本语法规范

选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (干啥)
• 声明的属性是键值对. 使用; 区分键值对, 使用: 区分键和值。

CSS 要写到 style 标签中

CSS有3种引入方式：
行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.

<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>

在这里插入图片描述

内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用。

定义

    <style>div{color:red;</style>

3.外部样式，html和css实现了完全分离

    <link rel="stylesheet" href="style.css">

然后再创建一个CSS文件，然后在这个style.css文件里面写,代码如下：

 div{color:blue;}

上面三个的整体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;</style><link rel="stylesheet" href="style.css">
</head>
<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
</html>

效果：
在这里插入图片描述

注意;这个里面的行内样式优先，相当于局部变量，所以显示的是绿色，其他的全局被设置变成了蓝色。

三、CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.。

3.1 标签选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title>
<!--    标签选择器--><style>div{color:red;}p{color:brown;}span{color:blue;}</style>
</head>
<body>
<div>我是一个div</div>
<p>我是一个段落</p>
<span>我是一个span</span>
</body>
</html>

这里的这些div,span,p等等标签，可以通过style然后定义选择他的颜色。

效果如下：

在这里插入图片描述

3.2 id选择器

在上面的标签选择器的基础上面，然后通过对标签再增加一个属性id（唯一）然后就可以根据id去选择,这个样子就叫做id选择器。

举个例子：我们先看一段代码和效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;}</style></head>
<body>
<div>我是一个div1</div>
<div>我是一个div2</div>
<div>我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
上面一段代码的效果如上图，我们如果想要第二个红色的字体变成蓝色字体这个要怎么办呢？那么就要用到id选择器。

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}</style></head>
<body>
<div id="div1">我是一个div1</div>
<div id="div2">我是一个div2</div>
<div id="div3">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
可以看到现在已经变成蓝色了。

注意： 这个id要有独特性不能有相同的id,然后这个id选择器使用时候要在前面加# 。

3.3 class选择器

作用:可以把一些有关联起来的东西用同一个class名字,然后他们就会变成一组然后class选择器对一个整大组进行渲染。

举个例子，我们把第一个和第三个用class选择器进行渲染：

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}.fun1{font-size:40px;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

注意：使用class渲染时候,语法格式如下：

.class的赋值 {
}

3.4 通配符选择器

对全部class进行渲染

语法：

*{}

效果同上。

3.5 复合选择器

可以多个选择器一起

举一个例子：把两个id选择器放在一起

<html>
<head><title>Document</title><style>div{color:red;}#div1,#div2{color:blue;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

再举一个例子：想要上面的字体变成红色。

<html>
<head><title>复合选择器</title><style>ul li{color:red;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
<ol><li>有序 1</li><li>有序 2</li><li>有序 3</li><li>有序 4</li>
</ol>
</body>
</html>

效果：
在这里插入图片描述

复合选择器是由多个单选择器组合（id选择器、class选择器），多个选择器之间用空格隔开。

四、常用CSS样式

4.1 color

color设置颜色

• 英文单词,如red,blue

  div{color:red;}

• rgb代码的颜色如rgb(255,0,0)

  div{color:rgb(24,46,37);}

• 十六进制的颜色如#ff00ff

  div{color:#ff00ff;}

4.2 font-size

设置字体大小

     ul li{color:red;font-size:60px;}

效果：
在这里插入图片描述

4.3 border

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body><h1>border-style 属性</h1><p>此属性规定要显示的边框类型：</p><p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p></body>
</html>

效果：
在这里插入图片描述

border的复合属性：

     ul li{border:red 1px solid;}

在这里插入图片描述

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）/

<html>
<head>
<style>
p {border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;
}
</style>
</head>
<body><h1>单独的边框</h1><p>两种不同的边框样式。</p></body>
</html>

在这里插入图片描述

border-color属性

<html>
<head>
<style>
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body><h1>border-color 属性</h1><p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p><p class="one">多色的实线边框</p></body>
</html>

效果：
在这里插入图片描述

4.4 background-color

设置背景颜色。

<html>
<head><title>边框</title><style>ul li{border:red 1px solid;background-color:blue;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
</body>
</html>

在这里插入图片描述

4.5 改变显示模式

使用display 属性可以修改元素的显示模式。
• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]

行内元素不能使用width和height,比如pan标签：

<html>
<head><title>边框</title><style>#fun1{width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：

在这里插入图片描述

如果想要用width/height的话就要用到display。

<html>
<head><title>边框</title><style>#fun1{display:block;width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：
在这里插入图片描述

4.6 padding

padding 属性用于在任何定义的边界内的元素内容周围生成空间。
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-botton
padding-left

所有内边距属性都可以设置以下值：
length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
提示：不允许负值。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h1>使用单独的内边距属性</h1><div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div></body>
</html>

效果：
在这里插入图片描述

4.7 margin

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
</style>
</head>
<body><h1>使用单独的外边距属性</h1><div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div></body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！！我学会啦！！

CSS（快速入门）

欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦~点击这里了解更多内容目录一、什么是CSS?二、基本语法规范三、CSS选择器3.1 标签选择器3.2 id选择器3.3 class选择器3.4 通配符选择器3.5 复合选择器四、常用CSS样式4.1 color4.2 font…...

编程日记 2026/5/4 11:19:11

waitpid使用

waitpid 是 Unix/Linux 系统中用于等待子进程状态变化的系统调用。它允许父进程挂起执行，直到指定的子进程终止或者发生了其他指定的状态变化。 waitpid 的语法 pid_t waitpid(pid_t pid, int *status, int options); pid: 要等待的子进程的进程 ID，特殊…...

编程日记 2026/4/13 13:45:54

对顾客行为的数据分析：融入2+1链动模式、AI智能名片与S2B2C商城小程序的新视角

摘要：随着互联网技术的飞速发展，企业与顾客之间的交互方式变得日益多样化，移动设备、社交媒体、门店、电子商务网站等交互点应运而生。这些交互点不仅为顾客提供了便捷的服务体验，同时也为企业积累了大量的顾客行为数据。本文旨在…...

编程日记 2026/5/8 21:11:27

MySQL查询优化（三）：深度解读 MySQL客户端和服务端协议

如果需要从 MySQL 服务端获得很高的性能，最佳的方式就是花时间研究 MySQL 优化和执行查询的机制。一旦理解了这些，大部分的查询优化是有据可循的，从而使得整个查询优化的过程更有逻辑性。下图展示了 MySQL 执行查询的过程： 客户端…...

编程日记 2026/5/5 5:20:01

import torch import torch.nn as nn import torch.optim as optim import numpy as np# 1. 创建线性回归模型类 class LinearRegressionModel(nn.Module):def __init__(self):super(LinearRegressionModel, self).__init__()self.linear nn.Linear(1, 1) # 1个输入特征&…...

编程日记 2026/4/14 18:52:03

UE AController

定义和功能 AController是一种特定于游戏的控制器，在UE框架中用于定义玩家和AI的控制逻辑。AController负责处理玩家输入，并根据这些输入驱动游戏中的角色或其他实体的行为。设计理念 AController设计用于分离控制逻辑与游戏角色，增强游戏设计…...

编程日记 2026/5/9 19:16:37

选择的阶段性质疑

条条大路通罗马，每个人选择的道路，方向并不一样，但不妨碍都可以到达终点，而往往大家会更推崇自己走过的路径。自己靠什么走向成功，自己用了什么方法，奉行什么原则或者理念，也会尽可能传播这种&…...

编程日记 2026/5/8 9:58:49

Git进阶之旅：Git 配置信息 Config

Git 配置级别： 仓库级别：local [ 优先级最高 ]用户级别：global [ 优先级次之 ]系统级别：system [ 优先级最低 ] 配置文件位置： git 仓库级别对应的配置文件是当前仓库下的 .git/configgit 用户级别对应的配置文件时用…...

编程日记 2026/5/5 5:19:47

51单片机开发：定时器中断

目标：利用定时器中断，每隔1s开启/熄灭LED1灯。外部中断结构图如下图所示，要使用定时器中断T0，须开启TE0、ET0。： 系统中断号如下图所示：定时器0的中断号为1。定时器0的工作方式1原理图如下图所示&#x…...

编程日记 2026/5/8 18:07:10

ultralytics 是什么？

ultralytics 是一个用于计算机视觉任务的 Python 库，专注于提供高效、易用的目标检测、实例分割和图像分类工具。它最著名的功能是实现 YOLO（You Only Look Once） 系列模型，特别是最新的 YOLOv8。 1. YOLO 是什么？ YO…...

编程日记 2026/5/8 22:34:49

Qt调用FFmpeg库实时播放UDP组播视频流

基于以下参考链接，通过改进实现实时播放UDP组播视频流 https://blog.csdn.net/u012532263/article/details/102736700 源码在windows（qt-opensource-windows-x86-5.12.9.exe）、ubuntu20.04.6(x64)(qt-opensource-linux-x64-5.12.12.run)、以…...

编程日记 2026/5/7 13:06:44

Python学习之旅：进阶阶段（五）数据结构-双端队列（collections.deque）

在 Python 的进阶学习过程中，数据结构的掌握至关重要。今天要介绍的双端队列（deque，即 double-ended queue），是一种非常实用的数据结构，Python 的collections模块中的deque类为我们提供了强大的双端队列操作功能。接下来，就一起深入了解双端队列吧。一、什么是双端队列…...

编程日记 2026/3/6 6:29:48

selenium自动化测试框架——面试题整理

目录 1. 什么是 Selenium？它的工作原理是什么？ 2. Selenium 主要组件 3. 常见 WebDriver 驱动 4. Selenium 如何驱动浏览器？ 5. WebDriver 协议是什么？ 6. Page Object 模式与 Page Factory 7. 如何判断元素是否可见&#x…...

编程日记 2026/4/15 15:52:38

第19篇：python高级编程进阶：使用Flask进行Web开发

第19篇：python高级编程进阶：使用Flask进行Web开发内容简介在第18篇文章中，我们介绍了Web开发的基础知识，并使用Flask框架构建了一个简单的Web应用。本篇文章将深入探讨Flask的高级功能，涵盖模板引擎（Ji…...

编程日记 2026/4/18 11:00:03

深度学习框架应用开发：基于 TensorFlow 的函数求导分析

深度学习框架应用开发：基于 TensorFlow 的函数求导分析在深度学习的世界里，梯度计算是优化算法的核心。而 TensorFlow 作为一款强大的深度学习框架，为我们提供了简洁而强大的工具来进行自动求导操作，这极大地简化了深度学习模型的…...

编程日记 2026/5/9 16:58:48

【学术会议征稿-第二届生成式人工智能与信息安全学术会议（GAIIS 2025）】人工智能与信息安全的魅力

重要信息时间：2025年2月21日-23日地点：中国杭州官网：http://www.ic-gaiis.org 简介 2025年第二届生成式人工智能与信息安全将于 2025年2月21日-23日在中国杭州举行。主要围绕“生成式人工智能与信息安全”的最新研究展开，…...

编程日记 2026/2/25 12:47:47

2025春晚刘谦魔术揭秘魔术过程

2025春晚刘谦魔术揭秘魔术过程首先来看全过程将杯子，筷子，勺子以任意顺序摆成一排 1.筷子和左边物体交换位置 2.杯子和右边物体交换位置 3.勺子和左边物体交换位置最终魔术的结果是右手出现了杯子这个就是一个简单的分类讨论的问题。今年的魔术…...

编程日记 2026/5/6 1:50:00

postgresql的用户、数据库和表

在 PostgreSQL 中，用户、数据库和表是关系型数据库系统的基本组成部分。理解这些概念对数据库管理和操作至关重要。下面是对这些概念的详细解释： 1. 用户（User） 在 PostgreSQL 中，用户（也称为角色&#…...

编程日记 2026/5/4 5:21:07

上海亚商投顾：沪指冲高回落大金融板块全天强势上海亚商投

上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。一．市场情绪市场全天冲高回落，深成指、创业板指午后翻绿。大金融板块全天强势，天茂集团…...

编程日记 2026/5/6 6:56:23

06-机器学习-数据预处理

数据清洗数据清洗是数据预处理的核心步骤，旨在修正或移除数据集中的错误、不完整、重复或不一致的部分，为后续分析和建模提供可靠基础。以下是数据清洗的详细流程、方法和实战示例： 一、数据清洗的核心任务问题类型表现示例影响缺失值数值…...

编程日记 2026/4/20 2:59:50

01学习预热篇（D6_正式踏入JVM深入学习前的铺垫）

目录学习前言一、虚拟机的结构 1. Java虚拟机参数设置 2. java 堆 3. 出入栈 4. 局部变量表 1> 局部变量的剖析 2> 局部变量的回收 5. 操作数栈 1> 常量入栈指令 2> 局部变量值转载到栈中指令 3> 将栈顶值保存到局部变量中指令 6. 帧数据区 7. 栈…...

编程日记 2026/5/10 3:27:40

【漫话机器学习系列】068.网格搜索（GridSearch）

网格搜索（Grid Search） 网格搜索（Grid Search）是一种用于优化机器学习模型超参数的技术。它通过系统地遍历给定的参数组合，找出使模型性能达到最优的参数配置。网格搜索的核心思想定义参数网格创建一个包含超参数值…...

编程日记 2026/5/9 5:46:10

https数字签名手动验签

以bing.com 为例 1. CA 层级的基本概念 CA 层级是一种树状结构，由多个层级的 CA 组成。每个 CA 负责为其下一层级的实体（如子 CA 或终端实体）颁发证书。层级结构的顶端是根 CA（Root CA），它是整个 PKI 体…...

编程日记 2026/5/6 1:11:51

【股票数据API接口36】如何获取股票当天逐笔大单交易数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据

如今，量化分析在股市领域风靡一时，其核心要素在于数据，获取股票数据，是踏上量化分析之路的第一步。你可以选择亲手编写爬虫来抓取，但更便捷的方式，莫过于利用专业的股票数据API接口。自编爬虫虽零成本&a…...

编程日记 2026/5/5 17:31:34

RocketMQ 中如何实现消息的可靠传递？

引言作为头部消息队列开源中间件，学习其中的技术方案并且总结可靠性和健壮性，提升我们的架构思维和解决问题的能力。在 RocketMQ 中实现消息的可靠传递可以从多个方面入手，涵盖生产者、Broker 以及消费者等不同环节。生产者端 1. 同步…...

编程日记 2026/5/10 12:28:55

Elasticsearch+kibana安装(简单易上手）

下载ES( Download Elasticsearch | Elastic ) 将ES安装包解压缩解压后目录如下: 修改ES服务端口（可以不修改） 启动ES 记住这些内容验证ES是否启动成功下载kibana( Download Kibana Free | Get Started Now | Elastic ) 解压后的kibana目…...

编程日记 2026/5/6 3:10:42

视频多模态模型——视频版ViT

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细解读多模态论文《ViViT: A Video Vision Transformer》，2021由google 提出用于视频处理的视觉 Transformer 模型，在视频多模态领域有…...

编程日记 2026/5/5 4:56:17

单机伪分布Hadoop详细配置

目录 1. 引言2. 配置单机Hadoop2.1 下载并解压JDK1.8、Hadoop3.3.62.2 配置环境变量2.3 验证JDK、Hadoop配置 3. 伪分布Hadoop3.1 配置ssh免密码登录3.2 配置伪分布Hadoop3.2.1 修改hadoop-env.sh3.2.2 修改core-site.xml3.2.3 修改hdfs-site.xml3.2.4 修改yarn-site.xml3.2.5 …...

编程日记 2026/5/5 6:29:45

Ollama windows安装

Ollama 是一个开源项目，专注于帮助用户本地化运行大型语言模型（LLMs）。它提供了一个简单易用的框架，让开发者和个人用户能够在自己的设备上部署和运行 LLMs，而无需依赖云服务或外部 API。这对于需要数据隐私、离线使用…...

编程日记 2026/5/7 10:17:44

鸿蒙next 自定义日历组件

效果图预览 20250124-113957 使用说明 1.选择日期左右箭头，实现每月日历切换，示例中超出当前月份，禁止进入下一月，可在代码更改 2.日历中显示当前选择的日期，选中的日期颜色可自定义 3.日历中可展示历史记录作为数据…...

编程日记 2026/1/23 5:46:38

目录

一、什么是CSS?

二、基本语法规范

三、CSS选择器

3.1 标签选择器

3.2 id选择器

3.3 class选择器

3.4 通配符选择器

3.5 复合选择器

四、常用CSS样式

4.1 color

4.2 font-size

4.3 border

4.4 background-color

4.5 改变显示模式

4.6 padding

4.7 margin

相关文章：