室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> 文章内容

利用行内样式、内嵌式、链接式、导入样式4种CSS样式控制页面的方法

[日期:2010-03-05]   来源:主流技术阁  作者:主流技术阁   阅读:8656[字体: ]
内容提要:本文讲解CSS样式控制页面的4种方式:行内样式,内嵌式,链接式,导入样式。

  本文讲解CSS样式控制页面的4种方式:行内样式,内嵌式,链接式,导入样式。

  1、行内样式
  行内样式是最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中。
  示例如下:
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#0000ff; font-style: normal;">主流技术阁</p>
</body>
</html>
  分析总结:行内样式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本依然很高,而且网页文件容易过大,
因此不推荐使用。

  2、内嵌式
  内嵌样式表就是将CSS写在<head>与</head>之间,并且用<style>和</style>标记进行声明。
  示例如下:
<html>
<head>
<title>页面标题</title>
<style type="text/css">    
<!--
p{
  color:#0000FF;
  text-decoration:underline;
  font-weight:bold;
  font-size:18px;
}
-->
</style>
</head>
<body>
<p>
主流技术阁</p>
</body>
</html>
  分析总结:但如果是一个网站,拥有很多的页面,对于不同页面上的<p>标记都希望采用同样的风格时,内嵌式的方法显得略微麻烦,维护成本
也不低。因此仅适用于对特殊的页面设置单独的样式风格时使用。

  3、链接式
  链接式CSS样式表是使用频率最高,也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件,实现了页面框架
HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,网站后台的技术人员与美工设计都也可以很好的分工合作。而且对于同一个CSS文件可以链接到多个HTML文件中,甚至可以链接到整个网站的所有页面中,使得网站整体风格统一协调,并且后期维护的工作量也大大减少。
  示例如下:
一、HTML文件如下:
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>
主流技术阁</h2>
<p>
主流技术阁欢迎大家光临!</p>
<h2>
主流技术阁</h2>
<p>我们的网址是:http://www.mvnhqy7uaa.com</p>
</body>
</html>
二、CSS文件如下:
h2{
  color:#00FFFF;
}
p{
  color:#FF00FF;
  text-decoration:underline;
  font-weight:bold;
  font-size:24px;
}
  分析总结:链接式样式表的最大优势在于CSS代码与HTML代码完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。因此在设计整个网站时,可以
将所有页面都链接到同一个CSS文件,使用相同的样式风格。如果整个网站需要进行样式上的修改,就仅仅只需要修改这一个CSS文件即可。

  4、利用import语句导入样式
  导入样式与提到的链接样式表的功能基本相同,只是语法和动作方式上略有区别。采用import方式导入的样式表,在HTML文件初始化时,
会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表。

主流技术阁PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程