Revisione del livello di priorità dello stile CSS
Il Cascading Style Sheet (CSS) è, penso, il più semplice dei linguaggi rispetto ad altri linguaggi web-correlati, quindi non è sorprendente scoprire che molte persone che stanno appena iniziando a imparare come creare un sito Web apprenderanno principalmente questo linguaggio e HTML in primo luogo.
In questo post, torneremo alle basi CSS. Esamineremo in che modo vengono inizialmente applicati gli stili CSS, quali stili verranno applicati, come alcune dichiarazioni di stili si sovrascrivono a vicenda mentre altre non lo fanno.
Quindi, questo post è specificamente dedicato ai principianti che stanno appena iniziando a cogliere le sfide, probabilmente ancora facendo errori ed errori durante la compilazione del loro primo foglio di stile. Quindi, cominciamo.
Stili browser predefiniti
Firefox, Chrome, Safari, Opera e Internet Explorer sono attualmente i primi cinque browser desktop sul mercato. Questi browser e tutti gli altri browser seguono una regola standard per includere stili predefiniti incorporati per il rendering degli elementi HTML.
Quindi, quando inseriamo alcuni elementi HTML casuali senza gli stili aggiunti, vedrai che è ancora reso correttamente nel browser.
Ma, se esaminiamo attentamente questi elementi, ognuno dei browser ha valori (leggermente) diversi per loro “predefinito” dichiarazione che causa incoerenza attraverso i browser, in particolare in quella vecchia come IE6, 7 e Firefox 3.0.
Ad esempio, come puoi vedere dallo screenshot qui sopra, il nuovissimo Firefox ha reso il blockquote di default con margine: 16px 40px 16px 40px, mentre dall'altra parte il Internet Explorer 7 renderà blockquote con margine: 0px 40px.
Per superare le incongruenze mostrate sopra, molti web designer e sviluppatori preferiscono sovrascrivere tutti quegli stili con Ripristino CSS. Questo file CSS generalmente contiene quasi tutto l'HTML genere selettori, definendoli con regole uguali.
Sono disponibili molti reset CSS, ma qui ci sono i miei tre preferiti principali:
- Normalize.css
- Ripristino CSS
- HTML5 Reimposta foglio di stile
I selettori
Probabilmente leggi spesso questo termine attraverso i blog di web design / sviluppo che hai visitato; I selettori.
Il selettore in CSS è la sintassi utilizzata per indirizzare qualsiasi parte sul documento HTML per gli stili a cui applicare. Ci sono tre selettori di base di cui parleremo qui, poiché probabilmente saranno i selettori comuni utilizzati sul tuo primo sito web. Copriremo gli altri in post futuri.
Selettore di tipo
Abbiamo menzionato una volta sopra, il selettore di tipo si rivolgerà a qualsiasi elemento HTML specificato sul documento. Per esempio:
p / ** dichiarazione ** /
corrisponderà a tutti p o il paragrafo elementi e usandolo finirà per sovrascrivere gli stili predefiniti forniti dai browser.
Selettore di classe
Quando hai aggiunto una classe o anche molte classi a un elemento, puoi anche scegliere come target quelle classi. Il Selettore di classe inizia con a punto parametro.
.casella / ** dichiarazione ** /
Lo snippet sopra riportato corrisponderà a tutti gli elementi che hanno la classe box, o possiamo anche selezionare in modo più specifico.
p.box / ** declaration ** /
Mirerà solo al p elemento che ha il scatola classe.
Quando usiamo il Classe selettore, la stessa dichiarazione di stili da entrambi i genere selettore e il Browser predefinito sarà sovrascritto.
Selettore ID
Il ID è un attributo molto restrittivo, possiamo solo averne uno id su un elemento e deve essere anche unico.
Soddisfare
Nel caso in cui abbiamo un id in un elemento, possiamo usare il selettore di identità prendere di mira quell'elemento; il selettore di id è definito con un hash # parametro.
#uniqueID / ** declaration ** /
Dal momento che il ID è unico, ha il più alto livello di priorità del tipo di selettore. Quindi, quando dichiariamo stili con il ID selettore finirà per sovrascrivere la stessa dichiarazione dal Classe, genere selettori e il Browser predefinito stili.
Incorporare gli stili
Siamo passati attraverso tutti i selettori di base essenziali e ora vedremo come questi stili sono incorporati in un documento HTML.
Stili esterni
Gli stili esterni sono gli stili che vengono aggiunti in un file separato, solitamente in a .css file che poi sono collegati al documento HTML usando il tag per applicare quegli stili.
E tutti gli stili dichiarati nei file si comporteranno come quello che abbiamo menzionato nel I selettori sezione sopra, vale a dire che sovrascriverà principalmente il browser predefinito stile e sovrascrivere su un'altra dichiarazione di stile in base al livello di priorità dei selettori.
Questa pratica è il modo più consigliato per allegare gli stili, in particolare quando si hanno migliaia di righe di codici CSS con molte pagine alle quali collegarsi.
In questo modo, gli stili saranno anche facilmente gestibili, ad esempio, puoi separare i file CSS in diversi file a seconda del suo ruolo specifico, come typography.css per controllare tutti gli stili relativi alla tipografia e così via.
Stili interni
Gli stili interni sono gli stili che sono incorporati direttamente in un documento HTML, generalmente all'interno di etichetta.
Ma questa pratica non è raccomandata quando avrai centinaia di linee di stili perché la tua pagina HTML sarà troppo lunga e lo stile avrà effetto solo su dove sono incorporati gli stili. Quando hai lasciato dire dieci pagine, dovrai copiare quegli stili e incorporarli in tutte le pagine e quando hai bisogno di cambiare gli stili devi cambiarli in dieci pagine diverse, il che è ovviamente un compito noioso.
In base al livello di priorità, lo stile interno è più alto, quindi sovrascriverà gli stili esterni.
Stili in linea
Gli stili incorporati sono gli stili direttamente incorporati nell'elemento HTML.
Questo è un paragrafo
Questo esempio sopra aggiungerà 5px margine all'elemento paragrafo e sovrascriverà anche i margini che sono stati dichiarati per quell'elemento sia negli stili interni che esterni.
Ma evita di farlo, poiché il tuo markup sarà ingombrato da tutte quelle dichiarazioni di stile; se hai un sacco di stili incorporati, diventerà persino un incubo per vedere e mantenere tutti i tuoi html e stili.
Ulteriori letture: Tre modi per inserire CSS - W3CSchools.
La regola! Importante
Ci sono alcune circostanze in cui dobbiamo applicare uno stile specifico per un elemento, ma lo stesso stile per quell'elemento è stato dichiarato anche altrove nel foglio di stile o nel documento. Per esempio:
Abbiamo il seguente tag di ancoraggio con stili incorporati
Questo è un link
E abbiamo anche uno stile separato per quel tag di ancoraggio nel foglio di stile.
a border: 1px solid # 333; background-color: # 555;
In questo esempio, possiamo usare il !importante regola per forzare il browser a utilizzare gli stili nel foglio di stile anziché quello nell'elemento.
a border: 1px solid # 333! important; background-color: # 555! important;
Il !importante la regola indicherà che questo stile è il più importante e deve essere applicato sull'altro stile anche quando è incorporato direttamente nell'elemento (Stili in linea).
Ulteriori letture:! importanti dichiarazioni CSS: come e quando usarle - Smashing Magazine.
Conclusione
Abbiamo esaminato l'intero argomento in questo articolo. Ora possiamo vedere che ogni selettore e il modo in cui incorporiamo gli stili hanno diversi livelli di priorità nel meccanismo del browser. Come ho detto prima, questi argomenti sono pensati per i principianti, quindi non sono sicuramente qualcosa di nuovo per i web designer esperti.
Ma penso che ogni web designer in generale sia d'accordo sul fatto che tornare alle basi è a volte necessario per rivedere la nostra conoscenza fondamentale di un argomento. In effetti, spesso ci perdiamo alcune cose di base, dato che tendiamo ad essere più impressionato da cose fantastiche (e pazze) come questa.
Infine, ho fornito una demo e un file sorgente per esaminare ulteriormente la nostra discussione in questo articolo.
- dimostrazione
- Scarica fonte
Spero ti piaccia questo post e se trovi qualche imprecisione in esso, o mi sono perso alcuni punti importanti, non esitare a segnalarmi nella sezione commenti qui sotto.
