méthode d'introduction CSS

PHPz
Libérer: 2023-05-09 10:16:07
original
5226 Les gens l'ont consulté

CSS (Cascading Style Sheets) est un langage de feuille de style couramment utilisé dans la conception Web. Il peut contrôler le style des pages Web, y compris les polices, les couleurs, les tailles, les mises en page, etc., rendant les pages Web plus lisibles et plus belles. Pour utiliser CSS, vous devez importer le fichier CSS dans le fichier HTML. Trois méthodes d'introduction de CSS seront présentées ci-dessous.

1. Style en ligne

Le style en ligne est une méthode d'écriture de styles CSS directement dans les balises d'éléments HTML. L’avantage de cette approche est qu’elle peut être stylisée sur un seul élément HTML, mais elle peut devenir très verbeuse et répétitive si vous souhaitez appliquer le même style sur plusieurs éléments. La syntaxe des styles en ligne est la suivante :

<p style="color: red;">这是红色文本</p>
Copier après la connexion

Parmi eux, l'attribut style est utilisé pour définir le style. Les attributs et les valeurs de style sont séparés par des deux-points, et plusieurs attributs sont séparés par. points-virgules. style 属性用于定义样式,样式属性和值用冒号隔开,多个属性之间用分号隔开。

二、内部样式表

内部样式表是将 CSS 样式写在 HTML 文件的 <head> 标签中的 <style> 标签内部。这种方法适用于某个 HTML 文件内多个元素共用样式的情况。内部样式表的语法如下:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是红色文本</p>
    </body>
</html>
Copier après la connexion

其中,<style> 标签内部写 CSS 样式,样式类似于内联样式,但是不需要写在元素标签内部,而是写在 { } 中间,多个属性和值之间也用分号隔开。

三、外部样式表

外部样式表是将 CSS 样式单独写在一个 .css 文件中,然后通过 HTML 文件的 <link> 标签将其引入。这种方法适用于多个 HTML 文件需要共用相同样式的情况。外部样式表的语法如下:

  1. 创建 .css 文件,例如 style.css
  2. 写入要引入的 CSS 样式,例如:
p {
  color: red;
}
Copier après la connexion
  1. 在 HTML 文件中的 <head> 标签中增加如下代码:
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>这是红色文本</p>
  </body>
</html>
Copier après la connexion

其中,<link> 标签用于指定 .css 文件的路径,href 属性用于指定 .css

2. Feuille de style interne

La feuille de style interne consiste à écrire le style CSS à l'intérieur de la balise <style> dans la balise <head> du HTML. déposer. Cette méthode convient aux situations dans lesquelles plusieurs éléments d’un fichier HTML partagent des styles. La syntaxe de la feuille de style interne est la suivante : 🎜rrreee🎜Parmi eux, le style CSS est écrit à l'intérieur de la balise <style>. Le style est similaire au style en ligne, mais n'en a pas besoin. à écrire à l'intérieur de la balise element, mais est écrit en { } Au milieu, plusieurs attributs et valeurs sont également séparés par des points-virgules. 🎜🎜3. Feuille de style externe🎜🎜Une feuille de style externe écrit le style CSS séparément dans un fichier .css, puis l'ajoute via la balise <link> de le fichier HTML son introduction. Cette méthode convient aux situations où plusieurs fichiers HTML doivent partager le même style. La syntaxe d'une feuille de style externe est la suivante : 🎜
  1. Créez un fichier .css, tel que style.css.
  2. Écrivez le style CSS à introduire, par exemple :
rrreee
  1. <head> :
rrreee🎜Parmi eux, la balise <link> permet de préciser le chemin du .css , href est utilisé pour spécifier le chemin et le nom du fichier .css. 🎜🎜Ci-dessus sont les trois méthodes d'introduction de CSS. Chaque méthode a ses propres scénarios applicables et peut être sélectionnée et utilisée en fonction de besoins spécifiques. 🎜

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!