Qual è la differenza tra una proprietà e un selezionatore? In che modo una dichiarazione è diversa da un blocco di dichiarazione e cos'è una regola CSS? Come faccio a capire la differenza tra una pseudo classe e uno pseudo elemento?
Questa serie servirà come introduzione di base ad alcuni termini che ogni nuovo web designer dovrebbe essere sicuro di aggiungere al suo vocabolario. Non sarà una lista esaustiva di vocaboli, ma piuttosto un primer su alcuni termini che ho trovato difficile da spiegare quando ero un principiante. Abbiamo iniziato con HTML all'inizio di questa settimana e oggi passeremo ad alcuni componenti strutturali del CSS.
CSS
Cascading Style Sheets (CSS) fornisce stile e formattazione al contenuto generalmente grezzo pubblicato tramite HTML. Proprio come abbiamo fatto con l'HTML nel nostro precedente articolo, possiamo suddividere questa terminologia fino a ricavarne un significato.
Iniziamo alla fine. CSS è un linguaggio dei fogli di stile al contrario di a linguaggio con marcatori come HTML o a linguaggio di scripting come JavaScript Come appena detto sopra, i linguaggi di stile sono usati principalmente per la formattazione dei documenti. Il CSS è la ciliegina sulla torta HTML, il che significa che la sostanza è veramente nell'HTML, ma apparirebbe terribilmente semplice senza l'aiuto del CSS.
Il pezzo più complicato di questa definizione è il? Cascading? parte. Il modo in cui i fogli di stile funzionano è che una determinata serie di regole in una posizione può effettivamente "cascata"? verso il basso e influisce su altre parti di un documento, che lo si intenda o meno.
In effetti, la cascata ha un intero insieme di regole che stabilisce per determinare in che modo gli stili vengono applicati all'intero documento. Per saperne di più, leggi il recente articolo di Nicolas Gallagher, CSS: la cascata, la specificità e l'ereditarietà. Questa è una breve ma ben spiegata discussione su come la cascata differisce da altri concetti come la specificità e l'ereditarietà.
CSS3
CSS3 è la terza importante iterazione dei CSS. Nei CSS2, c'era una grande specifica ma con CSS3 tutto è stato diviso in blocchi chiamati moduli. Alcuni moduli di esempio includono quanto segue: Colore CSS, Media Query, Animazioni CSS, Layout casella flessibile, ecc. Controlla qui per un elenco completo.
Ogni modulo viene elaborato come un'unità e ha uno stato ampiamente indipendente dagli altri moduli. Ad esempio, il modulo Selectors Level 3 ha raggiunto la raccomandazione? status, cioè è pronto per essere implementato, mentre il CSS Flexible Box Layout è ancora un? bozza di lavoro? questo è in fase di revisione.
La cosa interessante di questa modularità è che gli sviluppatori non vedono l'ora di giocare con tutte queste chicche. Quindi, anche se un determinato modulo potrebbe avere un supporto browser molto piccolo ed è una bozza altamente sperimentale, è probabile che venga comunque utilizzato in siti live su tutto il web. Fai sempre attenzione quando usi nuove funzionalità CSS3 e assicurati di verificare la compatibilità del browser.
L'anatomia dei CSS
Uno dei concetti chiave che è necessario comprendere quando si lavora con i CSS è il modo in cui le singole parti vengono solitamente indicate. Prendersi il tempo per padroneggiare questa lingua aiuterà notevolmente la tua comprensione di tutorial, libri e altre fonti da cui stai imparando i CSS. Quindi quando leggi o senti la parola "proprietà"? sai immediatamente cosa viene discusso.
Per iniziare, ecco una tabella di base di una riga di CSS. Come puoi vedere, ci sono tre singoli pezzi qui: un selettore, una proprietà e un valore.
Selettore
Il primo pezzo del puzzle sopra è conosciuto come un selettore. Questo è esattamente ciò che sembra: un modo per selezionare o bersaglio qualcosa per lo styling. I CSS usano schemi semplici che fanno riferimento a parti del DOM (che abbiamo appreso nella prima parte) e poi applicano gli stili a quella specifica selezione. Il codice sopra, ad esempio, ha come target tutti gli elementi del paragrafo e imposta il valore del colore su nero.
Alcuni selettori, come quello sopra, sono incredibilmente semplici mentre altri sono molto complessi. Più avanti discuteremo alcuni dei termini più complessi che circondano i selettori.
Proprietà
La proprietà è l'aspetto della cosa mirata che vorresti cambiare. Ogni elemento HTML è un oggetto complicato che può essere associato a una serie di proprietà. Ad esempio, l'esempio precedente riguarda tutti gli elementi del paragrafo, che contengono impostazioni predefinite per dimensione carattere, famiglia di caratteri, colore, altezza della linea e molto altro, ognuno dei quali può essere sovrascritto tramite CSS.
Alcune proprietà si riferiscono a scelte estetiche minori, ma altre possono avere un effetto drastico sul layout del documento. Per rendere le cose ancora più complicate, i diversi browser spesso assegnano valori di default diversi a varie proprietà. Progetti come Normalize.css ti fanno risparmiare un sacco di lavoro cercando di spiegare ed eliminare queste differenze.
Valore
Dopo aver scelto come target qualcosa da cambiare e scegliendo la porzione dell'oggetto da modificare, è ora di cambiare qualcosa! La porzione del valore consente di impostare la proprietà su qualcosa di nuovo. Ad esempio, il default del browser potrebbe già impostare i tuoi paragrafi in nero, ma pensi che un grigio scuro sia migliore, quindi il valore impostato per il colore potrebbe essere # 4b4b4b.
Il termine? Valore? è un po 'confuso perché probabilmente lo associ immediatamente a qualcosa di numerico. Infatti molti valori CSS sono di natura numerica. I valori possono essere espressi in pixel (dimensione font: 10px), percentuali (larghezza: 33.33%), ems (line-height: 1em), ecc. Ma possono anche essere espressi anche in altri modi. Considera i seguenti esempi:
Come puoi vedere, questa è una grossa porzione di CSS con molti valori, ma non c'è un solo numero in vista! Basta tenere a mente che il termine? Valore? è piuttosto generico qui e può riferirsi a un numero di diversi tipi di input.
Dichiarazione vs. Dichiarazione Blocca contro Regola
Questi sono termini che mi fanno incazzare costantemente e, sinceramente, non l'ho esplorato molto fino a quando non ho scritto questo articolo. Dichiarazioni, blocchi di dichiarazioni e regole sono così simili che è facile confondere le etichette e usare la terminologia sbagliata.
In definitiva, non è la cosa peggiore del mondo se lo dici male, ma ancora una volta se stai leggendo o guardando un tutorial, aiuta a sapere in modo specifico ciò che l'insegnante sta discutendo. Ecco una tabella rapida che, auspicabilmente, rende immediatamente chiaro il significato di ciascun termine:
Come puoi vedere, qui abbiamo un chiaro caso di gerarchia. Iniziamo in piccolo e procediamo verso l'alto. UN dichiarazione è composto da una proprietà e un valore (colore: rosso). UN blocco di dichiarazione è una o più dichiarazioni contenute tra parentesi graffe e separate da punto e virgola: {color: red; larghezza: 20px;}. Infine, lancia un selettore in questo mix e hai una regola.
Tipi di selettori
Ora dovresti avere una buona idea di cosa sono i selettori, ma lo sapevi che esistono molti tipi diversi di selettori? Eccone alcuni che dovresti sapere.
Selettori di tipo
Questi sono il tipo più basilare di selettore. Secondo il modulo di livello 3 dei selettori, un selettore di tipi rappresenta un'istanza del tipo di elemento nell'albero del documento. Esempi di selettori di tipo includono quelli che si limitano a scegliere un tipo specifico di elemento HTML:
Selettori di classe e selettori di ID
A parte i selettori di tipi, due dei tipi più comuni di selettori che vedrai nei CSS sono selettori di classe e selettori ID. Come abbiamo appreso l'ultima volta, la differenza principale tra classi e ID è il fatto che le classi sono riutilizzabili e gli ID sono unici.
Puoi scegliere come target una determinata classe dal tuo codice HTML con un selettore di classe, che è sempre preceduto da un punto. Allo stesso modo, puoi scegliere come target qualsiasi ID dal tuo codice HTML con un selettore ID, che è sempre preceduto da un simbolo di cancelletto.
Selettori di attributi
Classi e ID sono in realtà attributi HTML che sono abbastanza comuni da meritare selettori speciali, ma ci sono anche molti altri attributi. Ad esempio, considera il seguente frammento:
Qui abbiamo un paio di elementi di ancoraggio che contengono attributi href. Probabilmente sai che puoi utilizzare i CSS per indirizzare tutti i tag di ancoraggio contemporaneamente, ma lo sapevi che potresti indirizzare in modo specifico un valore href specifico?
Qui abbiamo usato un selettore di attributi scegliere come target solo l'href con il valore di "https://designshack.net/" e cambiarne il colore in bianco. Questo ignora completamente l'altra ancora nel nostro esempio. I selettori di attributi danno origine a alcuni dei più complicati selettori CSS che vedrai mai.
Fortunatamente, abbiamo un grande articolo che ti insegna tutti sui selettori di attributi e su come interpretare selettori pazzi come quello sopra.
Selettori discendenti, bambini e fratelli o sorelle
Ci sono alcuni selettori che iniziano a sembrare come se provenissero da un albero genealogico (che si collega alla nostra discussione DOM dell'ultima volta). Ad esempio, ecco il combinatore discendente:
Questo riguarderà tutti i paragrafi che sono discendenti di elementi di intestazione. Nota che i discendenti non sono gli stessi dei bambini. Proprio come con la tua famiglia, tutti i figli di un oggetto sono discendenti, ma non tutti i suoi discendenti sono i suoi figli. Il selettore sopra i bersagli tutti dei paragrafi qui:
Diciamo che volevamo scegliere come target solo i bambini dell'elemento di intestazione. Per fare questo, useremmo il combinatore di bambini. Questo riguarderà solo i primi due paragrafi nell'HTML sopra.
Esistono anche combinatori di fratelli (generali e adiacenti). Troverai questi e molto altro nel nostro articolo, CSS Selectors: Just the Tricky Bits. Ecco come sono:
Il primo selettore ha come target qualsiasi paragrafo immediatamente preceduto da un elemento h1 (fratello adiacente) mentre il secondo selettore ha come target qualsiasi paragrafo preceduto da un h1, indipendentemente dal fatto che fosse o meno l'elemento precedente (fratello generico).
Pseudo Classi contro Pseudo Elementi
Un'altra area speciale di selettori è l'argomento di pseudo classi e pseudo elementi. Per rendere più chiara questa discussione, ecco un grafico che ho creato per The Lowdown su: Before e: After in CSS.
Qui possiamo vedere alcune pseudo classi che sono familiari come librarsi insieme ad alcuni un po 'più rari come Primogenito. Ma come sono questi diversi che gli elementi pseudo come :prima e :prima linea?
La risposta è molto semplice. Ricorda solo che l'obiettivo delle pseudo classi completare gli elementi o gli stati degli elementi mentre pseudo elementi target sotto parti di un elemento. Ad esempio, il librarsi la pseudo classe può essere applicata a un'ancora intera, paragrafo, div, ecc. Al contrario, :prima linea non prende di mira un intero paragrafo ma solo un pezzo di esso.
Con quali termini CSS lotti?
Intendevo che questo articolo fosse un po 'più completo, ma mi sono così incasinato nella struttura di base dei CSS che dovevo fermarmi lì. Probabilmente andrò avanti e scriverò una terza parte di questa serie che copre un altro gergo CSS comune che non è stato discusso qui.
Per aiutare ad alimentare il prossimo articolo, lascia un commento qui sotto e dicci quali concetti e termini CSS con cui lotti. Quali frasi senti usate in modo intercambiabile anche se non significano necessariamente la stessa cosa?