文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载本文基于 learnxinyminutes-docs 仓库中的土耳其语 CSS 教程 tr/css.md 及其英文原版 css.md系统梳理 CSS 的规则结构、各类选择器、属性与取值、三种引入方式、层叠优先级与媒体查询帮助读者在最短时间内建立一套可上手实战的 CSS 知识框架。读完本文你将能够读懂任意样式表的结构、精准定位页面元素、理解样式冲突时的裁决规则并写出适配打印与不同屏幕尺寸的响应式规则。文档背景一份代码即教程的 CSS 快速入门learnxinyminutes-docs 仓库的核心理念在 README.md 中描述为 Whirlwind tours of popular programming languages, presented as valid, commented code——即用本身就是合法代码、边写边注释的方式讲解语言与工具。CSS 教程正是这一风格的典型代表整篇教程由一段完整可运行的样式代码骨架、配套 HTML 示例与逐行注释构成。英文原版位于仓库根目录 css.md是本系列 CSS 教程的权威版本土耳其语译本位于 tr/css.md与英文原版保持同一结构并新增了译者信息仓库中还存在 cs/css.md、de/css.md、es/css.md、fr/css.md、ja/css.md、ru/css.md 等多个语言译本可作为对照学习材料。每份教程文件头部都带有 YAML frontmatter例如 tr/css.md 中声明了contributors贡献者与translators译者字段。仓库的 lint/frontmatter.py 脚本会对所有 Markdown 文档的 frontmatter 做校验允许的键为name、where_x_eq_name、category、filename、contributors、translators其中 contributors 与 translators 必须是列表且元素为 1~2 项的字符串列表。这也解释了为什么每份教程都能被搜索引擎、Agent 与 LLM 稳定地识别主题与归属。CSS 在 Web 技术栈中的定位非常清晰HTML 决定页面有什么内容CSS 决定页面长什么样。CSS 代码由静态的规则rule组成每条规则包含一个或多个选择器selector并为若干视觉属性property赋予具体的值value随后这些属性被应用到选择器所指向的页面元素上。本教程以 CSS 2 为基线同时覆盖 CSS 3 引入的新特性。注意CSS 产出的是可视化结果因此学习时必须配合 CSS 游乐场playground即时试验例如 dabblet 这类在线工具本文侧重语法规则与通用技巧。规则与语法骨架CSS 的基本单元是规则块写法如下/* 注释只能写在斜杠-星号之间CSS 没有单行注释语法 */ seçici { özellik: değer; /* 更多属性... */ }即选择器 { 属性: 值; }。一条规则内可包含多条属性: 值声明彼此用分号分隔。注释是 CSS 中唯一的注释形式不支持//单行注释。选择器从类、ID 到属性与结构关系选择器用于瞄准页面上的某个元素。教程以一个示例元素贯穿讲解div classclass1 class2 idanID attrvalue otherAttren-us foo bar /基础选择器/* 用其中一个 CSS 类名定位 */ .class1 { } /* 或同时命中两个类 */ .class1.class2 { } /* 或用元素名标签名定位 */ div { } /* 或用它的 ID 定位 */ #anID { }属性选择器属性选择器允许根据元素拥有什么属性来定位是 CSS 3 起大幅增强的能力/* 只要元素带有该属性即可 */ [attr] { font-size: smaller; } /* 属性值精确等于某个值 */ [attrvalue] { font-size: smaller; } /* 属性值以某段文本开头CSS 3 */ [attr^val] { font-size: smaller; } /* 属性值以某段文本结尾CSS 3 */ [attr$ue] { font-size: smaller; } /* 属性值包含某段文本CSS 3英文原版补充 */ [attr*foo] { } /* 属性值在空格分隔的列表中包含某个词 */ [otherAttr~foo] { } [otherAttr~bar] { } /* 属性值在连字符分隔的列表中包含某个词分隔符为 -U002D */ [otherAttr|en] { font-size: smaller; }其中~与|都是精确匹配词条而非子串~针对空格分隔如otherAttren-us foo bar中的foo、bar|针对连字符分隔如en-us中的en。组合选择器让定位更精准/* 多个选择器无空格拼接要求元素同时满足全部条件 */ div.some-class[attr$ue] { } /* 子元素某元素的直接子级 */ div.some-parent .class-name { } /* 后代元素树中任意层级的子孙。子元素是直接后代后代可以是任意层级 */ div.some-parent .class-name { } /* 警告去掉空格后含义完全不同——它表示同一元素同时具有两个类 */ div.some-parent.class-name { }最后一条是初学者极易踩的坑div.some-parent .class-name有空格与div.some-parent.class-name无空格语义截然不同前者是后代关系后者是同一元素的多重条件。兄弟选择器/* 紧邻的后续兄弟元素 */ .i-am-just-before .this-element { } /* 之前出现的任意兄弟元素 */ .i-am-any-element-before ~ .this-element { }伪类按状态选择伪类pseudo classes用于在元素处于特定状态时命中它/* 鼠标悬停在元素上时 */ selector:hover { } /* 链接已被访问时 */ selector:visited { } /* 链接尚未被访问时 */ selected:link { } /* 元素获得焦点时 */ selected:focus { } /* 链接被点击按下时英文原版补充 */ selector:active { } /* 上述与链接相关的伪类建议始终按 :link → :visited → :focus → :hover → :active 顺序书写否则可能不生效英文原版补充 */ /* 是其父元素的第一个子元素 */ selector:first-child {} /* 是其父元素的最后一个子元素 */ selector:last-child {} /* 是其父元素的第 n 个子元素CSS 3英文原版补充 */ selector:nth-child(n) { } /* 选中不具备某状态/属性的元素CSS 3英文原版补充 例如选中所有没有 id 属性的 div */ div:not([id]) { background-color: red; }伪元素给文档的特定片段加样式伪元素pseudo elements与伪类类似但作用于元素内部的虚拟片段/* 匹配选中元素的虚拟第一个子元素常用于插入装饰内容 */ selector::before {} /* 匹配选中元素的虚拟最后一个子元素 */ selector::after {}通配选择器与分组* { } /* 所有元素 */ .parent * { } /* 所有后代元素 */ .parent * { } /* 所有直接子元素 */ /* 分组将多个选择器合并统一应用样式英文原版补充 */ selector1, selector2 { }属性与取值详解在规则块内部可以组合使用长度单位、颜色、边框、背景与字体等属性。长度单位相对与绝对CSS 的长度单位分为相对单位与绝对单位两大类类型写法含义相对width: 50%父元素宽度的百分比相对font-size: 2em元素自身原始字体大小的倍数相对font-size: 2rem根元素html字体大小的倍数相对font-size: 2vw视口宽度的 1% 的倍数CSS 3相对font-size: 2vh视口高度的 1% 的倍数CSS 3相对font-size: 2vmin取 vh 与 vw 中较小者相对font-size: 2vmax取 vh 与 vw 中较大者绝对width: 200px像素绝对font-size: 20pt磅点绝对width: 5cm厘米绝对min-width: 50mm毫米绝对max-width: 5in英寸颜色表示法color: #F6E; /* 短十六进制HEX格式 */ color: #FF66EE; /* 长十六进制HEX格式 */ color: tomato; /* 命名颜色 */ color: rgb(255, 255, 255); /* RGB 数值 */ color: rgb(10%, 20%, 50%); /* RGB 百分比 */ color: rgba(255, 0, 0, 0.3); /* RGBA注意 0 a 1CSS 3 */ color: transparent; /* 等价于把透明度设为 0 */ color: hsl(0, 100%, 50%); /* HSL 百分比CSS 3 */ color: hsla(0, 100%, 50%, 0.3); /* HSL 加透明度 */边框与圆角border-width: 5px; border-style: solid; border-color: red; /* 设置方式与 background-color 类似 */ border: 5px solid red; /* 上述三者的简写形式 */ border-radius: 20px; /* CSS 3 属性圆角半径 */背景与字体/* 用图片作为元素背景url() 内的引号可省略 */ background-image: url(/img-path/img.jpg); /* 字体族名称含空格时必须加引号 */ font-family: Arial; font-family: Courier New; /* 若第一个字体不可用浏览器依次尝试后续字体 */ font-family: Courier New, Trebuchet, Arial, sans-serif;CSS 3 进阶能力英文原版补充英文原版 css.md 在基础属性之后还给出了四组 CSS 3 特性可用于现代化布局/* 自定义属性CSS 变量 */ :root { --main-bg-color: whitesmoke; } body { background-color: var(--main-bg-color); } /* 计算表达式 */ body { width: calc(100vw - 100px); } /* 规则嵌套CSS 3等价于 .main .bgred { } / .main .bggreen { } / .main.bgblue { } */ .main { .bgred { background: red; } .bggreen { background: green; } .bgblue { background: blue; } } /* 弹性布局Flexbox响应式布局的基础 */ .container { display: flex; flex-direction: row; /* 主轴方向 */ flex-wrap: wrap; /* 是否换行 */ justify-content: center; /* 主轴方向的对齐方式 */ align-items: center; /* 交叉轴方向的对齐方式 */ }三种引入方式将样式表保存为.css扩展名后可通过三种方式应用到页面!-- 方式一推荐在页面 head 中通过 link 引入外部样式表 -- link relstylesheet typetext/css hrefpath/to/style.css !-- 方式二在标记中内嵌 style 块 -- style a { color: purple; } /style !-- 方式三直接在元素上设置 style 属性 -- div styleborder: 1px solid red; /div外部link是推荐方式因为它将内容与表现分离、便于缓存与复用内嵌style适合单页小范围样式元素级style属性内联样式虽然直接但会提高优先级、增加维护成本应谨慎使用。层叠与优先级Cascade一个元素可能同时被多个选择器命中同一属性也可能被多次赋值。此时哪条规则生效答案是选择器更具体的规则优先于不具体的规则同特异性下样式表中靠后的规则覆盖靠前的规则。这一裁决过程被称为层叠cascadingCascading Style Sheets层叠样式表的名字正源于此。英文原版还补充了一个细节如果两个不同的外部样式表都包含针对同一元素的规则且特异性相同则链接顺序决定胜负——最后链接的样式表生效。以下面的 CSS 与标记为例土耳其语教程原文示例/* A */ p.class1[attrdeğer] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { özellik: değer !important; }p style/*F*/ özellik:değer; classclass1 class2 attrdeğer样式优先级从高到低为E因!important关键字获得最高优先级官方建议尽量避免使用F内联样式元素style属性次之A特异性最高包含 3 个限定条件——元素名p、类class1、属性attrdeğerC与 B 特异性相同但出现在 B 之后因此胜出B次之D最后。关键认知优先级是针对每一个属性分别裁决的而不是针对整个规则块。此外如果同特异性的两条规则来自不同链接样式表则链接顺序决定最终样式。媒体查询与响应式设计CSS 媒体查询Media Queries是 CSS 3 提供的特性用于指定某些规则在何时生效——例如打印时、或在特定尺寸/像素密度的屏幕上。媒体查询不会增加选择器的特异性。/* 所有设备通用的规则 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印时让 h1 少用墨水 */ 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许多智能手机和平板默认会按桌面视口渲染页面除非提供viewportmeta 标签head meta nameviewport contentwidthdevice-width; initial-scale1.0 /head兼容性检查与进一步学习CSS 2 的绝大多数特性以及 CSS 3 的多数特性在所有浏览器和设备上可用但在使用新特性之前建议先查询其兼容性情况。业界常用的参考工具包括CanIUse详细的兼容性数据库、DabbletCSS 游乐场、Mozilla 开发者网络MDN的 CSS 文档教程与参考以及 Codrops 的 CSS 参考手册Z-Index 与层叠上下文stacking context也是深入理解视觉层级时值得研读的主题。若想继续在本仓库中加深 CSS 生态的知识可以对照阅读html.md——CSS 的搭档语言负责页面内容结构sass.md 与 less.md——CSS 预处理器的快速入门其他语言的 CSS 译本如 es/css.md、ru/css.md可用于对照同一套概念在不同语言下的表述。小结回顾本指南你可以从 tr/css.md 与 css.md 这两份文档中带走一条完整的 CSS 学习主线先理解规则 选择器 属性 值的骨架再掌握类、ID、属性、组合、伪类与伪元素等层层递进的选择器体系随后熟悉相对/绝对单位、颜色、边框、背景与字体等常用属性取值然后理解三种引入方式与层叠 特异性 顺序的优先级裁决规则最后用媒体查询与 viewport 配置让样式适配打印与移动端。这正是一份五分钟扫读、实战时随时查阅的 CSS 速查手册所应具备的全部要素。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐learnxinyminutes-docs 之 CSS 速成指南选择器、单位、层叠优先级与媒体查询全解析learnxinyminutes docs 之 CSS 速成指南选择器、单位、层叠优先级与媒体查询全解析 本篇技术指南以开源仓库 learnxinyminut文档教程Learn X in minutes 风格 CSS 速成指南选择器、属性与层叠优先级全解析learnxinyminutes-docs 实战笔记Learn X in minutes 风格 CSS 速成指南选择器、属性与层叠优先级全解析learnxinyminutes docs 实战笔记 本文以 l文档教程Learn X in Y minutes 之 CSS 速成指南选择器、级联优先级与媒体查询全解析Learn X in Y minutes 之 CSS 速成指南选择器、级联优先级与媒体查询全解析 本篇技术指南以开源仓库 learnxinyminutes d文档教程上一篇如何用5分钟快速上手UI-TARS Desktop终极智能自动化工具指南下一篇基于 AWS SDK for .NET 的 Amazon KeyspacesApache Cassandra 兼容实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考