CSS介绍
我们为什么需要CSS?
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。
CSS的出现解决了下面两个问题：
- 将HTML页面的内容与样式分离。
- 提高web开发的工作效率。
什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
css的优势
1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
如何使用CSS？
我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。
CSS语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>这个标题设置的大小为 36 pt</h1> <h2>这个标题设置的颜色为蓝色：blue</h2> <p>这个段落的左外边距为 50 像素：50px</p> </body> </html> 实例一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程2</title> <style> body {background-color:tan;} h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;} </style> </head> <body> <h1>这是标题</h1> <hr> <p>你可以看到这个段落是 被设定的 CSS 渲染的。</p> <p><a href="http://www.runoob.com" target="_blank">这是一个链接</a></p> </body> </html> 实例二
CSS实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
形式如下：
h1（选择器）{
color:red; 声明
font-size:14px
}
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
p{ color:black; text-align-center }
为了让CSS可读性更强，你可以每行只描述一个属性:
p{
color:black;
text-align:center
}
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
CSS id 和 Class
id和class选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1
{
text-align:center;
color:red;
}
提示：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素中包含类名"center" ，让该元素的文本居中:
p.center {text-align:center;}
提示：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
标签选择器
<style>
h1{
text-align:center:
color:green
}
</style>
高级选择器
后代选择器
因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：
div p {
color: red;
}
<div>
<p>儿子类</p> <!--变红色-->
<table border="1">
<tr>
<td>
后代类 <!--变色-->
</td>
</tr>
</table>
</div>
从div的所有后代中找p标签，设置字体颜色为红色。
儿子选择器
div>p {
color: red;
}
<div>
<p>儿子类</p> <!--变红-->
<table border="1">
<tr>
<td>
<p>后代类</p> <!--不变色-->
</td>
</tr>
</table>
</div>
从div的直接子元素中找到p标签，设置字体颜色为红色。
引用CSS样式的方法
1、内联样式
2、行内样式
3、外部样式
3.1、链接式
3.2、导入式
1、内联样式
style标签
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html
2、行内样式
<!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">这是一个p标签！</p> </body> </html>
3、外部样式——链接式
link标签
建一个index.css的文件如下：
p{
color:rad;
}
然后在HTML文件中通过标签引入：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
外联样式表-@import url()方式 导入式
index.css
@import url(other.css)
注意：@import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
CSS分组和嵌套选择器
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：
h1,h2,p
{
color:green;
}
伪类选择器
常用的有四种伪类选择器。
1、没有被访问过的超链接a标签样式（未被点击的时候）
a:link{
color:blue;
}
2、访问过的超链接a标签样式（点击过）
a:visited{
color:yellow;
}
3、用户鼠标停留在上面的样式
a:hover{
color:purpoe;
}
4、鼠标点击瞬间的样式
a:active{
color:red;
}
同样适用于其他的文本
伪元素选择器
first-letter
p:first-letter{
font-size:30px;
}
(将p标签的文本内容首个字进行修改)
before
用于在元素的内容前面插入新内容。
p:before{
content: "插入内容";
color: red;
}
（和first-letter一起的时候，是先插入内容，再改变首字符的样式）
after
用于在元素的内容后面插入新内容。
p:after{
content: "插入内容";
color: red;
}
选择器的优先级
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
行内样式 > id选择器 > 类选择器 > 元素选择器
还有一种方式为 ！important可以吧选择器的优先级加到最大。但不推荐使用，不易于维护。
字体相关CSS属性介绍
font-family
字体系列。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
如果设置成inherit，则表示继承父元素的字体。
font-weight
字重（字体粗细）。
取值范围：
normal 默认值，标准粗细
bord 粗体
border 更粗
lighter 更粗
100~900 设置具体粗细，400等于默认值
inherit 继承父类元素字体粗细
font-size
字体大小。
p{
font-size:14px;
}
如果设置成inherit表示继承父元素的字体大小值。
color
设置内容的字体颜色。
支持三种颜色值：
1、十六进制值 如: ＃FF0000
2、一个RGB值 如: RGB(255,0,0)
3、颜色的名称 如: red
p{
color:red;
}
文本属性
text-align
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
left 水平居左
right 水平居右
center 水平居中
justify 两端对齐
line-height
设置为行高，单行文本垂直方向居中
多行文本居中：使用padding-top：num px #num = （盒子高度 - 字体行高*行数）/ 2
text-decoration
文字装饰。
none 默认，定义标准文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性的值
背景属性
常用背景相关属性：
background-color 规定要使用的背景颜色。
background-image 规定要使用的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 规定背景图像的位置。
inherit 规定应该从父元素继承background属性的设置。
background-repeat取值范围：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat属性的设置。
background-attachment取值范围：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承background-attachment属性的设置。
background-position取值范围：
top left 左上角
top center 上中
top right 右上
left 居左
center 居中
right 居右
bottom left 左下
bottom center 中下
bottom right 右下
x%y% 百分比
css盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）。
元素的宽度和高度
当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加填充，边框和边距。.
div {
300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
元素的总宽度=300px + 25px*2 + 25px*2 +25px*2 = 450px
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
css边框属性
border
常用方法 border: 1px solid red #边框宽度为1px,样式为solid,颜色为red
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-radius 设置边框的圆角：
border-radius : 5px:
也可以四个角分别设置 ： border-redius: 3px 3px 5px 5px;
设置为50%会变成圆形 ： border-radius: 50%;
边框宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
p.one
{
border-style:solid;
border-5px;
}
p.two
{
border-style:solid;
border-medium;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
边框-单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
border-radius：5px（设置边框圆角）
}
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
border-width
border-style (required)
border-color
padding(内边距)
通过父类盒子的padding属性可以调节子类盒子在其内的移动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: #ff6700; } .box2{ width: 100px; height: 100px; background-color: black; margin-left: 10px; margin-top: 20px; } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
上面的代码里，当子盒子box2对margin进行设置时，发现在左边子盒子是相对父盒子进行移动的，但是在垂直方向上却是一起进行向下移动，
这是因为父盒子没有设置border，在垂直方向上就会向上找边框，以其为准一起向下移动。
这是就需要设置父类padding。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: #ff6700; padding-top: 20px; padding-left: 10px; } .box2{ width: 100px; height: 100px; background-color: black; /*margin-left: 10px;*/ /*margin-top: 20px;*/ } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
#一些标签在我们使用的时候会有默认的padding、margin
如果使用 *{padding: 0 ; margin: 0 ;} 进行设置效率不高，所以我们要使用并集选择器来选中页面中应有的标签：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
标准文档流概念
在进行web页面设计的时候，不同于ps等设计软件，web网页制作是以“流”的方式，从上而下，一个个紧紧相随的，
而设计软件可以再其内随意的地方进行设计。
标准文档流的微观现象：
1、空白折叠现象
2、高矮不齐，底边对齐
3、自动换行
在标准文档流内会将多个一连串空格全部默认折叠成一个空格；当文字之间在同一行中大小高低不同时，底边依然是对齐的；
在一行内显示不了所有内容时，会进行自动换行。
块级元素与行内元素之间的转换
通过display属性设置，可将块级元素、行内元素进行转换。
display:lnine-block; #将块级元素转化成行内块元素（转化后依旧可以设置宽高，只是不会独占一行了）
display:block; #将行内元素转化成块状元素（转化后可以设置宽高，且独占一行）
display：none; #隐藏当前标签，不占位置
visibility：hidden #隐藏当前标签，占位置
标签的浮动
元素设置了浮动之后就不区分块级、行内元素了，都能设置宽高。
浮动的四个特性：
1、浮动的元素脱标
2、浮动元素相互贴着
3、浮动的元素有“字围”效果
4、收缩的效果
设置浮动属性的元素脱离了标准文档流，所以说不占位置，层级提高，会有遮盖效果。
在同一个方向浮动的元素，后一个元素会紧挨着前一个元素的后面，如果一行的宽度不够的话，则会自动换行。
浮动元素不会遮盖没有浮动元素中的文字，未浮动元素中的文字会自动给浮动元素让出位置
浮动元素如果没有宽高，那么会自动收缩为文字的宽度，与行内元素类似。
清除浮动带来的影响
由于浮动元素是脱标的，会带来遮盖标准文档流的现象。
清除浮动影响有四种方法：
1、给浮动元素的父盒子设置宽高，一般父盒子是不设置宽高的，避免下次子元素改动时，父盒子也要进行改动宽高。
2、使用clear:both 清除浮动影响，在浮动元素的后面加上一个空的<div>盒子，设置clear:both，将后面标准流文档的元素隔开。
3、使用伪元素after,在浮动元素的父盒子中使用 clearsix:after{
centent:"";
0;
height:0:
display:block;
clear:both
visibility:hidden
}
4、在浮动元素的父元素里设置overflow: hiddin
margin垂直方向的塌陷问题
两个没有浮动的额盒子在垂直方向设置margin的值时，如果处于上端盒子设置的margin-bottom的值，下端的盒子设置margin-top值，会造成margin在
垂直方向不会叠加而是会以距离大的一方为标准。浮动元素之间垂直方向margin不塌陷。
margin: 0 auto;可以将没有浮动的盒子进行水平居中
相对定位、绝对定位、固定定位
相对定位（position：relative）：设置相对定位，盒子是以自身原来的位置作为参考点的，设置了相对定位之后盒子可以以参考点进行top、right、botom、left方向的移动。
如果没有设置移动的话，则和标准流下的盒子没有区别。
相对定位的特性：
1、不脱离标准文档流
盒子设置了相对定位之后，依旧是属于标准文档流内，会占据位置。
2、形影分离
设置相对定位后进行移动，最初在文档流中占据的位置依然占据着，移动时盒子是有遮盖效果的
一般用于元素位子的微调，以及作为绝对定位的参考点。
绝对定位
position：absolute
绝对定位的特点：
1、脱离标准文档流
2、会产生遮盖效果
3、设置了绝对定位之后不区分行内和块状元素，都能设置宽高
绝对定位的参考点：
1、当使用了top属性描述的时候，是以页面的左上角（和浏览器的左上角区分）为参考调整位置。
2、当使用bottom属性描述时，是以首屏页面的左下角为参考点调整位置。
相对定位以盒子为参考点：
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点。
父（相对定位）子（绝对定位），父（固定定位）子（绝对定位），都是以父辈的元素作为参考点。
设置了绝对定位的子盒子是不会随着父类的padding属性变化而变化的，始终以设置相对定位的父类左上角为参考点。
绝对定位盒子居中：
由于绝对定位是脱标的，所以设置margin: 0 auto;是没有效果的，
设置居中方法：设置绝对定位盒子的left:50% ,margin-left : 负的盒子宽度的一半
固定定位（position: fixed）
固定定位特性：
1、脱标
2、提升层级，有遮盖效果
3、位置固定不变，不随屏滚动
参考点：
设置固定定位，使用top描述，是以浏览器的左上角作为参考点。
使用bottom描述，是以浏览器的左下角为参考点
z-index属性
1、用来表示谁遮盖着谁，，数值大的遮盖数值小的。
2、只有定位了的元素才能设置z-index值，浮动元素不能使用z-index
3、z-index没有单位，就是一个正整数，默认z-index为0.
4、如果都没有设置z-index值，或者z-index值相同时，在文档流的下方的，能遮盖上方的元素，定位了的元素永远遮盖着没有定位的元素。
5、父盒子的z-index的值比另一个盒子的z-index小，那么子盒子的值再怎么大都要被另一个盒子的子盒子遮盖。