1、CSS概念
Cascading Style sheet 层叠样式表 : 层叠性
2、CSS应用
1)优先级
- 样式权重: 对于同一个元素,只使用权重高的样式
- !important: 10000
- 行内: 1000
- id: 100
- 类: 10
- 标签: 1
2)文本样式
/*水平方向文本对齐方式*/
text-align
/*行高 一行文本的高度: 行高与容器高度一致时,容器中的内容会垂直居中*/
line-height
/*字体间距*/
letter-spacing
/*首行缩进*/
text-indent
/*调整垂直方向对齐方式:调整一行内容中某个字的垂直位置*/
vertical-align
/*文本修饰线*/
text-decoration
/*首行缩进两个字符*/
text-indent:2em;
/*设置文本框的修饰线形状:
underline,overline,none
3)背景样式
background: 背景
background-color:背景颜色
background-image:背景图片
background-repeat:背景平铺方式
background-position:背景图片位置
background-size:背景图片大小
/*背景样式*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度;
平铺方式:
no-repeat(不平铺) repeat(全平铺) repeat-x(水平平铺) repeat-y(垂直平铺)
背景位置:
1.像素值
2.百分比
3.关键字(水平:left center right) (垂直:top center bottom)
设置多张背景图片:
background属性后的内容用逗号分隔
3.浮动
1)精灵图:
图片整合技术(css sprites),就是将很多的小图片整合到一张大图上。使用 的时候通过背景属性,调整在一个div框中显示的整个大图的某一点位置。
2)标签的分类
- 常用块状:div p h1-h6 table ul li ol li hr
在没有div之前,一般都是用表格做页面的布局。但是不能满足我们关于定位的需求。 - div : 块状标签,层级标签(页面的布局),没有语义的标签,语义由我们开发者设 置。默认宽度为 100% ,高度为0
- 行内标签(inline): 不能设置宽高(img 和input 标签可以设置宽高 置换元素),可以在 一行内排列。初始宽高都由内容撑起来。
- 常用:input span img a br
- span: 行内标签 行级文本容器。
- 行内块状标签(inline-block):既有行内标签特征(挤在一行),又有块状标签特征(可以设
置宽和高) - display:
- none(不显示)
- block 块状
- inline 行内
- inline-block 行内块(既能设置宽高 又可以在一行内排列显示);
3)浮动的特征
- 块状元素浮动:能在一行内排列。失去独占一行的特性。
- 行内元素浮动:可以设置宽高。
float:left 左浮动
float:right 有浮动
float:none 不浮动
注意:实际上浮动只会影响浮动元素下边的元素。当我们做浮动布局时,所有下边的同
级元素都要进行浮动
4)浮动塌陷
概念:当一个(没有设置高度的)元素中所有的子元素都进行了浮动,
此时,该元素的高 度会塌陷为0
解决:
1.直接设置高度;
2.设置overflow属性 hidden/auto;
3.在父元素中在加一个空的div 设置clear:both; 了解
4.通过元素的after伪类设置清除浮动属性。