在继续学习之前，你需要对下面的知识有基本的了解：
HTML标签原本被设计为用于定义文档内容，如下实例：
这是一个标题
这是一个段落。
样式表定义如何显示HTML元素，就像HTML3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.CSS文件中。CSS样式表极大的提高了工作效率，通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。
当代浏览器都支持CSS。
通常保存在外部的独立的.CSS文件（该文件不属于任何页面文件）可以在多个页面中使用同一个CSS样式表。通过在任何的页面文件中引用.CSS文件，你可以设置具有一致风格的多个页面。
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
当同一个HTML元素定义了多个样式时，应该使用哪个样式？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
查看实例1
Thisheaderis36pt
Thisheaderisblue
Thisparagraphhasaleftmarginof50pixels
结果查看实例2
选择器通常是您需要改变样式的HTML元素。
属性（property）是您希望设置的样式属性（styleattribute）。每个属性有一个值。属性和值被冒号分开。
p{color:red;text-align:center;}为了让CSS可读性更强，你可以每行只描述一个属性:
HelloWorld!
ThisparagraphisstyledwithCSS.
结果在描述颜色的时候，除了使用英文单词red，我们还可以使用十六进制的颜色值#ff0000：
p{color:#ff0000;}为了节约字节，我们可以使用CSS的缩写形式：
p{color:#f00;}我们还可以通过两种方法使用RGB值：
p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}提示：当使用RGB百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位。
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以"/*"开始,以"*/"结束,实例如下:
/*这是个注释*/p{text-align:center;/*这是另一个注释*/color:black;font-family:arial;}
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id"和"class"选择器。
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
以下的样式规则应用于元素属性id="para1":
此段落不受样式的影响。
结果ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示,在CSS中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有center类的HTML元素均为居中。
你也可以指定特定的HTML元素使用class。
在以下实例中,所有的p元素使用class="center"让该元素的文本居中
类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。
除了提到的id和class选择器外，第三种选择器为标签选择器，即以HTML标签作为CSS修饰所用的选择器。
测试教程
结果第四种内联选择器即直接在标签内部写CSS代码。
这四种CS选择器有修饰上的优先级，即：
内联选择器>id选择器>类选择器>标签选择器
插入样式表的方法有三种:
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.CSS扩展名进行保存。下面是一个样式表文件的例子：
hr{color:sienna;}p{margin-left:20px;}body{background-image:url(/images/back40.gif);}不要在属性值与单位之间留有空格。假如你使用"margin-left:20px"而不是"margin-left:20px"，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对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）会被内部样式表中的规则取代
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
层叠次序
当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
提示:如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。
优先级仅由选择器组成的匹配规则决定的。
多重样式优先级顺序
下列是一份优先级逐级增加的选择器列表，其中数字7拥有最高的优先权：
!important规则例外
一些经验法则：
权重计算:
以下是对于上图的解释：
利用选择器的权值进行计算比较，em显示蓝色，我们提供了详细的代码参考：
red
CSS优先级法则：
一般情况下，优先级如下：
（内联样式）Inlinestyle>（内部样式）Internalstylesheet>（外部样式）Externalstylesheet>浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下：
CSS背景属性用于定义HTML元素的背景。
CSS属性定义背景效果：
background-color属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:
我的CSSweb页!
你好编程狮！这是来自W3Cschool教程的实例。
结果CSS中，颜色值通常以以下方式定义:
以下实例中,h1,p,和div元素拥有不同的背景颜色:
CSSbackground-color实例!
该段落有自己的背景颜色。
我们仍然在同一个div中。提示：你可以为所有元素设置背景色，包括body一直到em和a等行内元素。
提示：background-color不能继承，其默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
background-image属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
页面背景图片设置实例:
Hellow3cschool!
结果下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:
Hellow3cschool
该文本不容易被阅读。
结果默认情况下background-image属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
HelloWorld!
结果如果图像只在水平方向平铺(repeat-x),页面背景会更好些:
Hellow3cschool!
结果让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用background-repeat属性:
你好，世界！
W3Cschool背景图像示例。
背景图片只显示了一次，但却干扰了读者！
结果以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用background-position属性改变图像在背景中的位置:
你好，编程狮！
背景图片不重复，设置position实例。
背景图片只显示一次，并与文本分开。
实例中还添加了margin-right属性用于让文本与图片间隔开。
结果提示：为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center；其次，可以使用长度值，如100px或5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
图像放置关键字最容易理解的作用就像其名字的意义。例如，topleft使图像放置在元素内边距区的左上角。
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。
如果只有一个关键字，则会默认另一个关键字为center。
p{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:top;}下面是等价的位置关键字：
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置：
body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:50%50%;}这会导致图像适当放置，其中心与其元素的中心对齐。
body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:66%33%;}
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。
比如，如果设置值为50px100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上：
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为"background":
你好，编程狮！
现在背景图像只显示一次，而且它的位置也远离文本。
在这个例子中，我们还在右边添加了一个边距，这样背景图像就不会干扰文本。
结果当使用简写属性时，属性值的顺序为：:
以上属性无需全部使用，你可以按照页面的实际需要使用.
如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
通过CSS的Text属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等，你可以观察下述的一段简单的应用了CSS文本格式的段落。
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
一个网页的背景颜色是指在主体内的选择：
这是标题1
这是一个普通的段落。请注意，此文本为红色。页面的默认文本颜色在正文选择器中定义。
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为justify，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
CSStext-align实例
注意：重置浏览器窗口大小查看"justify"是如何工作的。
结果提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
text-decoration属性用来设置或删除文本的装饰。
从设计的角度看text-decoration属性主要是用来删除链接的下划线：
也可以这样装饰文字：
这是标题1
这是标题2
这是标题3
结果不建议强调指出不是链接的文本，因为这常常混淆用户。
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
文本缩进属性是用来指定文本的第一行的缩进。
CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度。
在我更年轻、更脆弱的年代，父亲给了我一些建议，从那时起我就一直在想这些建议他对我说，每当你想批评任何人时，只要记住，这个世界上所有的人都没有你所拥有的优势
结果word-spacing属性可以改变字（单词）之间的标准间隔。其默认值normal与设置值为0是一样的。
下面案例中指定段字之间的空间，应该是30像素：
这是一些文字。这是一些文字。
结果指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。
这是标题1
这是标题2
结果指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间
Thisisaparagraphwithastandardline-height.
Thisisaparagraphwithastandardline-height.
Thedefaultlineheightinmostbrowsersisabout110%to120%.
Thisisaparagraphwithasmallerline-height.
Thisisaparagraphwithasmallerline-height.
Thisisaparagraphwithasmallerline-height.
Thisisaparagraphwithabiggerline-height.
Thisisaparagraphwithabiggerline-height.
Thisisaparagraphwithabiggerline-height.
结果
设置元素的文本方向
这个例子演示了如何改变元素的文本方向。
这个例子演示了如何改变元素的文本方向。