CodeNodeX AI
Sign upWrite

Learning Path

CSS reference tutorials

Browse tutorials and chapters for CSS reference.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

319

TAXONOMYFrontendFetched/CSS reference

CSS 参考手册

CSS 参考手册 菜鸟教程的 CSS 参考手册在所有主流浏览器中测试通过. CSS 属性 CSS 属性组： 动画 背景 边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面媒体 定位 分页 Ruby 语..

TUTORIALFrontendFetched/CSS reference

CSS 动画

CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。 ..

TUTORIALFrontendFetched/CSS reference

CSS backdrop-filter 属性

CSS backdrop-filter 属性 实例 让元素后面区域添加图形效果: [mycode3 type='css'] .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -..

TUTORIALFrontendFetched/CSS reference

CSS 颜色名称

CSS 颜色名称 所有浏览器都支持颜色名称 147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。下表列出了所有这些，连同其十六进制值。 提示: 17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。 点击颜色的名称或十六进制值，伴随着不同的颜色名称或值其背景颜色会改变: 按颜色名称排序 列表按十六进制值进行排序 Color Name ..

TUTORIALFrontendFetched/CSS reference

CSS 合法颜色值

CSS 合法颜色值 CSS 合法的颜色值可以通过多种方式指定，包括命名颜色、十六进制、RGB、RGBA、HSL、HSLA，以及颜色函数。以下是几种常见的合法颜色值格式： 命名颜色：直接使用颜色名称，例如：red、blue、green 等。 color: red; 十六进制颜色：使用 #RRGGBB 或 #RGB 形式的十六进制值。 color: #ff0000; /* 红色 */ color: #f00; /* 简写形式..

TUTORIALFrontendFetched/CSS reference

CSS 颜色

CSS 颜色 颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。 颜色值 CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF） 3个双位数字的十六进制值写法，以＃符号开始。 颜色实例 Color Color HEX Color RGB #000000 rgb(0,0,0..

TUTORIALFrontendFetched/CSS reference

CSS 颜色十六进制值

CSS 颜色十六进制值 按十六进制值排序 列表按颜色名称进行排序 Color Name HEX Color Black  #000000   Navy  #000080   DarkBlue  #00008B   MediumBlue  #0000CD   ..

TUTORIALFrontendFetched/CSS reference

CSS 函数

CSS 函数 CSS 有以下几个函数： 函数 描述 CSS 版本 attr() 返回选择元素的属性值。 2 calc() 允许计算 CSS 的属性值，比如动态计算长度值。 3 cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)。 3 conic-..

TUTORIALFrontendFetched/CSS reference

CSS inherit 关键字

CSS inherit 关键字 CSS 参考手册 实例 设置 <span> 元素的文本颜色为蓝色，那些 class='extra' 的元素除外： [mycode3 type='css'] span { color: blue; } .extra span { color: inherit; } [/mycode3] 尝试一下 » 浏..

TUTORIALFrontendFetched/CSS reference

CSS initial 关键字

CSS initial 关键字 CSS 参考手册 实例 设置 <div> 元素内的文本颜色为红色，但是为 <h1> 元素保持最初的颜色： [mycode3 type='css'] div {color: red; } h1 {color: initial; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该关键字的第一..

TUTORIALFrontendFetched/CSS reference

CSS grid 属性

CSS grid 属性 实例 制作一个三列网格布局，并设置第一行高度为 160 像素： [mycode3 type='css'] .grid-container { display: grid; grid: 160px / auto auto auto; } [/mycode3] 尝试一下 » 标签定义及使用说明 grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性： 显式网..

TUTORIALFrontendFetched/CSS reference

CSS writing-mode 属性

CSS writing-mode 属性 实例 表格中展示了不同的书写模式： [mycode3 type='css'] .example.Text1 span, .example.Text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } ...

TUTORIALFrontendFetched/CSS reference

CSS 听觉参考手册

CSS 听觉参考手册 听觉样式表使用了语音合成和声音效果的结合，让用户收听信息，而不是读取信息。 有声显示可用于： 失明人士 帮助用户学习阅读 帮助具有阅读问题的用户 家庭娱乐 在车上 听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。 听觉样式表的一个例子： 实例 [mycode4 type='css'] h1,h2,h3,h4 { voice-family:ma..

TUTORIALFrontendFetched/CSS reference

CSS 参考手册

CSS 参考手册 菜鸟教程的 CSS 参考手册在所有主流浏览器中测试通过. CSS 属性 CSS 属性组： 动画 背景 边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面媒体 定位 分页 Ruby 语..

TUTORIALFrontendFetched/CSS reference

CSS :has 选择器

CSS :has 选择器 完整CSS选择器参考手册 实例 我们希望为包含 <div> 子元素的 .parent 元素应用样式： [mycode3 type='css'] .parent:has(div) { border: 1px solid red; } [/mycode3] 尝试一下 » 定义和使用 CSS 的 :has 伪类是一种选择器，它允许你根据..

TUTORIALFrontendFetched/CSS reference

CSS :is 选择器

CSS :is 选择器 完整CSS选择器参考手册 实例 我们希望为包含 <p> 的标签设置颜色： [mycode3 type='css'] :is(p) { color: red; } [/mycode3] 尝试一下 » 定义和使用 CSS 的 :is 伪类是一个通用选择器，它允许你将多个选择器组合在一起，以便在 CSS 规则中复用它们。 :is 伪类可以..

TUTORIALFrontendFetched/CSS reference

CSS 选择器

CSS 选择器 CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。 CSS 选择器用于选择你想要的元素的样式的模式。 下列表格中的 “CSS” 列表示在 CSS 版本的属性定义，CSS1、CSS2 和 CSS3 是层叠样式表（Cascading Style Sheets）的不同版本，每个版本引入了新的特性和功能，以改进网页样式的控制和设计。 常见的 CSS 选择器 下是一些常见的 CSS 选择器： 元..

TUTORIALFrontendFetched/CSS reference

CSS 单位

CSS 单位 CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。 对于一些 CSS 属性，长度可以是负数。 有两种类型的长度单位：相对和绝对。 浏览器支持 下表中的数字表示支持该长度单..

TUTORIALFrontendFetched/CSS reference

CSS Web安全字体组合

CSS Web安全字体组合 常用的字体组合 font-family属性是多种字体的名称，作为一个“应变”制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。 你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的: 实例 p{font-family:'Times New Roman', Times, serif} 尝试一下 » 下面是一些常用..

TUTORIALFrontendFetched/CSS reference

CSS3 浏览器支持参考手册

table.bsReference td { padding:3px; vertical-align:middle; background-position:center; background-repeat:no-repeat; border:1px solid #dadada; text-align:right; font-size:10px; } table.bsReference td.bsProperty { white-s..

TUTORIALFrontendFetched/CSS reference

CSS align-content 属性

CSS align-content 属性 CSS 参考手册 实例 对齐弹性盒的 <div> 元素的各项： [mycode3 type='css'] div { display: flex; flex-flow: row wrap; align-content:space-around; } [/mycode3] 尝试一下 » 浏览器支持 ..

TUTORIALFrontendFetched/CSS reference

CSS align-items 属性

CSS align-items 属性 CSS 参考手册 实例 居中对齐弹性盒的各项 <div> 元素： [mycode3 type='css'] div { display: flex; align-items:center; }[/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webki..

TUTORIALFrontendFetched/CSS reference

CSS align-self 属性

CSS align-self 属性 CSS 参考手册 实例 居中对齐弹性对象元素内的某个项： [mycode3 type='css'] #myBlueDiv { align-self:center; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一..

TUTORIALFrontendFetched/CSS reference

CSS all 属性

CSS all 属性 实例 修改所有元素或其父元素的属性为初始值： div {    background-color: yellow;    color: red;    all: initial;} 尝试一下 » 定义和使用 all 属性用于重..