您的位置：首页 > Web前端 > CSS

CSS控制页面

2016-06-26 21:05 246 查看

CSS控制页面

使用CSS控制页面，可以有多种方法，包括行内样式，内嵌式，链接式和导入式等。

行内样式

最为直接的一种，直接对HTML的标记使用style属性，然后，将CSS代码直接写在其中。

<span style="font-size:24px;"><html>
<head>
<title>页面标题</title>
<style>
<!--
h2{
font_family:幼圆;
color:red;
}
-->
</style>
</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>
</span>

  行内样式，是最为简单的CSS使用方法，但是，需要为每一个标记设置style属性，后期维护成本依然很高，而且，网页容易过胖，不推荐使用。

  内嵌式

  就是将CSS写在<head>与</head>之间，并且，使用<style>和</style>标记进行声明。

<span style="font-size:24px;"><html>
<head>
<title>页面标题</title>
<style>
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>

<body>
<p>
紫色，加粗，下划线，25px的效果1
</p>
<p>
紫色，加粗，下划线，25px的效果2
</p>
<p>
紫色，加粗，下划线，25px的效果3
</p>
</body>
</html>
</span>

  所有的CSS代码部分，都被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。

  但是，如果是一个网站，拥有很多的页面，对于不同页面上的<p>标记都希望采用相同的风格时，内嵌式就显得非常麻烦，维护成本也不低，因此，仅适用于对特殊的页面设置单独的风格样式。

  链接式

  使用频率最高，也是最实用的方法，就是将HTML页面本身和CSS样式风格分离为两个，或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作，后期维护都非常的方便，网站后台的技术人员和美工设计中可以很好地分工合作。

<span style="font-size:24px;"><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>

CSS样式表1
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
</span>

  对于同一个CSS文件，可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一协调，并且，后期维护的工作量大大减小。

  导入样式

  导入样式和链接样式功能基本相同，采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。

  而链接式，则是在HTML的标记需要格式时才以链接的方式引入。

  常用的导入样式@import语句：

  @importurl(sheet1.css);

  @importurl("sheet1.css");

  @importurl('sheet1.css');

  @importsheet1.css;

  @import"sheet1.css";

  @import'sheet1.css';

  不仅可以在HTML文件的<style>与</style>标记中可以导入多各样式表，在CSS文件内也可以导入其他的样式表。

<span style="font-size:24px;"><html>
<head>
<title>
页面标题
</title>
<style type="text/css">
<!--
@import url(1.css);
@import url(2.css);
-->
</style>
</head>

<body>
<h2>
CSS标题1
</h2>
<p>
紫色，粗体，下划线，25px的效果1
</p>
<h2>
CSS标题2
</h2>
<p>
紫色，粗体，下划线，25px的效果2
</p>
<h3>
CSS标题3
</h3>
<p>
紫色，粗体，下划线，25px的效果3
</p>
</body>
</html>
CSS样式表1
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
CSS样式表2
h3{
color:#00FFFF;
font-style:italic;
font-size:40px;
}
</span>

  各种方式的优先级

  行内样式的优先级最高，其次是采用<link>标记的链接式，再次是位于<style>和<style>之间的内嵌式，最后，才是导入式@import。

  虽然，各种CSS样式有先后的优先级，但是，在建设网站时，最好只使用其中的1~2种，这样，既有利于后期的维护和管理，也不会出现各种样式碰撞的情况，有利于设计者理清设计的整体思路。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航