如何在网页中加入CSS - 建站经验

如何在网页中加入CSS
可以使用四种方法将样式表加入到网页中，每种有不同的优点：
1，将CSS加入到HTML文件行中；
2，将CSS嵌入到HTML文件的文件头中；
3，将一个外部CSS链接到HTML文件上；
4，将一个外部CSS输入到HTML文件中；
一，第一种方法，即直接在代码行中加入样式规则，这种方法适合于指定网页中某一小段文字的显示风格。不过，利用这种方法定义样式时，其效果只可以控制该标签，举个例子：
<h1 style="color:red;font-size:35px;font-family:'courier New'">这是在行中加入CSS的效果<h1>(font-family值courier New带空格，所以要加'')

二，第二种方法，如果想对网页一次性加入CSS，就可以采用这种方法,
<html>
<head>
<style type="text/css">

</style>
</head>
<body></body>
</html>
说明：
①<style>标签是用来说明所要定义的样式。type属性是指<style>标签以CSS的语法定义。
②在CSS的基本格式中，type="text/css"用于说明这是一段CSS规则的代码。
③将CSS代码插入到中是为了防止不支持CSS的浏览器将<style></style>的代码当成普通字符串显示。
④选择符是样式的名称，所有的HTML标签都可以作为CSS的选择符。
⑤样式属性是定义样式的属性的名称。

三，如果想要达到集中管理网站网页样式的目的，就必须样式定义在独立的CSS文件中，并建该文件链接输入到运用CSS的HTML文件上，这种方法是将所有HTML文件链接到一个CSS文件上，当CSS文件的一处改变时，所有网页也会随之改变。
<html>
<head>
<title></title>
<link rel=stylesheet href="example.css" type="text/css">
</head>
<body></body>
</html>
example.css文件源代码如下：
h1{color:red;font-size:35px;font-family:黑体}
p{background:green;color:yellow;font-size:54px;font-family:隶书}
另外，可以将多个CSS合成一个CSS，但代码中必须使用相同的title.
可以把以下代码放在example.css中，
<link rel=stylesheet href="1.css" title="cont">
<link rel=stylesheet href="2.css" title="cont">
<link rel=stylesheet href="3.css" title="cont">

四，第四个方法举例如下:
<html>
<style type="text/css">

</style>
<head>
<title>样式表举例</title>
</head>
<body>
<h1>样式表</h1>
<p>css方法四</p>
</body>
</html>

example.css文件源代码如下：
h1{color:red;font-size:35px;font-family:黑体}
p{background:green;color:yellow;font-size:54px;font-family:隶书}
当这四种方法同时出现是，浏览器会优先选择1，将CSS加入到HTML文件行中，而其它三种方法的顺序规则则一样。如果这其他三种方法同时出现，且各个方法定义的样式又都不同时出现，浏览器会选择较后定义的样式来显示。

本课主题：如何在网页中加入CSS

相关主题：
CSS的结构
用DIV+CSS布局网站的好处
样式表和HTML的关系
什么是级联式样式表
请拨打热线：0571-86586571

文章推荐

人气排行