CSS核心属性和浮动

目录
一、CSS属性组成和作用
二、CSS字体类属性
三、CSS文本类属性
四、CSS列表类属性
五、CSS背景属性
六、CSS浮动属性

---

一、CSS属性组成和作用

1.1 每个CSS样式都必须有两部分组成：选择符和声明
注：声明又包括属性和属性值
1.2 CSS属性：属性爽死指定选择符具有的属性，他是css的核心，css2共有150多个属性
1.3 css属性值：属性值包括法定属性值和常规数值加单位或颜色值

---

二、CSS字体类属性

2.1 字体类型
	2.1.1 语法
		{font-family：字体1 字体2 字体3；}
		例如：font-family："微软雅黑"，"宋体"；
	2.1.2 说明
		浏览器首先会寻找字体1、如存在就使用改字体来显示内容，
		会按1、2、3依次往下；如果都不存在，则按系统默认字体显示；
		当字体是中文字体时，需要加双引号；
		当英文字体时，需加双引号（“times new roman”）
		当英文字体只有一个单词组成是不加双引号；如（arial）
		windows中文版本操作系统下，中文默认字体为宋体或者新宋体，
		英文字体默认为arial，新推出的版本也默认为微软雅黑
2.2 文本大小
	2.2.1 语法
		{font-size：数值；}
		例 div{font-size：12px；}
	2.2.2 说明
		属性值为数值型时，必须给属性值加单位，属性值为0时除外
		单位还可以是pt，在印刷区域广泛使用9pt=12px
		默认情况下，1em=16px，0.75em=12px
		em表示元素字体高度，em值是根据父元素值来确定，em单位可省略
		如：font-size：12px；line-height：2；则行高为24px
	2.2.3 拓展
		xx-small=9px；x-small=11px；small=13px；medium=16px；
		large=19px；x-large=23px；xx-large=27px
2.3 文本颜色
	2.3.1 语法
		{color：颜色值；}
		例如：div{color：red；}
	2.3.2 说明
		用十六进制表示颜色值，例如：color：#f00
		用rbg表示，color：rbg（value，value，value）
		三原色三组数字相同时，可以缩写为三位
		rgba（value，value，value，value）css3新增属性，rgb三原色，a表示透明度
2.4 加粗
	2.4.1 语法
		{font-weight：bolder/bold/normal/100-900}
	2.4.2 说明
		bolder（更粗的）/bold（加粗）/normal（常规）
		css规范中，把字体的粗细分为9个等级，分别为100-900,900对应最重的字体变形，
		一般500常规字体，600-900加粗字体
2.5 倾斜
	2.5.1 语法
		{font-style：italic（倾斜度小）/oblique（倾斜度大）/normal（常规显示）}
	2.5.2 说明
		italic和oblique都表示倾斜，不过oblique的幅度要大一点，但一般浏览器不明显
2.6 是否大小写
	2.6.1 语法
		{font-variant：normal（正常字体）/small-caps（小型大写字母）}
	2.6.2 说明
		对英文内容起作用
2.7 复合式写法
	2.7.1 语法
		font：style variant weight size family；
		总体设置字体，按以上顺序，style和weight可以互换位置，size和family不可和其他属性位置互换
		如：font：normal normal bold 24px "黑体"
	2.7.2 说明
		这种简写发只有在同时指定font-size和font-family属性时才起作用。
2.8 文字属性简写
	2.8.1 语法
		{font：12px/1.5em "宋体"；}
		font-size/line-height/font-family；
	2.8.2 说明
		简写时，font-size和line-height只能通过斜杠组成一个值，不能分开写

---

三、CSS文本类属性

3.1 水平对齐方式
	3.1.1 语法
		{text-align：left right center justify}
	3.1.2 说明
		left 左 right 右 center 居中 justify两端
3.2 垂直对齐方式
	3.2.1 语法
		{vertical-align：top middle bottom}
	3.2.2 说明
		top 上 middle 中 bottom 下
3.3 行高
	3.3.1 语法
		{line-height：normal/数值；}
	3.3.2 说明
		当单行文本的行高等于容器时，可实现在容器中垂直居中对齐
		当单行文本的行高小于容器时，可实现在容器中中间以上的任意位置的定位
		当单行文本的行高大于容器时，可实现在容器中垂直中间以下任意位置的定位
3.4 文本修饰
	3.4.1 语法
		{text-decoration：none/underline/overline/line-through/blink}
	3.4.2 说明
		none（没有修饰）underline（下划线）overline（上划线）
		line-through（删除线）blink（闪烁）
3.5 首行缩进
	3.5.1 语法
		{text-indent：数值；}
	3.5.2 说明
		text-indent可以取负值，可实现隐藏文本，悬挂缩进
		text-indent属性只对第一行起作用，若第一行不是文本则没变化
3.6 字符间距
	3.6.1 语法
		{letter-spaing：value；}
	3.6.2 说明
		控制英文字母和汉字的字距
		每个文字以及字母之间的间隔
3.7 词间距
	3.7.1 语法
		{word-spacing：normal/数值；}
	3.7.2 说明
		控制英文单词词距 通用于英文词和词之间的间距
		完整的单词之间的间隔，不是字母之间
3.8 文本流控制
	3.8.1 语法
		{layout-flow：horizontal/vertical-ideographic；}只支持IE浏览器
	3.8.2 说明
		horizontal 自左向右
		vertical-ideographic 自上而下，自右向左
3.9 控制文本大小写
	3.9.1 语法
		{text-transform：none（默认值）/capitalize（每个单词首字母大写）
		/uppercase（都为大写字母）/lowercase（都为小写字母）}
3.10 文本阴影
	3.10.1 语法
		{text-shadow：value，value，value，#f00；}
	3.10.2 说明
		依次为 水平偏移值 垂直偏移值 模糊的半径 阴影的颜色

---

四、CSS列表类属性

4.1 定义列表符号样式
	4.1.1 语法
		{list-style-type：disc（实心圆）/circle（空心圆）/square（方块）/
		none（去掉符号）}
4.2 使用图片作为列表符号
	4.2.1 语法
		{list-style-image：url（路径）}
4.3 定义列表符号的位置
	4.3.1 语法
		{list-style-position：outside（外边）/inside（里边）}
	4.3.2 说明
		去掉列表样式 list-style-type：none
4.4 边框
	4.4.1 语法
		{border：粗细（数值+单位）颜色 线型（solid/dashed/dotted/double）；}
	4.4.2 说明
		solid 实线 dashed 虚线 dotted 点状线 double 双线

---

五、CSS背景属性

5.1 背景颜色
	5.1.1 语法
		选择符{background-color：颜色值；}
		简写：background：color值；
5.2 背景图片的设置
	5.2.1 语法
		{background-images：url（路径）；}
	5.2.2 说明
		网页上有两种图片形式 插入图片、背景图
		插入图片属于网页内容，也就是结构
		背景图属于网页的表现，背景图上可以显示文字、插入图片、表格等
5.3 背景图片的显示规则
	容器尺寸等于图片尺寸，背景图片正好显示在容器中
	容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素
	容器尺寸小于图片尺寸，只显示元素范围以内的背景图
5.4 背景图片平铺属性
	5.4.1 语法
		选择符{background-repeat：no-repeat/repeat/repeat-x/repeat-y}
	5.4.2 说明
		no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺
5.5 背景图片的位置
	5.5.1 语法
		{background-position：值1 值2；}
		{background-position：left/center/right/数值/top/bottom；}
	5.5.2 说明
		水平方向上对齐方式（left/center/right）
		垂直方向上对齐方式（top/center/bottom）
5.6 背景图片缩写
	5.6.1 语法
		{background：属性值1 属性值2 属性值3；}
	5.6.2 说明
		background：#背景色 url（路径） no-repeat 水平位置 垂直位置
5.7 背景图的固定
	5.7.1 语法
		选择符{background-attachment：scroll（滚动）/fixed（固定）；}
	5.7.2 说明
		fixed 固定，不随内容一块滚动
		scroll 随内容一块滚动
5.8 背景大小
	5.8.1 语法
		{background-size：数值/百分比/auto/cover/contain；}
	5.8.2 说明
		第一个值设置宽度 第二个至设置高度
	5.8.3 兼容IE的方法
	background-image:url('file:///F:/test/images/flashbg.jpg');
	background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');

---

六、CSS浮动属性

6.1 浮动含义
	float定义网页中其他文本如何环绕该元素
6.2 float
	6.2.1 属性值
		left元素活动浮动在文本左面
		right 元素浮动在右面
		none 默认值，不浮动
	6.2.2 特点
		默认的常规文档流：页面内容从上到下，从左到右排列。div块换行显示
	6.2.3 浮动的三大显示特征
		div块元素失去“块状”换行现实特征，变为行内元素
		紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示
		占据行内元素的空间，导致行内元素围绕显示
6.3 clear
	6.3.1 含义
		规定元素的哪一侧不允许其他浮动元素
	6.3.2 属性值
		none 默认值。允许浮动元素出现在两侧
		both 在左右两侧均不允许浮动元素
		left 在左侧不允许浮动元素
		right 在右侧不允许浮动元素
6.4 解决高度塌陷
	6.4.1 方法一
		给父元素添加一个声明overflow：hidden
	6.4.2 方法二
		在浮动元素下方添加空div，并给该div添加声明
		clear：both；height：0；overflow：hidden（或font-size：0）