引入CSS样式表
CSS可以写到那个位置？ 是不是一定写到html文件里面呢？
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
1.在html5中可以省略，但一般都会写上，比较规范
2.一般放在head标签内，也可以放在其他位置
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
link单标签，放在头部head里面
1.herf，定义外部样式文件的URL，可以是相对路径，也可以是绝对路径
2.type，所连接文档的类型，text/CSS表示是一个css文件
3.rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet，表示链接的是一个样式表文件三种样式
标签显示模式（display）
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建块级元素的特点总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素
行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式
行内元素的特点:
和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度
行内元素能容文本或其他行内元素
块级元素和行内元素区别
块级元素的特点
总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素
行内元素的特点:
和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度
行内元素能容文本或其他行内元素
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点:
和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
默认宽度也本身内容的宽度
行高，宽高都可以控制
标签显示模式转换 display
块级元素转化行内元素
display:inline
行内转块级
display:block;
块级元素行内元素转行内块
display:inline-block;
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
由两个选择器组成，标签选择器，第二个class选择器，两个选择器之间不能有空格
p .p1{
color: red;
}
交集用的比较少
并集选择器
并集选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分
div,p{
color: red;
}
后代选择器
也称为包含选择器，用空格连接，子子孙孙都可以被选中注意：把外层标签写在前面，内层标签写在后面，中间用空格分割
子元素选择器
只包含子元素，父级标签写在前面自己标签写在后面，中间用>连接
属性选择器
选取标签带有某些特殊属性的选择器 我们称为属性选择器
div[class^=font]{
color: red;
}
div[class$=font]{
color: blue;
}
div[class*=font]{
color: pink;
}
标签名[属性名^=属性值]{ 属性名1：属性值1;}
^起始位置
$结束位置
*任意位置
伪元素选择器（CSS3)
1.E::first-letter 文本的第一个单词或字
2.E::first-line文本第一行
3.E::selection，可以改变选中文本的样式4.E::before 和E::after在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，必须要结合content属性使用
伪类是一个冒号。
伪元素是两个冒号
CSS书写规范~
要养成良好的代码规范，这是专业化的开始~
空格规范~
【强制】选择器与{之间必须包含空格 .one { }【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格 font-size: 12px;~
选择器规范~
【强制】当包含多个选择器时，每个选择器声明都必须独占一行.one, .two, .three{ } 错误写法~
.one,
.two,
.three { }正确写法
【建议】选择器的嵌套层级不应该大于三级~
属性规范
【强制】属性定义必须另起一行
【强制】属性定义后必须加上分号
~
CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。~
背景图片(image)
background-image : none | url (url)
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
背景位置(position)
background-position : position || position
背景附着
background-attachment : scroll | fixed
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: color url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
background: rgba(0,0,0,0.3);
背景缩放(CSS3)
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
CSS 三大特性
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单的理解就是： 子承父业。注意：
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* 0， 0 ， 0 ， 0 特殊性公式 */
div { /* 标签选择器 0,0,0,1*/
color: pink;
}
:first-child { /* 伪类选择器 0,0,1,0 */
color: green;
}
.king { /* 类选择器 0,0,1,0 */
color: blue;
}
#wang { /* id选择器 0,1,0,0 */
color: red;
}
/* 最大的 不是选择器 */
div {
color: orange!important; /* important就是重要的 级别最高 一旦出现优先执行*/ }
</style>
</head>
<body>
<div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
</body>
</html>
CSS特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
2.继承的 权重是 0
总结优先级：
使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。
盒子模型（CSS重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
看透网页布局的本质
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
牛奶是怎样运输，让消费者购买的呢？
我们说过，行内元素比如 文字 类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。
看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div, section {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>这是一个div盒子</div>
<hr>
<section>这是一个section 块</section>
</body>
</html>
盒子模型（Box Model）
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子边框（border）
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 200px;
height: 200px;
border-width: 10px; /* 边框宽度 粗细 */
border-color: pink; /* 边框颜色 */
/* border-style: solid; 边框样式 实线 用的最多的 */
/* border-style: dashed; 边框样式 大使的 虚词*/
/* border-style: dotted; 边框样式 点线 */
border-style: double; /* 边框样式 双线 */
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
</body>
</html>
表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
从此以后，我们的世界不只有矩形。radius 半径（距离）
border-radius: 左上角 右上角 右下角 左下角;
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。
盒子模型布局稳定性
推荐顺序
width > padding > margin
原因
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
