目录

一、前言

二、实例演示

1.1、内联样式

1.2、内联样式-效果演示

2.1、内部样式表

2.2、内部样式表-效果演示

3.1、外部样式表

3.2、外部样式表-效果演示

三、知识点说明

一：CSS 概述

二：CSS 基础语法

1、如何用？&＃8211;多种方式，供灵活选择

2***、重复引入优先级问题（着重注意）

上几篇我整理一些web-html上的一些基础知识点，如最近的一篇文章：web快速入门之基础篇-html：13、表单-常用操作：form、input、select、textarea、label、fieldset、iframe 然后从这篇开始整理css样式，在html中引用css样式有3种方式：内联样式、内部样式表、外部样式表，下面我们来通过实例代码和效果图来演示

1.1、内联样式

内联样式（一般不建议使用），指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。我们来看看代码： 1. 内联样式.html

内联方式

1.2、内联样式-效果演示

用谷歌浏览器打开运行，效果如下：

2.1、内部样式表

内部样式表，指在html文件的head标签内声明样式。当单个文档需要特殊的样式时，就引用使用内部样式表。

我们来看看代码： 2. 内部样式表.html

内部样式表

2.2、内部样式表-效果演示

用谷歌浏览器打开运行，效果如下：

3.1、外部样式表

外部样式表，指在html文件的head标签中，使用link引用另一个css文件中定义的样式。如果某个样式表需要被使用许多次，使用外部样式表是最好的选择。我们来看看代码： 3. 外部样式表.html

外部样式表

css样式代码：MyStyle.css

h2
{
color:red;
font-size:30pt;
}

如图放在同一个目录下即可，有关路径引入在这里就不多讲，

这篇文章有讲到：web快速入门之基础篇-html：4、基本标签之图像、地址链接

3.2、外部样式表-效果演示

用谷歌浏览器打开运行，效果如下：

一：CSS 概述

1、CSS 的作用：统一的方式定义外观

相对于原始的html：属性可以用来设置样式，比如 border、width、cols

二：CSS 基础语法

1、如何用？&＃8211;多种方式，供灵活选择

方式一：内联方式&＃8212;html 元素有个 style 属性

color:#f33b45">如果优先级别相同，以最后一次定义为准

*** 补充：

1）

       内联方式：方便快速演示( 如, Boss演示)

       外部样式表：便于维护