文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载本篇指南以仓库中的波斯语译本 fa/css.md为主体骨架并对照其英文原版 css.md进行扩充系统讲解 CSS 的核心语法从基本选择器、属性选择器、关系组合器、伪类到单位、颜色、字体与背景再到三种引入方式、层叠优先级Cascade与 CSS3 进阶特性媒体查询、变量、Flexbox。阅读本文后你将能够独立读懂并编写一套结构完整、优先级可控、可适配多设备的 CSS 样式表。文档与项目背景Learn X in Y minutes 项目的核心理念是把代码写成文档Code documentation written as code每一门语言或技术都整理成一份带有详细注释、可直接运行的代码教程。仓库中的fa/目录存放波斯语Farsi翻译fa/css.md 即是由英文原版 css.md 翻译而来的波斯语 CSS 教程其 frontmatter 中同时记录了contributors原作者与translators译者信息。根据 CONTRIBUTING.md 的规范非英文文档需要额外声明translators字段而仓库的 lint/frontmatter.py 脚本会校验这些 YAML 元数据的键名与类型是否合法——这正是该项目保证每篇文档格式一致性的工程手段。本文档的立足版本是CSS 2.0它虽然不是最新版本但拥有最广泛、最稳定的浏览器支持同时文中也标注了大量CSS 3扩展特性如^、$、~属性选择器、视口单位、rgba/hsl颜色、媒体查询等。由于 CSS 的最终效果是可视化的文档建议读者在在线 CSS 练习场中亲手实验每个示例本文则聚焦语法本身与通用要点。CSS 核心思想内容与表现分离在 Web 发展早期页面几乎没有任何视觉元素内容只是纯文本随着浏览器能力的演进完全可视化的页面逐渐普及。CSSCascading Style Sheets层叠样式表正是为此诞生的标准语言它存在的根本目的是保持内容HTML与表现外观、感觉之间的分离。HTML 负责定义页面的内容结构CSS 负责定义页面的外观呈现。CSS 代码由静态的规则rule组成每条规则通过一个或多个选择器selector锁定页面元素并为一系列视觉属性property赋予具体值value最终这些属性被应用到选择器所指的页面元素上。基本语法与注释CSS 的指令结构非常简洁一条规则的基本形态为selector { property: value; /* more properties...*/ }注释是 CSS 中唯一被允许的注释形式CSS没有类似 C 语言的单行注释//所有注释都必须写在/* ... */之间且可以跨越多行/* comments appear inside slash-asterisk, just like this line! there are no one-line comments; this is the only comment style */选择器精确锁定页面元素假设页面中存在如下元素后续选择器示例均以它为目标div classsome-class class2 idsomeId attrvalue otherAttren-us foo bar /基础选择器通配、类、ID 与元素使用*通配符可以为页面上所有元素定义样式* { color:red; }按类名class选择.some-class { }同时命中两个类名元素必须同时拥有这两个类.some-class.class2 { }按 ID 选择#someId { }按元素名标签名选择div { }属性选择器及其 CSS3 变体按元素是否拥有某属性选择[attr] { font-size:smaller; }按属性值精确匹配选择[attrvalue] { font-size:smaller; }按属性值以某字符串开头选择CSS3[attr^val] { font-size:smaller; }按属性值以某字符串结尾选择CSS3[attr$ue] { font-size:smaller; }按属性值包含某子串选择CSS3[attr*foo] { }按属性值处于空格分隔的列表中选择CSS3例如otherAttren-us foo bar中的foo或bar[otherAttr~foo] { } [otherAttr~bar] { }按属性值处于连字符分隔的列表中选择CSS3例如otherAttr|en可命中en、en-us这类取值[otherAttr|en] { font-size:smaller; }组合选择器多种条件叠加可以将不同选择器组合成更精确的目标。关键提醒组合时不要添加任何空格否则语义会完全改变空格代表后代见下文关系组合器div.some-class[attr$ue] { }关系组合器基于 DOM 结构选择子组合器选择某个元素的直接子元素。下面规则选中所有类名为.class-name、且其父元素满足div.some-parent的元素div.some-parent .class-name {}后代组合器空格选择某个元素内部任意深度的后代元素。子元素是仅隔一层的直接后代后代可以是树中任意层级div.some-parent .class-name {}注意此处的空格至关重要它与上文无空格的组合选择器含义完全不同div.some-parent.class-name {}相邻兄弟组合器选择紧跟在某元素之后、且具有同一父元素的兄弟元素。下面规则选中所有类名为.this-element、且紧邻位于.i-am-before之后的元素.i-am-before .this-element { }通用兄弟组合器~选择某元素之后的所有兄弟元素它们不必紧邻但必须共享同一个父元素.i-am-any-before ~ .this-element {}伪类与伪元素按状态与虚拟节点选择伪类pseudo-class允许你仅在元素处于特定状态时选中它鼠标悬停在元素上方时selector:hover {}链接已被访问过时selector:visited {}链接尚未被访问时selector:link {}输入元素获得焦点时selector:focus {}链接被点击的瞬间激活态selector:active {}实践要点与链接相关的伪类:link、:visited、:hover、:active应当按上述顺序书写即 LVHA 顺序否则样式可能无法按预期生效。进一步扩展的伪类与伪元素英文原版补充/* 父元素的第一个子元素 */ selector:first-child {} /* 父元素的最后一个子元素 */ selector:last-child {} /* 父元素的第 n 个子元素CSS3 */ selector:nth-child(n) { } /* 伪元素匹配选中元素的虚拟首个子节点 */ selector::before {} /* 伪元素匹配选中元素的虚拟末个子节点 */ selector::after {} /* 通配符的更多用法 */ * { } /* 所有元素 */ .parent * { } /* 所有后代 */ .parent * { }/* 所有直接子元素 */ /* 分组一次为多个选择器定义相同样式 */ selector1, selector2 { } /* 否定伪类CSS3选中不具备某状态的元素如没有 id 属性的 div */ div:not([id]) { background-color: red; }取值单位与颜色长度单位相对与绝对长度单位可分为相对单位与绝对单位两类。相对单位随父元素、根元素或视口变化width: 50%; /* 父元素宽度的百分比 */ font-size: 2em; /* 元素原始 font-size 的倍数即当前字体大小的两倍 */ font-size: 2rem; /* 根元素htmlfont-size 的倍数 */ font-size: 2vw; /* 视口宽度的 1% 的倍数CSS3 */ font-size: 2vh; /* 视口高度的 1% 的倍数CSS3 */ font-size: 2vmin; /* vh 与 vw 中较小者的倍数CSS3 */ font-size: 2vmax; /* vh 与 vw 中较大者的倍数CSS3 */绝对单位固定尺寸width: 200px; /* 像素 */ font-size: 20pt; /* 磅points */ width: 5cm; /* 厘米 */ min-width: 50mm; /* 毫米 */ max-width: 5in; /* 英寸注意 max-(width|height) 的配合用法 */颜色表示法CSS 提供了多种等效的颜色写法background-color: #F6E; /* 短十六进制等价于 #FF66EE */ background-color: #F262E2; /* 长十六进制 */ background-color: tomato; /* 颜色名称 */ background-color: rgb(255, 255, 255); /* rgb 数值 */ background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */ background-color: rgba(255, 0, 0, 0.3); /* rgba末尾为透明度0 a 1CSS3 */ background-color: transparent; /* 完全透明等价于 alpha 为 0 */ background-color: hsl(0, 100%, 50%); /* hsl 色相-饱和度-明度CSS3 */ background-color: hsla(0, 100%, 50%, 0.3); /* hsla可在末尾指定透明度CSS3 */背景图与字体使用图片作为元素背景url()中的引号可省略background-image: url(/path-to-image/image.jpg);字体族设置与回退链浏览器优先使用第一个字体若找不到则依次尝试后续字体font-family: Arial; font-family: Courier New; /* 字体名含空格时必须加引号 */ font-family: Courier New, Trebuchet, Arial, sans-serif;边框英文原版补充border-width: 5px; border-style: solid; border-color: red; /* 设置方式与 background-color 类似 */ border: 5px solid red; /* 以上三者的简写 */ border-radius: 20px; /* 圆角CSS3 属性 */使用方式三种引入 CSS 的方法将全部 CSS 指令保存为后缀为.css的样式表文件然后在 HTML 的head部分引入link relstylesheet typetext/css hrefpath/to/style.css /这是推荐的做法。也可以使用style标签在head内以内嵌方式书写 CSS但应尽量避免style a { color: purple; } /style还可以把 CSS 指令作为元素的style属性直接书写这是最不推荐的方式内联样式会带来最高的层叠优先级难以覆盖div styleborder: 1px solid red; /div层叠与优先级Precedence / Cascade一个元素可能被多个选择器同时命中同一属性也可能被多次设置此时必然有一条规则胜出。更具体更精确的选择器优先于较不具体的规则且样式表中后出现的规则覆盖先出现的规则若两个不同样式表包含针对同一元素且特异性相同的规则则链接顺序靠后的样式表生效。这一过程被称为层叠cascading这也是层叠样式表Cascading Style Sheets名称的由来。一个完整的优先级判定实例给定如下 CSS/* A */ p.class1[attrvalue] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { property: value !important; }以及如下标记p style/*F*/ property:value; classclass1 class2 attrvalue /p优先级从高到低依次为E 最高因为它使用了关键字!important。文档建议尽量避免使用它除非确有必要F 次之因为它是内联样式inline styleA 再次之因为它比其它任何规则都更具体——它包含 3 个限定符元素名p、类名class1、属性attrvalueC 随后它虽然与 B 的特异性相同但在样式表中位于 B 之后故优先于 BB 其次D 最后它是特异性最低的元素选择器。重要提醒以上优先级是针对每一条属性而言的而不是针对整个规则块。也就是说一条规则中某个属性胜出不代表该规则中的其它属性也必然胜出。CSS3 进阶特性英文原版补充媒体查询Media Queries媒体查询是 CSS3 特性用于指定某些规则在特定条件下生效——例如打印时或屏幕达到特定尺寸/像素密度时。媒体查询不会增加选择器的特异性。/* 对所有设备生效的基础规则 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印时改为省墨配色 */ media print { h1 { color: black; background-color: white; } } /* 屏幕宽度至少 480px 时放大字体 */ media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } }媒体查询可用的特性包括width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、resolution、scan、grid其中大部分可用min-或max-前缀修饰。resolution特性在老设备上不受支持可改用device-pixel-ratio。此外许多智能手机和平板在未提供viewport元标签时会尝试按桌面端渲染页面head meta nameviewport contentwidthdevice-width; initial-scale1.0 /head自定义属性变量与 calc() 计算CSS3 支持用--前缀声明自定义属性变量并通过var()引用:root { --main-bg-color: whitesmoke; } body { background-color: var(--main-bg-color) }也支持使用calc()进行长度计算body { width: calc(100vw - 100px) }规则嵌套与 Flexbox 弹性布局CSS3 支持在样式规则内部继续嵌套子规则配合引用当前选择器.main { .bgred { /* 等价于 .main .bgred { } */ background: red; } .bggreen { /* 等价于 .main .bggreen { } */ background: green; } .bgblue { /* 无空格等价于 .main.bgblue { } */ background: blue; } }Flexbox 可便捷地实现响应式布局.container { display: flex; flex-direction: row; /* 弹性项目的排列方向 */ flex-wrap: wrap; /* 弹性项目是否换行 */ justify-content: center; /* 水平方向的对齐方式 */ align-items: center; /* 垂直方向的对齐方式 */ }兼容性检查CSS 2 的大部分特性以及越来越多 CSS 3 特性在所有浏览器和设备上都是可用的。但在引入新特性之前始终应当核对目标浏览器的兼容性这是必备的良好实践CanIUse提供详细的特性兼容性查询QuirksMode CSS经典的兼容性与实现差异参考资料Mozilla Developer NetworkMDN的 CSS 文档提供完整的教程与参考。仓库内延伸阅读英文原版 CSS 文档本文档的权威原始版本包含更完整的注释与 CSS3 示例波斯语 HTML 教程 fa/html.md与 CSS 配套的内容标记语言HTML 定义结构、CSS 定义外观CONTRIBUTING.md了解本文档 frontmattercontributors、translators等字段的书写规范lint/frontmatter.py仓库用于校验文档 YAML 元数据的工程化脚本可借此理解项目如何保证多语言文档格式的一致性。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐Learn X in Y minutes 之 CSS 速成指南选择器、级联优先级与媒体查询全解析Learn X in Y minutes 之 CSS 速成指南选择器、级联优先级与媒体查询全解析 本篇技术指南以开源仓库 learnxinyminutes d文档教程Learn X in Y minutes 系列CSS 层叠样式表核心技术速成指南Learn X in Y minutes 系列CSS 层叠样式表核心技术速成指南 导读 CSSCascading Style Sheets层叠样式表是与文档教程Learn X in Y minutes 之 CSS 语法全解选择器、级联规则与媒体查询实战指南Learn X in Y minutes 之 CSS 语法全解选择器、级联规则与媒体查询实战指南 CSSCascading Style Sheets级联样文档教程上一篇Vim真彩色终极指南256色终端到真彩色的完美升级下一篇Qt Go与TensorFlow Lite集成移动端AI应用开发的终极指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考