CSS使用

当前位置 : 首页 > 网页制作 > CSS > CSS使用

CSS使用

来源: 作者: 时间:2016-02-16 10:04
CSS使用----------------------------------------当浏览器读取到一个样式表,它将依据它来格式化文档。-----------------------------------------三种方式来插入CSS有三种方法插入样式表:外部样式表内部样式

CSS使用
----------------------------------------
当读取到一个样式表,它将依据它来格式化文档。
-----------------------------------------
三种方式来插入CSS
有三种方法插入样式表:
外部样式表
内部样式表
内联样式
---------------------------------------------------
外部样式表
要将一个样式应用到多个页面,就采用外部样式表。
使用外部样式表,你只需要改变一个文件,就可以改变整个网站的外观。
每个页面必须使用<link>标记链接样式表。<link>标签写在head部分:
[]  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>
------------------------
内联样式
内联样式不具备样式表的优点,它写在内容和描述之间。尽量少使用它。
内联样式,就是将样式属性直接写在相关的标签内。
可以包含任何属性。
下面的例子显示了如何改变段落的颜色和左对齐:
[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元素最近的样式^_^。即就近原则。)

Tag:
网友评论

<