03_CSS入门和高级技巧(1)
上节课知识的复习
插入图片，页面中能够插入的图片类型：jpg、jpeg、bmp、png、gif；不能的psd、fw。
语法：
<img src=”路径” alt=”替代文字” />
相对路径、绝对路径：
相对路径就是从html页面出发，找到图片：
<img src=”a/b/1.jpg” />
等价于
<img src=”./a/b/1.jpg” />
图片位于html文件较浅的文件夹中：
<img src=”../../../1.jpg” />
绝对路径：直接的门牌号。以http://开头，或者以/开头的都是绝对路径。
<img src=”http://www.163.com/images/logo.png” />
自己的服务器根目录：
<img src=”/images/logo.png” />
根目录的应用
超级链接
a标签，语法：
<a href=”地址” title=”悬停文字” target=”_blank”>链接的文字</a>
超级链接还能做页面锚点
<a name=”info”></a>
此时就能用1.html#info来直接看见这个内容
表单
form标签里面，这个标签我们在Ajax课程上详细介绍。
input类型：
text、password、radio、checkbox、submit、button、reset
下拉框：
select、option
多行文本框：
textarea
单选框如果想互斥，必须要有相同的name属性。如果想点击文字，就能勾选，就要有label
<input type=”radio” name=”sex” id=”male” />
<label for=”male”>男</label>
无序列表、有序列表、定义列表
注意嵌套的写法，ul的儿子只能是li，ul的孙子是谁无所谓：
<ul>
<li>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
表格
1.表格的基本使用
表格的基本使用
<table border="1">
<tr>
<td>第1行，第1个小格。</td>
<td>第1行，第2个小格。</td>
<td>第1行，第3个小格。</td>
<td>第1行，第4个小格。</td>
</tr>
<tr>
<td>第2行，第1个小格。</td>
<td>第2行，第2个小格。</td>
<td>第2行，第3个小格。</td>
<td>第2行，第4个小格。</td>
</tr>
<tr>
<td>第3行，第1个小格。</td>
<td>第3行，第2个小格。</td>
<td>第3行，第3个小格。</td>
<td>第3行，第4个小格。</td>
</tr>
</table>
如果有表头的语义，那么应该书写th替换td。也就是说td和th都是小格格。
2.表格单元格的合并
单元格的合并，单元格的合并属性，colspan、rowspan。一定要写在td或者th上，tr是没有这两个属性的。
colspan我们叫做列跨度，rowspan行跨度。这两个属性，都是小格格(td)的属性，而不是“行”的属性。
一个完整的表格，是有caption、thead、tbody三个部件的：
thead就是表格头部体的意思，tbody就是表格内容体的意思，caption就是表格标题
<table>
<caption>我是标题</caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
div 和 span 标签
1.div 标签
div是division分割的意思，在页面上表示容器，将相同语义的一组元素放在同一个div里面。
div是典型的容器级标签，可以包裹任何东西。
语义上来说，所有相同语义、相关的语义的元素，都要放到一个div里面。
<div>
<h3>中国主要城市</h3>
<ul>
<li>北京</li>
<li>哈尔滨</li>
<li>吉林</li>
<li>长春</li>
</ul>
</div>
<div>
<h3>中国著名男演员</h3>
<ul>
<li>郭德纲</li>
<li>刘德华</li>
<li>邓超</li>
<li>胡歌</li>
</ul>
</div>
div标签，浏览器没有任何的默认样式。
div这个东西能够把层次分的很清楚。
div负责描述页面的结构，css负责描述页面的样式。
2.span
span表示跨度，就是文本级的div。
就是把一些语义相近、功能相同的文本标签，都包裹在一起。注意，直觉上觉得span比a大，比p小。
span也没有任何的默认样式。span单独使用没有什么意义，都是配合样式表使用的。
<p>
今天是CSS的第1天，每天一定要按时<span>完成作业</span>，要按时吃饭睡觉，要<span>多吃蔬菜</span>少喝酒，上课不要迟到。
</p>
HTML杂项
1.注释
任何的语言都有注释，注释是不会当做程序执行的，是给程序员自己看的。
HTML中，注释的语法：
<!--这是网页的头部-->
换行是合法
<!--
这是网页的内容
制作人邵山欢
-->
很明显，写一些注释，对代码的清晰度、可读性有很大的提升。
sublime中，按ctrl+/ ， 能够快速输入一个注释。
为了方便调试代码，经常会把一些代码注释掉，集中精力看其余的代码。
2.字符实体
也叫作转义字符。
<div>
好高兴啊，今天老师教会我们<h1>是主标题的意思，我真开心呀！
</div>
也就是说，在写HTML页面的时候，经常会有误会，比如<就正常出现。那么为了防止HTML页面认为这是一个标签，所以就应该写成转义字符。
所有的转义字符，都是这样的格式：&字母;
< 就是< , lt就是英语less than小于
> 就是> , gt就是英语greater than大于
© 就是© 版权符号
就是空格
有一个非常重要的转义字符，就是nbsp。 non-breaking space，无换行空格。
看代码：
<ul>
<li>邓 超</li>
<li>孙 俪</li>
<li>王宝强</li>
</ul>
两个空格，折叠成了一个空格
所以要用 来表示一个中文的空格：
<ul>
<li>邓 超</li>
<li>孙 俪</li>
<li>王宝强</li>
</ul>
废弃标签介绍
你会发现，现在的HTML标签只负责语义、结构。不负责样式的。但是在2008之前，HTML也是负责样式的。
但是HTML中，有一些标签，具有浓郁的样式色彩。就是这个标签，不是负责语义的，而是负责样式的，2008年开始，坚决的废弃掉了这些标签，用CSS来替代他们的功能。
这些标签：
<b></b>
<u></u>
<i></i>
<del></del>
丝毫看不出语义，只有样式，所以是被废弃了！
这些标签，我们还有点用，当做CSS钩子，什么是钩子，以后再说！
还有一些标签，是擦边球，就是自己也有一些语义，但是也有一些样式色彩，这些标签是可以合理使用的：
<p><strong>我是一个文字</strong></p>
<p><em>我是一个文字</em></p>
em是emphasize的意思，也是强调的意思。
strong、em要比b、i好。
HTML在现在的社会，就是负责页面语义和结构的，所以标签极大的简化。页面上常用的标签实际上就几个：
容器：div、ul（li）、ol、dl、table
放文字的： h系列、p、span、a
文本流：img、input
当做css钩子：b、u、i
最后最后强调一下，HTML放什么标签，不是看什么样子，要看语义！
CSS整体感知
1.简介
前端开发3层：
- HTML：结构层 语义、结构
- CSS：样式层 样式
- JS： 行为层 交互、行为、动画
CSS的全程是cascading style sheet ， 层叠式样式表，“样式表”比较好理解，“层叠式”比较难理解。
CSS的维护者也是w3c，最新版本是CSS3，但是浏览器没有那么的兼容，所以我们学习的是CSS2.1。
2.整体感知
css分为两个部分，选择谁、设置什么样式。
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
p{
color: green;
font-size: 04px;
text-shadow: 8px 8px 8px black;
font-family: "微软雅黑";
transform: rotate(94deg);
width: 944px;
}
</style>
上面的h1、p就是选择器。表示选择哪些HTML标签给他们加样式，就是说你要给谁加样式。
然后大括号里面，就是k:v;的结构，把所有的样式列出来，拥有的样式就写上，没有的样式不写，有多少写多少：
选择器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
选择器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
3.style标签——css的舞台
所有的css样式，都要写在style标签中。
style标签写在<head>里面。
<style type="text/css">
</style
style就是样式的意思，表示这个标签里面写的是样式。
type是类型；
text/css表示纯文本的css。
傻瓜版的sublime能快速输入，只需要输入<sty 按tab就行了：
<sty快捷键
然后就在style标签里面，书写样式：
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
</style>
4.css对换行不敏感、缩进不敏感
h1{color: red; background-color:blue; font-size: 84px; font-size: initial;
}
等价于：
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
写成一行，css代码尺寸小了，这是最后压缩的事情，写的时候，还是一行一行写。
5.分号
每个选择器最后一项的属性值可以没有分号，其他都要有。
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial
}
我们一般也会把最后一项写上分号。
6.先学几个属性
文字颜色：color:red;
color就是文字颜色的意思，后面的值我们使用英语描述。我们后面的课程将告诉你，还能用rgb、十六进制来描述颜色，现在先不着急。
sublime中快捷键是c tab
背景颜色：background-color:blue;
background就是背景的意思，中间有个短横和color连接。我们css中多个词组都是短横分开的。
sublime中快捷键是bgc tab
字号：font-size:40px;
font就是字体，size就是尺寸。px是英语pixel像素的意思。
边框：border:1px solid green;
border就是边框的意思，它的值很有意思，是三个部分，用空格隔开。
这三个部分，可以顺序交换。
-
1px就是粗细，可以任意调整； -
solid就是实线，如果是虚线写dashed； -
green就是颜色，可以任意设置。
基本选择器
选择器就是怎么选择元素的。
1.标签选择器
标签选择器是最最简单的选择器，就是选择页面上所有的同种标签。
要注意的是，选择的是页面上的所有这个标签，而不是一个。
<style type="text/css">
p{
color: green;
}
</style>
body就是页面，如果要设置整个页面的背景颜色，要设置body。
body{
background-color: yellow;
}
标签选择器有点不好用，要选择就都选择了。所以主要的用途就是设置一些标签的默认情况。
2.id选择器
就是对某一个（注意就一个）元素，进行特别的样式设定的时候用。就是给元素一个特别的名字，然后通过这个名字来选择它。
就是给元素加上id属性，然后在选择器用#开头进行选择。
<p id="description">HTML在现在的社会，就是负责页面语义和结构的，所以标签极大的简化。页面上常用的标签实际上就几个：</p>
选择的时候写：
<style type="text/css">
#description{
color: red;
}
</style>
首先，任何元素都可以设置id属性，合法的id属性是英语字母开头（大小写敏感，也就是说aa和AA是两个不同的合法id）、可以有数字、下划线、短横。
同一个页面中，id绝对不能相同。哪怕是不同的元素，id也不能相同，我们必须保证，id在页面上是唯一的。
下面这个例子是错误的，初学者常见的错误：
<p id="para">我是一个段落</p>
<h3 id="para">我是一个h3</h3>
页面上已经有元素的id是para了，所以不能有元素仍然叫para。即使之前叫做para的是一个p，后面叫做para的是一个h3，也不行！是不合法的！
你会发现，我们可以综合利用标签选择器、id选择器一起做效果。比如，我们让所有的p的字号都是20px，让其中某一个的颜色是红色。这就是层叠式样式表的第一层含义，同一个标签可以有多个选择器选择它。
选择器
3.类选择器
id有点不好用，因为是唯一的，如果页面上有两个、三个元素，想设置为同样的样式，id就无能为力了。
所以就是用类选择器，就是给某一类元素，设置相同的类名，然后通过这个类名来选择。
class叫做类名。
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
选择的时候，用点：
<style type="text/css">
.warning{
color: red;
}
</style>
类名的命名和id是一样的，英语字母开头（aa和AA是不一样的类名）、数字、下划线、短横。
可以有多个标签携带同一个类名：
<h1 class="warning">CSS入门和高级技巧</h1>
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
同一个标签，可以携带多个类名，用空格隔开。
<p class="warning p1">我是段落1</p>
这个p标签同时携带了两个类，所以.warning选择器和.p1选择器能同时选择上他们。
.p1{
color: green;
}
.warning{
color: red;
}
注意，使用空格隔开，不是两个class
<p class=”warning” class=”xian”>我是一个错误的示范</p>
原子类的意思： 比如来制作这个效果：
原子类
用原子类是最方便的，所谓的原子类，就是一些简单的属性做成一个类，然后元素自行选择：
<style type="text/css">
.hong{
color: red;
}
.da{
font-size: 04px;
}
.xian{
text-decoration: underline;
}
</style>
各取所需：
<p class="hong da">我是段落</p>
<p class="hong xian">我是段落</p>
<p class="da xian">我是段落</p>
类名的使用的时候，尽量用有语义的单词来表示：warning、important、ad、main。
不要用一些具体的单词：red、hong、left-part、right-part。
写页面到底用id还是class呢？答案非常肯定：class。哪怕页面上只有某一个要改样式，那么我尽量给这一个元素一个单独的class，也不给他id。
这是因为id是js常用的标签，如果你在css就把id用掉了，js程序就有耦合性的问题。
class上样式，id上行为。
高级选择器
1.后代选择器
后代选择器用空格表示：
<div class="news">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
选择这些p，可以用后代选择器：
<style type="text/css">
.news{
color: red;
}
</style>
我们现在要详细介绍一下：
选择的是后代的元素，不一定是儿子，如果是孙子、曾孙子、重孙子……都行
<div class="div1">
<div class="div2">
<div class="div3">
<p>我是一个小p</p>
</div>
</div>
</div>
选择的是div1这个div中的后代p：
<style type="text/css">
.div2 p{
color: green;
}
</style>
可以多重描述祖先顺序，但是顺序必须真实存在：
<style type="text/css">
.div1 .div2 .div3 p{
color: green;
}
</style>
现在反应要快，看见空格了，就是后代。
2.交集选择器
选择又是p标签，同时又有haha类的元素：
交集选择器
p.haha
一般来说，语法是：标签名.类名
别的交集选择器也合法，但是没人这么写：
#box.haha
注意
div.box和div .box的区别
3.并集选择器
逗号表示并集，“都”
<style type="text/css">
p,div{
color:red;
}
</style>
等价于：
p.haha{
color:red;
}
div.xixi{
color:red;
}
4.通配符*
选择所有元素，用*
<style type="text/css">
*{
color: red;
}
</style>
继承性和层叠性
1.继承性
css规定，有一些属性，给某一个元素设置了，它的后代元素都同样拥有它的这个属性了。
继承性
哪些属性能够继承呢？
color
text-系列 ： 比如text-decoration:underline;
font-系列： 比如font-size:30px;
line-系列
background-color不能继承！border不能继承！等等
能够把一些初始的、基本的、普遍的设置，写在body里面。
<style type="text/css">
body{
font-size: 70px;
}
</style>
“层叠式”样式表，cascading的第二层含义，就是继承性。
2.层叠性
层叠性是什么？就是处理冲突的能力。就是当多个选择器都选择上了同一个标签，听谁的？
同一个标签：
<p class="haha" id="para">我是段落</p>
现在有三个选择器都能够选择上它：
<style type="text/css">
p{
color:red;
}
#para{
color:green;
}
.haha{
color:blue;
}
</style>
听谁的？此时，就是所谓的层叠性发挥作用了，CSS有着一套非常严密的法律，此时听id的。
层叠性
选择器的一个基本权重： id的权重 > 类选择器 > 标签选择器
比较复杂的权重计算：
权重计算
10个便签，也干不过1个类。
权重计算
只有选中到文字所在的标签，才能计算权重！！如果是继承而来的，权重是0！
权重计算
如果权重相同怎么办？
- 如果是都选择上了，以style列表中后出现的选择器为准
- 都是通过继承而来的呢：就近原则，谁描述的近，听谁的。
作业
1.标签列表
作业
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.yule{
color: pink;
}
.read{
color: yellow;
}
.zhengzhi{
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
</ul>
<ul>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
</ul>
</div>
</body>
</html>
2.怎么确定权重
权重计算
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1，比如：
body #content .data img:hover
最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1 。
