使用 CSS3 | 菜鸟教程 进行学习~
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。
注：对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。
W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用！
目录
CSS3 模块
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
一些最重要CSS3模块如下：
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面
本文中，以下内容将为CSS基础知识，掌握后开始学习CSS3~
————————————————分割线————————————————
CSS概述
使用 CSS 我们可以大大提升网页开发的工作效率！学会如何使用 CSS 同时控制多重网页的样式和布局。
★CSS应用案例——在html的head中用style语句嵌入CSS——
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，通常存储在样式表中。
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题！
外部样式表通常存储在 CSS 文件中（外部的 .css 文件），多个样式定义可层叠为一个。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
CSS语法
1、应用举例
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
结果——
2、CSS规则总结
CSS语句的构成：两个主要的部分构成：选择器，以及一条或多条声明！
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性（您希望设置的样式属性）和一个值组成。
注意：CSS声明总是以分号(;)结束，声明总以大括号({})括起来。
习惯：为了让CSS可读性更强，你可以每行只描述一个属性。
3、CSS注释
跟老版本的c语言一模一样！
/*这是个注释*/
id选择器
为标有特定 id 的 HTML 元素指定特定的样式。
打开查看实例
警告： ID属性不要以数字开头，否则在部分浏览器无法正常运作。
class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示！
看完实例就都明白了——打开
CSS样式表-格式化 HTML 文档
插入样式表的方法有三种:
①外部样式表(External style sheet)
②内部样式表(Internal style sheet)
③内联样式(Inline style)
注意：多重样式的优先级是不同的！（下面会列举）
1、外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。你可以通过改变一个CSS文件来改变整个站点的外观。只需要在每个页面使用link 标签链接到样式表即可。
link标签在文档的头部——
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
上述语句：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表文件（.css）不能包含任何的 html 标签！下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
提醒：不要在属性值与单位之间留有空格。正确的写法如：20px。
2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。
可以使用style标签在html文档头部定义内部样式表，就像上面的“CSS语法应用举例”一样。
3、内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时（才使用此法）。
操作方法——在相关的标签内使用样式（style）属性
style 属性里可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
（本例展示如何改变段落的颜色和左外边距）
★ 多重样式 及其 优先级
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 具体的细则看不懂，奇奇怪怪的…
一般情况下的优先级：
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css"> /* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试！</h3>
</body>
警告：在上述代码中，如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS背景
背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color 背景颜色
background-image 背景图像
background-repeat
background-attachment 附件
background-position 位置
1、背景颜色
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2、背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。设置时应注意文本的可读性。
body {background-image:url('paper.gif');}
默认情况下 background-image 属性会在页面的垂直方向平铺。
加这句话可以变成水平方向：
background-repeat:repeat-x;
★如果你不想让图像平铺，使用no-repeat：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat; /*这句话让背景图片只显示一次！*/
}
★然后你可以用position 属性改变图像在背景中的位置：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top; /*改变背景图片的位置！*/
}
3、简化背景属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中：
简写属性为 “background”——
body
{background:#ffffff url('img_tree.png') no-repeat right top;}
这句话 一！步！到！位！
当使用简写属性时，属性值的顺序为：
①background-color
②background-image
③background-repeat
④background-attachment
⑤background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
4、固定背景图片
在head的style中的body{ }里，添加这句话：
background-attachment:fixed;
会有这个链接里的效果（背景图不会随着滚动页面而滚远！）
跳过的一些笔记
文本颜色
文本对齐方式 打开链接
文本修饰（删除线、加横线）
字符间距、行高
其他都是些表格、超链接之类的的美化…
