一小时学会CSS （上）

1、CSS是什么？

CSS （Cascading Style Sheets）层叠样式表，是一种来为结构化文档，例如HTML 、XML 添加字体，间距和颜色等样式的计算机语言,扩展名是.CSS 。

2、CSS语法规则

CSS写在哪里，CSS写在style 标签中，style 标签，一般写在head 标签里，即 title 标签下面。

样式：

选择器{ 属性名：属性值}

CSS 常见的属性有 :

color : 文字颜色

font-size:字体大小

gackground-color :背景颜色

width :宽度
height:高度

这是一个例子：

注意事项：

• CSS标点符号都是英文状态下

• 每一个样式键对后，都以分号结尾

3、CSS 引入方式及实践

（1）、内联方式：内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS.

内联方式优缺点：

只能改变当前标签的样式，如果想要多个 div 拥有相同的样式，不得不重复地为每个 div 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。会导致 HTML 代码变得冗长，且网页难以维护。

（2）、嵌入方式：嵌入方式指的是在 HTML 头部中的 style 标签下书写 CSS 代码。

嵌入方式优缺点：嵌入方式 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。嵌入的 CSS 只对当前页面有效，当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

(3)、链接方式

链接方式指的是使用 HTML 头部的 head 标签引入外部的 CSS 文件。

链接方式优点：是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，具有良好的可维护性。CSS 文件会在第一次加载时引入，切换页面时只需加载 HTML 文件即可。

（4）、导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件

（5）、实际开发中如何选择？

• 仅引入一个css文件，则使用链接方式；
• 如果需要引入多个css文件，则首先用链接式引入一个“目录”css文件，这个“目录”css文件中再使用导入式引入其他css文件。
• 如果希望通过JavaScript来动态决定引入哪个css文件，则必须使用链接方式才能实现。

（6）、如何将多个CSS文件导入到一个CSS文件中？

可写多个css样式表 ，例如：css_a.css ， css_b.css ， css_c.css ，这样就可以写一个主样式 style.css 把三个样式表都装进去：

@import "css_a.css"; 
@import "css_b.css";
@import "css_c.css";

调用的时候只调用 style.css 就行了

红色
蓝色
绿色





style.css
@charset "utf-8";
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";


css_a.css
@charset "utf-8";
.red {
color:red;
}


css_b.css
@charset "utf-8";
.blue{
color:blue;
}


css_c.css
@charset "utf-8";
.green{
color:green;
}