CSS样式的几种引用方式

Sian · 发表于 2015-7-13 21:36:50

本帖最后由 Sian 于 2015-7-13 23:04 编辑

1、内联样式/行内样式

如：<p style="color:red">红色文字</p>
PS：该方式只对当前p标签生效，一般针对个别标签个性化设置采用此方式

2、嵌入式样式表

在<head>标签内加<style>标签，如：
<head>
      <style type="text/css">
            p{
                     color: red;
            }
      </style>
</head>
PS：该方式对当前页面所有p标签生效，临时页面一般采用此方式，样式与内容在同一个文件中完成。

3、导入外部样式表

在<head>标签内加<style>标签，但不直接写样式，而是通过@import导入外部CSS文件如：
<head>
      <style type="text/css">
            @import url("*.css");

      </style>
</head>
PS：该方式对当前页面全局标签生效，即CSS文件中涉及的标签属性均会产生效果，效果等同于嵌入式，使用较少

4、链入外部样式表

在<head>标签内加<link>标签，通过link标签属性链入外部CSS文件，如：
<link rel="stylesheet" type="text/css" href="*.css">
PS：该方式对当前页面全局标签生效，即CSS文件中涉及的标签属性均会产生效果，实际项目中常用此方式，内容结构与样式分离！

优先级：由高到低分别为：内联 > 嵌入 > 链入 > 导入

帐号		自动登录	找回密码
密码			立即注册