CSS 用于修饰网页样式, 但是, 如果希望 CSS 修饰的样式起作用, 就必须在 html 档中引入 CSS 样式表. 引入样式表的常用方式有四种, 即行内式, 内嵌式, 外链式, 导入式, 具体介绍如下.
1. 行内式
行内式也称内联样式, 是通过标记的 Istyle 属性来设置标记的样式, 其基本语法格式如下:
< 标记名 style= "属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标记名 >
上述语法中, style 是标记的属性, 实际上任何 HTML 标记都拥有 style 属性, 用来设置行内式. 属性和属性值的书写规范与 Cs 样式规则一样, 行内式只对其所在的标记及嵌套在其中的子标记起作用.
通常 CSS 的书写位置是在 < head > 头部标记中, 行内式却是写在 < htm > 根标记中, 例如下面的示例代码, 即为行内式 CS 样式的写法.
<h1 style="font-size:20px; color:b1ue;"> 使用 CSS 行内式修饰一级标题的字体大小和颜色 </h1>
在上述代码中, 使用 < h1 > 标记的 style 属性设置行内式 CSS 样式, 用来修饰一级标题的字体大小和颜色. 效果如下图所示.
需要注意的是, 行内式是通过标记的属性来控制样式的, 这样并没有做到结构与样式分离, 所以一般很少使用.
2. 内嵌式
内嵌式是将 CSS 代码集中写在 HTML 文档的 < head > 头部标记中, 并且用 < style > 标记定义, 其基本语法格式如下:
- <head>
- <style type="text/css">
选择器 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}
- /style>
- </head>
上述语法中,<style > 标记一般位于 < head > 标记中 title 标记之后, 也可以把它放在 HTML 文档的任何地方. 但是由于浏览器是从上到下解析代码的, 把 CSS 代码放在头部有利于提前下载和解析, 从而可以避免网页内容下载后没有样式修饰带来的尴尬. 除此之外, 必须设置 type 的属性值为 "text/css", 这样浏览器才知道 < style > 标记包含的是 CSS 代码, 因为 < style > 标记还可以包含其他代码, 如 JavaScript 代码.
3. 外链式
外链式是将所有的样式放在一个或多个以. CSS 为扩展名的外部样式表文件中, 通过 < link/> 标记将外部样式表文件链接到 HTML 文档中, 其基本语法格式如下:
<head><1ink href="css 文件的路径" type="text/css" re1="stylesheet" /></head>
上述语法中,<link> 标记需要放在 < head > 头部标记中, 并且必须指定 < link/> 标记的个属性, 具体介绍如下.
href: 定义所链接外部样式表文件的 URL, 可以是相对路径, 也可以是绝对路径.
type: 定义所链接文档的类型, 在这里需要指定为 "text/css", 表示链接的外部文件为 CS 样式表.
rel: 定义当前文档与被链接文档之间的关系, 在这里需要指定为 "stylesheet", 表示被链接的文档是一个样式表文件.
外链式是使用频率最高是最实用的 CSS 样式表, 因为它将 HTML 代码与 CSS 代码分离为两个或多个文件, 实现了将结构和样式完全分离, 使得网页的前期制作和后期维护都十分方便.
4. 导入式
@import(url(demo.CSS))
基本不使用, 因为页面会先加载 HTML, 然后再去加载 CSS, 这样就会造成页面样式的延迟.
创建一个 demo.CSS 文件, 写上一个 CSS 样式
- // 写在 demo.CSS 文件中
- h2{
- color:green;
- }
使用 @import 方式导入 demo.CSS 文件
- // 试验了一下, 需要单独写在一个 style 中,
- <style>
- @import url(demo.CSS)
- </style>
- // 写在 body 标签中
- <h2 > 导入式 </h2>
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !
来源: http://www.css88.com/qa/css3/15058.html