机制和原理——样式表导入
导入方式
样式的导入有外部样式表和内部样式两种方法。
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。
外部样式表的导入包括在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 | 手持设备 |
打印机 | |
projection | 投影设备 |
screen | 电脑显示器 |
tty | 字符终端设备 |
tv | 电视机类型设备 |
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录