CSS 样式表

1. CSS 初识

概念：CSS 称为 CSS 样式表或层叠样式表（级联样式表）

作用：主要用于设置版面的布局和外观显示样式

2. 行内式（内联样式）

概念：通过标签的style属性来设置元素的样式

语法：<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>

3. 内部样式表（内嵌样式表）

概念：称内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
	<style type="text/CSS">
    	标签 { 
      		属性1: 属性值1;
      		属性2: 属性值2; 
    	}
	</style>
</head>

注意：type="text/css" 在html5中可以省略

4. 外部样式表（外链式）

概念：将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到HTML文档中

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>
属性 作用
rel 定义当前文档与被链接文档之间的关系，这里“stylesheet”表示被链接的文档是一个样式表文件
type 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表（可省略）
href 定义所链接外部样式表文件的URL（相对路径、绝对路径）

5. 三种样式表总结（位置）

样式表 优点 缺点 使用情况 控制范围
行内 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签
内部 部分结构和样式相分离 没有彻底分离 较多 控制一个页面
外部 完全实现结构和样式相分离 需要引入 最多（强烈推荐） 控制整个站点
posted @ 2020-06-20 09:19  今夜星河漫漫  阅读(374)  评论(0)    收藏  举报