1.Css常用三种导入方式
行内样式，内部样式，外部样式
优先级：符合就近原则(覆盖)，浏览器从上到下执行。
行内样式：
1. <body> 2. <!--行内样式--> 3. <h1 style="color: green">我是标签</h1> 4. </body>
外部样式：
1.链接式：html html页面： <!-- 外部样式--> <link rel="stylesheet" href="style.css"> Css页面： h1{ color: darkred; } 2.导入式 Css2.1特性 <style> @import url("style.css"); </style>
内部样式：
1. <!-- 内部样式--> 2. <style> 3. h1 { 4. color: green; 5. } 6. </style>
2.三种基本选择器
id选择器>类>标签选择器
2.1 标签选择器
<style> h1{ color:blue; } </style>
2.2 类选择器
<style> .wei{ color: aqua; } .bo { color: black; } .shuai{ color:blue; } </style>
2.3 id选择器
1. <style> 2. #wei{ 3. color:green; 4. } 5. </style>
3.层次选择器
3.1 后代选择器 选择p标签后的所有标签
1. <style> 2. body p{ 3. background:brown; 4. } 5. </style>
效果：
3.2 子类选择器 选择同一类的标签
1. <style> 2. body>p{ 3. background:brown; 4. } 5. </style>
效果
3.3 相邻兄弟选择器 选择所给类类向下一个同类
1. <style> 2. .wei+p{ 3. background:brown; 4. } 5. </style>
效果：
3.4 通用兄弟选择器 所给类下面的所有同类标签
1. <style> 2. .wei~p{ 3. background:brown; 4. } 5. </style>
效果
4. 结构伪类选择器
结构伪类选择器作用：根据条件筛选
<style> ul li:first-child{ background:yellow; } ul li:last-child{ background:green; } /* 选中p元素的父元素的第一个子元素*/ p:nth-child(1){ background: blue; } /*选中父元素下的p元素的第一个元素*/ p:nth-of-type(1){ background: green; } </style>
效果：
5.属性选择器
1. /*属性名 ： 属性名=属性值（正则表达式） 2. = 绝对等于 3. *=包含这个元素 4. ^=以这个开头 5. $= 以这个结尾 6. */
例子：选中含有www的元素背景改为黄色
1. a[href*=www]{ 2. background: yellow; 3. }
效果：
6.美化网页
6.1 字体样式：
1. font-weight:bolder;//字体粗体 2. font:oblique bolder 12px "楷体";
6.2 文本样式
1.颜色： color 2.文本对齐方式 text-align: center 3. 首行缩进 text-indent: 2em 4. 行高 line-height: 300px; 5. 下划线 text-decoration text-decoration:underline//下划线 text-decoration:line-through//中划线 text-decoration: overline//上划线 text-decoration: none//超链接去下划线 6.图片，文字水平对齐 img,span[vetical-align:middle]
6.3 文本阴影和超链接伪类
<style> a{ /*鼠标默认颜色*/ text-decoration: none; color:black; } a:hover{ /*鼠标悬浮颜色*/ color:pink; } a:active{ /*鼠标按住未释放状态*/ color:green; } </style>
效果：
6.4 列表样式
ul li{ height: 30px; list-style:circle; text-indent: 1em; } ul{ background: cadetblue; } list-style: none 去掉原点 circle 空性圆 decimal 数字 square 正方形
7.盒子模型及圆角和阴影
<style> #box{ width: 300px; border: 1px solid blue; box-shadow: 10px 10px 100px skyblue;//加入阴影 /*将外边距设置为0并且居中*/ margin: 0 auto; } h2{ font-size: 20px; background-color: skyblue; margin: 0; } form{ background: bisque; } div:nth-of-type(1) input { border: 3px solid rosybrown; } div:nth-of-type(2) input{ border:3px solid red; } div:nth-of-type(3) input{ border:3px solid pink; } img{ display: block;margin: 0 auto; border-radius: 50px;//设置圆角边距：左上角 右上角 右下角 左下角 } </style> </head>
效果：
8.display和float浮动
display:block 块元素 line 行内元素 inline-block 是块元素但是可以内联在一行内
folat：左右浮动 left 元素向左浮动 right 元素向右浮动 none默认元素不浮动 例：向左浮动则把其他拿开向左
9.解决父级边框塌陷的问题
9.1 clear
clear：both 左右两侧都不可以有浮动 right 右侧不可以有浮动 left 左侧不可以有浮动
解决方案：
1.增加父级元素高度
2.增加一个空的div标签清除浮动
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; }
9.2 overflow hidder/scroll/after
解决方案：
1.hidder 将多出的长度隐藏
2.scroll设置一个滑动条，多余的放在其中
3.在父类中添加一个伪类after{content:' ';dispaly:bolck;clear:both}使用原理类似于
9.3 定位--相对定位/绝对定位/固定定位
相对定位：相对与原来位置进行位置偏移
xxx{ position: relative left:10px top:-10px}
绝对定位：相对于浏览器或者父级位置进行指定的偏移
固定定位：位置固定不变
