如何在 HTML 中编写 CSS?
超文本标记语言 (HTML) 是一种广泛使用的标记语言,用于创建网站。标记语言以构建网页框架或骨架而闻名。此框架本身无法完全工作,应使用 CSS(层叠样式表)进行设计。CSS 在网页上工作,使其在视觉上更具吸引力,并根据个人需求定制网站。本文的目的是了解在 HTML 中编写 CSS 的各种方法。虽然 CSS 代码和 HTML 代码可以分别编写并相互链接(外部 CSS),但出于本文的目的,我们将讨论其他方法。
使用的方法
CSS 代码可以方便地编写在一个单独的文件中,然后链接到 HTML 文件。但是,为了在 HTML 中集成和使用 CSS 样式,有多种方法可用 -
内联 CSS
内部 CSS
组合方法
内联 CSS
内联 CSS
内联 CSS 涉及直接在 HTML 元素中使用“style”属性。它可以快速、个性化地调整单个元素的样式。
在 CSS 中,样式根据其特异性来确定,可以表示为特异性分数。每种方法都具有独特特异性分数,排名更高的样式优先并在网站上显示。值得注意的是,内联 CSS 具有最高的特异性分数,会覆盖可能存在的其他样式。
虽然内联 CSS 提供了一些优势,例如其实现高度特定样式的能力,但它也有一些缺点。由于其高特异性和可能与其他样式发生冲突,管理内联 CSS 可能会变得很麻烦。
算法
打开一个 HTML 文件并编写代码以打印文本。
通过在与文本相同的行中使用 style 属性,可以更改颜色、背景颜色、字体大小和文本对齐方式。
要查看更改,请保存并检查。
示例
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Understanding Inline CSS </title> </head> <body> <p style='color: rgb(84, 12, 12);' > Inline CSS is written in the same line as that of the element.</p> </body> </html>
内部 CSS
内部 CSS 或嵌入式 CSS 指的是在 HTML 文件的 head 部分使用相同的“style”属性编写 CSS 代码。以这种格式管理和共享 CSS 代码很容易,但此方法的特异性分数低于内联代码方法。
外部 CSS 和内部 CSS 之间的唯一区别在于,代码是在一个单独的文件中编写然后在外部 CSS 中链接,而代码是在 head 标签中的 style 标签中编写。
算法
在 head 标签中定义 style 标签。
定义元素类或类型,并选择所需的颜色、背景颜色、字体大小和文本对齐方式。
保存文件以检查更改。
示例
<html lang="en">
<head>
<style>
h1{
color: black;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Internal CSS is coded in the style tag of head tag.</h1>
</body>
</html>
组合方法
上面提到的两种方法也可以组合起来产生所需的输出,内联技术可以用来定制一些文本,内部方法可以作为所有文本的通用框架。此方法被广泛使用,因为它兼具两者的优点,可以帮助生成理想的输出。
算法
在 head 标签中定义 style 标签。
定义元素类或类型,并选择所需的颜色、背景颜色、字体大小和文本对齐方式。
保存文件以检查更改。
示例
<html lang="en">
<head>
<style>
h1{
color: black;
}
h2{
color: #1319;
}
p{
color: #1984;
}
</style>
</head>
<body>
<h1>Greetings of the day</h1>
<p>Markup Languages are known for building frameworks or skeleton for a webpage. This framework cannot work entirely on its own and should be designed using Cascading Style sheets. CSS works on the webpages to make it visually appealing and to customize the website to individual’s needs.</p>
<p style="color: rgb(224, 189, 249);"> External CSS is also an option.</p>
</body>
</html>
结论
如本文所述,CSS 代码可以使用多种方法编写。在选择方法时,个人应注意其项目的需要,无论是小型简单的项目还是大型耗时的项目。
内联方式是快速为单个元素设置样式和自定义的快捷方式,但此方法可能难以管理且繁琐。另一方面,内部 CSS 则在 style 标签的指定位置编写,可以为许多类似类型的元素设置样式,但此方法缺乏表现力。
总之,编写 CSS 代码时应牢记特异性、结构和需求等因素。通过掌握在 HTML 中编写 CSS 的技巧,Web 开发过程变得令人兴奋和有趣。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP