HTML&CSS笔记
HTML&CSS笔记
现在是HTML5和CSS3的天下了！！
此笔记为李立超老师网课内容
插件名称：Tilt.3d-1.0-1-fx.xpi
IDE开发软件：Hbuilder
画图软件：FastStone Draw
课程简介
前端工程师：开发软件
1、软件开发流程
网页设计师根据需求设计网页.jpg–>前端工程师将设计做成静态网页.html–>后台工程师将静态网页修改为动态网页.aspx
2、根据W3C标准，网页主要由三部分组成：结构、表现、行为
- 结构：HTML用于描述页面的结构
- 表现：CSS用于控制页面中元素的样式
- 行为：JavaScript用于响应用户操作
HTML简介
HTML（Hypertext MarkUp Language）超文本标记语言
- 它负责网页的三个要素之中的结构。
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。 - 以纯文本进行编写网页
标签
标签都是成对出现的，以<>括起来，有开始有结束
以<标签名>括起来，结尾为
如content
根标签：有且只有一个
html的子标签：head、body
HTML格式、注释、标签
一、标签
HTML中的标记指的就是标签
HTML使用标记标签来描述网页
结构：
<标签名>标签内容
二、注释
用括起来的内容
三、标准格式
//在最上面，必须写，声明当前网页是html5标准
<html> //根标签，有且只有一个，所有的内容都包含在该标签中
<head> //head标签，不会直接在页面直接显示，帮助浏览器去解析网页
<meta charset=”UTF-8”/> //用来告诉浏览器网页采用的编码字符集是什么，一般为utf-8/GB2312
<title>网页的标题title>
head>
<body> //页面中所有可视的内容
<h1>网页的所有的内容h1>
body>
html>
注：
在
文本注释标签：
文本颜色的设置：文字
文本大小的设置：文字
字体大小有范围1~7
乱码问题
- 出现的原因：编码和解码采用的字符集不同
编码：依据一定的规则，将字符转换为二进制编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
字符集：编码和解码所需的规则
见的字符集：ASCII（美国）、ISO-8859-1（欧洲）、GBK、GB2312（中文系统默认编码）、UTF-8（万国码）、ANSI（自动编码，智能转换为系统的编码） - 解决方法：
在head中添加meta标签，用来告诉浏览器网页所采用的编码字符集
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/
e.g.
常用标签
标题标签
1、HTML中，一共有六级标题标签：最高，最低
2、使用HTL标签时，关心的是标签的语义，我们使用的标签都是语义化标签
3、6级标题中，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1
一般页面中标题标签只使用h1,h2,h3；h3以后基本不使用
段落标签
1、p标签
段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
2、换行标签
在TL中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签。
3、水平线标签
hr标签也是一个自结束标签，可以在页面中生成一条水平线
实体
1、在HTML中，一些如<>这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
·浏览器解析到实体时，会自动将实体转换为其对应的字符
2、实体的语法：
&实体的名称;
< <
> >
空格
版权符号 ©
3、实体的名称查看搜索W3School离线手册
图片标签
1、使用img标签来向网页中引入一个外部的图片
Img标签也是一个自结束标签
2、属性：
- src：设置一个外部图片的路径
src属性配置的是图片的路径，目前我们所要使用的路径全部都是相对路径 - 相对路径：
相对路径指相对于当前资源（网页文件）所在目录的位置
使用 / 来进入下一级目录，使用 …/ 来返回上一级目录，返回几级目录就写几个 - alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录 - width：可以用来修改图片的宽度，一般使用px作为单位
- height：可以用来修改图片的高度，一般使用px作为单位宽度和高度两个属性
如果指设置一个，另一个也会同时等比例调整大小
如果两个值同时指定则按照设定的值来设置
一般开发中除了自适应的页面，不建议设置width和height
3、例：（在
中） px指的是像素，图片放在上一级目录中的abc文件夹中
*-*-*此种情况为将图片放在和网页相同的文件路径中4、图片的格式
- JPEG（JPG）
JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
一般使用JPEG来保存照片等颜色丰富的图片 - GIF
GIF支持的颜色少，只支持简单的透明，支持动态图
图片颜色单一或者是动态图时可以使用gif - PNG
PNG支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的透明的图片
5、图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
meta标签
- meta中有两个属性：name 和 content
- meta标签中name中的值是对content中的值的描述
1、使用meta可以用来设置网页的关键字
如：
2、使用meta可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中关键字和描述，但是这两个值不会影响页面在搜索引擎中的排名
如：
3、使用meta可以用来做请求的重定向
如：
xHtml语法规范
1、HTML中不区分大写小写，一般我们都使用小写
2、HTML中的注释不能嵌套
3、HTML标签必须结构完整，要么成对出现，要么自结束标签
4、HTML标签可以嵌套，但是不能交叉嵌套
5、HTML标签中的属性必须有值，且值必须加引号（双引号或单引号都行）
注：浏览器会尽最大的努力去正确的解析页面，你所有的不符合语法规范的内容浏览器会为你自动修正，但是有些请情况会修正错误
内联框架
1、使用内联框架可以引入一个外部的页面
2、使用iframe来创建一个内联框架
属性：
- src：指向一个外部页面的路径，可以使用相对路径
- width：
- height：
- name：可以为内联框架指定一个name属性
3、在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
如：
10.超链接
三种打开方式：
名称 默认在当前页面打开
名称 在空白页打开
名称 在前面定义的内联框架中打开
-->
CSS简介及内部样式表
1、CSS是什么？
层叠样式表（Cascading Style Sheets）
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
而css就可以分别为网页的各个层次设置样式。
表现方式
方式一：内联样式（表现结构耦合）
将CSS样式编写到元素的style属性当中，是名值对
将样式直接编写到style属性中，这种样式我们称为内联样式
内联样式只对当前的元素中的内容起作用
内联样式属于结构与表现耦合，不方便后期维护，不推荐使用
如：
①style是属性
②样式表中每个属性的结束都需要加上一个“；”
③每个样式都满足名值对的格式：名 : 值 ;
方式二：表现结构分离
将CSS样式编写到head中的style标签里
将样式表编写到style标签中，然后通过CSS选择器选中指定元素；然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离，这是推荐使用的方式
如：
<head>
<style type=”text/css”>
P{
color:red;
font-size:40px;
}
style>
head>
外部样式表
还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中，这样外部文件中的css样式表将会应用到当前页面中。
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的css文件
如：
首先在当前路径建立一个css文件：filename.css
然后在head中引入该css文件
而style.css文件中的内容为
<head>
<style type=”text/css”>
p{
color:red;
font-size:30px;
}
style>
head>
CSS语法
1、css的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件
css的语法：
选择器 声明块
- 选择器：
通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上 - 声明块：
声明块紧跟在选择器的后边，使用一对（）括起来
声明块中实际上就是一组一组的名值对结构，这一组一组的名值对我们称为声明
在一个声明块中可以写多个声明，多个声明之间使用；隔开
声明的样式名和样式值之间使用：来连接
内联和块元素
一、块元素
1、div就是一个块元素
所谓的块元素就是会独占一行的的元素，无论他的内容有多少，他都会独占一整行。
如：p、h1、h2、h3…
2、div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的
3、例子：
二、内联元素
1、span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行常见的内联元素：
如：a、img、iframe、span
2、span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
3、例子
我是一段文字三、区别
1、块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
2、一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
3、a元素可以包含任何元素，除了它本身
如：
<a href=”#”>
<div width=”500px”>文字div>
a>
那么整个块元素都可以选中该超链接
4、p元素不可以包含任何块元素，包括其自身也不可以
常用选择器
1、元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{ }
如：为页面上所有p标签设置字体颜色：
p{
color: red;
}
2、id选择器
通过缘故的id属性值选中唯一的一个元素（每个元素的id属性值在当前的页面中是唯一的）
语法：
#p1{
font-size:20px；
}
3、类选择器
通过元素的class属性值选中一组元素
语法：
.class属性值{}
设置class属性：
- 为元素设置class属性：
Class属性和id属性类似，只不过class 属性可以重复
拥有相同class属性值的元素，我们说它们是一组元素
可以同时为一个元素设多个class属性值，多个值之间使用空格隔开
4、选择器分组（并集选择器）
通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器N{ }
5、通配选择器
用来选中页面中所有的元素
语法：*{ }
6、复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{ }
子元素和后代元素选择器
1、元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
2、后代元素选择器
作用： 选中指定元素的指定后代元素
语法： 祖先元素 后代元素{ } ———中间是space
3、子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{ }
IE及以下的浏览器不支持子元素选择器
伪类选择器
1、 ：link
表示普通的链接（没有访问过的链接）
2、 ：visited
表示访问过的链接
注：浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
3、 ：hover
表示鼠标移入的状态
4、 ：active
表示的是超链接被点击的状态
注：：hover和：active也可以为其他的元素设置样式
IE6中，不支持对超链接以外的与元素设置：hover和：active
5、 ：focus
文本获取焦点以后，修改背景颜色为黄色
Input为在页面中显示一个文本框
如：
input：focus{
Background-color：yellow；
}
6、 ：：selection
为p标签中选择中的内容使用样式
注意：这个伪类在火狐中需要采用另一种方式编写：：-moz-selection
如：
/*兼容火狐的*/
p：：-moz-selection{
background-color：颜色；
}
/*兼容大部分的浏览器*/
p：：selection{
background-color：颜色；
}
伪元素选择器
1、使用伪元素来表示元素中的一些特殊的位置
2、 ：first-letter
为p中第一个字符来设置一个特殊的样式
3、 ：fist-line
为p中的第一行设置一个特殊的样式
4、 ：before ：after
：before表示元素最前面的部分
：after表示元素最后面的部分
- 一般before和after斗殴需要结合content这个样式一起使用
通过content可以向before和after的位置添加一些内容
注意：content中的内容在浏览器中并不会被选取
属性选择器 我是一个段落
1、title属性：
为p元素中设置title属性，作为对p元素内容的提示
语法：
title=“内容”
如：
2、为所有具有title属性的p元素，设置一个背景颜色为黄色属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名]选取含有指定属性的元素
[属性名=”属性值”]选取含有指定属性值的元素
[属性名^=”属性值”]选取属性值以指定内容开头的元素
[属性名$=“属性值”]选取属性值以指定内容结尾的元素
[属性名*=“属性值”]选取属性值以包含指定内容的元素
子元素的伪类
1、 ：first-child 可以选中第一个子元素
如：p：first-child 即选中作为第一个子元素的p标签（结合了复合选择器）
2、 ：last-child 可以选中最后一个子元素
注意：当进行标签的嵌套时如：
<body>
<p>第一段p>
<p>第二段p>
<div><p>嵌套的第三段p>div>
body>
那么div是body的子标签，但是div标签中的p标签不是body的子标签，它是body标签的后代标签
3、 ：nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素；如： ：nth-child（n）选取第n个元素
选择器的参数的设置：
even表示偶数位置的子元素
odd 表示奇数位置的子元素
4、 ：first-of-type
：last-of-type
：nth-of-type
以上的伪类选择器和：first-child这些非常的类似，只不过child是在所有的子元素中排列；而type，是在当前类型的子元素中排列
如：
<body>
<span>我是spanspan>
<p>第一段p>
<p>第二段p>
<p>第三段p>
<div><p>嵌套的第四段p>div>
<p>第五段p>
<span>我是最后一个spanspan>
body>
当选择器为：p：first-of-type时，选取的是第一段的p
当选择器为：p：fist-child时，并不会选取第一段的p
兄弟元素选择器
1、后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
注意：当该两个元素不是紧挨着时，则不会选中该兄弟元素
2、选中后边所有的兄弟元素
语法：前一个~后边所有
注：后边所有的意思是，当该位置写的是兄弟元素的名称时，后边所有该标签的兄弟元素都会被选中
否定伪类
作用：可以从已选择中的元素中剔除某些元素
语法：
：not（选择器）
如：在所有的p元素中剔除class值为hello的元素
p：not（.hello）{样式表}
样式的继承
1、像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
2、利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
3、但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式、边框相关的样式、定位相关的样式都不会被继承
注：在没设置背景的情况下，背景是透明的
选择器的优先级
1、当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
2、优先级的规则
| 选择器 | 优先级 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类（class）和伪类 | 10 |
| 元素选择器 | 1 |
| 通配* | 0 |
| 继承的样式 | 没有优先级 |
3、当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较
但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样则使用靠后的样式。
4、并集选择器的优先级是单独计算
5、可以在样式的最后，添加一个！important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用！important
如：
·p1{
color:yellow;
background-color:greenyellow !important;
}
伪类的顺序
a元素（超链接）的伪类的顺序
1、涉及到a的伪类一共有四个：
：link ：visited ：hover ：active
2、这四个伪类的选择器的优先级的顺序是一样
但是在编写时为了能够得到预期的效果，就必须有一个顺序，就是上方的顺序
3、其中，当：hover和：active的顺序颠倒时，将会产生，一直都是：active伪类的效果
4、：link和：visited伪类必须在：hover和：active之前，否则将会一直显示：link和：visited的效果
文本标签及样式
一、两个强调标签
em 和 strong
1、这两个标签都表示一个强调的内容
2、em主要表示预期上的于低调，em在浏览器中默认使用斜体显示
3、strong表示强调的内容，比em更强烈，默认使用粗体显示
二、其他标签
1、i标签和b标签
i 标签中的内容会以斜体显示
b标签中的内容会以加租显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签
2、small标签
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small
3、cite标签——引用标签
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
比如：书名歌名话剧名电影名。。。
例如：
<p>
<cite>《论语》cite>
p>
在网页中显示的格式为：《论语》
4、q标签
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
例如：
<p>
子曰：<q>学而时习之不亦说乎！q>
p>
在网页中显示的内容为：子曰：“学而时习之不亦说乎！”
5、上下标标签
使用sup标签来设置一个上标
使用sub标签来表示一个下标
6、del标签
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
如：店铺中的原价和现价的表示
7、ins标签
Ins标签表示一个插入人的内容
Ins标签中的内容，会自动添加下划线
8、pre和code标签
需要的情况为：在页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code是一个语义标签，专门用来表示代码
我们一般结合使用pre和code来表示一段代码
如
<pre>
<code>
其中是一些代码
code>
pre>
code的作用是表示该标签中的内容是一段代码，而pre的作用是将该段内容原格式体现在网页中
无序列表和有序列表
一、列表
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
（一）无序列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
| 属性值 | 效果 |
|---|---|
| disc | 默认值，实心的圆点 |
| square | 实心的方块 |
| circle | 空心的圆 |
注意：
1、默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用li设置背景图片的方式来设置
2、ul和li都是块元素
如：
<ul>
<li>元素一li>
<li>元素二li>
ul>
在浏览器中显示的内容为：
·元素一
·元素二
（二）有序列表
1、有序列表和无序列表类似，只不过它使用ol来代替ul
2、有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
3、ol也是块元素
4、可以设置有序列表的倒序排列
<ol type=”reversed”>
<li>最后一个li>
<li>第一个li>
ol>
（三）定义列表
1、定义列表用来对一些词汇或内容进行定义
2、使用dl来创建一个定义列表
3、dl中有两个子标签
dt：被定义的内容
dd：对定义内容的描述
4、dl中可以有多个dt，每个dt可以对应多个dd
（四）嵌套
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表。
同样dl和ul和ol之间都可以互相嵌套
长度单位
1、像素px
像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的但是这些像素点，是不能直接看见。
不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
2、百分比%
也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值
使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
在我们创建一个自适应的页面时，经常使用百分比作为单位
3、em
em和百分比类似，它是相对于当前元素的字体大小来计算的
1em=1font-size
使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关的样式时，经常会使用em
RGB值
颜色单位：
1、在CSS可以直接使用颜色的单词来表示不同的颜色红色：
red蓝色：blue绿色：green
2、可以使用RGB值来表示不同的颜色
所谓的RGB值指的是通过Red Green Blue三原色，通过这三种颜色的不同的浓度，来表示出不同的颜色
语法：rgb（红色的浓度，绿色的浓度，蓝色的浓度）；
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255之间的数
0%表示0
100%表示255
3、也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色。
每组表示一个颜色：
第一组表示红色的浓度，范围00-ff
第二组表示绿色的浓度，范围是00-ff
第三组表示蓝色的浓度，范围00-ffl
语法：#红色绿色蓝色
十六进制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00-ff
像这种两位两位重复的颜色，可以简写
比如： #ff0000可以写成#f00
#aabbcc可以简写成#abc
字体
一、字体样式
1、设置字体颜色，使用color来设置文字的颜色
2、设置文字的大小，使用font-size
浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小
在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同
3、通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体该样式
可以同时指定多个字体，多个字体之间使用，分开当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有再尝试下一个
浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。
4、font-style可以用来设置文字的斜体
可选值：
| 属性 | 效果 |
|---|---|
| normal | 默认值，文字正常显示 |
| italic | 文字会以斜体显示 |
| oblique | 文字会以倾斜的效果显示 |
大部分浏览器都不会对倾斜和斜体做区分，即我们设置italic和oblique它们的效果往往是一样的
一般我们只会使用italic
5、font-weight可以用来设置文本的加粗效果：
可选值：
normal，默认值，文字正常显示
bold，文字加粗显示
该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
6、font-variant可以用来设置小型大写字母
可选值：
normal，默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大要比大写字母的大写小一些。
7、font样式
使用该样式可以同时设置字体相关的所有样式，可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体加粗小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是在最后一个样式，大小写必须是倒数第二个样式
实际上使用简写属性会有一个较好的性能
注意：在使用font样式时，font中的各种属性值如果不写则会设置为默认值，如果想要实现预期的设置的样式，就应当在font样式下面或者在font中写明。
二、字体分类
1、在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
2、可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
行高
1、在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
2、使用line-height来间接设置行高
3、行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示行
4、行间距=行高-字体大小
5、通过设置line-height可以间接的设置行高，可以接收的值：
| 效果 | 接收值 |
|---|---|
| 直接就收一个大小 | line-height：20px； |
| 可以指定一个百分数，则会相对于字体去计算行高 | line-height：200%； |
| 可以直接传一个数值，则行高会设置字体大小相应的倍数 | line-height：2；（表示2倍的字体像素大小） |
对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中
设置的行高是父辈的行高，子元素继承父辈的行高
7、在font中也可以指定行高
在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
如：
font：30px/50px 微软雅黑；——————————————此时设置的行高为50px
文本样式
返回超链接
1、text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
2、text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline为文本添加下划线
overline为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
3、间距
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离
实际上就是设置词与词之间空格的大小，对中文并没有作用，只对空格起作用
4、text-align用于设置文本的对齐方式
可选值：
left默认值，文本靠左对齐
right，文本靠右对齐
center，文本居中对齐
justify，两端对齐
通过调整文本之间的空格的大小，来达到一个两端对齐的目的
5、text-indent用来设置首行缩进
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
- 通过这种方式可以将一些不想显示的文字隐藏起来
通常使用em（表示一个字符的大小）为单位进行缩进
盒子模型
一、盒子模型简介
1、CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
2、为什么要想象成盒子呢？
因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
3、我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
4、一个盒子我们会分成几个部分：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
二、边框
在大部分的浏览器中，边框的宽度和颜色都是有默认值，而边宽的样式默认值都是none
1、使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
使用background-color设置内容区的背景颜色
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
2、为元素设置边框
要为一个元素设置边框必须指定三个样式，缺一不可
border-width：边框的宽度
border-color：边框颜色
border-style：边框的样式
3、设置边框的宽度
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置
如果指定三个值，则三个值会分别设置给上左右下
如果指定两个值，则两个值会分别设置给上下左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width xxx的值：top right bottom left专门用来设置指定边的宽度
4、设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色border-xxx-color
5、设置边框的样式
可选值：
none，默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double双线
- style也可以分别指定四个边的边框样式，规则和width一致
同时它也提供border-xxx-style四个样式，来分别设置四个边
三、边框简写属性
1、border
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定，四个边不能分别指定
2、boder-xxx
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
方法总结：先设置border，四条边具有相同的属性，再在下面设置一种特殊的边的样式boder-xxx，可以为boder-xxx：none
四、内边距
1、内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top padding-right padding-bottom padding-lef
来设置四个方向的内边距
2、内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
3、盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度= border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度=border-top-width+ padding-top + height + padding-bottom + border-bottom-width
4、使用padding可以同时设置四个边框的样式，规则和border-width一致
五、外边距
1、外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置
2、盒子有四个方向的外边距：
margin-top margin-right margin-bottom margin-left
3、由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置
4、外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
5、 margin还可以设置为auto，auto一般只设置给水平方向的margin如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
- 垂直方向的外边距如果设置为auto，则外边距默认就是0
6、如果将margin-left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
7、外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样
当设置margin为：margin：0 auto； 时，将会在父元素中居中显示
盒子模型-垂直外边距的重叠
1、垂直外边距的重叠
在网页中相邻的匪直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
2、解决子元素的外边框与父元素外边框重叠时为，子元素设置一个上外边距，使子元素的位置下移：
将父子元素的外边距隔开：
为父元素设置一个上边框
为父元素设置一个内边距
浏览器默认样式
1、 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
2、使用通配选择器清楚浏览器的默认样式
内联元素的盒模型
内联元素：超链接a，span，p
内容区：
1、内联元素不能设置width和height
内边距padding：
2、内联元素可以设置水平方向的内边距
3、内联元素可以设置垂直方向内边距，但是不会影响页面的布局
4、内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
外边距margin：
5、内联元素支持水平方向的外边距
水平方向的外边距不会重叠，而是求和
6、内联元素不支持垂直外边距
Display和visibility——变内联为块
一、display
作用：将内联元素变为块元素
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none：不显示元素，并且元素不会在页面中继续占有位置
二、visibility
可以用来设置元素的隐藏和显示的状态
可选值：
visible默认值，元素默认会在页面显示
hidden元素会隐藏不显示
使用visibility：hidden；隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持。
溢出Overflow
1、 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。
超出父元素的内容，我们称为溢出的内容
2、父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：
| 可选值 | 效果 |
|---|---|
| visible | 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示 |
| hidden | 溢出的内容，会被修剪，不会显示 |
| scroll | 会为父元素添加滚动条，通过拖动滚动条来查看完整内容；该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条 |
| auto | 会根据需求自动添加滚动条 |
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
文档流
文档即一个HTML文件
元素在文档流中的特点
1、块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
2、内联元素
内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
在文档流中，内联元素的宽度和高度默认都被内容撑开
3、当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距（高度是被其内容撑开）
浮动float
1、块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
2、如果希望块元素在页面中水平排列，可以使块元素脱离文档流使用float来使元素浮动，从而脱离文档流可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
3、 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流
元素脱离文档流以后，它下边的元素会立即向上移动元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框，或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
注意：
.box1{
inline-block;
width: 200px; height: 200px; background-color: #bfa;
}
<div class:”box1”>div>
<div class:”box1”>div>
此时，两个div块元素相当于两个汉字，中间的换行在网页中相当于一个空格，所以在网页中显示时，中间会有一条线
4、当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开
5、内联元素脱离文档流以后会变成块元素
6、浮动的元素不会盖住文字，文字会自动环绕在浮动的元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
高度塌陷问题及解决方案
一、高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开，也就是子元素有多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会当值子元素无法撑起父元素的高度，导致父元素高度塌陷
由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免高度塌陷的问题
我们可以将父元素的高度写死，以避免塌陷的问题出现
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
二、解决方案
1、根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context（块格式化上下文）
简称BFC，该属性可以设置打开或者关闭，默认是关闭的
2、当开启元素的BFC后，元素将会具有如下的特征：
1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素
3、如何开启元素的BFC
- 设置元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下面的元素上移，不能解决问题 - 设置元素绝对定位
- 设置inline-block
可以解决问题，但是会导致父元素的宽度丢失，不推荐使用这种方式 - 将匀速的overflow设置为一个visibility的值
4、推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
5、但是在IE6及以下的浏览器中不支持BFC，所以使用这种方式不能兼容IE6
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做haslayout，该属性的作用和BFC类似，所以IE6浏览器可通过开启hasLayout来解决该问题
直接将元素的zoom设置 为1即可
- Zoom表示放大的意思，后边跟着一个数值，表示元素放大的倍数
Zoom：1表示不放大元素，但是通过该样式可以开启hasLayout
注：在IE6中，如果为元素制定一个宽度，则会默认开启haslayout
导航条
设置一个无序列表–>设置列表中的每个项目（li本身为块元素）–>设置超链接的样式–>设置伪类（超链接的）
设置无序列表：
去除项目符号，设置宽度，设置背景颜色，改背景颜色为超链接伪类：link的颜色
为后面的设置li元素浮动解决高度塌陷问题（这个地方不是很懂）
设置列表中的项目：
设置每个项目都为浮动的块元素，然后设置每个项目的宽度
设置超链接的样式：其中包含设置字体的样式
首先设置超链接为块元素display，效果为区域范围为超链接的选区范围，然后设置块元素超链接的宽度
设置超链接的字体颜色，下划线为无（下滑线的格式为文本样式的内容，text-decoration），设置字体加粗
清除浮动clear——解决高度塌陷的最终方案
1、 由于受到上方块元素浮动的影响，下方块元素整体向上移动了上方块元素的高度
我们有时希望清除其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
2、Clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素
3、解决高度塌陷的方案二：
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后对其清楚浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
例如：
<div class=”box1”>
<div class=”box2”>子元素div>
<div class=”clear”>清楚高度塌陷的元素div>
div>
为clear设置清除浮动的样式：
.clear{
clear: both；}
4、解决高度塌陷问题方案三：
通过after伪类：
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清楚浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会再页面中添加多于的div，这是最推荐使用的方式，几乎没有副作用。
即：使用伪类可以给元素添加一个空的块元素。
如：
.clearfix：after{
content：””；
clear：both；
}
5、clearfix最终版本
功能：清除高度塌陷、解决父子元素的垂直外边距不重叠
对块元素设置class值为clearfix，然后对clearfix的after和before伪类进行编辑
.clearfix：before，.clearfix：after{
content：””；
display： table；
clear：both；
}
例如：
（在上面的html的基础上，对div.clear进行伪类的CSS编辑）
.clearfix：after{
/*添加空白内容*/
content：“”；/*双引号不能少*/
/*转换为一个块元素*/
display：block；
/*清除两侧的浮动*/
clear：both；
}
5、注：
在IE6中不支持after伪类，所以在IE6中还需要使用haslayout来处理
即：
.clearfix{
zoom：1；
}
开班信息
代码：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font: 12px/1 宋体;
}
.outer{
width: 300px;
margin: 50px auto;
}
.title{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
/*让文字垂直居中:将行高设置为父元素的高度*/
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
/*设置h3的行高以使文字居中*/
font: 14px/36px "微软雅黑";
}
.content{
border: 2px solid #deddd9;
padding: 0px 28px 0px 22px;
}
.content h3{
margin: 14px 0 16px 0;
}
.content a{
text-decoration: none;
color: black;
}
.content a:hover{
color: red;
}
.content ul{
list-style: none;
}
.content li{
margin-bottom: 15px;
}
.content .underboder{
border-bottom: dashed 1px #deddd9;
}
.content .red{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
style>
head>
<body>
<div class="outer">
<div class="title">
<a href="#">16年面授开班计划a>
<h3>近期开班h3>
div>
<div class="content">
<h3><a href="#">JavaEE+云计算-全程就业班a>h3>
<ul class="underboder">
<li>
<a href="#" class="right"><span class="red">预约报名<span>a>
<a href="#">开班时间：<span class="red">2016-04-27<span>a>
li>
<li>
<a href="#" class="right"><span class="red">无座，名额爆满<span>a>
<a href="#">开班时间：<span class="red">2016-04-07<span>a>
li>
<li>
<a href="#" class="right">开班盛况a>
<a href="#">开班时间：2016-04-10a>
li>
<li>
<a href="#" class="right">开班盛况a>
<a href="#">开班时间：2016-04-27a>
li>
<li>
<a href="#" class="right">开班盛况a>
<a href="#">开班时间：2016-04-27a>
li>
ul>
div>
div>
body>
html>
定位
注：
设置box2的margin-top的大小是根据box1的位置设置的
设置margin-top的负值的效果是将该块元素向上移动
定位：
定位指的就是将制定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
| 可选值 | 效果 |
|---|---|
| static | 默认值，元素没有开启定位； |
| relative | 开启元素的相对定位 |
| absolute | 开启元素的绝对定位 |
| fixed | 开启元素的固定位置（也是绝对定位的一种） |
一、相对定位
1、当元素的position属性设置为relative时，则开启元素的相对定位
当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级：相对定位的元素会覆盖文档流中原来位置上的元素
相对定位不会改变元素的性质，块还是块，内联还是内联
position：relative；
2、当开启了元素的定位（position属性值是一个给static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
如：
left：100px； 相对于原来的位置向右偏移100px；
二、绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位
1.开启绝对定位，会使元素脱离文档流（即相对的位置变化了）
2.开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位（一般情况下，开启子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质：
- 内联元素变成块元素
块元素的高度和宽度默认都被内容撑开
三、固定定位
当元素的position属性设置为fixed时，则开启了元素的固定定位
1.固定定位也是一种绝对定位，它的大部分的特点都和绝对定位一样
2.不同点：
固定定位永远都相对于浏览器的窗口进行定位
固定定位会固定在浏览器的固定位置，不会随着滚动条滚动
IE6不支持固定定位
四、层级
1、同时开启绝对定定位的元素，在提升一个层级的基础上，因为定位元素的层级是一样的，下边的元素会盖住上边的元素（上和下指的是结构上的）
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
父元素的层级再搞，也不会盖住子元素
注意：对于没有开启定位的元素不能使用z-index
五、设置元素的透明背景
1、opacity可以用来设置元素背景的透明，他需要一个0~1之间的值
0表示完全透明
1表示不透明
0.5表示半透明
2、opacity属性在IE8及以下浏览器中不支持
3、IE8及以下的浏览器需要使用如下属性代替
alpha（opacity=透明度）
透明度需要一个0-100之间的值来表示：
0表示完全透明
100表示不透明
50表示半透明
如：
filter：alpha（opacity=50） 表示半透明
注：这种方式支持IE6，但是这种效果在IE Tester中无法测试
背景
1、使用background-image来设置背景图片
语法：background-image：url（相对路径）
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，背景颜色将会作为背景图片的底色
一般情况下，设置背景图片时都会指定一个背景颜色
如：background-image：url（img/2.jpg）
注意：相对路径写在哪就相对于哪个文件夹
如：
在html相同文件夹下，创建一个css文件，则引用该文件夹中image文件夹中的1.jpg应使用以下命令：
background-image：url（…/img/1.jpg）
引用CSS文件使用：
2、background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
3、background-position设置背景图片开始的位置
由于背景图片默认是贴着元素的左上角显示，所以使用background-position来设置图片的位置
可选值：
该属性可以使用top right left bottom center中的两个值来指定一个背景图片的位置
如果只写一个，则第二个默认为center
如：top left 左上
4、也可以在background-position的基础上直接指定两个偏移量：xpos ypos
第一个值是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
第二个值是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个负值，则图片会向上移动指定的像素
如：background-position：100px 100px
5、background-attachment用来设置图片是都随着页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在窗口的某一位置，不随着页面滚动
注：不随着窗口滚动的图片，我们一般都设置给body，而不设置给其他的元素
因为当设置给其他的元素时，该图片会一直相对于当前的浏览器窗口进行定位，默认会出现在当前浏览器窗口的左上角，并且在滚动滚动条的过程中，图片不会随着当前的元素的滚动而滚动，但是当当前元素消失在浏览器的窗口中的时候，图片会随着元素的消失而消失。
6、补充
当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口
首先设置一个背景图片，然后设置背景图片的位置定位：background-position：center； 将背景图片设置在当前元素的居中位置。再设置图片的窗口滚动属性：background-attachment：fixed； 将背景图片固定在当前浏览区窗口的居中的位置。
效果：当该页面中的内容较多时，滚动滚动条会使背景一直保持在当前页面的居中位置不发生变化。
7、简写属性
background 该属性可以同时设置所有背景相关的样式
没有顺序要求
没有数量的要求，不写的样式使用默认值
如：background：# bfa url(img/3. png) center center no-repeat fixed;
按钮练习
1、问题的表现：
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。
2、产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求。但是我们外部资源并不是同时加载，浏览器会在使用时才会去加载资源。
我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的。
当hover被触发时，浏览器才去加载hover.png。
当active被触发时，浏览器才去加载active.png。
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况。
3、 问题的解决：
可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了。
然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
4、优点：
1将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2将多个图片整合为一张图片，减小了图育的总大小，提高请求的速度，增加了用户体验。
表格
一、表格HTML
1、在HTML中，使用table标签来创建一个表格
tr·在table标签中使用tr来表示表格中的一行，有几行就有几个tr
td·在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
在td中
colspan横向合并单元格
rowspan纵向合并单元格
th·th为table的表头，是一种特殊的td，具有加粗和居中的效果
如：
<table border="1" width="40%" align="center">
<tr>
<th>A1th>
<th>A2th>
<th>A3th>
<th>A4th>
tr>
<tr>
<td>B1td>
<td>B2td>
<td>B3td>
<td rowspan="2">B4td>
tr>
<tr>
<td>C1td>
<td>C2td>
<td>C3td>
tr>
<tr>
<td>D1td>
<td>D2td>
<td colspan="2">D3td>
tr>
table>
二、表格CSS
（一）Table标签
1、width设置表格的宽度
2、border设置表格的外边框
border：1px solid black；
3、table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing：0px；
4、border-collapse可以用来设置表格的边框合并
border-collapse：collapse；
如果设置了边框合并，则border-spacing自动失效
（二）Td标签
1、border设置单元格的外边框
border：1px solid black；
（三）效果
1、设置表格边框宽度
边框为双边框
当不设置border-collapse，设置border-spacing为0px时，表格的内部宽度为table的边框加上td边框的宽度。
每个单元格之间的间距为：border-spacing：？；所设置的值。
边框为单边框
当设置了border-collapse：collapse时，即设置了边框合并，最终得到的表格边框宽度为table边框的宽度
2、隔行变色效果
对tr进行设置，通过nth-child伪类选择奇数（odd）或者偶数（even）
tr：nth-child（odd）{
background-color：#bfa；
}
效果表现为：奇数行的颜色均为#bfa；
3、移入变色
对tr使用hover伪类进行设置鼠标移入时单元格所在行的颜色
tr：hover{
background-color：#ff0；
}
三、长表格
1、在某些情况下表格是非常长的，这是我们需要将表格分为三个部分：表头、表格主体、表格底部
2、在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就是用来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签中
3、三个标签所在的位置
thead中的内容，永远会显示在表格的头部
tbody中的内容，永远会显示在表格的中间
tfoot 中的内容，永远会显示在表格的底部
4、如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素。通过table > tr无法选中行，需要通过tbody > tr
表单简介
1、表单的作用是将用户的信息提交给服务器的
2、使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时，将会提交到action属性对应的地址
如：
3、表单项
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还需要给表单项指定一个那么属性，那么表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
形式为url地址？查询字符串
格式：属性名=属性值（&属性名=属性值）
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
密码框
使用input创建一个密码框，它的type属性值是password
为确保能够将表单中数据提交到服务器中，应添加name属性值
提交按钮
提交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮，它的type属性值是submit
在提交按钮中可以通过value属性值来修改指定按钮上的文字
如：
<form aaction=”服务器地址”>
用户名<input type=”text” name=”username”/> 创建一个文本框，文本框内填写的内容为文本
密码<input type="password" name="Password" /> 创建一个文本框，文本框内填写的内容为密码
<input type=”submit” value=”提交”/> 创建一个提交按钮
form>
表单项
（一）单选按钮
使用input来创建一个单选按钮，它的type属性使用radio（表示单选）
单选按钮通过name属性进行分组，name属性相同是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如：性别
男
女
（二）多选框
使用input创建一个多选框，他的type属性使用checkbox
多选框通过name属性进行分组，name属性相同是一组按钮
每个多选框需要指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
（三）下拉列表
使用select来创建一个下拉列表
在下拉列表中使用option标签来来创建一个一个列表项
下拉列表的name属性需要指定给select，而value属性需要指定给option
当为select添加一个multiple=”multiple”，则下拉列表变为一个多选的下拉列表
分组
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
如：
你喜欢的人
<select name=”star” >
<optgroup label=”女明星”>
<option value=”范冰冰”>范冰冰option>
optgroup>
<optgroup label=”男明星”>
<option value=”赵本山”>赵本山option>
optgroup>
select>
（四）文本域
使用textarea创建一个文本域
使用name属性进行制定文本域的名称
对textarea进行样式修改使用CSS
（五）重置按钮
使用input创建一个按钮， type属性使用reset，创建一个重置按钮
点击重置按钮以后表单中内容将会恢复为默认值
（六）纯按钮
-使用input type=”button”创建一个单纯的按钮，这个按钮没有任何功能，只能被点击
- 可以通过JS来对按钮进行功能的填充
（七）其他属性
（1）默认选中
如果希望在单选按钮或多选框中指定默认选中的选项，则可以在希望选中的项中添加checked=“checked”属性
可以通过在option中添加selected=“selected”来将选项设置为默认选中
（2）其他按钮选项
除了使用input，还可以使用button按钮结合type属性来创建按钮
这种方式和使用input类似，但是由于它是成对出现的标签，使用起来更加灵活
如：
（3）label标签
在HTML中还为我们提供了一个标签，专门用来选中表单中的提示文字
该标签可以指定一个for属性，该属性的值需要指定一个表单项中的id值
如：
（4）表单分组
在表单中可以使用filedset来为表单项进行分组，可以将表单项中的同一组梵高一个filedset中
在filedset中可以使用legend子标签来指定组名
如：
<filedset>
<legend>组名legend>
filedset>
框架集
框架集和内联框架的作用相似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要 使用框架集，页面中就不可以使用body标签
1、 frame标签
在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame
2、属性
rows，指定框架集中的所有的页面，一行一行的排列
cols，指定框架集中的所有的页面，一列一列的排列
- 这两个属性frameset必须选择一个，并且需要在属性中指定每一部分的大小
frameset中也可以再嵌套frameset
在frameset中使用frame子标签来指定要引入的页面，引入几个就写几个frame
3、不使用原因
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能进去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果要使用框架，推荐使用frameset，而不使用iframe
IE6png的修复
在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰度会有所下降
使用JavaScript来解决问题，需要向页面中引入一个外部的JavaScript文件，然后再写一个简单的JS代码，来处理该问题
在body标签的最后引入外部的JS文件
引入JS文件的代码为：
在body标签的最后引入外部的JS文件
再创建一个新的script标签，并且编写一些js代码
<script type=”text/javascript”>
DD_belatedPNG.fix(“dic”);
script>
条件hack
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问。
CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
条件hack只对IE浏览器有效，其他的浏览器都会将它识别为注释
IE10及以上的浏览器已经不支持这种方式
- 格式：
`
代码块如：
Keywords：
是否 空
大于 gt
大于或等于 gte
小于 it
小于或等于 ite
非指定版本 ！
如：
属性级hack
语法：selector{? property : value ?；}
取值：
- “_”在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
如_backgroundcolor：red； - 添加了*的样式只有IE7及以下的浏览器才可以识别
如·backgroundcolor：red； - 在样式最后添加一个\0，则只有在IE8及以上的浏览器才能识别
如_backgroundcolor：red\0； - 在选择器前添加* html 则该选择器只有IE6可以识别
注：CSS Hack不到万不得已的时候尽量不要使用
Hack的样式有很多，可以上网搜索
项目创建时注意事项
一、前提设置
1、创建一个项目要有一个属于该项目的文件夹，其中存放CSS IMG JS 和html文件
2、使用外联式样式表，结构样式分离
3、使用专属的样式格式化的文件进行格式化页面的设置
二、命名规范
1、主要针对id class和文件
2、命名规范
命名时尽量使用英文，如果不会可以使用拼音，但是不要英文和拼音混用
3、命名格式
①驼峰命名法：首个单词小写，后面每个单词的首字母大写
②所有的字母都小写，单词之间使用_或-连接
三、注意事项
1、 设置header的外边距会导致外边距的重叠，应该设置div的上内边距
如果也设置下内边距将会为下面的div创造一个外边距
2、 在Chrome浏览器中字体最小支持到12个像素
3、 内边距是作为一个块元素的内容的，如果要设置块元素的固定宽度，在设置内边距的同时要算将内边距的大小从块元素的大小中减去