在html中样式表优点,认识css以及如何在html中引入css

初识css

我们用html主要用来填充页面中的内容，那css有什么作用呢？css主要用来美化页面，调整页面结构的。

在html中，文本的样式可以使用一写特定的标签，比如粗体用,也可以直接在标签内部调整标签的大小，但是样式散落在html标签中，使得内容和样式的代码混杂在一起，难以区分。解决的方法就是改用—CSS

我们将html和css分离，有利于对内容进行统一的样式设置和修改。

什么是css

CSS(Cascading Style Sheet)即层叠样式表，简称样式表。

样式就是对网页中的内容(比如：文字、段落、图片、列表等)属性的整体概括，即描述所有网页对象的显示形式(例如：文字的大小、字体、背景、文字颜色都是样式)。

css的优点

内容和样式分离，使得网页设计趋于明了、简洁。

弥补html对内容控制的不足，如文字的大小；在html中可控的标题只有6种，即h1~h6，而利用css可以任意设置标题大小。

准确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。

提高网页效率，因为多个网页同时应用一个css样式，减少了代码的加载量，提高页面加载速度。内容已定，如果css样式不满意，可以随便修改，丝毫不会对内容有影响。

css还有很多特殊功能，如鼠标指针属性控制鼠标的形状(cursor: pointer; 将鼠标设置为小手状态)等。

将css代码，引入到html文件中的方式：

1、行内式：

直接在html标签内，插入style属性，在定义要显示的样式，这是最简单的方式。

局限：这样定义的样式只能局限当前标签使用

结构：

大家可以练一下 下面这个例子：实现一个宽度200px，高度300px，背景颜色为红色的一个盒子

我是一个div标签

2、内嵌式

如果我们想让定义的样式在整个页面中起作用怎么办

内嵌式就是这样的作用

内嵌式的形式如下

css属性: 属性值;

css属性: 属性值;

...

}

选择符可以用html标签的名称，比如div，所有的html标签都可以作为样式表的选择符

将div中的文字颜色设置为蓝色，字号设置为26px，可以用以下代码实现：

color:blue;

/*文字的颜色： 蓝色*/

font-size:26px;

/*字号 26px */

/*px：像素 css中表示大小的单位*/

}

注：代码中的 /*内容*/ 里面的内容是css的注释，不会显示在页面中

3、外链式:

一个外部的css文件可以应用于多个html文件。

当改变这个样式表文件时，所有的网页样式都随之改变，因此可以用在多个相同样式的网页中

使用这个方法不仅可以减少重复工作量，而且方便以后的修改和编辑，有利于网站的维护

这个方法也是项目中最常用的方式，这样加载网页时，浏览器一次性将样式全部加载出来，减少代码的重复加载。

rel=”stylesheet” 指在html文件中使用的是外链式的css文件

href=”” 引入css文件的路径，可以是相对路径也可以是绝对路径