CSS 速查手册:核心属性一网打尽
myzbx 2025-01-20 15:10 16 浏览
在前端开发中，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 速查手册对你有帮助！欢迎在评论区分享你的经验。
相关推荐
- 斐波那契时钟:据说智商太低的人看不懂，你敢来挑战吗?
-
如果你在一个公共场合，看到了桌上亮着的东西，你会以为它是什么？小夜灯？恭喜你，回答错误。它是Fibonacci钟，专为追求与众不同的“怪胎们”准备。它外表精美，甚至看不出这是一个钟，但它真的是个钟，只...
- 曾都区文峰学校二年级数学组开展钟表制作主题活动
-
为了使学生更加直观地认识钟表、感知钟表，曾都区文峰学校二年级数学组开展了“小钟面大创意”钟表制作主题活动。孩子们大胆设计、精心制作，每一个作品都充满了创意与童趣。 滴答滴答滴答，小小时钟在说话。它都...
- 不能更酷!游戏机改造的报时钟表（游戏机能改成正常机吗）
-
当家里的游戏机逐渐过时的时候，你会把它怎么办？无论是卖掉还是封存珍藏都是不错的办法，不过Rurue0111有更酷的主意：将PlayStation改造成时钟。初代PS正脸有一个圆圆的硕大光驱盒盖，别...
- 计量小知识来了!古代没有钟表，夜晚是如何计算时间的?
-
古人把一昼夜分为十二个时辰，用十二地支名加上“时”字表示。即子时、丑时、寅时、卯时、辰时、巳时、午时、未时、申时、酉时、戌时、亥时。每一时刻相当于今天的两个小时。这十二时辰与现今计时法的关系是：子时－...
- 「爱」的挂钟（爱的时钟）
-
鸳鸯和天鹅算是鸟类中最会秀恩爱的了吧，以它们为元素做设计也应该是件很优雅的事。台湾的好事（haoshi）工作室成立于2009年。设计师坚持纯洁与和平的设计理念，将生活中抽象的好事物以艺术化的形式呈...
- 亚洲最大欧米茄时钟亮相北京王府井百货 钟面直径约7.9米
-
亚洲最大欧米茄(OMEGA)时钟正式亮相北京地标性建筑王府井百货（专题阅读）大楼。作为迄今为止亚洲最大的欧米茄时钟，甫一亮相即吸引到众多游客的目光。至此，位于北京最繁华地带的王府井大街将被欧米茄时钟...
- 初一数学难点“线段与角”，老师手把手教你画图，保证学会
-
期中考试已过去，学生们的学习进了一个新的阶段，每个科目的老师又开始兢兢业业开始了他们的讲授之路。现以初一数学为例，具体说说现阶段的数学学习什么？如何去高效学习？在现阶段，学生们开始学习了一些简单的几何...
- 科技感十足的悬浮时钟（悬浮 时钟）
-
说起来磁悬浮已经不是什么新鲜事儿了，自从有了磁悬浮列车，好像所有的东西都可以跟磁悬浮扯上关系。一个来自瑞典的设计团队FLYTE设计了一款叫做STORY的时钟，利用磁悬浮技术，让时钟的指针飞了起来~▽设...
- 一上数学 第七单元 认识钟表 逐字稿
-
(bluehouse456全文整理）同学们大家好，老师，这里准备了一些图片，你知道是什么吗？是钟表。钟表在我们的生活中经常遇到，你知道钟表有什么作用吗？是的，钟表可以帮助人们计时安排一天的工作和学习...
- 人教版数学一年级上册第七单元《认识钟表》知识要点:
-
一、认识钟面1.钟面结构钟面上有12个数字，按顺时针方向排列，代表1到12时。分针：又细又长的指针，转动较快，指示分钟。时针：又粗又短的指针，转动较慢，指示小时。指针转动方向为顺时针（从左到右）。2...
- 浔阳小学一年级数学组举行钟表制作活动
-
九江新闻网讯（伍巧红）12月23日，浔阳小学一年级数学组组织学生进行制作钟表的活动。孩子们利用双休日与父母共同参与了这项活动。这次钟面设计手工制作活动，属于数学“设计与应用”领域。钟表与学生的生活息息...
- 时钟指针夹角计算公式（时钟夹角万能公式）
-
关于时钟指针夹角问题，小学应该有一定的认识，一些特殊情况下的夹角，学生能顺利求出。在初一数学《角》的教学中，我们对夹角问题会有更深入的了解。设定钟面时间为a时b分，此时，时针与分针夹角是多少呢？有没有...
- 雨城区四小教育集团汉碑校区一年级数学组开展“创意钟面”制作比赛
-
四川新闻网雅安5月6日讯为丰富学生的课余生活，培养创新思维和动手操作能力，复习巩固新学的《钟面的认识》，使学生进一步掌握“整时、几时半、大约几时”等知识点。近日，雨城区四小教育集团汉碑校区一年级数学...
- 一大波奇奇怪怪的钟表来袭，你见过几个?
-
别再问时间都去哪了，其实时间都去了设计师的脑洞里……No.1音乐时钟DINN意大利设计师AlessandroZambelli为钟表品牌Diamantini&Domeniconi设...
- 瑞士国铁钟表Mondaine:分秒不差的精准，穿越七十年的经典
-
在瑞士，时间不仅是数字，更是一种艺术。当你踏入瑞士任何一个火车站，目光一定会被站台上那简洁优雅的挂钟吸引——纯白的钟面、清晰的黑色刻度，再配上一根醒目的红色圆头秒针，仿佛在无声地诉说着瑞士人对精准与美...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)