目录

CSS 示例

❮ 上一节下一节 ❯

CSS 语法

CSS 语法解释

CSS 选择器

元素选择器 id选择器类选择器（适用于所有元素）类选择器（仅适用于 <p> 元素）引用两个类的 HTML 元素通用选择器分组选择器

CSS 选择器解释

CSS 如何/去哪里

外部CSS 内部CSS 内联CSS 多个样式表级联顺序

CSS如何解释

CSS 注释

单行注释多行注释

CSS 注释解释

CSS 颜色

设置元素的背景颜色设置文字颜色设置边框颜色设置不同的颜色值设置 RGB 值设置十六进制值设置 HSL 值

CSS 颜色解释

CSS 背景

设置页面的背景颜色设置不同元素的背景颜色将图片设置为页面背景如何仅水平重复背景图片如何定位背景图片固定背景图片（该图片不会与页面的其余部分一起滚动）所有背景属性都在一个声明中高级背景示例

CSS 背景属性解释

CSS 边框

CSS 边框属性解释

CSS 边距

为元素的每一侧指定不同的边距使用具有四个值的简写 margin 属性使用具有三个值的简写 margin 属性使用具有两个值的简写 margin 属性使用具有一个值的简写 margin 属性将 margin 设置为 auto 以使元素在其容器内居中让左边距继承自父元素外边距折叠

外边距属性解释

CSS 填充

为元素的每一侧指定不同的填充使用具有四个值的简写 padding 属性使用具有三个值的简写 padding 属性使用具有两个值的简写 padding 属性使用具有一个值的简写填充属性填充和元素宽度（没有框大小）填充和元素宽度（带有框大小）设置元素的左内边距设置元素的 padding-right 设置元素的 padding-top 设置元素的 padding-bottom

CSS 填充属性解释

CSS 高度/宽度

设置元素的高度和宽度设置元素的最大宽度设置不同元素的高度和宽度使用百分比设置图片的高度和宽度设置元素的最小宽度和最大宽度设置元素的最小高度和最大高度

CSS 高度/宽度属性解释

CSS 盒子模型

演示盒子模型指定总宽度为250px的元素

CSS盒子模型解释

CSS 外轮廓

围绕元素绘制一条线（轮廓）设置轮廓样式设置轮廓的颜色设置轮廓的宽度使用简写外轮廓属性在元素的轮廓和边缘/边框之间添加空间

CSS 轮廓属性解释

CSS 文本

设置不同元素的文字颜色对齐文本删除链接下的行装饰文字控制文本中的字母缩进文本指定字符之间的空格指定行之间的间距设置元素的文本方向增加单词之间的空白指定元素的文本阴影禁用元素内的文本换行文本内图片的垂直对齐

CSS 文本属性解释

CSS 字体

设置文本的字体设置字体大小设置字体大小（以 px 为单位）设置字体大小（以 em 为单位）设置字体大小（百分比和em）设置字体样式设置字体的变体设置字体的粗细所有字体属性都在一个声明中

字体属性解释

CSS 图标

字体真棒图标 Bootstrap图标谷歌图标

CSS 图标解释

CSS 链接

为已访问/未访问的链接添加不同的颜色在链接上使用文本装饰指定链接的背景颜色向超链接添加其他样式不同类型的光标高级 - 创建链接框高级 - 创建带边框的链接框

CSS 链接属性解释

CSS 列表

列表中所有不同的列表项标记将图片设置为列表项标记定位列表项标记删除默认列表设置所有列表属性都在一个声明中带颜色的样式列表全角边框列表

CSS 列表属性解释

CSS 表格

为 table、th 和 td 元素指定黑色边框使用边界折叠表格周围有单边框指定表格的宽度和高度设置内容的水平对齐方式（text-align）设置内容的垂直对齐方式（vertical-align）指定 th 和 td 元素的填充水平分隔线可悬停的表格条纹桌指定表格边框的颜色设置表格标题的位置响应表创建一个精美的表格

CSS 表属性解释

CSS显示

如何隐藏元素（可见性：隐藏）如何不显示元素（display:none）如何将块级元素显示为内联元素如何将内联元素显示为块级元素如何使用 CSS 和 JavaScript 来显示隐藏内容

CSS 显示属性解释

CSS定位

相对于浏览器窗口定位元素相对于其正常位置定位元素用绝对值定位元素粘性定位重叠元素设置元素的形状使用像素值设置图片的上边缘使用像素值设置图片的下边缘使用像素值设置图片的左边缘使用像素值设置图片的右边缘定位图片文本（左上角）定位图片文本（右上角）定位图片文本（左下角）定位图片文本（右下角）定位图片文本（居中）

CSS 定位属性解释

CSS 溢出

使用溢出：可见 - 溢出不会被剪裁。它在元素的框外呈现。使用溢出：隐藏 - 溢出被剪掉，其余内容被隐藏。使用溢出：滚动 - 溢出被剪掉，但添加滚动条以查看其余内容。使用溢出：自动 - 如果溢出被剪切，则应添加滚动条以查看其余内容。使用溢出 x 和溢出 y。

CSS 溢出属性解释

CSS 浮动

float属性的简单使用带有边框和边距的图片在段落中向右浮动带有向右浮动标题的图片让段落的第一个字母向左浮动关闭浮动（使用clear属性）关闭浮动（使用"clearfix" hack）创建浮动框创建并排图片创建等高框（使用 Flexbox）创建水平菜单创建网页布局示例

CSS 浮动属性解释

CSS 内联块

显示 inline、inline-block 和 block 之间的区别使用 inline-block 创建导航链接

CSS 内联块解释

CSS 对齐元素

中心与边距对齐居中对齐文本将图片居中左/右对齐位置左/右对齐位置 - 跨浏览器解决方案左/右对齐浮动左/右对齐浮动 - 跨浏览器解决方案带内边距垂直居中垂直和水平居中与行高垂直居中垂直和水平居中并指定位置

CSS 对齐属性解释

CSS 组合器

后代选择器子选择器相邻兄弟选择器通用兄弟选择器

CSS 组合器解释

CSS 伪类

为超链接添加不同的颜色向超链接添加其他样式使用：焦点 :first-child - 匹配第一个 p 元素 :first-child - 匹配所有 p 元素中的第一个 i 元素 :first-child - 匹配所有第一个子 p 元素中的所有 i 元素使用:lang

CSS 伪类解释

CSS 伪元素

使文本中的第一个字母变得特殊使文本中的第一行变得特殊使第一个字母和第一行变得特殊使用 :before 在元素之前插入一些内容使用 :after 在元素后面插入一些内容

CSS 伪元素解释

CSS 不透明度

创建透明图片创建透明图片 - 鼠标悬停效果透明图片的反转鼠标悬停效果透明盒/div 具有 RGBA 值的透明框/div 在背景图片上创建一个带有文本的透明框

CSS 图片不透明度解释

CSS 导航栏

完全样式化的垂直导航栏完全样式化的水平导航栏全高固定垂直导航栏固定水平导航栏粘性导航栏（在 IE 或 Edge 15 及更早版本中不起作用）响应式顶部导航响应式侧边导航

CSS 导航栏解释

CSS 下拉菜单

下拉文本下拉式菜单右对齐下拉菜单下拉图片下拉导航栏

CSS 下拉菜单解释

CSS 图片库

图片库响应式图片库

CSS 图片库解释

CSS 图片精灵

图片精灵图片精灵 - 导航列表具有悬停效果的图片精灵

CSS 图片精灵解释

CSS 属性选择器

选择所有具有目标属性的 <a> 元素选择具有 target="_blank" 属性的所有 <a> 元素选择 title 属性包含空格分隔的单词列表的所有元素，其中之一是 "flower" 选择类属性值以 "top" 开头的所有元素（必须是整个单词）选择类属性值以 "top" 开头（不能是整个单词）的所有元素选择类属性值以 "test" 结尾的所有元素选择类属性值包含 "te" 的所有元素

CSS 属性选择器解释

CSS 表单

全角输入字段填充输入字段带边框的输入字段底部边框输入字段彩色输入字段聚焦输入字段聚焦输入字段 2 使用图标/图片输入动画搜索输入设置文本区域的样式设置选择菜单的样式设置输入按钮的样式响应式表格

CSS 表单解释

CSS 计数器

创建一个计数器嵌套计数器 1 嵌套计数器 2

CSS 计数器解释

CSS 网站布局

简单、响应式的网站布局一个网站示例

CSS 网站布局解释

CSS 圆角

为元素添加圆角分别对每个角进行圆角处理创建椭圆角

CSS圆角解释

CSS 边框图片

使用 round 关键字在元素周围创建图片边框使用stretch关键字在元素周围创建图片边框图片边框 - 不同的切片值

CSS 边框图片解释

CSS 背景

为一个元素添加多个背景图片指定背景图片的大小使用 "contain" 和 "cover" 缩放背景图片定义多个背景图片的尺寸全尺寸背景图片（完全填充内容区域）使用background-origin指定背景图片的位置使用background-clip指定背景的绘制区域

CSS 背景解释

CSS 渐变

线性渐变 - 从上到下线性渐变 - 从左到右线性渐变 - 对角线线性渐变 - 具有指定角度线性渐变 - 具有多个色标线性渐变 - 彩虹的颜色 + 文本线性渐变 - 具有透明度线性渐变 - 重复线性渐变径向渐变 - 均匀分布的色标径向渐变 - 不同间距的色标径向渐变 - 设置形状径向渐变 - 不同大小的关键字径向渐变 - 重复的径向渐变

CSS 渐变解释

CSS 阴影效果

简单的阴影效果为阴影添加颜色为阴影添加模糊效果带有黑色阴影的白色文本红色霓虹灯阴影红色和蓝色的霓虹灯阴影带有黑色、蓝色和深蓝色阴影的白色文本向元素添加简单的框阴影为盒子阴影添加颜色为 box-shadow 添加颜色和模糊效果创建纸质卡片（文本）创建纸质卡片（宝丽来图片）

CSS 阴影效果解释

CSS 文本效果

指定如何向用户发出隐藏、溢出内容的信号如何将鼠标悬停在元素上时显示溢出的内容允许长单词被分解并换行到下一行指定换行规则

CSS 文本解释

CSS 网页字体

在 @font-face 规则中使用您的 "own" 字体在 @font-face 规则中使用您的 "own" 字体（粗体）

CSS 网页字体解释

CSS 2D 变换

translate() - 将元素从当前位置移动 rotate() - 顺时针旋转元素 rotate() - 逆时针旋转元素 scale() - 增加一个元素 scale() - 减少一个元素 skewX() - 沿 X 轴倾斜元素 skewY() - 沿 Y 轴倾斜元素 skew() - 沿 X 和 Y 轴倾斜元素 matrix() - 旋转、缩放、移动和倾斜元素

CSS 2D 变换解释

CSS 3D 变换

rotateX() - 以给定角度绕其 X 轴旋转元素 rotateY() - 以给定角度绕其 Y 轴旋转元素 rotateZ() - 以给定角度绕 Z 轴旋转元素

CSS 3D 变换解释

CSS 过渡

过渡 - 更改元素的宽度过渡 - 更改元素的宽度和高度为过渡指定不同的速度曲线指定过渡效果的延迟添加变换到过渡效果在一个简写属性中指定所有转换属性

CSS 过渡解释

CSS 动画

将动画绑定到元素动画 - 更改元素的背景颜色动画 - 更改元素的背景颜色和位置延迟动画动画运行 3 次后停止永远运行动画反向运行动画以交替周期运行动画动画的速度曲线动画简写属性

CSS 动画解释

CSS 工具提示

右侧工具提示左侧工具提示顶部工具提示底部工具提示带箭头的工具提示动画工具提示

CSS 工具提示解释

CSS 样式图片

圆形图片带圆圈的图片缩略图缩略图作为链接响应式图片图片文字（左上角）图片文字（右上角）图片文字（左下角）图片文字（右下角）图片文字（居中）宝丽莱照片灰度图片滤镜高级 - 使用 CSS 和 JavaScript 的图片模态

CSS 图片解释

CSS 图片反射

在图片下方创建反射在图片右侧创建反射在图片和反射之间创建间隙在反射上创建淡出效果

CSS图片反射解释

CSS 对象适配

使用对象适配：覆盖使用对象适合：包含使用对象适合：填充使用对象适合：无使用对象拟合：缩小一个示例中的所有对象适合属性值

CSS 对象适配解释

CSS 对象位置

放置图片，使宏伟的老建筑位于中心放置图片，使著名的埃菲尔铁塔位于中心

CSS 对象位置解释

CSS 按钮

基本 CSS 按钮按钮颜色按钮尺寸圆形按钮彩色按钮边框可悬停按钮阴影按钮禁用按钮按钮宽度按钮组带边框的按钮组动画按钮（悬停效果）动画按钮（波纹效果）动画按钮（按下效果）

CSS 按钮解释

CSS 分页

简单分页活动且可悬停的分页圆形活动和可悬停分页悬停过渡效果有边框的分页圆角边框分页分页时链接之间有空格分页大小分页时链接之间有空格居中分页面包屑

CSS 分页解释

CSS 多列

创建多个列指定列之间的间隙指定列之间规则的样式指定列之间的规则的宽度指定列之间规则的颜色指定列之间规则的宽度、样式和颜色指定元素应跨越多少列指定建议的最佳列宽度

CSS多列解释

CSS 用户界面

让用户调整元素的宽度让用户调整元素的高度让用户调整元素的宽度和高度在元素的轮廓和边框之间添加空间

CSS 用户界面解释

CSS 变量

使用 var() 函数使用 var() 函数插入多个自定义属性值

CSS 变量解释

CSS 框大小调整

没有框大小的元素的宽度具有框大小的元素的宽度表单元素+盒子大小

CSS 框大小调整说明

CSS 弹性盒

CSS Flexbox 解释

CSS 媒体查询

如果视口宽度为 480 像素或更宽，请将背景颜色更改为浅绿色如果视口宽度为 480 像素或更宽，则显示一个浮动到页面左侧的菜单

CSS 媒体查询解释

CSS 媒体查询 - 更多示例

根据屏幕宽度设置不同的背景颜色响应式导航菜单使用浮动的响应列使用 Flexbox 的响应式列使用媒体查询隐藏元素响应式字体大小响应式图片库响应式网站根据浏览器的方向更改页面布局最小宽度到最大宽度

CSS 媒体查询示例解释

CSS 响应式网页设计

响应式网格视图为台式机、笔记本电脑和手机添加断点典型断点响应式图片响应式视频响应式框架：W3.CSS 响应式框架：Bootstrap

CSS响应式网页设计解释

CSS 网格

网格布局网格元素网格列间隙网格线网格容器网格项目

CSS 网格解释

❮ 上一节下一节 ❯