首页>前端教程>CSS教程

CSS第二课:如何应用CSS到网页中?

CSS如何应用到网页中呢?大致有三种方法:

1、行间样式表

2、内部样式表

3、外部样式表

一、行间样式表

<h1 style="text-align:center;color:#f90;">文章标题</h1>

很明显,这种写法,style样式和html结构混在了一起,不利于结构和样式的分离,而且不利于重用,如果下一个h1要使用一样的样式,还需要再写一次style,如果要修改样式,也需要每一个h1都修改一次。真的是累啊累!

如果你在某个网站上看到有这样的写法,那一般都是因为javascript的执行产生的,而且这样的javascript也不是优质的脚本。

web2.0改革的一个核心就是结构(html)、样式(css)、行为(javascript)的完全分离。

二、内部样式表

<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
h1{
    font-size:1.5em;
    text-align:center;
    color:#f90;
}
</style>
</head>

内部样式表一般放在html的头部,在</title>和</head>标记之间。这种样式表的优点是实现了样式和html结构的分离,适合用在单个页面上,就是每一个页面是独立的一个小案例。

三、外部样式表

<title>文档标题</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>

假设一个网站是由数百上千个页面所构成的,每一个页面的样式都是一致的,如果还采用内部样式表的话,那么每一个页面的样式都会重复一次,造成体积增加之外,最严重的是不能一改全改。假设要修改某个标题的文字颜色,一个页面改了,其他页面也要改,工作量忒大了。

这时候把这些代码提取到一个外部的css文件中,然后再在每个html页面上调用这个外部的css文件,不仅实现了代码的重用,而且修改css文件的样式,也可以实现一改全改。这是使用css最好的方法。

这种方法适合整站。

点赞


5
保存到:

相关文章

Top