<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CSS样式</title></head><body><p><font color="#FF0000">style样式写在<head>与</head>之间</font></p>1.内嵌样式：<P style="font-size:20pt; color:red">这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。
</p><P>这段文字没有使用内嵌样式。
</p>2.内部样式表：<HEAD><STYLE type="text/css">H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}</STYLE></HEAD><BODY><H1 class="mylayout"> 这个标题使用了Style。
</H1><H1>这个标题没有使用Style。
</H1></BODY>3.外部样式表：<HEAD><link href="/css/home.css" rel="stylesheet" type="text/css"></HEAD><BODY><H1 class="mylayout"> 这个标题使用了Style。
</H1><H1>这个标题没有使用Style。
</H1></BODY>4.通用样式表：<HEAD><TITLE>Generic Class Selector </title><STYLE TYPE="text/css">.center {text-align:center}</STYLE></HEAD><h1 class = "center">这个标题居中显示。
</h1><p class = "center">这个段落居中显示。
</p></BODY>5.Tag样式：<HEAD><TITLE>Class Selector</title><STYLE TYPE="text/css">p.right {text-align:right}p.center {text-align:center}</STYLE></HEAD><p class="center">这一段居中显示。
</p><p class="right">这一段是居右显示。
</p></BODY></body></html>6.内嵌于其他Tag的样式：<head><title>Class Selector</title><style TYPE="text/css">p em {color:red}</style></head><p>这个段落中用em强调的字是<em>红色</em>的。
</p><h3>这个标题中用em强调的字<em>不是红色</em>的。
</h3></body>7.背景颜色属性：<head><title>背景颜色background-color</title><style type="text/css">body {background-color:#99FF00;}</style></head><body><p>这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。
<p></body>8.背景图片属性：<head><title>背景图片background-image</title></head><body style="background-image:url(aa.jpg)"><p>这个HTML使用了CSS的background-image属性，设置了背景图片。
<p></body>9.背景附着属性：<style type="text/css">body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}</style>10.背景位置属性：<style type="text/css">body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}</style></head><body><p>这个HTML使用了CSS的background-position属性。
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
</p><p>上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
</p> </body>11.背景属性:<html><head><title>背景属性background</title><style type="text/css">body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}</style></head><body><p>这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color, background-image, background-repeat, backgroundattachment, background-position。
</p><p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
</p><p>这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color,background-image, background-repeat, backgroundattachment, background-position。
</p><p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
</p><p>这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color, background-image, background-repeat, backgroundattachment, background-position。
</p><p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
</p></body></html>12.字体属性：<html><head><title>字体大小属性font-size</title><STYLE>BODY{font-size:10pt}.s1 {font-size:16px}.s2 {font-size:16pt}.s3 {font-size:80%}.s4 {font-size:larger}.s5 {font-size:xx-large}</STYLE></head><body><p>这段文字大小是10pt。
</p><p class = "s1">这段文字大小是16px。
</p><p class = "s2">这段文字大小是16pt。
</p><p class = "s3">这段文字大小是10pt的80%。