开发者学堂课程【零基础学前端 HTML+CSS ：CSS 样式加载方式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5129
CSS 样式加载方式
内容介绍
一、CSS 注释
二、样式表加载总结
三、内嵌样式
四、内部样式表
五、链入外部样式表
六、导入外部样式表
七、样式表优先级
八、Link 和 @import 的区别
一、CSS 注释
html 里面都要有注释，绿色的为注释，html 里面注释是<!-- 内容-->
在 css 里面，用/**/来注释，css 里面有结构化的注释，还有提示性的注释，在写每段的一个样式的时候注释就可以帮助快速理解这个是属于什么样的一个内容。
CSS 里面的注释都是灰色，如果在一个网站里面这个注释，在写这样的样式的时候量是非常多的，写完代码之后很容易就会忘记样式的内容是什么，所以注释可以起到提示的作用，方便找到注释的内容。
注释的结构
1. 结构性注释
/*header
---------------------------------------------------------------*/
2. 提示性注释（整个一块都是注释，它整个都可以写到样式表里）
.news_list li span {
Float:left;
/*设置新闻发布时间浮动，与新闻标题并列显示*/
width:80px;
color:#999999;
/*定义新闻发布时间为灰色，弱化发布的时间在视觉上的感觉*/
}
二、样式表加载总结
四种样式表加载
1. 内嵌样式——直接在页面的标签里加信息
<div style="border:1px red solid;">测试信息</div>
//style 这个标签很重要
2. 内部样式表——在 head 部分加入
<style type="text/css" >
div{margin: 0;padding: 0;border:1px red solid;}</style>
3. 链入外部样式表——在 head 部分加入
<link rel="stylesheet" type="text/css"href= " my.css"
media="all" />，引入外部的 CSS 文件
4. 导入外部样式表——在 head 部分加入
<style type="text/css" >@import url(my.css);
</style>
三、内嵌样式
内联样式指的是将 CSS 样式与(X)HTML 标签混合使用，这种方法可以很简单的对某个元素单独定义样式。
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title>CSS 嵌入方式<title>
</head>
<body>
<div style="border: 1px red solid;width: 500px;">内嵌方式</div>
</body>
</html>
Border 在 CSS 里有个优点，在后面会标识出来这个是 CSS X.0 的一个语法，然后根据语法来判断是否能在某版本的浏览器上使用。
上面这个图，就是显示内嵌方式有一个红色的方框，就是 div 的尺寸，默认的 div 是100%的从左边一直到右边，在里面也可以自行设置 width: 500px，在页面里用内嵌的形式写出一个样式表。除了内嵌的形式，还可以用内部样式表，在 head 头部写。一般不推荐
<div style="border: 1px red solid;width: 500px;">
内嵌方式这样写样式，因为这样就违反了规则（避免使用不必要的HTML元素），如果按照这样写就会出现冗余，它这也是一种写法，但是并不推荐整个网站用这个方式写。这种一般用于，某个项目写完之后，然后检查时突然发现某个地方需要修改，就可以临时增加一个文本样式，使用的面积比较小。
四、内部样式表
在这个<head></head>里面添加一个<style>,然后把样式写在里面，在这个 style 里面增加了一个标签，可加可不加。只能用在单个页面内调用，新建一个网页就不能调用。这样和 html 没什么区别，就会出现代码的冗余。
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title>CSS 嵌入方式<title>
<style>
.font_red {
font-size: 30px ;
//这里面添加字体的大小就是30像素
}
</style>
</head>
<body>
<div style="border: 1px red solid;width: 500px;">内嵌方式</div>
<div class=”font_red“>标题字展示</div>
</body>
</html>
在 body 里面添加一个 div，写上标题字展示
<div class=”font_red”>
标题字展示</div>之后再刷新页面，就会出现效果。它只能再这个页面里面能被调用，新建一个网页就不能调用。
明显看到效果，下面的字体比原先的大
五、链入外部样式表
这一种是最推荐使用的形式，把所有的样式全部封装在一个外部文件中，然后再引入样式表文件这样去使用。
通常另存了一个网页，除了可以看到 .js、.jpg,看到较多的是 .css 文件。
<head>
<link hrel="test.css" type= " text/css" rel="stylesheet"/>
</head>
这样就是从 html 中引入 test.css 文件。
css 文件大部分工具都能创建，在文件中打开新建，然后找到 css 文件，创建。写 css 文件和之前的内联嵌入式的样式表没多大区别。
具体的使用就是，创建一个 css 文件，然后在里面写入
.font_size {
font-size: 12px ;
//网页里文字的大小是12像素，字体像素12像素是最小的文字，基本上新闻的网站都是用12像素的字体。
}
新建一个 html 文件
< ! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class=”font_size”>课程内容版权均归魔乐科技</div>
<div>课程内容版权均归魔乐科技</div>
</body>
</html>
这样就可以设置文本的一个内容，如果不用 class，就不会用到 font_size 的方法，每个浏览器自带的设置也可以设置文本的大小，没有受到样式表控制的一个文本、图片都是可以用浏览器来控制的，但浏览器调会有很大的弊端。因为原本的格式布局已经设置好了，但用户自己控制时，会导致排版变乱，兼容性不好。
六、导入外部样式表
导入样式类似于外部样式，都是利用外部 CSS 样式文件来改变页面的外部表现的，但与外部样式不同的是，需要在<style>和</style>标签中间利用“@import”关键字导入外部 CSS 文件。
<style type="text/css">
@import url("导入样式文件.css")
</style>
现在基本上不用这种方法，原因其实是一个历史的因素，这种形式是在 html 时期就有的一个语法，是早期样式表的一个语法，用 import 形式导入样式表，表面上看起来样式都能有效果，但是要根据不同的用法来定，对于新手来说还是用链接的形式比较好。
比方说在一个样式表里面，写两个样式名称：
.font_size_12px {
font-size: 12px ;
}
.font_size_30px {
font-size: 30px;
}
这样优先级别就会有先后，不然到底是用12px还是30px的，不能确定，后面会讲到。
七、样式表优先级
给一个文件设置一个12像素，然后又给一个文件设置一个30像素，这个文件应该听谁的，就有一个默认的优先级别。谁离终端的标签近谁的优先级就最高。
1. 内嵌样式>内部样式表>导入外部样式表
2. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后，最后定义的优先级最高。
八、Link 和 @import 的区别
使用 link 链接的 css 是客户端浏览网页时先将外部的 CSS 文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页跟预期的效果一样,即使一个页面 link 多个 css 文件,网速再慢也是一样的效果;而使用 @import 导入的 CSS 就不同了,客户端在浏览网页时是先将 html 的结构呈现出来,再把外部的 CSS 文件加载到网页当中当然最终的效果也是跟前者是一样,只是当网速较慢时会出现。先显示没有 CSS 统一布局时的 html 网页,这样就会给阅读者很不好的感觉。这也是现在大部分网站的 CSS 都采用链接方式的最主要原因。
