CSS 速查手册:核心属性一网打尽

myzbx 2025-01-20 15:10 37 浏览

在前端开发中，CSS是必不可少的一环。但CSS的属性繁多，容易让人感到头疼。今天，我们就来整理一份CSS速查手册，帮你快速掌握核心属性，提升开发效率。

一、CSS 的书写位置

CSS 可以通过以下三种方式添加到HTML文档中：

外部样式表: 通过 <link> 标签链接外部 CSS 文件。

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

内部样式表: 在 <style> 标签中定义 CSS 规则。

<head> <style> body { background-color: linen; } </style> </head>

内联样式: 直接在 HTML 元素的 style 属性中定义 CSS 规则。

<p style="color:red;">This is a paragraph.</p>

二、颜色 (Colors)

CSS 中可以使用以下方式定义颜色：

rgb 值: 例如 rgb(255, 0, 0) (红色)
hex 值: 例如 #FF0000 (红色)
hsl 值: 例如 hsl(0, 100%, 50%) (红色)

三、背景 (Background)

background-color: 设置背景颜色。
background-image: 设置背景图片。
background-repeat: 设置背景图片是否重复。
background-attachment: 设置背景图片是否固定。
background-position: 设置背景图片的位置。
background (简写属性): 一次性设置所有背景相关属性。

四、内/外边距 (Padding & Margin)

Padding (内边距): 元素内容与边框之间的距离。

padding-top
padding-right
padding-bottom
padding-left
padding (简写属性): 例如：padding: 10px 20px 15px 5px;

Margin (外边距): 元素边框与其他元素之间的距离。

margin-top
margin-right
margin-bottom
margin-left
margin (简写属性): 例如：margin: 10px 20px 15px 5px;

五、盒子模型 (Box Model)

盒子模型是理解 CSS 布局的基础，它包括：

content: 元素的内容
padding: 内边距
border: 边框
margin: 外边距

六、显示 (Display)

display 属性决定了元素的显示方式：

inline: 内联元素，只占据必要宽度，不换行。
block: 块级元素，占据整行宽度，会换行。
none: 隐藏元素。

七、定位 (Position)

position 属性用于控制元素的定位方式：

static: 默认值，不进行特殊定位。
relative: 相对定位，相对于自身正常位置进行定位。
fixed: 固定定位，相对于浏览器窗口进行定位，不随滚动条滚动。
absolute: 绝对定位，相对于最近的已定位祖先元素进行定位。
sticky: 粘性定位，基于用户的滚动位置来定位。

八、文本 (Text)

color: 设置文本颜色。
text-align: 设置文本对齐方式 (left, right, center)
text-decoration: 设置文本装饰线 (line, color, style, thick)

九、字体 (Font)

font-family: 设置字体族。
font-style: 设置字体样式 (normal, italic, oblique)
font-size: 设置字体大小 (px, em, %, cm等单位)

十、Z轴 (z-index)

z-index 属性用于控制元素的堆叠顺序，值越大，元素越靠上。

十一、溢出 (Overflow)

overflow 属性用于控制元素内容溢出时的显示方式：

visible: 默认值，溢出内容可见。
hidden: 隐藏溢出内容。
scroll: 显示滚动条。

十二、透明度 (Opacity)

opacity 属性设置元素的透明度，取值范围 0 到 1。

十三、CSS 选择器 (CSS Selector)

p 选择所有 <p> 标签
#id 选择特定 id 的元素
.class 选择特定 class 的元素
* 选择所有元素

十四、其他重要属性

Border: 用于设置元素的边框样式。提供了多种边框样式选择例如：dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等。
Height & Width: 用于设置元素的高度和宽度。可以使用固定值例如px,cm, pt或者相对单位 %, vw,vh。
Outline: 用于设置元素的外轮廓。提供了 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等样式。同时可以设置轮廓颜色 outline-color, 轮廓宽度 outline-width，轮廓偏移outline-offset。
!important 关键字用于增加样式的优先级。
object-fit: 用于控制替换元素（例如图片或视频）在容器中的显示方式。

总结

以上是 CSS 中一些常用的核心属性的总结。掌握这些属性，可以让你更高效地进行网页布局和样式设计。这份速查手册可以作为你在日常开发中的参考，帮助你快速查找和使用所需的 CSS 属性。

思考题:

在实际项目中，你最常用的 CSS 属性有哪些？你通常如何组织和管理你的 CSS 代码？

希望这份 CSS 速查手册对你有帮助！欢迎在评论区分享你的经验。

CSS RGB 颜色

上一篇：不同语言，不同场景，透明颜色表示方法知多少
下一篇：HarmonyOS NEXT 应用开发之 Text 组件颜色属性

CSS 速查手册:核心属性一网打尽

一、CSS 的书写位置

二、颜色 (Colors)

三、背景 (Background)

四、内/外边距 (Padding & Margin)

五、盒子模型 (Box Model)

六、显示 (Display)

七、定位 (Position)

八、文本 (Text)

九、字体 (Font)

十、Z轴 (z-index)

十一、溢出 (Overflow)

十二、透明度 (Opacity)

十三、CSS 选择器 (CSS Selector)

十四、其他重要属性

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿