当前位置: 电脑软硬件应用网 > 设计学院 > 网页特效 > 正文
CSS2 快速参考
CSS2 快速参考
2005-12-30 18:59:43  文/45IT收集   出处:电脑软硬件应用网   
p;url(pendant.gif); 
background-repeat: repeat-y; 

/*表示沿Y轴重复图片“pendant.gif”,其余部分以红色为背景色*/ 

background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:fixed和scroll,fixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。 

background-position属性用来指定背景图片显示的位置: 
属性名称: 'background-position' 
属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] | | [left | center | right] 
初始值: 0% 0% 
适合对象: 容器元素 
是否继承: no 
百分比备注: refer to the size of the element itself 
其中属性值含义为: 
“top left”和“left top”表示“0% 0%”。 
“top”、“top center”和“center top”表示“50% 0%”。 
“right top”和“top right”都表示“100% 0%”。 
“left”、“left center”和“center left”表示“0% 50%”。 
“center”和“center center”表示“50% 50%”。 
“right”、“right center”和“center right”都表示“100% 50%”。 
“bottom left”和“left bottom”表示“0% 100%”。 
“bottom”、“bottom center”和“center bottom”都表示“50% 100%” 
“bottom right”和“right bottom”表示“100% 100%”。 
例如: 
BODY { background: url(banner.jpeg) right top } /* 100% 0% */ 
BODY { background: url(banner.jpeg) top center } /* 50% 0% */ 
BODY { background: url(banner.jpeg) center } /* 50% 50% */ 
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */ 

background属性是以上背景属性的快捷方式,属性和顺序如下: 
属性名称: 'background' 
属性值: <'background-color'> | | <'background-image'> | | <'background-repeat'> | | <'background-attachment'> | | <'background-position'> 
适合对象: 所有元素 
是否继承: no 
百分比备注: 只在background-position中容许使用 

CSS2快速参考之四 

关键词:其他 

5、字体(Font)属性: 
这里定义了关于字体的各种属性。 

font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样: 
属性名称: 'font-family' 
属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] 
初始值: 根据用户定义而定 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如: 
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } 
family-name是指确定的某字体,如Heisi Mincho W3,generic-family指某一类字体,如serif。 
font-style属性描述字体的倾斜程度: 
属性名称: 'font-style' 
属性值: normal | italic | oblique 
初始值: normal 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 

font-variant属性: 
属性名称: 'font-variant' 
属性值: normal | small-caps 
初始值: normal 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。 

font-weight属性用来描述字重。 
属性名称: 'font-weight' 
属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
初始值: normal 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
100到900代表9种不同的字重,400代表normal,700代表bold,900是最重的字体,bolder或lighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为9 00,那么bolder后,字重还是900,同样的lighter也一样。有些字体并没有100到900那么全的字重,也许是从300到700,那么字重的最小和最大值也为300到700。例如: 
P { font-weight: normal } /* 400 */ 
H1 { font-weight: 700 } /* bold */ 

font-size属性描述字体的大小: 
属性名称: 'font-size' 
属性值: <absolute-size> | <relative-size> | <length> | <percentage> 
初始值: medium 
适合对象: 所有元素 
是否继承: yes 
百分比备注: relative to parent element's font size 
该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示: 
xx-small | x-small | small | medium | large | x-large | xx-large 
分别代表最小、较小、小、中等、大、较大和最大。 
相对大小可以使用:larger 或smaller描述。 
例如: 
P { font-size: 12pt; } 
BLOCKQUOTE { font-size: larger } 
EM { font-size: 150% } 
EM { font-size: 1.5em } 

Font属性是以上属性的快捷方式,属性如下: 
属性名称: 'font' 
属性值: [ [ <'font-style'> | | <'font-variant'> | | <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 只在font-size使用 
例如: 
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } 
P { font: x-large/110% "new century schoolbook", serif } 
P { font: bold italic large Palatino, serif } 
P { font: normal small-caps 120%/120% fantasy } 

6、文本(Text)属性: 
这里的属性将影响WEB文档中的文本显示情况。 
text-indent属性描述文本的缩进程度: 
属性名称: 'text-indent' 
属性值: <length> | <percentage> 
初始值: 0 
适合对象: 容器元素 
是否继承: yes 
百分比备注: 根据父元素的宽度而定 
下面的例子表明段落的缩进值为3em: 
P { text-indent: 3em } 

Alignment属性表明文本的对齐方式: 
属性名称: 'alignment' 
属性值: left | right | center | justify 
初始值: 依照用户定义 
适合对象: block-level elements 
是否继承: yes 
百分比备注: 被禁止 

text-decoration属性描述对文本的修饰方法: 
属性名称: 'text-decoration' 
属性值: none | [ underline | | overline | | line-through | | blink ] 
初始值: none 
适合对象: 所有元素 
是否继承: no (see clarification below) 
百分比备注: 被禁止 
属性值含义分别为: 
underline:下划线。 
overline:上划线。 
line-through:删除线。 
blink:闪烁(如同Navigator中的blink标记的功能) 

text-shadow属性可以为文本加入阴影的特效: 
属性名称: 'text-shadow' 
属性值: none | <color> [, <color> ]* 
初始值: none 
适合对象: all 
是否继承: No 
百分比备注: 只在描述透明度时有效 
例如: 
P { text-shadow: black } 
上例将在文本的右下方显示黑色阴影,另外阴影将增大BOX的面积。 

letter-spacing属性表明文本的字间距:属性名称: 'letter-spacing' 
属性值: normal | <length> | auto 
初始值: normal 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
例如: 
BLOCKQUOTE { letter-spacing: 0.1em } 

word-spacing属性表明文本中单词间距: 
属性名称: 'word-spacing' 
属性值: normal | <length> 
初始值: normal 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
例如: 
H1 { word-spacing: 1em } 

text-transform属性可以将BOX内的文本按指定的大写或小写形式显示: 
属性名称: 'text-transform' 
属性值: capitalize | uppercase | lowercase | none 
初始值: none 
适合对象: 所有元素 
是否继承: yes 
百分比备注: 被禁止 
属性值含义为: 
capitalize:把BOX中的每句句首字母变成大写。 
uppercase:把BOX中所有的字母变成大写。 
lowercase:把BOX中所有的字母变成小写。 

White-space属性描述如何显示文本中的空格,在HTML中,空格是被省略的,也就是说你在一个段落标记的开头无论输入多少个空格都是无效的,要输入空格有两个方法,一是直接输入空格的代码“ ”,或者使用& lt;pre>标记,CSS中也制定了类似于pre的属性: 
属性名称: 'white-space' 
属性值: normal | pre | nowrap 
初始值: normal 
适合对象: 容器元素 
是否继承: yes 
百分比备注: 被禁止 
例如: 
PRE { white-space: pre } 
P { white-space: normal } 


CSS2快速参考之五 

关键词:其他 

7、列表属性: 
这里的属性用来描述列表(list)的一系列属性。 

list-style-type属性描述用于列表每一项前使用的符号: 
属性名称: 'list-style-type' 
属性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 
初始值: disc 
适合对象: 列表元素 
是否继承: yes 
百分比备注: 被禁止 
属性值含义为: 
disc:圆饼形。 
circle:空心圆形。 
square:方形。 
decimal:十进制数值。 
lower-roman:小写罗马数字。 
upper-roman:大写罗马数字。 
lower-alpha:小写希腊字母。 

上一页  [1] [2] [3] [4] 下一页

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    网页特效代码:仿京东的商品分类导航…
    不能屏蔽的网页右下角窗口特效
    装载页面进度条代码
    链接特效之js做引用文章链接代码
    左右移动转换文字特效HTML代码解析
    网页页面实现自动刷新的3种代码
    网页特效代码:纯css下拉菜单列表
    JS特效代码:实现间歇无缝文字滚动特…
    文字滚动特效(兼容多浏览器)
    网页特效代码:JavaScript显示系统时…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号