Comment CSS gère les styles par défaut du navigateur

Cette fois, je vais vous montrer comment CSS gère le style par défaut du navigateur. Quelles sont les choses à noter lorsque CSS gère le style par défaut du navigateur ? Voici un cas pratique, jetons un coup d'oeil.

Découvert

Récemment, j'ajustais le format de la page Web et j'ai constaté qu'il y avait toujours un espace d'environ 10 pixels à la en bas de la page Web.

En utilisant l'élément d'inspection du navigateur Chrome, j'ai découvert qu'il existe un bouton de marge appelé feuille de style de l'agent utilisateur qui définit le bouton de marge du formulaire entier : 1em;

Après avoir recherché des informations sur Internet, j'ai découvert que cette feuille de style de l'agent utilisateur fait partie des styles par défaut du navigateur. Si vous n'êtes pas satisfait de ce style par défaut, la solution la plus simple est de réinitialiser les attributs du style. Parce que la feuille de style de l'agent utilisateur a une très faible priorité et sera écrasée, cela n'affectera pas notre style. parlez de formulaire. La

margin-bottom est définie sur 0px.

Introduction à la feuille de style de l'agent utilisateur

Différents navigateurs ont des styles par défaut différents pour les mêmes éléments, c'est pourquoi nous devons écrire * {padding :0;marging:0};

Mais ce n'est pas tout ce dont je parle maintenant. Fondamentalement, deux navigateurs dotés de noyaux différents présenteront des différences dans les performances de certains éléments, tels que la taille du retrait, la sélection de la police, le style de caractère, etc. Peut-être qu'une très belle feuille de style CSS fonctionne bien dans un navigateur et devient encombrée dans un autre navigateur même sans bugs CSS. Je pense que c'est le style par défaut du navigateur qui est à blâmer.

Par conséquent, lorsque nous générons des règles de style CSS, l'une des étapes nécessaires est de réinitialiser le style par défaut du navigateur, c'est-à-dire d'écraser le style par défaut du navigateur. Différent de l'utilisation de * {padding:0;margin:0}, tous les éléments n'ont pas de différences de remplissage et de marge (la différence entre les listes d'éléments et les listes ordonnées dans Internet Xplorer et Firefox est due à leur indentation de marge d'indentation et à leur indentation de remplissage).

Par exemple :

La police utilisée par ce code dans Internet Explorer est Times New Roman, tandis que la police utilisée dans Firefox et Opera est la police par défaut du système. . Par conséquent, nous devons définir un style unifié en CSS pour

.

Cependant, si nous utilisons le caractère générique "*" pour définir simplement le style global comme en utilisant * {padding:0;margin:0}, alors un problème évident se posera, comme les éléments de formulaire, les éléments d'entrée, les zones de texte, etc. ignoreront leur réinitialisation dans certains navigateurs. Plus important encore, cela endommagera sérieusement l'apparence de ces éléments, vous devrez donc les réinitialiser manuellement un par un. Nous devrions donc abandonner simplement l'utilisation de "*" et réinitialiser le premier élément avec des performances incohérentes, comme body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4 ,h5,h6,pre etc.

De plus, le style par défaut des éléments peut gâcher l'apparence de la page. Par exemple, l'élément mettra le texte en gras, l'élément

indentera le texte et l'élément fera basculer le texte, etc. Si vous souhaitez que le texte de la page ait une apparence cohérente, vous devez également modifier l'apparence de ces éléments dans CSS Reset. Dans le même temps, nous exigeons parfois que l'apparence de ces éléments soit la même que celle de l'élément parent. Nous pouvons directement utiliser l'héritage pour hériter de l'élément parent.

Méthode de traitement

Quant à quels éléments doivent être réinitialisés ? Yahoo! a réalisé pour nous un résumé comparatif. Selon la suggestion de Yahoo, vous devez mettre ces règles dans un fichier appelé Reset.css et les référencer séparément (ceci est recommandé) :

html{color:#000;background:#FFF;} 
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
font-weight:normal; 
} 
ol,ul { 
list-style:none; 
} 
caption,th { 
text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border:0; 
}

Tout ce que vous avez à faire est simplement de sauvegarder ces règles. Allez réinitialiser .css et utilisez-le sur la page. Lorsque vous devez ajouter de nouveaux styles à ces éléments, cela ne diffère pas des paramètres des autres éléments.

Remarque : Input, textarea, select{*font-size:100%;} dans reset.css ci-dessus ne peut être reconnu que par Internet Explorer. Cela permet de mettre à l'échelle la taille de la police des contrôles de formulaire dans Internet Explorer.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez HTML+CSS pour implémenter le menu déroulant

Utilisez CSS3 pour créer une barre de progression

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!