1.概念相关
1.css: 层叠样式表 . html是毛坯房,css装修
2.css语法 {属性:属性值 属性值 属性值; 属性:属性值}
3.块状元素、行内元素和内联块状元素
块状元素的特点:
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行
2、元素的高度、宽度、行高以及顶和底边距都可设置
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
行内元素特点:
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素特点:
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
4.颜色值
英文命令颜色 p{color:red;}
RGB颜色 p{color:rgb(133,45,200);} p{color:rgb(20%,33%,25%);}
十六进制颜色 p{color:#00ffff;}
配色表：
作用:美化页面, 将页面美化和html进行分离
2.CSS和HTML结合方式
内嵌式 <div style="border:1px solid blue;">div</div>
嵌入式<style>div{border:1px solid red;}</style>
外部式 1.创建一个css文件 2.通过link标签引入 3.href:css文件的路径 <link rel="stylesheet" href="css文件路径">
三者的优先级顺序:在相同权值的情况下
就近原则（离被设置元素越近优先级别越高）
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
!important(设置最高权值)
注意:!important要写在分号的前面
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
3.css选择器
基本选择器
1.#id;{} 为标签设置id="ID名称"
2. .类{};使用class="类选择器名称"为标签设置一个类
3.标签名{}
类和ID选择器的区别
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的(不能使用 ID 词列表)
扩展
通用选择器:* {}
分组选择器:选择器,选择器{}
子元素选择器:选择器>选择器{}
后代选择器: 选择器 选择器{}
属性选择器:[属性=‘属性值’]{css属性}
伪类选择器
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
4.属性(style)
1、文字属性
font-size:大小
font-family:字体类型
2、文本属性
color:颜色
text-decoration:下划线
属性值:none underline
text-align:对齐方式
属性值:left center right
3、背景属性
background-color:背景颜色
background-image:背景图片属性值：
url("图片地址");
background-repeat:平铺方式
属性值：默认横向纵向平铺
repeat:横向纵向平铺
no-repeat:不平铺
repeat-y:纵向
repeat-x:横向
4、列表属性
list-style-type:列表项前的小标志
属性值:太多了
list-style-image:列表项前的小图片
属性值:url("图片地址");
5、尺寸属性
width:宽度
height:高度
6、显示属性
display:
属性值:none:隐藏
block:块级显示
inline:行级显示
7、浮动属性
float:
属性值：left right
clear:清除浮动 left right both
缺点:(1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示
5.盒子模型
按照顺时针方向填值
水平居中设置
水平居中设置-行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
水平居中设置-定宽块状元素
(定宽块状元素：块状元素的宽度WIDTH为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
注意:元素的“上下 margin” 是可以随意设置的
水平居中总结-不定宽块状元素方法（一）
(不定宽块状元素：块状元素的宽度width不固定。)
1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
水平居中总结-不定宽块状元素方法（二）
第二种方法:改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
水平居中总结-不定宽块状元素方法（三）
方法三:通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
6.层模型
绝对定位; positon:absolute left(与左端的距离)
相对定位;position:relative(相对于以前的位置) 偏移前的位置保留不动
