Spiegazione delle terminologie dei concetti di base sui CSS
CSS o Cascading Stylesheet completano il linguaggio di definizione delle regole di progettazione per il nostro web. Gli artisti utilizzano quotidianamente i CSS ogni giorno per creare, organizzare e codificare serie di regole per i layout di base del sito web. Questo è diventato il linguaggio più popolare per il design di front-end e offre incredibili abilità con la recente versione di CSS3. Ma cosa significa in realtà tutto questo codice?
Il linguaggio stesso è stato completamente sviluppato per alcuni anni. La confusione può sorgere principalmente a causa di problemi di comunicazione e uso improprio di termini simili. I CSS portano molti nuovi concetti al tavolo. Copriremo alcuni dei termini più popolari da padroneggiare come guru dei CSS.
Perché specializzarsi con i CSS?
Questa domanda è stata posta prima, e anche entrando nel 2011 possiamo vedere gli stessi risultati spuntare. Il CSS è un linguaggio robusto non adatto a scripting o programmazione. È un linguaggio di stile, in particolare il codice utilizzato per descrivere come deve comportarsi una pagina web.
Usando i CSS possiamo manipolare direttamente gli attributi dai singoli elementi HTML. Tutti i blocchi, paragrafi, collegamenti e immagini possono essere influenzati dalle regole CSS. Affinare la semantica della presentazione per il web è sempre stato un grande passo. Questo è il motivo principale per cui il CSS è ancora il principale attore per i designer - nessuno ha mai creato qualcosa di meglio!
Proprietà e valori
Questo è il modo più semplice per entrare nel CSS. Tutto il codice si divide in due azioni: scegliere un elemento per applicare i disegni e cosa applicare. Quest'ultimo viene creato attraverso coppie di proprietà / valore.
Come esempio colore rosso; è una coppia di proprietà / valore molto semplice. La proprietà che abbiamo usato è colore che ci permette di passare in qualsiasi accettabile valore per cambiare il colore del testo. Questo potrebbe anche essere codice esadecimale o dati di colore RGB (Rosso-Verde-Blu). Molte volte i designer non menzionano l'idea dei valori perché possono essere fuorvianti.
Proprietà e valori sono davvero una sola idea. Ogni dichiarazione di proprietà richiede un valore e i valori da soli non hanno senso. C'è molta documentazione online che tratta le molte proprietà differenti e in che modo influenzano gli elementi HTML. Consiglierei l'acquisto di un libro di consultazione CSS da qualsiasi negozio di libri nelle vicinanze. Sono abbastanza economici e contengono la maggior parte delle informazioni di cui avresti bisogno.
Valori di selezione
I selettori sono necessari per completare un'intera riga di codice CSS. Questi sono ciò che dichiariamo per impostare quale tipo di elemento stiamo prendendo di mira. Ci sono molti selezionatori e molti sono così contorti che il progettista medio non avrebbe bisogno delle abilità. Controlla i documenti del selettore di W3 se vuoi saperne di più.
Il modo più semplice per iniziare le definizioni di stile è utilizzare gli elementi nudi come selettori di proprietà. Ciò significa manipolare il codice radice come p per i paragrafi, div per le divisioni e persino corpo e html può essere usato per manipolare l'intero documento della pagina web. Di seguito è riportato un rapido esempio di stile di tutti gli elementi del paragrafo.
p font-family: Arial, sans-serif; colore: # 222; font-weight: bold;
Ciò che dà peso reale ai CSS è quanto può essere accurato lo sniping del selettore. Il modo migliore per realizzare stili mirati è attraverso 2 metodi noti come classi e ID. Queste sono idee comuni in HTML in cui è possibile impostare qualsiasi elemento per avere un ID e un valore di classe tramite attributi. Quindi usando CSS è semplice applicare gli stili a quel blocco specifico.
p # firstpar font-size: 14px; / * style paragraph con ID di "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * stili di paragrafo (s) con classe di "commento" * /
Lunghezza Unità e valori
Spesso questi termini si confondono, non una grande sorpresa. I valori sono stati spiegati in precedenza come posizionamento che utilizziamo per descrivere una proprietà. Le unità di lunghezza sono anche valori in cui vengono utilizzate per descrivere una proprietà.
La differenza è che questi valori richiedono dati numerici e quindi devono restituire una qualche forma di unità. I pixel (px) sono i più diffusi e possono essere utilizzati per quasi tutto: larghezza / altezza, dimensione del carattere, riempimento / margini, per citarne alcuni.
Oltre a questi puoi vedere percentuali (%) usate spesso attraverso layout fluidi. Quando si impostano i valori di larghezza in percentuale il compilatore assumerà il 100% come l'intera larghezza del browser web. Ciò conferisce molta precisione ai progettisti quando applicano gli stili alle strutture di layout e persino alla tipografia delle pagine.
Il blocco della dichiarazione
Ora, dopo aver unito tutti questi termini, siamo finalmente in grado di discutere l'idea alla base dei fogli di stile. I blocchi di codice sono usati per delineare le aree tematiche e specificare i dettagli degli elementi. Ad esempio, di seguito è riportata una riga di codice per un semplice contenitore di navigazione:
div # nav display: block; larghezza: 100%; imbottitura: 3px 6px; margin-bottom: 20px;
Il modo più semplice per visualizzare questo codice è quello di allineare le proprietà una dopo l'altra. Gli sviluppatori CSS hanno utilizzato blocchi di codice per rompere ciascuna proprietà sulla propria linea. Questo programma non solo occupa molto più spazio ma riduce la capacità di “scremare” il tuo foglio per trovare esattamente ciò di cui hai bisogno.
Un modo migliore per suddividere i blocchi di codice è separare gli elementi convoluti da soli dopo aver raggiunto una soglia. Questo numero è personale e sarà diverso tra gli sviluppatori. È il punto di svolta in cui la logica impone di tenere tutto in una sola riga, principalmente a causa della leggibilità.
Di seguito ho scritto un esempio di un blocco di proprietà di navigazione tutti insieme. Questa pratica mantiene gli elementi più profondi nella stessa posizione in modo che le modifiche a tutti gli elementi di navigazione siano molto più semplici.
div # nav display: block; larghezza: 100%; imbottitura: 3px 6px; margin-bottom: 20px; div # nav ul list-style: none; blocco di visualizzazione; div # nav ul li float: left; margin-right: 10px; font-size: 12px; div # nav ul li a color: # 0f0f0f; decorazione del testo: nessuna; display: blocco in linea; imbottitura: 2px 5px;
Possibili progressi da CSS2 / CSS3
Nei titoli di recente è stato parlato senza sosta degli straordinari benefici del CSS3. Ma cosa ha veramente cambiato nella lingua? Il codice chiaramente vecchio funzionerà ancora bene. Questo mostra almeno una retrocompatibilità completa tra i compilatori (sempre una buona cosa).
Le principali differenze sono per lo più legate alle nuove proprietà. Ciò consente di rendere in-browser gli angoli arrotondati e gli effetti di ombreggiatura. CSS3 offre anche nuovi strumenti per la descrizione dei colori nel documento. HSL (Hue-Saturation-Lightness) è il più recente in aggiunta a HSLA che include un canale Alpha per ridurre l'opacità.
I selettori di attributi rappresentano un enorme passo in avanti per quanto riguarda lo stile di marcatura diretta. Con questo stile di codice puoi scegliere come target un nome di elemento specifico che contiene attributi con determinati valori. Questi sono per lo più utili quando si lavora con markup come XML dove non ci sono principi di progettazione standard per manipolare i nodi. L'esempio sotto è un'idea relativamente semplice:
div [attrib ^ = "1"] / * stili qui * /
Il codice sopra è parte della libreria dei selettori CSS. Ciò influenzerebbe tutti gli elementi div con un attributo “attrib” che detiene anche il valore “1”. Se questo è ancora confuso, fai riferimento all'esempio qui sotto per chiarire. In teoria questi due selettori dovrebbero eseguire le stesse azioni.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
Conclusione
Dopo aver scomposto alcuni dei termini più confusi, la CSS sembra una passeggiata nel parco. La lingua è molto intuitiva e i principianti possono iniziare a progettare entro le prime ore. Questo è ciò che rende i CSS così popolari tra gli sviluppatori web.
I benefici del CSS3 hanno appena iniziato a prendere effetto. Nel corso dei nuovi anni, l'evoluzione delle tendenze del web ci mostrerà quanto controllo abbiamo veramente sul design delle pagine web. Al momento, CSS è orgoglioso come lingua dominante per lo stile dei siti Web front-end. Esercitarsi in rudimentali capacità di livello intermedio può produrre un'esperienza di progettazione generosa e ulteriore conoscenza.
