样式表导入

 

导入方法

样式的导入有外部样式表和内部样式两种方法。

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。

外部样式表的导入包括在HTML文档里链接外部CSS文件的link方式和在CSS文件里引入其他CSS文件的import方式两种方式。

link方式

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

import方式

@import url("common.css")

内部样式表

内部样式表(Internal Style Sheet)直接在HTML文档里进行记述。

<head>
<style type="text/css">
  p {margin-left: 30px;}
  body {background-image: url("images/back.gif");}
  .article {color:red}
</style>
</head>

目标媒体

样式表导入时可以指定该样式表适用的目标媒体。

指定方法

各导入方式的媒体指定方法分别如下:

  • link方式外部样式表
    <link rel=“stylesheet” href=“style.css” type=“text/css” media=“screen”/>
  • import方式外部样式表
    @import url(“print.css”) print;
  • 内联样式表
    <style type=“text/css” media=“all”/>

媒体类型

样式表导入时可以指定以下媒体类型:

媒体类型适用于
all所有的媒体设备
aural语音和音频合成器
braille盲人用点字法触觉回馈设备
handheld手持设备
print打印机
projection投影设备
screen电脑显示器
tty字符终端设备
tv电视机类型设备