Pourquoi utiliser des feuilles de style CSS

Les feuilles de style CSS peuvent aider les développeurs à séparer le contenu informatif d'un document de la question triviale de la façon d'afficher un document, c'est-à-dire à séparer le style du contenu : 1. Vous pouvez utiliser ; le même contenu dans différents styles atteint des objectifs différents ; 2. Éviter la duplication ; 3. Faciliter la maintenance 4. Réduire la quantité de code de page Web et améliorer l'efficacité de la transmission des pages Web ;

L'environnement d'exploitation de cet article : système Windows10, CSS3, ordinateur Thinkpad T480.

(Tutoriel recommandé : Tutoriel vidéo CSS)

Pourquoi utiliser des feuilles de style CSS ?

CSS aide les développeurs à séparer le contenu informatif d'un document de la question triviale de la façon de le présenter. Les petites choses concernant la façon dont un document est présenté sont appelées le style du document. Séparer les styles du contenu présente les avantages suivants :

• Évite la duplication

• Rend la maintenance plus facile

• Vous pouvez utiliser le même contenu dans différents styles pour atteindre différents objectifs

Votre site Web peut contenir des milliers de pages similaires. Grâce à CSS, vous pouvez stocker les informations de style dans un fichier commun partagé par toutes les pages. Lorsqu'un utilisateur ouvre une page Web, le navigateur de l'utilisateur charge les styles uniquement pour le contenu de la page. Lorsqu'un utilisateur imprime une page Web, vous devez proposer différents styles pour garantir que la page imprimée est lisible.

Normalement, vous utiliserez HTML pour décrire le contenu de la page plutôt que le style, et utiliserez CSS pour spécifier le style de la page plutôt que le contenu. Bien sûr, il existe des exceptions et HTML peut également fournir certaines méthodes pour spécifier des styles. Par exemple, en HTML, vous pouvez utiliser la balise pour mettre le texte en gras et spécifier la couleur d'arrière-plan de la page dans la balise Lorsque vous utilisez CSS, vous évitez généralement d'utiliser les capacités de style de HTML afin que toutes les informations de style soient conservées au même endroit.

L'objectif principal de l'utilisation des feuilles de style CSS est de faciliter la division du travail et la collaboration dans la conception Web. Par exemple, la partie html est complétée par une personne ou une équipe, la partie programme js est également complétée par. un groupe de personnes, et le CSS est également laissé aux professionnels. Si vous le faites, vous améliorerez certainement l'efficacité. Tout comme la décoration d'une maison, la décoration dure et douce sera réalisée par des équipes d'ingénieurs professionnels. Elle sera certainement faite rapidement et bien. . Au contraire, si tous les travaux sont confiés à une équipe d’ingénierie, la qualité et le calendrier de construction ne peuvent être garantis.

De plus, la feuille de style CSS d'une page Web peut être utilisée telle quelle par une autre page Web ou même des pages Web sur d'autres sites Web. Cela signifie que le CSS peut être réutilisé, ce qui peut réduire considérablement la quantité de code. sur la page Web, améliore l'efficacité de la transmission des pages Web et permet également au site Web de conserver une apparence uniforme. Bien entendu, cela réduit également l'intensité du travail des concepteurs de sites Web. C'est tout comme le style de décoration d'une maison peut être entièrement copié dans une autre maison avec une structure similaire. Cela peut non seulement réduire le coût de la décoration de la maison, mais également conserver à la maison un style de décoration unifié.

Pratique : Créer une feuille de style pour les documents HTML

Créer une feuille de style

1. Créez un fichier texte; ce fichier est votre feuille de style ; . Nommez-le style1.css

2. Dans votre fichier CSS, copiez la ligne de code suivante et copiez-la, puis enregistrez le fichier :

strong { color: red; }

Liez votre document et votre feuille de style

1. Créez un autre fichier texte ; ce fichier est votre document. Nommez-le comme vous le souhaitez

2. Dans votre fichier HTML, copiez le code suivant et copiez-le. Veuillez citer votre propre feuille de style dans la ligne  :

<!DOCTYPE html>
 <html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel="stylesheet" href="style1.css">
   </head>
   <body>
     <p>
       <strong>C</strong>ascading
       <strong>S</strong>tyle
       <strong>S</strong>heets
     </p>
   </body>
 </html>

3. Enregistrez le fichier et ouvrez-le dans votre navigateur. La feuille de style fera apparaître les lettres de la balise en rouge, comme suit :

Cascading Sstyle Sheets

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

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!