认识css样式
css 全称为“层叠样式表（cascading style sheeets）” ，它主要是用于定义html内容在浏览器内显示的样式，如文字大小，颜色，字体加粗等。
如：
P{
font-size:12px;
color:red;
font-weight:bold;
}
使用css样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体，字号或者颜色等。
CSS代码语法
CSS样式由选择器和声明组成，而声明又由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号{}中的就是声明，属性和值之间用英文冒号：分隔，当有多条声明时，中间可以英文号；分隔
注意：
1， 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2， 为了使用样式更加阅读容易，可以将每条代码写在一个新行内
CSS注释代码
语法：/*注释语句*/
内嵌式css样式，直接写在现有的html标签中
内嵌式：css样式表就是把css代码直接写在现有的html标签中
<p style=”color:red”>这里文字是红色。</p>
外部式css样式，写在单独的一个文件中
外部式css样式（也可称为外联式）就是把css代码写在一个单独的外部文件中，这个css样式文件以.css为扩展名
<link href = “base.css” rel=”stylesheet” type=”text/css”/>
注意：
1， css样式文件名称以有意义的英文字母命名
2， rel=“stylesheet” tyoe=”text/css”式固定写法不可修改。
3， <link>标签位置一般写在<head>标签之内。
内联式>嵌入式>外部式
标签选择器
如：p{font-size:12px ; line-height:1.6em}
类选择器
语法：.类选择名称{css样式代码；}
注意：
1， 英文圆点开头
2， 其中类选择器名称可以任意起名（不要用中文）
Id选择器
1， 为标签设置id=“ID名称”，而不是class=“类名称”
2， Id选择符的前面是井号（#）号
类和id选择器的区别
相同点：可以应用到任何元素
不同点：
1， id选择器只能在文档中使用一次。与类选择器不同，在html文档中，id选择器只能使用一次，而且仅一次，而类选择器可以使用多次
2， 可以使用类选择器词列表方法为一个元素同时设置多个样式
子选择器
例：,food>li{border:1px solid red;}
包含（后代）选择器
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素
例：.first span{color:red;}
子选择器仅指它的直接后代，或者你可以作用于子元素的第一个后代，而后代选择器是作用于所有子后代元素。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有的元素
*{color：red；}
伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，
例 a:hover{color:red;}
上面一行代码就是a标签鼠标滑过的状态设置字体颜色变红
分组选择符
,h1,span{color:red;}相当于h1{color：red} span{color：red；}
继承
CSS的某种样式具有继承性的
有些样式不具有继承性的，如border：1px solid：red
特殊性
浏览器是根据权值来判断使用哪种CSS样式的，权值高的就使用哪种css样式
权值的规则：
标签的权值为1，类选择符的权值为10，id选择符的权值最高为100，内联样式1000
注意：还有一个权值比较特殊，继承也有权值但很低，有的文献提出它只有0
.1，所以可以理解为继承的权值最低
叠层
叠层就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
字体
Body{font-family:”Microsoft Yahei”;}
字号，颜色
Body{font-size：12px；color：#666}
粗体
P span{font-weight:bold;}
斜体
Font-style：italic；
文字排版—下划线
P a{text-decoration：underline；}
文字排版—删除线
Text-decoration：line-through；
段落排版—缩进
P{text-indent：2em；}
2em的意思时文字的2倍大小
段落排版 行高
P{line-height：1.5em；}
段落排版—中文字间距，字母间距
例letter-spacing：50px；
段落排版—对齐
Text-align：center ；text-align：left； text-align：right；
元素分类
三种不同的类型：块状元素，内联元素，内联块状元素
常用的块状元素有：
<div> <p><h1>…<h6><ol> <ul><dl><table><address><blockquote><form>
常用的内联元素有：
<a><span><br><i><em><strong><label><q><var><cite><code>
常用的内联块状元素有：
<img><input>
在html中<div><p><h1><form><ul>和<li>就是块级元素，设置display：block就是将元素显示为块级元素。
元素分类—块级元素
，a{display：block}
块级元素特点：
1， 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2， 元素的高度，宽度，行高以及顶和底边距都可设置。
3， 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
元素分类—内联元素
在html中，<span>、<a>、<label>、<strong>和<em>就是典型的内联元素（行业元素）（inline）元素。当然块状元素也可以通过代码display：inline将元素设置为内联元素。
，div{
display：inline；
}
内联元素特点：
1， 和其他元素都在一行上；
2， 元素的高度、宽度及顶部和底部边距不可设置；
3， 元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类—内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display：inline-block就是将元素为内联块状元素
<img>、<input>标签就是这种内联块状标签
Inline-block元素特点：
1， 和其他元素都在一行上；
2， 元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型---边框（一）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色（边框三个属性）。
Div{
Border:2px solid red;
}
上面时border代码的缩写形式
，div{
Border-2px;
Border-style:solid;
Border-color:red;
}
注意：
1， border-style（边框样式）常见样式有：
dashed（虚线）dotted（点线）solid（实线）
2， border-color（边框颜色）中的颜色可设置为十六进制颜色
3， border-width（边框宽度）中的宽度也可以设置为：
thin|medium|thick，最常用的是像素（px）。
盒模型—宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽和高
一个元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
盒模型—填充
元素内容与边框是可以设置距离的，称之为“填充”。填充顺序：上右下左
盒模型—边界
元素与其他元素之间的距离可以使用边界（margin）来设置。边界也是可分为上右下左
布局模型：
三种布局模型：流动模型（flow）浮动模型（float）层模型（layer）
流动模型
流动是默认的网页布局模式
特征：
第一点， 块状元素都会所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
第二点， 在流动模型下，内联元素都会在所处的包含元素从左到右水平分布显示
A span em strong都是内联元素
浮动模型
，div p table img 都可以定义为浮动
Float：left；right；
什么是层模型
层布局模型就像是图像软件photoshop中非常流行的图层编辑功能一样，每个图层能够精准定位操作
层模型有三种形式：
1， 绝对定位
2， 相对定位
3， 固定定位
绝对定位
例：
Position：absolute
Left：100px；
Top：50px；
相对定位
Position：relative
固定定位
Position：fixed
Relative 与absolute组合使用
参照定位的元素必须是相对定位元素的前辈元素
参照定位的元素必须加入position：relative
#box1{
Width：200px；
Height：200px；
Position：relative；
}
定位元素加入position：absolute，便可以使用top，bottom、left，right来进行偏移定位
盒模型代码简写
1， 如果top right bottom left的值相同，如下面代码：
Margin：10px；
2， 如果top bottom值相同，left right值相同
Margin：10px 20px；
3， 如果left和right的值相同
Margin：10px 20px 30px；
颜色值缩写
P{color：#0000000；}—p{color：#000}；
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-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
颜色值
1， 英文命令颜色
P{color：red；}
2， RGB颜色
P{color：rgb（133，45，200）；}
p{color:rgb(20%,33%,25%);}
3十六进制颜色
p{color:#00ffff;}
长度值
1， 像素 （px）
2， ，em 如果font-size=12px 1em=12px
3， 百分比 p{font-size:12px;line-height:130%}
水平居中设置-定宽块状元素
Margin：20px auto；（自适应）
水平居中总结-不定宽块状元素方式
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的