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,则继承父元素属性 百分比备注: 被禁止


css属性表与用法.doc

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

CSS属性及用法大全.txt

CSS属性及用法大全 - CSS属性,用法以及注释大全 2009-10-12 1

CSS属性表_图文.doc

CSS属性表 - CSS 列表属性一览表 属性名称 font-family 属性含义 使用什么字体 字体是否斜体 是否用小体大写 字体的粗细 字体的大小 定义前景色 定义背景色 定义...

常见的CSS属性和值_图文.pdf

常见的CSS属性和值 - 兄弟连PHP培训学校,专注PHP培训,提供专业的php

css属性列表 和 属性值含义.doc

css 属性列表 和 属性值含义 css 属性列表 属性名称 字体属性(Font) font-family font-style font-variant font-weight font-size 属性含义 属性值 使用什么字体...

CSS属性大全完整版.doc

DIV+CSS网页布局技巧实例 17页 免费 css属性表与用法 11页 2财富

使用样式表的三种方式.doc

使用样式表的三种方式 - 在网页中使用 CSS 的三种方式 1、行内样式(在 HTML 元素内部,利用 style 属性直接定义样式) 例: 2、内部样式表(在网页标签中...

css属性列表 和 属性值含义.doc

css属性列表 和 属性值含义 - css 属性列表 和 属性值含义 CSS 属性: 属性: 1、媒体(Media)类型 、媒体( ) 样式单的一个最重要的特点就是它可以作用于多...

CSS属性,用法以及注释大全.doc

CSS属性,用法以及注释大全 - 字体属性:(font) 大小 font-siz

常见的CSS属性和值.txt

常见的CSS属性和值 - CSS中修饰字体的属性 属 性描 述属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times、serif等,而且多个族...

CSS属性列表.doc

CSS属性列表_计算机软件及应用_IT/计算机_专业资料。CSS3 动画属性(Animation) ...描述 与 :before 以及 :after 伪元素配合使用,来插入生成内容。 递增或递减一...

一些常用的CSS属性的英文单词及用法、解释.doc

一些常用的CSS属性的英文单词及用法、解释_IT/计算机_专业资料。在divcss制作中...7、CSS 列表 list-style-type-类型样式:确定列表每一项前使用的符号,共有圆点...

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

HTML中CSS样式标签大全及用法 - CSS 网页样式大全如下: 字体属性:(

常见的CSS属性和值_图文.ppt

常见的CSS属性和值_计算机软件及应用_IT/计算机_专业资料。常见的CSS属性和值 ...掌握字体、文本、背景、边框、列表等属 性的用法 Thanks http://www....

添加CSS样式表的四种方式.doc

添加CSS样式表的四种方式 - 一、使用 STYLE 属性: 将 STYLE 属

第8讲_使用CSS样式表设置图片效果.ppt

第8讲_使用CSS样式表设置图片效果_教学案例/设计_教学研究_教育专区。 回顾

常见的CSS属性和值_图文.ppt

常见的CSS属性和值_计算机软件及应用_IT/计算机_专业资料。网页制作CSS属性和值...使用图像作为定制列表符号 image list-style- 决定列表项目缩进的程度 position 文档...

css属性.doc

background 简写属性,作用是将背景属性设置在一个声明中。 2. background-...css属性大全 暂无评价 12页 1下载券 css3属性 暂无评价 9页 2下载券 CSS...

常用的CSS属性的英文单词总结及用法.doc

常用的CSS属性的英文单词总结及用法 - 常用的 CSS 属性的英文单词总结及用法、解释 在 div css 制作中常用的 CSS 属性的英文单词介绍、解释与 css 样式用法总结...

css属性大全.doc

css属性大全_计算机软件及应用_IT/计算机_专业资料。字体属性:(font) 颜色:...使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且 CSS 同意...