当前位置：首页 > ai >正文

web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表

ai 2025/7/5 12:28:35

一、前言

二、实例演示

1.1、内联样式

1.2、内联样式-效果演示

2.1、内部样式表

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

3.1、外部样式表

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

三、知识点说明

一：CSS 概述

二：CSS 基础语法

1、如何用？--多种方式，供灵活选择

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

一、前言

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

二、实例演示

1.1、内联样式

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head><meta http-equiv="refresh" content="3" /><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内联方式</title>
</head><body><p style="color:red;background-color:gray;font-size:30pt;width:30%;">内联方式</p>
</body></html>

1.2、内联样式-效果演示

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

2.1、内部样式表

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head><meta http-equiv="refresh" content="3" /><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内部样式表</title><!--内部样式表-->
<style type="text/css">/*为h1定义的样式*/h1{color:green;background-color:red;width: 30%;	}
</style></head><body><h1>内部样式表</h1>	
</body></html>

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

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

3.1、外部样式表

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head><meta http-equiv="refresh" content="3" /><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>外部样式表</title>
<!--
1、link 引入
text/css： 纯文本css代码2、rel 做什么用  
stylesheet:样式表3、href 引入的是什么？
MyStyle.css
-->
<link type="text/css" rel="stylesheet" href="MyStyle.css"/></head><body><h2>外部样式表</h2>
</body></html>

css样式代码：MyStyle.css