最新的Web开发教程
 

CSS例子


CSS语法

元素选择
ID选择
类选择(所有元素)
类选择(仅适用于<p>元素)
选择分组

CSS语法解释


CSS背景

设置页面的背景颜色
设置不同的元素的背景颜色
将图像设置为页面背景
如何重复背景图像仅在水平方向
如何定位的背景图像
固定背景图片(此图片不会与页面的其余部分滚动)
在一个声明中所有的背景属性
高级的背景例子

背景属性解释


CSS边框

设置四个边框的宽度
设置上边框的宽度
设置在底边框的宽度
设置左边框的宽度
设置右边框的宽度
设置四个边框的样式
设置上边框的样式
设置在底边框的样式
设置左边框的样式
设置右边框的样式
设置四个边框的颜色
设置上边框的颜色
设置在底边框的颜色
设置左边框的颜色
设置右边框的颜色
在一个声明中的所有边框属性
每边设置不同的边框
所有在一个声明顶部边框属性
所有在一个声明中底边框的属性
所有在一个声明中左边框属性
All in one的报关权边框属性

边框属性解释


CSS边距

指定不同的余量为一个元件的每一侧
让左边距从父元素继承
保证金速记属性
保证金设定为自动到其容器中居中元素

保证金性质解释


CSS填充

设置元素的左填充
设置元素的右填充
设置元素的顶部填充
设置元素的底部填充
在一个声明中的所有padding属性

padding属性解释


CSS文本

设置不同元素的文字颜色
对齐文本
卸下下链接线
装饰文本
控制字母文本
文本缩进
指定字符间距
指定线之间的空间
设置元素的文本方向
增加单词之间的空格
禁用元素中文字环绕
里面的文字图像的垂直对齐

Text属性解释


CSS字体

设置文本的字体
设置字体的大小
坐落在像素的字体大小
坐落在EM的字体大小
设置字体的大小的百分比和青霉
设置字体的样式
设置字体的变
设置字体的气魄
在一个声明中的所有字体属性

字体属性解释


CSS链接

添加不同的颜色来访问/未访问链接
在链接文字装饰用途
指定链接的背景颜色
添加其他样式的超链接
高级-创建链接框
高级-创建边界框链接

链接属性解释


CSS列表

所有不同的列表项标记在列表中
图像设置为列表项标记
列表项标记的位置
在一个声明中的所有列表属性
颜色样式列表
全宽边框列表

列表属性解释


CSS表

指定表,TH和TD元素的黑色边框
边境崩溃的用途
桌子周围单个边框
指定一个表的宽度和高度
设置内容的水平对齐方式(文本对齐)
设置的内容的垂直取向(垂直对齐)
指定日和TD元素的填充
水平分隔线
Hoverable表
条纹表
指定表格边框的颜色
设置表格标题的位置
响应表
创建一个花式球台

表格属性解释


CSS盒模型

用250像素总宽度指定元素

盒模型解释


CSS大纲

周围画一个元素线(轮廓)
设置轮廓的风格
设置轮廓的颜色
设置轮廓的宽度

轮廓属性解释


CSS尺寸

设置的元件的高度和宽度
元素的设置最大宽度
设置不同的元件的高度和宽度
设置的图像使用百分之的高度和宽度
设置最小宽度的元素和最大宽度
设置最小高度和元素的最大高度

维度属性解释


CSS显示

如何隐藏一个元素(visibility:hidden)
如何不显示元素(display:none)
如何显示一个块级元素作为一个内联元素
如何显示一个内联元素作为一个块级元素
如何使用CSS用JavaScript一起显示隐藏内容

显示属性解释


CSS定位

一个元件相对于浏览器窗口的位置
一个元件相对于它的正常位置的位置
元素具有绝对的价值立场
重叠元素
设置一个元件的形状
如何创建一个滚动条,当一个元素的含量太大,以适应
如何设置浏览器自动处理溢出
使用像素值设置图像的顶部边缘
使用像素值设置图像的底部边缘
使用像素值设置图像的左边缘
使用像素值设置图像的右边缘
更改光标 位置图像文本(左上角)
位置图像文本(右上角)
位置图像文本(左下角)
位置图像文本(右下角)
位置图像文字(居中)

定位属性解释


CSS浮动

一个简单的使用float属性的
边境和利润的浮向右段落中的图像
一个标题是浮动到右边的图像
让一个段落浮动到左侧的第一个字母
创建具有float属性的图片库
关闭浮动(使用clear属性)
创建一个横向菜单
创建无表的主页

浮动特性解释


CSS对齐元素

中心与保证金调整
与位置左/右对齐
左/右带位置调整-浏览器兼容性解决方案
与浮动左/右对齐
左/右浮法调整-浏览器兼容性解决方案

对齐属性解释


CSS组合子

后代选择
子选择器
相邻兄弟选择
一般兄弟选择

Combinator的选择解释


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计数器

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

计数器解释


CSS3圆角

添加圆角元素
回合每个角分别
创建椭圆形的角落

CSS3圆角解释


CSS3边界图片

元素周围创建一个图像边框,圆形关键字
元素周围创建一个图像边框,将拉伸关键字
图片边框-不同的切片值

CSS3边框图像来解释


CSS3背景

添加多个背景图像元素
指定背景图像的大小
使用“遏制”和“盖”的规模的背景图像
定义多个背景图片尺寸
全尺寸的背景图像(完全填充内容区域)
使用背景原点到指定背景图像定位
使用背景夹到指定背景的绘画面积

CSS3背景介绍


CSS3渐变

线性渐变-从上到下
线性渐变-从左到右
线性渐变-对角线
线性渐变-用指定的角度
线性渐变-具有多种颜色停止
线性渐变-彩虹+文字的颜色
线性渐变-透明
线性渐变-重复线性渐变
径向渐变-间隔均匀的色站
径向渐变-不同颜色间隔停
径向渐变-设定的形状
径向渐变-不同尺寸关键词
径向渐变-重复径向渐变

CSS3渐变解释


CSS3阴影效果

简单的阴影效果
颜色添加到阴影
添加模糊效果的阴影
白色文本与黑色的影子
红色的霓虹灯光阴影
红色和蓝色的霓虹灯光阴影
白色文本,黑色,蓝色和darkblue阴影
添加一个简单的box-shadow一个元素
添加颜色的box-shadow
添加色彩和模糊效果的box-shadow
创建纸状卡(文本)
创建纸状卡(宝丽莱照片)

CSS3阴影效果解释


CSS3文本

指定如何隐藏溢出内容应通知给用户
如何显示溢出的内容时,将鼠标悬停在元素
允许长字,以便能够被打破,敷到下一行
指定换行规则

CSS3文本解释


CSS3字体

用你“自己”的字体@font-face规则
使用“自己的”字体@font-face规则(粗体)

CSS3字体解释


CSS3 2D变换

translate() -从当前位置移动元素
rotate() -一个元素按顺时针方向旋转
rotate() -旋转元素逆时针的
scale() -增加一个元素
scale() -降低元素
skewX() -偏斜沿X轴的元件
skewY() -偏斜沿Y轴的元件
skew() -偏斜沿X和Y轴的元件
matrix() -旋转,缩放,移动和倾斜的元素

CSS3 2D变换解释


CSS3 3D变换

rotateX() -在给定的程度绕其X轴的元件
rotateY() -在给定的程度绕其Y轴的元件
rotateZ() -在给定的程度绕其Z轴的元件

CSS3 3D变换解释


CSS3过渡

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

CSS3过渡解释


CSS3动画

绑定的动画元素
动画-元素的变化背景颜色
动画-改变背景颜色和元素的位置
延迟动画
运行动画3次停止前
永远运行动画
在相反方向运行的动画
在交替周期中运行动画
对于动画的速度曲线
动画速记属性

CSS3动画解释


CSS3图片

圆形图像
盘旋形象
缩略图
缩略图为纽带
响应图像
图像文本(左上角)
图像文本(右上角)
图像文本(左下角)
图像文本(右下角)
图片文字(居中)
宝丽来照片
灰度图像过滤器
高级-图像模态的CSS和JavaScript的

CSS3图片说明


CSS3按钮

基本的CSS按钮
按钮颜色
按钮大小
圆形按钮
彩色按钮边框
Hoverable按钮
暗影按钮
禁用的按钮
按钮的宽度
按钮组
镶上按钮组
动画的按钮(悬停效果)
动画的按钮(连锁反应)
动画钮(效果)

CSS3按钮解释


CSS3分页

简单分页
主动和hoverable分页
圆角积极hoverable分页
Hoverable过渡效果
分页镶上
圆角边框分页
分页的链接之间的空间
分页大小
分页的链接之间的空间
分页中心
面包屑

CSS3解释分页


CSS3多列

创建多个列
指定列之间的间隙
指定列之间的规则的风格
指定列之间的规则的宽度
指定列之间的规则的颜色
指定列之间的规则的宽度,样式和颜色
指定一个元素应该有多少列跨跨度
指定列的建议,最佳宽度

CSS3多列解释


CSS3用户界面

让使用者调整元素的宽度
让使用者调整的元件的高度
让使用者调整元素的宽度和高度都
添加轮廓和元素的边框之间的空间

CSS3用户界面介绍


CSS3盒大小调整

元件的宽度,而不盒上浆
与箱尺寸要素的宽度
表单元素+盒大小

CSS3盒上浆解释


CSS3 Flexbox的

Flexbox的有三个弯曲项目
Flexbox的有三个弯曲的物品- RTL方向
柔性方向-行反向
柔性方向-列
柔性方向-列反向
证明内容-柔性结束
证明内容-中心
证明内容-空间之间
证明内容-空间周围
调整项-拉伸
调整项-柔性启动
调整项-柔性结束
调整项-中心
调整项-基线
柔性包装- NOWRAP
柔性包装-包装
柔性包装-包装-反向
调整内容-中心
订购弯曲项目
保证金右:自动;
保证金:汽车; =完美的定心
Flex的项目调整自
指定挠曲项的相对于所述柔性物品的其余部分的长度,
创建一个负责任的网站,Flexbox的

CSS3 Flexbox的解释


CSS3媒体查询

更改背景颜色浅绿,如果视口是480像素或更宽
表明会浮到页面左边的菜单,如果视口480像素或更宽

CSS3媒体查询说明


CSS3媒体查询-更多示例

HTML页
从520到699px宽-应用邮件图标,每一个环节
从700到1000像素宽度-前言用文本链接
宽度以上1001PX -应用电子邮件地址链接
宽度以上1151px -添加图标,我们以前使用
使用电子邮件联系名单上的一个侧边栏的网页

CSS3媒体查询例子解释