css介绍
层叠样式表用来美化页面的，讲表现与样式相分离，减少代码写作，提高浏览器加载速度
语法
1.行内样式(不建议使用)
（把属性定义到标签里面）
<h1 style="color:red></h1>
2.内嵌样式
<style>
h1{color：red；font-size：“20px”}
<style>
基本选择器
1.*{}通配符选择器（所有标签）
2.h1{}标签选择器 （有h1就选择h1，有p标记就选择p标记。选择h1即页面上所有h1都被选择，同理）即 .class{ }
3. id选择器 选择id属性 不能重名是唯一的（身份证号码） 名称#开始 即 #id{ }
4. . font{}类选择器 选择class属性 可重复使用（人名字） 名称.开始
3.4.起名字两种方式，为了防止在页面上与标签重复
背景
1.背景图片 background-image ：url（）；
2.背景图片大小 background-size：100% 100%;
background-size：100px 100px;
3.背景重复 background-repeat（默认重复）
no-repeat(不重复) repeat-x（沿x轴重复 横） repeat-y（沿y轴重复 纵）
2.0% 0%
3.0px 0px
4.背景图片位置 background-position
top left right bottom center
background-position: right top; ****
5.background-attachment设背景固定方式
scroll滚动图片 fixed固定
布局
1.visibility是否隐藏元素
visible元素可见 hidden元素隐藏
2.display 设置元素的显示方法
none隐藏 block块级元素 inline行级元素 inline-block有块和行级样式
字体样式
1.color字体颜色
单词：red
十六进制值： #000000（相同的写三个零即可，不需要特殊记忆） #0f0f0f #eee
色阶值：rgb(0，0，0) 0-255
r: red g: green b: blue
(十六进制和rgb需要用到拾色器)
2.font-size字体大小
单位：像素px或百分比% 页面默认12-16px
3.font-weight字体加粗
100-900（细-粗）
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.vartical-algin垂直对齐
top上 bottom下 middle中
css就近原则 注释用* 默认16像素
定义路径的标签
<a>超链接 href定义路径<a href=http://www.baidu.com">超链接1</a>
（要用div去套超链接不要用超链接去套
div<div class="box1">
<div class="box2">
<a>asd</a>
</div>
<a><div></div></a>
</div>）
<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下
边距
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 auto
(auto自适应)
让文字和图片居中 text- algin-center
4.列表样式
1.list-style-type列表图形
disc实心圆 circle空心圆 square实心方块 decimal阿拉伯数字
lower-roman小写罗马数字 upper-alpha大写罗马数字 none不使用项目符号
2. list-style-position列表对齐方式
outside外对齐 inside内对齐
3. list-style-image：url（）列表图片
background-color：red背景颜色
浮动
1. float 浮动 （块级元素不能同行显示，设置浮动就可以了）
left左浮动 right右浮动 （同行最右侧）
2 . clear清除浮动
left左浮动 right右浮动 both两边
3. overflow超出内容的显示方式
visible不剪切也不添加滚动条 hidden隐藏
auto 添加滚动条 scroll总是添加滚动条
浮动注意事项：
1.谁浮动，谁会在页面上漂浮起来。不占页面面积，叫做脱离文档流
2.当元素浮动，会挡住下面的兄弟元素，要给不浮动的严肃设置清除浮动
3.当所有孩子都为浮动，父类类会没有面积，解决办法
（1）给父类添加角度，但是需要计算
（2）添加一个新的孩子，设置清除浮动，如果此标签不显示则是垃圾代码。
（3）给父亲设置overflow：hidden，撑开高度
选择器
关系选择器
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之后
5.背景和布局
选择器
关系选择器
1.u1 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
*面试题：伪类选择器和伪对象选择器区别？
答：伪类：改之前的超链接等 伪对象： 新的标签文本不再是之前的h1
设置清除浮动
.wrap：：after{
content：““；*/content必须写，不能忽略*/
display ：block；
clear：both；
}
背景
1.background-color：red背景颜色
2.background-image：url（）背景图片
3.background-repeat背景平铺方式
repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺 no-repeat不平铺
4.background-position背景图片位置
单位：像素或百分比
方向：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用tr嵌套td..）
<table>表格 块级
<tr> 行 块级
<td>单元格 行级
<th>单元格 (声明标题默认带加粗和居中方式) 行级
属性
1.rowspan合并行 单位：数字（2就是合并2个单元格）
<td rowspan="2">Jane</td> 然后删除同下一行的单元格
2.colspan合并列 单位：数字
<td colspan="2">23</td> 同上
3. cellpadding内间距（撑开table之间的间距值）撑开边框与文字之间的间距值（td与th的内间距）
4. cellspacing外间距（撑开的是table与tr td之间的距离） 撑开框与框之间的距离
内外边距为0两表格之间无空隙
css样式
1.border-spacing设置外间距值
单位：像素或百分比
2.border-collapse合并边框
separtable边框独立 collapse边框合并
3.empty-cells隐藏无内容单元格
hide隐藏 show展示
（行级元素可以同行显示，块级元素不可）
（空格占据位置撑开宽高）
空格键： 
表单
1.<input type="text">基本文本框 行级元素，可同行显示 所有文本框都可以定义名称（""id class 也可以设置border width height等 ）
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>文本域
默认input select textarea都是行级元素，浏览器兼容性问题上传附件会不一样
8. <input type="submit"value="登录">提交
9. <input type="reset">重置（不设置value也会有名字）
10.<input type="button" value="返回">校验
11.<form>表单 会让按钮有对应的事件 【和div是一样的是块级元素，所有文本框和按钮要写在form里，（不写无法运行）其他的div或p标记写不写无所谓】
action定义路径（同src heref）
<form action="index2.html">
method传值方式：GET 默认get去传值
POST 隐藏传的值 POST
提交文本框内容给其他页面让按钮有默认事件
(本地)file:///D：/WEB/work2.html?sex=on&like=on
(外网）http://locaohost(本地服务器)：8443（端口号可以区分项目）/web/work2.html?（?后是传值）sex=on&like=on
file:///C:/Users/jcx/Desktop/VSCode-web/WEB/index2.html?user{name}=%E9%83%BD%E6%98%AF&sex=on&like=on
name=user
【所有表单的内容都是通过name传递的不定义name就传不到】
【用name去传值 接的是文本框里边的值不是外面的值 】【用value去写属性的值】
name=value
属性：
1.name 给标签起名
让单选和复选框表示选择一类值
让表单tz5可以接到文本框的值name=value
2.value 定义文本的值（可以给单选复选定义也可以给输入密码定义）重置页面清除不了value里面的内容
3.checked 让单选或复选框选中（当你不选的时候我默认让你去选一个）checked=checked默认被选中（在HTML5中前后单词一样后面是true or flase 中可以只写checked）
4.maxlength 设置文本的最大长度（ maxlength="5"限制文本框的最大输入值）
5.readonly 只读（值不可以改）
6.disabled 禁用（值不可以改 也不可以传值）
属性选择器(节省代码 减少id class使用)
1.img[src]{}属性选择器 <img src="image/10.jpg" title="点击可以查看新闻页" alt="图片加载失败">
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雪碧（css sprites），是一种css图片拼合技术，将网页中的一些背景拼合在一个图片当中，再利用背景定位的方法寻找某个图片的位置
优点：
1.减少网页对服务器的请求次数
2.提高浏览器的加载速度
剩余标签
1.>代表> <代表<  代表空格 <br>代表回车
2.二级列表
<dl>
<dt>书籍</dt>
<dd>小说</dd>
<dd>漫画</dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
3.<iframe>内联框架
src定义路径
<iframe src="http://www.baidu.com" width="100% height="500px" frameborder="0" scrolling="no"marginwidth="200px"></frame>
frameborder是否显示边框123，0不显示边框
scrolling是否显示滚动条 yes/no
noresize 是否可调整大小 yes/no
marginheight 调整上下间距
marginwidth 调整左右间距 是iframe与里边嵌套页面的距离
剩余css
轮廓
1.outline-color 轮廓颜色
2.outline-width 轮廓粗细
3.outline-style线体样式
简写先后无顺序：outline：3px solid red
****border与outline的区别
border：如照片的四边
outline：如照片的相框 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.定位法：设置父类为相对定位，设置孩子为绝对定位，给高度最高的孩子设置相对定位，撑开父类的面积
3.转化表格法：设置父类display: table;设置孩子 display: table-cell;注意当转化为表格，一切样式必须按照表格样式来调，不再是div
变宽布局：给所有元素设置一个外包，外包默认宽度为100%，但是设置min-width来限制缩小范围随之变大小
1.等比变宽：设置父类为100%，孩子宽度按百分比计算，用浮动和定位都可以
2.单例固定：设置宽度最小的元素为固定元素，设置面积大的元素为百分比，用外边距让出固定的位置，例如：margin-right: -350px;，用浮动和定位都可以
