郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
在网页制作时，CSS样式表是必不可少要使用的，这也是DIV+CSS网页制作的核心技术之一，离开了CSS样式表，网页制作将会变得不可能，也无法制作出美观的网页。在网页上使用CSS样式表有多种方式，不同的编码人员可能会喜爱使用不同的CSS样式表方式。在这里，郑州网站建设公司的小编整理了四种网页上使用CSS样式表的方式，即外部CSS样式表、内部CSS样式表、导入外表CSS样式表和内嵌CSS样式等几个，下面分别介绍一下：
一、外部CSS样式表：
外部样式表是把样式表保存为一个CSS样式表文件，然后在网页制作时用<link>标签把这个外部CSS样式表链接到网页中来，就像在网页内部设置的样式表一样，这个<link>标签必须放到页面的<head>区域内，而且CSS样式表的路径要准确表达才行。
下面是外部CSS样式表的链入方式的部分代码：
<head>
......
<link href="css/mystyle.css" rel="stylesheet" type="text/css">
......
</head>
上面的代码例子中的外部CSS样式表文件mystyle.css即是以文件的形式保存我们所定义的样式表文件。而rel=“stylesheet”是指在页面中使用这个外部的样式表，type=“text/css”是指所链入的文件类型是CSS样式表文本。href=“css/mystyle.css”是文件所在的位置和路径。
外部CSS样式表文件通常用于多个页面都使用相同的CSS样式的场合，将多个页面重复使用的样式表集中到一个样式表文件中，然后在页面中链入这一CSS样式表，当改变这个样式表里面的样式时，所有链入该样式表的页面的样式都随之改变，这对于大量使用相同样式页面的网站非常有用，不仅减少了重复的工作量，而且有利于以后样式表的修改和编辑，也减少了网页的代码量，加快了网页的加载速度。
二、内部CSS样式表：
内部样式表是把样式表放到页面的<head>区域里，这些定义的样式就自然应用到页面中了。内部CSS样式表是使用<style>标签插入到网页中的，下面的代码可以看出<style>标签的用法：
<head>
......
<style type="text/css">
h2 {color: #FF0000; font-size:16px;}
p {margin-left: 20px}
body {background-image: url("images/bk.jpg"); font-size:12px;}
</style>
......
</head>
有些低版本的浏览器不能识别style标签，在用这些低版本的浏览器打开网页时会忽略style标签里的内容，这样就会把style标签里的内容以文本形式直接显示到页面上，这是不太好的一面。为了避免这样的情况出现，我们通常需要用对<style>标签里的内容加上注释的方式(<!-- 注释 -->)的方式来把样式隐藏起来而不让它显示，但如果浏览器能够识别<style>标签，则注释中的样式表就能正常地作用到网页上了，加了注释的样式表如下：
<head>
......
<style type="text/css">
<!--
h2 {color: #FF0000; font-size:16px;}
p {margin-left: 20px}
body {background-image: url("images/bk.jpg"); font-size:12px;}
-->
</style>
......
</head>
三、导入外部CSS样式表：
导入外部样式表是指在内部样式表的<style>的标签里导入一个外部样式表，导入时使用@import命令，下面是实例代码：
<head>
......
<style type=“text/css”>
<!--
@import “css/mystyle.css”
h2 {color: #FF0000; font-size:16px;}
p {margin-left: 20px}
body {background-image: url("images/bk.jpg"); font-size:12px;}
-->
</style>
......
</head>
上面的代码中@import “mystyle.css”表示在页面中导入css/mystyle.css样式表，在使用时与外部样式表的路径、方法都很相似，但这种导入外部样式表的使用方式有更大的优先性，这相当于将外部样式表文件中的样式，直接写入<style>标签里，而不是链入外部样式表文件。在使用@import导入外部样式表时，必须在<style>标签里的样式表开始部分，在其他内部样式表语句的前面，这样才能起作用。
四、内嵌CSS样式：
内嵌CSS样式是混合在HTML标签里来使用的，通常是使用标签的style属性来定义的，style参数的内容就是CSS的属性和值。用这种方法，可以很简单灵活地对某个元素单独定义样式。下面的例子代码就是一个内嵌CSS样式：
<span style="color: #ff0000; margin-left: 20px;">这是一行文字，颜色为红色，左边距为20象素</span>
在标签的style属性里定义的样式通常用是比较短小的样式，如果样式定义较长则不利于页面源代码的查看和修改，较长的样式可以转移到<style>标签里定义，这种内嵌的样式可以应用于大多数<body>内的元素的style上（包括body本身）。