- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
一。定义
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
如何插入样式表：
插入样式表有三种方法：
外部样式表
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，
你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，
它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
行内样式表（内联样式）
扫描二维码关注公众号，回复：
11110671 查看本文章
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
注意事项：
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，
那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）
和字体尺寸（font-size）会被内部样式表中的规则取代。
二。选择器
（1）id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
#para1
{
text-align:center;
color:red;
}
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-基本选择器</title>
<style>
/*标签选择器*/
span{
font-size: 20px;
}
/*class选择器*/
.female{
color: pink;
}
.male{
color: skyblue;
}
.hero{
font-weight: bold;/*加粗*/
}
/*id选择器*/
#boss{
color: red;
}
</style>
</head>
<body>
<!--
选择器：作用选定一组特有的标签
1）标签 特点：此名称的所有标签
语法：标签名{css样式}
2）class（类）特点：具有分组的特性
语法：.class{css样式}
3）id 特点：具有唯一性
语法：#id{css样式}
-->
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
</body>
</html>（2）类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。（3）属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
（4）标签选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
三，盒子模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-盒子模型</title>
<style>
.box {
width: 300px;
height: 300px;
border: 10px dashed skyblue;
padding: 10px;
margin: auto;
margin-top: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
盒子模型
1）宽和高
width：300px
height：300px
2）边框
border：宽度 类型 颜色
类型：solid 单线、double 双线、dashed 虚线
3）内边距
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
简写：padding: 上右下左
4）外边距
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
简写：margin：上右下左
特殊：margin:auto 水平居中
5）盒子类型
box-sizing：content-box（默认） 盒子大小（宽和高+内边距+边框） ，计算起来就比较麻烦
box-sizing：border-box 盒子大小（宽和高）包含（内边距和边框），计算方法就比较简单了
-->
<div class="box">
<img src="../img/girl.jpg" width="260px" height="260px" alt="">
</div>
</body>
</html>参考讲解
1.显示属性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-显示属性</title>
<style>
span,div{
border: 1px solid red;
}
span{
display: block;/*块级元素*/
}
div{
display: inline;/*行内元素*/
}
ul li{
display: inline;/**/
}
</style>
</head>
<body>
<!--
显示属性：display
1）inline：将标签改为行内元素
2）block：将标签改为块级元素
3）none：隐藏此标签
-->
<span>内联标签span1</span>
<span>内联标签span2</span>
<span>内联标签span3</span>
<div>块级标签div1</div>
<div>块级标签div2</div>
<div style="display: none">块级标签div3</div>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</body>
</html>浮动属性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-浮动属性</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
text-align: center;
}
#long{
float: left;
}
#hu{
float: right;
}
</style>
</head>
<body>
<!--
浮动：float
取值：left、right
清除浮动：clear
取值：both
-->
<div class="box" id="long">左龙</div>
<div class="box" id="hu">右虎</div>
<div style="clear: both"></div>
<div class="box">最后米老鼠</div>
</body>
</html>CSS框架：
