CSS - 1、CSS的编写样式
1. 内联样式（Inline CSS）
内联样式是直接写在HTML元素的
style属性中的CSS代码。这种方式可以直接为单个元素设置样式。语法：
<元素 style="CSS属性: 值; CSS属性: 值;">内容</元素>示例：
<p style="color: red; font-size: 20px;">这是一段红色的文字，字体大小为20px。</p>
<div style="background-color: blue; width: 100px; height: 100px;"></div>特点：
-
优点：
-
直接作用于单个元素：适用于快速为某个特定元素设置样式。
-
优先级最高：在样式冲突时，内联样式会覆盖其他样式。
-
-
缺点：
-
可维护性差：样式分散在HTML代码中，难以管理和修改。
-
无法复用：每个元素都需要单独设置样式，无法实现样式的复用。
-
适用场景：
-
临时测试样式。
-
需要为某个特定元素设置独特的样式。
2. 内部样式表（Internal CSS）
内部样式表是将CSS代码写在HTML文档的
<style>标签中，通常位于<head>部分。这种方式可以为整个HTML文档定义样式。语法：
<head>
<style>
/* CSS样式规则 */
选择器 {
CSS属性: 值;
}
</style>
</head>示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<div class="box"></div>
</body>
</html>特点：
-
优点：
-
集中管理：所有样式都在一个地方定义，便于维护和修改。
-
适用于单个页面：适合为单个HTML文档定义样式。
-
-
缺点：
-
无法跨页面复用：如果多个页面需要相同的样式，需要重复编写代码。
-
文件体积增大：样式代码嵌入HTML中，可能导致HTML文件体积变大。
-
适用场景：
-
单个页面的样式定义。
-
快速开发和测试。
3. 外部样式表（External CSS）
外部样式表是将CSS代码写在一个单独的
.css文件中，然后通过<link>标签引入HTML文档。这种方式是最推荐的，因为它可以实现样式的复用和集中管理。语法：
-
创建一个CSS文件（如
styles.css）：css复制 /* styles.css */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: blue; } .box { width: 100px; height: 100px; background-color: red; } -
在HTML文档中引入CSS文件：
HTML复制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式表示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>这是一个标题</h1> <div class="box"></div> </body> </html>
特点：
-
优点：
-
复用性强：多个HTML页面可以共享同一个CSS文件。
-
便于维护：样式集中在一个文件中，便于修改和更新。
-
提高性能：浏览器会缓存CSS文件，减少加载时间。
-
-
缺点：
-
依赖文件：需要确保CSS文件路径正确，否则样式无法加载。
-
开发初期可能稍显繁琐：需要创建额外的文件。
-
适用场景：
-
多页面的网站或项目。
-
需要统一管理样式。
-
需要提高代码的可维护性和可复用性。
4. CSS样式的优先级
当同时使用内联样式、内部样式表和外部样式表时，可能会出现样式冲突。CSS的优先级规则如下：
-
内联样式 > 内部样式表 > 外部样式表
-
!important：在CSS中，
!important声明的样式优先级最高，但应谨慎使用，因为它会破坏样式的自然层叠规则。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<style>
h1 {
color: green; /* 内部样式表 */
}
</style>
</head>
<body>
<h1 style="color: red;">这是一个标题</h1> <!-- 内联样式 -->
</body>
</html>-
外部样式表：
h1 { color: blue; } -
内部样式表：
h1 { color: green; } -
内联样式：
color: red;
最终，
<h1>的字体颜色会是红色，因为内联样式的优先级最高。5. 总结
-
内联样式：直接写在HTML元素的
style属性中，优先级最高，适合临时测试或单个元素的特殊样式。 -
内部样式表：写在HTML文档的
<style>标签中，适合单个页面的样式定义，便于集中管理。 -
外部样式表：写在单独的
.css文件中，通过<link>引入HTML，适合多页面项目，便于复用和维护。
浙公网安备 33010602011771号