一，CSS3
为了满足日益丰富的网页设计需求，HTML 不断添加各种显示标签和样式属性 。 由此带来了一个问题 ： 网页结构和样式混用让网页代码变得混乱不堪，代码冗余增加了带宽负担，代码维护也变得苦不堪言 。
CSS ( Cascading Style Sheet ）表示层叠样式表，是用于控制网页样式并允许将样式代码与网页内容分离的一种标记性语言。
使用CSS样式可以控制许多仅使用HTML无法控制的属性。当在浏览器中打开一个HTML网页时， 浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网页元素呈现出来。 CSS决定浏览器将如何描述HTML元素的表现形式。
CSS3 规范并不是完全另起炉灶，它继承了 CSS2.1 的部分内容，但在其基础上进行了很多的增补与修改。与 CSSl 、 CSS2 比较， CSS3 进行了革命性升级，而不仅限于局部功能的修订和完善，
二，css 基本用法
1，css 样式
样式是 css 最小的语法单元，每个样式包含两部分内容，即选择器和声明。
- 选择器 （ Selector ）：选择器告诉浏览器该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定 Class 或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。
- 声明（ Declaration )：声明可以增加一个或者无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后整体紧邻选择器的后面。
- 属性（ Prope句＇）：属性是 css 提供的设置好的样式选项 。属 性名是一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够直观表示属性所要设置样式的效果。
- 属性值（ Value ）：属性值是用来显示属性效果的参数 。 它包括数值和单位，或者关键字。
body {
font-size: 12px;
background: #ddd
}
table {
/*表格基本属性*/
border-collapse: collapse;
border-spacing: 0;
}
2，css的使用
css 样式代码必须保存在.css 类型 的文本文件中，或者放在网页内＜style＞标签 中，或者插在网页标签的 style 属性值中。
1，行内样式：
行内样式一般都将css代码放入标签的 style 属性中。
<body>
<h1 class="intro" style="color:#ff9999">Header 1</h1>
<p class="preview" style="font-weight:bold">the first paragraph.</p>
<p class="preview" style="font-weight:bold">the second paragraph.</p>
<p class="important" style="font-weight:bold; color:#ff9955">Note that this is an important paragraph.</p>
</body>
虽然行内样式可直接对行内元素设置样式实现快速编辑，但存在效率低下、单条编写不利于后期统一维护、导致网页内容负载增大等缺点。
2，内嵌式：
内嵌式一般将 css 写在＜head>与＜head＞之间，并使用<style＞标签将其包围。
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css"> <!--当style的type为text/css时，内部编写css 样式；若style的type为text/iavascript时，内部编写JavaScript脚本。-->
h1{
color:#ff9999;
background:#ffcc99;
}
p{
font-weight:bold;
color:#ff9955;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p class="preview">the first paragraph.</p>
<p class="preview">the second paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
3，链接式：
链接式通过 HTML 的＜link＞标签将外部样式表文件链接到 HTML 文档中，这也是网络上应用最多的方式。
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/mobi.css/dist/mobi.min.css"> <!--其中href代表链接css文件的地址；type表示链接文档的类型；rel定义链接外部文件的关联类型。-->
</head>
这种方法将 HTML 文档和 css 文件完全分离 ，实现结构层和展示层的彻底分离，增强网页结构的扩展性和 css 样式的可维护性。
4，导入样式：
导入样式使用＠import 命令导入外部样式表。在 css 文件中也需要将＠impo此放在前面3 后面加入css样式，否则也是无效。
@import daoru.css;
@import 'daoru.css';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(css1.css);
@import url(daoru.css);
body{
background-color:Jfe4e929;}
</style>
</head>
<body>
<div>
<p>controled by css1.css</p>
<h3>controled by<span>css2.css </span></h3>
</div>
</body>
css1.css:
h1, h3 {
float: left;
clear: left;
width: 320px;
background-color: #fff;
color: #5a514c;
text-align: center;
}
css2.css:
p{
font-size: 14px;
}
daoru.css:
@import url ("css2.css");
p{text-indent:3em;}
3，css 样式表
一个或多个 css 样式可以组成一个样式表。
1，内部样式表：
内部样式表包含在＜style>标签内，一个＜style＞标签就表示一个内部样式表。而通过标签的 style 属性定义的样式属性就不是样式表。
2，外部样式表：
如果 css 样式被放置在HTML文档外部的.css文件中，则称为外部样式表， 一个 css 样式表文档就表示一个外部样式表。
扫描二维码关注公众号，回复：
11759349 查看本文章
三， css 特性
1，css 继承性
被包含的元素将拥有外层元素的样式效果 ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="GB2312">
<title>css使用实例</title>
<style type="text/css" >
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid #000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
em{
color: green;
}
</style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>这是红色，10pt，加粗，黑体，有边框</div>
<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
<div>
<p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>
这是红色，10pt，黑体<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
</div>
</body>
</html>
2，css 层叠性
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会根据优先级判断该如何进行样式化，这是CSS的一种冲突处理方式。
具体请参考这篇文章：https://www.cnblogs.com/qianguyihao/p/7253929.html
四， CSS3 选择器
css 选择器对网页对象可以实现一对一、一对多或者多对一的匹配 。
根据所获取页面中元素的不同，可以把 CSS3 选择器分为 5 大类：基本选择器、组合选择器、伪类选择器、伪元素和属性选择器。
1，基本选择器
1，标签选择器：
标签选择器直接引用 HTML 标签名称。”css基本用法“一节中主要就是用了这种方法。
h1, h3, p {
float: left;
clear: left;
width: 320px;
background-color: #fff;
color: #5a514c;
text-align: center;
}
2，类选择器：
类选择器使用”.自定义的类名“开头，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。
<head>
<style type=”text/css ”>
p {
font-size : 12px;
color:red;
}
</style>
</head>
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="te">剪不断，理还乱，<span>是离愁</span>。别是一般滋味在心</div>
<p class="ey">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
my.css:
.font18px {
font-size:18px;
color:ff2233;
}
.te {
font-size:8px;
color:ee6699;
}
div.te {
font-size:8px;
color:cc1111;
}
span {
font-size:14px;
color:bb9988;
}
3，ID 选择器：
ID选择器以"#自定义的id名"开头，实现对 含有该id属性的样式设置。
<head>
<style type=”text/css ”>
p {
font-size : 12px;
color:red;
}
</style>
</head>
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p id="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="te">剪不断，理还乱，<span>是离愁</span>。别是一般滋味在心</div>
<p class="ey" id="te" >剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
.css:
.font18px {
font-size:18px;
color:ff2233;
}
.te {
font-size:8px;
color:ee6699;
}
#te { /*优先级高于类选择器*/
font-size:10px;
color:ee6;
}
div.te {
font-size:8px;
color:cc1111;
}
span {
font-size:14px;
color:bb9988;
}
4，通配选择器：
所有元素都定义相同的样式.
<head>
<style type=”text/css ”>
p {
font-size : 12px;
color:red;
}
</style>
</head>
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p id="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="te">剪不断，理还乱，<span>是离愁</span>。别是一般滋味在心</div>
<p class="ey" id="te" >剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
.css:
* {
font-size:18px;
color:ff2233;
}
2，组合选择器
1，包含选择器：
当把两个或多个基本选择器组合在一起，就形成了一个复杂 的选择器，通过组合选择器可以精确匹配页面元素。
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="ae"> <!--包含与被包含-->
李煜
<div class="te_">
剪不断，理还乱，
<p id="te">是离愁。</p>
<span id="te">别是一般滋味在心</span>
</div>
<div class="te">
被包含，但class不是被指定的
</div>
</div>
<p class="te_">class时指定的，但未包含在div中</p>
<p class="ey">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
.css:
.font18px {
font-size:18px;
color:red;
}
div .te_{ /*包含与被包含*/
font-size:8px;
color:blue;
}
#te{
font-size:8px;
color:yellow;
}
div.ae {
font-size:20px;
color:green;
}
.ey {
font-size:20px;
color:pink;
}
2，子选择器：
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="ae"> <!--包含与被包含-->
李煜
<div class="te_">
剪不断，理还乱，
<p id="te">是离愁。</p>
<span id="te">别是一般滋味在心</span>
</div>
<div class="te">
被包含，但class不是被指定的
</div>
</div>
<p class="te_">class时指定的，但未包含在div中</p>
<p class="ey">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
.css:
.font18px {
font-size:18px;
color:red;
}
.te{
font-size:8px;
color:yellow;
}
div.ae {
font-size:20px;
color:green;
}
div > p{
font-size:20px;
color:pink;
}
3，相邻选择器：
指定前兄的后弟的样式。
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<p class="te">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
<div class="ae"> <!--包含与被包含-->
李煜
<div class="te_">
剪不断，理还乱，
<p id="te">是离愁。</p>
<span id="te">别是一般滋味在心</span>
</div>
<div class="te">
被包含，但class不是被指定的
</div>
</div>
<p class="te_">class时指定的，但未包含在div中</p>
<p class="ey">剪不断，理还乱，是离愁 。别是一般滋味在心</p>
</body>
.css:
.font18px {
font-size:18px;
color:red;
}
.te{
font-size:8px;
color:yellow;
}
div.ae {
font-size:20px;
color:green;
}
p + p{
font-size:20px;
color:pink;
}
4，兄弟选择器
设置兄后匹配的所有弟的样式。
<body>
<p>111111111111</p>
<p class="font18px">2222222222222</p>
<p class="te">333333333333</p>
<div class="ae"> <!--包含与被包含-->
4444444444444444
<div class="te_">
5555555555555
<p id="te">66666666666666</p>
<span id="te">7777777777777777</span>
</div>
<div class="te">
88888888888888888888
</div>
</div>
<p class="te_">999999999999999999999999</p>
<p class="ey">000000000000000000000000</p>
</body>
.css:
.font18px {
font-size:18px;
color:red;
}
.te{
font-size:8px;
color:yellow;
}
div.ae {
font-size:20px;
color:green;
}
div ~ p{
font-size:20px;
color:pink;
}
5，分组选择器：
将标签用" , "隔开，实现集体声明。
<body>
<p>111111111111</p>
<p class="font18px">2222222222222</p>
<p class="te">333333333333</p>
<div class="ae"> <!--包含与被包含-->
4444444444444444
<div class="te_">
5555555555555
<p id="te">66666666666666</p>
<span id="te">7777777777777777</span>
</div>
<div class="te">
88888888888888888888
</div>
</div>
<p class="te_">999999999999999999999999</p>
<p class="ey">000000000000000000000000</p>
</body>
.css:
p, span, div {
font-size:18px;
color:red;
}
div ~ p{
font-size:20px;
color:pink;
}
3，属性选择器
通过属性的不同，指定具有特定属性的HTML元素的样式。
1，E[attr]
只要属性列表中有指定的attr属性，则E元素就会被选中。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a_3" title="url_3" href="html5_2.asp">Next</a>
<a id="a_4" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav > a[id][title] {
background:blue;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
2，E[attr=“value”］
属性列表中所有attr和value都一一匹配的E元素才会被选中。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a_3" title="url_3" href="html5_2.asp">Next</a>
<a id="a_4" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav > a[id][title] {
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="a_4"] { /*这里a的属性个数及值要完全匹配才行*/
background:red;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
3，E[attr～＝”value”］
只要属性列表中有一个attr和value相匹配就可以选中该元素。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a_3" title="url_3" href="html5_2.asp">Next</a>
<a id="a_4" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav > a[id~="a_1"] { /*是这里*/
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="a_4"] {
background:red;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
4.，E[attr^＝"value"］
属性列表中attr属性值以"value"开头的所有元素会被选中。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a" title="url_3" href="html5_2.asp">Next</a>
<a id="user" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
p, a[id^="a_"] { /*这里*/
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
5，E[attr$＝”value”］
属性列表中attr属性值以"value"结尾的所有元素会被选中。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a" title="url_3" href="html5_2.asp">Next</a>
<a id="user" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
[id$="_1"] { /*这里*/
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
6，E[attr*＝”value”］
属性列表中attr属性值包含"value"的所有元素会被选中。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a" title="url_3" href="html5_2.asp">Next</a>
<a id="user" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
[id*="_"] { /*这里*/
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
a{
font-size:20px;
color:pink;
}
7，E[attr|＝”value”］
属性列表中attr属性值为"value"或以"value"开头的所有元素会被选中。
4，伪类选择器
通过伪类选择器可以改变元素的状态，
- 单纯式 E:pseudo-class { property:value}
- 混用式 E.class:pseudo-lass{property: value}
<body>
<h3>这是一个示例</h3>
<div id="div_nav" title="div_nav">
导航栏：
<nav id="nav" title="nav">
<a id="a_1" title="url_1" href="index.asp">Home</a>
<a id="a_2" title="url_2" href="html5_1.asp">Previous</a>
<a id="a" title="url_3" href="html5_2.asp">Next</a>
<a id="user" href="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" title="div_par">
自然段：
<div id="div_par_sub" title="div_par_sub">
111111111111111
<p id="p_1" title="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" title="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav > a [id|="a"] {
background:blue;
color:yellow;
font-weight:bold;
}
nav > a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:green;} /* 鼠标点击时 */
1， 动态伪类:
这些伪类并不存在于 HTML 中，只有当用户与页面进行交互时才能体现出来.。
- 锚点伪类，这是一种在链接中常见的样式，如:ink、:visited。
- 行为伪类， 也称为用户操作伪类，如:hover、:active 和 :focus 。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" class="div_nav">
导航栏：
<nav id="nav" class="nav">
<a id="a_1" class="url_1" href="index.asp">Home</a>
<a id="a_2" class="url_2" href="html5_1.asp">Previous</a>
<a id="a" class="url_3" href="html5_2.asp">Next</a>
<a id="user" class="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" class="div_par">
自然段：
<div id="div_par_sub" class="div_par_sub">
111111111111111
<p id="p_1" class="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" class="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.CSS:
nav > a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
.nav a:link {color:#FF0000;} /* 未访问的链接 */
.nav a:visited {color:#00FF00;} /* 已访问的链接 */
.nav a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
.nav a:active {color:#FFFF00;} /* 鼠标点击时 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<h2>示例</h2>
<button class="button button1">阴影按钮</button>
<button class="button button2">鼠标悬停后出现阴影</button>
</body>
</html>
2，结构为类：
结构伪类是 CSS3 新设计的选择器，通过文档结构的相互关系来匹配特定的元素，从而减少文档内 class 属性和 E 属性的定义。
- :fist-child：选择某个元素的第一个子元素。
- :last-child：选择某个元素的最后一个子元素。
- :nth-child()：选择某个元素的一个或多个特定的子元素。
- :nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算。
- :nth-aιtype()： 选择指定的元素。
- :nth-last-aιtype()：选择指定的元素，从元素的最后一个开始计算。
- :first-aιtype ： 选择一个上级元素下的第一个同类子元素。
- :last-aιtype ： 选择一个上级元素的最后一个同类子元素。
- :only-child ： 选择的元素是它的父元素的唯一一个子元素。
- :only-of-type ： 选择一个元素是它的上级元素的唯一一个相同类型的子元素。
- :empty：选择的元素里面没有任何内容。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" class="div_nav">
导航栏：
<nav id="nav" class="nav">
<a id="a_1" class="url_1" href="index.asp">Home</a>
<a id="a_2" class="url_2" href="html5_1.asp">Previous</a>
<a id="a" class="url_3" href="html5_2.asp">Next</a>
<a id="user" class="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" class="div_par">
自然段：
<div id="div_par_sub" class="div_par_sub">
111111111111111
<p id="p_1" class="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" class="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
#nav a:nth-child(-n+2){ /*这里*/
background:pink;
color:yellow;
font-weight:bold;
}
.nav a:link {color:#FF0000;} /* 未访问的链接 */
.nav a:visited {color:#00FF00;} /* 已访问的链接 */
.nav a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
.nav a:active {color:#FFFF00;} /* 鼠标点击时 */
div p:nth-of-type(1){ background-color:#FF0000;} /*这里*/
3，否定伪类：
:not()表示否定选择器，即排除或者过滤掉特定元素。
<body>
<h3>这是一个示例</h3>
<div id="div_nav" class="div_nav">
导航栏：
<nav id="nav" class="nav">
<a id="a_1" class="url_1" href="index.asp">Home</a>
<a id="a_2" class="url_2" href="html5_1.asp">Previous</a>
<a id="a" class="url_3" href="html5_2.asp">Next</a>
<a id="user" class="html5_3.asp">User</a>
</nav>
</div>
<div id="div_par" class="div_par">
自然段：
<div id="div_par_sub" class="div_par_sub">
111111111111111
<p id="p_1" class="p1">
222222222222<span id="in_p_1">00000000000</span>22222222222222222
</p>
<p id="p_2" class="p2">
33333333333333333333333333333
<br/>
<a id="a_4" href="#">查看以上内容的官方文档</a>
</p>
</div>
</div>
</body>
.css:
nav a[id="user"] {
background:red;
color:yellow;
font-weight:bold;
}
p:not([id="p_1"]) {background:yellow;} /*这里*/
4，状态伪类：
状态伪类主要针对表单进行设计的。元素的状态一般包括 ： 可用、不可用、选中、未选中、获取焦点、失去焦点 、 锁定、待机等。
- : enabled 伪类表示匹配指定范围内所有可用 U 元素。
- :disabled 伪类表示匹配指定范围内所有不可用四元素。
- :checked 伪类表示匹配指定范围内所有可用四元素。
<form action="#" >
<label for="username">用户</label>
<input type="text" name="username" id="username"/>
<input type="text" name="username" disabled="disabled" value＝"不可用"／>
<br/>
<label for="password">密码</label>
<input type="password" name="password" id="password" />
<input type="password" name="passwordl" disabled="disabled" value="不可用"/>
<br/>
<input type="submit" value="提交"／>
</form>
.cdd:
input[type="text"] , input [type="password"]{
border:lpx solid #OfO ;
width:160px;
height:22px;
padding-left:20px;
margin:6px 0;
line-height : 20px;
}
input[type="text"] { background :url(images /name.gif) no-repeat 2px 2px ;}
input[type="password") { background:url (images/password.gif) no-repeat 2px 2px; }
input(type="text"] :disabled {
background:#ddd url(images/namel.gif ) no-repeat 2px 2px;
border: lpx solid #bbb ; }
input[type="password"] :disabled {
background:#ddd url(images/passwordl.gif) no-repeat 2px 2px;
border: lpx solid #bbb;}
两个实例：
1，一个简单的导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
background: #27ae60;
}
nav ul {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
h1 {
width: 500px;
margin: 100px auto 20px;
color: #f0f0f0;
text-align: center;
}
.nav {
width: 500px;
margin: 0 auto;
background: #1e8449;
color: #f0f0f0;
}
.nav a {
display: block;
padding: 0 16px;
line-height: inherit;
cursor: pointer;
}
.nav__menu {
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
}
.nav__menu-item {
display: inline-block;
position: relative;
}
.nav__menu-item:hover {
background-color: #9b59b6; }
.nav__menu-item:hover .nav__submenu {
display: block; }
.nav__submenu {
font-weight: 300;
text-transform: none;
display: none;
position: absolute;
width: 220px;
background-color: #9b59b6;
}
.nav__submenu-item:hover {
background: rgba(0, 0, 0, 0.1); }
</style>
</head>
<body>
<h1>A Simple Dropdown Menu</h1>
<nav class="nav">
<ul class="nav__menu">
<li class="nav__menu-item"><a>Home</a></li>
<li class="nav__menu-item"><a>Services</a>
<ul class="nav__submenu">
<li class="nav__submenu-item"> <a>Web Design</a></li>
<li class="nav__submenu-item"> <a>Web Development</a></li>
<li class="nav__submenu-item"> <a>Web Hosting</a></li>
</ul>
</li>
<li class="nav__menu-item"><a>About</a>
<ul class="nav__submenu">
<li class="nav__submenu-item"> <a>Our Company</a></li>
<li class="nav__submenu-item"> <a>Our Team</a></li>
<li class="nav__submenu-item"> <a>Our Reach</a></li>
</ul>
</li>
<li class="nav__menu-item"><a>Blog</a></li>
<li class="nav__menu-item"><a>Contact</a></li>
</ul>
</nav>
</body>
</html>
2，一个简单的登录页面
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<script src="/adsense.js" type="text/javascript"></script>
<section class="container">
<div class="login">
<h1>Login to Web App</h1>
<form method="post" action="index.html">
<p>
<input type="text" name="login" value="" placeholder="Username or Email">
</p>
<p>
<input type="password" name="password" value="" placeholder="Password">
</p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer </label>
</p>
<p class="submit">
<input type="submit" name="commit" value="Login">
</p>
</form>
</div>
<div class="login-help">
<p>Forgot your password? <a href="index.html">Click here to reset it</a>.</p>
</div>
</section>
</body>
</html>
.css:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.about {
margin: 80px auto;
padding: 8px;
width: 260px;
font: 10px/18px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #777;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
background: #eee;
background: rgba(250, 250, 250, 0.8);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}
.about a {
color: #333;
text-decoration: none;
border-radius: 2px;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
transition: 0.1s;
}
.about a:hover {
text-decoration: none;
background: #fafafa;
background: rgba(255, 255, 255, 0.7);
}
.about-links {
height: 30px;
}
.about-links a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author a {
padding: 1px 3px;
margin: 0 -1px;
}
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #0ca3d2;
}
.container {
margin: 80px auto;
width: 640px;
}
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
background: white;
border-radius: 3px;
-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
}
.login p.remember_me label {
font-size: 12px;
color: #777;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: white;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #cce7fa;
text-decoration: none;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
input {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
font-size: 14px;
}
input[type=text], input[type=password] {
margin: 5px;
padding: 0 10px;
width: 200px;
height: 34px;
color: #404040;
background: white;
border: 1px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 2px;
outline: 5px solid #eff4f7;
-moz-outline-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0;
}
input[type=submit] {
padding: 0 18px;
height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
border-radius: 16px;
outline: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}
input[type=submit]:active {
background: #cde5ef;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
line-height: 34px;
}
