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

Cet article présente principalement des informations pertinentes sur l'explication détaillée des principes CSS pour le développement front-end. Les amis qui en ont besoin peuvent se référer à

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

Les personnes engagées dans le développement Web front-end ont beaucoup travaillé avec le 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 navigateurs et CSS

Les navigateurs Web se connectent principalement aux serveurs Web via le protocole HTTP pour obtenir des pages Web. Le serveur envoie des données au serveur Web et récupère 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 pleinement 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.

En 1994, Hakun Lee a proposé la proposition originale du CSS. 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, le

W3C a organisé un groupe de travail spécifiquement responsable du CSS, et son chef était 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 est chargé ? Les pages s'affichent simultanément, alors que 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. 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 balises sémantiquement interprétables (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 précédemment rendus) 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. Rendu du navigateur
mode et algorithme 3. Vers le taille du contenu rendu

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

Qu'est-ce que CSS ?

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

2. 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).

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

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

5. Vous pouvez 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.

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

Utilisez CSS p pour la reconstruction de pages Web, qui présente les trois avantages significatifs suivants par rapport à la mise en page de page Web TABLE traditionnelle :

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 indexation.

　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 p est bien inférieure à celle du fichier de page codé par TABLE. La première n'est généralement que la moitié de la taille du second. Le navigateur n'a pas besoin de compiler beaucoup de longues balises.

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

4. Principe de correspondance CSS du navigateur

La correspondance CSS du navigateur ne recherche pas de gauche à droite, mais de droite à gauche pour rechercher. Par exemple, p#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 si 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 est de permettre au navigateur d'en faire le moins possible lors de la recherche d'éléments style de correspondance. Dans la recherche, voici quelques erreurs inefficaces courantes que nous commettons lors de l'écriture de CSS :

　1. N'utilisez pas le nom de la balise sélecteur d'ID 🎜> Écriture normale : p#pBox

Meilleure écriture : #pBox

Explication : Le sélecteur d'ID étant unique, l'ajout de p ajoutera une correspondance CSS inutile.

2. N'utilisez pas le nom de la balise

avant le sélecteur class
Méthode d'écriture générale : span.red

.
Une meilleure façon de l'écrire : .red

Explication : Identique au premier, mais si vous définissez plusieurs .red et que les styles sont différents sous différents éléments, ils ne peuvent pas être supprimés, tel que votre css La définition dans le fichier est la suivante :

　p.red{color:red;}
　　span.red{color:#ff00ff}

S'il est défini de cette manière , ne le supprimez pas, sinon cela prêterait à confusion. Cependant, il est recommandé de ne pas écrire ainsi

3. Utiliser le moins possible les relations hiérarchiques

Général. écriture : #pBoxp.red{color:red;}

Meilleure écriture : .red{..}

4. Utilisez une classe plutôt qu'une relation hiérarchique

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

Meilleure façon d'écrire : .block{display:block;}

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

La classe sera

cache

lors du premier chargement, ce qui aura un meilleur effet en cascade . L'utilisation de l'identifiant dans l'élément racine aura un meilleur effet (l'identifiant a un avantage subtil en termes de vitesse). Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!