CSS 快速参考

下面按字母顺序列出了所有的 CSS 属性和对应的 DHTML 特性(所谓 DHTML 特性是指在客户端脚本中引用该 CSS 属性时使用的名称),并对常用的属性作了较详细的说明,供读者在设计网页时参考。

CSS 属性

DHTML 特性

说明

backgroundbackground提供多个背景属性的组合。例如:BODY{background: no-repeat yellow left center url(./image/background.jpg)}
 background-attachmentbackgroundAttachment 指定特定 HTML 元素背景图案是否与内容一起滚动,取值为 scroll | fixed。默认值 scroll 表示背景图案随着内容一起滚动;fixed 表示背景图案静止,而内容可以滚动。例如:BODY{background-attachment:fixed}
background-colorbackgroundColor指定特定 HTML 元素的背景颜色,取值为 transparent 或具体颜色值。例如,H1{background-color:gray}
background-imagebackgroundImage指定特定 HTML 元素的背景图案,取值为none | url(imageurl)(在指定其他有关背景图案的属性时,应先指定此属性)。例如,H1{background-image:url(./MM.jpg)}
background-positionbackgroundPosition指定特定 HTML 元素背景图案的位置,取值为由空格隔开的两个值,既可以使用关键字 left | center | right 和 top | center | bottom,也可以指定百分数值,或者指定以标准单位计算的距离。例如:BODY{ background-position:left center}
background-repeatbackgroundRepeat指定特定 HTML 元素背景图案是否重复,取值为 repeat | repeat-x | repeat-y | no-repeat
borderborder一次性指定四个框线的宽度、样式和颜色。例如,H1{border:thin solid blue}
border-bottomborderBottom指定边框底边的宽度、样式和颜色。例如,H1{border-top:thin solid blue}
border-bottom-colorborderBottomColor指定边框底边的颜色,取值可以是任意颜色值
border-bottom-styleborderBottomStyle指定边框底边的样式,取值可以是:none | dotted | dashed | solid |double | groove | ridge | inset | outset,默认值是 none
border-bottom-widthborderBottomWidth指定边框底边的宽度,取值可以是:thin | medium | thick 或长度值
 border-color borderColor设置边框的颜色,取值可以是任意颜色值。可以指定多个值,按上、右、下、左的顺序指定边框的颜色,如果指定了 2 或 3 个值,则未指定颜色的边框采用相对边框的颜色值
border-leftborderLeft指定边框左边的宽度、样式和颜色。例如,H1{border-left:thin solid blue}
border-left-colorborderLeftColor指定边框左边的颜色,取值可以是任意颜色值
border-left-styleborderLeftStyle指定边框左边的样式,取值可以是:none | dotted | dashed | solid |double | groove | ridge | inset | outset,默认值是 none
border-left-widthborderLeftWidth指定边框左边的宽度,取值可以是:thin | medium | thick 或长度值
border-rightborderRight指定边框右边的宽度、样式和颜色。例如,H1{border-right:thin solid blue}
border-right-colorborderRightColor指定边框右边的颜色,取值可以是任意颜色值
border-right-styleborderRightStyle指定边框右边的样式,取值可以是:none | dotted | dashed | solid |double | groove | ridge | inset | outset,默认值是 none
border-right-widthborderRightWidth指定边框右边的宽度,取值可以是:thin | medium | thick 或长度值
border-styleborderStyle设置边框的样式,取值可以是:none | dotted | dashed | solid |double | groove | ridge | inset | outset,默认值是 none。当取多个值时,也按上、右、下、左的顺序为四个边框设置不同的样式;如果指定了 2 或 3 个值,则未指定样式的边框采用相对边框的样式值
border-topborderTop指定边框顶边的宽度、样式和颜色。例如,H1{border-top:thin solid blue}
border-top-colorborderTopColor指定边框顶边的颜色,取值可以是任意颜色值
border-top-styleborderTopStyle指定边框顶边的样式,取值可以是:none | dotted | dashed | solid |double | groove | ridge | inset | outset,默认值是 none
border-top-widthborderTopWidth指定边框顶边的宽度,取值可以是:thin | medium | thick 或长度值
bottombottom确定元素下方向的位置
clearclear指定元素是否允许浮动元素在它旁边,取值可以是:none | left | right | both,默认值为none
 border-widthborderWidth 此属性是设置 border-top-width、border-right-width、border-bottom-width、和border-left-width 的快捷方式(以此给定顺序,即上、右、下、左的顺序)。如果只给定一个值,则它应用于所有四个边框线。如果给定 2 或 3 个值,则未指定的边框采用与其相对边框的设置
clipclip控制元素的剪切
colorcolor指定特定 HTML 元素内文本的显示颜色,取值为任何合法的颜色值。例如,以下定义都是正确的:H1.red {color:red}、H1.red {color:#F00}、H1.red {color:#FF0000}、H1.red {color:rgb(255,0,0)}、H1.red {color:rgb(100%,0,0)}
cursorcursor控制鼠标指针的样式,取值可以是 auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help。例如,P{cursor:hand}
displaydisplay确定元素是否应绘制在页面上,取值可以是 block | inline | list-item | none
floatstyleFloat指定元素在何处浮动,取值为:none | left | right,默认值为 none
fontfont提供多个字体属性的组合,按以下顺序定义:font-weight,font-variant,font-style,font-size,line-height,属性可以省略。例如,P{font:italic 200% serif}
font-familyfontFamily描绘要使用的“字体”优先级序列,取值可以是字体名称,也可以是字体族名称,值之间用逗号分隔。例如:BODY{font-family:gill,helvetica,sans-serif}
font-sizefontSize指定所用字体的大小,取值为 xx-small | x-small | small | medium | large |x-large | xx-large | smaller | larger,或者是具体的长度值或百分比
font-stylefontStyle指定选定字体的样式,取值为 normal | italic | oblique,后两者表示斜体。例如:H4 {font-style: italic}
font-variantfontVariant选择正常或小写变体,取值为 normal | small-caps
font-weightfontWeight指定所用字体的粗细,取值为 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
heightheight指定元素的高度
leftleft确定元素左方向的位置
letter-spacingletterSpacing指定文本字母间的间距,取值为 normal 或具体的长度值。例如:P{letter-spacing:1mm}
line-heightlineHeight指定目标选项内文本的行高,取值可以是数字、长度或百分比,默认值是 normal。例如,DIV{line-height:1.5}
linklink控制链接的颜色
list-stylelistStyle一次性指定列表项目标记的图片、类型和位置。例如,UL{list-style:url(./image/ball.gif) disc inside}
list-style-imagelistStyleImage为列表指定图片作为项目标记,取值可以是none | url(imageurl)。例如,UL{list-style-image:url (./target.gif)}
list-style-positionlistStylePosition指定列表项目标记的位置,取值可以是 inside 或 outside,默认值是outside
list-style-typelistStyleType指定列表项目标记的类型,取值可以是 disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none。例如,OL{list-style-type:lower-roman}
marginmargin指定边界宽度的简捷方式,可同时指定上、右、下、左(以此顺序)边界的宽度。如果只指定一个值,则四个方向都采用相同的边界宽度;如果指定了 2 或 3 个值,则没有指定边界宽度的边采用对边的边界宽度。例如,P{margin: 20px,0px}
margin-bottommarginBottom设置底端边界的宽度,取值可以是长度、百分比或 auto
margin-leftmarginLeft设置左端边界的宽度,取值可以是长度、百分比或 auto
margin-rightmarginRight设置右端边界的宽度,取值可以是长度、百分比或 auto
margin-topmarginTop设置顶端边界的宽度,取值可以是长度、百分比或 auto
overflowoverflow控制元素内容越界时的处理
paddingpaddingTop指定填充的简捷方式,可同时指定上、右、下、左四个方向(以此顺序)填充的宽度。如果只指定一个值,则四个方向都采用相同的填充宽度;如果指定了 2 或 3 个值,则没有指定填充宽度的边采用对边的填充宽度。例如,P{padding:0.25in, 0.1in}
padding-bottomwidth设置底端填充,取值可以是长度和百分数,但不允许使用负值
padding-leftpaddingLeft设置左端填充,取值可以是长度和百分数,但不允许使用负值
padding-rightpaddingRight设置右端填充,取值可以是长度和百分数,但不允许使用负值
 padding-toppaddingTop 设置顶端填充,取值可以是长度和百分数,但不允许使用负值
page-break-afterpageBreakAfter设置在元素后是否出现页分隔符
page-break-beforepageBreakBefore设置在元素前是否出现页分隔符
positionposition确定元素的定位方式,取值可以是 static | relative | absolute,默认值为 static
rightright确定元素右方向的位置
text-aligntextAlign指定目标选项内文本的对齐方式,取值是:left | right | center | justify。例如:P{text-align:justify}
text-decorationtextDecoration对文本施加修饰效果,取值为none | underline | overline | line-through | blink。例如,:link, :visited, :active{text-decoration:none}
text-indenttextIndent按指定数值缩进文本,取值可以是长度值或百分比,默认值是 0。例如,P{text-indent:.74cm}
text-transformtextTransform对文本进行大小写转换,取值为:capitalize|uppercase|lowercase|none,默认值是 none。capitalize 值指示所选元素中文本的每个单词的首字母为大写;uppercase 值指示所有的文本都为大写,lowercase 值指示所有文本都以小写显示。例如,P{text-transform:uppercase}
toptop确定元素上方向的位置
unicode-bidiunicodeBidi确定与双向运算法则相关的嵌入层
vertical-alignverticalAlign确定垂直方向上的对齐,取值为 baseline | sub | super | top | text-top | middle | bottom | text-bottom 或百分比。例如,IMG{vertical-align:text-top}
visibilityvisibility确定定位的元素是否可见,取值可以是 inherit | visible | hidden,默认值是 inherit
widthwidth指定元素的宽度
word-spacingwordSpacing指定单词之间的额外间距,取值为 normal 或长度值
z-indexzIndex控制元素的堆叠,取值为整数,也可以是负数,数值越大,越在上层

----------[ HTML(CSS) ]----------

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值