讲义地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html
第11章 全局属性和其他
1.实体 HTML 实体就是将有特殊意义的字符通过实体代码显示出来。
例如：
2.元数据
<meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta>元素
1].**指定名/值元数据对**
<meta name="author" content="bnbbs">元数据名称 说明
<meta name="description" content="这是一个 HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">
author 当前页面的作者
description 当前页面的描述
keywords 当前页面的关键字
generator 当前页面的编码工具
2].声明字符编码
<meta charset="utf-8">
3].模拟 HTTP 标头字段
//5 秒跳转到指定 URL//另一种声明字符编码
<meta http-equiv="refresh" content="5;http://www.baidu.com">
<meta http-equiv="content-type" content="text/html charset=utf-8">
属性值 说明
refresh 重新载入当前页面，或指定一个 URL。单位秒。
content-type 另一种声明字符编码的方式
3 全局属性
a.id属性（唯一标识）
b.class属性（归类操作）
...c.alt+'n'键，可以定位到该标签
<style type="text/css">
#abc{
color:red;
}
.cd{
color:green;
}
</style>
...
<p id="abc">这是一个ID</p>
<p class="cd">class属性1</p>
<p class="cd">class属性2</p>
<p class="cd">class属性3</p>
<input type="text" name="name" accesskey="n">d.contenteditable 属性
<p contenteditable="true">我可以修改吗？</p>解释：让文本处于可编辑状态，设置 true 则可以编辑，false 则不可编辑。或者直接设置属性
e.dir 属性
<p dir="rtl">文字到右边了</p>解释：让文本从左到右（ ltr），还是从右到左（ rtl）。
f.hidden隐藏元素
g.lang 属性
<p lang="en">HTML5</p>解释：可以局部设置语言。
h.title 属性
<p title="HTML5 教程">HTML5</p>解释：对元素的内容进行额外的提示。
i.tabindex 属性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。选中顺序为1，然后是2.
j.style行内属性
<p style="color:red;">CSS 样式</p>------------------------------------------------------
第十二章 css入门
一、样式类型
1.元素内嵌样式.即在当前元素使用 style 属性的声明方式。
<p style="color:red;font-size:50px;">这是一段文本</p>2.文档内嵌样式.在<head>元素之间创建<style>元素，通过选择器的方式调用指定的元素并设置相关 CSS。
<style type="text/css">3.外部引用样式
p {
color: blue; font-size: 40px;
}
</style>
<p>adfa</p>
<link rel="stylesheet" type="text/css" href="style.css">style.css如下：
@Charset "utf-8";@charset "utf-8" 表明设置 CSS 的字符编码，如果不写默认就是 utf-8。如果有多个.css 文件，可以使用 @import 导入方式引入.css 文件。只不过，性能不如多个<link>链接。
p{
color:green;
font-size: 40px;
}
二、层叠和继承
指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承：指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式，是这个元素在这个浏览器运行时默认附加的样式。
1.浏览器样式
<b>b元素本身隐含加粗样式</b>解释：<b>元素就是具有加粗的隐含样式，而<span>元素没有任何隐含样式，通过 style 属性设置样式。
<span style="font-weight:bold;">span元素没有隐含，但可以设置样式</span>
<b style="font-weight:normal;">去除b元素的隐含样式</b>
2.样式表层叠
样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高：
(1).浏览器样式（元素自身携带的样式）；
(2).外部引入样式（使用<link>引入的样式）；
(3).文档内嵌样式（使用<style>元素设置）；
(4).元素内嵌样式（使用 style 属性设置）。
说明：如果某个样式有冲突，则使用优先级高的，未冲突的样式会叠加使用。如果非要使用（2）的a样式并保留（3）（4）里a样式,则设置强制优先级，
强制优先级：
color: green !important;3.样式继承
如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。
//<b>元素继承了<p>元素的样式
<p style="color:red;">这是<b>HTML5</b></p>
样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。
<style type="text/css">
div{
color: red;
border: solid 1px blue;
}
b{
border:inherit;
}
</style>
<div>这是<b>HTML5</b></div>效果：
----------------------------------------------------------------
第13章 css选择器（一）
一．选择器总汇
本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：
二．基本选择器
1.通用选择器不常用：
/**通用选择器还匹配了html和body标签元素*/
*{
color: red;
}
2.**元素选择器**
p { color: red;}
<p>段落</p>
3.ID 选择器
#abc { font-size: 20px;}
<p id="abc">段落</p>
.abc{
color: red;
}
.def{
font-size: 40px;
}
p.abc{
border:1px green solid;/**也可以使用“元素.class 值”的形式，限定某种类型的元素。*/
}
<p class="abc def">类选择器还可以调用多个样式，中间用空格隔开进行层叠</p>
<p class="abc">这是一个加粗</p>
<span>这是一个什么都没有</span>5.属性选择器。解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
以下两种需要css2：
[href]{
color:orange;
}
[type="password"]{/**匹配属性值的属性选择器*/
border:1px solid red;
}
<a href="http://www.baidu.com">百度</a>名字:<input type="text" name="name">密码：<input type="password" name="pwd" tabindex="1">以下为css3使用：
[href^="http"]{ /**属性值开头匹配的属性选择器。*/
color:red;
}
a[href$=".cn"]{/**属性值结尾匹配的属性选择器。*/
color:green;
}
[href*="baidu"]{/**属性值包含指定字符的属性选择器。*/
font-size:30px;
}
<a href="http://www.baidu.com">百度</a><a href="www.360.cn">cn</a><a href="#">链接</a>以下使用css2:
[class~="def"]{
font-size: 50px; /**属性值具有多个值时，匹配其中一个值的属性选择器。*/
}
[lang|="en"] {
color: red; /**会选择 lang 属性等于 en 或以 en- 开头的所有元素*/}三．复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
1.分组选择器
p,b,i,span { color: red;
}解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。
2.后代选择器
p b { color: red;
}解释：选择<p>元素内部所有<b>元素。
不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。
3.子选择器
ul > li { border: 1px solid red;
}
<ul> <li> 我是儿子 <ol> <li> 我是孙子 </li> <li> 我是孙子 </li> </ol> </li> <li> 我是儿子 </li> <li> 我是儿子 </li></ul>解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。
4.相邻兄弟选择器
p + b { color: red;
}解释：相邻兄弟选择器匹配
和第一个元素相邻的第二个元素。
5.普通兄弟选择器
p ~ b { color: red;
}解释：普通兄弟选择器匹配和第一个元素后面的所有元素。
三．伪元素选择器
伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。
1.::first-line 块级首行
::first-line { color: red;
}解释：块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。
2.::first-letter 块级首字母
::first-letter { color: red;
}解释：块级元素的首行字母。
3.::before 文本前插入
a::before { content: '点击-';
}解释：在文本前插入内容。
4.::after 文本后插入
a::after{ content: '-请进';
}解释：在文本后插入内容。
