CSS语法
元素选择
ID选择
类选择(所有元素)
类选择(仅适用于<p>元素)
选择分组
CSS背景
设置页面的背景颜色
设置不同的元素的背景颜色
将图像设置为页面背景
如何重复背景图像仅在水平方向
如何定位的背景图像
固定背景图片(此图片不会与页面的其余部分滚动)
在一个声明中所有的背景属性
高级的背景例子
CSS边框
设置四个边框的宽度
设置上边框的宽度
设置在底边框的宽度
设置左边框的宽度
设置右边框的宽度
设置四个边框的样式
设置上边框的样式
设置在底边框的样式
设置左边框的样式
设置右边框的样式
设置四个边框的颜色
设置上边框的颜色
设置在底边框的颜色
设置左边框的颜色
设置右边框的颜色
在一个声明中的所有边框属性
每边设置不同的边框
所有在一个声明顶部边框属性
所有在一个声明中底边框的属性
所有在一个声明中左边框属性
All in one的报关权边框属性
CSS边距
指定不同的余量为一个元件的每一侧
让左边距从父元素继承
保证金速记属性
保证金设定为自动到其容器中居中元素
CSS填充
设置元素的左填充
设置元素的右填充
设置元素的顶部填充
设置元素的底部填充
在一个声明中的所有padding属性
CSS文本
设置不同元素的文字颜色
对齐文本
卸下下链接线
装饰文本
控制字母文本
文本缩进
指定字符间距
指定线之间的空间
设置元素的文本方向
增加单词之间的空格
禁用元素中文字环绕
里面的文字图像的垂直对齐
CSS字体
设置文本的字体
设置字体的大小
坐落在像素的字体大小
坐落在EM的字体大小
设置字体的大小的百分比和青霉
设置字体的样式
设置字体的变
设置字体的气魄
在一个声明中的所有字体属性
CSS链接
添加不同的颜色来访问/未访问链接
在链接文字装饰用途
指定链接的背景颜色
添加其他样式的超链接
高级-创建链接框
高级-创建边界框链接
CSS列表
所有不同的列表项标记在列表中
图像设置为列表项标记
列表项标记的位置
在一个声明中的所有列表属性
颜色样式列表
全宽边框列表
CSS表
指定表,TH和TD元素的黑色边框
边境崩溃的用途
桌子周围单个边框
指定一个表的宽度和高度
设置内容的水平对齐方式(文本对齐)
设置的内容的垂直取向(垂直对齐)
指定日和TD元素的填充
水平分隔线
Hoverable表
条纹表
指定表格边框的颜色
设置表格标题的位置
响应表
创建一个花式球台
CSS盒模型
CSS大纲
周围画一个元素线(轮廓)
设置轮廓的风格
设置轮廓的颜色
设置轮廓的宽度
CSS尺寸
设置的元件的高度和宽度
元素的设置最大宽度
设置不同的元件的高度和宽度
设置的图像使用百分之的高度和宽度
设置最小宽度的元素和最大宽度
设置最小高度和元素的最大高度
CSS显示
如何隐藏一个元素(visibility:hidden)
如何不显示元素(display:none)
如何显示一个块级元素作为一个内联元素
如何显示一个内联元素作为一个块级元素
如何使用CSS用JavaScript一起显示隐藏内容
CSS定位
一个元件相对于浏览器窗口的位置
一个元件相对于它的正常位置的位置
元素具有绝对的价值立场
重叠元素
设置一个元件的形状
如何创建一个滚动条,当一个元素的含量太大,以适应
如何设置浏览器自动处理溢出
使用像素值设置图像的顶部边缘
使用像素值设置图像的底部边缘
使用像素值设置图像的左边缘
使用像素值设置图像的右边缘
更改光标 位置图像文本(左上角)
位置图像文本(右上角)
位置图像文本(左下角)
位置图像文本(右下角)
位置图像文字(居中)
CSS浮动
一个简单的使用float属性的
边境和利润的浮向右段落中的图像
一个标题是浮动到右边的图像
让一个段落浮动到左侧的第一个字母
创建具有float属性的图片库
关闭浮动(使用clear属性)
创建一个横向菜单
创建无表的主页
CSS对齐元素
中心与保证金调整
与位置左/右对齐
左/右带位置调整-浏览器兼容性解决方案
与浮动左/右对齐
左/右浮法调整-浏览器兼容性解决方案
CSS组合子
CSS生成的内容
插入括号中的URL与内容属性中的每个环节后,
编号部分和子部分与"Section 1", "1.1", "1.2"等。
指定与报价财产引号
CSS伪类
加入不同颜色的超链接
添加其他样式的超链接
重点:使用
:first-child -匹配第一个p元素
:first-child -匹配所有p元素的第一个元素我
:first-child -匹配所有的第一个孩子p元素的所有元素我
使用:lang
CSS伪元素
使第一个字母文本特殊
使文本的第一行特殊
使第一个字母和第一行特殊
使用:前一个元素前插入一些内容
使用方法:后一个元素后插入一些内容
CSS导航栏
CSS下拉框
下拉菜单文本
下拉式菜单
右对齐下拉菜单
下拉图像
下拉导航栏
CSS工具提示
CSS图片廊
CSS图片透明度
CSS图像精灵
CSS属性选择
选择所有<a>与目标属性的元素
选择所有<a>元素与目标=“_空白”属性
选择与包含单词的空格分隔列表的标题属性,其中之一是“花”的元素
选择与开头的类属性值的所有元素"top" (必须是整字)
选择与开头的类属性值的所有元素"top" (绝不能整字)
选择与结尾的class属性值的所有元素"test"
选择使用包含class属性值的所有元素"te"
CSS表格
全角输入字段
加厚输入字段
镶上输入字段
底部边框的输入字段
彩色输入字段
聚焦输入字段
集中输入字段2
输入使用图标/图片
动画搜索输入
文本域样式
造型选择菜单
造型输入按钮
CSS计数器
CSS3圆角
CSS3边界图片
元素周围创建一个图像边框,圆形关键字
元素周围创建一个图像边框,将拉伸关键字
图片边框-不同的切片值
CSS3背景
添加多个背景图像元素
指定背景图像的大小
使用“遏制”和“盖”的规模的背景图像
定义多个背景图片尺寸
全尺寸的背景图像(完全填充内容区域)
使用背景原点到指定背景图像定位
使用背景夹到指定背景的绘画面积
CSS3渐变
线性渐变-从上到下
线性渐变-从左到右
线性渐变-对角线
线性渐变-用指定的角度
线性渐变-具有多种颜色停止
线性渐变-彩虹+文字的颜色
线性渐变-透明
线性渐变-重复线性渐变
径向渐变-间隔均匀的色站
径向渐变-不同颜色间隔停
径向渐变-设定的形状
径向渐变-不同尺寸关键词
径向渐变-重复径向渐变
CSS3阴影效果
简单的阴影效果
颜色添加到阴影
添加模糊效果的阴影
白色文本与黑色的影子
红色的霓虹灯光阴影
红色和蓝色的霓虹灯光阴影
白色文本,黑色,蓝色和darkblue阴影
添加一个简单的box-shadow一个元素
添加颜色的box-shadow
添加色彩和模糊效果的box-shadow
创建纸状卡(文本)
创建纸状卡(宝丽莱照片)
CSS3文本
指定如何隐藏溢出内容应通知给用户
如何显示溢出的内容时,将鼠标悬停在元素
允许长字,以便能够被打破,敷到下一行
指定换行规则
CSS3字体
用你“自己”的字体@font-face规则
使用“自己的”字体@font-face规则(粗体)
CSS3 2D变换
translate() -从当前位置移动元素
rotate() -一个元素按顺时针方向旋转
rotate() -旋转元素逆时针的
scale() -增加一个元素
scale() -降低元素
skewX() -偏斜沿X轴的元件
skewY() -偏斜沿Y轴的元件
skew() -偏斜沿X和Y轴的元件
matrix() -旋转,缩放,移动和倾斜的元素
CSS3 3D变换
rotateX() -在给定的程度绕其X轴的元件
rotateY() -在给定的程度绕其Y轴的元件
rotateZ() -在给定的程度绕其Z轴的元件
CSS3过渡
转型-元素的变化幅度
转变-改变宽度和高度的元素
指定一个过渡速度不同的曲线
指定一个过渡效果的延迟
转换添加到一个过渡效果
在一个简写属性,指定所有的转变特性
CSS3动画
绑定的动画元素
动画-元素的变化背景颜色
动画-改变背景颜色和元素的位置
延迟动画
运行动画3次停止前
永远运行动画
在相反方向运行的动画
在交替周期中运行动画
对于动画的速度曲线
动画速记属性
CSS3图片
圆形图像
盘旋形象
缩略图
缩略图为纽带
响应图像
图像文本(左上角)
图像文本(右上角)
图像文本(左下角)
图像文本(右下角)
图片文字(居中)
宝丽来照片
灰度图像过滤器
高级-图像模态的CSS和JavaScript的
CSS3按钮
基本的CSS按钮
按钮颜色
按钮大小
圆形按钮
彩色按钮边框
Hoverable按钮
暗影按钮
禁用的按钮
按钮的宽度
按钮组
镶上按钮组
动画的按钮(悬停效果)
动画的按钮(连锁反应)
动画钮(效果)
CSS3分页
简单分页
主动和hoverable分页
圆角积极hoverable分页
Hoverable过渡效果
分页镶上
圆角边框分页
分页的链接之间的空间
分页大小
分页的链接之间的空间
分页中心
面包屑
CSS3多列
创建多个列
指定列之间的间隙
指定列之间的规则的风格
指定列之间的规则的宽度
指定列之间的规则的颜色
指定列之间的规则的宽度,样式和颜色
指定一个元素应该有多少列跨跨度
指定列的建议,最佳宽度
CSS3用户界面
让使用者调整元素的宽度
让使用者调整的元件的高度
让使用者调整元素的宽度和高度都
添加轮廓和元素的边框之间的空间
CSS3盒大小调整
元件的宽度,而不盒上浆
与箱尺寸要素的宽度
表单元素+盒大小
CSS3 Flexbox的
Flexbox的有三个弯曲项目
Flexbox的有三个弯曲的物品- RTL方向
柔性方向-行反向
柔性方向-列
柔性方向-列反向
证明内容-柔性结束
证明内容-中心
证明内容-空间之间
证明内容-空间周围
调整项-拉伸
调整项-柔性启动
调整项-柔性结束
调整项-中心
调整项-基线
柔性包装- NOWRAP
柔性包装-包装
柔性包装-包装-反向
调整内容-中心
订购弯曲项目
保证金右:自动;
保证金:汽车; =完美的定心
Flex的项目调整自
指定挠曲项的相对于所述柔性物品的其余部分的长度,
创建一个负责任的网站,Flexbox的
CSS3媒体查询
更改背景颜色浅绿,如果视口是480像素或更宽
表明会浮到页面左边的菜单,如果视口480像素或更宽
CSS3媒体查询-更多示例
HTML页
从520到699px宽-应用邮件图标,每一个环节
从700到1000像素宽度-前言用文本链接
宽度以上1001PX -应用电子邮件地址链接
宽度以上1151px -添加图标,我们以前使用
使用电子邮件联系名单上的一个侧边栏的网页