CSS引入的方式有哪些?

2018-04-01 本文已影响0人饥人谷_易燃

CSS

Cascading style sheets的简称,是用来为网页添加样式的代码。
CSS的一个核心特性就是能向文档中的一组元素类型应用某些规则。

CSS引入方式

1.外部样式表（推荐）

使用<link>标签，引入外部CSS文件；
通常是将link标签写在网页的<head></head>之间
特点：代码量集中，容易混乱

示例：

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

通过@import,引入CSS文件
既可以用在<style></style>标签里，也可以用在外部CSS文件中
特点：引入方便，但性能可能较差

示例：

@import url("xxx.css");
@import url('xxx.css');
@import url(xxx.css);
@import "xxx.css";
@import 'xxx.css';

2.内部样式表

将css的样式代码放在html文档的<style></style>标签中，引入css
可以放到html文档的任何位置，但是建议不要放到<html></html>标签外，通常将style标签放到HTML文件<head></head>标签里
特点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

示例：

<html>
  <head>
    <style> 
      h1 { background: red; } 
    </style>
  </head>
</html>

3.内联样式

不推荐，但是在某些情况下很有用
特点：缺乏整体性和规划性，不利于维护，维护成本高；

示例：

<p style="background: orange; font-size: 24px;">CSS<p>

4.属性样式

已经被废弃，要避免使用

示例：

<img src="a.png" width=100 height=200 >