2.1样式表的基本概论
2.1.1 内联样式表
在标签中直接添加style 例：<p style=“”> </p>
2.1.2 内嵌样式表
作为一个独立区域内嵌在网页内，必须卸载head标签内
例：<head>
<style=“”>
</style>
</head>
2.1.3 外部样式表
即css样式表，需要新建一个css文件，用来放样式表。如果在html文件中调用样式表，需在html文件中点击 右键→CSS样式→附加样式表。（一般用link连接方式）
注：有些标签会有默认的边距，一般写代码的时候会先去除（也可以设置其他需要的样式）
* （对所有标签起作用）
{margin：0px； （边距）
padding：0px；} （间距）
2.2 选择器
1、标签选择器
p{样式} 该样式对所有未加其他引用的p标签起作用
2、class选择器
在样式表中写法都是以 “.” 开头，引用时为class=“”
例：
样式表中 .a{样式}
引用时 <div class=“a”></div>
3、id选择器
在样式表中写法都是以 “#” 开头，引用时为id=“”
例：
样式表中 #a{样式}
引用时 <div id=“a”></div>
注：id引用时在代码中只能使用一次，而class可以无限次引用
4、复合选择器
① 在样式表中两个标签用 “，” 隔开，表示并列
例：
p，span{样式} 表示p和span两者同样的样式
② 用空格隔开，表示后代
例：
.main p{样式} 找到使用main样式的标签，在该标签内的p标签使用该样式
③ 筛选 用 “.” 隔开
例：
p.sp{样式} 在标签p中的class=“sp”的标签执行该样式
2.3 样式属性
背景
backround-color： 背景颜色，样式表优先级高
backround-image：url（路径） 设置背景图片（默认）
backround-attachment：fixed 背景固定，不随字体滚动
：scroll 背景随字体滚动
backround-repeat：no-repeat 不平铺
：repeat 平铺
：repeat-x 横向平铺
：repeat-y 纵向平铺
backround-position：center 背景图居中（设置背景图片位置时repeat必须为“no-repreat”）
：right top 背景图片放在右上角（位置可以自己改）
：left 100px top 100px 距离左边和上边的距离（可以为负值）
字体
font-family：“字体” 设置字体
font-size：12px 字体大小，也可以用“2.5em” 即默认字体的2.5倍 也可以用百分数
font-weight：hold 加粗
：normal 正常
font-style：italic 倾斜
：normal 不倾斜
color： 颜色
test-decoration：underline 下划线
：overline 上划线
：line-through 删除线
：none 去掉下划线
test-align：center 水平居中对齐
：left 水平左对齐
：right 水平右对齐
vertical-align：middle 垂直居中对齐
：top 顶对齐
：botton 低对齐（一般设置行高后使用）
text-indent：20px 首行缩进
line-height：20px 行高（一般为1.5-2倍字体大小）
display：none 不显示
：inline-block 显示为块，不自动换行，宽高可设（black显示为块，自动换行。inline效果同span标签类似，不自动换行，宽高不可设）
visibility（可视性）：hidden 隐藏（但是占空间，只是不可见）
：visible 显示
其他样式
当设置了.a后还可以添加其他几种效果
a：link{样式} 正常状态是的样式
a：visited{样式} 点击后的样式（一般都是与link样式一样，否则会出现显示错误）
a：hover{样式} 鼠标悬停时的样式
a：active{样式} 点击时的样式
边界和边框
margin 表外间距
padding 内容与单元格间距
border： 表格和边框的样式
border：5px solid blue 四边框：5像素粗、实线、蓝色
border-width：5px 5像素粗
border-style：solid 实线
border-color：blue 蓝色
border-top：5px solid blue 上边框5像素粗、实线、蓝色
margin：10px 四边外边框为10像素
：auto 居中
margin-top：10px 上边外边框为10px
margin：20px 10px 20px 10px 上-右-下-左 分别设置四个边框，数据顺序为顺时针
2.4 格式与布局
position：fixed 锁定位置（相对于浏览器的位置），列如某些网站右下角的弹窗
：sbsolute 外层没有position：sbsolute（或relative）那么div相对于浏览器定位。外层有position：sbsolute（或relative）那么div相对于外层边框定位
：relative 相对于默认位置的移动（也就是实际视觉效果是位移，而后台位置还是在原始位置）
z-index：2 相对于z轴拉近2层位置
float：left 位于左侧浮动
：right 位于右侧浮动
overflow：hidden 隐藏超出部分
：visible 显示超出部分
：scroll 显示出滚动条
cursor：pointer 鼠标悬停时的形状
opacity：0.5 透明度为半透明