Quando imposto la famiglia di caratteri, la dimensione del carattere, il colore, ecc. Sembra che alcuni elementi nidificati abbiano la precedenza su questi con brutti valori predefiniti del browser.Come specificare gli attributi dei font per tutti gli elementi in una pagina Web html?
Devo davvero specificare quelle decine di volte per qualsiasi tipo di elemento sulla mia pagina, o c'è un modo per impostarle globalmente una volta e per sempre?
Come fare?
* {
font-size: 100%;
font-family: Arial;
}
L'asterisco implica tutti gli elementi.
Funziona, ma non è la soluzione migliore. Quando il browser vede il '*', scorre su tutti gli elementi HTML nella pagina e applica loro il CSS. Anche per elementi in cui la regola non ha alcun senso. A seconda delle dimensioni dell'HTML, questo può rallentare il rendering della pagina. –
Accetto, ma applica il CSS a TUTTI gli elementi, come richiesto da BugAlert. Se si desidera effettuare TUTTI gli elementi, ci si può aspettare che le prestazioni si riducano leggermente. :) – Bazzz
È inoltre possibile aggiungere! Importante alla fine di ogni dichiarazione di stile per essere al sicuro rispetto ad altre dichiarazioni di stile che superano questo valore. – Sam
Se si specificano gli attributi CSS per l'elemento body, questo deve applicarsi a qualsiasi elemento entro <body></body> a condizione che non vengano sovrascritti in un secondo momento nel foglio di stile.
è possibile impostarle nel tag corpo
body
{
font-size:xxx;
font-family:yyyy;
}
Questo non è accurato perché molti browser non applicheranno questo font ad alcuni elementi (gli elementi non erediteranno lo stile del font) –
@ travis-146 quali browser? quali elementi? sai che c'è una specifica che tutti i browser devono seguire. – Bamieh
Se si usa Internet Explorer, è probabile che tornerà ai valori predefiniti del browser per alcuni elementi, come le tabelle. Si può contrastare questo 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;
}
Edit: si consiglia di leggere su reset CSS; vedere thread come this one
Non riesco a sottolineare abbastanza questo consiglio: utilizzare un foglio di stile di ripristino, quindi impostare tutto in modo esplicito. Ridurrà il tempo di sviluppo CSS cross-browser a metà.
Prova di Eric Meyer reset.css.
Per utilizzare questo reset.css, devo semplicemente collegare il foglio di stile alla mia pagina o devo modificarlo? Fondamentalmente ho bisogno di avere la stessa famiglia di font e dimensioni per tutti i principali browser. Il file reset.css mi aiuta a farlo di default? –
Tendo a copiarlo e incollarlo all'inizio del mio foglio di stile invece di collegarlo separatamente, salva una richiesta HTTP. Ti aiuterà a impostare stili coerenti attraverso i browser perché azzera tutto: gli unici stili saranno quelli che scrivi. –
Grazie! L'ho provato e ha risolto gran parte dei miei problemi. Tuttavia, posso ancora vedere una differenza nella dimensione dei caratteri tra Chrome e Firefox nonostante le specifiche dello stesso foglio di stile. Qualche idea su questo? Inoltre, è una buona pratica? –
Esattamente come sta attualmente impostando la famiglia di font, dimensioni ...? – thecoop