CSS 学习笔记 (1) 基础语法

简介

CSS：层叠样式表（Cascading Style Sheets）用于控制网页的外观。

CSS 语法：先指定选择器，再给出键值对。

[选择器] {[属性]: [值];
}

MDN 文档

链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS 。

BootStrap 文档

BootStrap 集成了常用的 CSS 组件，可以通过外部样式表引入：

<head><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>

截至本文完成， bootstrap 最新版本为 5.3.8 ，读者可以留意一下当前的最新版本是什么。

读者可以通过 https://bootstrap.sbox.cn/docs/5.3/getting-started/introduction/ 查询你需要的组件。

分类

内联样式表

样式写在标签内部。

<p style="color: red; font-size: 14px;">段落</p>

内部样式表

样式写在 <head> 标签中。

<head><style>p {color: red;font-size: 14px;}</style>
</head>

外部样式表

样式写在外部 css 文件中。

<head><link rel="stylesheet" href="1.css">
</head>

/* 1.css */
p {color: red;font-size: 14px;
}

基础选择器

元素选择器

别名类型选择器、标签选择器，可以选择同种类的所有标签。

p {color: red;font-size: 14px;
}

这里的 p 即为元素选择器，可以选中页面中所有的 <p> 标签，并将其赋予颜色为红色、字体大小为 14px 的属性。

类选择器

通过 class 属性定义类，再通过 . 加上类名即可选中。

<style>.a {color: red;}.b {font-size: 16px;}
</style>
<p class="a">段落</p>
<h1 class="a b">一级标题</h1>

温馨提示：

类名可以自定义，但不能是中文或纯数字。
命名尽量见名知义。
多个英文单词可以用 - 连接。
多类名中间用空格隔开。

id 选择器

类选择器可以实现一对多， id 选择器可以实现一对一。

<style>#a {color: red;}
</style>
<p class="a">段落</p>

通配符选择器

通配符选择器可以选择页面中的所有标签。

* {margin: 0px;padding: 0px;
}

关系选择器

后代选择器

语法规则 A B 可以选择 A 标签后代的所有 B 标签，注意可以是间接（嵌套）后代。

ul li {color: red;
}

子代选择器

语法规则 A>B 表示选择 A 标签直接后代的所有 B 标签。

相邻兄弟选择器

语法规则 A+B 表示选择紧跟在 A 标签后面的 B 标签。

<style>h3+p{color: red;}
</style>
<body><p>1</p><h3>2</h3><p>3</p><p>4</p>
</body>

其中只有 3 会变红。

通用兄弟选择器

语法规则 A~B 表示选择在 A 标签后面的所有兄弟元素 B 标签。

<style>h3~p{color: red;}
</style>
<body><p>1</p><h3>2</h3><p>3</p><div><p>4</p></div><p>5</p>
</body>

其中 3 和 5 都会变红。

字体样式

颜色

p {color: red;color: #FF0000;color: rgb(255,0,0);color: rgba(255,0,0,1);
}

16 进制表示法对应三原色，前 2 位红，中间 2 位绿，最后 2 位蓝。

rgba 中最后一维是 $[0,1]$ 中的实数，表示透明度。 0 表示完全透明， 1 表示完全不透明。

字体

p {font-family: Consolas,"Microsoft YaHei",monospace;
}

可以同时定义多个不同字体，用逗号分隔。

浏览器会优先尝试第一种字体，如果不可用再尝试第二种，依此类推。

大小

p {font-size: 16px;
}

斜体

p {font-style: italic; /* 倾斜 */font-style: normal; /* 正常 */
}

粗体

p {font-weight: normal;font-weight: 100;
}

关键字对应效果如下：

名称	效果
lighter	变细
normal	默认
bold	加粗
bolder	加粗

也可用 $[100,900]$ 中的一个数（注意没有 px）表示粗细，数字越大效果越粗，经过实测：

$100\sim 345$ ：变细。
$346\sim 549$ ：默认。
$550\sim 900$ ：加粗。

装饰

a {text-decoration: none;
}

属性	描述
none	无装饰
underline	下划线
overline	上划线
line-through	删除线

字体样式简写

字体样式可以一行完成，语法如下：

body {font: font-style font-weight font-size/line-height font-family;
}

其中 font-size 和 font-family 必须写，其余可以省略，注意不能调换顺序。

文本布局

水平对齐

p {text-align: center;
}

text-align 属性可以控制块级元素内的文本如何水平对齐，其值如下：

值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

两端对齐使用场景：段落中每行文字占用空间不尽相同（英语单词更明显），如果采用左对齐那么右边很不美观，采用两端对齐可以保证占用空间是矩形，相应文字间隔会拉大。

首行缩进

p {text-indent: 20px;text-indent: 2em;
}

text-indent 属性对块级元素生效，其属性值有两种单位：

单位	描述
px	绝对单位，固定缩进若干像素
em	相对单位， 1em 等于当前元素字体大小，若未设置则继承父元素字体大小，依此类推。

字间距

p {letter-spacing: 5px;
}

行高

p {line-height: 20px;line-height: 1.5; /* 字体大小的 1.5 倍 */
}

line-height 属性额外用途：行高等于盒子高度时可以让单行文本垂直居中。

原理：行高 = 上边空白 + 文字大小 + 下边空白，并且两边空白高度相同。当行高等于盒子高度时，对单行文本而言，文字到盒子两边距离刚好为两边空白，自然也就实现垂直居中效果。

<style>.box {height: 50px;}p {text-align: center; /* 水平对齐 */line-height: 50px; /* 垂直对齐 */}
</style>
<div class="box"><p>段落</p></div>

合并选择器

又称分组选择器，可以给多个选择器设置相同样式，节约代码量。

语法规则是用 , 分隔不同的选择器。

.box1, .box2 {width: 100px;height: 100px;
}

伪类选择器

伪类选择器选择的是元素的特定状态或结构位置。

链接伪类

链接伪类	描述
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标悬停
a:active	鼠标点击到松开

a:hover {color: orange;
}

注意链接伪类必须按照上述表格的顺序设计样式（可以省略但不能颠倒），比如将 a:visited 放到 a:link 前面， a:visited 样式无效。

行为伪类

行为伪类	描述
.box:hover	鼠标悬停
.box:focus	获得焦点（鼠标点击该容器开始，到点击其他容器结束）

.box:hover {color:red;
}

结构伪类

结构伪类	描述
first-child	一组兄弟元素中的第一个元素
last-child	一组兄弟元素中的最后一个元素
nth-child(n)	一组兄弟元素中的第 $n$ 个元素

这里 $n$ 的取值可以是以下几种：

正整数：不解释。
关键字：odd 和 even 两种，分别表示奇数和偶数。
含 $n$ 的表达式（注意 $n$ 从 $0$ 开始计算）：
- nth_child(3n) ：选择 $3$ 的倍数。
- nth_child(n+2) ：选择第 $2$ 个及以后的元素。
- nth_child(-n+3)：选择前 $3$ 个元素。

ul li:nthchild(odd) {background-color: white;
}
ul li:nthchild(even) {background-color: grey;
}

表单伪类

表单伪类	描述
disabled	按钮被禁用
checked	表单控件被选中

button:disabled {opacity: 0.4;
}

伪元素选择器

伪类选择器选择的是元素的特定部分。

伪元素	描述
::first-line	选择首行
::first-letter	选择首字母
::placeholder	选择 input 或 textarea 中的占位符
::before	在选定元素最前面添加一个元素
::after	在选定元素最后面添加一个元素

::before 和 ::after 本质就是生成一个新容器，注意默认是行内元素。同时必须设置 content 属性，其值为容器中的文本内容，

<style>a::after {content: " ↗";}
</style>
<a href="#">了解更多</a>

<style>a::after {content: ""; /* 没有文本内容时值为空 */display: inline-block;width: 16px;height: 16px;background-image: url('external-icon.svg'); /* 假装你能看到这张图片 */}
</style>
<a href="#">了解更多</a>

上面两种方法的链接都会显示为 "了解更多 ↗" 。

属性选择器

属性选择器	描述
[属性]	选择包含指定属性的所有元素
[属性=值]	选择属性等于值的所有元素
[属性^=值]	选择属性以指定字符串开头的所有元素
[属性$=值]	选择属性以指定字符串结尾的所有元素
[属性*=值]	选择属性包含指定字符串的所有元素

/* 选择包含 class 属性的所有元素 */
[class] {color: red;
}/* 选择所有表单中的单复选框 */
[type="checkbox"],[type="radio"] {color: red;
}

CSS 优先级

高权重选择器的样式会覆盖低权重选择器，相同权重保留最后一个。

选择器类型	权值
!important	$\infty$
内联样式表	1000
ID 选择器	100
类/属性/伪类选择器	10
元素/伪元素选择器	1
通配符选择器/继承的样式	0

权重可以叠加，但是不能进位。

$\text{Q}$ ：关系选择器 #nav .item a 的权重是多少？

$\text{A}$ ：#nav 权重为 $100$ ， .item 权重为 $10$ ， a 权重为 $1$ ，累加为 $111$ 。

权重不能进位的意思是，即使嵌套 $10$ 层类选择器，权值仅为 $(0,10,0)_k$ （这里 $k$ 可以认为是无穷大），也不能超过 ID 选择器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1221140.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

前端开发总结的一些技巧和实用方法

本文主要介绍一些JS中用到的小技巧和实用方法，可以在日常Coding中提升幸福度，也可以通过一些小细节来增加代码可读性，让代码看起来更加优雅，后续将不断更新 1.数组 map 的方法 (不使用Array.Map) Array.from 还可以接受第二个参数…

全网最全本科生必看TOP10 AI论文工具测评

全网最全本科生必看TOP10 AI论文工具测评 2026年本科生AI论文工具测评：为何值得一看在人工智能技术不断渗透学术领域的今天，越来越多的本科生开始依赖AI工具提升论文写作效率。然而，面对市场上五花八门的AI写作平台，如何选择真正…

leetcode 1200

1200: 最小绝对差思路：排序后，只需考虑相邻元素之差把 arr 排序后，最小绝对差只能来自相邻元素（不相邻的元素之差更大）。遍历 arr 中的相邻元素 (x,y)，设绝对差为 diffy−x，当前最小绝对差为 mi…

一个程序模拟直流绝缘监测仪，一个程序模拟直流绝缘监测仪上位机

按照文档写了两个代码，模拟下面这个直流绝缘检测仪

S7-1500作控制器S7-200SMART作智能设备

本文介绍了智能设备的功能，将S7-1500作为控制器，S7-200 SMART为智能设备，智能设备生成GSD文件，进行 PROFINET IO 通信的配置示例。从 S7-200 SMART V2.5 版本开始，S7-200 SMART 开始支持做 PROFINET IO 通信的智能设…

低空经济新实践：无人机如何革新光伏电站巡检

引言：当低空经济遇见新能源革命在“双碳”战略引领下，光伏电站如雨后春笋般遍布神州大地。截至2023年底，我国光伏发电装机容量已突破6亿千瓦，连续多年位居全球首位。然而，随着光伏电站规模的急剧扩大，传统人…

DCDC同步降压：RT7272BGSP同步降压设计详解

目录一、同步 Buck 降压工作原理 1. 基本拓扑结构 2. RT7272 控制模式 3. 核心工作流程二、关键参数设计详解（以 3.9V/3A 为例） 1. 输出电压设计（分压电阻 R13/R40） 公式推导选型建议 2. 电感设计（L3&…

【2026最新】Directx dll修复工具是什么？DirectX修复工具下载保姆图文教程（附官网安装包），dll修复工具，一键解决dll文件丢失、c++异常、软件打不开等问题

相信很多朋友都会遇到“xxx.dll”丢失，软件启动不了、闪退等问题，说明你的系统缺少了支持的相关组件。今天要分享的软件是电脑DLL文件修复工具，强大且绿色，一键解决电脑dll文件丢失，C异常。DirectX修复工具是一款专门给…

14-机器学习与大模型制作数学教程-第1章 1-6 费马定理与极值判定

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

P1024 [NOIP 2001 提高组] 一元三次方程求解(1.26)

点击查看代码 #include<bits/stdc++.h> using namespace std;double a,b,c,d;double f(double x) {return a*x*x*x+b*x*x+c*x+d; }int main() {cin>>a>>b>>c>>d;int cnt=0;for(int i=-1…

EDC电子试验记录本，数字化科研时代的效率革命

在当今的科研与工业研发领域，数据是核心资产，而记录则是数据生命的起点。传统纸质实验记录本（Paper Lab Notebook, PLN）易污损、难追溯、不便共享的痛点日益凸显。据统计，科研人员平均每年因记录不规范、数据丢失等问题…

linux查询进程

通过端口找进程lsof -i :8080 直接列出占用指定端口（如8080）的进程信息。精确快捷，信息直观（进程名、PID、用户等）。netstat -tunlp | grep 8080 -tunlp：显示TCP/UDP监听端口及关联进程，再…

python-Dgango项目收集静态文件、构建前端、安装依赖

数据平台项目（pythondjangoreact）后端：查看环境： conda env list先激活环境: conda activate unlabel (unlabel) PS D:\unbel_school> python .\label_studio\manage.py runserver 0.0.0.0:28080 加上…

实用指南：【C++初阶】vector容器的模拟实现，各接口讲解

实用指南：【C++初阶】vector容器的模拟实现，各接口讲解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas…

Linux、Windows常用命令

目录 windows常用命令 linuxl常用命令 windows常用命令 netstat -ano |findstr 28080 TCP 127.0.0.1:28080 0.0.0.0:0 LISTENING 10436 taskkill /f /t /pid 10436 linuxl常用命令通过端口找进程 lsof -i :8080 直接列出占用指定端口&a…