html+css基础笔记_CSS样式_part1_2

1.CSS背景样式
属性：
background-color：背景色
background-image：背景图 url背景地址,默认水平垂直铺满背景图
写法：background-image: url(img/喝奶.jpg);

	background-repeat：平铺方式
	属性值：
		repeat-x：x轴平铺
		repeat-y：y轴平铺
		repeat(x,y)：都进行平铺，默认值
		no-repeat：都不平铺
	background-caption：背景位置
	属性值：x y取数值或者单词，注意二者间有空格
		x：left center left
		y：top  center bottom
	写法：（1）background-position: 100px 50px;还可以用百分比写
		   （2）background-position:left top;靠近左上角
	background-attachment：背景图随滚动条的移动方式
	属性值：（1）scroll：背景图随滚动条上下移动，背景位置按照当前元素进行偏移
		      （2）fixed：背景图固定不动，不随滚动条移动，背景位置按照浏览器进行偏移（神奇宝宝）
	写法：background-attachment: fixed;

2.CSS边框样式
border-style：边框的样式
属性值：solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
border-color：边框的颜色

注意：针对某一条边（top,left,right,bottom）进行单独设置，例如：border-right-style: dotted;对右边设置红色虚线！

3.CSS文字样式
font-family：字体类型
属性值：
英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑（‘Microsoft YaHei’），宋体（SimSun）
font-size：字体大小，默认大小为16px
属性值：
xx-small 最小
x-small 较小
small 小
medium 默认值
large 大
x-large 较大
xx-large 最大
写法：（1）px
（2）以上单词（不推荐）
注意：字体大小一般写偶数，可方便对齐！
font-weight：字体粗细
写法：（1）模式：正常（normal） 加粗（bold）
（2）数值：100—900等，（100-500正常粗细，600-900加粗）
font-style：字体样式
写法：（1）模式：正常（normal） 斜体（italic或者oblique）
区别：（1）italic：带有倾斜属性的字体才可以设置倾斜操作
（2）oblique：没有倾斜属性的字体也可以设置倾斜操作
color：字体颜色
属性值：red green blue
4.CSS段落样式(p标签、div都可以)
text-decoration：文本修饰
属性值：
overline：上划线
underline：下划线
line-through：删除线
none：不添加任何装饰
注意：可添加多个文本修饰，用空格隔开
text-transform：文本大小写（针对英文段落）
大写：uppercase
小写：lowercase
首字母大写：capitalize
text-indent:首行缩进
单位：2em（相对单位） 或者 32px
text-align:文本对齐方式
属性值：left center right justify（两端对齐）

line-height:行高（由上边距、字体大小、下边距依次组成，上下边距等价）
	单位：(1)px
		  (2)scale，比例值，跟文字大小成比例
	默认值不是固定值
letter-spacing：字体间距
	单位：px
word-spacing：词间距（针对英文）
	单位：px
强制折行（针对英文和数字）：
	（1）非常强烈的折行：word-break：break-all
	（2）不是很强烈的折行：word-wrap:break-word（当单词长度很大时，会遇到一些空白区域）

5.CSS复合样式
（1）单一样式：只控制一种样式
（2）复合样式：可控制多种样式
写法：通过空格实现，background和border不用注意顺序，font需要注意，最少需要2个，而且有顺序
例如：
background:red url() repeat center;颜色、背景图、位置
border:1px red solid;大小、颜色、样式
font:20px blue;字体大小、颜色（二者必备且有顺序），不能添加color
正确写法：（1）weight style size family
（2）style weight size family
（3）weight style size/line-height family
建议：单一样式和符合样式选择其中一个来写，有时候会出现一些问题；
如果非要写，建议先写复合样式，再写单一样式比较好！如果反过来先写单一再写复合，因为复合包含单一，就会有覆盖！
6.CSS选择器
（一）ID选择器
（1）在CSS中：#elem{}
（2）在html中：id=“elem”
注意：（1）在一个页面中，ID值是唯一的，只出现一次
（2）命名规范，由字母、数字、下划线、中划线组成，命名的第一位不能是数字
（3）命名方式：驼峰表示法、下划钱法、中划线法
（二）CLASS选择器
（1）在CSS中：.elem{}
（2）在html中：class=“elem”
注意：（1）class选择器可以复用（非常好用，建议用）
（2）可以添加多个class样式
（3）多个样式的时候，由样式决定优先级，而不是属性中的顺序决定
（4）写法：标签+类
检查样式是否生效：打开浏览器–F12–element–点击容器–看下面的style
（三）div选择器(tag选择器)
（1）在CSS中：div{}
（2）在html中：

使用场景：（1）去掉某些标签的默认样式
（2）在复杂的选择器中，如层次选择器
(四)群组选择器
通过逗号的方式，连接多个选择器来统一样式，以此达到代码复用！
例如：div,#box2,.title{width:300px;height:300px;color: pink;background-color: black;}
（五）通配选择器
写法：*{}
使用场景：去掉所有标签的默认样式
注意：尽量避免使用，因为会给所有标签添加样式，慎用！！

（六）层次选择器（非常好用！！！）
	后代：M N{}		
	父子：M > N{}
	兄弟：M ~ N{}	表示：当前M往后的所有N标签
	相邻：M + N{}	表示：当前M往后相邻的N标签
	注意：有空格哈！！
（七）属性选择器
	M[attr]{}
	*= :部分匹配
	=：完全匹配
	^=：起始匹配
	$=：结束匹配
	[][][]：组合匹配，例如：div[class][id]{color: gray;}
（八）伪类选择器
	M：伪类{}
	:link			访问前的样式			只能添加给a标签
	:visited		访问后的样式			只能添加给a标签
	:hover			鼠标移入时的样式		可添加给所有标签
	:active			鼠标按入时的样式		可添加给所有标签
	
	注意：（1）如果4个伪类都生效，要按顺序写：l v h a
		   （2）一般网站只这样设置：a{}  a:hover{}	，这2个足以


	：after	:before		通过伪类的方式，运用content属性，给元素“添加”一些文本内容
	 style中写法：div:after{content="good boy"}    
	 
	 :checked	:disabled	:focus	通过针对表单元素
	 
	 结构性伪类选择器：
		 nth-of-type()	nth-child()
		 区别：type：类型
		 	  child：孩子
		 角标是从1开始，1表示第一项，2表示第二项，可选n值，表示0到无穷大，2n为偶数，2n+1奇数
		 写法：li:nth-of-type(3){background-color: red;}
	 
	 	first-of-type：第一个
	 	last-of-type：最后一个
	 	only-of-type：只有一个
	 
	 使用场景：适合同时有很多个相同标签的情况下！！ 

7.CSS继承
文字相关的样式的继承，布局相关的样式不能继承（默认不能，）
8.CSS优先级
（1）相同样式优先级
当设置相同样式时，后面的优先级高，不建议使用
（2）内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同的样式，则后写的引入方式优先级高
（3）单一样式优先级
style行间 >id >class> tag> * >继承
权重依次为：1000 100 10 1
9.CSS盒子模型
组成部分（由内到外）：content padding border margin
快递中： 物品 填充物 包装盒 盒子与盒子的间距

	content：内容区域，由width和height组成
	padding：内边距		padding-top	padding-left	padding-right	padding-bottom
		只写一个值：30px	（上下左右）	
		写2个值：30px	40px（上下、左右）
		写4个值：30px 40px 30px 40px（上、右、下、左）	建议用
	
	margin：外填充
		margin-top	
		margin-left	
		margin-right	
		pmarging-bottom	
	只写一个值：30px	（上下左右）	
	写2个值：30px	40px（上下、左右）
	写4个值：30px 40px 30px 40px（上、右、下、左）	建议用
注意：（1）背景颜色和背景图都会填充到margin以内的区域
	   （2）文字会在content区域内
	   （3）padding不能出现负值
	   （4）margin可以出现负值

box-sizing:
	盒尺寸：可以改变盒子模型的展现形态
	默认值：content-box：width、height	->	content
			border-box:width、height		->content、padding、border	   
	使用场景：（1）不用计算一些值
			   （2）解决一些百分比问题
	
margin叠加：当给2个盒子同时添加上下边距时，会在上下出现叠加问题，则取上下值中较大值作为叠加值，而左右没有。
	结局方案：（1）BFC规范
			   （2）想办法只给一个元素添加间距

	扩展：（1）margin的左右自适应是可以的，但上下自适应不得
		   （2）不设置width和height时，对盒子的影响，会自动计算容器的大小，节省代码

10.标签分类
（1）按类型
block：块 div p ul li h1…
特点：（1）独占一行
（2）支持所有样式设置
（3）不写宽元素的时候，和父元素的宽相同
（4）所占区域是矩形
inline：内联 span a em strong img…
特点：（1）挨在一起
（2）有些样式不支持，例如margin、width、height、padding
（3）不写宽时，宽由内容的长度决定，当没有内容时宽就是0了
（4）所占区域不一定是矩形
（5）内联标签之间有空隙，原因是由写代码时内联标签之间的换行产生的，内联标签要是紧挨着就不会有空隙
解决空隙的方法：令父标签中font-size=0px，则span标签中font-size=10px
inline-block：内联块 input select…
特点：（1）挨在一起，又支持width、height

	注意：布局一般用块标签，修饰文本用内联标签
	
（2）按内容
	flow：流内容
	metadata：元数据
	sectioning：分区
	heading：标题
	phrasing：措辞
	embedded：嵌入的
	interactive：互动的
	查看它们之间关系的网址：http://www.w3.org/TR/html5/dom.html
（3）按显示
	（1）替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，例如：<input type="text"/>和<imag src="1.jpg"/>
	（2）非替换元素：将内容直接告诉浏览器，将其显示出来，例如h1

11.显示框
类型：display:block inline inline-block none
区别：display：none 不占空间的隐藏
visibility:hidden 占空间的隐藏

12.标签嵌套规范

ul	li
dl	dt	dd
table	tr	td
（1）块标签可以嵌套内联标签
（2）块标签不一定能嵌套块标签
	例如：<p><div></div></p>是不允许的！段落是不能嵌套文本的！！
（3）内联标签不能嵌套块标签，a标签是个例外，可以嵌套块标签！但是不能a嵌套a

13.溢出隐藏
overflow:
visible：默认
hidden 超出区域就截断
scroll 超出区域上下左右出现滑动条
auto 超出区域只有上下的滑动条
overflow-x或者-y 只让一个轴出现滑动条

14.透明度与手势
opacity：0 ~ 1 0：透明（占空间） 0.5：半透明 1：不透明

注意：0占用空间，且所有子内容都会跟着透明

为了解决子内容不跟着透明，方法如下：
rgba():0 ~ 1
	写法：background: rgba(255,0,0,0.5);
	只针对背景，不针对文字，最后一个为0，则背景为白色
cursor:手势
	属性值：
			默认箭头：default
		    四周箭头：move
			帮助：help
			手：pointer

自定义实现手势：
	准备图片的格式为：.cur	.ico
写法：cursor: url(./img/1.ico),auto;比较难找这种类型的图片

15.最小、最大宽、高
min-width min-height
max-width max-height

注：强化对百分比单位的理解

换算：以“父容器”的大小进行换算，是父容器

使用场景：一个容器适应屏幕的高
容器加height：100%		body：100%		html:100%

例如：html,body{height:100%;}
	.container{height:100%}
	自适应页面高度！！！

16.CSS默认样式
有些标签有默认样式，有些没有
没有默认样式：div span…
有默认样式：body h1 p ul…

	body:margin:8px
	h1:margin:上下21.44px	font-weight:bold
	p:margin:上下16px
	ul:margin:上下16px	padding:左40px
		默认点：list-style:disc
	a:text-decoration:underline横线

17.CSSrest
*{margin:0;padding:0}
优点：不用考虑哪些标签没有默认的margin和padding
缺点：稍微的影响性能

ul{list-style:none}去掉点点
a{text-decoration:none}去掉横线

img{display:block;}
问题的现象：图片和容器底部有一些间隙
产生的原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐
解决方法：在img中设置样式：vertical-align:bottom消除间隙，推荐使用
		或者 在img中设置样式：display:block转为块，消除内联
写具体页面/布局效果时：
		（1）写结构
		（2）CSS重置样式
		（3）写具体样式
		
常见CSS重置参照网址：http://blog.csdn.net/brain_bo/article/details/81560444