CSS样式详解：内联、嵌入与外部样式的对比

需积分: 9 196 浏览量更新于2024-09-16 收藏 49KB DOC 举报

本文档是一份关于CSS（层叠样式表）的学习笔记，专为初学者和菜鸟设计，帮助他们快速理解和掌握CSS的基本概念。CSS是前端开发的重要组成部分，用于控制网页的外观和布局。以下是三种常见的CSS样式应用方式： 1. **内联式样式表**：内联样式直接在HTML元素的`style`属性中定义，如`<p style="font-size:4cm; color:red;">`。这种方式简洁明了，但缺点是代码冗余，不易维护和复用，特别是当需要更改样式时，修改频繁且不易管理。 2. **内部样式表**或**嵌入式样式表**：这种方法将样式写在`<head>`标签内的`<style>`标签中，通过选择器（如`a { color:red; font-size:3cm; background-color:blue; border:3px solid yellow; }`）指定特定元素的样式。这种方式适用于局部控制，仅影响当前页面的部分元素，不能跨多个页面应用。 3. **外部样式表**或**链接式样式表**：通过`<link>`标签将CSS样式定义在独立的`.css`文件中，如`<link rel="stylesheet" type="text/css" href="1.css" />`。这种方法将样式分离，易于管理和维护，一个CSS文件可以应用于多个HTML页面，通过选择器如`<p>`或`<b>`来精确地作用于不同的元素。此外，还可以使用`@import`规则来导入其他CSS文件，进一步扩展样式库。总结来说，学习CSS需要理解内联、内部和外部样式的区别，以及如何通过选择器和链接机制实现样式重用和页面的统一设计。掌握这些基本概念后，可以逐步深入学习更复杂的布局、响应式设计、继承、层叠等高级特性，从而提高网页开发的效率和效果。对于初学者来说，实践编写和应用样式是关键，不断尝试和调试才能真正掌握这门技术。

CSS

四种样式：

1，直接在标签中加入 style=属性和值。属性和值之间用冒号：，多个属性之间用分号。例

如：

<p style="font-size=4cm;color="red"">.也就是内联式样式表。每个 html 标签都可以加样式表。

不足：代码量多，不利于更新。

2，在 html 中的<head>标签内部也就是头部加入<style>属性，然后输入属性和值，然后进

行连接。然后在<style>标签中加入样式选择器，然后大括号{},大括号里边是属性和值。属

性和值之间是冒号，多个属性之间还是分号。

例如：

<html>

<head>

<title>嵌入样式表</title>

<style>

color:red;

Font-size:3cm;

Background-color:blue;

border:3px solid yellow;

}

</style>

</head>

<body>

<a>最后的颜色。</a>

</body>

</html>

可以控制当前页面的所有样式，不能控制整个网站的所有样式，因为整个网站是由多个网

页构成的。这就是嵌入样式表。

3，将样式单独定义在一个 CSS 文件中，并在 html 中通过 link 元素连接在 html 中使用。所

有的页面都可以加载这个 CSS 文档。例如：CSS 文件。

color:red;

Font-size:3cm;

Background-color:blue;

border:3px solid yellow;

}

Html 文件

<html>

<head>

<title>嵌入样式表</title>

</head>

<body>

<a>最后的颜色。</a>

下载后可阅读完整内容，剩余9页未读，立即下载

zuihoudeyanse

粉丝: 0
资源: 1

CSS样式详解：内联、嵌入与外部样式的对比

css与javascript笔记

B站Mosh终极 HTML & CSS 课程汇总笔记

html+css+javascript笔记

渡一前端html、css、js笔记及学习规划.zip

lucson css3 代码笔记

html5笔记+css3笔记

前端html5css3笔记整理下载

黑马程序员css笔记

pink老师css笔记

黑马程序员css笔记pink

最新资源