CSS简明语法速查
字体属性 | 描述 |
---|---|
font-family | 用一个指定的字体名或一个种类的字体族科。 可以设置多个字体名,浏览器找不到第一个字体时将使用第二个字体替代,以此类推。 CSS中预定义了5种通用字体族名,此时浏览器会使用其配置中针对这种通用字体的默认字体来显示文本:Serif:衬线字体、Sans serif:无衬线字体、Monospace:等宽字体、Cursive:仿手写花哨字体/草书、Fantasy:装饰性或高度花样化字体 |
font-size | 字体显示的大小 |
font-style | 设定字体样式:normal(普通),italic(斜体),oblique(倾斜) |
font-weight | 以bold为值可以使字体加粗。
|
font-variant | 设置英文字体大小写转换:normal(普通),small-caps(小型的大写字母字体) |
文本属性 | 描述 |
---|---|
letter-spacing | 定义一个附加在字符之间的间隔数量 |
word-spacing | 定义一个附加在单词之间的间隔数量 |
text-decoration | 文本修饰属性允许通过五个属性中的一个来修饰文本:
|
text-align | 设置文本的水平对齐方式,包括左对齐、右对齐、居中、两端对齐:
|
text-indent | 文字的首行缩进量 |
line-height | 行高属性接受一个控制文本基线之间的间隔的值 |
text-transform | 控制英文文字大小写。
|
颜色和背景属性 | 描述 |
---|---|
color | 定义字体颜色(前景色) |
background-color | 设定一个元素的背景颜色 |
background-image | 设定一个元素的背景图象,属性值为图像的地址 |
background-repeat | 决定一个指定的背景图象如何被重复
|
background-position | 设置水平和垂直方向上的位置 [value]|[top|center|bottom][left|center|right] value: 以百分比的形式(x%,y%)或绝对单位的形式(x,y)设定背景图像的位置 水平
|
边框属性 | 描述 |
---|---|
border | 边框,统一设置(四周) |
border-top | 设置上边框 |
border-left | 设置左边框 |
border-right | 设置右边框 |
border-bottom | 设置底边框 |
border-color | 设置边框颜色 |
border-style | 设置边框样式。
|
border-width | 设置边框宽度 |
border-top-color | 上边框颜色 |
border-top-style | 上边框样式 |
border-top-width | 上边框宽度 |
border-left--color | 左边框颜色 |
border-left-style | 左边框样式 |
border-left-width | 左边框宽度 |
border-right-color | 右边框颜色 |
border-right-style | 右边框样式 |
border-right-width | 右边框宽度 |
border-bottom-color | 底边框颜色 |
border-bottom-style | 底边框样式 |
border-bottom-width | 底边框宽度 |
鼠标光标属性 | 描述 |
---|---|
cursor | 设置鼠标指针的样式:
|
定位属性 | 描述 |
---|---|
position | “absolute”(绝对定位)、“relative”(相对定位)。
|
top | 对象与其最近一个具有定位设置的父对象顶边相关的位置 |
left | 对象与其最近一个具有定位设置的父对象左边相关的位置 |
right | 对象与其最近一个具有定位设置的父对象右边相关的位置 |
bottom | 对象与其最近一个具有定位设置的父对象底边相关的位置 |
width | 对象的宽度 |
height | 对象的高度 |
z-index | 决定层的先后顺序和覆盖关系,值越高的元素会覆盖值比较低的元素 |
clip | 检索或设置对象的可视区域。可视区域外的部分是透明的。 此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将position属性的值设为absolute,此属性方可使用。 自ie5开始,此属性在mac平台上可用。
|
overflow | 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 visible: 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的window或frame的尺寸裁切。并且clip属性设置将失效 auto: 在必需时对象内容才会被裁切或显示滚动条 hidden: 不显示超过对象尺寸的内容 scroll: 总是显示滚动条 |
visibility | 针对嵌套层/对象的设置,分为嵌套的对象(子对象)和被嵌套的对象(父对象)。
|
区块属性 | 描述 |
---|---|
width | 设定对象的宽度 |
height | 设定对象的高度 |
float | 让文字环绕在一个元素的四周。
|
clear | 指定在某一个元素的某一边是否允许有环绕的文字或对象。
|
padding | 决定了究竟在边框与内容之间应该插入多少空间距离,就是检索或设置对象四边的填充距/内补丁。对于td和th对象而言默认值为1。其他对象的默认值为0。 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 |
padding-top | 检索或设置对象上边的填充距 |
padding-left | 检索或设置对象右边的填充距 |
padding-bottom | 检索或设置对象下边的填充距 |
padding-right | 检索或设置对象左边的填充距 |
margin | 设置一个元素在四个方向上与浏览器窗口边界或上一级元素的边界的距离/外补丁。默认值为00。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 |
margin-top | 设置对象的上边距 |
padding-left | 设置对象的右边距 |
padding-bottom | 设置对象的下边距 |
padding-right | 设置对象的左边距 |
列表属性 | 描述 |
---|---|
list-style-type | 设定引导列表项目的符号或编号类型
|
list-style-image | 选择图像作为项目的引导符号
|
list-style-position | 决定列表项目所缩进的程度
|
伪类 | 说明 |
---|---|
:link | 设置 a 对象在未被访问前的样式。 默认值由浏览器决定。 对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 |
:hover | 设置对象在其鼠标悬停时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 |
:active | 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 |
:visited | 设置 a 对象在其链接地址已被访问过时的样式。 IE3将 :link 伪类的样式表属性作用于 :visited 伪类。 默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。 对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 |
滤镜 | 描述 |
---|---|
alpha | 说明:透明的层次效果 语法: filter: Alpha(enabled=bEnabled,style=iStyle,opacity=iOpacity,finishOpacity=iFinishOpacity,startX=iPercent,startY=iPercent, finishX=iPercent,finishY=iPercent) 属性:
|
Blur | 说明:快速移动的模糊效果 filter: Blur(enabled=bEnabled,makeShadow=bShadow,pixelRadius=flRadius,shadowOpacity=fOpacity) 属性:
|
Chroma | 说明:特定颜色的透明效果 语法: filter: Chroma(enabled=bEnabled,color=sColor) 属性:
|
Dropshadow | 说明:阴影效果 语法: filter: DropShadow(enabled=bEnabled,color=sColor,offX=iOffsetX,offY=iOffsetY,positive=bPositive) 属性:
|
FlipH | 说明:水平翻转效果 语法: filter: FlipH(enabled=bEnabled) 属性:
|
FlipV | 说明:垂直翻转效果 语法: filter: FlipV(enabled=bEnabled) 属性:
|
Glow | 说明:边缘光晕效果 语法: filter: Glow(enabled=bEnabled,color=sColor,strength=iDistance) 属性:
|
Gray | 说明:灰度效果 filter: Gray(enabled=bEnabled) 属性:
|
Invert | 说明:将颜色的饱和度及亮度值完全反转 语法: filter: Invert(enabled=bEnabled) 属性:
|
Mask | 说明:遮罩效果,将对象内容的透明像素用color参数指定的颜色显示作为一个遮罩,而非透明像素则转为透明
语法: filter: Mask(enabled=bEnabled,color=sColor) 属性:
|
Shadow | 说明:渐变阴影效果 语法: filter: Shadow(enabled=bEnabled,color=sColor,direction=iOffset,strength=iDistance) 属性:
|
Wave | 说明:波浪变形效果 语法: filter: Wave(enabled=bEnabled,add=bAddImage,freq=iWaveCount,lightStrength=iPercentage,phase=iPercentage,strength=iDistance) 属性:
|
Xray | 说明:射线效果 语法: filter: Xray(enabled=bEnabled) 属性:
|