CSS学习总结
学了有一小段时间前端了，今做个CSS的总结！
CSS简介
详情见CSS入门基础总结
* CSS 指层叠样式表 (Cascading Style Sheets)
* 样式定义如何显示 HTML 元素
* 样式通常存储在样式表中
* 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
* 外部样式表可以极大提高工作效率
* 外部样式表通常存储在 CSS 文件中
* 多个样式定义可层叠为一
CSS语法
* CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
CSS 注释
* 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
* CSS注释以 "/*" 开始, 以 "*/" 结束。
CSS Id 和 Class选择器
两者的区别：传送门
* HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
* class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
* 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
-
class 和 id 有什么区别
1、class是设置标签的类， class属性用于指定元素属于何种样式的类；
2、id是设置标签的标识。id属性用于定义一个元素的独特的样式。
3、class是一个样式，先定义好， 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。
4、id是一个标签，用于区分不同的结构和内容，就象你的名字， 如果一个屋子有2个人同名，就会出现混淆；id是先找到结构/内容，再给它定义样式；
5、id的优先级要高于class -
那么什么时候用 class 什么时候用 id呢
- 单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
- 如果在页面中要对某个对象进行脚本操作（js），那么可以给他定义一个id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单.
CSS引入方式
插入样式表的方法有三种:
- 外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 多重样式优先级
- (内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
- 注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS 背景
CSS 背景属性用于定义HTML元素的背景。
-
CSS 属性定义背景效果:
- background-color
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
- background-image
body {background-image:url('paper.gif');}
- background-repeat:设置背景图像是否及如何重复
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;/如果你不想让图像平铺
- background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
- background-position
background-position:right top;
CSS文本样式
CSS字体样式
CSS 链接
- 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
- 文本修饰：text-decoration 属性主要用于删除链接中的下划线
- 背景颜色：背景颜色属性指定链接背景色
- 字体颜色：字体颜色属性color
