Comprenez-vous ces principes CSS ?

CSS est un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML (une application du Standard Generalized Markup Language) ou XML (un sous-ensemble du Standard Generalized Markup Language). CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web. CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les styles d'objet et de modèle de page Web. Les personnes engagées dans le développement Web front-end ont beaucoup traité avec CSS. Certaines personnes ne savent peut-être pas comment fonctionne le CSS. Comment le CSS écrit est-il analysé par le navigateur ? Lorsque cela devient un goulot d'étranglement pour nous d'améliorer le niveau CSS, devrions-nous en savoir plus ?

　1. Développement de navigateur et CSS

Les navigateurs Web se connectent principalement aux serveurs Web via le protocole HTTP pour obtenir des pages Web. HTTP permet aux navigateurs Web d'envoyer des données aux pages Web. . serveur et obtenez la page Web. Actuellement, le HTTP le plus couramment utilisé est HTTP/1.1, qui est entièrement défini dans la RFC2616. HTTP/1.1 possède son propre ensemble de normes qu'Internet Explorer ne prend pas entièrement en charge, mais de nombreux autres navigateurs Web modernes prennent entièrement en charge ces normes. L'emplacement de la page Web est indiqué par l'URL (Uniform Resource Locator), qui est l'adresse de la page Web ; tout ce qui commence par http : signifie se connecter via le protocole HTTP. De nombreux navigateurs prennent également en charge d'autres types d'URL et de protocoles, tels que ftp : pour FTP (File Transfer Protocol), gopher : pour Gopher et https : pour HTTPS (HTTP crypté avec SSL).

Les premiers navigateurs Web ne prenaient en charge qu'une version simple du HTML. Le développement rapide des navigateurs logiciels propriétaires a conduit à la création de code HTML non standard. Mais à mesure que le HTML se développait, il a acquis de nombreuses capacités d'affichage afin de répondre aux exigences des concepteurs. À mesure que ces capacités augmentent, les langues étrangères pour définir les styles ont de moins en moins de sens.

La proposition originale de CSS a été proposée par Hakun Lee en 1994. BertBos concevait un navigateur appelé Argo et ils ont décidé de travailler ensemble sur CSS.

Il y avait déjà quelques propositions de langages de feuilles de style, mais CSS a été le premier à inclure l'idée de "cascading". En CSS, les styles d'un fichier peuvent être hérités d'autres feuilles de style. Le lecteur peut utiliser son propre style préféré à certains endroits, et hériter ou « superposer » le style de l'auteur à d'autres endroits. Cette méthode de superposition permet à l'auteur et au lecteur d'ajouter de manière flexible leurs propres conceptions et de mélanger leurs propres préférences.

Début 1997, un groupe de travail dédié au CSS est organisé au sein du W3C, et son leader est Chris Lilley. Ce groupe de travail a commencé à discuter de questions non couvertes dans la première édition, ce qui a abouti à la publication des exigences de la deuxième édition en mai 1998. En 2007, la troisième édition n'est pas encore terminée.

　2. Comment le navigateur affiche et charge la page

Pourquoi certains sites Web se chargent-ils très lentement lorsqu'ils sont ouverts et la page entière s'affiche en même temps ? Certains sites Web s'affichent progressivement de haut en bas ? Pour comprendre cela, vous pouvez commencer par le processus général suivant :

1. L'ordre de téléchargement du navigateur est de haut en bas, et l'ordre de rendu est également de haut en bas. Le téléchargement et le rendu sont effectués. en même temps.

2. Lors du rendu sur une certaine partie de la page, toutes les parties situées au-dessus ont été téléchargées (cela ne signifie pas que tous les éléments associés ont été téléchargés).

3. Si vous rencontrez un fichier intégré de balise d'interprétation sémantique (script JS, style CSS), alors le processus de téléchargement IE activera une connexion distincte pour le téléchargement.

4. Et effectuez l'analyse après le téléchargement. Pendant le processus d'analyse, arrêtez le téléchargement de tous les éléments descendants de la page.

5. Une fois la feuille de style téléchargée, elle sera analysée avec toutes les feuilles de style précédemment téléchargées. Une fois l'analyse terminée, tous les éléments précédents (y compris ceux qui ont été rendus auparavant) seront restitués. .

　6. S'il y a une redéfinition en JS ou CSS, la fonction définie ultérieurement écrasera la fonction définie précédemment.

Les points clés ici sont les trois points 2-5. L'efficacité du rendu est liée aux trois points suivants :

1. Efficacité de positionnement des requêtes du sélecteur CSS

2. Mode et algorithme de rendu du navigateur

3. Contenu à restituer taille de

3. Qu'est-ce que CSS et les avantages de CSS

Qu'est-ce que CSS ?

CSS est l'abréviation de Cascading Style Sheets.

Le langage CSS est un langage de balisage qui ne nécessite pas de compilation et peut être directement interprété et exécuté par le navigateur (c'est un langage interprété par le navigateur).

Dans la conception Web standard, CSS est responsable de la présentation du contenu Web (XHTML).

Un fichier CSS peut également être considéré comme un fichier texte, qui contient certaines balises CSS qui doivent utiliser CSS comme suffixe de nom de fichier.

Nous pouvons modifier la présentation globale de la page Web en modifiant simplement le fichier CSS, ce qui peut réduire notre charge de travail, c'est donc un cours obligatoire pour tout concepteur de sites Web.

CSS est produit et maintenu par le groupe de travail CSS du W3C.

Utilisez CSS+DIV pour reconstruire des pages Web Par rapport à la mise en page traditionnelle de page Web TABLE, elle présente les trois avantages significatifs suivants :

　1. Séparez les performances et le contenu. Séparez la partie conception et placez-la dans un fichier de style distinct, et stockez uniquement les informations textuelles dans le fichier HTML. Ces pages sont plus conviviales pour les moteurs de recherche.

　2. Améliorer la vitesse de navigation des pages. Pour le même effet visuel de page, la capacité de la page reconstruite à l'aide de CSS+DIV est bien inférieure à la capacité du fichier d'échange codé par TABLE. La première n'est généralement que la moitié de la taille de la seconde. Le navigateur n'a pas besoin de compiler beaucoup de balises longues.

　3. Facile à entretenir et à réviser. Vous pouvez repenser l’intégralité du site Web en modifiant simplement quelques fichiers CSS.

　 IV. Principe de correspondance CSS du navigateur

La correspondance CSS du navigateur ne recherche pas de gauche à droite, mais de droite à gauche. Par exemple, le DIV#pBox p span.red{color:red;} mentionné précédemment, la séquence de recherche du navigateur est la suivante : recherchez d'abord tous les éléments span avec class='red' dans le code HTML, et après les avoir trouvés, recherchez s'il y en a dans leurs éléments parents. p, puis déterminez s'il existe un élément p avec l'identifiant pBox dans l'élément parent de p. Si les deux existent, le CSS correspondra.

L'avantage de la recherche du navigateur de droite à gauche est de filtrer le plus tôt possible certaines règles de style et éléments non pertinents. Firefox appelle cette méthode de recherche keyselector (requête par mot-clé). Le soi-disant mot-clé est la dernière règle (la plus à droite) des règles de style. La clé ci-dessus est span.red.

5. Optimisez votre CSS

Le CSS dit efficace consiste à permettre au navigateur d'effectuer le moins de recherches possible lors de la recherche d'éléments correspondant au style. some Nous commettons souvent des erreurs inefficaces lors de l'écriture de CSS :

1. N'utilisez pas le nom de la balise avant le sélecteur d'ID

Méthode d'écriture générale : DIV#pBox

Meilleure écriture method : #pBox

Explication : Le sélecteur d'ID étant unique, l'ajout de p augmentera les correspondances CSS inutiles.

2. N'utilisez pas le nom de la balise

avant le sélecteur de classe. Méthode d'écriture courante : span.red

Meilleure méthode d'écriture : .red

. Explication : Idem Le premier, mais si vous en avez défini plusieurs. ;} 　span.red{color:#ff00ff}

S'il est défini comme ceci, ne le supprimez pas. prêtant à confusion si vous le supprimez. Il est cependant recommandé de ne pas l'écrire ainsi

3. Utiliser le moins possible les relations hiérarchiques

Écriture normale : #pBoxp.red{color:red; }

Meilleure écriture : .red{..}

4. Utiliser la classe Au lieu d'une relation hiérarchique

Écriture générale : #pBox ul li a{display:block;}

Meilleure écriture : .block{display:block;}

5. Dans L'efficacité de l'identifiant et de la classe dans l'efficacité du rendu CSS est fondamentalement la même

La classe sera mise en cache dans le premier chargement, ce qui aura un meilleur effet en cascade. L'utilisation de id dans l'élément racine aura un meilleur effet (id a un subtil avantage en termes de vitesse).

Pour les amis du front-end, il est très important de maîtriser de bonnes compétences CSS. J'espère que cet article vous sera utile.

Recommandations associées :

Les techniques courantes les plus complètes pour le développement CSS

Explication détaillée des détails en CSS

Explication détaillée des principes CSS pour le développement front-end

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!