原文出自 www.w3schools.com 中的 CSS 教程。
注意： 样式名称不要以数字开始， Mozilla/Firefox 无法工作。
注释： /* ... */
属性值和单位之间不要有空格。
20px不能写成 20 px
样式的顺序：
浏览器默认 < 外部样式 < 内部样式 < 内联样式
CSS 语法：
selector {property: value}
例：
body {color: black}
p {font-family: "sans serif"}
组：
h1,h2,h3,h4,h5,h6 {color: green}
类选择器：
p.right {text-align: right}
p.center {text-align: center}
例：
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
引用多于一个的样式：
center 与 bold 分别是两个样式的名字。
<p class="center bold">This is a paragraph.</p>
不带标签名称的选择器， 任何标签都可用：
.center {text-align: center}
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
匹配所有 input 元素中 type 属性为 text 的：
input[type="text"] {background-color: blue}
ID 选择器：
以 # 开始， 匹配 ID 为 green 的元素
#green {color: green}
匹配 <p> 元素中 ID 为 para1 的元素
p#para1
{
text-align: center;
color: red
}
引用外部样式：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式： 要有 HTML 注释
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
内联样式：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
样式覆盖：
样式1：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
样式2：
h3
{
text-align: right;
font-size: 20pt
}
最后：
h3
{
color: red;
text-align: right;
font-size: 20pt
}
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
匹配 <div> 中的第一个 <p>
div > p:first-child
{
text-indent:25px
}
匹配 <p> 中的第一个 <em>
p:first-child em
{
font-weight:bold
}
p:first-line {color:#0000ff;font-variant:small-caps}
p:first-letter {color:#ff0000;font-size:xx-large}
h1:before
{
content: url(beep.wav)
}
h1:after
{
content: url(beep.wav)
}
图像透明：
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
οnmοuseοver="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
οnmοuseοut="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />
Mozilla： -moz-opacity:x x值（0.0 - 1.0）
IE： filter:alpha(opacity=x) x值（0 - 100）
注意： 样式名称不要以数字开始， Mozilla/Firefox 无法工作。
注释： /* ... */
属性值和单位之间不要有空格。
20px不能写成 20 px
样式的顺序：
浏览器默认 < 外部样式 < 内部样式 < 内联样式
CSS 语法：
selector {property: value}
例：
body {color: black}
p {font-family: "sans serif"}
组：
h1,h2,h3,h4,h5,h6 {color: green}
类选择器：
p.right {text-align: right}
p.center {text-align: center}
例：
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
引用多于一个的样式：
center 与 bold 分别是两个样式的名字。
<p class="center bold">This is a paragraph.</p>
不带标签名称的选择器， 任何标签都可用：
.center {text-align: center}
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
匹配所有 input 元素中 type 属性为 text 的：
input[type="text"] {background-color: blue}
ID 选择器：
以 # 开始， 匹配 ID 为 green 的元素
#green {color: green}
匹配 <p> 元素中 ID 为 para1 的元素
p#para1
{
text-align: center;
color: red
}
引用外部样式：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式： 要有 HTML 注释
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
内联样式：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
样式覆盖：
样式1：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
样式2：
h3
{
text-align: right;
font-size: 20pt
}
最后：
h3
{
color: red;
text-align: right;
font-size: 20pt
}
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
匹配 <div> 中的第一个 <p>
div > p:first-child
{
text-indent:25px
}
匹配 <p> 中的第一个 <em>
p:first-child em
{
font-weight:bold
}
p:first-line {color:#0000ff;font-variant:small-caps}
p:first-letter {color:#ff0000;font-size:xx-large}
h1:before
{
content: url(beep.wav)
}
h1:after
{
content: url(beep.wav)
}
图像透明：
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
οnmοuseοver="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
οnmοuseοut="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />
Mozilla： -moz-opacity:x x值（0.0 - 1.0）
IE： filter:alpha(opacity=x) x值（0 - 100）
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
