标题:CSS语法手册
只看楼主
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
结帖率:0
 问题点数:0 回复次数:11 
CSS语法手册

1、font-family

功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。浏览器由前向后选用字体。 语法:{font-family:字体1,字体2, ... ,字体n} 例子:

字体

2、font-style

功能:使文本显示为扁斜体或斜体等表示强调 。 数值: normal - 正常 italic - 斜体 oblique - 偏斜体 例子:

Normal

Italic

Oblique

3、font-variant

功能:用于在正常与小型大写字母字体间切换。 数值:normal - 如果该标志继承父元素的 small-caps 设置,则关键字 normal 将 font-variant 设置为正常字体。 small-caps - 把小写字母显示为字体较小的大写字母。 例子:

FONT-VARIANT

4、font-weight

功能:用于设置字体灰度,生成字体的深,浅版本。 数值: 正常灰度 - normal 相对灰度 - bold, bolder, light, lighter 梯度灰度 - 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。 例子:

字体灰度

5、font-size

功能:用各种度量单位控制文本字体大小。 数值:有四种数值方式 绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large, xx-large。不同字体有不同的数值。 相对尺寸 - larger, smaller,产生的尺寸是相对于父容器字号而言的。 长度 - 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。 百分比 - 相对于其父元素字体大小的百分比。 例子:字体大小

6、font

功能:简写属性,提供了对字体所有属性进行设置的快捷方法。 语法:{font:字体属性1 字体属性2 ... 字体属性n} 数值:字体属性值为前面已列出的值,此外还可以设置行间距属性 line-height(见文本属性),内容的顺序为:font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性,属性值间用空格分开。 例子:

FONT

搜索更多相关主题的帖子: CSS 语法 手册 
2004-06-11 00:01
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
得分:0 
1、letter-spacing

功能:控制文本元素字母间的间距,所设置的距离适用于整个元素。 数值: normal - 正常间距,将字符间的间距复位为所有字体和字号的正常间距。 长度 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则減去正常长度。在数字后指定度量单位如下:mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。 例子:

Letter-Spacing

2、line-height

功能:设置元素中文本的行间距。 数值: normal - 正常高度,通常为字体尺寸的 1-1.2倍,这是缺省设置。 数字 - 设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点,设置line-height为2,则间距20点。 长度 - 用标准度量单位设置间距,有些是绝对的,有些是相对的,详见letter-spacing中的説明。 百分比 - 也字体尺寸的百分比设置间距。

例子: 这是第一行。

这是第二行。

这是第三行。

3、text-align

功能:在元素框中水平对齐文本。 数值: left - 左对齐 right - 右对齐 center - 居中 justify - 均匀分布, 生成等长的行 例子:

对左居中对右

4、text-decoration

功能:文本修饰,用于控制文本元素所用的效果,特别适用于引人注意的说明,警告等文本效果。 数值: none - 无文本修饰,缺省设置。 underline - 下划线。 overline - 上划线。 line-through - 删除线。 blink - 闪烁。 同一语句中可以组合多个关键字。 例子:

underline

overline

5、text-indent

功能:文本缩排,用于段落的第一行缩排上。 数值: 长度 - 设置首行缩排的尺寸为指定度量单位,有些单位是相对的,有些则是绝对的,祥见 letter-spacing 属性的说明部分。 百分比 - 以行长的百分比设置首行缩排量。 例子:

文本缩排,用于段落的第一行缩排上。

6、text-transform

功能:设置一个或几个元素的大写标准。 数值: none - 不改变文本的大写小写。 capitalize - 元素中毎个单词的第一个字母用大写。 uppercase - 将所有文本设置为大写。 lowercase - 将所有文本设置为小写。 例子:

a text-transform example.

a text-transform example.

a text-transform example.

7、vertical-align

功能:垂直对齐。 数值: baseline - 对准两个元素的小写字母基准线。 sub - 下标。 super - 上标。 top - 顶部对齐。 text-top - 文本顶对齐。 middle - 中线对齐。 bottom - 底线对齐。 text-bottom - 字母底线对齐。 百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比,和元素的 line-height 属性组合使用。 例子:

a1x2

8、word-spacing

功能:控制文本中元素单词间的间距。设置的间距适用于整个元素,不能在某个单词间插入更大或更小的间距。 数值: normal - 正常间距。 长度 - 如果长度为正,则加进从父元素继承的正常长度,如果是负值,则减去。 例子:

A Word Spacing Example


59ita点com(我就爱TA)
2004-06-11 00:02
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
得分:0 
一、框填充属性

1、padding-bottom padding-left padding-top padding-right

功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。 数值: 长度 - 设置相对或绝对值。在数字后指定度量单位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。 百分比 - 以父元素的百分比设置边框。 说明:填充值不能使用负值,但可以是小数。 例子

2、padding

功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。 数值:同前。 说明:用单一值可以让毎边等距填充;如果用两个值,则第一个值用于上下填充,第二个值用于左右填充;如果用三个值,则赋于上边填充,左右填充和下边填充;如果用四个值,则分别用于上,右,下,左填充。可以混合数值类型。 例子

二、框边框属性

1、border-top border-bottom border-right border-left

功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。 数值:共有三个边框属性 border-width: 取值为 thin, medium, thick或指定长度。 border-style: 设置用于修饰边框的底纹。可以设置下列样式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。 border-color: 设置边框颜色。 例子

2、border-top-width border-bottom-width border-right=width border-left-width

功能:分别设置各个边框的厚度。 数值: thin - 细边框。 medium - 中等线宽。 thick - 粗线。 长度 - 用相对或绝对单位设置边框宽度。 例子

3、border-width

功能:简写属性,可同时设置四个边框的宽度。 数值: thin - 细边框。 medium - 中等线宽。 thick - 粗线。 长度 - 用相对或绝对单位设置边框宽度。 说明:见 padding 说明。 例子:

边框属性

4、border-color

功能:简写属性,设置四个边框的颜色值。 数值:可以用颜色名或RGB值。如果指定单个颜色,则四个边框都显示为这个颜色;如果指定两个颜色,则顺序为上下,左右;如果指定三种颜色,则顺序为上,左右,下;如果指定四种颜色,则顺序为上,右,下,左。 说明:颜色名如下 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 对于RGB值,可用三种方法指定 #rrggbb; rgb(r,g,b); rgb(r%,g%,b%) 例子:

边框颜色

5、border-style

功能:用于显示边框和指定边框样式。 数值: none - 不显示边框,为缺省值 dotted - 点线 dashed - 虛线 solid - 实线 double - 双线 groove - 3D陷入线 ridge - 3D山脊狀线 inset - 使页面有沉入感 outset - 使页面有浮出感 说明:并非所有浏览器都能显示ridge, inset, outset 之类的样式,有些浏览器将所有边框都绘制成实线。

Example1

Example2

6、border

功能:简写属性,设置所有边框属性。 数值: border-width - 取值 thin, medium, thick 或指定长度。 border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color - 可用颜色名或RGB值。 说明:与其它简写属性不同的是,每个设置只能取一个值,这个属性均匀作用于框的各边。 例子:

This Is A Example

转自:动态网制作指南 www.knowsky.com

59ita点com(我就爱TA)
2004-06-11 00:03
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
得分:0 

三、框边界属性

1、margin-bottom margin-left margin-right margin-top

功能:这四个属性用来设置元素与其相邻元素间的距离,可以用长度或相对于其父文本的宽度的百分比来定义,也可以自动处理。 数值: 长度 - 设置元素相应边与框边缘之间的相对或绝对距离,有效单位为:mm, cm, in, px, pt, pica,ex, em ... 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动,这个设置取浏览器的缺省边界。 例子

2、margin

功能:简写属性,用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的,可以看到下面的页面背景。 数值: 长度 - 同前 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动,这个设置取浏览器的缺省边界。 例子

四、框位置属性

1、height

功能:设置元素高度,浏览器按照这个高度调整图形。 数值: 长度 - mm, cm, px, pt, ..... auto - 自动。

2、width

功能:设置元素宽度,浏览器按照这个宽度调整图形。 数值: 长度 - mm, cm, in, px, pt, ...... 百分比 - 将图形尺寸设置为父元素宽度的百分比。 auto - 自动调整

3、float

功能:用于在普通元素流布置规则以外放上元素。 数值: none - 无改动。 left - 将其它元素内容放到浮动元素右边。 right - 将其它元素内容放到浮动元素左边。

4、clear

功能:用于允许或禁止指定元素旁边放置其它元素(通常是线上图形). 数值: none - 无限制。 left - 将元素放在左边浮动元素下面 right - 将元素放在右边浮动元素下面 both - 元素两边都不允许放置浮动元素

转自:动态网制作指南 www.knowsky.com

59ita点com(我就爱TA)
2004-06-11 00:04
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
得分:0 

1、color

功能:设置前景或元素的颜色。 数值:使用颜色关键字或RGB值。 例子:

文本颜色(关键字)

文本颜色(#rrggbb)

文本颜色[rgb(rr,gg,bb)]

文本颜色[rgb(r%,g%,b%)]

2、background-color

功能:设置页面或页面元素的背景颜色。 数值: 颜色 - 可用颜色名或RGB值 transparent - 透明,使页面背景为缺省背景。 例子:

背景颜色

3、background-image

功能:定义背景图形。 数值: none - 不用图形作背景 url - 提供图形文件的URL地址 说明:也可以包括background-color属性以便在找不到图形时代用 例子:

图形背景

4、background-repeat

功能:控制图形背景是否重复排列。 数值: repeat - 垂直和水平重复,缺省值 repeat-x - 水平重复 repeat-y - 垂直重复 no-repeat - 不重复 说明:这个属性和 background-image 和 background-position 属性一起使用。 例子:

水平重复排列

5、background-attachment

功能:指定元素的背景是随元素一起滚动还是固定在页面某个位置上。 数值: scroll - 随元素一起滚动 fixed - 固定 说明: 缺省值是 scroll,这个属性和 background-image 属性一起使用。

6、background-position

功能:用于在空间中定位元素背景 数值: 长度 - 相对或绝对单位设置元素框边缘的起点,并给出单位下的坐标。 百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点 垂直位置 - 设置竖直方向的起点,关键字为 top, center, bottom 水平位置 - 设置水平方向的起点,关键字 left, center, right 例如:top left, left top和0% 0% 都表示图形左上角从元素框左上角开始 例子:

Body {background-image:url(logo.gif); background-position:50% 50%}

这个语句将 Body 基本类设置为背景图形在页面上居中显示。

7、background

功能:简写属性,可以设置所有背景属性。 数值: background-attachment background-color background-image background-position background-repeat 有关上述数值的细节,见各个属性部分。

转自:动态网制作指南 www.knowsky.com

59ita点com(我就爱TA)
2004-06-11 00:05
belin2000
Rank: 3Rank: 3
等 级:论坛游侠
威 望:5
帖 子:975
专家分:194
注 册:2004-6-2
得分:0 
1、display

功能:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。 数值: none - 不显示元素 block - 块显示,在元素前后设置分行符 inline - 删除元素前后的分行符,使其并入其它元素流中 list-item - 将元素设置为清单中的一行 说明:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。

2、white-space

功能:控制元素內的空白。 数值: normal - 不改变,保持缺省值,在浏览器页面长度处换行。 pre - 要求文档显示中采用源代码中的格式。 nowarp - 不让访问者在元素內换行。

3、list-style-type

功能:指定清单所用的强调符或编号类型 数值: none - 无强调符 disc - 碟形强调符(实心圆) circle - 圆形强调符(空心圆) square - 方形强调符(实心) decimal - 十进制数强调符 lower-roman - 小写罗馬字强调符 upper-roman - 大写罗馬字强调符 lower-alpha - 小写字母强调符 upper-alpha - 大写字母强调符 例子: item1 item2 item3

4、list-style-image

功能:用于将清单中标准强调符换成所选的图形 数值: 无图形 url - 图形URL地址 例子: item1 item2 item3

5、list-style-position

功能:用于设置强调符的缩排或伸排,这个属性可以让强调符突出于清单以外或与清单项目对齐。 数值: inside - 缩排,将强调符与清单项目内容左边界对齐 outside - 伸排,强调符突出到清单项目内容左边界以外

6、list-style

功能:简写属性,将所有清单属性放在一条语句中。 数值: list-style-type list-style-position list-style-image 这些值的细节见各个属性部分。 例子: item1 item2 item3


59ita点com(我就爱TA)
2004-06-11 00:06
简简
Rank: 1
等 级:新手上路
帖 子:14
专家分:0
注 册:2004-6-15
得分:0 
ASP空间免费试用

你好!   买100M空间送国际域名一个

先开通!后付款!绝对零风险的空间订购流程!(详情请登陆 http://jian.3366.com.cn )

*在线订购及空间试用请联系QQ: 69137784 简简

*******************************************************************************

点击网络六月空间促销活动

活动时间: 2004年6月1日-6月30日

1、100M主机 (原价280/年) 现在只需188元/年,送国际域名一个+60M企业邮局

2、200M主机+国际域名一个+60M企业邮局,原价338/年,现促销 598/2年(每年仅299元)

3、10用户主机再次火爆促销 原价 2888/年,现促销 2888/2年(每年仅1444元)

4、购买500M虚拟主机498元一个,加200元可续费一年。(每年仅349元)

5、P4服务器租用900元/月,8999/年。

2004-06-15 13:11
简简
Rank: 1
等 级:新手上路
帖 子:14
专家分:0
注 册:2004-6-15
得分:0 
ASP空间免费试用

你好!   买100M空间送国际域名一个

先开通!后付款!绝对零风险的空间订购流程!(详情请登陆 http://jian.3366.com.cn )

*在线订购及空间试用请联系QQ: 69137784 简简

*******************************************************************************

点击网络六月空间促销活动

活动时间: 2004年6月1日-6月30日

1、100M主机 (原价280/年) 现在只需188元/年,送国际域名一个+60M企业邮局

2、200M主机+国际域名一个+60M企业邮局,原价338/年,现促销 598/2年(每年仅299元)

3、10用户主机再次火爆促销 原价 2888/年,现促销 2888/2年(每年仅1444元)

4、购买500M虚拟主机498元一个,加200元可续费一年。(每年仅349元)

5、P4服务器租用900元/月,8999/年。

2004-06-15 13:12
tianykun
Rank: 4
等 级:禁止访问
威 望:11
帖 子:3727
专家分:0
注 册:2005-11-13
得分:0 

学习咯...


离开这里,离开你的视野,归隐到属于我的地方,无论何处
2006-10-14 18:54
xlmm
Rank: 1
等 级:新手上路
帖 子:125
专家分:0
注 册:2006-10-6
得分:0 
好好学习
天天向上

2006-10-24 20:49



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-2325-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.354420 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved