数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 HTML 中插入 CSS？
CSS 是 层叠样式表 (Cascading Style Sheets) 的缩写。它指定 HTML 元素如何在屏幕、纸张或其他媒体上显示。它可以一次控制多个网页的布局，从而节省时间和精力。它可以用于各种样式目的，例如更改页面文本和背景的颜色、移除链接下划线以及动画图像、文本和其他 HTML 元素。
CSS 可以通过三种方式添加到 HTML 中。要为页面上的单个 HTML 元素设置样式，可以在 style 属性中使用内联 CSS。可以通过在 head 部分包含 CSS 来在 HTML 文档中包含内部样式表。我们还可以链接到包含所有 CSS（独立于 HTML）的外部样式表。
内联 CSS：style 属性必须放在 HTML 元素内。
内部 CSS：需要将 <style> 元素放在 HTML 文件的 head 部分。
外部 CSS：需要在 HTML 文件的 head 部分使用 <link> 元素。
在本文中，我们将详细讨论这三种在 HTML 中插入 CSS 的方法。
内联 CSS
内联 CSS 允许我们在 HTML 中“包含”CSS。要包含内联 CSS，必须在 HTML 元素的起始标签内使用 style 属性。语法如下：
<element_name style="CSS property: attribute_value">
内联 CSS 也称为“嵌入式样式表”，优先于任何其他针对相同元素的 CSS。但是，不建议使用内联样式，因为它会导致大量重复，因为样式无法在其他地方重用。然而，有时它们是最佳（或唯一）选择，例如当针对具有不同样式属性的单个元素时。
示例
在这个例子中，我们将使用内联 CSS 来设置 HTML 元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>An example of inline CSS</title>
</head>
<body>
<div style="border:2px solid blue; width:230px; padding:5px">
<p style="background-color:lightblue; color:navy; font-weight:bold">This is a paragraph styled using inline CSS</p>
</div>
</body>
</html>
内部 CSS
内部 CSS 是最常用的 CSS 形式之一，用于更改、设置样式和修改单个网页的独特样式。可以通过在 HTML 网页的 <head> 部分包含 <style> 元素来使用内部 CSS。CSS 属性和值仍然设置，但不是直接放在 style 属性内，而是放在方括号中并由 CSS 选择器定义。它可以应用于整个网页，但不能应用于多个网页，我们可以使用每个页面上的相同代码来设置多个网页的样式。
<!DOCTYPE html>
<html>
<head>
<style>
CSS selector {
CSS property_name: attribute_value;
}
</style>
</head>
内部 CSS 比内联 CSS 更好，因为它允许我们一次设置多个元素的样式，而不是必须重复地向元素添加相同的 style 属性。
它也适用于单页网站，因为它将 CSS 和 HTML 分隔到不同的部分，同时将它们保留在同一个文档中。如果我们有一个多页网站并希望全面进行更改，则必须打开代表这些页面的每个 HTML 文件，并在每个 head 部分添加或更改内部 CSS。
示例
在这个例子中，我们将使用内部 CSS 来设置 HTML 元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>An example of internal CSS</title>
<style>
body{
background-color:lemonchiffon;
}
div{
width:300px;
background-color:sienna;
margin:10px;
padding:10px;
border:5px solid wheat;
}
p{
text-align:justify;
color:white;
font-size:18px;
}
</style>
</head>
<body>
<div>
<p>All the HTML elements including this paragraph have been styled using internal CSS.</p>
</div>
</body>
</html>
外部 CSS
外部样式表被广泛认为是设置 HTML 代码最有效的方法。它们的格式与内部 CSS 类似，但它们没有包含在 <style> 标记中，也没有放在 HTML 文件的 head 部分。相反，它们与 HTML 完全分开，必须放在一个 CSS 文件（扩展名为 .css）中。我们只需要在 head 部分包含此外部样式表的链接，就可以在 HTML 代码中使用它。
<link rel="stylesheet" href="path_to_css-file">
外部 CSS 比内联和内部样式表有多个优点。
更改样式表后，它会影响所有链接的页面。
我们可以创建样式类，然后可以将其应用于各种 HTML 元素。
它在所有网页上都具有统一的外观和感觉。
由于 CSS 文件只下载一次，并根据需要应用于每个相关页面，因此加载时间减少了。
示例
在这个例子中，我们将使用外部 CSS 来设置 HTML 元素的样式。
mystyle.css
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>An example of external CSS</title>
<style>
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>External CSS has been used for styling this HTML document.</p>
</div>
</body>
</html>
677 次浏览
