css属性基本骨架(部分方法属性使用方法不明确 在属性后面有叙述)

css介绍
层叠样式表，用来美化页面的，讲表现与样式相分离，减少代码写作，提高浏览器加载速度
语法
1.行内样式(不建议)
<h1 style=“color:red”></h1>
2.内嵌样式
<style>
h1{color:red;font-size:“20px”}
<style>
基本选择器
1.*{}通配符选择器(所有标签)
2.h1{}标签选择器
3. #font{}id选择器 选择id属性 是唯一的
4. .font{}类选择器 选择class属性 可以重复
字体样式
1.color字体颜色
单词：red
十六进制值: #0f0f0f #eee
色阶值: rgb(0,0,0) 0-255 r红色 g绿色 b蓝色
2.font-size字体大小
单位：像素px或百分比% 页面默认12-16px
3.font-weight字体加粗
100-900 页面默认400
4.font-style设置斜体
normal默认 itatic倾斜
5.font-family字体样式
font-family:“宋体”，Anal 默认字体是宋体
6.word-spacing单词间距 单位：像素px或百分比%
7.letter-spacing字体间距 单位：像素px或百分比%
8.line-height行高 单位：像素px或百分比%
9.text-algin水平对齐
left左 right右 center中
10.vertical-algin垂直对齐
top上 bottom下 middle中
定义路径的标签
<a>超链接 href定义路径
<img>图片 src定义路径
png退地图 jpg静态图 gif动态图
定义路径
绝对路径
http://www.baidu.com 外网
file:D://aa/work.html 本地(不建议)
相对路径
相同文件夹 aa.html
子文件夹 ww/aa.html
不同文件夹 …/ww/aa.html
…/返回上一级文件夹
css属性
文本修饰
text-decoration文本修饰
none无线体 underline下划线 line-througth删除线 overline上划线
尺寸
width 宽高 单位：像素px或百分比
height 高度 单位：像素px或百分比
边框
border-width 边框粗细 单位：像素px或百分比
border-color 边框颜色
border-sytle 边距样式
none无边距 solid实线 double双边线 dotted点线 dashed虚线
简写：border:1px solid red
方向:left左 right右 top上 bottom下 border-left
边距
margin 外面边距 单位：像素px或百分比
padding 内边距 单位：像素px或百分比
方向:left左 right右 top上 bottom下 margin-left padding-left
写作顺序：
margin:50px 四边距离
margin:50px 80px 上下 左右
margin:50px 80px 100px 上 左右 下
margin:50px 80px 100px 120px 上 右 下 左
盒模型
标准盒模型:填充(宽高)+内边距+外边距+边框
IE盒模型(IE低版本):填充(宽高)+内边距+边框
去掉标签自带的间距值
*{margin:0px;padding:0px}
让块级元素水平居中
margin: 0px auto;不能让浮动居中
让文字和图片居中
text-algin:center
text-align:center;对没有设置宽高的块元素和行内元素起作用
让文字和图片垂直居中
line-height=标签的高度
line-height 并不能让图片居中
line-height文字必须不能图片在一起才能居中
vertical-algin垂直对齐必须两个以上才能使用 文字和图片在一起可以使用 两个都要有这个标签才能好使
在 HTML 代码中，有时会需要在文字旁边加上一个图标。
默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐

列表
有序列表
<ol>
<li>
<li>
</ol>
无序列表
<ul>
<li>
<li>
</ul>
列表样式
1.list-style-type列表图形
disc实心圆 circle空心圆 square实心方块 decimal阿拉伯数字
lower-roman小写罗马数字 upper-roman大写罗马数字
lower-alpha小写英文字母 upper-alpha大写英文字母 none不使用项目符号
2.list-style-position列表对齐方式
outside外对齐 inside内对齐
3.list-style-image:url()列表图片

浮动
1.float浮动
left左浮动 right右浮动
2.clear 清除浮动
left左浮动 right右浮动 both两边
3.overflow超出内容的显示方式
visible不剪切也不添加滚动条 hidden隐藏
auto添加滚动条 scroll总是添加滚动条
浮动注意事项：
1.谁浮动，谁会在页面上漂浮起来，不占页面面积，叫做脱离文档流
2.当元素浮动，会挡住下面的兄弟元素，要给不浮动的元素设置清除浮动
3.当所有孩子都为浮动，父类类会没有面积，解决办法
(1)给父类添加高度，但是需要计算
(2)添加一个新的孩子，设置清除浮动,如果此标签不显示则是垃圾代码
(3)给父类设置overflow:hidden,撑开高度

display:把行级元素变成块级
选择器
关系选择器
1.ul li{}后代选择器
2.h1,p,a{}并集选择器
3.div>p{}子选择器
4.h1+p{} 下一个兄弟元素
5.h1~p{} 下面的所有兄弟元素
伪类选择器
1.a:link{}没访问的状态
2.a:visited{}被访问过后的效果
3.a:hover{}鼠标悬停
4.a:active{}被选中的效果
写作顺序:hover必须在link之后，active必须在hover之后
伪对象选择器
1.div:before{}css1 在元素之前添加内容
div::before{}css3
2.div:after{}css1 在元素之后添加内容
div::after{}css3
设置清除浮动
.wrap::after{
content: “”; /content必须写，不能省略/
display: block;
clear: both;
}
背景
1.background-color:red背景颜色
2.background-iamge:url()背景图片
3.background-repeat背景平铺方式
repeat平铺(默认) repeat-x水平平铺 repeat-y 垂直平铺
no-repeat不平铺
4.background-position背景图片位置 x y
单位：像素或百分比
方向:left左 right右 top上 bottom下 center中
5.background-attachment设背景固定方式
scroll滚动图片 fixed固定
布局
1.visibility是否隐藏元素
visible元素可见 hidden元素隐藏
2.display 设置元素的显示方法
none隐藏 block块级元素 inline行级元素 inline-block有块和行级样式
隐藏元素的区别：
visibility隐藏元素，面积会保留;display隐藏元素，不会保留面积
定位
1.position定位
static无定位 absolute绝对定位 relative相对定位 fixed固定定位
2.方向
left right top bottom 必须设置其中一种定位
3.z-index 元素的层叠关系
单位：数字，可以为负数，不可以为小数，默认是0
定位区别
1.fixed：会脱离标准流，永远参照body设置位置
2.absolute：会脱离标准流，如果没有父类，参照body设置位置，如果有定位父类，参照父类
3.relative:不会脱离标准流，参照自己定位
注意：只要不参照body设置，我们采用相对定位嵌套绝对定位

表格
<table>表格
<tr>行
<td>单元格
<th>单元格（标题）
属性
1.rowspan合并行 单位：数字
2.colspan合并列 单位：数字
3.cellpadding内间距
4.cellspacing外间距
css样式
放在table内部
1.border-spacing设置外间距值
单位:像素或百分比
2.border-collapse合并边框
separtate边框独立 collapse边框合并
3.empty-cells隐藏无内容单元格
hide隐藏 show显示
表单
1.<input type=“text”> 基本文本框
2.<input type=“password”> 密码框
3.<input type=“radio” name=“sex”>单选框
4.<input type=“checkbox” name=“like”>复选框
5.<input type=“file”> 上传附件
6.<select> 下拉框
<option>学生</option>
<option>老师</option>
</select>
7. <textarea></textarea> 文本域
8.<input type=“submit” > 提交
9.<input type=“reset”> 重置
10.<input type=“button” value=“返回”> 校验
11.<form>表单
action定义路径 method 传值方式get/post
作用：1.提交文本框内容给其他页面 2.让按钮有默认事件
属性：
1.name 给标签起名
让单选和复选框表示选择一类值
让表单跳转可以接到文本框的值name=value
2.value 定义文本里的值
3.checked 让单选或复选框选中
4.maxlenght 设置文本的最大长度
5.readonly 只读
6.disabled 禁用(也不可以传值)

属性选择器
1.img[src]{}属性选择器
2.input[type=text]{}属性选择器
3.div[class~=“a”]{}空格前后找匹配的值
4.div[class^=“a”]{}选择以a开头
5.div[class$=“a”]{}选择以a结尾
6.div[class*=“a”]{}选择包含a的所有值
7.div[class|=“a”]{}选择以a开头并且带“-”符号的
css精灵
也叫css雪碧（css sprites），是一种css图片拼合技术，将网页中的一些背景拼合在一个图片中，再利用背景定位的方法寻找某个图片的位置
优点：
1.减少网页对服务器的请求次数
2.提高浏览器的加载速度
剩余标签
1.&gt代表> &lt代表< &nbsp是空格
回车
2.二级列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
3.内联框架 内联网页
src定义路径
frameborder是否显示边框，0不显示
scrolling是否显示滚动条 yes/no
noresize 是否可调整大小 yes/no
marginheight 调整网页上下间距
marginwidth 调整网页左右间距
剩余css
轮廓
1.outline-color 轮廓颜色
2.outline-width 轮廓粗细
3.outline-style 轮廓粗细线体样式
简写：outline:3px solid red
**********border和outline的区别
1.outline显示在边框的外面
2.outline不兼容IE7以下，border没有兼容性
3.border占元素面积，outline不占面积
css语法与规则
1.@import 导入css
<link href="" rel=“stylesheet”>
2.@charset “utf-8” 修改字符串
3.@font-face 导入字体
******import和link的区别
1.link输入html标签，import属于css属性，所有标签先加载
2.link没有兼容性，import不兼容ie8以下
3.link优先级比import高
页面布局
固定宽度布局
给所有元素设置一个外包，给外包设置margin居中，如果兼容低版本浏览器，宽度为：1000px；
如果不兼容低版本，宽度为：1100-1200px
1.浮动法：设置孩子为左右浮动，设置父类为overflow:hidden
2.定位法：设置父类为相对定位，设置孩子为绝对定位，给高度最高的孩子设置相对定位，撑开父类的面积。（不可以使用overflow：hidden）
（overflow：hidden）只能隐藏position定位基准源于自己或没有position，源于body不行，例如A为源于body，B源于A，Aoverflow有用，A的父标签没有用

   3.转化表格法：设置父类display：table，设置孩子display：table-cell，注意当转化为表格一切样式必须按照表格样式来调，不再是div

变宽布局
给所有元素设置一个外包，外包默认宽度为100%，但是设置min-width来限制缩小范围
1.等比变宽：设置父类为100%，孩子宽度按百分比计算，用浮动和定位都可以
2.单例固定：设置宽度最小的元素为固定像素，设置面积大的元素为百分比，用外边距让出固定宽度的位置，例如：margin-right:-350px;,用浮动和定位都可以。