HTML introduit la méthode CSS-Questions et réponses frontales-php.cn

HTML introduit la méthode CSS

王林

Libérer： 2023-05-09 09:33:06

original

1454 Les gens l'ont consulté

Dans la conception Web, HTML (Hypertext Markup Language) et CSS (Cascading Style Sheets) sont deux composants de base. Ensemble, ils peuvent créer diverses mises en page, styles et effets interactifs complexes. Afin d'introduire les styles CSS en HTML, voici plusieurs méthodes simples.

Feuille de style interne

La feuille de style interne intègre le code CSS directement dans le code HTML. Cette méthode convient aux situations où une seule page Web doit introduire des styles CSS. La méthode d'utilisation est la suivante :

<!DOCTYPE html>
<html>
<head>
  <title>内部样式表</title>
  <style>
    body {
      font-family: Arial;
      background-color: #f2f2f2;
    }
    h1 {
      color: #00bfff;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>内部样式表示例</h1>
  <p>这是一段示例文本。</p>
</body>
</html>

Copier après la connexion

Vous pouvez voir que le code de style dans le code HTML ci-dessus est écrit dans la balise <style> dans le <head></code > balise . Cette feuille de style sera appliquée à tous les éléments de la page. <code><head>标签内的<style>标签中。这样所有页面元素都会应用这个样式表。

外部样式表

外部样式表是将CSS代码单独存放在一个CSS文件中，需要在HTML中引入这个文件。这种方法更适用于多个网页需要共用同一个CSS样式的情况。使用方法如下：

创建一个CSS文件，比如命名为style.css，然后写入下面的样式代码：

body {
  font-family: Arial;
  background-color: #f2f2f2;
}
h1 {
  color: #00bfff;
  text-align: center;
}

Copier après la connexion

然后在HTML文件的<head>标签中，使用<link>标签将CSS文件链接到HTML文件中：

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>外部样式表示例</h1>
  <p>这是一段示例文本。</p>
</body>
</html>

Copier après la connexion

可以看到，上面的HTML代码中使用<link>标签将style.css文件链接到HTML文档中，这样所有页面元素都会按照这个样式表进行渲染。

内联样式表

内联样式表是将CSS样式直接添加到HTML标签中的style属性中。这种方法适用于只有特定页面元素需要特殊样式的情况。使用方法如下：

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color: #00bfff;text-align: center;">内联样式表示例</h1>
  <p>这是一段示例文本。</p>
</body>
</html>

Copier après la connexion

可以看到，上面的HTML代码中的<h1>标签通过style

<head>

<link>

Le fichier .css

style

<h1>

style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!