一.CSS描述
CSS全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
1.CSS 代码语法
css样式由选择符和声明组成，而声明又由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素，
声明：在英文大括号“{}”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔
注意：
1.最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2.为了使用样式更加容易阅读，可以将每条代码写在一个新行内
2.CSS注释代码
就像在html的注释一样，在CSS中也有注释语句：用/*注释语句*/来表明（html中使用<!--注释语句-->）
3.内联式CSS样式，直接写在现有的HTML标签中
CSS样式代码插入形式来看，CSS样式基本可以分为3种：
内联式、嵌入式和外部式
内联式:CSS样式表就是把css代码直接写在现有的HTML标签中
如：<p style="color:red">这里的文字时红色</p>，注意要写在元素的开始标签里
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如：<p style="color:red; font-size:12px">这里的文字为红色</p>
嵌入式：css样式表，写在当前的文件中
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间
外部式：css样式表，写在单独的一个文件中
外部式css样式（也可称为外联式）就是把css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如：
<link href="base.css" rel="stylesheet" type="text/css">
注意：
1.css样式文件名称以有意义的英文字母命名，如main.css。
2.rel="stylesheet" type="text/css"是固定写法不可修改。
3.<link>标签位置一般写在<head>标签之内。
三种方法的优先级——就近原则（离被设置元素越近优先级别越高）
内联式>嵌入式>外部式
但是“嵌入式>外部式”有一个前提：嵌入式css样式的位置一定在外部式的后面
二、选择器
每一条css样式声明（定义）由两部分组成，形式如下：
选择器
{
样式；
}
在{}之前的部分就是“选择器”，选择器指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
1.标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>等。
2.类选择器
语法：
.类选器名称{css样式代码；}
注意：
1.英文圆点开头
2.其中类选器名称可以任意取名（但不要起中文）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class=“类选择器名称”为标签设置一个类，如：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如：
.stress{color:red;}/*类前面要加入一个英文圆点*/
3.ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1.位标签设置id=“ID名称”，而不是class=“类名称”
2.ID选择符的前面是井号（#），而不是英文圆点（.）
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1.ID选择器只能在文档中使用一次。与类选择器不同，在一个html文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用很多次。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）
4.子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
例：.food>li{border:1px solid red;}
5.包含（后代）选择器
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素
例：.first span{color:red;}
包含选择器和子选择器的区别:
子选择器仅是指它的直接后代，后者可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
6.通用选择器
通用选择器是功能最强大的选择器，它使用一个(*)号指定，它的作用是匹配html中所有标签元素，如* {color:red;}使html中任意标签元素字体颜色全部设置为红色。
7.伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
例：a:hover{color: red;}
上面一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会使被修饰的文字加入鼠标滑过字体颜色变为红色的特效。
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是a标签上使用：hover了（其实伪类选择符还有很多，尤其是css3中，但是因为不能兼容所有浏览器）
8.分组选择符
当想为html中多个标签元素设置同一个样式时，可以使用分组选择符（,），如将h1、span标签同时设置字体颜色为红色
h1,span{color:red;}
等同于
h1{color:red;}
span{color:red;}
CSS的继承、层叠和特殊性
继承
css的某些样式具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。一些css样式时不具备继承性的。
特殊性
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100,还有一个权值比较特殊——继承也有权值但很低，有的文献提出它的权值只有0.1，所以可以理解为集成的权值最低。
层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
css样式优先级：
内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）
重要性
有些特殊的情况需要为某些样式设置具有最高权值，这时可以使用！important来解决
注意：!important要写在分号前面
三、CSS格式化排版
1.文字排版——字体、字号、颜色、粗体、斜体、下划线、删除线
使用css样式为网页中的文字设置字体、字号、颜色等样式属性。例：
body{font-family:"宋体";}
注意不要设置不常用的字体，因为如果用户本地电脑上没有安装率设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到设置的字体样式主要取决于用户本地电脑上是否安装了设置的字体）
一般的将网页设置为微软雅黑的样式
body{font-family:"Microsoft Yahei";} //字体
body{font-size:20px; color:red;} //字号、颜色
*{font-weight:bold;} //粗体
*{font-style:italic;} //斜体
*{text-decoration:underline;} //下划线
*{text-decoration:line-through; } //删除线
2.段落排版——缩进、行高、文字间距、字母间距、对齐
*{text-indent:2em;} //缩进两个空格 2em的意思就是文字的2倍大小
*{line-height:2em;} //行高设置
*{letter-spacing:10px;} //文字间距、字母间距
*{text-align:center;} //居中对齐
四、css盒模型
1.元素分类
在css中，html中的元素大致被分为三种不同的类型：块状元素、内联元素（又称行内元素）和内联块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
2.块级元素
在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置display:block就是将元素显示为块级元素。
如将内联元素转换为块状元素，从而使得*元素具有块状元素的特点。
*{display:block;}
块状元素的特点：
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
2.元素的高度、宽度、行高以及顶和底边距都可以设置。
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
3.内联元素
在html中，<span>、<a>、<label>、<strong>、<em>就是典型的内联元素（行内元素）(inline)元素。当然，快内元素也可以通过代码display:inline将元素设置为内联元素。
如将快内元素div转换为内联元素，从而使div元素具有内联元素特点。
div{display:inline;}
内联元素的特点：
1.和其他元素都在一行上；
2.元素的高度、宽度以及顶部和底部边距不可设置；
3.元素的宽度就是它包含的文字或图片的宽度， 不可改变。
4.内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状元素。
inline-block元素特点：
1.和其他元素都在同一行上；
2.元素的高度、宽度、行高以及顶和底边距都可设置。
5.盒模型
（1）边框
盒子模型的边框就是围绕着内容及补白的线，这条线可以设置粗细、样式和颜色（边框三个属性）
如：
为div来设置边框粗细为2px、样式为实心的、颜色为红色边框：
div{border:2px solid red;}
等价于：
div{border-width:2px; border-style:solid; border-color:red;}
·边框又分为：上边框(border-top)、下边框()border-bottom、左边框(border-left)和右边框(border-right)
p{border-left:2px solid #888}
注意：
1.border-style(边框样式)常见样式有：dashed(虚线)|dotted（点线）|solid（实线）
2.border-color（边框颜色）中的颜色可设置为十六进制颜色，如：border-color:#888;
3.border-width（边框宽度）中的宽度也可以设置为：thin|medium|thick，最常见的还是用像素来表示：px;
（2）宽度(width)和高度(height)
盒模型的宽度和高度和平常所说的宽度和高度的理解是不一样的，css内定义的宽(width)和高(height)。指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
比如:
css代码：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代码：
<body>
<div>文本内容</div>
</body>
（3）填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左（顺时针）
（4）边界
元素与其他元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。
边界(margin)语法与padding(填充)一样。
padding和margin的区别，padding在边框里，margin在边框外。
五.css布局模型
布局模型和盒模型一样都是css最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于常说的css布局样式或css布局模板。如果说布局模型是本，那么css布局模板就是末了，是外在的表现形式。
css包含3中基本的布局模型：Flow、Layer和Float。
在网页中，元素有三种布局模型：1.流动模型（Flow） 2.浮动模型（Float） 3.层模型（Layer）
1.流动模型
流动（Flow）是默认的网页布局模型。网页在默认状态下的HTML网页元素是根据流动模型来分布网页内容的。
流动布局模型具有两个比较典型的特征：
1.块元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素那么霸道独占一行）
2.浮动模型
块状元素都是独占一行，但是可以通过设置元素浮动能够使得两个块状元素并排显示。
任何元素在默认情况下是不能浮动的，但可以用css定义为浮动，如：div、p、table、img等元素都可以定义为浮动。
样式为:
*{float}
3.层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式：
1.绝对定位(position:absolute)
2.相对定位(position:relative)
3.固定定位(position:fixed)
（1）绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
（2）相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
（3）固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中
移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
（4）Relative和Absolute组合使用
可以通过Relative和Absolute来实现设置某个元素相对于其他元素进行定位，但必须遵守的规则：
1.参照元素必须是相对定位元素的前辈元素
2.参照定位的元素必须加入position:relative;
3.定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
结果：
六.CSS代码缩写，占用更少的带宽
1.盒模型代码简写
盒模型中的外边距（margin）、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。
具体例子：
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法：
1.如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px;
可缩写为：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：margin:10px 20px;
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;
可缩写为：margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
2.颜色缩写
颜色的css样式同样可以缩写，当设置颜色为16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：p{color:#000000;}
可以缩写为：p{color: #000;}
例子2：p{color: #336699;}
可以缩写为：p{color: #369;}
3.字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
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-style、font-varient、line-height）如未指定将自动使用默认值。
2.在缩写时font-size与font-height中间要加入"/"斜杠
一般情况下因为对于中文网站，英文还是比较少的，所以下面的缩写比较常用：
body{font:12px/1.5em "宋体",sans-serif;}
只是有字号、行间距、中文字体、英文字体设置
七.单位和值
1.颜色值
在网页中颜色设置是非常重要的，有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等，设置颜色的方法也有很多种：
1.英文命令颜色
例：p{color:red;}
2.RGB颜色
这个与photoshop中的RGB颜色是一直的，有R(red)、G(green)、B(blue)三种颜色的比例来配色。
例：p{color:rgb(133, 45, 212);}
每一项的值可以是0-255之间的证书，也可以是0%-100%的百分数。
例：p{color:rgb(20%, 33%, 45%);}
3.十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法。
其原理其实也是RGB设置，但是其每一项的值是由0-255变成十六至今00-ff。
例：p{color:#00ffff;}
2.长度值
长度单位总结一下，目前比较常用到px（像素）、em、%百分比，要注意其实这三种单位都是相对单位。
1.像素
为什么像素是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2.em
就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px；如果font-size为18px，那么1em=18px
例：p{font-size:12px; text-line:2em;}
上面代码就是可以实现段落首行缩进24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础。
例如：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3.百分比
p{font-size:12px; line-height:130%;}
设置行高（行间距）为字体的130%（12*1.3=15.6px）
八.CSS样式的小技巧
1.水平居中设置
·行内元素
被设置的元素是文本、图片等行内元素时，水平居中是通过父元素设置text-align:center来实现的
·定宽块状元素
被设置的为块状元素时用text-align:center就不起作用了，这是分两种情况：定宽块状元素和不定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
例：
div.txtCenter{text-align:center;}
·不定宽块状元素方法
不定宽的块状元素有三种方法居中：
1.加入table标签
2.设置display:inline方法
3.设置position:relative和left:50%
1.加入table标签
第一步：为需要设置的居中的元素外面加一个table标签（包括<tbody>、<tr>、<td>）
第二步：为这个table设置“左右margin居中”（这个定宽块状元素的方法一样）
2.设置display:inline方法
改变块级元素的display为inline类型，然后使用text-align:center来实现居中效果。
这种方法相比于第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的display类型改成了inline，变成了行内元素，所以少了一些功能，比如设置长度值。
3.设置position：relative和left：50%
通过给父元素设置float，然后给父元素设置position:relative和left：50%，子元素设置position：relative和left：50%来实现水平居中
2.垂直居中
·父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。
·父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle
说到竖直居中，css中有一个用于竖直居中的属性vertical-align，但这个样式只有在父元素为td或th时，才会生效。所以要插入table标签了。
方法二：在chrome、firefox以及IE8以上的浏览器下可以设置块级元素的display为table-cell，激活vertical-align属性，但IE6、7并不支持这个样式
这个方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容IE6、7
3.隐性改变display类型
当为元素设置一下2个句之一：
1.position：absolute；
2.float：left或left：right；
元素会自动变为以display:inline-block的方式显示，当然就可以设置元素的width和height了且默认宽度不占满父元素。
网友评论