百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

CSS 速查手册:核心属性一网打尽(图解css3:核心技术与案例实践)

itomcoil 2025-02-04 14:23 12 浏览

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

一、CSS 的书写位置

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

  1. 外部样式表: 通过 标签链接外部 CSS 文件。
  
  1. 内部样式表:
    1. 内联样式: 直接在 HTML 元素的 style 属性中定义 CSS 规则。

    This is a paragraph.

    二、颜色 (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 属性设置元素的透明度,取值范围 01

    十三、CSS 选择器 (CSS Selector)

    • 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 速查手册对你有帮助!欢迎在评论区分享你的经验。

相关推荐

Excel新函数TEXTSPLIT太强大了,轻松搞定数据拆分!

我是【桃大喵学习记】,欢迎大家关注哟~,每天为你分享职场办公软件使用技巧干货!最近我把WPS软件升级到了版本号:12.1.0.15990的最新版本,最版本已经支持文本拆分函数TEXTSPLIT了,并...

Excel超强数据拆分函数TEXTSPLIT,从入门到精通!

我是【桃大喵学习记】,欢迎大家关注哟~,每天为你分享职场办公软件使用技巧干货!今天跟大家分享的是Excel超强数据拆分函数TEXTSPLIT,带你从入门到精通!TEXTSPLIT函数真是太强大了,轻松...

看完就会用的C++17特性总结(c++11常用新特性)

作者:taoklin,腾讯WXG后台开发一、简单特性1.namespace嵌套C++17使我们可以更加简洁使用命名空间:2.std::variant升级版的C语言Union在C++17之前,通...

plsql字符串分割浅谈(plsql字符集设置)

工作之中遇到的小问题,在此抛出问题,并给出解决方法。一方面是为了给自己留下深刻印象,另一方面给遇到相似问题的同学一个解决思路。如若其中有写的不好或者不对的地方也请不加不吝赐教,集思广益,共同进步。遇到...

javascript如何分割字符串(javascript切割字符串)

javascript如何分割字符串在JavaScript中,您可以使用字符串的`split()`方法来将一个字符串分割成一个数组。`split()`方法接收一个参数,这个参数指定了分割字符串的方式。如...

TextSplit函数的使用方法(入门+进阶+高级共八种用法10个公式)

在Excel和WPS新增的几十个函数中,如果按实用性+功能性排名,textsplit排第二,无函数敢排第一。因为它不仅使用简单,而且解决了以前用超复杂公式才能搞定的难题。今天小编用10个公式,让你彻底...

Python字符串split()方法使用技巧

在Python中,字符串操作可谓是基础且关键的技能,而今天咱们要重点攻克的“堡垒”——split()方法,它能将看似浑然一体的字符串,按照我们的需求进行拆分,极大地便利了数据处理与文本解析工作。基本语...

go语言中字符串常用的系统函数(golang 字符串)

最近由于工作比较忙,视频有段时间没有更新了,在这里跟大家说声抱歉了,我尽快抽些时间整理下视频今天就发一篇关于go语言的基础知识吧!我这我工作中用到的一些常用函数,汇总出来分享给大家,希望对...

无规律文本拆分,这些函数你得会(没有分隔符没规律数据拆分)

今天文章来源于表格学员训练营群内答疑,混合文本拆分。其实拆分不难,只要规则明确就好办。就怕规则不清晰,或者规则太多。那真是,Oh,mygod.如上图所示进行拆分,文字表达实在是有点难,所以小熊变身灵...

Python之文本解析:字符串格式化的逆操作?

引言前面的文章中,提到了关于Python中字符串中的相关操作,更多地涉及到了字符串的格式化,有些地方也称为字符串插值操作,本质上,就是把多个字符串拼接在一起,以固定的格式呈现。关于字符串的操作,其实还...

忘记【分列】吧,TEXTSPLIT拆分文本好用100倍

函数TEXTSPLIT的作用是:按分隔符将字符串拆分为行或列。仅ExcelM365版本可用。基本应用将A2单元格内容按逗号拆分。=TEXTSPLIT(A2,",")第二参数设置为逗号...

Excel365版本新函数TEXTSPLIT,专攻文本拆分

Excel中字符串的处理,拆分和合并是比较常见的需求。合并,当前最好用的函数非TEXTJOIN不可。拆分,Office365于2022年3月更新了一个专业函数:TEXTSPLIT语法参数:【...

站长在线Python精讲使用正则表达式的split()方法分割字符串详解

欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是《在Python中使用正则表达式的split()方法分割字符串详解》。使用正则表达式分割字符串在Python中使用正则表达式的split(...

Java中字符串分割的方法(java字符串切割方法)

技术背景在Java编程中,经常需要对字符串进行分割操作,例如将一个包含多个信息的字符串按照特定的分隔符拆分成多个子字符串。常见的应用场景包括解析CSV文件、处理网络请求参数等。实现步骤1.使用Str...

因为一个函数strtok踩坑,我被老工程师无情嘲笑了

在用C/C++实现字符串切割中,strtok函数经常用到,其主要作用是按照给定的字符集分隔字符串,并返回各子字符串。但是实际上,可不止有strtok(),还有strtok、strtok_s、strto...