CSS使用

来源：互联网发布：csgo蝴蝶刀淘宝编辑：程序博客网时间：2024/05/18 00:17

翻译源http://www.w3schools.com/css/css_howto.asp

CSS使用
----------------------------------------
当浏览器读取到一个样式表,它将依据它来格式化文档。
-----------------------------------------
三种方式来插入CSS
有三种方法插入样式表:
外部样式表
内部样式表
内联样式
---------------------------------------------------
外部样式表
要将一个样式应用到多个页面，就采用外部样式表。
使用外部样式表,你只需要改变一个文件，就可以改变整个网站的外观。
每个页面必须使用<link>标记链接样式表。<link>标签写在head部分:

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

外部样式表可以在任何文本编辑器编写。文件不应该包含任何html标记。
你的样式表应该保存为.css文件。例子:

 hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

在属性值和单位间不添加空格(如:margin-left:20 px)。正确的写法:margin-left:20px
----------------------------------------
内部样式表
当一个文档应用一个独特的样式，就采用内部样式表。
在HTML页面的head部分定义内部样式，使用<style>标签，如：

 <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

------------------------
内联样式
内联样式不具备样式表的优点，它写在内容和描述之间。尽量少使用它。
内联样式，就是将样式属性直接写在相关的标签内。
可以包含任何CSS属性。
下面的例子显示了如何改变段落的颜色和左对齐：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

------------------
多样式表
如果一个HTML元素（即选择器，请查阅博文中的“CSS语法”）设置了多个不同的样式表，这些值将继承自这些多个的样式表。

（你会不会疑惑如果设置的样式有冲突，哪个才会有效果呢？

这就要考虑继承的先后顺序，以及该以哪个为准了？后面的级联是对继承的另一种说法。

别太疑惑，看看下面的例子。）

例如，一个外部样式表有如下样式：

h3 { color:red; text-align:left; font-size:8pt; }

一个内部样式表有如下样式：

 h3 { text-align:right; font-size:20pt; }

如果某页面有内部样式表，同时也链接了外部样式表。则选择器h3有如下样式：
color:red;
text-align:right;
font-size:20pt;
color直接继承与外部样式表，内部样式表中text-align，font-size覆盖了外部样式表的值。

----------------------------------
多个样式会级联到一个

样式可以写在:
在HTML元素里
在HTML页面的head部分

在外部CSS文件里

提示:在一个HTML文档中，可以引用多个外部样式表。

层叠顺序
当有多个样式指定在一个HTML元素中，究竟哪种样式会被使用呢?
一般来说,我们可以说,所有的样式会按照下面的顺序“级联”构成新的“虚拟”样式表，第四个是最高的优先级:
1.浏览器默认
2.外部样式表
3.内部样式表(head部分)
4.内联样式(在一个HTML元素里)
所以,内联样式(在一个HTML元素里)有最高的优先级,这意味着它将覆盖在<head>标记里的内部样式表,或外部样式表,或者在浏览器的默认样式。
注意:如果链接到外部样式表放置在内部样式表的后面,外部样式表将覆盖内部样式表!
----------------
（记住这些并不难，我总结为采用离定义该HTML元素最近的样式^_^。即就近原则。）