前端学习笔记2-1 CSS

参考个人文章：http://www.zhuzhuman.com/nav-1/type-5/article/5.html

CSS 全称：“层叠样式表”（Cascading Style Sheets）###

CSS用于定义HTML内容在浏览器内显示的样式，如文字大小，颜色，加粗，背景，位置，行高等等。
CSS3中新加了许多样式，还增加了动画。

1-1 CSS代码语法

例：p{color:red;}
css代码有两部分组成：选择符和声明。
p：选择符。
	指页面里的p标签，选择符不仅能直接用标签名，还可以通过标签的id获取：#id名；class获取：.class名；等等
{color:red;} 
	{}里面为声明。用来写样式，声明由属性和值组成，属性和值用英文“:”隔开，
	多条声明之间用英文“;”隔开，
	最后一条声明可不加“;”，但为了方便修改常加上去。
	为了方便阅读，可将每条代码单独写一行。
	color属性(字体颜色)。red是属性值。

1-2 CSS可以写在哪些地方

css书写分三种：内嵌式，嵌入式，外链式。

1-2-1 内嵌式

<p style="color:red;font-size:12px;">内嵌式</p>

把css代码直接写在html元素的开始标签的style属性里面，书写规则同上。

1-2-2 嵌入式

<style type="text/css">
	#myp{
		color:red;
		font-size: 12px;
	}
</style>

把css代码写在style标签里面，style标签一般放在head标签里面，其中#myp是根据id名获取的标签，某个标签起了id名myp，所以可以直接用#myp获取。

1-2-3 外链式

将样式写在一个.css类型的文件里面，然后使用link标签将该文件引入到页面里面。

/* 以.css结尾的文件，命名mycss.css */
#myspan{
	font-weight: bold;  /* 字体加粗 */
	font-family: "宋体"; /* 字体是宋体 */
}

另外一个html文件，命名test.html;

<link rel="stylesheet" type="text/css" href="../css/mycss.css" />

1. link标签一般放在head标签里面。
2. rel=“stylesheet” type="text/css"是固定写法，用来声明引入的是什么文件。
3. href="…/css/mycss.css" 是css文件的路径，可以放绝对路径和相对路径，
   绝对路径是指：“http://www.forexample.com/css/mycss.css”这种类型，
   还有一种绝对路径是“/css/mycss.css”这种是省略了html文件当前所在的域名。
   还有一种绝对路径“//www.forexample.com/css/mycss.css”，这种是省略了协议头，路径的协议头和页面协议头一样，即：页面是http，那该路径也是http，页面是https，该路径也是https
   本例中使用的是相对路径，…/是指html文件的上一级文件夹。./或者不写是指当前级别文件夹，…/css/mycss.css 是指：上一级文件夹 下的 css文件夹 下的 mycss.css文件。

1-2-4 三种样式的写法的优先级

如果一个元素分别用这三种方法定义了不同的字体颜色，那么这个字体显示哪一种颜色呢？
从本质上讲：元素样式是根据其权值来衡量的，权值高的优先显示。(权值后面会有解释)
如果先不考虑权值，三种样式优先级别：
内嵌式 > 嵌入式 > 外部式
即会显示内嵌式定义的那个颜色。(可以理解为就近原则，内嵌式离该标签最近，所以优先显示)

1-3 选择器

1-3-1 标签选择器

直接以标签名为选择符，例：

div{
	width:100px;
	height:100px;
}

1-3-2 ID选择器

给标签加一个id名(注：id名具有唯一性，一个html里面id名不能重复)，css书写用“#”+“id名字”例：

<div id="mydiv">举个例子</div>

相应的css书写：

#mydiv{
	width:100px;
	height:100px;
}

1-3-3 类选择器

给标签加一个class名(注：class名不具唯一性，一个html里面的标签可以起相同class名，一个标签也可以起多个class名)，css书写用“.”+“class名字”,类选择器可以修改所有叫该class名的标签样式。例：

<div class="example mydiv">举个例子</div>
<p class="example">举个例子</p>

相应的css书写：

.example{ /* div和p字体样式都会变为红色 */
	color:red;
}
.mydiv{ /* div背景为黑色 */
	background:#000000;
}

1-3-4 子选择器

用于指定标签元素的第一代子元素(儿子)，写法：父元素+“>”+第一代子元素。例

<style>
	#box>ul{ /* div下的ul的外填充为0 */
		margin:0;
	}
	#box>.myp{ /* #box下所有.myp字体颜色为红色 */
		color:red;
	}
</style>
<div id="box">
	<ul id="list">
		<li></li>
	</ul>
	<p class="myp">段落一</p>
	<p class="myp">段落二</p>
</div>

1-3-5 包含(后代)选择器

用于指定标签的所有后代(包括后代的后代)。写法：父元素+“ ”+子元素

<style>
	.box span{ /* .box下的所有span标签字体颜色都能变为红色(不止第一代子元素)。 */
		color:red;
	}
</style>
<div id="box">
	<span>文本一</span>
	<p class="myp">
		<span>文本二</span>
	</p>
	<p class="myp">
		<span>文本三</span>
	</p>
</div>

1-3-6 通用选择器

作用于html里面所有标签。写法：“*”

*{ /* 说有标签的外边距为0，内填充为0 */
	margin:0;
	padding:0;
}

1-3-7 伪类选择器

书写方式：元素+“:”+伪类名。
常用的a标签：

a:hover{/* 这个a标签鼠标滑过是字体变为红色 */
	color:red;
}

a标签还有其他伪类,顺序为：a:link > a:visited > a:hover > a:active
其他标签也有:hover伪类。(IE6不支持a以外其他的伪类；IE6以上支持所有标签的hover伪类)
#####1-3-8 分组选择器#####
当一些标签拥有共同的样式，一个个写太麻烦，可以使用分组选择符。书写方法：元素+“,”+元素+“,”+元素+“,”+元素 等

h1,span,p,#mydiv,.box{
	color:red;  /* 上面这些标签的字体都为红色 */
}

1-3-8

书写方法：元素+条件元素

<style>
	div#mydiv{ /* 拥有id名叫mydiv的div有1px的黑色边框 */
		width:100px;
		height:100px;
		border:1px solid #000;
	}
</style>
<div></div>
<div id="mydiv"></div>

1-4 影响样式的因素

元素样式都由哪些因素影响？

1-4-1 继承

css的某些样式具有继承性，拥有这些样式的元素的子元素也会具有这个样式，比如：color(对a标签无效？)，

<style>
div{ /* div字体为红色，里面的p标签颜色也为红色，但里面的a标签好像不会变红，需单独给a加该样式*/
	color:red;
}
</style>
<div>
	1
	<p>2</p>
	<a href="http://baidu.com">3</a>
</div>

1-4-2 权值

前面讲到，样式显示本质是显示权值高的的那个样式。
不同选择符的权值不同：
1. 继承：权值为0.1
2. 标签、伪类、伪对象：权值为1
3. 类选择符、属性选择符：权值10
4. id选择符：权值100
5. 内联样式：权值1000
6. !important : 权值无穷
#mydiv .box p{} → 权值伪100+10+1=111。

1-4-3 层叠

同一元素，不同css样式，权值也一样。根据先后顺序，最后应用最后那个样式，类似就近原则。可以理解为后面覆盖了前面的样式。

p{
	color:blue;
}
p{ /* 显示这个样式 */
	color:red;
}

1-4-4 重要性!important

!important 设置最高权值

p{	/* !important写在;前面 */
	color:red!important;
}

1-5 CSS常用的样式

1-5-1 最常见样式

1. 宽：width:300px; 最小宽度：min-width:100px；
2. 高：height:200px; 最小高度：min-height:100px;
3. 背景：background:#000000;还可跟图片：background:url(’ ') 2px 3px repeat-x;(背景图 x方向偏移量 y方向偏移量 重复方式)
4. 边框：border:1px solid #cccccc; (边框线大小 边框样式实线 边框颜色)
5. 外边距：margin:10px;
6. 内填充：padding:5px;
7. 字体颜色：color:#333333;
8. 字体大小：font-size: 12px;
9. 行间距： line-height: 20px;
10. 浮动：float:left;
11. 定位：position:relative; left: 10px; right: 5px;
12. 溢出样式：overflow: hidden;
    #####1-5-2 会用到的样式#####
13. 字体：{ font-family: “宋体”; }
14. 粗体：{ font-weight: bold; }
15. 斜体：{ font-style: italic; }
16. 上划线：{ text-decoration: overline; }
17. 删除线(中划线)：{ text-decoration: line-through; }
18. 下划线：{ text-decoration: underline; }
19. 段落缩进：{ text-indent: 2em; }
20. 中文/字母间距：{ letter-spacing: 5px; }
21. 英文词间距：{ word-spacing: 3px; }
22. 块状元素里面的文本、图片对齐：{ text-align: left; }
23. 垂直对齐方式：{ vertical-align: top; }
24. 文本换行：{ word-wrap: break-word; }
25. 对象中空白处理：{ white-space: nowrap; }强制在一行显示
26. 文本大小写：{ text-transform: capitalize; }首字母大写
27. 光标样式：{ cursor: pointer; }
28. 光标颜色：{caret-color:red;}
29. 遮罩滤镜：{ opacity: 0.8; f i l t e r:alpha(opacity=80); } 用来控制透明度，f ilter为IE私有滤镜