CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

Font 字体

设置文字的字体

运行代码框
<html> <head> <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>This is header 3</h3> <p>This is a paragraph</p> <p class="sansserif">This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置文字的大小

运行代码框
<html> <head> <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置文字的样式

运行代码框
<html> <head> <style type="text/css"> h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

字体变形

运行代码框
<html> <head> <style type="text/css"> p.normal {font-variant: normal} p.small {font-variant: small-caps} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="small">This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置文字的粗细

运行代码框
<html> <head> <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="thick">This is a paragraph</p> <p class="thicker">This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

所有文字的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { font: italic small-caps 900 12px arial } </style> </head> <body> <p>This is a paragraph</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

保留地址 http://www.qqread.com/css/p396806.html进入讨论组讨论。