Comment spécifier les attributs de police pour tous les éléments sur une page Web HTML?

127

Lorsque je définis la famille de polices, la taille de la police, la couleur, etc., il semble que certains éléments imbriqués les remplacent par des paramètres par défaut du navigateur.

Dois-je vraiment les spécifier des dizaines de fois pour tout type d'élément sur ma page, ou existe-t-il un moyen de les définir globalement une fois pour toutes?

Comment faire ça?

css

— Membre fier
source

1

Comment définissez-vous exactement la famille de polices, la taille ...?

— thecoop

251

* {
 font-size: 100%;
 font-family: Arial;
}

L'astérisque implique tous les éléments.

— Bazzz
source

15

Cela fonctionne, mais ce n'est pas la meilleure solution. Lorsque le navigateur voit le '*', il boucle sur tous les éléments HTML de la page et leur applique le CSS. Même pour les éléments où la règle n'a aucun sens. En fonction de la taille du HTML, cela peut ralentir le rendu de la page.

— Cesar Canassa

4

D'accord, mais il applique le CSS à TOUS les éléments, comme BugAlert l'a demandé. Si l'on veut effectuer TOUS les éléments, on peut s'attendre à ce que les performances diminuent un peu. :)

— Bazzz

1

Vous pouvez également ajouter! Important à la fin de chaque déclaration de style pour être sûr contre d'autres déclarations de style l'emportant sur celle-ci.

— S ..

4

Je sais que cela fait 5 ans, mais je suis surpris que personne ne l'ait remarqué jusqu'à présent: vous ne devez jamais spécifier uniquement une police Windows dans "font-family" (à moins bien sûr que ce soit une police Web) - Arial, helvetica, sans-serif est plus compatible.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}L'héritage de la police, et si vous voulez vraiment éviter les remplacements, utilisez: *,:before,:after{font-family:inherit;}si vous devez utiliser un sélecteur universel, utilisez plutôt l'héritage.

— darcher

18

Si vous utilisez IE, il est probable qu'il reviendra aux paramètres par défaut du navigateur pour certains éléments, comme les tableaux. Vous pouvez contrer cela avec quelque chose comme le CSS suivant:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Edit: vous voudrez peut-être lire sur les réinitialisations CSS; voir des fils comme celui-ci

— Paul
source

10

Je ne saurais trop insister sur ce conseil: utilisez une feuille de style de réinitialisation, puis définissez tout explicitement. Cela réduira de moitié le temps de développement CSS entre navigateurs.

Essayez reset.css d' Eric Meyer .

— Chris Cox
source

Pour utiliser ce reset.css, dois-je simplement lier la feuille de style à ma page ou dois-je la modifier? J'ai essentiellement besoin d'avoir la même famille de polices et la même taille dans tous les principaux navigateurs. Le reset.css m'aide-t-il à faire cela par défaut?

— Darth Coder

1

J'ai tendance à le copier et à le coller au début de ma feuille de style plutôt que de le lier séparément, enregistre une requête HTTP. Cela vous aidera à définir des styles cohérents dans tous les navigateurs, car il remet tout à zéro: les seuls styles seront ceux que vous écrivez.

— Chris Cox

Merci! Je l'ai essayé et cela a résolu la plupart de mes problèmes. Cependant, je peux toujours voir une différence de taille de police entre Chrome et Firefox malgré les spécifications de ma feuille de style. Des idées à ce sujet? Est-ce également une bonne pratique?

— Darth Coder

8

vous pouvez les définir dans la balise body

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
source

13

Ce n'est pas exact car la plupart des navigateurs n'appliqueront pas cette police à certains éléments (les éléments n'hériteront pas du style de police)

— travis-146

@ travis-146 quels navigateurs? quels éléments? vous savez qu'il existe une spécification que tous les navigateurs doivent suivre.

— Bamieh le

@Bamieh, un exemple spécifique (qui m'a amené ici, en fait) sur Chrome 72 est qu'il n'applique pas la police au texte dans un bouton ou dans un menu de sélection.

— Nick Silvestri

2

Si vous spécifiez des attributs CSS pour votre bodyélément, ils doivent s'appliquer à tout ce qui se trouve à l'intérieur <body></body>tant que vous ne les remplacez pas plus tard dans la feuille de style.

— Friandise Tyler
source

0

Si vous souhaitez définir les styles de tous les éléments du corps, vous devez utiliser le code suivant ^

  body{
    color: green;
    }

— Stepan Poperechnyi
source