首页 > 程序开发 > web前端 > HTML/CSS >

CSS使用

2013-05-24

CSS使用----------------------------------------当浏览器读取到一个样式表,它将依据它来格式化文档。-----------------------------------------三种方式来插入CSS有三种方法插入样式表:外部样式表内部样式表内...

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器编写。文件不应该包含任何html标记。
你的样式表应该保存为.css文件。例子:
[css] hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
在属性值和单位间不添加空格(如:margin-left:20 px)。正确的写法:margin-left:20px
----------------------------------------
内部样式表
当一个文档应用一个独特的样式,就采用内部样式表。
在HTML页面的head部分定义内部样式,使用<style>标签,如:
[html] <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
------------------------
内联样式
内联样式不具备样式表的优点,它写在内容和描述之间。尽量少使用它。
内联样式,就是将样式属性直接写在相关的标签内。
可以包含任何CSS属性。
下面的例子显示了如何改变段落的颜色和左对齐:
[html] <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
------------------
多样式表
如果一个HTML元素(即选择器,请查阅博文中的“CSS语法”)设置了多个不同的样式表,这些值将继承自这些多个的样式表。

(你会不会疑惑如果设置的样式有冲突,哪个才会有效果呢?

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

别太疑惑,看看下面的例子。)

例如,一个外部样式表有如下样式:
[css] h3
{
color:red;
text-align:left;
font-size:8pt;
}

h3
{
color:red;
text-align:left;
font-size:8pt;
} 一个内部样式表有如下样式:
[html] h3
{
text-align:right;
font-size:20pt;
}

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元素最近的样式^_^。即就近原则。)

相关文章
最新文章
热点推荐