Comment connecter HTML à CSS

HTML et CSS sont des composants importants de la technologie frontale. Leur coopération peut aider la page à obtenir une meilleure apparence et une meilleure expérience interactive. Cet article présentera comment HTML est associé à CSS pour obtenir un contrôle du style de page.

1. À propos du HTML et du CSS

Le HTML est la structure de base d'une page Web. Il peut être compris comme le squelette d'une maison. Il définit le contenu, la mise en page, les balises et les liens de la page Web. CSS est une feuille de style, qui peut être comprise comme la décoration d'une maison. Elle contrôle l'apparence, la mise en page et la couleur de la page Web.

2. Ajouter du CSS au HTML

Il existe deux façons d'ajouter des feuilles de style CSS aux documents HTML, à savoir les styles internes et les styles externes. Ils seront présentés ci-dessous :

Styles internes Les styles internes sont Ajouter le &lt. ;style> entre les balises et dans le document HTML, puis écrivez le code de style CSS dans la balise . Par exemple :

My Website body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333333; } Welcome to my website This is the home page of my website

Dans le code ci-dessus, la balise contient des styles CSS, où la balise "body" contrôle la couleur d'arrière-plan et la police de la page Web, et la balise "h1" contrôle la couleur du titre.

2. Style externe

Le style externe consiste à placer le code CSS dans un fichier CSS séparé, puis à importer le fichier CSS dans le document HTML via la balise Par exemple :

My Website Welcome to my website This is the home page of my website

Dans le code ci-dessus, la balise pointe vers un fichier CSS nommé "style.css", que le code HTML utilisera pour contrôler le style de la page Web.

3. Sélecteurs CSS

Pour comprendre comment créer des styles CSS, vous devez d'abord comprendre les sélecteurs CSS. Les sélecteurs sont un moyen de spécifier les éléments HTML à styliser. Voici quelques sélecteurs CSS courants :

1. Sélecteur d'élément

Le sélecteur d'élément est un moyen d'utiliser le nom de la balise comme sélecteur. Par exemple, le code CSS suivant définit la couleur de tous les éléments de paragraphe sur rouge :

p { color: red; } 2. Sélecteur de classe

Les sélecteurs de classe attribuent des noms de classe aux éléments HTML. Ces noms de classe peuvent être utilisés dans les feuilles de style pour spécifier des styles. Par exemple, le code CSS suivant définit tous les éléments avec l'attribut de classe "my-class" sur une couleur de fond rouge et une taille de police de 16 pt :

.my-class { background-color: red; font-size: 16pt; } Dans le code HTML, vous pouvez appliquer ce style à un élément en ajoutant la classe attribut, La procédure est la suivante :

Hello, this is a paragraph

Sélecteur d'ID Le sélecteur d'ID spécifie un nom d'ID unique pour un élément HTML. En utilisant ce nom dans la feuille de style, l'élément ID peut être stylisé. Par exemple, le code CSS suivant définit un élément avec une valeur d'attribut ID de "my-id" sur un fond bleu et une taille de police de 18 pt :

#my-id { background-color: blue; font-size: 18pt; } Dans le code HTML, vous pouvez appliquer ce style à un élément en ajoutant l'identifiant attribut, comme suit :

Hello, this is a paragraph

4. Résumé

L'ajout de feuilles de style CSS au HTML peut facilement contrôler l'apparence et le style de la page, ce qui peut être réalisé de deux manières : des feuilles de style internes et externes. Lors de l'écriture de styles CSS, vous devez comprendre les sélecteurs CSS, qui permettent de spécifier les éléments HTML auxquels les styles doivent être appliqués. En combinant ces techniques, vous pouvez obtenir des pages belles et faciles à gérer.