CSS样式----层叠样式表
作用：给html加各种各样的样式---html结构和css样式 分离 ----便于维护更新
CSS语法：
选择器{ 属性名:属性值;属性名:属性值; }
导入CSS文件的方法：
1.行内样式表
格式： <标签 style="属性名:属性值;"> 内容 </标签>
行内样式，只能应用当前文档中的当前对应的html标签加样式，或者里面包含的标签加该样式
2.内嵌样式表
格式: 在head中输入
<style type="text/css">
选择器 { 属性名:属性值;属性名:属性值; }
</style>
内嵌样式：在当前的文档可以使用该样式
3.外部样式表
格式： <link rel="stylesheet" href="外部样式表文件 XX.css" />
保存的时候，存为css文件，可以应用多个文档，哪个html标签需要，就可以引用
4.导入样式表
管理css样式
格式：@import url(另一个CSS样式)
@import是CSS样式标签，所以必须放到css文件中，必须放到css样式表的最上端
选择器的分类
- 基本选择器
标签选择器：选择给哪一个标签加样式，自动指向该标签
语法：
标签选择器名 { 属性名 :属性值; 属性名: 属性值; }
不用引用，它会把样式自动添加到对应的标签上 但所有的对应标签都加上该样式
类选择器： 给一类html标签加样式
语法 类选择器名{ 属性名:属性值;属性名:属性值; }
类用 . 表示 ，如 .class{} .mybody{}
必须得引用，每一个标签都有一个class属性
<标签 class="选择器名"></标签> 可以引用多次
Id选择器： 给特定的html标签加样式
格式： id选择器名{ 属性名:属性值; 属性名:属性值; }
id 用 # 表示，如#mybody{}
<标签 id="选择器名"></标签>
必须得引用，并且只能引用一次，表示唯一，通常id是给javascript用，而不是用来设置样式
如果想设置样式，用类选择器
通用选择器：(*所有)给所有的标签加样式,不是所有浏览器都支持 IE6不支持
语法： *{ 属性名:属性值;属性名:属性值; }
- 复合选择器
多元素选择器 ： 多个标签共有的属性和属性值，放在一起
语法： 选择器,选择器,选择器....{ 共有的属性: 属性值; }
后代元素选择器: 给html的后代标签加样式
语法： 选择器1 选择器2 选择器3{属性名:属性值;}
给选择器1下的 选择器2和选择器3 标签添加样式
.body .table .tr{属性名:属性值}
子元素选择器： 给html标签的子标签加样式
格式: 选择器>选择器{属性名:属性值;}
.body>table{属性名:属性值;}
某个标签里面的第一层 比后代选择器指向更明确
伪类：----锚点<a>(内容必须做好链接)
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动到链接上
a:active 单击鼠标左键的那一时刻的样式
- 文本属性
font-size 文本的大小
font-weight 文本是否加粗 bold normal
font-style 文本是否倾斜 italic normal
font-family 文字的字体
text-decoration 文本是否有线条
text-decoration: underline 下划线
text-decoration: overline 上划线
text-decoration: line-through 删除线
text-decoration: none 去掉所有线条
text-indent： 2em 文本首行缩进2个字符
color 文本的颜色
letter-spacing 字母与字母之间的距离
word-spacing 单词和单词之间的距离
text-align 文本的对齐方式
- 背景属性
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片是否平铺 no-repeat 不平铺
repeat-x/y 横向平铺/纵向平铺
repeat 横向和纵向都平铺(默认)
background-position 背景图片的显示方式 水平 left center right
垂直 top middle bottom
简写为: background:背景颜色 背景图片 背景图片是否平铺 水平 垂直 ;
- 列表
去掉列表前面的项目符号 list-style-type: none 简写为 list-style:none
用小图片代替项目符号 list-style-image: url(图片的地址)
- 合并表格边框线
border-collapse:collapse; 合并表格边框线
- 边框线的属性
边框(top right bottom left)
border-top-color 上边框的颜色值
border-top-style 上边框的线形 solid 实线 dashed 虚线 dotted 点状线
border-top-width 上边框的粗细
简写: border-top: 线形 粗细 颜色
盒子模型：
1.内容区：width 和 height
2.边框: border
3.内边距: padding 内容和边框之间的距离，也可以分为上 右 下 左 四个属性确定内容位置
padding:10px 20px 30px 40px;上 右 下 左
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px; 上下10px 左右20px
padding:10px; 上下左右均为10px
4.外边距：margin 边框以外的距离 与内边框的属性相同
注 意：外边距叠加问题，取较大的那一个作为 最后的margin
清除格式：
清除html原有的样式，代码：
*{margin:0;padding:0;} 或
body,h1,h2,p,ul,ol,li....{margin:0;padding:0} 消除这些标签的格式
写在CSS中
网页的布局思想
1.清除格式
2.设置页面属性，即body{}
body{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
例如：body{background:blue;font-size:14px;font-color:black;font-family:宋体;line-height:150%;}
3.划分结构：提前划分好整个网页的结构，在哪个地方放什么东西等等......
网站的结构就是两部分(横向和纵向)
1.纵向就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的padding，
边框以外的margin，边框border等属性就可以。
2.横向就需要使用浮动
行内元素和块元素
1.行内元素： 输入完标签后，自己不占一行的，如：span b i u strong a
特点：行内元素的宽度和高度是由内容来决定的，宽度(width)和高度(height)不能用
默认的CSS样式是display:inline;
2.块元素：输入完标签后，自己独占一行的，如：div p table ul ol li dl dt dd h1......
特点：块内元素的宽度和高度可以设置，默认的CSS样式是display:block;
块--转换--行：display:inline;
行--转换--块：display:block;
浮动的特点：
1.设置浮动的元素，不占空间
2.设置浮动元素的层级高于普通元素
3.如果在一行的元素想要横向排列，都设置浮动就可以了
4.设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素
如何让盒子在页面水平居中
margin: xx auto;
- 内容溢出处理
overflow 当内容溢出，如何处理
hidden 隐藏
auto 如果盒子装不下，就会出现滚动条
scroll 无论是否装下，都有滚动条
- 继承
外层元素的样式，会被里面的元素所继承
哪些样式可以继承： 文本的属性可以继承
自己有的属性，不会向外继承
- 优先级
单个选择器的优先级
行内样式 > id选择器 > 类选择器 > 标签选择器
复合选择器的优先级
在单个选择器的基础上，写的越精细，优先级越高
- 清除浮动
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除所有浮动
如果div里面还有div，外面的div(即父盒子)没有设置固定高
里面设置了浮动，父元素受影响，无法正常计算，欲让父盒子得到自然高
在父盒子的里面最下方加<div>，给该盒子设置清除浮动属性 clear: both
浏览器的一个bug --- 在父元素的样式中设置overflow:hidden
- 定位
坐标 偏离目标元素多远的距离 距左left 距右right 距上top 距下bottom
position 定位方式： static 默认
fixed 固定
相对于浏览器窗口的定位 如果不设置定位坐标，就在原来的位置
层级要比普通元素高 结合定位坐标，就是相对于目标位置的距离
设置固定定位之后，一定是块元素
relative 相对定位
相对定位占空间 如果不结合定位坐标，就是在原来位置
层级高于普通元素 如果结合定位坐标，相对于自身，作为定位的原点
absolute 绝对定位
绝对定位不占空间 如果不结合定位坐标，就是原来的位置
层级高于普通元素 结合定位坐标，以祖先元素(设置绝对定位，相对定位)作为坐标的参考点
如果祖先没有设置定位，一直往上找，直到找到body，就以body来进行定位， 就是相对于整个窗口来定位
- 盒子的深入
