css---四种导入方式

web前端入门笔记之css（1）

目录：
1、css是什么
2、css作用
3、语法规则
4、导入方式

css是什么

1. CSS 指层叠样式表 (Cascading Style Sheets)
2. 样式定义如何显示 HTML 元素
3. 样式通常存储在样式表【.css文件、css区域】中
4. 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5. 外部样式表可以极大提高工作效率
6. 外部样式表通常存储在 CSS 文件中
7. 多个样式定义可层叠为一

css作用

1. 样式表解决了html的内容与表现分离
2. 使用样式表极大的提高了工作效率

语法规则

1. Css规则主要由两部分组成 1.选择器 2.一条或多条属性声明
2. 选择器主要作用是为了确定需要改变样式的HTML元素
3. 每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开
   例如：

<style>
div{width:200px;
   height:200px;
   background:red;}
<\style>

书写注意事项

1. 如果值为若干单词，则要给值加引号
2. 多个声明之间使用分号(;)分开
3. css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感

导入css方式

第一种：内联样式表

1. 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
   例如：

<div style=”border:1px solid black”>这是一个DIV</div>

注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。
一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用

第二种：内部样式表
2. 我们可以使用< style>标签在html文档的< head>中来定义样式表。
例如:

注意：这种方式，样式只适合应用于一个页面

第三种：外部样式表

1. 如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。

2. 我们可以在html页面上使用标签来导入外部样式表。
   例如:
   

3. 浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

4. 外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。

5. 外部样式导入路径会用到：./ 当前目录，…/ 父级目录，/ 根目录
   当外部样式不起作用时，设置当前页面“属性”，将"text file coding"设置为UTF_8即可。

第四种：@import导入

1. 这种方式也是外部导入。
   例如：
   

@import与引用外部样式表的区别【了解】

1. @import这种方式只有firefox支持，而ie不支持。
2. @import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。
   而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。
3. @import不支持通过javascript修改样式，而link支持。

优先级问题
内联样式表>内部样式表>外部样式表：离标签越近的越优先（就近原则）