Imparare CSS: La guida completa

Abbiamo costruito una guida completa per aiutarvi a imparare CSS, se siete appena iniziato con le basi o se si desidera esplorare CSS più avanzato.

Selettori CSS

Così hai imparato la baseid,class, edescendant selettori—e poi chiamato un giorno? Se è così, ti stai perdendo un enorme livello di flessibilità. Lo devi a te stesso di impegnare questi selettori CSS e CSS3 avanzati in memoria.

Selettori di base

1., *

* { margin: 0; padding: 0;}

Buttiamo fuori quelli ovvi, per i principianti, prima di passare ai selettori più avanzati.

Il simbolo stella avrà come target ogni singolo elemento della pagina. Molti sviluppatori useranno questo trucco per azzerare marginepadding. Anche se questo va certamente bene per i test rapidi, ti consiglierei di non usarlo mai nel codice di produzione. Si aggiunge troppo peso sul browser, ed è inutile.

Il* può essere utilizzato anche con selettori figlio.,

#container * { border: 1px solid black;}

Questo avrà come target ogni singolo elemento figlio di#containerdiv. Ancora una volta, cerca di non usare molto questa tecnica, se mai.

2. #X

#container { width: 960px; margin: auto;}

Il prefisso del simbolo hash a un selettore ci consente di scegliere come targetid. Questo è facilmente l’uso più comune; tuttavia, essere cauti quando si utilizzano id selettori.,

Chiediti: devo assolutamente applicare un id a questo elemento per indirizzarlo?

id i selettori sono rigidi e non consentono il riutilizzo. Se possibile, prima prova a utilizzare un nome di tag, uno dei nuovi elementi HTML5 o anche una pseudo-classe.

3. .X

.error { color: red;}

Questo è unclass selettore. La differenza tra ids eclass es è che, con quest’ultimo, è possibile indirizzare più elementi., Usaclasses quando vuoi che il tuo stile si applichi a un gruppo di elementi. In alternativa, utilizzare id s per trovare un ago in un pagliaio e modellare solo quell’elemento specifico.

4. X

a { color: red; }ul { margin-left: 0; }

Cosa succede se si desidera indirizzare tutti gli elementi di una pagina, in base al lorotype, piuttosto che unid oclassnome? Mantienilo semplice e usa un selettore di tipo. Se è necessario indirizzare tutte le liste non ordinate, utilizzare ul {}.,

Demo live dei selettori di base

Selettori Combinator

5. X Y

li a { text-decoration: none;}

Il prossimo selettore più comune è ildescendant selettore. Quando hai bisogno di essere più specifico con i tuoi selettori, li usi. Ad esempio, cosa succede se, piuttosto che mirare a tutti i tag di ancoraggio, devi solo indirizzare gli ancoraggi che si trovano all’interno di un elenco non ordinato? Questo è specificamente quando useresti un selettore discendente.

Pro-tip: Se il tuo selettore assomiglia a X Y Z A B.error, stai sbagliando., Chiediti sempre se è assolutamente necessario applicare tutto quel peso.

6. X + Y

ul + p { color: red;}

Questo è indicato come un selettore adiacente. Selezionerà solo l’elemento immediatamente preceduto dall’elemento precedente. In questo caso, solo il primo paragrafo dopo ogni ul avrà testo rosso.

7., X > Y

div#container > ul { border: 1px solid black;}

La differenza tra lo standardX YeX > Y è che quest’ultimo selezionerà solo i bambini diretti. Ad esempio, considera il seguente markup.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Un selettore di #container > ul solo target ulche sono figli diretti del div con un id di container., Non avrà come target, ad esempio, ul che è figlio del primo li.

Per questo motivo, ci sono vantaggi in termini di prestazioni nell’utilizzo del combinator figlio. In effetti, è consigliato in particolare quando si lavora con motori di selezione CSS basati su JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Questo combinator fratello è simile aX + Y, ma è meno rigoroso., Mentre un selettore adiacente (ul + p) selezionerà solo il primo elemento immediatamente preceduto dal selettore precedente, questo è più generalizzato. Selezionerà, facendo riferimento al nostro esempio sopra, qualsiasi elemento p, purché seguano un ul.

Demo live dei selettori Combinator

Selettori di attributi

9. X

a { color: green;}

Indicato come un selettore di attributi, nel nostro esempio sopra, questo selezionerà solo i tag di ancoraggio che hanno un attributotitle., I tag di ancoraggio che non lo fanno non riceveranno questo particolare stile. Ma cosa succede se hai bisogno di essere più specifico? Controlla il prossimo esempio!

10. X

a { color: #83b348; /* Envato green */}

Lo snippet sopra disegnerà tutti i tag di ancoraggio che si collegano ahttps://code.tutsplus.com; riceveranno il nostro colore verde di marca. Tutti gli altri tag di ancoraggio rimarranno inalterati.

Si noti che stiamo avvolgendo il valore tra virgolette. Ricordarsi di farlo anche quando si utilizza un motore di selezione CSS JavaScript. Quando possibile, utilizzare sempre selettori CSS3 su metodi non ufficiali.,

Funziona bene, anche se è un po ‘ rigido. Cosa succede se il link è effettivamente diretto a Envato Tuts+, ma forse il percorso è code.tutsplus.com piuttosto che l’URL completo? In questi casi, possiamo usare un po ‘ della sintassi delle espressioni regolari.

11. X

a { color: #83b348; /* Envato green */}

Ci siamo; questo è quello che ci serve. La stella indica che il valore del procedimento deve apparire da qualche parte nel valore dell’attributo. In questo modo, questo copre tutsplus.com, code.tutsplus.com, e anche webdesign.tutsplus.com.

Tieni presente che questa è una dichiarazione ampia., Cosa succede se il tag di ancoraggio è collegato a un sito non Envato con la stringa tutsplus nell’URL? Quando è necessario essere più specifici, utilizzare ^e$, per fare riferimento rispettivamente all’inizio e alla fine di una stringa.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Vi siete mai chiesti come alcuni siti web sono in grado di visualizzare una piccola icona accanto ai link che sono esterni? Sono sicuro che hai visto questi prima; sono belle promemoria che il link vi indirizzerà a un sito completamente diverso.

Questo è un gioco da ragazzi con il simbolo carato., È più comunemente usato nelle espressioni regolari per designare l’inizio di una stringa. Se vogliamo indirizzare tutti i tag di ancoraggio che hanno un hrefche inizia conhttp, potremmo usare un selettore simile allo snippet mostrato sopra.

Si noti che non stiamo cercando ; non è necessario e non tiene conto degli URL che iniziano con

Ora, cosa succede se volessimo invece modellare tutte le ancore che si collegano, ad esempio, a una foto?, In questi casi, cerchiamo la fine della stringa.

13. X

a { color: red;}

Ancora una volta, usiamo un simbolo di espressioni regolari,$, per fare riferimento alla fine di una stringa. In questo caso, stiamo cercando tutte le ancore che si collegano a un’immagine, o almeno un URL che termina con .jpg. Tieni presente che questo non catturerà immagini GIF e PNG.

14. X

a { color: red;}

Come compensare tutti i vari tipi di immagine?, Bene, potremmo creare più selettori, come ad esempio:

a,a,a,a { color: red;}

Ma questo è un dolore ed è inefficiente. Un’altra possibile soluzione è utilizzare attributi personalizzati. Cosa succede se abbiamo aggiunto il nostro attributodata-filetype a ciascun ancoraggio che si collega a un’immagine?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Quindi, con quel gancio in posizione, possiamo usare un selettore di attributi standard per indirizzare solo quelle ancore.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Ecco uno speciale che impressionerà i tuoi amici. Non troppe persone sanno di questo trucco., Il simbolo tilde (~) ci consente di indirizzare un attributo che ha un elenco di valori separati da spazi.

Andando avanti con il nostro attributo personalizzato dal numero 15, sopra, potremmo creare un attributodata-info, che può ricevere un elenco separato da spazi di tutto ciò di cui dobbiamo prendere nota. In questo caso, prenderemo nota dei link esterni e dei link alle immagini—solo per l’esempio.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Con quel markup in atto, ora possiamo indirizzare qualsiasi tag che abbia uno di questi valori, usando il trucco del selettore degli attributi ~.

Piuttosto elegante, eh?

Demo live dei selettori di attributi

Pseudo selettori

16. X: visited e X: link

a:link { color: red; }a:visited { color: purple; }

Usiamo la pseudo-classe:link per indirizzare tutti i tag di ancoraggio che devono ancora essere cliccati.,

In alternativa, abbiamo anche la pseudo classe:visited, che, come ci si aspetterebbe, ci consente di applicare uno stile specifico solo ai tag di ancoraggio sulla pagina su cui è stato fatto clic o “visitato”.

17. X: checked

input:checked { border: 1px solid black;}

Questa pseudo classe avrà come target solo un elemento dell’interfaccia utente che è stato selezionato, come un pulsante di opzione o una casella di controllo. È così semplice.

18. X: dopo

Le beforee after pseudo classi sono grandi., Ogni giorno, a quanto pare, le persone stanno trovando modi nuovi e creativi per usarli in modo efficace. Generano semplicemente contenuti attorno all’elemento selezionato.

Molti sono stati introdotti per la prima volta a queste classi quando hanno incontrato l’hack clear-fix.

Questo hack utilizza la pseudo classe :after per aggiungere uno spazio dopo l’elemento e quindi cancellarlo. È un trucco eccellente da avere nella tua borsa degli attrezzi, in particolare nei casi in cui il metodo overflow: hidden; non è possibile.

Per un altro uso creativo di questo, fare riferimento al mio suggerimento rapido sulla creazione di ombre.,

Secondo la specifica dei selettori CSS3, si dovrebbe tecnicamente utilizzare la sintassi pseudo elemento di due punti ::. Tuttavia, per rimanere compatibile, l’user-agent accetterà anche un singolo utilizzo dei due punti.

19. X: hover

div:hover { background: #e3e3e3;}

Oh andiamo. Questa la conosci. Il termine ufficiale per questo è “user action pseudo class”. Sembra confuso, ma in realtà non lo è. Vuoi applicare uno stile specifico quando un utente si libra su un elemento? Questo otterrà il lavoro fatto!,

Tieni presente che le versioni precedenti di Internet Explorer non rispondono quando la pseudo classe :hover viene applicata a qualcosa di diverso da un tag di ancoraggio.

Userai più spesso questo selettore quando applichi, ad esempio, unborder-bottom per ancorare i tag, quando si passa sopra.

a:hover { border-bottom: 1px solid black;}

Pro-tip:border-bottom: 1px solid black;sembra migliore ditext-decoration: underline;.

20., X: not (selector)

div:not(#container) { color: blue;}

La pseudo classe di negazione è particolarmente utile. Diciamo che voglio selezionare tutti divs, ad eccezione di quello che ha un id dicontainer. Lo snippet sopra gestirà perfettamente quell’attività.

Oppure, se volessi selezionare ogni singolo elemento (non consigliato) ad eccezione dei tag di paragrafo, potremmo fare:

*:not(p) { color: green;}

21., X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Possiamo usare pseudo elementi (designati da::) per modellare frammenti di un elemento, come la prima riga o la prima lettera. Tieni presente che questi devono essere applicati agli elementi a livello di blocco per avere effetto.,

Una pseudo-elemento è composto di due punti: ::

Target la Prima Lettera di un Paragrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Questo frammento di codice è un’astrazione che troverete in tutti i paragrafi della pagina, e poi sub-obiettivo solo la prima lettera di tale elemento.

Viene spesso utilizzato per creare uno stile simile a un giornale per la prima lettera di un articolo.,

Mira alla prima riga di un paragrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

Allo stesso modo, lo pseudo elemento::first-line, come previsto, disegnerà solo la prima riga dell’elemento.

“Per la compatibilità con i fogli di stile, gli agenti utente deve accettare anche il precedente-la notazione due punti per gli pseudo-elementi, introdotto nel CSS livello 1 e 2 (cioè :first-line :first-letter :before e :after). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.,”- Specifiche dei selettori W3C

Demo live di pseudo selettori

Nth Child and Type Selectors

22. X:nth-child(n)

li:nth-child(3) { color: red;}

Ricorda i giorni in cui non avevamo modo di indirizzare elementi specifici in uno stack? La pseudo classenth-child risolve questo problema!

Si noti chenth-child accetta un numero intero come parametro, ma questo non è basato su zero. Se si desidera indirizzare la seconda voce dell’elenco, utilizzareli:nth-child(2).

Possiamo anche usare questo per selezionare un set di variabili di bambini., Ad esempio, potremmo fare li:nth-child(4n) per selezionare ogni quarta voce di elenco.

23. X: nth-last-child (n)

li:nth-last-child(2) { color: red;}

Cosa succede se hai un enorme elenco di elementi in unul e hai solo bisogno di accedere, ad esempio, al terzultimo elemento? Invece di fare li:nth-child(397), potresti invece usare la nth-last-child pseudo classe.

Questa tecnica funziona in modo quasi identico al numero 16 sopra. La differenza è che inizia alla fine della collezione e torna indietro.

24., X: nth-of-type (n)

ul:nth-of-type(3) { border: 1px solid black;}

Ci saranno momenti in cui, piuttosto che selezionare unchild, è invece necessario selezionare in base altype di elemento.

Immagina il markup che contiene cinque elenchi non ordinati. Se si desidera creare solo la terza ul e non si dispone di una id univoca da agganciare, è possibile utilizzare la nth-of-type(n) pseudo classe. Nello snippet sopra, solo il terzo ul avrà un bordo attorno ad esso.

25., X: nth-last-of-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

E sì, per rimanere coerenti, possiamo anche usare nth-last-of-type per iniziare alla fine dell’elenco dei selettori e tornare indietro per indirizzare l’elemento desiderato.

26. X: first-child

ul li:first-child { border-top: none;}

Questa pseudo classe strutturale ci consente di indirizzare solo il primo figlio del genitore dell’elemento. Lo userai spesso per rimuovere i bordi dalla prima e dall’ultima voce dell’elenco.

Ad esempio, diciamo che hai un elenco di righe e ognuna ha unborder-tope unborder-bottom., Bene, con quella disposizione, il primo e l’ultimo elemento in quel set sembreranno un po ‘ strani.

Molti progettisti applicano classi difirst elast per compensare ciò. Invece, puoi usare queste pseudo classi.

27. X: last-child

ul > li:last-child { color: green;}

L’opposto difirst-child,last-child avrà come target l’ultimo elemento del genitore dell’elemento.

last-child Selector Example

Costruiamo un semplice esempio per dimostrare un possibile uso di queste classi., Creeremo una voce di elenco in stile.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Per il markup, non c’è niente di speciale: solo una semplice lista.

Ecco il CSS:

Questo stile imposterà uno sfondo, rimuoverà il padding predefinito del browser suul e applicherà i bordi a ciascunli per fornire un po ‘ di profondità.

Per aggiungere profondità alle tue liste, applicare un border-bottom ogni li che è una o due tonalità più scura rispetto il li‘s colore di sfondo., Quindi, applicare un border-top che è un paio di tonalità più chiare.

L’unico problema, come mostrato nell’immagine sopra, è che un bordo verrà applicato alla parte superiore e inferiore della lista non ordinata—che sembra strano. Usiamo le:first-child e:last-child pseudo classi per risolvere questo problema.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Ci siamo; che lo risolve!

28., X: only-child

div p:only-child { color: red;}

Sinceramente, probabilmente non ti ritroverai a usare la pseudo classeonly-child troppo spesso. Tuttavia, è disponibile, se ne avete bisogno.

Ti permette di indirizzare gli elementi che sono l’unico figlio del suo genitore. Ad esempio, facendo riferimento allo snippet sopra, solo il paragrafo che è l’unico figlio di div sarà colorato di rosso.

Assumiamo il seguente markup.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

In questo caso, i paragrafi del secondodivnon saranno mirati; solo il primodiv. Non appena si applica più di un figlio a un elemento, la pseudo classeonly-child cessa di avere effetto.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Questa pseudo classe strutturale può essere utilizzata in alcuni modi intelligenti. Prenderà di mira gli elementi che non hanno fratelli all’interno del suo contenitore padre. Ad esempio, prendiamo come target tutti ul che hanno solo un singolo elemento di elenco.,

Per prima cosa, chiediti come realizzeresti questo compito. Potresti fareul li, ma questo avrebbe come target tutti gli elementi dell’elenco. L’unica soluzione è usare only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

La pseudo classefirst-of-type consente di selezionare i primi fratelli del suo tipo.

Un test

Per capire meglio questo, facciamo un test. Copia il seguente markup nel tuo editor di codice:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Ora, senza leggere ulteriormente, prova a capire come indirizzare solo “Elemento elenco 2”., Quando hai capito (o rinunciato), continuate a leggere.

Soluzione 1

Esistono vari modi per risolvere questo test. Ne ripasseremo una manciata. Iniziamo usandofirst-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Questo frammento dice essenzialmente, per trovare il primo elenco non ordinato sulla pagina, quindi trovare solo i bambini immediati, che sono elementi dell’elenco. Quindi, filtrare fino a solo la seconda voce di elenco in quel set.

Soluzione 2

Un’altra opzione è usare il selettore adiacente.,

p + ul li:last-child { font-weight: bold;}

In questo scenario, troviamo il tagulche procede immediatamente al tagp, e quindi troviamo l’ultimo figlio dell’elemento.

Soluzione 3

Possiamo essere antipatici o giocosi come vogliamo con questi selettori.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Questa volta, prendiamo il primoul nella pagina, quindi troviamo la prima voce di elenco, ma partendo dal basso!,

Demo live di Nth Child e Type Selectors

Conclusione

Se stai compensando i browser più vecchi, come Internet Explorer 6, devi comunque fare attenzione quando usi questi selettori più recenti. Ma per favore non lasciate che vi dissuada da imparare questi. Ti staresti facendo un enorme cattivo servizio a te stesso. Assicurati di fare riferimento qui per un elenco di compatibilità del browser. In alternativa, è possibile utilizzare l’eccellente IE9 di Dean Edward.script js per portare il supporto per questi selettori ai browser più vecchi.,

In secondo luogo, quando si lavora con le librerie JavaScript, come il popolare jQuery, cercare sempre di utilizzare questi selettori CSS3 nativi sui metodi / selettori personalizzati della libreria, quando possibile. Renderà il tuo codice più veloce, poiché il motore di selezione può utilizzare l’analisi nativa del browser, piuttosto che il suo.

È fantastico che tu stia trascorrendo del tempo a imparare i fondamenti del web design, ma se hai bisogno di una soluzione rapida, uno dei nostri modelli CSS pronti all’uso potrebbe essere una buona opzione. Abbiamo anche alcuni elementi CSS premium da considerare.,

• CSS3
  12 Eleganti CSS, Tabelle dei Prezzi, per il Tuo Ultimo Progetto Web
  Monty Shokeen
• Bootstrap 4
  18 Migliori Bootstrap 4 Plugins
  Monty Shokeen

Accesso Gratuito a Envato Elementi per 1 Mese

Infine, ecco un’offerta speciale per aiutarvi a costruire professionali per siti e applicazioni. Oltre a utilizzare questi selettori CSS, perché non approfittare di foto di alta qualità, riprese video, font premium, grafica, illustrazioni e altro ancora?,

Normalmente, dovresti pagare per risorse del genere. Ma in questo momento, puoi accedere a milioni di risorse creative per i tuoi progetti di codifica per un mese intero, completamente gratuito. E cosa c’è di più, si ottiene download illimitati, in modo da poter afferrare quanto si vuole durante quel mese, e pagare solo se si decide di continuare!,

Per approfittare di questa offerta, fare clic su questo particolare link iscriviti o immettere il codice riportato di seguito nella pagina di registrazione:

elements_cont_tuts-freemonth1-4bwkbp

non aspettare troppo a lungo—l’offerta è valida solo per un tempo limitato!