## 此篇文章纯属记录学习，有错勿怪......
CSS介绍：
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
●修改字体大小等样式
<head>
<title>认识CSS样式</title>
<style type="text/css">
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>无题</p>
</body>
●注释 /*注释语句*/
font-size:12px;/*设置文字字号*/
●内联式 直接写在现有的HTML标签中
<p style="color:red">这里的文字是红的</p>▲注意要写在元素的开始标签里
●嵌入式 写在<style></style>之间
<style type="text/css">
span{
color="red";
}
</style>
●外部式
▲把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
<link href="base.css" rel="stylesheet" type="text/css" />
▲优先级 内联式>嵌入式>外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
就近原则：离被设置元素越近优先级越高
●选择器 每一条css样式声明都由两部分组成，形式如下：
选择器{
样式；
▲在{}之前的部分就是 选择器 ，选择器指明了{}中的样式的作用对象，也就是作用于网页的哪些元素}
标签选择器相当于就是HTML的标签
p{font-size:12px;line-height:1.6em}
就是为p标签设置12px的字号，1.6em的行间距
●类选择器
语法： .类选择器名称{css样式代码;}
▲英文圆点开头；类选择器可以任意取名，当然，不要取中文名
例如：<span>胆小如鼠</span> ▲{使用合适的标签将要修饰的内容标记起来}
<span class="stress">胆小如鼠</span> ▲{使用class="类选择器名称"为标签设置一个类}
.stress{color=red;} ▲{应用过程只有后两步}
●ID选择器
例如： <span id="stress">胆小如鼠</span>
#stress{color="red";}
ID选择器前面不是英文圆点而是 #
▲▲类和ID选择器的异同点
同：都可以应用于任何元素
异：1. ID选择器在文档中只能使用一次，类选择器可以使用多次
2. 可以使用类选择器词列表方法为一个元素同时使用多个样式
●子选择器
用于选择指定标签元素的第一代子元素
例如： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li加入红色实线边框
●后代选择器
加入空格用来指定标签元素下的后辈元素
.first span{color:red;}
▲▲子选择器与后代选择器的区别
子选择器仅指它的直接后代或者说是第一代后代，而后代选择器是作用于所有子后代元素 后代选择器通过空格来进行选择 而子选择器是通过 > 来选择
●通用选择器
是使用功能最强大的选择器，它使用 * 号指定。作用是匹配HTML中所有的标签元素
●伪类选择符
允许给HTML中不存在的标签（标签的某种状态）设置样式
●分组选择符
为HTML中多个标签元素设置同一个样式
例如：h1,span{color:red;}
相当于
h1{color:red;}
span{color:red;}
●继承性
▲CSS的某些样式具有继承性。允许样式应用于某个特定的HTML标签元素，而且应用于后代
例如： p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这样<p>和<span>标签的文本都被设置为了红色
▲{某些样式是不具有继承性的}
●特殊性
为同一个元素设置了不同的样式，浏览器会根据权值来判断使用哪种样式。使用权值高的。
权值规则：标签的权值为1；类选择符权值为10； ID选择符的权值最高是100，还有一个比较特殊的权值--继承，有些文献显示它只有0.1
●层叠
在HTML中对于同一个元素有多个CSS样式存在，而且有相同的权重，会根据这些CSS样式的前后顺序来决定，处于最后面的样式将被应用（后面的会覆盖前面的样式）
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
●重要性
在做某些样式时需要为，某些样式设置为最高权值，使用 !important
例如： p{color:red!important;}
▲{当网页制作者不设置CSS样式时，浏览器会根据自己的一套样式来显示网页。样式优先级为： 浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式，但注意 !important 样式是个例外，权值高于用户自己设置的样式。}
●文字排版 字体
例如： body{font-family:"宋体";}
▲{这里注意不要设置不常用的字体，如果用户本地电脑上没有安装你设置的字体的话就会显示浏览器默认的字体 一般常使用的是 微软雅黑 （Microsoft Yahei 或者 微软雅黑）（第一种比第二种方法兼容性更加好一些）}
●文字排版 字号颜色
例如： body{font-size:12px;color:#666}
●文字排版 粗体
例如： p span{font-weight:bold;}
●文字排版 斜体
例如： a{font-style:italic;}
●文字排版 下划线
例如： p a{text-decoration:underline;}
●文字排版 删除线
.oldPrice{text-decoration:line-through;}
●段落排版 缩进
中文字段落前习惯空两个字的空白
p{text-indent:2em;}
▲{2em的意思是文字的两倍大小}
●段落排版 行间距（行高）
p{line-height:1.5em;}
●段落排版 中文字间距、字母间距
中文字间距、字母间隔设置：letter-spacing
例如：h1{letter-spacing:50px;}
<h1>welcome to imooc!</h1>
▲注意：这个样式使用英文单词时是设置字母与字母之间的间距
h1{word-spacing:50px;}
<h1>welcome to imooc!</h1>
▲注意：这个样式使用英文单词时是设置英文单词之间的间距
●段落排版 对齐
为块状元素中的文本、图片设置居中、居左、居右样式
例如：居中： h1{text-align:center;}
<h1>了不起的盖茨比</h1>
居左： h1{text-align:left;}
<h1>了不起的盖茨比</h1>
居右： h1{text-align:right;}
<h1>了不起的盖茨比</h1>
●元素分类
在CSS中，HTML中的标签大体被分为三种类型：块状元素、内联元素（行内元素）、内联块状元素
▲常见块状元素：<div>、<p>、<h1>、<h6>、<ol>、<dl>、<table>、<address>、<blockquote>、<form>
▲常见内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
▲常见内敛块状： <img>、<input>
●块级元素
▲块级元素的特点：每个块级元素都从新的一行开始，并且其后的元素也另一行;元素的高度、宽度、行高、以及顶和底边距都可设置；元素的宽度在不设置的情况下是它本身父容器的100%（和父容器的宽度一致）
在HTML中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置 display:block 就是将元素显示成块级元素。
例如： a{display:block;}
●内联元素
在HTML中<span>、<a>、<label>、<strong>、<em>就是内联元素（行内元素）
▲内联元素的特点：和其他元素都在一行上；元素的宽度、高度及顶部和边部的边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
例如： div<display:inline;>
●内联块状元素
▲内敛块状元素特点： 和其他元素都在一行上；元素的高度、宽度、行高以及底边距都可以设置
在HTML中<img>、<input>就是内敛块状元素。
例如：a{display:inline-block;}
●盒模型--边框（一）
盒子模型的边框就是围绕着内容及补白的线，可以设置线的粗细、样式、颜色
例如：div{border:2px solid red;} 或者 div{border-width:2px;border-style:solid;border-color:red;} 第一个是border的缩写形式。两个代码都是实现 设置边框粗细为2px 、样式为实心的、颜色为红色的边框。
▲border-style 边框样式常见的有 dashed（虚线）、dotted（点线）、solid（实线）
border-color边框颜色中的颜色可设置为十六进制颜色 例如：border-color:#888;
前面的#不要忘掉
border-width边框宽度中的宽度也可以设置为： thin、medium、thick（不是很常 用），比较常用的还是像素px
●盒模型--边框（二）
单独给某一边设置样式其他三边不设置。
只为一个方向边框设置样式
div{border-bottom:1px solid red;} <bottom 底部；top 顶部； right 右边； left 左边>
●盒模型--宽度和高度
CSS里面的宽和高和我们平常所说的不一样，指的是填充以里的内容范围
●盒模型--填充
内容与边框之间设置距离 padding
例如：div{padding:20px 10px 15px 30px} <上 右 下 左>
如果上下左右都是10px 可以写 div{padding:10px;}
如果上下为10px 左右为20px div{padding:10px 20px;}
●盒模型--边界
元素与其他元素的距离 margin
▲padding与margin差别： padding在边框里 margin在边框外
▲{CSS包含三种基本的布局模型，用英文概括为：Flow,Layer,Float.
在网页中，元素有三种布局模型：流动模型，浮动模型，层模型}
●流动模型（一）
▲流动是默认的网页布局模型。也就是网页在默认的网页布局模式
特征：块状元素都会在所处的元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%实际上，块状元素都会以行的形式都会以行的形式占据位置
●流动模型（二）
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示（内联元素不像块状元素一样独占一行）
●浮动模型
使块状模型并排显示，任何元素在默认情况下都是不能浮动的，但是可以用CSS定义浮动，如div,p,table,img等元素
例如：div{width:200px;height:200px;border:2px red solid;
float:left;}
<div id="div1"></div>
<div id="div1"></div> 实现两个div元素一行左浮动显示
div{width:200px;height:200px;border:2px red solid;}
#div{float:left;}
#div{float:right;} 实现两个元素一左一右一行显示
●层模型
▲层模型有三种形式：绝对定位(position: absolute),相对定位(position: relative),固定定位(position: fixed)
●层模型--绝对定位
绝对定位是将元素从文档流中拖出来，然后使用left，right，bottom，top属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
例如：div{width:200px;height:200px;border:2px red solid;
position:absolute;left:100px;top:50px;} 可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px(左边空出100px，上边空出50px)
●层模型--相对定位 position: relative
相对定位是通过left这些属性确定元素在正常文档流中的偏移位置，相对定位完成的过程是首先按static（float）方式生成了一个元素，然后相对于以前的位置移动。偏移前的位置保持不动。
●层模型--固定定位 position: fixed
与absolute定位类型类似，但他的相对移动的坐标是视图（屏幕内的网页）本身
由于视图是固定的，他不会随着浏览器窗口的滚动条滚动而滚动固定定位的元素始终位于浏览器窗口内视图的某个位置，不会受文档流的影响。
●relative与absolute组合使用
相对于其他元素定位
要求：1.参照定位的元素必须是相对于其他定位元素的前辈元素;
2.参照定位的元素必须加上position：absolute；
3.定位元素加入position：relative，便可以使用top等进行偏移定位了；
例如：#box1{width:200px;height:200px;position:relative;}
#box2{position:absolute;top:20px;left:30px;}
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
●盒模型代码简写
盒模型外边距（margin），内边距（padding），边框（border）
按 顺时针 方向设置： 上右下左 如：margin：10px 12px 13px 15px; 上设置为10px,右设置为12px,下设置为13px,左设置为15px
通常有三种缩写方法：以margin为例
1.如果top，bottom，right，left的值相同，则 margin：10px ; 上下左右都是10px
2.如果top和bottom值相同，left和right值相同，则 margin：10px 20px； 上下是10px 左右是20px
3.如果left和right值相同，则 margin：10px 20px 30px; 左右是20px
●颜色值缩写
当你设置的颜色是16进制的色彩值，如果每两位的值相同，可以缩写一半
例如： p{color:#336699;} 可以缩写为 p{color:#369;}
●字体缩写
例如：body{font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:"宋体",sans-serif;}
可以缩写为 body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
注意：1.使用这一简写方式至少得指定font-size 和 font-family属性，其他的属性（如font-weight,font-variant,line-height）如未指定将自动使用默认值
2.在缩写时 font-size与line-height中间要加 / 斜杠
●颜色值
字体颜色（color），背景颜色（background-color），边框颜色（border-color）
设置颜色的方法：1.英文命令颜色 例如; p{color:red;}
2.RGB颜色 （red green blue 三种颜色的比例来配色，每一项的值都可以是0~255之间的整数，也可以是0%~100%的百分数） p{color:rgb(233,344,566);}
3.十六进制颜色 这种颜色现在也是比较普遍使用色方法 其原理是grb设置 但是对每一项的值由0~255变成了十六进制的00-ff 例如: p{color:##00ffff;}
●长度值
长度单位总结一下，目前比较常用的是px（像素），em，%百分比，这三个单位都是相对单位
1.像素
像素指的是显示器上面的小点 css规划中假设 “90像素=1英寸”实际情况是浏览器会使用显示器的实际像素有关
2.em
就是本元素给定字体的font-size值，如果元素的font-size为14px,那么1em=14px;如果font-size为18px,那么1em=18px
例如：p{font-size:12px;text-indent:2em;}
上面的代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)
▲特殊情况：当font-size设置单位为em时 此时计算的标准以p的父元素的font-size为基础
3.百分比
例如：p{font-size:12px;line-height:130%}
●水平居中设置-行内元素
如果被设置的元素为行内元素时，水平居中是通过给父元素设置 text-align:center来实现的
例如：.txtCenter{text-align:center;}
<div class="txtCenter">在父容器中水平居中显示。</div>
●水平居中设置-定宽块状元素 定宽块状元素是宽度width为固定值
设置 margin值为 auto
例如： p{margin:20px auto;}
●水平居中总结-不定宽块状元素方法
不定宽度块状元素：块状元素的宽度width不固定
方法：1.加入table标签 利用的是table标签的长度自适应性 即不定义长度也不默认父元素body的长度 其长度根据其内在文本长度决定的，因此可以看作一个定宽度块状元素 利用定宽度块状元素居中的margin的方法使其居中
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
2.设置display:inline方法：与第一种类似 显示类型为行内元素 进行不定宽元素的属性设置
改变块状元素的display为inline类型，然后使用text-align:center
<这种方法相比较第一种方法的优势是不用增加无语义标签，但也存在着一些问题，它将块状元素的display类型改为inline，变成了行内元素，所以少了一些功能，比如设定长度值>
3.设置position：relative和left:50% ：利用相对定位的方式 将元素向左偏移50% 即达到居中目的
●垂直居中--父元素高度确定的单行文本
方法是通过设置父元素的height（该元素的高度）和line-height（行高，在文本中行与行之间的基线的距离）高度一致来实现的
line-height与font-size的计算值之差，在CSS中成为行间距
当文字内容的长度大于块的宽度时，就有内容脱离了块
●垂直居中--父元素高度确定的多行文本(方法一)
使用table（包括tbody,tr,td）标签，同时设置vertical-align：middle
▲vertical-align是一个竖直居中的属性，在父元素设置此样式会对inline-block类型的子元素都有用
●垂直居中-父元素高度确定的多行文本（方法二）<兼容性比较差>
设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性<在chrome，Firefox及IE8以上的浏览器下可以支持，IE6、7不支持这个格式>
●隐形改变display类型
当任意元素（display：none除外）设置：
1.position：absolute
2.float：left或者float：right
只要出现以上两句之一，元素的display类型就会自动变为以display：inline-block（块状元素）的方式显示，就可以设置元素的width和height，且默认宽度不占满父元素
