méthode d'écriture de style CSS-Questions et réponses frontales-php.cn

Le style CSS (Cascading Style Sheets) est une technologie essentielle pour le développement front-end. Il peut contrôler la mise en page, les polices, les couleurs et d'autres styles de pages Web pour parvenir à l'unification des styles de pages Web. Cet article se concentrera sur la façon d'écrire des styles CSS pour aider les lecteurs à comprendre et à appliquer le CSS plus en profondeur.

1. Feuille de style intégrée La feuille de style intégrée est un moyen d'écrire des styles CSS directement dans le code HTML. Utilisez la balise dans le d'un document HTML pour définir des styles. Par exemple :

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } Copier après la connexion Dans l'exemple ci-dessus, la couleur d'arrière-plan de l'élément body est #f2f2f2, la couleur du texte est #262626 et la taille de police de l'élément h1 est de 36 pixels, qui est affichée en gras.

2. Feuille de style externe La feuille de style externe est un moyen d'écrire des styles CSS séparément dans un fichier CSS externe. Utilisez la balise dans le du document HTML pour introduire une feuille de style externe. Par exemple :

Copier après la connexion Le contenu du fichier style.css est :

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } Copier après la connexion De cette façon, tous les éléments HTML peuvent obtenir des informations de style à partir de la feuille de style externe, ce qui permet la mise en œuvre d'un code HTML concis plus clair.

3. Le style en ligne Le style en ligne est un moyen d'écrire des styles CSS directement dans l'attribut style de la balise HTML. Par exemple :

Hello, world! Copier après la connexion Dans l'exemple ci-dessus, la couleur de police de l'élément h1 est rouge et la taille de police est de 36 pixels.

4. Sélecteur CSS Le sélecteur CSS est un mécanisme permettant de sélectionner des éléments HTML et d'appliquer des styles. Il peut localiser des éléments en fonction de leur nom, nom de classe, ID et autres attributs, et hériter ou remplacer leurs styles CSS correspondants. Voici les utilisations courantes des sélecteurs CSS :

Sélecteur de balises : localisez les éléments et appliquez des styles par leurs noms de balises. Par exemple : h1 { color: red; } Copier après la connexion Class selector : localisez l'élément et appliquez le style via l'attribut de classe de l'élément. Par exemple : .red { color: red; } Copier après la connexion Dans le code HTML, définissez l'attribut de classe de l'élément qui doit être stylisé sur "rouge" pour obtenir une couleur de police rouge.

Sélecteur ID : Localisez un élément et appliquez des styles via son attribut ID. Dans le code HTML, définissez l'attribut ID de l'élément auquel le style doit être appliqué sur "id" pour obtenir l'effet de style. Par exemple : #header { background-color: #f2f2f2; } Copier après la connexion Dans l'exemple ci-dessus, l'ID de l'élément est "header" et la couleur d'arrière-plan est #f2f2f2.

Sélecteur d'attribut : localisez les éléments et appliquez des styles en fonction de leurs valeurs d'attribut. Par exemple : input[type="text"] { border: 1px solid #ccc; } Copier après la connexion Dans l'exemple ci-dessus, les bordures de tous les éléments d'entrée avec une valeur d'attribut de type "text" sont une ligne continue grise de 1 pixel d'épaisseur.

Sélecteur descendant : localisez les éléments et appliquez des styles à travers leur relation parent-enfant. Par exemple : div p { color: #262626; } Copier après la connexion Dans l'exemple ci-dessus, la couleur de police de tous les éléments p de l'élément div est #262626.

Les méthodes ci-dessus sont courantes pour écrire des sélecteurs CSS. Leur application flexible peut réaliser des ajustements de style fastidieux et rendre la mise en page, les polices, les couleurs, etc. de la page Web plus belles.

5. Résumé Cet article présente les méthodes d'écriture courantes telles que les feuilles de style intégrées, les feuilles de style externes, les styles en ligne, les sélecteurs CSS, etc. Ils peuvent aider les développeurs à réaliser des pages Web. style. Unifiez pour créer une expérience utilisateur plus belle et plus confortable. Dans le développement réel, il est nécessaire de choisir une méthode d'écriture de style CSS adaptée en fonction des besoins spécifiques pour améliorer la lisibilité et la maintenabilité du code.