原文出自 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)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="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）
分享到：
相关推荐
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） 示例描述：本章演示字体属性用法。 间距与间隔....
CSS快速入门.中文手册 很详细，重0开始学习
以及CSS 使用现状、CSS 过渡、鼠标悬浮效果的制作、CSS 旋转、多重背景、表单设计等CSS3 中最为重要的特性及应用方法。 本书出自资深互联网专家之手，深刻探索了HTML和CSS最为关键的核心内容。 对于Web前端开发的...
通过使用 CSS 来提升工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
每个边框有3个方面：样式（或外观）、颜色、以及其宽度（粗细），下面我们分别重点解释这三项。 边框样式（border-style） 设置元素所有边框的样式，或者单独地为各边设置边框样式。它有10个属性值，分别是： ...
文字原版，高清，带书签，学习css的好资源 译者序 ix 序 xi 前言 xiii 致谢 xv 本书是怎样炼成的 xviii 关于本书 xx 第 1 章 引言 1 Web 标准：是敌还是友 2 CSS 编码技巧 7 第 2 章 背景与边框 17 1 半透明边框 18...
在我们的CSS 教程中，您会学到如何使用CSS 同时控制多重网页的样式和布局。 开始学习CSS ！ ... 您可以对CSS 代码进行编辑，然后单击测试按钮来查看结果
你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 ...
通过使用 CSS 来提升工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 开始学习 CSS!.. 很好很实用的css教程。
2022重制Html5+Css3全套视频教程入门到精通 对建站有兴趣的小伙伴可以下载学习一下 基础知识
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发，CSS（Cascading Style Sheet）层叠样式表单，今天给大家分享css与javascript重难点，感兴趣的朋友一起看看吧
通过使用 CSS 来提升工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 本 CSS 教程包含了数百个CSS在线实例，通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。
CSS 教程 通过使用 CSS 来提升工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 在本教程中，你将学习如何使用 HTML 来创建站点。
CSS3狂神说Java系列-个人学习笔记CSS简介前端3大部分Html - 结构CSS - 表现，表皮JavaScript - 动态交互如何学习CSS是什么CSS怎么用-快速入门CSS选择器（如何定位，重难点）美化网页（文字，阴影，超链接，列表，...
在我们的 CSS 教程中，学到如何使用 CSS 同时控制多重网页的样式和布局，如何把一个网页打扮成漂亮的风格就需要用到样式，这个是前端开发必须掌握的一个东西。 3、直接上代码 复制代码代码如下:<!doctype ...