CSS 实例
CSS背景
设置页面的背景颜色
设置不同元素的背景颜色
设置一个图像作为页面的背景
错误的背景图片
如何在水平方向重复背景图像
如何定位背景图像
一个固定的背景图片(这个图片不会随页面的其余部分滚动)
在一个声明的所有背景属性
高级的背景例子
背景属性的解释
CSS文本
设置不同元素的文本颜色
文本对齐
移除链接下划线
装饰文字
控制文本中的字母
缩进文本
指定了字符之间的空间
指定了行与行之间的空间
设置元素的文本方向
增加单词之间的空格
在一个元素内禁用文字换行
内部文字图像的垂直对齐
Text属性的解释
CSS的字体
设置文本的字体
设置字体大小
用px设置的字体的大小
用em设置的字体的大小
用百分比和em设置字体的大小
设置字体样式
设置字体的异体
设置字体的粗细
在一个声明的所有字体属性
Font属性的解释
CSS链接
为访问/未访问链接添加不同的颜色
在链接上使用文本装饰
指定链接的背景颜色
超链接添加其他样式
高级 - 创建链接框
链接属性的解释
CSS列表
列表中所有不同的列表项标记
设置作为列表项标记的图像
使用跨浏览器解决方案设置一个列表项标记的图像
在一个声明中的所有列表属性
列表属性的解释
CSS表格
指定一个表的Th,TD元素和黑色边框
使用border-collapse
指定表格的宽度和高度
设置内容的水平对齐方式(文本对齐)
设置内容的垂直对齐(垂直对齐)
指定TH和TD元素的填充
指定表格边框的颜色
设置表格标题的位置
创建一个奇特的表
表格属性的解释
CSS盒模型
指定元素的总宽度为250像素
使用跨浏览器的解决方案指定元素的总宽度为250像素的
盒模型的解释
CSS边框
设置四个边框的宽度
设置上边框的宽度
设置底部边框的宽度
设置左边框的宽度
设置右边框的宽度
设置四个边框的样式
设置上边框的样式
设置下边框的样式
设置左边框的样式
设置右边框的样式
设置四个边框的颜色
设置上边框的颜色
设置下边框的颜色
设置左边框的颜色
设置右边框的颜色
在一个声明中的所有边框属性
每边设置不同的边框
在一个声明中的所有顶部边框属性
在一个声明中的所有下边框属性
在一个声明中的所有左边框属性
在一个声明中的所有右边框属性
边框属性的解释
CSS轮廓
围绕一个元素(outline),绘制一条线
设置轮廓的样式
设置轮廓颜色
设置轮廓的宽度
轮廓属性的解释
CSS边距
指定一个元素的边距
边距缩写属性
文本顶部边距设置的值使用厘米
使用百分比值设置文本的底部边缘
使用厘米值设置文本的左边距
Margin属性的解释
CSS填充
设置元素的左部填充
设置元素的右部填充
设置元素的顶部填充
设置元素的底部填充
在一个声明中的所有填充属性
padding属性的解释
CSS分组和嵌套
组选择器
嵌套选择器
分组和嵌套解释
CSS尺寸
使用像素值设置图像的高度
使用百分比设置图像的高度
使用像素值来设置元素的宽度
使用百分比来设置元素的宽度
设置元素的最大高度
使用像素值设置元素的最大宽度
使用百分比来设置元素的最大宽度
设置元素的最低高度
使用像素值来设置元素的最小宽度
使用百分比来设置元素的最小宽度
尺寸属性的解释
CSS显示
如何隐藏一个元素(visibility:hidden)
如何不显示元素(display:none)
如何显示一个元素的内联元素
如何显示一个元素的块元素
H如何使用表格的collapse属性
Display属性的解释
CSS定位
元素相对浏览器窗口的位置
元素的相对定位
元素的绝对定位
重叠的元素
设置元素的形状
如何使用滚动条来显示元素内溢出的内容
如何设置浏览器自动溢出处理
使用像素值设置图像的顶部
使用像素值设置图像的底部
使用像素值设置图像的左边
使用像素值设置图像的右边
更改光标
定位属性的解释
CSS浮动
简单的使用float属性
为图像添加边框和边距并浮动到段落的左侧
标题和图片向右侧浮动
让段落的第一个字母浮动到左侧
使用float属性创建一个图片廊
开启float - clear属性
创建一个水平菜单
创建一个没有表格的网页
Float属性的解释
CSS对齐元素
使用margin的中间调整
左/右位置对齐
使用跨浏览器解决方案,设置左/右位置对齐
左/右对齐,浮动
使用跨浏览器解决方案,设置左/右位置对齐,浮动
对齐属性解释
CSS生成的内容
把括号内的URL用content属性插入到每个链接后面
章节和分节的编号是"第1节","1.1","1.2"等
quotes 属性指定了引号
CSS伪类
添加不同颜色的超链接
给超链接添加其他样式
使用:焦点
:first-child - 匹配了第一个p元素
:first-child - 匹配了第一个p元素中的I元素
:first-child - 匹配了第一个p元素中的所有I元素
使用:lang
伪类的解释
CSS伪元素
把文本的第一个字母设为特殊的字母
把第一行文字设置为特殊
把第一行文字的第一个字母设置为特殊
使用:在一个元素之前插入一些内容
使用:在一个元素之后插入一些内容
伪元素的解释
CSS导航栏
垂直导航栏的全样式
水平导航栏的全样式
导航栏的解释
CSS图片廊
图片廊
图片廊解释
CSS图像的不透明度
创建透明图像 - 鼠标悬停效果
创建一个背景图像与文本的透明框
图像的不透明度解释
CSS图像拼合
图像拼合
图像拼合-导航列表
悬停效果与图像拼合
图像拼合解释
CSS属性选择器
选择具有title属性的元素
选择标题=一个特定值的元素
选择标题=一个特定值的元素(使用(~)分隔属性和值)
选择标题=一个特定值的元素(使用(|)分隔属性和值)
属性选择器解释
CSS 应用实例
- CSS 加载进度条
- CSS 分页样式
- CSS 进度条
- CSS 提示信息实例
- CSS 文字覆盖图像悬停效果
- CSS 文字覆盖图像悬停效果 - 从上至下
- CSS 文字覆盖图像悬停效果 – 从下至上
- CSS 文字覆盖图像悬停效果 – 从右至左
- CSS 文字覆盖图像悬停效果 – 从左至右
- CSS 文字覆盖图像悬停效果 – 淡入透明
- CSS 垂直按钮组
- CSS 按钮组
- CSS Loading(加载) 动画效果
- CSS Loading(加载) 动画效果2
- CSS Loading(加载) 动画效果3
- CSS Loading(加载) 动画效果4
- CSS 动态搜索框
- CSS 用户信息卡片
- CSS 卡片样式
- CSS 上一页、下一页样式
- CSS 各种提示信息框
- CSS 三种价格表样式
- CSS 开关样式
- CSS 上下左右四个方向箭头
- CSS 反馈信息表单
- CSS font-awesome 图标菜单栏
- CSS 顶部导航样式实例
- CSS 便签样式效果
- CSS 水平滚动菜单
- CSS 垂直菜单
- CSS 垂直滚动菜单
- CSS 固定菜单栏
- CSS 固定底部菜单栏
- CSS 下拉菜单
- CSS 下拉内容的对齐方式
- CSS 导航条下拉菜单