CSS学习笔记

CSS:

html:	内容(文本框)
css: 	样式（给文本框设置长度 宽度 颜色）

css的优势：

内容与样式分离
css样式更加丰富
提高浏览器的加载速度，节约网络带宽 减少代码量
利于SEO优化

基本语法 写在head中

标签选择器：		直接编写标签名
	<style type="text/css">
		h1{
			color:red;			/* 红色 */
			font-size:20px;		/* 大小 */
		}
	</style>
类选择器：			.class值  可用于多个元素
	.mystyle{
		background-color:green; /* 背景色 */
		font-size:20px;	
	}
id选择器：			#id值 只能用于一个元素
	#myh3{
		background-color:yellow;
	}

引入CSS样式的方式

行内样式：   一般不用  赶时间 应急
内部样式：   head   style
外部样式：	
	导入式：@import url("mycss.css");
	连接式：<link href="mycss.css" type="text/css" rel="stylesheet"/>
两者区别：
	link将css预加载到网页中，再进行编译显示			推荐
	@import 先显示网页结构，再加载css内容

CSS优先级问题： 小范围 覆盖 大范围

	行内>外部>内部
	id选择器>类选择器>标签选择器

复合选择器：

css2:
	后代选择器： 		空格
	交集选择器：		连续书写(没有继承性)
	并集选择器：		逗号 ,
css3:
	层次选择器
		后代选择器  	空格
		子选择器		>
		相邻同辈选择器：  +      只对之后的元素有效
		通用同辈选择器：  ~
	结构伪类选择器	:
		li:first-child  		li:last-child 			li:nth-child(n)
		li:frist-of-type		li:last-of-type			li:nth-of-type(n)
	属性选择器	[]
		input[name=]			选择input标签中 含有name属性的   
		input[name=name值]		可以精确到name值
		input[name^=u]			选择name值以u开头的		name$=xxx  以xxx结尾的    name*=xx name值包含xx的

盒子模型：

作用/意义： 决定不同类型元素之间的位置关系（平面位置、空间位置）
网页元素-类比  盒子
	平面关系		空间关系
	覆盖关系 从下往上： 背景色 < 北京图片 < 元素内容

边框： border

	边框颜色 border-color
		border-color:red yellow blue green; 上 右 下 左  （顺时针）
		border-top-color:blue;
		border-bottom-color:red;
		border-left-color:yellow;
		border-right-color:green;
	边框粗细： border-width	：	medium  thin  thick  10px
		border-top-width
		border-bottom-width
		border-left-width
		border-right-width
	边框样式：border-style:  dotted solid double dashed;
	缩写：		样式 颜色 粗细  同时配置
		border-top:red medium solid;
		border-bottom:
		border-left:
		border-right:

外边距 margin

	margin-top:
	margin-bottom:

内边距 padding

标签：

div: 块级元素	换行
span:内联元素   不换行

样式

font-size:字体大小  	 px em rem cm mm pt pc
font-style: 		normal,  italic/oblique
font-weight:		 bold bolder normal lighter 100-900
text-indent:缩进	 2em
line-height: 100px;
text-decoration:	 underline/overliner/text-though
color: 				英文单词red 十六进制数  rgbcolor:rgba(11,102,15,0.5)  前三个是rgb  a代表透明度0.5
text-shadow: 阴影	横坐标 纵坐标 发散程度
a:hover 悬浮		a:link 未允许 		 a:visited 已经访问过的
鼠标悬浮的样式：  cursor: pointer		点击鼠标时，a:active
	一般建议只写hover    如果要写按照顺序  link,visitied>hover>active
列表前标识 list-style-type:	disc/none/square/decimal/cicle
background:blue url(imgs/fuzhuang.png) right top no-repeat;
圆角边框：border-raduis

标准文档流

组成： 
	块级元素(block level)：		自带换行	div			可以设置宽和高
	内联元素(inline level)：	不换行		span a		没有宽和高
块级元素可以包含内联
块级元素  内联元素相互切换
	display: block | inline | none | inline-block;

浮动：

块级元素-->内联元素：	将不同行元素放置到一行    
浮动：	将不同行元素放置到一行    
	float: none| left | right
	clear: left | right		(还原了块级元素的 换行特性 但没有还原空间)
浮动的元素： 不在标准文档流之中（网页无法识别原有的空间）

溢出：

overflow : visible | hidden | scroll | auto
visible：默认值
hidden：超出部分隐藏
scroll:不论是否超出，都有滚动条
auto：如果超出，有滚动条，否则没有

定位：

position: static(默认值，没有定位) | relative(相对定位) | absolute(绝对定位) | fiexed(固定定位)  个别版本浏览器不支持
	position:relative;		从移动以后的位置看原来的位置   
	left:-100px;     左移100px
	top:-200px;		 上移200px
	position:absolute;	 先判断是否存在 “已定位的祖先元素”
	存在：	  参照父类定位
	不存在：  参照浏览器定位
	绝对定位 会脱离文档流
	position:fiexed;  参照浏览器定位	 	

透明度：

opactity: 0.5
filter:alpha(opacity=50)
浏览器兼容问题  有的浏览器支持opactity   有的浏览器支持filter    所以两个都写

动画：

兼容性问题（部分浏览器不支持）：
	旧浏览器都不支持
	过度浏览器：需要加一些参数
		IE9:  -mx-
		firefox: -moz-
		chrome/safari:-webkit-
		Opera: -o-
	新浏览器一般都支持

变形函数： transform:

	translate(x,y) 		平移
	scale(x,y)    		放缩
	rotate(顺时针角度deg)			旋转
过渡： transition
	transition:width 5s ease-out ;
动画： animation