CSS 语法
实例解释:CSS 语法
元素选择器
id 选择器
类选择器(针对所有元素)
类选择器(只针对 <p> 元素)
引用两个类的 HTML 元素
通用选择器
分组选择器
实例解释:CSS 选择器
外部 CSS
内部 CSS
行内 CSS
多个样式表
层叠顺序
实例解释:如何添加 CSS
单行注释
多行注释
实例解释:CSS 注释
设置颜色的背景色
设置文本颜色
设置边框颜色
设置不同的颜色值
设置 RGB 值
设置 HEX 值
设置 HSL 值
实例解释:CSS 颜色
设置页面的背景色
设置不同元素的背景色
把图像设置为页面背景
如何只在水平方向重复背景图像
如何定位背景图像
固定的背景图像(该图像不会随着页面的其余部分滚动)
所有背景属性在一条声明中
高级背景实例
实例解释:背景属性
设置四条边框的宽度
设置上边框的宽度
设置下边框的宽度
设置左边框的宽度
设置右边框的宽度
设置四条边框的样式
设置上边框的样式
设置下边框的样式
设置左边框的样式
设置右边框的样式
设置四条边框的颜色
设置上边框的颜色
设置下边框的颜色
设置左边框的颜色
设置右边框的颜色
所有边框属性在一条声明中
为元素添加圆角
为每个边设置不同的边框
所有上边框属性在一条声明中
所有下边框属性在一条声明中
所有左边框属性在一条声明中
所有右边框属性在一条声明中
实例解释:边框属性
为元素的各边规定不同的外边距
使用带有四个值的简写 margin 属性
使用带有三个值的简写 margin 属性
使用带有两个值的简写 margin 属性
使用带有一个值的简写 margin 属性
把外边距设置 auto,来居中其容器内的元素
让左外边距继承父元素
外边距合并
实例解释:外边距属性
为元素的各边规定不同的内边距
使用带有四个值的简写内边距
使用带有三个值的简写内边距
使用带有两个值的简写内边距
使用带有一个值的简写内边距
内边距和元素宽度(不设置 box-sizing)
内边距和元素宽度(设置 box-sizing)
设置元素的左内边距
设置元素的右内边距
设置元素的上内边距
设置元素的下内边距
实例解释:内边距属性
设置元素的高度和宽度
设置元素的最大宽度
设置不同元素的高度和宽度
使用百分百来设置图像的高度和宽度
设置元素的最小宽度和最大宽度
设置元素的最小高度和最大高度
实例解释:定位属性
演示盒模型
规定总宽度为 250 像素的元素
实例解释:盒模型
绘制围绕元素的线条(轮廓)
设置轮廓的样式
设置轮廓的颜色
使用 outline-color:翻转轮廓
设置轮廓的宽度
使用简写的轮廓属性
在元素的轮廓与边框之间添加空间
实例解释:轮廓属性
设置不同元素的文本色
对齐文本
删除链接下面的线
修饰文本
控制文本中的字母大小写
缩进文本
规定字符间距
规定行间距
设置元素的文本方向
增加字间距
规定元素的文本阴影
在元素内禁用文本换行
垂直对齐文本内的图像
实例解释:文本属性
设置文本的字体
设置字体的大小
以 px 为单位设置字体大小
以 em 为单位设置字体大小
以百分百和 em 为单位设置字体大小
设置字体的样式
设置字体的变体
设置字体的粗细
所有字体属性在一条声明中
实例解释:字体属性
Font Awesome 图标
Bootstrap 图标
Google 图标
实例解释:图标
为已访问/未访问链接添加不同的颜色
在链接上使用 text-decoration
为链接规定背景色
为超链接添加其他样式
不同类型的指针
高级 - 创建链接框
高级 - 创建带边框的链接框
实例解释:链接属性
列表中的所有不同的列表项标记
把图像设置为列表项标记
定位列表项标记
删除默认列表设置
所有列表属性在一条声明中
用颜色设置列表样式
全宽带边框的列表
实例解释:列表属性
规定 table、th 以及 td 元素的黑色边框
使用 border-collapse
围绕表格的单一边框
规定表格的宽度和高度
设置内容的水平对齐(text-align)
设置内容的垂直对齐(vertical-align)
规定 th 和 td 元素的内边距
水平分隔符
可悬停的表格
条状表格
规定表格边框的颜色
设置表格标题的位置
响应式表格
创建美观的表格
实例解释:表格属性
如何隐藏元素(visibility:hidden)
如何不显示元素(display:none)
如何把块级元素显示为行内元素
如何把行内元素显示为块级元素
如何将 CSS 与 JavaScript 一起使用来显示隐藏内容
实例解释:display 属性
相对于浏览器窗口来放置元素
相对于元素正常位置来放置元素
用绝对值定位元素
粘性定位
重叠元素
设置元素的形状
使用像素值设置图像的上边缘
使用像素值设置图像的下边缘
使用像素值设置图像的左边缘
使用像素值设置图像的右边缘
定位图像文本(左上角)
定位图像文本(右上角)
定位图像文本(左下角)
定位图像文本(右下角)
定位图像文本(居中)
使用 overflow: visible - 溢出没有被裁剪。它在元素框之外渲染。
使用 overflow: hidden - 溢出被裁剪,其余内容被隐藏。
使用 overflow: scroll - 溢出被裁剪,但是添加了滚动条以查看其余内容。
使用 overflow: auto - 如果裁剪了溢出,则应添加滚动条以查看其余内容。
使用 overflow-x 和 overflow-y
实例解释:溢出属性
float 属性的简单使用
带有边框和外边距的图像浮动到段落的右侧
带标题的图像向右浮动
让段落的第一个字母向左浮动
关闭浮动(使用 clear 属性)
关闭浮动(使用 clearfix hack)
创建浮动框
创建并排图像
创建等高框(通过 flexbox)
创建水平菜单
创建 web 布局实例
实例解释:浮动属性
展示行内、行内块、块级元素的区别
使用 inline-block 来创建导航链接
实例解释:Inline-block
通过外边距进行居中对齐
居中对齐文本
居中对齐图像
通过 position 实现左对齐/右对齐
通过 position 实现左对齐/右对齐 - 跨浏览器方案
通过 float 实现左对齐/右对齐
通过 float 实现左对齐/右对齐 - 跨浏览器方案
通过 padding 垂直居中
垂直和水平居中
通过 line-height 垂直居中
通过 position 实现垂直和水平居中
实例解释:对齐属性
后代选择器
子选择器
相邻同胞选择器
通用同胞选择器
实例解释:组合器选择器
给链接添加不同的颜色
为链接添加其他样式
使用 :focus
:first-child - 匹配首个 p 元素
:first-child - 匹配所有 p 元素内的首个 i 元素
:first-child - 匹配所有第一个子 p 元素中的所有 i 元素
使用 :lang
实例解释:伪类
制作文本中特别的首字母
制作文本中特别的首行
制作特别的首字母和首行
使用 :before 在元素之前插入内容
使用 :after 在元素之后插入内容
实例解释:伪元素
在每个带有 content 属性的链接之后的括号中插入 URL
用 "Section 1"、"1.1"、"1.2" 等为节和子节编号
用 quotes 属性指定引号
实例解释:CSS 计数器
创建透明图像
创建透明图像 - mouseover 效果
透明图像的反转的 mouseover 效果
透明框(div)
用了 RGBA 值的透明框
创建一个文本位于背景图像上的透明框
实例解释:图像不透明度
拥有完整样式的垂直导航栏
拥有完整样式的水平导航栏
全高的固定垂直导航栏
固定的水平导航栏
粘性导航栏(在 IE 或 Edge 15 及更早版本中不起作用)
响应式的顶部导航栏
响应式的侧边导航栏
实例解释:导航栏
下拉文本
下拉菜单
右对齐的下拉菜单
下拉图像
下拉导航栏
实例解释:下拉菜单
图片库
响应式图片库
实例解释:图片库
图像精灵
图像精灵 - 导航列表
有悬停效果的图像精灵
实例解释:图像精灵
选取带有 target 属性的所有 <a> 元素
选取带有 target="_blank" 属性的所有 <a> 元素
选取所有带有 title 属性的元素,其中 title 属性包含以空格分隔的单词列表,单词之一是 "flower"
选取所有带有以 "top" 开头的 class 属性值的元素(必须是整个单词)
选取所有带有以 "top" 开头的 class 属性值的元素(一定不能是整个单词)
选取所有带有以 "test" 结尾的 class 属性值的元素
选择带有包含 "te" 的 class 属性值的所有元素
实例解释:属性选择器
全宽的输入字段
填充的输入字段
带边框的输入字段
带下边框的输入字段
带颜色的输入字段
获得焦点的输入字段
获得焦点的输入字段 2
带图标的输入字段
有动画效果的搜索框
设置文本框的样式
设置选择菜单的样式
设置按钮的样式
响应式表单
实例解释:表单
创建计数器
嵌套计数器 1
嵌套计数器 2
实例解释:计数器
简单的响应式网站布局
一个网站的实例
实例解释:网站布局
单独设置每个圆角
创建椭圆角
实例解释:CSS 圆角边框
创建围绕元素的图像边框,使用 round 关键字
创建围绕元素的图像边框,使用 stretch 关键字
图像边框 - 不同的 slice 边框
实例解释:CSS 边框图像
为元素添加多个背景图像
规定背景图像的大小
使用 "contain" 和 "cover" 缩放背景图像
定义背景图像的大小
全尺寸的背景图像(完全覆盖内容区域)
使用 background-origin 来规定放置背景图像的位置
使用 background-clip 来规定背景的绘制区域
实例解释:CSS 背景
线性渐变 - 从上到下
线性渐变 - 从左到右
线性渐变 - 对角线
线性渐变 - 特定角度
线性渐变 - 多个色标
线性渐变 - 彩虹色 + 文本
线性渐变 - 透明度
线性渐变 - 重复的线性渐变
径向渐变 - 均匀分布的色标
径向渐变 - 间距不同的色标
径向渐变 - 设置形状
径向渐变 - 不同的尺寸关键字
径向渐变 - 重复的径向渐变
实例解释:CSS 渐变
简单的阴影效果
向阴影添加颜色
向阴影添加模糊效果
带黑色阴影的白色文本
红色霓虹灯发光阴影
红色和蓝色霓虹灯发光阴影
黑色、蓝色和深蓝色阴影的白色文本
向元素添加简单的 box-shadow
向 box-shadow 添加颜色
向 box-shadow 添加颜色和模糊效果
创建类似纸质卡片(文本)
创建类似纸质卡片(宝丽来图像)
实例解释:CSS 阴影效果
指定应如何向用户呈现未显示的溢出内容
将鼠标悬停在元素上时如何显示溢出的内容
允许长文字能够被折断并换到下一行
规定换行规则
规定文本的书写模式(横着写还是竖着写)
实例解释:CSS 文本
在 @font-face 规则中使用您自己的字体
在 @font-face 规则中使用您自己的字体(粗体)
实例解释:CSS web 字体
translate() - 从当前位置删除元素
rotate() - 顺时针旋转元素
rotate() - 逆时针旋转元素
scale() - 增加元素
scale() - 减少元素
skewX() - 沿 X 轴倾斜元素
skewY() - 沿 Y 轴倾斜元素
skew() - 沿 X 和 Y 轴倾斜元素
matrix() - 旋转、缩放、移动和倾斜元素
实例解释:CSS 2D 转换
rotateX() - 将元素绕其 X 轴旋转给定角度
rotateY() - 将元素绕其 Y 轴旋转给定角度
rotateZ() - 将元素绕其 Z 轴旋转给定角度
实例解释:CSS 3D 转换
过渡 - 更改元素的宽度
过渡 - 更改元素的宽度和高度
为过渡规定不同的速度曲线
为过渡效果规定延迟
向过渡效果添加变换
在一条简写属性中规定所有过渡属性
实例解释:CSS 过渡
把动画绑定到一个元素
动画 - 改变一个元素的背景色
动画 - 改变一个元素的背景色和位置
延迟动画
在动画停止前运行三次
永远运行动画
从反方向运行动画
交替运行动画
动画的速度曲线
动画的简写属性
实例解释:CSS 动画
右侧工具提示
左侧工具提示
顶部工具提示
底部工具提示
带箭头的工具提示
有动画效果的工具提示
实例解释:工具提示
圆角图像
圆形图像
缩略图
作为链接的缩略图
响应式图像
图像文本(左上角)
图像文本(右上角)
图像文本(左下角)
图像文本(居中)
宝丽来图像
灰度图像滤镜
高级 - 通过 CSS 和 JavaScript 实现的图像模态
实例解释:CSS 图像
剪裁图像的两边,保留长宽比,然后填充空间
所有 object-fit 属性值的例子
实例解释:Object-fit
基础的 CSS 按钮
按钮颜色
按钮尺寸
圆角按钮
带颜色的按钮边框
可悬停的按钮
带阴影的按钮
被禁用的按钮
按钮宽度
按钮分组
带边框的按钮分组
带动画的按钮(悬停效果)
带动画的按钮(按键效果)
带动画的按钮(涟漪效果)
实例解释:CSS 按钮
简单的分页
活动的、可悬停的分页
带圆角的活动可悬停分页
可悬停的过渡效果
带边框的分页
圆角带边框的分页
链接之间隔着空白的分页
分页的大小
居中的分页
面包屑
实例解释:CSS 分页
创建多列
规定列之间的间隙
规定列之间的规则样式
规定列之间的规则宽度
规定列之间的规则颜色
规定列之间的规则的宽度、样式和颜色
规定元素应该横跨多少列
为列规定建议的最佳宽度
实例解释:CSS 多列
允许用户调整元素的宽度
允许用户调整元素的高度
允许用户同时调整元素的宽度和高度
在元素轮廓与边框之间添加空间
实例解释:CSS 用户界面
使用 var() 函数
使用 var() 函数来插入若干自定义的属性值
实例解释:CSS 变量
不设置 box-sizing 的元素宽度
设置 box-sizing 的元素宽度
表单元素 + box-sizing
实例解释:CSS box sizing
带有三个弹性项目的弹性盒
带有三个弹性项目的弹性盒 - rtl 方向
flex-direction - row-reverse
flex-direction - column
flex-direction - column-reverse
justify-content - flex-end
justify-content - center
justify-content - space-between
justify-content - space-around
align-items - stretch
align-items - flex-start
align-items - flex-end
align-items - center
align-items - baseline
flex-wrap - nowrap
flex-wrap - wrap
flex-wrap - wrap-reverse
align-content - center
弹性项目排序
Margin-right:auto;
Margin:auto; = 完美的居中
在弹性项目上设置 align-self
规定弹性项目的长度,相对于弹性项目的其余部分
用弹性盒创建响应式的图片库
用弹性盒创建响应式网站
实例解释:CSS flexbox
如果视口宽度为 480 像素或更宽,则将背景色改为浅绿色
如果视口宽度为 480 像素或更宽,显示一个浮动到页面左侧的菜单
实例解释:CSS 媒体查询
根据屏幕宽度设置不同的背景色
响应式的导航菜单
使用浮动的响应式列
使用弹性盒的响应式列
通过媒体查询隐藏元素
响应式字体大小
响应式网站
根据浏览器方向改变页面布局
最小宽度到最大宽度
实例解释:CSS 媒体查询实例
响应式网格视图
为台式机、笔电和手机添加断点
典型的断点
响应式视频
响应式框架:W3.CSS
响应式框架:Bootstrap
实例解释:CSS 响应式 Web 设计
网格布局
网格元素
网格列间隙
网格行
网格容器
网格项目
实例解释:CSS 网格