【同一个空间吧】CSS语法手册
到百度贴吧首页
新闻   网页   贴吧   知道   MP3   图片   视频   百科
    吧内搜索 | 帮助
1

【同一个空间吧】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语法手册  
 
文本属性 

1、letter-spacing 

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


Letter-Spacing
2、line-height 

功能:设置元素中文本的行间距。 

2

回复:【同一个空间吧】CSS语法手册

数值: 
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 
CSS语法手册 
 
文本填充,边框,边界和位置属性(一) 

一、框填充属性 

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或指定长度。 

3

回复:【同一个空间吧】CSS语法手册

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 
 
 
CSS语法手册 
 
文本填充,边框,边界和位置属性(二) 

三、框边界属性 

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 

4

回复:【同一个空间吧】CSS语法手册


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

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 
有 CSS语法手册 
 
分类属性 

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

5

回复:【同一个空间吧】CSS语法手册

CSS弄起来挺难的!至今还没学会呢!呵呵

6

回复:【同一个空间吧】CSS语法手册

够全的呀!

7

回复:【同一个空间吧】CSS语法手册

xiexie

8

回复:【同一个空间吧】CSS语法手册

d

9

回复:【同一个空间吧】CSS语法手册

谢谢你!!非常使用!大家一定喜欢!辛苦了!

但是,请您按照规定格式从发一次。题目应是:

【空间服务】CSS语法手册

谢谢了。请尽快修改。

发表回复

标 题:
内 容:
图片/视频链接: (如何贴图/贴视频?)
用户名:
      
©2010 Baidu 贴吧协议  意见反馈