nbhkdz.com冰点文库

css属性表与用法

时间:2010-11-03


1

css 属性列表
属性名称 字体属性(Font) 字体属性(Font) fontfont-family fontfont-style fontfont-variant fontfont-weight fontfont-size 属性含义 属性值

使用什么字体 字体是否斜体 是否用小体大写 字体的粗细 字体的大小

所有的字体 Normal、italic、 Normal、italic、oblique Normal、smallNormal、small-caps Normal、bold、bolder、 Normal、bold、bolder、lithter 等 Absolute-size、relative-size、length、 Absolute-size、relative-size、length、 percentage 等

颜色和背景属性 Color BackgroundBackground-color BackgroundBackground-image BackgroundBackground-repeat BackgroundBackground-attachment BackgroundBackground-position

定义前景色 定义背景色 定义背景图案 重复方式 设置滚动 初始位置

颜色 颜色 路径 Repeat- repeat- noRepeat-x、repeat-y、no-repeat Scroll、 Scroll、Fixed Percentage、length、top、left、 Percentage、length、top、left、 right、 right、bottom 等

文本属性 WordWord-spacing LetterLetter-spacing TextText-decoration Vertical-align Vertical-align TextText-transform TextText-align TextText-indent LineLine-height

单词之间的间距 字母之间的间距 文字的装饰样式 垂直方向的位置 文本转换 对齐方式 首行的缩进方式 文本的行高

Normal <length> 同上 None|underline|overline|lineNone|underline|overline|linethrough|blink Baseline|sub|super|top|textBaseline|sub|super|top|text-top|middle |bottom|text|bottom|text-bottom| Capitalize|uppercase| lowercase|none Left|right|center|justify <length>|<percentage> Normal|<number>|<length>| <percentage>

边距属性 MarginMargin-top MarginMargin-right MarginMargin-bottom MarginMargin-left 填充距属性 PaddingPadding-top

顶端边距 右侧边距 底端边距 左侧边距

Length|percentage|auto 同上 同上 同上

顶端填充距

Length|percentage

2

PaddingPadding-right PaddingPadding-bottom PaddingPadding-left 边框属性 Border-topBorder-top-width Border-rightBorder-right-width Border-bottomBorder-bottom-width Border-leftBorder-left-width Border rderBorder-width BorderBorder-color BorderBorder-style BorderBorder-top BorderBorder-right BorderBorder-bottom BorderBorder-left Width Height Float Clear 分级属性 Display WhiteWhite-space List-styleList-style-type List-styleList-style-image List-styleList-style-position ListList-style 鼠标(Cursor) 鼠标(Cursor)属性

右侧填充距 底端填充距 左侧填充距

同上 同上 同上

顶端边框宽度 右侧边框宽度 底端边框宽度 左侧边框宽度 一次定义宽度 设置边框颜色 设置边框样式 一次定义顶端 一次定义右侧 一次定义底端 一次定义左侧 定义宽度属性 定义高度属性 文字环绕 哪一边环绕

Thin|medium|thick|length 同上 同上 同上 同上 Color None|dotted|dash|solid 等 Border-topBorder-top-width|color 等 同上 同上 同上 Length|percentage|auto Length|percentage|auto Length|auto Left|right|none Left|right|none|both

定义是否显示 怎样处理空白 加项目编号 加图案 第二行起始位置 一次定义列表

Block、inline、list-item、 Block、inline、list-item、none Normal、pre、 Normal、pre、nowrap Disc、circle、 Disc、circle、square 等 <url>|none Inside、 Inside、outside <keyword>|<position> |<url>

自动 定位“ 定位“十”字 默认指针 手形 移动 箭头朝右方 箭头朝右上方 箭头朝左上方 箭头朝上方 箭头朝右下方 箭头朝左下方 箭头朝下方 箭头朝左方 文本“I” “I”形 文本“I”形

Auto Crosshair Default Hand Move e-resize NeNe-resize NwNw-resize n-resize SeSe-resize SwSw-resize s-resize w-resize Text

3

等待 帮助
属性: CSS 属性: 1、媒体(Media)类型 媒体(Media)

Wait Help

样式单的一个最重要的特点就是它可以作用于多种媒体, 比如页面、 屏幕、 电子合成器等等。 特定的属性只能作用于特定的媒体, 如"font-size"属性只对可卷动的媒体类型有效 (屏幕) 。 声明一个媒体属性可以用@import 或@media 引入: @import url(loudvoice.css) speech; @media print { /* style sheet for print goes here */ } 也可以在文档标记中引入媒体: <LINK rel="stylesheet" type="text/css" media="print" href="foo.css"> 可以看出,@import 和@media 的区别在于,前者引入外部的样式单用于媒体类型,后者直接 引入媒体属性。@import 的使用方法是@import 加样式单文件的 URL 地址再加媒体类型,可 以多个媒体共用一个样式单,媒体类型之间用","分割符分开。@media 用法则是把媒体类 型放在前面,其他规则和 rule-set 基本一样。下面列出各种媒体类型: SCREEN:指计算机屏幕。 SCREEN PRINT:指用于打印机的不透明介质。 PRINT PROJECTION:指用于显示的项目。 PROJECTION BRAILLE:盲文系统,指有触觉效果的印刷品。 BRAILLE AURAL:指语音电子合成器。 AURAL TV:指电视类型的媒体。 TV HANDHELD:指手持式显示设备(小屏幕,单色) HANDHELD ALL:适合于所有媒体。 ALL 模型( Model) 2、BOX 模型(BOX Model)属性 什么是 BOX?CSS 把 HTML 中以<somesign>……</somesign>的部分称为 BOX(容器),BOX 有三类属性:padding、margin 和 border。 属性: Margin 属性: Margin 属性分为 margin-top、margin-right、margin-bottom、margin-left 和 margin 五 margin-top、margin-right、margin-bottom、margin个属性,分别表示 BOX 里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比

4

或 auto,margin 甚至可以设为负值,造成 BOX 与 BOX 之间的重叠显示,关于 margin 的属性 详见下表: 属性名称: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left' 属性值: <margin-width> 初始值: 0 适合对象: 所有元素 是否继承: no 百分比备注: 相对于 BOX 的宽度 例如: H1 { margin-top: 2em } H2 { margin-right: 12.3% } Margin 还有一个快捷的书写方法,就是直接用 margin 属性,例如: BODY { margin: 1em 2em 3em 2em} 等同于: BODY { margin-top:1em; margin-right:2em; margin-bottom:3em; margin-left:2em; } margin 属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左", 当然 margin 后面可以不足四个值,例如: BODY { margin: 2em } /* 所有的 margin 都设为 2em */ BODY { margin: 1em 2em } /* 上下 margin 为 1em,右左 margin 为 2em */ BODY { margin: 1em 2em 3em } /* 上 margin 为 1em,右左 margin 为 2em,下 margin 为 3em*/ 属性: Padding 属性: Padding 属性用来描述 BOX 的边框和内容之间插入多少空间,和 margin 属性类似,它也分 为上右下左和一个快捷方式 padding,关于 padding 的属性详见下表: 属性名称: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、 'padding' 属性值: <padding-width> 初始值: 0 适合对象: 所有元素

5

是否继承: no 百分比备注: 相对于 BOX 的宽度 例如: BLOCKQUOTE { padding-top: 0.3em } padding 属性和 margin 类似此处略去。 属性: Border 属性: 平时我们在查看 HTML 文档时,看到一段文字,并不会把它当作一个 BOX,实际上 BOX 是有 边框的,只是平时不显示出来罢了,而 border 属性就是用来描述 BOX 边框的。Border 属性 分为 border-width、border-color 和 border-style,而这些属性下面又有分支。 border-width 属性: border-width 属性又分为:border-top-width、border-right-width、 borderborder top-width、border-right-width、 border-bottom-width、border-leftborderborder-bottom-width、border-left-width 和 border-width 属性,border-width 用长度 表示为"thin/medium/thick"或长度单位表示,下面是 border-width 属性的详细列表: 属性名称: 'border-top-width'、'border-right-width'、'border-bottom-width'、 'border-left-width'、'border-width' 属性值: <border-width> 初始值: medium 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 border-width 为快捷方式,顺序为上右下左,值之间用空格隔开。 border-color 属性: border-color 属性用来显示 BOX 边框颜色, 分为 border-top-color、 border-top-color、 border-right-color、 border-right-color、 border-bottom-color、border-rightborderborder-bottom-color、border-right-color 和 border-color 属性,属性值为颜色,可以 用十六进制表示,也可用 rgb()表示,属性见下: 属性名称: 'border-top-color'、'border-right-color'、'border-bottom-color'、 'border-left-color'、 'border-color' 属性值: <color> 初始值: 元素颜色的初始值 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止

6

border-color 为快捷方式,顺序为上右下左,值之间用空格隔开。 border-style 属性: border-style 属性用来设置 BOX 对象边框的样式,它的属性值为 CSS 规定的关键字,平常 看不到 border 是因为,初始值是 none 的缘故。属性见下: 属性名称: 'border-top-style'、'border-right-style'、'border-bottom-style'、 'border-left-style'、'border-style' 属性值: <border-style> 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 border-color 为快捷方式,顺序为上右下左,值之间用空格隔开。 属性值的名称和代表意义如下: none:无边框。 none dotted:边框为点线。 dotted dashed:边框为长短线。 dashed solid:边框为实线。 solid double:边框为双线。 double groove、ridge、 outset:显示不同效果的 3D 边框(根据 color 属性)。 groove、ridge、inset 和 outset border 属性: border 属性为 Border 的快捷方式,属性值间用空格隔开,顺序是"边框宽度 边框样式 边 框颜色",例如: <h1 style="border:.5em outset red">hello!</h1> 还可以用 border-top、border-right、border-bottom、border-left 分别作为上右下左的 快捷方式,属性值顺序同 border 属性。 3、布局(Layout)属性: 布局(Layout)属性: 在以前的 HTML 里,元素的位置只能靠元素的依次排列觉得,而在 CSS 里你可以更精确的定 位元素。Netscape 曾提出过 Layer 标记,它对于精确布局很有好处,但是并没有被 W3C 承 认,W3C 在 CSS 提出了类似于 Layer 标记的功能。 属性: position 属性: position 属性用来决定元素的位置类型,详见属性:

7

属性名称: 'position' 属性值: absolute | relative | static 初始值: static 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 其属性值分别代表: absolute:屏幕上的绝对位置。 relative:屏幕上的相对位置。 static:固有位置。 属性: direction 属性: direction 属性决定 BOX 的排列方向,详见属性: 属性名称: 'direction' 属性值: ltr| rtl 初始值: ltr 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 clear 属性: float 和 clear 属性: 在 HTML 中图片可以选择飘浮的位置,现在 BOX 对象通过 CSS 对于也可以选择飘浮的位置。 改变 BOX 的 float 属性,BOX 将飘浮在其他元素的左或右方: 属性名称: 'float' 属性值: left| right|none 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 例如: <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> <BODY> <P> <IMG src=img.gif> Some sample text that has no other... </BODY>

8

相反的,使用 clear 属性将禁止元素在 BOX 的左方或右方飘浮: 属性名称: 'clear' 属性值: left| right|both|none 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 绝对位置属性: 绝对位置属性: 绝对位置属性有四个属性:top、right、bottom 和 left top、right、 left,属性值为长度单位或百分数: top 属性名称: 'top'、'right'、'bottom'、'left' 属性值: <length>|<percentage>|auto 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 利用以上属性,用户就可以精确定义元素的位置,如: <P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN> word.</P> 属性: z-index 属性: 在 CSS 中允许元素的重叠显示,这样就有一个显示顺序的问题,z-index 属性描述了元素的 前后位置,如果把电脑屏幕看作 X-Y 平面的话,那么 Z 轴就是垂直于屏幕的,z-index 使用 整数表示元素的前后位置, 数值越大, 就会显示在相对靠前的位置, 并且 CSS 同意在 z-index 中使用负数。 属性名称: 'z-index' 属性值: auto|<integer> 初始值: auto 适合对象: 使用 position 属性的元素 是否继承: no 百分比备注: 被禁止 属性: width 属性: 规定 BOX 的 width 属性,可以使 BOX 的宽度不依靠它所包含的内容的多少:

9

属性名称: 'width' 属性值: <length> | <percentage> | auto 初始值: auto 适合对象: 块元素 是否继承: no 百分比备注:根据父元素的 width 而定 在 CSS 中还提供了 min-width 和 max-width 属性, 使得 BOX 的宽度在最小宽度和最大宽度之 间。 属性名称: 'min-width' 属性值: <length> | <percentage> 初始值: 0 适合对象: all 是否继承: no 百分比备注:根据父元素的 width 而定 属性名称: 'max-width' 属性值: <length> | <percentage> 初始值: 100% 适合对象: all 是否继承: no 百分比备注:根据父元素的 width 而定 属性: height 属性: 相同的 BOX 还有 height 属性来控制本身的高度: 属性名称: 'height' 属性值: <length> | <percentage> | auto 初始值: auto 适合对象: 块元素 是否继承: no 百分比备注:根据父元素的 height 而定 在 CSS 中还提供了 min-height 和 max-height 属性, 使得 BOX 的高度在最小高度和最大高度 之间。 属性名称: 'min-height' 属性值: <length> | <percentage> 初始值: 0 适合对象: all 是否继承: no 百分比备注:根据父元素的 height 而定

10

属性名称: 'max-height' 属性值: <length> | <percentage> 初始值: 100% 适合对象: all 是否继承: no 百分比备注:根据父元素的 height 而定 属性: overflow 属性: 在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到 overflow 属性: 属性名称: 'overflow' 属性值: visible | hidden | scroll | auto 初始值: visible 适合对象: 元素的 position 属性 是否继承: no 百分比备注: 被禁止 属性值含义如下: visible:扩大面积以显示所有内容。 visible hidden:隐藏超出范围的内容。 hidden scroll:在元素的右边显示一个滚动条。 scroll auto:当内容超出元素面积时,显示滚动条。 auto 属性: clip 属性: CSS 还提供了一种 clip 属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一 种: 属性名称: 'clip' 属性值: <shape> | auto 初始值: auto 适合元素: 元素的 position 属性被设为 absolute 是否继承: no 百分比备注: 被禁止 <shape>值为 rect(top right bottom left)。 linevertical属性: line-height 和 vertical-align 属性: line-height 属性可以规定元素内部的行间距,使用长度单位或百分数:

11

属性名称: 'line-height' 属性值: normal | <number> | <length> | <percentage> 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注:根据元素的字体大小而定 例如下面的例子,虽然表达方式不同,但结果一样: DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt } vertical属性决定元素在垂直位置的显示: vertical-align 属性决定元素在垂直位置的显示: 属性名称: 'vertical-align' 属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 初始值: baseline 适合对象: inline elements 适合继承: no 百分比备注: 根据元素的 line-height 属性而定 属性值含义如下: baseline:与元素的基线对齐。 baseline middle:与元素中部对齐。 middle sub:字下沉。 sub super:字上升。 super text-top:文本顶部对齐。 text-top text-bottom:文本底部对齐。 text-bottom Top:和本行位置最高元素对齐。 Top Bottom:和本行位置最低元素对齐。 Bottom 属性: Visibility 属性: 该属性用于控制元素的显示或隐藏: 属性名称: 'visibility' 属性值: inherit | visible | hidden 初始值: inherit 适合对象: 所有元素 是否继承: 如果该值为 inherit,则继承父元素属性 百分比备注: 被禁止


赞助商链接

HTML中CSS样式标签大全及用法

HTML中CSS样式标签大全及用法 - CSS 网页样式大全如下: 字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要...

HTML+CSS标签属性

HTML+CSS标签属性_电脑基础知识_IT/计算机_专业资料...使用的脚本,样式定义等 <TITLE>---</TITLE>,包含...和结束 属性: style=font-size:40pt;,用样式表...

CSS段落属性

CSS段落属性 - CSS 段落属性 表 1 CSS 段落属性 属性 text-decoration text-transform font-varient text-indent text-...

《CSS样式》习题答案

例如: p{ color:#0000ff } 3 6、举例说明什么是链接式 CSS 样式。 链接式 CSS 样式表是通过使用 html 链接文件标签 link 将外部 CSS 应用到本页面 的...

css练习答案

style.css</stylesheet> B 3 题干 在 HTML 文档中,引用外部样式表的正确位置...CSS 设置背景图片的时候,不想让背景图片重复出现可以使用的属性是( ) A.back...

CSS Table 属性

CSS Table 属性 - CSS Table 属性 属性 border-collapse border-spacing caption-side empty-cells table-layo...

常用CSS样式属性CSS样式表

常用CSS 样式属性|CSS 样式表【长度单位】 CSS 可使用长度单位 单位 pt px pc mm cm % 单位说明 Point,就像是 Word 里面的 Point 一样大小 Pixels,依您屏幕...

JavaScript中的CSS属性对照表

JavaScript中的CSS属性对照表 - JavaScript 中的 CSS 属性对照表(新手必备) JavaScript 中的 CSS 属性对照表是 js 初学者必备的基础知识 盒子标签...

dreameaver css属性表

CSS属性表 3页 1财富值 css属性查询表 5页 2财富值 css属性列表 3页 2财富值 css属性表与用法 11页 2财富值 css属性表 3页 5财富值 CSS属性速查表 14...

DW4CSS属性详解

DW4CSS属性详解_计算机软件及应用_IT/计算机_专业资料。DW4 中 CSS 属性详解 ...Type:设置列表项所使用的预设标记。可以设置的样式有:disc(实心 圆)、circle(...