一、css引入样式
概念 层叠样式表
1.外部样式表 <link rel =“stylesheet” herf=“外部样式表路径（XX.css）”
2.内部样式表 style
3.行间样式：添加style属性 <body style=“”
4.导入样式 @import url（xx.css）
引入方式（外部样式表和内部样式表都在head标签中书写）
1.外部样式表 <link rel =“stylesheet” herf=“外部样式表路径（XX.css）”
2.内部样式表 style
3.行间样式 标签的style 属性
4.导入样式表 @import url（xx.css）
优先级
就近原则，离标签越近就先执行
二、基本选择器权重
命名规范：
1.不能用中文
2.以英文开头、不能用数字开头
3.不能有空格
4.见名知意 方便个人和团队的后期维护和检查
5.驼峰命名法 如果是组合词，从第二个单词首字母大写
选择器{属性：属性值；} =>找到页面上的元素{改变什么属性：变成什么值；}
选择器
1.元素选择器 选择页面上像body、div等元素
2.id选择器 给某一行元素加上id=“xx”加上唯一标识，页面只能出现一次
#xx{属性：属性值；}
3.类选择器 给某一行元素加上class=“xx” ，页面可以多次出现，相同样式的多个元素可以使用同一个类
.xx{属性：属性值}
选择器优先级
id>类>元素
权重：100 10 1
！important> 行间样式 >id
三、层叠样式表的诠释
根据优先级（引入方式/选择器/书写顺序）相同属性相覆盖，不同属性相叠加
四、复合选择器
(无序列表ul li /li /ul
有序列表ol li /li /ol
dl dt 定义列表 /dt dd 列表项 /dd /dl)
后代选择器：.xx xx xx
子代选择器：.xx > xx > xx
并集选择器：xx,xx,xx,xx
交集选择器：eg：<div class=“color font30”>
.color.font30{}
通配符：*
*{
margin:0;
padding:0;
}
五、css常用属性
字体
1.颜色 color（#ff0000,red,rgb(255,0,0）,rgba(255,0,0,0)
2.字体大小(谷歌默认16px 最小12px）
font-size：xx px(像素）;xx%;xx em(倍数，根据父元素表示，是父级元素的多少倍）
3.字体类型
font-family：‘字体样式’;
4.font-style：itaic（斜体），normal（正常）
5.字体粗细
font-weight：xx； 1-600细 ，600-900（bold）
文本
1.文本水平对齐方式
text-align：center（居中），left（左），right（右）
2.文本修饰
text-decoration：underline（下划线）；line-through（删除线）；overline（顶线）；none：什么也没有
自带删除线
text-indent：xx px；xxem （首行缩进）
text-transform（文本转换）：uppercase（大写）
lowercase（小写）；capitalize（首字母大写）
盒模型样式
width：xx px；（宽度）
height：xx px ；（高度）
border-width：xx px（边框宽度）
border-style：solid；dashed（边框样式）
border-color：red；（边框颜色）
border-right（右边框），-left（左边框），-top（上边框），-bottom（下边框）
简写：border：xx px solid color；
六、背景及雪碧图
背景
background:-color(颜色）;-image(引入背景图片background-image:url(图片路径))；-repeat(图片是否重复出现）；-position（背景定位：background-position：x轴（left、right、center、像素、百分比） y轴（top、bottom、center、像素、百分比））；
background：颜色 url（引入背景图片）是否重复（repeat）位置；
雪碧图
图像拼合技术 图像拼合精灵
将整个网页需要的小图标拼合在一张背景图片上，然后通过背景定位显示需要的某一个小图标
优点
1.减少http的请求
2.加载速度更快
七、块级元素&行内元素
块级元素
1.没有设置宽高 默认宽度是一整行
2.可以设置宽高 但是所占有的空间还是一整行
常用的块级元素：
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
行内元素
1.默认不可以设置宽高
2.所占据的空间是内容的大小
3.可以把多个行内元素放在同一行
常用的行内元素
◎ p - 文本段落标签
◎ font - 文本标签
◎ strong - 加粗
◎ b - 加粗
◎ em - 倾斜
◎ i - 倾斜
◎del - 删除线
◎ s - 删除线
◎ ins - 下划线
◎ u - 下划线
行内块元素
1.可以设置宽高
2.它所占据的空间 是内容的大小，或者width决定
3.可以把多个行内块元素放在同一行
常用的行内块元素
◎ img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示
◎ button：按钮
◎ input：输入框，有属性type输入框类型，有属性值（text表示文本输入框，file文件选择器，password密码输入框，email邮箱输入框，number数字输入框，button按钮）。placeholder占位字符，用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时，必须携带name属性，发送请求时的参数名。
◎ label:和input标签绑定到一块使用，有属性for，属性值就是input输入框的id值。checked属性为标签选中状态
◎ select:下拉列表
◎ option:下拉选项
八、浮动原理
正常文档流：自上而下的文档渲染方式
浮动 float
1.脱离正常文档流，但是没有完全脱离（元素可以脱离文档流，但是里面的内容并没有脱离文档流）
清除浮动
子元素浮动，父元素塌陷
解决方法
1.父元素添加固定高度
2.父元素结束标签之前加入空的div，设置如下样式.xx{clear：both}（左 left、右 right、全部 both）
3.利用BFC解决，子元素浮动了，就给父元素添加overflow：hidden
九、盒模型
标准盒子模型
计算范围:内容content（width）+填充（padding）+边框（border）+外边距（margin）
填充：padding-left（right、top、bottom）：xx px ;
padding：xx px（上下）xx px（左右）;
padding：上 左右 下；
padding：上 右 下 左（顺时针方向）；
非标准盒模型（IE6以前版本浏览器）
width=内容content（自动计算）+填充（padding）+边框（border）
box-sizing:content-box(除了内容都要计算，类似于标准盒模型的计算方式)；
box-sizing:border-box(从边框开始计算，类似于非标准盒模型的计算方式）；
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
