CSS简明语法速查

HTML文件的基本结构

previous page next page
目录： 字体属性 文本属性
颜色和背景属性
鼠标光标属性
定位属性
区块属性
列表属性
伪类
滤镜属性

CSS简明语法速查

字体属性

字体属性
字体属性 描述
font-family 用一个指定的字体名或一个种类的字体族科。
可以设置多个字体名，浏览器找不到第一个字体时将使用第二个字体替代，以此类推。
CSS中预定义了5种通用字体族名，此时浏览器会使用其配置中针对这种通用字体的默认字体来显示文本：Serif：衬线字体、Sans serif：无衬线字体、Monospace：等宽字体、Cursive：仿手写花哨字体/草书、Fantasy：装饰性或高度花样化字体
font-size 字体显示的大小
font-style 设定字体样式：normal（普通），italic（斜体），oblique（倾斜）
font-weight 以bold为值可以使字体加粗。
  • normal: 默认值。正常的字体。相当于400。声明此值将取消之前任何设置
  • bold: 粗体。相当于700。也相当于b对象的作用
  • bolder: 比normal粗
  • lighter: 比normal细
  • 100-900: 100到900共9个级别，数值越大，字体越粗
font-variant 设置英文字体大小写转换：normal（普通），small-caps（小型的大写字母字体）
回顶端↑

文本属性

文本属性
文本属性 描述
letter-spacing 定义一个附加在字符之间的间隔数量
word-spacing 定义一个附加在单词之间的间隔数量
text-decoration 文本修饰属性允许通过五个属性中的一个来修饰文本：
  • underline: 定义有下划线的文本
  • overline: 定义有上划线的文本
  • line-through: 定义直线穿过文本
  • blink: 定义闪烁的文本。IE6不支持
  • none: 无样式，默认值
text-align 设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐：
  • left:左对齐
  • right:右对齐
  • center:居中
  • justify:两端对齐
text-indent 文字的首行缩进量
line-height 行高属性接受一个控制文本基线之间的间隔的值
text-transform 控制英文文字大小写。
  • capitalize: 首字母大写
  • uppercase: 大写
  • lowercase: 小写
  • none: 正常无变化
回顶端↑

颜色和背景属性

颜色和背景属性
颜色和背景属性 描述
color 定义字体颜色（前景色）
background-color 设定一个元素的背景颜色
background-image 设定一个元素的背景图象，属性值为图像的地址
background-repeat 决定一个指定的背景图象如何被重复
  • repeat: 平铺整个页面，左右与上下
  • repeat-x: 在x轴上平铺，左右
  • repeat-y: 在y轴上平铺，上下
  • no-repeat: 图片不重复
background-position 设置水平和垂直方向上的位置
[value]|[top|center|bottom][left|center|right]
value: 以百分比的形式(x%,y%)或绝对单位的形式(x,y)设定背景图像的位置
水平
  • left: 左
  • center: 中
  • right: 右
垂直
  • top: 上
  • center: 中
  • bottom: 下
垂直与水平的组合
  • x% y%
  • x-pos y-pos
回顶端↑

边框属性

边框属性
边框属性 描述
border 边框，统一设置（四周）
border-top 设置上边框
border-left 设置左边框
border-right 设置右边框
border-bottom 设置底边框
border-color 设置边框颜色
border-style 设置边框样式。
  • none:无样式
  • hidden:除了同表格的边框发生冲突的时候，其它同none。IE不支持
  • dotted:点划线
  • dashed:虚线
  • solid:实线
  • double:双线，两条线加上中间的空白等于border-width的取值
  • groove:槽状
  • ridge:脊状，和groove相反
  • inset:凹陷
  • outset:凸出，和inset相反。
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 设置鼠标指针的样式：
  • auto： 默认值。浏览器根据当前情况自动确定鼠标光标类型
  • url(url): 用户自定义光标。使用绝对或相对url地址指定光标文件(后缀为.cur或者.ani)
  • hand: 手，就像通常用户将光标移到超链接上时那样，仅IE支持
  • pointer: 和hand一样。竖起一只手指的手形光标，就像通常用户将光标移到超链接上时那样。兼容于其它的浏览器
  • crosshair: 交叉十字
  • text: 文本选择符号
  • wait: windows的沙漏形状
  • default: 客户端平台的默认光标，通常是一个箭
  • help: 带问号的鼠标
  • e-resize: 向东的箭头
  • ne-resize: 指向东北方的箭头
  • n-resize: 向北的箭头
  • nw-resize: 指向西北的箭头
  • w-resize: 向西的箭头
  • sw-resize； 向西南的箭头
  • s-resize： 向南的箭头
  • se-resize： 向东南的箭头
回顶端↑

定位属性

定位属性
定位属性 描述
position “absolute”（绝对定位）、“relative”（相对定位）。
  • static: 默认值。无特殊定位，对象遵循HTML定位规则
  • absolute: 对象从文档流中拖出，使用left，right，top，bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
  • relative: 对象不可层叠，但将依据 left，right，top，bottom 等属性在正常文档流中偏移位置
top 对象与其最近一个具有定位设置的父对象顶边相关的位置
left 对象与其最近一个具有定位设置的父对象左边相关的位置
right 对象与其最近一个具有定位设置的父对象右边相关的位置
bottom 对象与其最近一个具有定位设置的父对象底边相关的位置
width 对象的宽度
height 对象的高度
z-index 决定层的先后顺序和覆盖关系，值越高的元素会覆盖值比较低的元素
clip 检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将position属性的值设为absolute，此属性方可使用。
自ie5开始，此属性在mac平台上可用。
  • auto: 默认值。对象无剪
  • rect(numbernumbernumbernumber): 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
overflow 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible: 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的window或frame的尺寸裁切。并且clip属性设置将失效
auto: 在必需时对象内容才会被裁切或显示滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 总是显示滚动条
visibility 针对嵌套层/对象的设置，分为嵌套的对象（子对象）和被嵌套的对象（父对象）。
  • inherit: 默认值。继承父对象的可见性
  • visible: 对象可视
  • hidden: 对象隐藏
回顶端↑

区块属性

区块属性
区块属性 描述
width 设定对象的宽度
height 设定对象的高度
float 让文字环绕在一个元素的四周。
  • none: 默认值。对象不飘浮
  • left: 文本流向对象的右边
  • right: 文本流向对象的左边
clear 指定在某一个元素的某一边是否允许有环绕的文字或对象。
  • none: 默认值。允许两边都可以有浮动对象
  • left: 不允许左边有浮动对象
  • right: 不允许右边有浮动对象
  • both: 不允许有浮动对象
    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 设定引导列表项目的符号或编号类型
    • disc: 点，默认值。
    • circle: 圆圈
    • square: 正方形
    • decimal: 数字
    • lower-roman: 小写罗马文字i,ii,iii,iv,v,etc.
    • upper-roman: 大写罗马文字i,ii,iii,iv,v,etc.
    • lower-latin: 小写拉丁文a,b,c,...z
    • upper-latin: 大写拉丁文a,b,c,...z
    • lower-alpha: 小写拉丁文a,b,c,...z
    • upper-alpha: 大写拉丁文a,b,c,...z
    • none: 不显示任何项目符号或编号
    list-style-image 选择图像作为项目的引导符号
    • url(url): uri(一般是一个图片的网址)
    • none: 无
      list-style-position 决定列表项目所缩进的程度
      • outside:�默认值。列表项目标记放置在文本以外（列表贴近左侧），且环绕文本不根据标记对齐
      • inside:�列表项目标记放置在文本以内(列表缩进)，且环绕文本根据标记对齐
      回顶端↑

      伪类

      伪类
      伪类 说明
      :link 设置 a 对象在未被访问前的样式。
      默认值由浏览器决定。
      对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
      :hover 设置对象在其鼠标悬停时的样式。
      在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
      在CSS2中此伪类可以应用于任何对象。
      :active 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
      在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
      在CSS2中此伪类可以应用于任何对象。
      :visited 设置 a 对象在其链接地址已被访问过时的样式。
      IE3将 :link 伪类的样式表属性作用于 :visited 伪类。
      默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
      对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
      回顶端↑

      滤镜属性 仅用于IE

      滤镜属性
      滤镜 描述
      alpha 说明：透明的层次效果
      语法：
      filter: Alpha(enabled=bEnabled,style=iStyle,opacity=iOpacity,finishOpacity=iFinishOpacity,startX=iPercent,startY=iPercent, finishX=iPercent,finishY=iPercent)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • style: 可选项。整数值(Integer)。设置或检索透明渐变的样式。0|1|2|3
        • 0: 默认值。整体透明度。将 Opacity 值均匀的作用于对象。
        • 1: 线性渐变透明度。从由 StartX 和 StartY 决定的点，由 Opacity 决定的透明度开始，到由 FinishX 和 FinishY 决定的点，由 FinishOpacity 决定的透明度结束。
        • 2: 圆形放射渐变透明度。圆形放射区域的圆心为对象的中心，圆周到与对象的边相切为止。透明渐变由圆心开始，到圆周结束。开始透明度由 Opacity 决定，结束透明度由 FinishOpacity 决定。
        • 3: 矩形放射渐变透明度。由对象的边开始，到对象的中心结束。开始透明度由 Opacity 决定，结束透明度由 FinishOpacity 决定。
      • opacity: 可选项。整数值(Integer)。设置或检索透明渐变的开始透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。
      • finishOpacity: 可选项。整数值(Integer)。设置或检索透明渐变的结束透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。
      • startX: 可选项。整数值(Integer)。设置或检索透明渐变开始点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0 。
      • startY: 可选项。整数值(Integer)。设置或检索透明渐变开始点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0 。
      • finishX: 可选项。整数值(Integer)。设置或检索透明渐变结束点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0 。
      • finishY: 可选项。整数值(Integer)。设置或检索透明渐变结束点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0 。
      Blur 说明：快速移动的模糊效果
      filter: Blur(enabled=bEnabled,makeShadow=bShadow,pixelRadius=flRadius,shadowOpacity=fOpacity)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • makeShadow: 可选项。布尔值(Boolean)。设置或检索对象的内容是否被处理为阴影显示。true|falsetrue: 对象的内容被处理为阴影。此时，整个对象被设置为黑色，然后被添加模糊效果。调整ShadowOpacity参数值可以控制其暗度。
        false: 默认值。显示对象的原始色彩。
      • pixelRadius: 可选项。浮点数(Float)。设置或检索模糊效果的作用深度。默认单位为像素(px)。
        取值范围为1.0-100.0。默认值为2.0。当此参数值小于1.0时滤镜失去作用。当此参数值大于100.0时，此参数使用默认值2.0。
      • shadowOpacity: 可选项。浮点数(Float)。设置或检索使用makeShadow制作成的阴影的透明度(暗度)。
        取值范围为0.0-1.0。0.0为完全透明。1.0为完全不透明。默认值为0.75。当此参数值不在取值范围内时，此参数使用默认值0.75。
      Chroma 说明：特定颜色的透明效果
      语法：
      filter: Chroma(enabled=bEnabled,color=sColor)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • color: 可选项。字符串(String)。设置或检索此滤镜作用的颜色值。
        其格式为#AARRGGBB。AA、RR、GG、BB为十六进制正整数。取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，参阅#RRGGBB颜色单位。AA指定透明度。00是完全透明。FF是完全不透明。
        默认值为#FF0000FF。
      Dropshadow 说明：阴影效果
      语法：
      filter: DropShadow(enabled=bEnabled,color=sColor,offX=iOffsetX,offY=iOffsetY,positive=bPositive)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • color: 可选项。字符串(String)。设置或检索此滤镜作用的颜色值。
        其格式为#AARRGGBB。AA、RR、GG、BB为十六进制正整数。取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，参阅#RRGGBB颜色单位。AA指定透明度。00是完全透明。FF是完全不透明。
        默认值为#FF404040。
      • offX: 可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在横坐标轴上以对象为基准的偏移量。正值向右偏移，负值向左偏移。默认值为5。
      • offY: 可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在纵坐标轴上以对象为基准的偏移量。正值向下偏移，负值向上偏移。默认值为5。
      • positive: 可选项。布尔值(Boolean)。设置或检索滤镜是否从对象的非透明像素建立阴影。假如你有一个透明的对象但想给它建立普通的阴影，设置此参数值为true。这会让透明对象的阴影在透明区域外，而非在透明区域内。true|falsetrue: 默认值。滤镜从对象的非透明像素建立阴影。
      • false: 滤镜从对象的透明像素建立阴影。
      FlipH 说明：水平翻转效果
      语法：
      filter: FlipH(enabled=bEnabled)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      FlipV 说明：垂直翻转效果
      语法：
      filter: FlipV(enabled=bEnabled)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      Glow 说明：边缘光晕效果
      语法：
      filter: Glow(enabled=bEnabled,color=sColor,strength=iDistance)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • color: 可选项。字符串(String)。设置或检索此滤镜作用的颜色值。
        其格式为#RRGGBB。RR、GG、BB为十六进制正整数。取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，参阅#RRGGBB颜色单位。
        默认值为#FF0000。
      • strength: 可选项。整数值(Integer)。单位为像素(px)。设置或检索以对象为基准的向外扩散距离。取值范围为1-255。默认值为5。
      Gray 说明：灰度效果
      filter: Gray(enabled=bEnabled)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      Invert 说明：将颜色的饱和度及亮度值完全反转
      语法：
      filter: Invert(enabled=bEnabled)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      Mask 说明：遮罩效果，将对象内容的透明像素用color参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明
      语法：
      filter: Mask(enabled=bEnabled,color=sColor)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • color: 可选项。字符串(String)。设置或检索此滤镜作用的颜色值。
        其格式为#AARRGGBB。AA、RR、GG、BB为十六进制正整数。取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，参阅#RRGGBB颜色单位。AA指定透明度。00是完全透明。FF是完全不透明。
        默认值为#FF000000。
      Shadow 说明：渐变阴影效果
      语法：
      filter: Shadow(enabled=bEnabled,color=sColor,direction=iOffset,strength=iDistance)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • color: 可选项。字符串(String)。设置或检索此滤镜作用的颜色值。
        其格式为#RRGGBB。RR、GG、BB为十六进制正整数。取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，参阅#RRGGBB颜色单位。
        direction: 可选项。整数值(Integer)。设置或检索滤镜效果的运动偏移方向。默认单位为角度。0|45|90|135|180|225|270|315
        小于0或大于360的值会自动转换为0-360之间的值。例如，-45会转换为315。
        0: 上。
        45: 右上。
        90: 下。
        135: 右下。
        180: 下。
        225: 默认值。左下。
        270: 左。
        315: 左上。
      • strength: 可选项。整数值(Integer)。单位为像素(px)。设置或检索以对象为基准的在运动方向上的向外扩散距离。取值范围为>=0。默认值为5。
      Wave 说明：波浪变形效果
      语法：
      filter: Wave(enabled=bEnabled,add=bAddImage,freq=iWaveCount,lightStrength=iPercentage,phase=iPercentage,strength=iDistance)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      • add: 可选项。布尔值(Boolean)。设置或检索滤镜作用图像是否覆盖原始图像。true|false
        • ftrue: 滤镜作用图像覆盖原始图像。
        • false: 默认值。只显示滤镜作用图像。
      • freq: 可选项。整数值(Integer)。设置或检索滤镜建立的波浪数目。默认值为3。
      • lightStrength: 可选项。整数值(Integer)。设置或检索滤镜建立的波浪浪尖和波谷之间的距离。取值范围为0-100。默认值为100。
      • phase: 可选项。整数值(Integer)。设置或检索正弦波开始处的相位偏移。取值范围为0-100。默认值为0。
      • strength: 可选项。整数值(Integer)。单位为像素(px)。设置或检索以对象为基准的在运动方向上的向外扩散距离。取值范围为>=1。默认值为1。
      Xray 说明：射线效果
      语法：
      filter: Xray(enabled=bEnabled)
      属性：
      • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false
        • true: 默认值。滤镜激活。
        • false: 滤镜被禁止。
      回顶端↑
      previous page start next page