Back to Basics dei CSS: spiegazioni terminologiche

Questo articolo fa parte della nostra "serie di tutorial HTML5 / CSS3", dedicata a farti diventare un designer e / o uno sviluppatore migliori. Clicca qui per vedere più articoli della stessa serie.

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 alcune delle terminologie 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 delle presentazioni 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.

Ad esempio color: red; è una coppia di proprietà / valore molto semplice. La proprietà che abbiamo usato è il colore che ci consente di passare qualsiasi valore accettabile 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 del selettore

I selettori sono necessari per completare un'intera riga di codice CSS. Questi sono ciò che dichiariamo di 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 competenze. Controlla i documenti di selezione 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 body e html possono essere utilizzati 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 gli 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 si possono vedere le percentuali (%) utilizzate spesso attraverso layout fluidi. Quando si impostano i valori di larghezza su una 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 "sfogliare" il 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 a tutto ciò di scioccare tutto su un'unica 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, quindi le modifiche a tutti gli elementi di navigazione sono 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 è 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 contiene 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 analizzato alcuni dei termini più confusi, la CSS sembra una passeggiata nel parco. La lingua è molto intuitiva e i principianti possono iniziare a progettare nelle 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 degli ultimi anni, l'evoluzione delle tendenze del web ci mostrerà quanto controllo abbiamo veramente sul design della pagina web. Al momento, CSS è fiera come lingua dominante per lo stile dei siti Web front-end. Esercitarsi in anche rudimentali abilità di livello intermedio può produrre un'esperienza di progettazione generosa e ulteriore conoscenza.

20 annunci di aerei eccezionali che devi vedere

Nel mondo di oggi, la pubblicità è ovunque: su cartelloni pubblicitari, striscioni, fermate degli autobus, persino autobus: c'è sempre qualcuno che cerca di venderti dentifricio sbiancante, olio motore o vestiti di lusso che ti fanno sembrare una superstar. Dopo un po ', sviluppiamo la capacità di filtrare il rumore bianco. Qu

(Consigli tecnici e di design)

11 modi per accelerare Google Chrome

Uno dei browser più popolari tra gli utenti che amano è Google Chrome, e nonostante tutti gli aggiornamenti di funzionalità e correzioni di bug, Chrome può essere lento a volte a causa di alcune delle sue funzionalità, estensioni o applicazioni.La buona notizia è che ci sono vari suggerimenti e trucchi e hack che aiutano a migliorare la velocità e la sensibilità generale di questo browser, che in seguito può migliorare il caricamento della pagina e le velocità di navigazione sul Web. In quest

(Consigli tecnici e di design)