CSS 如何在HTML中编写CSS

超文本标记语言（HTML）是一种广泛使用的标记语言，用于创建网站。标记语言用于构建网页的框架或骨架。这个框架不能完全自主工作，应该使用CSS（层叠样式表）进行设计。CSS通过对网页进行视觉美化和个性化定制来实现其功能。本文旨在了解在HTML中编写CSS的各种方法。尽管可以分别编写CSS代码和HTML代码，并将它们链接在一起（外部CSS），但为了本文的目的，我们将谈论其他方法。

使用的方法

CSS代码可以方便地在一个单独的文件中编写，然后链接到HTML文件。然而，为了将CSS样式整合和应用到HTML中，有各种不同的方法可供选择 –

内联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是指将CSS代码写在HTML文件的head部分，使用相同的’style’属性。以这种格式编写和共享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>