CSS基础使用
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
六、CSS入门
六、CSS⼊门CSS核⼼基础CSS样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。
属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。
2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。
实训七 CSS基础应用示例
实训七CSS基础应用示例主要内容：本周需要完成的任务：根据前几周的设计，各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；使用Div+CSS实现网页框架。
参考图：操作部分：CSS控制导航条样式提示：请务必做好准备工作。
在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。
如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。
将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。
将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。
在上一节制作的网页框架的基础上，继续修改。
1.首先填充 #logo 盒子里的内容，修改HTML文档：……<div id="logo"><a href="index.html"><img src="images/logo1.gif" /></a>保存后测试。
2.两个问题需要解决：加超链接之后，图片四周有难看的边框；修改CSS文件，为图片添加样式：不希望logo图片贴着浏览器上边框显示。
修改CSS文件，为 #logo 盒子添加内边距或外边距均可：此处选择添加外边距margin，并且根据效果调整高度 height 为60px，保存后测试。
#logo盒子修改到此结束。
3.#nav盒子放导航条，首先修改HTML文件：保存后测试。
保存后测试。
另外，每个项目前的缩进效果，不同浏览器默认设置也是不同的，所以保险的做法是先把默认效果清零，需要时再显式定义：保存后，测试。
保存后测试。
保存后测试。
7.继续修改，超链接栏目之间拉开距离：你能想到什么方法？先看到每个栏目所在的盒子的样子：保存后测试，发现高度设置不起作用，原因？答：<a>标记跟前面学过的<div>、<p>标记不同，不是块元素，所以适用于块元素的width、height等属性对<a>标记不起作用；<a>标记叫内联元素，不会霸占空间，占用的空间完全由内容多少决定。
unocss基础用法
unocss基础用法unocss是一种零运行时CSS框架，它可以根据相应的HTML文件动态生成最小化的CSS样式表。
以下是unocss的基础用法：1. 安装unocss：使用npm安装unocss：`npm install save-dev unocss`。
2. 创建unocss配置文件：在项目根目录下创建一个名为unocss.config.js的配置文件。
3. 配置文件内容：javascriptmodule.exports = {include: ['src//*.html', 指定需要生成CSS的HTML文件路径或通配符],theme: {extend: {在这里编写自定义主题样式},},}4. 在build脚本中添加unocss命令：在项目的构建脚本（例如package.json中的scripts）中添加unocss命令，用于生成CSS文件。
json"scripts": {"build": "unocss"}5. 运行unocss命令：运行构建脚本，执行unocss命令生成CSS文件。
bashnpm run build6. 在HTML文件中使用CSS类：unocss会根据HTML文件的内容生成最小化的CSS样式表，然后为每个标签生成一个唯一的类名。
可以将这些类名应用到HTML标签上，从而应用相应的样式。
html<div class="bg-red-500 text-white">Hello, unocss!</div>7. 自定义主题样式：在unocss配置文件中的theme字段中，可以编写自定义主题样式。
unocss 基于tailwindcss，可以使用tailwindcss的样式类或进行扩展。
这是unocss的基础用法，可以根据项目的需求进一步配置和定制unocss。
CSS基础语法
CSS基础语法1 CSS概述1.1 CSS的定义 全名：Cascading Style Sheets -> 层叠样式表 定义：CSS成为层叠样式表，它主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能（如字体、颜⾊、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
(1) 层叠的概念 CSS—层叠样式表，层叠就是浏览器对多个样式来源进⾏叠加，最终确定结果的过程。
上图中有两个样式来源，第⼀个是引⽤的css1.css，第⼆个是⾃⼰在style中编写的样式。
“层叠”是个叠加的过程，可通过下图表⽰：层叠是CSS的核⼼机制，理解了它才能以最经济的⽅式写出最容易改动的CSS，让⽂档外观在达到设计要求的同时，也给⽤户留下⼀些空间，让他们根据需要更改⽂档的显⽰效果，例如调整字号。
(2) 层叠的规则 由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显⽰出正确的界⾯效果——浏览器会通过叠加和覆盖这两种⽅式来⽣成最终的样式值。
如上图，不同来源的两个样式，第⼀个样式设置了font-weight，第⼆个没有，浏览器会把它叠加在⼀起，即浏览器会把各个零散的整合成⼀个整体。
第⼀个样式color:red，第⼆个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。
覆盖的默认规则是后者覆盖前者，但是⼜⼀个特殊情况——!important。
如上图。
虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。
这就像得到⼀个尚⽅宝剑，有最⾼执⾏权，其他⼈统统让路，否则佛挡杀佛。
1.2 HTML、CSS与JS三者的关系 HTML：页⾯结构，负责从语义的⾓度搭建页⾯结构。
CSS：页⾯样式表现，负责从审美的⾓度美化页⾯。
css的三种使用方式
css的三种使用方式CSS的三种使用方式CSS（层叠样式表）是用于描述网页样式的语言，可以实现对网页的布局和样式的控制。
在使用CSS时，有三种常见的方式：内联样式、内部样式表和外部样式表。
一、内联样式内联样式是将CSS样式直接写在HTML标签的style属性中，它的优先级最高，会覆盖其他方式设置的样式。
使用内联样式的语法如下：```html<p style="color: red; font-size: 16px;">这是一段红色字体，字号为16px的文字。
</p>```内联样式的优点是简单快捷，适合对单个标签进行样式设置。
但是，当需要对多个标签设置相同的样式时，就显得非常繁琐和冗余了。
二、内部样式表内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中，使用内部样式表可以对整个HTML文档中的标签进行样式设置。
使用内部样式表的语法如下：```html<head><style>p {color: blue;font-size: 14px;}</style></head><body><p>这是一段蓝色字体，字号为14px的文字。
</p></body>```内部样式表的优点是可以在同一个HTML文档中集中管理样式，方便维护和修改。
但是，当需要在多个HTML文档中使用相同的样式时，就需要重复地将内部样式表复制到每个HTML文档中，这样会造成代码的冗余。
三、外部样式表外部样式表是将CSS样式写在一个独立的CSS文件中，然后在HTML 文档中通过<link>标签引入该CSS文件，使用外部样式表可以实现样式的重用。
使用外部样式表的语法如下：```html<head><link rel="stylesheet" href="style.css"></head><body><p>这是一段样式来自外部样式表的文字。
css表达式用法
css表达式用法================CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG和MathML等衍生语言）文档样式的样式表语言。
它允许开发者为网页元素定义样式，包括字体、颜色、布局、动画等。
CSS表达式是CSS中的一种特殊语法，允许开发者使用数学公式和逻辑表达式来定义样式。
一、基本语法------CSS表达式的基本语法包括两种类型：数学表达式和逻辑表达式。
### 1. 数学表达式CSS中的数学表达式允许开发者使用基本的数学运算符（如加法、减法、乘法、除法等）和函数（如求和、平均值、最大值、最小值等）来定义样式。
例如：```cssdiv {width: expression(Math.random() * 100 + 50);}```这段代码将会使得`div`元素的宽度是一个随机值，范围在50到150之间。
### 2. 逻辑表达式CSS中的逻辑表达式允许开发者使用逻辑运算符（如`&&`、`||`、`!`）来组合多个条件，以决定元素的样式。
例如：```cssp {color:expression(this.parentNode.firstChild.nextSibling.style.color = "red");}```这段代码将会使得第一个`<p>`元素的文字颜色变为红色，前提是该元素的前一个元素也是`<p>`元素，且下一个元素也是`<p>`元素。
二、使用限制和注意事项------------### 1. 使用限制虽然CSS表达式提供了强大的功能，但也有一些限制。
首先，由于它们涉及到JavaScript的运行环境，因此可能会影响页面的性能。
其次，由于浏览器对CSS表达式的实现方式可能不同，因此在跨浏览器测试时需要特别小心。
最后，一些旧的浏览器可能不支持CSS表达式。
### 2. 注意事项在使用CSS表达式时，开发者需要注意以下几点：* 避免过度依赖CSS表达式，尽可能使用常规的CSS属性来定义样式。
CSS样式基础知识
定义了ID样式后，需要在引用该样式的标记符内使用id属性。例如，可以定义一个ID样式如
下：#red{color:red}
然后可以存若干丌同的HTML标记符中使用该样式规则,如下所示：
<p id="red">本行文字为红色。</p> <h1 id="red">本标题红色。</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
对于a标记符,可以用虚类的方式设置丌同类型链接的显示方式，所谓丌同类型超链接，是指 访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。 可以通过指定下列选择器乊一设置超链接样式： a:link戒:link当超链接没被访问过时，所设置的样式应用于超链接。 a:visited戒:visited当超链接已被访问过时，所设置的样式应用于超链接。 a:active戒:active当超链接当前为被选中状态时，所设置的样式应用于超链接。 a:hover戒:hover当鼠标指针移动到超链接乊上时，所设置的样式应用于超链接。
优势
在于把内容和格式分离开，使得能够用一种统一的方式来管理各种丌同的显示格式。 语法 Selector { property: value }
Selector -- 选择符
property : value -- 样式表定义。属性和属性值乊间用冒号(:)隔开。多个定义乊间用分号(;)隔开
© Copyright Camelot Corporation 2012
© Copyright Camelot Corporation 2012
css cale 使用
css cale 使用一、cale属性的基本用法cale属性用于设置元素的尺寸和位置，它可以接受多种单位，包括像素（px）、百分比（%）、视口单位（vw、vh）等。
下面是一些常用的cale属性用法示例：1. 设置元素的宽度和高度：```cssdiv {width: 200px;height: 150px;}```上述代码将会使一个div元素的宽度为200像素，高度为150像素。
我们可以根据实际需求，使用不同的单位来设置元素的尺寸。
2. 设置元素的最小和最大宽度：```cssdiv {min-width: 100px;max-width: 500px;}```上述代码将会使一个div元素的最小宽度为100像素，最大宽度为500像素。
这样可以保证元素在不同屏幕尺寸下，始终具有一定的宽度范围。
3. 设置元素的内外边距：```cssdiv {padding: 10px;margin: 20px;}```上述代码将会使一个div元素的内边距为10像素，外边距为20像素。
内边距用于控制元素内容与边框之间的距离，外边距用于控制元素与其他元素之间的距离。
二、cale属性的注意事项1. cale属性只能应用于块级元素，不能应用于行内元素。
如果需要设置行内元素的尺寸和位置，可以将其包裹在一个块级元素中。
2. cale属性可以与其他CSS属性组合使用，从而实现更复杂的样式效果。
例如，可以结合position属性来设置元素的定位方式，或者结合display属性来设置元素的显示方式。
3. 使用cale属性时，要考虑到浏览器的兼容性。
有些旧版本的浏览器可能不支持某些cale属性或单位，因此在实际使用中要注意进行测试和兼容性处理。
4. 在响应式布局中，可以使用cale属性来设置元素在不同屏幕尺寸下的样式。
通过媒体查询（media query）可以根据屏幕宽度等条件来动态地改变元素的样式。
三、总结cale属性是CSS中用于设置元素尺寸和位置的重要属性之一。
CSS变量的应用和使用知识点
CSS变量的应用和使用知识点CSS变量是一种非常有用的特性，它允许我们定义一些可重复使用的值，并在整个样式表中进行引用。
通过使用CSS变量，我们可以轻松地进行样式的修改和维护，并提供了更大的灵活性。
本文将介绍CSS变量的基本语法和用法，并进一步探讨其在实际应用中的一些技巧和最佳实践。
一、基本语法和定义在CSS中，我们可以通过使用--前缀来定义一个变量，并使用var()函数来引用该变量。
下面是一个简单的示例：```css:root {--main-color: #f00;}h1 {color: var(--main-color);}```在上面的示例中，我们通过:root选择器将--main-color定义为主要颜色变量，并在h1元素的颜色属性中使用var()函数引用该变量。
这样，当我们想要更改主要颜色时，只需修改--main-color的值即可，而不需要在整个样式表中逐个修改每个使用该颜色的地方。
二、局部和全局作用域CSS变量可以在全局或局部范围内定义。
在全局范围内定义的变量可以在整个样式表中被引用，而局部范围的变量只能在其所在的选择器范围内被引用。
```css:root {--global-color: #f00;}h1 {--local-color: #00f;color: var(--global-color);}p {color: var(--local-color);}```在上面的示例中，--global-color是全局变量，可以被h1和p元素中的var()函数引用。
而--local-color是局部变量，只能在h1元素中使用。
三、变量的继承CSS变量还可以继承。
当在某个元素中定义了一个变量并且该元素有子元素，那么这个变量也将被子元素继承。
```css:root {--main-color: #f00;}.container {--sub-color: #00f;}h1 {color: var(--main-color);}.container p {color: var(--sub-color);}```在上面的示例中，--main-color是根元素的变量，--sub-color是.container元素的变量。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
介绍级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。
它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。
CSS是每个网页设计人员所必须掌握的。
本CSS教程能够让你在数小时内入门CSS。
它很容易理解，而且将向你介绍所有高级技巧。
学习CSS是很有趣的。
你在学习本教程的过程中，记得留有充分的时间来实践你在每一课中学到的知识。
使用CSS要求你有基本的HTML经验。
如果你不熟悉HTML，那么请在开始学习CSS之前先学习我们提供的HTML教程。
我需要什么软件？在学习本教程时，请不要使用类似FrontPage、DreamWeaver或Word这样的软件。
这些高级软件对你学习CSS没有帮助。
相反，它们会限制你，并显著减慢你的学习进度。
你所需要的只是一个免费的简易文本编辑器。
例如，微软视窗操作系统（Microsoft Windows）自带的记事本（Notepad）程序。
你可以依次点击“开始菜单→程序→附件”找到该程序。
如果你用的是其他操作系统，那么也有类似的简易文本编辑器可用，比如Linux上的Pico或Mac（苹果机）上的Simple Text。
采用简易文本编辑器来学习编写HTML和CSS是非常好的，因为它不会影响或修改你所输入的代码。
这样，代码的对错完全取决于你自己，而不是软件。
你可以使用任何浏览器。
但我们建议你把浏览器升级至最新版本。
你所需要的全部软件就是一个浏览器和一个简易文本编辑器。
我们现在开始学习CSS吧！第1课：CSS是什么？也许你曾听说过CSS，但并不真正清楚CSS到底是什么。
在这一课，你将学到更多CSS的知识，并了解CSS可以做些什么。
CSS是C ascading S tyle S heets（级联样式表）的缩写。
可以用CSS做什么？CSS是一种样式表语言，用于为HTML文档定义布局。
例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
拭目以待吧！HTML可以用于为网站添加布局效果，但有可能被误用。
而CSS则提供了更多选择，而且更为精确、完善。
现在所有浏览器都支持CSS。
经过下面若干课的学习之后，你将能够制作自己的CSS样式表，为自己的网站增添花样了。
CSS跟HTML的区别在哪里？HTML用于结构化内容；CSS用于格式化结构化的内容。
嗯，这听上去有点技术性并令人疑惑。
不过没关系，我们继续学习。
过会儿你就明白了。
在Tim Berners-Lee发明万维网（World Wide Web）的那个年代，HTML语言是唯一用于给文本添加结构的语言。
作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。
随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。
为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的HTML标签（比如<font>等），以引入了新的布局——而非新的结构。
这也导致了原本用于进行文本的结构化的标签（比如<table>等）越来越多地被误用于进行页面的布局。
许多新的布局标签（比如<blink>）只有一种浏览器支持。
“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。
CSS的发明正是为了改善这一状况，它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。
而且，文档的表现样式与内容的分离，也令网站维护容易了许多。
采用CSS有哪些好处？CSS是Web设计界的一次革命。
CSS的具体优点包括：∙通过单个样式表控制多个文档的布局；∙更精确的布局控制；∙为不同的媒体类型（屏幕、打印等）采取不同的布局；∙无数高级、先进的技巧。
第2课：CSS的工作原理在这一课，你将学习如何制作自己的第一个样式表。
你将了解基本的CSS模型，以及在HTML文档里使用CSS所必需的代码。
级联样式表（CSS）里用到的许多CSS属性都与HTML属性相似，所以，假如你熟悉采用HTML进行布局的话，那么这里的许多代码你都不会感到陌生。
我们先来看一个具体的例子。
基本的CSS语法比方说，我们要用红色作为网页的背景色：用HTML的话，我们可以这样：<body bgcolor="#FF0000">用CSS的话，我们可以这样获得同样的效果：body {background-color: #FF0000;}你会注意到，HTML和CSS的代码颇有几分相似。
上例也向你展示了基本的CSS模型：但是把CSS代码放在哪里呢？这正是我们下面要讲的。
为一个HTML文档应用CSS为HTML文档应用CSS，有三种方法可供选择。
下面对这三种方法进行了概括。
我们建议你对第三种方法（即外部样式表）予以关注。
方法1：行内样式表（style属性）为HTML应用CSS的一种方法是使用HTML属性style。
我们在上例的基础之上，通过行内样式表将页面背景设为红色：<html><head><title>例子</title></head><body style="background-color: #FF0000;"><p>这个页面是红色的</p></body></html>方法2：内部样式表（style元素）为HTML应用CSS的另一种方法是采用HTML元素style。
比如像这样：<html><head><title>例子</title><style type="text/css">body {background-color: #FF0000;}</style></head><body><p>这个页面是红色的</p></body></html>方法3：外部样式表（引用一个样式表文件）我们推荐采用这种引用外部样式表的方法。
在本教程之后的例子中，我们将全部采用该方法。
外部样式表就是一个扩展名为css的文本文件。
跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。
例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。
就像下面这样：现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML 文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：<link rel="stylesheet" type="text/css" href="style/style.css" />注意要在href属性里给出样式表文件的地址。
这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。
就像这样：<html><head><title>我的文档</title><link rel="stylesheet" type="text/css" href="style/style.css" /></head><body>...这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。
换句话说，可以用一个CSS文件来控制多个HTML文档的布局。
这一方法可以令你省去许多工作。
例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。
采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。
让我们来实践刚刚所学到的知识。
自己试试看打开记事本（或其他文本编辑器），创建两个文件——一个HTML文件，一个CSS文件——它们的内容如下：default.htm<html><head><title>我的文档</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h1>我的第一个样式表</h1></body></html>style.cssbody {background-color: #FF0000;}然后，把这两个文件放在同一目录下。
记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。
用浏览器打开default.htm，你所看到的页面应该具有红色背景。
恭喜！你已经完成了自己的第一个样式表！第3课：颜色与背景本课，你将学习如何在网站上应用颜色与背景。
我们还会介绍用于定位和控制背景图像的高级方法。
本课将对下列CSS属性进行讲解：∙color∙background-color∙background-image∙background-repeat∙background-attachment∙background-position∙background前景色：‘color’属性CSS属性color用于指定元素的前景色。
例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。
h1 {color: #ff0000;}∙显示示例颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。
‘background-color’属性CSS属性background-color用于指定元素的背景色。
因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body 元素应用background-color属性就行了。
你也可以为其他包含标题或文本的元素单独应用背景色。
在下例中，我们为body和h1元素分别应用了不同的背景色。
body {background-color: #FFCC66;}h1 {color: #990000;background-color: #FC9804;}显示示例注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。