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>
       好高兴啊，今天老师教会我们&lt;h1>是主标题的意思，我真开心呀！

    </div>

也就是说，在写HTML页面的时候，经常会有误会，比如<就正常出现。那么为了防止HTML页面认为这是一个标签，所以就应该写成转义字符。

所有的转义字符，都是这样的格式：&字母;

<  就是< ,  lt就是英语less than小于

>   就是> ,  gt就是英语greater than大于

©  就是© 版权符号

   就是空格

有一个非常重要的转义字符，就是nbsp。 non-breaking space，无换行空格。

看代码：

   <ul>
       <li>邓  超</li>
       <li>孙  俪</li>
       <li>王宝强</li>
    </ul>

两个空格，折叠成了一个空格

所以要用 来表示一个中文的空格：

   <ul>
       <li>邓&nbsp;超</li>
       <li>孙&nbsp;俪</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就行了：

然后就在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 。