前端Day06-CSS

0807

文本扩展属性：

8.文本换行属性：设置长单词折行
word-break：(常用) 回到原来的位置上
	normal	默认值，根据浏览器默认换行
	break-all	允许在单词内换行
	keep-all	只能在半角空格或连字符处换行
word-wrap：	新的一行开始折行
	normal	默认值
	break-word	属性允许长单词或url地址换行到下一行
	
9.设置英文大小写的属性：
	text-transform:
		none		根据html显示
		capitalize	首字母大写
		lowercase	全部显示为小写字母
		uppercase	全部显示为大写字母
		
10.透明度属性：
	opacity: ;
		属性值的取值范围0 ~ 1
		0：完全透明
		1：完全不透明
		opacity会使元素及元素里面的内容都会产生透明度的效果
		rgba()背景/文字和transparent(完全透明)都是属性值，给什么属性添加，就会出现透明度的变化

空余空间

white-space：；
	normal	默认值 浏览器忽略空余空间，只保留一个空格
	nowrap	文本不会换行，遇到br才会换行
	pre		空白空间会保留
	pre-wrap保留空白空间，会正常换行
	pre-line合并空白空间，保留换行
	说明：
		指的是页面上所敲的空格和换行符

隐藏属性：

1.overflow： ；
属性：
	overflow-x:;	设置水平方向溢出显示
	overflow-y:;	设置垂直方向溢出显示
属性值：	
	visible		默认值，超出元素框的内容是不可见的
	hidden		超出元素框内容隐藏，无滚动条
	scroll		多出的内容滚动条显示，一直有滚动条
	auto		超出元素框内容隐藏，出现滚动条查看被隐藏的内容
补充属性值(了解)：所有属性都可以添加
	initial;	属性值以默认值显示
	inherit;	继承父元素相同属性的属性值
	
2.单行文本溢出显示省略号
	1.width:; 文本显示宽度的范围；
	2.white-space:nowrap; 设置文本强制在一行显示
	3.overflow:hidden; 设置溢出内容隐藏
	4.text-overflow:ellipsis; 溢出内容以省略号显示

取消默认列表符号：

list-style:none;
	添加列表符号的话，可以用背景图的形式添加；

背景属性：

复合属性：
	background：
1.背景色属性：
	background-color：
2.背景图属性：
	background-image:url();
	网页上的图片形式：
		插入图片：<img src="" >
			属于html结构的标签内容，占结构位置
		背景图片：通过css标签添加，不占结构位置，上面可以显示其他内容，属于修饰性的形式显示
3.背景平铺属性：
	background-repeat:;
		repeat-x  横向平铺
		repeat-y  纵向平铺
		no-repeat 不平铺
4.背景图定位属性：
	复合属性：
		background-position:x y;
		默认值：left top
		只设置一个值，另一个值默认为center
	横向移动：
		background-position-x:;
		属性值：
			属性加单位：px
			法定属性值：left(默认) center right
	纵向移动：
		background-position-y:;
		属性值：
			属性加单位：px
			法定属性值：top(默认) center bottom
5.背景图固定属性：
	background-attachment：
		scroll	默认值，跟随着滚动条滚动
		fixed	固定，不跟随滚动条滚动
	说明：
		1.设置固定属性值，背景图显示位置的参照物就变成了可视窗口
		2.只能看到元素范围内的大背景图片

6.当复合属性和子属性一起使用时，建议先写复合属性，在写单独属性

表格属性：

以下属性添加给table
1.设置单元格之间的间距
	border-spacing:value;
2.合并相邻单元格边框属性
	border-collaspe:;
		collapse 合并
		separate 不合并
	设置了border-collaspe后，border-spacing就失效了		
3.设置列宽
	table-layout:;
		auto  根据内容显示，默认值
		fixed 固定宽度，平均分配
4.隐藏没有内容的单元格
	empty-cells:;
		show  显示
		hide  隐藏
	设置bordedr-collapse属性之后，empty-cells就失效了
5.设置表格标题的位置
	caption-side:;
		top  默认值，上
		bottom  下

鼠标指针形状的属性：

1.设置鼠标指针的属性：
	cursor:;
		auto 默认，原始样式
		pointer  小手
		move  移动
		text  文本
		crosshair  十字架
		wait  等待
		help  帮助
2.自定义鼠标指针形状:
	cursor:url(),pointer;
	图片使用.ico兼容最好