- CSS
- CSS
通过使用 CSS 我们可以大大提升网页开发的工作效率！
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
在继续学习之前，你需要对下面的知识有基本的了解：HTML / XHTML
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
基本选择器类型：
- 标签选择器：针对一类标签 （样例1）
- ID选择器：针对某一个特定的标签使用（样例2）
- 类选择器：针对你想要的所有标签使用（样例3）
标签选择器：选择器的名字代表html页面上的标签
所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
无论这个标签藏的多深，一定能够被选择上。
选择的所有，而不是一个。
样例1：
<!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>
id 选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
样例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title><style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
样例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title><style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
CSS其他内容：
CSS背景、文本、字体、链接、列表、表格、菜单、导航、表单、网页布局等属性详细信息
注：CSS的各种属性组合使用需多加练习。
- CSS3
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。
CSS3 模块
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
一些最重要CSS3模块如下：
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
CSS3的圆角、背景、字体、动画、按钮、分页等内容
样例1：
CSS3 border-radius 属性
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
