2.CSS基本样式笔记

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伪类设置清除浮动属性。