Come specificare gli attributi dei caratteri per tutti gli elementi in una pagina Web HTML?

127

Quando imposto la famiglia di caratteri, la dimensione del carattere, il colore ecc., Sembra che alcuni elementi nidificati abbiano la precedenza su quelli di default del browser.

Devo davvero specificare quelle dozzine di volte per qualsiasi tipo di elemento sulla mia pagina, o c'è un modo per impostarle globalmente una volta per sempre?

Come farlo?

css

— Membro orgoglioso
fonte

1

Come stai attualmente impostando la famiglia di caratteri, la dimensione ...?

— thecoop

251

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

L'asterisco implica tutti gli elementi.

— Bazzz
fonte

15

Funziona, ma non è la soluzione migliore. Quando il browser visualizza '*', passa in rassegna tutti gli elementi HTML nella pagina e applica i CSS a essi. Anche per elementi in cui la regola non ha alcun senso. A seconda della dimensione dell'HTML, questo può rallentare il rendering della pagina.

— Cesar Canassa,

4

Accetto, ma applica il CSS a TUTTI gli elementi, come richiesto da BugAlert. Se si vuole effettuare TUTTI gli elementi, ci si può aspettare che le prestazioni si riducano leggermente. :)

— Bazzz,

1

Puoi anche aggiungere! Important alla fine di ogni dichiarazione di stile per essere al sicuro da altre dichiarazioni di stile che superano questa.

— S ..

4

So che sono passati 5 anni, ma sono sorpreso che nessuno lo abbia notato fino ad ora: non dovresti mai specificare solo un font Windows in "font-family" (a meno che ovviamente non sia un webfont) - Arial, helvetica, sans-serif è più compatibile.

— rob74,

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}L'ereditarietà dei caratteri, e se vuoi davvero evitare le sostituzioni, usa: *,:before,:after{font-family:inherit;}se devi usare un selettore universale, usa invece l'ereditarietà.

— darcher,

18

Se stai usando IE, è probabile che tornerà ai valori predefiniti del browser per alcuni elementi, come le tabelle. Puoi contrastarlo con qualcosa come il seguente CSS:

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;
}

Modifica: potresti voler leggere sui ripristini CSS; vedi discussioni come questa

— Paolo
fonte

10

Non posso sottolineare abbastanza questo consiglio: usa un foglio di stile di ripristino, quindi imposta tutto in modo esplicito. Dimezzerà il tempo di sviluppo CSS tra browser.

Prova reset.css di Eric Meyer .

— Chris Cox
fonte

Per utilizzare questo reset.css, devo solo collegare il foglio di stile nella mia pagina o devo modificarlo? Fondamentalmente ho bisogno di avere la stessa famiglia di caratteri e dimensioni su tutti i principali browser. Il reset.css mi aiuta a farlo di default?

— Darth Coder,

1

Tendo a copiarlo e incollarlo all'inizio del mio foglio di stile piuttosto che collegarlo separatamente, salva una richiesta HTTP. Ti aiuterà a impostare stili coerenti tra i browser perché azzera tutto: gli unici stili saranno quelli che scrivi.

— Chris Cox,

Grazie! L'ho provato e ha risolto la maggior parte dei miei problemi. Tuttavia, posso ancora vedere una differenza nella dimensione del carattere tra Chrome e Firefox nonostante le specifiche del mio foglio di stile dello stesso. Qualche idea su questo? Inoltre, è una buona pratica?

— Darth Coder

8

puoi impostarli nel tag body

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

— jimplode
fonte

13

Questo non è accurato perché la maggior parte dei browser non applicherà questo carattere ad alcuni elementi (gli elementi non erediteranno lo stile del carattere)

— travis-146

@ travis-146 quali browser? quali elementi? sai che c'è una specifica che tutti i browser devono seguire.

— Bamieh,

@Bamieh un esempio specifico (che mi ha portato qui, in realtà) su Chrome 72 è che non applica il carattere al testo all'interno di un pulsante o seleziona il menu.

— Nick Silvestri,

2

Se specifichi gli attributi CSS per il tuo bodyelemento, questo dovrebbe applicarsi a qualsiasi cosa <body></body>, purché non li sovrascrivi successivamente nel foglio di stile.

— Tyler Treat
fonte

0

Se si desidera impostare gli stili di tutti gli elementi nel corpo, è necessario utilizzare il codice successivo ^

  body{
    color: green;
    }

— Stepan Poperechnyi
fonte