Dans quelle zone du document réside la feuille de style CSS ?

Les feuilles de style CSS résident dans la zone "en-tête" du document. Parce que si le CSS est placé en bas, la page peut être rendue progressivement, mais une fois le CSS téléchargé et analysé, le texte et les images qui ont été rendus devront être redessinés selon le nouveau style, ce qui est un mauvais utilisateur expérience.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Les feuilles de style CSS résident dans l'en-tête en haut du document HTML.

pourquoi ?

<link rel="stylesheet" href="home.css">

L'attribut href (référence HyperText) dans la balise link représente une référence hypertexte Lorsque CSS utilise la référence href, le navigateur reconnaîtra. Le document est CSS et est téléchargé en parallèle. Il n'arrêtera pas de charger le document actuel lors du chargement de HTML pour générer une arborescence DOM, l'arborescence DOM peut être rendue en même temps. Cela peut éviter des scintillement, des écrans blancs ou des mises en page confuses. .

Dans la situation la plus idéale, nous espérons que le navigateur restituera progressivement le CSS téléchargé et affichera progressivement la page à l'utilisateur. Cependant, afin d'éviter de restituer les éléments de la page lorsque les styles changent, le navigateur bloque le rendu progressif du contenu. Le navigateur attend que tous les styles soient chargés avant de restituer la page en même temps.

Si le fichier CSS est placé en bas, le navigateur empêche le rendu progressif du contenu. Pendant que le navigateur attend le téléchargement du dernier fichier CSS, un "écran blanc" apparaît (écran blanc lorsque. une nouvelle connexion est ouverte, puis le texte apparaît en premier, les images en dernier et les styles en dernier). C'est très grave, car lorsque la vitesse d'Internet est très lente, le temps de téléchargement CSS est relativement long, ce qui amène naturellement un « écran blanc » à l'utilisateur pendant une longue période, et l'expérience utilisateur est très mauvaise.

Placez le CSS en bas et la page peut être rendue progressivement. Cependant, une fois le CSS téléchargé et analysé, le texte et les images qui ont été rendus devront être redessinés selon le nouveau style. C'est une mauvaise expérience utilisateur.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!