css2
CSS
1.什么是CSS
a) 层叠样式表
2.css的作用
a) 为了修饰页面中html标签的显示效果.
如何使用CSS。
第一种CSS使用方式： 内联式/内嵌式(标签内部)
格式: <标签 style=”CSS样式”></标签>
第二种CSS使用方式: 嵌入式 （页面内部）
格式: <style>
/*css的相关样式设置*/
</style>
第三种CSS使用方式: 外链式 (外部链接 link标签)
格式: <link href=”url地址” rel=”stylesheet” type=”text/css” />
第四种CSS使用方式: 导入式 (外部文件 style @import语法)
格式: <style>
@import url(css文件路径) ;
/*其他的CSS样式*/
</style>
CSS的语法格式:
选择器{CSS属性名:值;CSS属性名称:值;CSS属性名:值...}
CSS选择器的类型:
1.HTML选择器
页面中素有的HTML标签都对应一个标签名称的选择器,可以直接使用该选择器选中页面所有同名标签
2.CLASS选择器(类选择器)
第一步：在标签内添加class属性，同时定义值，推荐使用英文字母和下划线
第二步: 在CSS书写区域使用.加上定义的class属性值即可选中该选择器所在的所有元素
3.ID选择器（只能单选）
第一步：在标签内添加id属性，同时定义值，推荐英文字母下划线
第二步：在CSS书写区域使用#加上定义的ID属性值即可选中该选择器所在的那一个元素
4.组合选择器
组合选择器不是什么新的选择器类型，只是多个选择器如果使用相同的属性，我们可以使用逗号将多个选择器分隔，然后定义一个样式即可。
选择器,选择器,选择器...{css属性...}
5.关系选择器
如果标签存在嵌套，那么他们之间就有一种嵌套关系,如果想选中标签内部的其他标签，可以使用[父标签 指定标签]的方式选中该标签内部的指定类型标签
选择器1 选择器2{CSS样式}
选中选择器1内部所有符合选择器2的元素 设定样式
6.伪元素选择器、
伪元素不是真正的元素，而是一个元素的不同状态而已
我们可以使用元素:状态的方式选中某个元素的不同状态，这种选择方式就是为伪元素选择器.
常见的伪元素使用
a:link{color:red} 不点击状态
a:hover{color:yellow} 鼠标经过状态
a:active{color:green} 连接点击时状态
a:visited{color:#000000} 连接被访问过后的状态
注意:其他的元素由于不是超链接 所以只能使用hover状态的伪元素选择器（仅IE8以上和其他非IE浏览器）
7.通用选择器
作用:同时选中页面总所有的标签. 主要用于清除浏览器默认样式。
CSS属性
1.字体属性：
Color ：
Font-family:
Font-size:
Font-style:是否斜体 italic
font-weight:800或者bold表示粗体
Text-decoration: 划线
underline overline Line-through none 没线 blink闪烁火狐低版本
Text-shadow 设置文本阴影效果
单阴影 text-shadow: 颜色 水平（px）垂直（px）模糊程度（0、px）
模糊阴影 text-shadow:颜色 0 0 模糊程度（px）
多阴影 text-shadow: 单阴影,单阴影,....
Line-height: 设置文本的行高
1.设置单行的行高（px）
2.设置单行文本的垂直居中 （设定行高=元素高度）
2.文本属性
Text-indent: 首行缩进 一般用2em
Text-overflow : 设置超出文本的处理方式：
需和overflow和white-space 联合用
clip 切割 ellipsis 以...代替超出部分
Text-align;水平对齐 left right center
vertical-align：垂直居中对齐 bottom top middle
注意:该属性仅对内联元素有效，内联元素无法设置宽高.
Writing-mode： 文字书写（仅IE浏览器）
Lr-tb： Tb-rl :
White-space： 是否换行
nowrap 强制不换行属性
背景属性:
Background-color:
Background-image:
Background-image:url(图片地址)
Background-repeat:背景图片是否重复.
repeat no-repeat repeat-x repeat-y
Background-position：图片位置
background-position: 水平位置 垂直位置
水平位置: 像素/left、center、right/百分比
垂直位置: 像素/top、center、bottom/百分比
Background-attachment:图片是否滚动
scorll 滚动 fixed不滚动
Background:所有背景属性（无顺序）
尺寸属性:
width： 元素宽度
Min-width:最小宽度
Max-width::最大宽度
height： 元素高度
Min-height：最小高度 >=指定高度
Max-height：最大高度 <=指定高度
注意： min-height和max-height比较常用，而min-width和max-width由于块状元素的特点，所以很少使用S
盒子模型的组成：
边框属性：border
Border: 设置4个边的宽度px 风格style 颜色color
-----------------------------------------------------------------------------
Border-width ：4个边宽
Border-color：四个边色
Border-style:4个边风格
-------------------------------------------------------------------------------
Border-top: 顶部边的宽 风格 色
Border-bottom：底部边
Border-left:左侧边
Border-right：右侧边
-------------------------------------------------------------------------------
Border-top-width: 顶部边宽
Border-top-style: 顶部边风格
Border-top-color: 顶部边色
Border-bottom-width:
Border-bottom-color:
Border-bottom-style:
Border-left-width:
Border-left-color:
Border-left-style:
Border-right-width:
Border-right-color:
Border-right-style:
内部补白：padding
Padding: 同时设置四个边的内部补白
格式1：padding :值
格式2：padding：值1 值2
格式3：padding:值1 值2 值3
格式4：padding: 值1 值2 值3 值4
Padding-top：顶部内补白
Padding-bottom：
Padding-left：
Padding-right：
内容：
Content: 用于设置元素内容部分
Content:after{content:内容;}/ Content:before{content:内容;}
列表属性：
List-style: 类型（实心圆disc/有序decimal/没有none）//位置
List-style-type：disc;序号类型
List-style-image: url(路径);/none 没有图片
List-style-position:inside/outside; 列表序号位置
定位属性:
Position: 设置元素的定位方式
absolute 绝对定位
1.1脱离文档流，不受干扰.
1.1无参照物，依照body进行绝对定位
1.1有参照物，按参照物进行绝对定位.(具有嵌套关系)
2.1参照物要求1.该元素设置了定位方式 绝对或相对 2.和需要绝对定位元素之间具有嵌套关系
Relative 相对定位
元素以自己当前的位置作为参考的定位
fixed 绑定定位
left： 设置定位时的左侧距离
right： 设置定位时的右侧距离
top： 设置定位时的顶部距离
bottom： 设置定位时的底部距离
z-index： 设置定位元素的层级关系(Z轴设置)
布局属性：
Overflow: 设置内容超出元素的处理方式（宽高都设定）
visible 溢出可见
auto 内容少于元素宽高，正常显示；
大于内容宽高，滚动条
hidden 超出隐藏
scroll 一直有滚动条(不一定有滑块)
Overflow-x：
Overflow-y:
Visibility: 设置元素是否显示
inherit 继承显示
hidden 元素隐藏
visible 元素显示
display： 设置元素的显示方式：
block：显示块状
Inline:显示内联
None: 不显示
Inline-block:行内块状元素
Table-cell:表格单元格.（为了垂直居中）
Float: 设置元素浮动样式
Left right none 不浮动
Clear 清除浮动
left 清除左浮动 right 清除右浮动 both 清除两侧的浮动
注意:如果元素设置了float属性，那么他的display属性将失效.
