css样式表

昨日内容回顾:
CSS：层叠样式表

注释: /*写注释*/

语法结构:
选择器 {属性:‘属性值’;
属性1:‘属性值1’;
}

选择器
基本选择器
标签选择器

div {color:red}

id选择器

#d1 {color:red}

类选择器

.c1 {color:red}

通用选择器

* {color:red}

组合选择器
后代选择器

div span {color:yellow}

儿子选择器

div>span {color:red}

毗邻选择器

div+span {color:red}

弟弟选择器

div~span {color:red}

属性选择器
任何标签都可以设置自定义的属性及属性值

			[xxx]
			[xxx='1']
			span[xxx='1']

分组与嵌套

			div,span,p {color:red}
			div,#d1,.c1 {color:red}

伪类选择器

			a:link{}
			a:hover{}
			a:active{}
			a:visited{}
			input:focus{}

伪元素选择器

p:first-letter{font-size:24px}
			p:before {
				content:'#',
				font-size:24px
			}
			p:after {
				content:'?',
				font-size:24px
			}

选择器优先级
行内样式 > id选择器 > 类选择器 > 标签选择器

长宽:

		width
		heigth

字体属性

   	font-family
	font-size
	font-weigth

背景
背景颜色
背景图片
如果背景图片尺寸小于所在的区域尺寸那么默认情况下
是铺满整个区域
可以通过指定参数来控制是否铺满

	no-repeat
	repeat-x
	repeat-y
	center center
	15px	20px
	
		backgroud:背景颜色 背景图片 是否铺满 位置

文字属性

	text-align:center;
	
	text-decoration:none;  主要就是用于去除a标签自带的下划线
	
	text-indent:48px;  用于首行缩进
	
	ul {list-style-type:none}

边框

border-style
border-size
border-color
	
	border:3px solid red;
	border-left:3px solid red;
	border-top:3px solid red;
	border-right:3px solid red;
	border-bottom:3px solid red;
	
	
display
	div {display:none}  不显示不占位
				inline
				block
				inline-block  让行内标签也能设置长宽

画圆

div {border-radius:50%;}

盒子模型

		margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
		border:盒子的包装厚度(边框)
		padding:内部物体与盒子之间距离(文本与边框之间的距离)
		content:物体大小(文本内容)

浮动
只要是页面布局 都会用到浮动

浮动带来的影响:
脱离文档流，造成父标签塌陷

定位
相对定位:相对于标签本身原来的位置
绝对定位:相对于已经定位过的父标签(小米购物车)
固定定位:相对于浏览器窗口固定在某一个位置(回到顶部)

是否脱离文档流:
脱离文档流:
1.浮动
2.绝对定位
3.固定定位

不脱离文档流:
1.相对定位