Maison > Article > interface Web > Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?
Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?
- 青灯夜游original
- 2021-05-21 14:31:413487parcourir
Par rapport aux attributs CSS, les attributs des balises HTML ont une priorité plus élevée que les attributs CSS. Raison : les normes du W3C préconisent l'utilisation de styles CSS et remplacent les attributs de balise HTML par des styles CSS. Les normes de production de pages Web séparent les balises et les styles, et la définition de styles dans les attributs de balise rend la réutilisation plus difficile.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Aujourd'hui, je regardais la section Dimension du tutoriel CSS du w3c et j'ai mené l'expérience suivante :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png" style="max-width:90%" style="max-width:90%" / alt="Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?" ><br>
<img class="big" src="/attachments/cover/cover_css.png" style="max-width:90%" style="max-width:90%" / alt="Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?" ><br>
<img class="small" src="/attachments/cover/cover_css.png" style="max-width:90%" style="max-width:90%" / alt="Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?" >
</body>
</html>Les résultats en cours d'exécution sont les suivants :
Ce qui m'a intrigué à l'époque, c'est pourquoi l'attribut height de img dans la feuille de style interne fonctionnait à la place de l'attribut height dans la balise img. Ensuite, j'ai effectué diverses recherches sur Baidu.
Enfin, je suis arrivé aux conclusions pertinentes :
(1) Maintenant, je trouve que j'ai gâché les paramètres d'attribut et les styles en ligne dans les balises . J'étais confus, donc j'ai été tellement surpris et incapable de le comprendre au début. Ensuite, j'ai essayé les styles en ligne
<img class="big" src="/attachments/cover/cover_css.png" style="max-width:90%" / alt="Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?" ><br>
Les résultats expérimentaux ont montré que les styles en ligne ont toujours une priorité plus élevée que les feuilles de style internes.
(2) Après avoir clarifié le concept, une observation plus approfondie a révélé que le paramètre de style de la feuille de style interne a une priorité plus élevée que le paramètre de style des attributs de la balise html, puis a mené une expérience avec la feuille de style externe. feuille de style
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <img src="cover_css.png" style="max-width:90%" style="max-width:90%" / alt="Lequel a une priorité plus élevée, des attributs de balise HTML ou des attributs CSS ?" > </body> </html>
On constate que la priorité de la feuille de style externe est également supérieure à l'attribut height à l'intérieur de la balise img, on peut voir que le style de css. aura priorité sur l'attribut du tag.
(3) Les normes du W3C préconisent l'utilisation de styles CSS et remplacent les attributs des balises HTML par des styles CSS ; la norme de production de pages Web consiste à séparer les balises et les styles. Parce qu'il est défini dans l'attribut tag, il est difficile de le réutiliser. Personnellement, je suppose que cela peut être la raison pour laquelle la priorité du style CSS est supérieure à l'attribut tag.
(4) Bien que l'utilisation de styles CSS soit préconisée, elle est introduite en détail dans W3School : "C'est une bonne pratique de spécifier les attributs de hauteur et de largeur pour les images . Si ces propriétés sont définies, vous pouvez réserver de l'espace pour l'image lors du chargement de la page. Sans ces propriétés, le navigateur ne peut pas comprendre les dimensions de l'image et réserver l'espace approprié pour l'image, de sorte que la mise en page se produira lors du chargement de l'image. charges. "
" Veuillez ne pas redimensionner l'image via les propriétés de hauteur et de largeur. Si vous utilisez les propriétés de hauteur et de largeur pour réduire l'image, l'utilisateur devra télécharger une grande image (même si l'image est grande). semble petit sur la page). ). L'approche correcte est qu'avant d'utiliser l'image sur la page Web, l'image doit être traitée à la taille appropriée via un logiciel "
" Les deux valeurs. Les attributs de hauteur et de largeur peuvent être plus grands ou plus petits que la taille réelle. Certains navigateurs redimensionneront automatiquement l'image pour l'adapter à cet espace réservé, mais il est important de noter que le navigateur doit toujours télécharger l'intégralité du fichier, quelle que soit sa version finale. taille affichée, et si elle ne conserve pas sa taille. Le rapport largeur/hauteur d'origine, l'image sera déformée
Une autre astuce utilisant les attributs de hauteur et de largeur consiste à remplir facilement la zone de la page et également à améliorer les performances de. le document. Imaginez si. Vous souhaitez placer une barre colorée dans votre document. Vous n'avez pas besoin de créer une image en taille réelle, vous créez une image de 1 pixel de large et 1 pixel de haut et vous lui attribuez la couleur. vous souhaitez utiliser. Utilisez ensuite les attributs height et width pour l'étendre à une taille plus grande. "
" Si une valeur de largeur en pourcentage est fournie et que la hauteur est omise, le navigateur la conservera, qu'elle soit ou non. est zoomé ou dézoomé. Le rapport hauteur/largeur de l'image ( car la valeur par défaut lorsque la hauteur n'est pas définie est auto-adaptative Cela signifie que le rapport entre la hauteur et la largeur). de l'image ne changera pas, et l'image ne changera pas. Il n'y aura pas de distorsion. "
Tout comme un commentaire avec l'ID "Yu Jiangshui" dans l'article Pandan : "L'attribut alt. de img est requis, et la largeur et la hauteur sont recommandées en raison de img. Le chargement des pages Web est plus lent que celui de ces structures, donc les structures et le texte sont souvent chargés en premier, puis les images sont chargées à ce moment-là, car. le navigateur ne connaît pas la taille de l'image à l'avance, il ne peut pas restituer l'image dans la page Web. Une fois l'image chargée puis rendue, un redessin se produit (c'est-à-dire que le navigateur recalcule la position de l'image). éléments pertinents. La manifestation spécifique est que l'image apparaît et le texte sous l'image s'étend vers le bas de la page d'introduction des produits Taobao, c'est très évident)
Le navigateur calculera l'image avec la largeur et la hauteur, laissez-la vide. , puis attendez que l'image soit chargée pour éviter de redessiner la page et améliorer les performances frontales et l'expérience utilisateur. Voici Zhihu. Les réponses peuvent être vues dans les images ci-dessus.
En responsive layout (un site web peut être compatible avec plusieurs terminaux - plutôt que de faire une version spécifique pour chaque terminal ; ce concept est de résoudre le problème de la navigation Internet mobile) Dans le traitement d'image (born), max-width : 100 % ; height : auto ; doit être défini pour la balise img afin de garantir un étirement proportionnel . »
(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!