三、如何用CSS控制页面?
1.内嵌式
在<head>中写入样式
<head>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
-->
</style>
</head>
2.行内样式
<html>
<head>
<title>行内样式</title>
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
<p style="color:#000000; font-style:italic;">正文内容2</p>
<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>
3.html
3.链接式:使用频率最高,最实用的方法。它将html页面内容本身和css代码分离成两个或多个文件,使得前期制作和后期维护十分方便,使网站的后台技术人员和美工设计者很好的分工合作。同时同一个css文件可以链接到几个网页甚至整个网站的所有页面,使得整个网站整体风格统一协调。它也是本门课程讲解的重点。
<head>
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css"/>
</head>
例:链接式网页:
<html>
<head>
<title>使用了链接样式的网页!</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
4.导入式
<head>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
</head>
和链接式很相似,在一个网页中可以同时导入几个样式表。缺点在使用时是先加载内容再把相关的CSS代码加载进来,在打开网页速度较慢时,有可能会出现内容显示了,但CSS代码还未加载进来,使网页暂时看起来很丑,因此不推荐使用。
样式优先级:
行内样式 > link样式 > 内嵌样式 > import样式
备注:在网页中使用CSS有几种方法,建议在建站时最好只使用其中的
1种或两种方法,这样有利于后期的维护和管理。也不会现各种样式撞车
的情况。
看不懂
不懂
猴塞利~~
看不懂