CSS基础
CSS基础
CSS介绍
CSS Cascading Style Sheets，层叠样式表。
样式定义了HTML元素怎样去显示。
样式一般存储在样式表（Style Sheets）中。
外部样式表可以帮你做很多工作，外部样式表存储在CSS文件中。
使用CSS，你的HTML文档可以用不同的样式输出来显示。
最初HTML标签被设计为定义文档的内容，而布局由浏览器来处理，并非使用格式化标签，为了解决这个难题，W3C（World Wide Web Consortium）这个非盈利的，建立标准的组织，为HTML4.0增加了样式。
CSS允许开发者一下就能控制多个Web页的样式和布局。简单的改变样式，所有与之相关的元素都会自动更新。
CSS基础语法
CSS的语法由三部分组成：一个选择器（selector），一个属性（property）和一个值（value）。
即：
selector{property: value}
选择器是你希望去定义的HTML元素/标签.
每个属性可以有一个值，属性和值由冒号区分开，外面用大括号括起来。
比如：
body{color: black}
如果值为多个单词则用双引号括起来：
p{font-family: “sans serif”}
注意，如果你想指定多个属性，你就必须将每个属性用分号隔开。
如：
p{text-align:center;color:red}
一般在每行只描述一个属性，这样可以增加可读性。
你可以将选择器分组：
h1,h2,h3,h4,h5,h6 {color: green;}
将所有标题元素分组，将所有标题设置为绿色。
CSS注释
浏览器会忽略注释，注释一般以/*开头，以*/结尾。
The Class Selector 类选择器
用类选择器你可以将同一类型的HTML元素定义出不同的样式。
比如你想在你的文档中有两种不同样式的段落，一种是右对齐，另外是居中的。
p.right{text-align:right} p.center{text-align:center}
right和center是类选择器，是自己定义的名字。
你必须在你的HTML文档中使用类属性，才能显示出效果。
比如在HTML中：
<!--使用类属性--> <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p>
注意每个HTML元素只能有一个类属性，指定多个类属性是不符合规范的。
也可以省略标签名称直接去定义，这样就可以在所有的HTML元素中使用了。
下面的例子就能让所有HTML中所有带class="center"的元素居中文字。
.center{text-align:center}
注意不能省略center前面的点。
在HTML中应用的时候：
<p class="center">This paragraph will be center-aligned.</p> <h2 class="center">标题2</h2>
上面两个标签类别不同，但是采用了相同的类属性，都可以。
注意：不要以数字开头作为类的名称，在Mozilla/Firefox中不能正常运作。
The id Selector （id选择器）
使用id选择器你可以为不同的HTML元素定义相同的样式。
下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的。
#green{color:green}
在HTML中使用：
<!-- 使用id选择器 --> <h1 id="green">使用id选择器的标题1</h1> <p id="green">使用id选择器的段落</p>
记住：id选择器是#开头的，而类选择器是.开头的。
下面的样式规则将匹配任何一个带有id属性为"green"的p元素。
p#red{color:red}
上面的规则与h1元素不匹配，不会产生样式效果。
和class一样，id的名称开头也不要使用数字，不然就无法再Mozilla/Firefox中正常运作。
怎样使用CSS
当浏览器阅读样式表，它会依据它（样式表）来格式化文档。
有三种方法可以插入样式表：
外部样式表（External Style Sheet）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。
<link> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
文件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进行保存。
内部样式表（Internal Style Sheet）
当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
内联样式（Inline Styles）
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性。
本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 { color: red; text-align: left; font-size: 8pt; }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 { text-align: right; font-size: 20pt; }
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
样式选择规则
当多个样式应用于同一个元素时，并且它们功能冲突，应该怎样选择实际采用的样式呢？
一般来说所有样式有下面的规则，越往下优先级越高（第四个最有优先性）：
1.Browser default
浏览器默认
2.External style sheet
外部样式表（后缀名为css的一个文件）
3.Internal style sheet(inside the <head>tag)
内嵌样式表（在<head>标签内）
4.Inline style(inside an HTML element)
行内样式（在一HTML元素内）
参考资料
北京圣思园Java Web培训视频002 CSS深入详解。
w3school教程：http://www.w3school.com.cn/
