'Comment CSS fonctionne-t-il en coulisses ?'-tutoriel CSS-php.cn

'Comment CSS fonctionne-t-il en coulisses ?'

WBOY

Libérer： 2023-09-17 10:33:02

avant

1441 Les gens l'ont consulté

Comment CSS fonctionne-t-il en coulisses ?

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour ajouter des effets visuels aux pages Web. Il est utilisé pour décrire la mise en page et l'affichage des éléments HTML. Vous pouvez gagner beaucoup de temps avec CSS. Utilisez-le pour gérer la mise en page de plusieurs pages Web en même temps. Il permet aux développeurs d'implémenter diverses propriétés personnalisées pour différents éléments, améliorant ainsi l'apparence des pages Web. Dans cet article, nous découvrirons CSS et son fonctionnement.

CSS est essentiellement divisé en 3 types -

CSS externe - Sur chaque page, utilisez l'élément et la balise link> Si vous souhaitez modifier plusieurs pages en même temps, utilisez une feuille de style externe. C'est très utile dans cette situation car il vous permet de changer l'apparence de l'ensemble de votre site Web en modifiant un seul fichier.
Inline CSS - Si une seule page HTML a un style unique, vous pouvez utiliser une feuille de style interne. L'élément style> dans la section head contient la définition des styles internes.
CSS interne - Pour donner à des éléments individuels un aspect unique, utilisez des styles en ligne. Utilisez des styles en ligne en ajoutant l'attribut style à l'élément approprié. L'attribut style est un conteneur pour toute propriété CSS.

Grammaire

selector{
   property: value;
}

Copier après la connexion

Exemple

Vous trouverez ci-dessous un exemple de la façon d'utiliser CSS dans une page HTML. Ici, nous avons du CSS en ligne. L'élément h1 est souligné, tandis que l'élément div est vert.

<!DOCTYPE html>
<html>
<head>
   <title> Using CSS within a HTML page </title>
   <style>
      h1{
         text-decoration: underline;
      }
      div{
         width: 30%;
         height: 30px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h1> Inline CSS </h1>
   <div> This is an example. </div>
</body>
</html>

Copier après la connexion

Pourquoi devrions-nous utiliser CSS ?

Gagnez du temps- Cela fait gagner beaucoup de temps. Étant donné que les définitions de style CSS sont conservées dans des fichiers CSS distincts, la modification de l'une d'entre elles peut avoir un impact sur l'ensemble du site Web.
Attributs multiples - Par rapport au HTML simple, CSS fournit des options plus précises pour déterminer l'apparence de votre site Web.
Chargement rapide des pages- Lors de l'utilisation de CSS, il n'est pas toujours nécessaire d'écrire des attributs de balisage HTML. Vous pouvez écrire une règle une seule fois pour une étiquette et l'appliquer à toutes les instances de cette étiquette. Puisque CSS utilise moins de code, il se télécharge plus rapidement.
Maintenance du site Web- Le site Web en a besoin pour la maintenance. Si nous devons apporter des modifications globales au fichier, nous pouvons simplement changer le style et tous les composants de la page Web seront immédiatement mis à jour. Grâce à la flexibilité des fichiers CSS, la conception d’un site Web peut être facilement modifiée.
Compatibilité multi-appareils- Nous pouvons utiliser CSS avec les versions linguistiques précédentes car il est traditionnellement compatible avec elles. Par conséquent, si une application CSS a été créée à l'aide d'une version antérieure du langage de programmation et que le développeur la fusionne avec un contenu de développement plus récent, CSS peut être facilement intégré avec les ajustements requis, permettant au développeur de mettre à jour avec succès le code existant. Le contenu utilisant CSS peut s'adapter à plusieurs types d'appareils.

Le travail sous-jacent du CSS

Le processus réel de calcul des propriétés CSS finales pour un élément HTML donné est une série d'étapes extrêmement complexe -

Accumulation de données

À ce stade, toutes les déclarations de style pour un élément spécifique sont collectées à partir de diverses sources telles que les agents utilisateurs, les auteurs et les utilisateurs. Ces déclarations doivent être filtrées et validées pour déterminer si elles proviennent d'une feuille de style qui s'applique désormais à ce document et sont syntaxiquement valides.

Cascade

Le mot CSS signifie Cascading Style Sheets, qui est le concept de base du CSS. Cette étape doit être bien comprise car c'est la seule étape qui est profondément influencée par le développeur en tant que source d'auteur. Cette étape prend la liste non ordonnée des déclarations collectées à l'étape précédente et les trie par ordre décroissant de priorité en utilisant les critères suivants -

Basé sur des sources déclaratives (user-agent, utilisateur, auteur, transition, animation) et ! Une combinaison de notes importantes.
Spécialité basée sur sélecteur
Basé sur l'ordre dans lequel ils sont écrits

Définir la valeur par défaut

Si elle n'est pas déclarée, cette étape est appelée lorsque vous essayez de définir une valeur pour la propriété CSS d'un élément.

Corrigé

Pour une flexibilité maximale dans la conception réactive, nous utilisons plusieurs unités relatives (auto, em, rem, vh), des URL relatives, des pourcentages ou certains mots-clés lisibles par l'homme (petit, normal, gras). Cette étape tentera de résoudre autant de valeurs d'attribut que possible sans avoir à placer un document, à effectuer une requête réseau ou à obtenir la valeur ailleurs que dans le parent.

Formatage

Cette étape formatera l'intégralité du document et complétera le travail restant de l'étape précédente en essayant de calculer les valeurs théoriques absolues utilisées dans la mise en page du document. Cette étape se concentre principalement sur des scénarios tels que la coordination relative des éléments, la mise en page automatique et la mise en page Flex. Cela nécessite de nombreux calculs mais produit un nombre absolu qui est presque entièrement utilisable par les navigateurs.

Derniers changements

Avant de dessiner, la dernière étape effectuera quelques modifications en fonction de l'environnement de navigation, telles que le moteur du navigateur, le type de média, la densité de pixels de l'appareil ou le système d'exploitation. Arrondir les nombres à virgule flottante en valeurs entières ou modifier la taille de la police en fonction des polices disponibles sont deux changements courants.

Conclusion

Étant donné que la cascade CSS est l'un des aspects les plus mal compris du CSS (et est souvent la source de nombreuses erreurs), comprendre son fonctionnement vous donnera un avantage significatif pour garder votre feuille de style gérable. Cependant, plus la compréhension des cascades CSS est bonne, plus la responsabilité est grande. Les parties les plus spécialisées de la cascade (telles que !important, les styles en ligne et les sélecteurs d'identifiant) produisent des feuilles de style plus difficiles à modifier ou à remplacer à l'avenir.

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!