L'acronimo CSS sta per "fogli di stile a cascata". CSS viene utilizzato per lo stile di siti Web e applicazioni utilizzati su tutti i dispositivi. Il foglio di stile è comunemente usato insieme all'HTML e a un linguaggio di programmazione front-end come JavaScript.

I CSS possono essere implementati in tre modi: in linea, internamente o esternamente. Sebbene CSS esterno sia l'approccio consigliato, ci sono casi in cui i due metodi rimanenti di implementazione potrebbero essere più pratici.

In questo articolo tutorial, imparerai tutte le basi dei CSS per iniziare a creare applicazioni oggi.

Quando utilizzare i diversi metodi di implementazione CSS

Inline CSS è il metodo di implementazione ideale quando l'intento è quello di includere solo una o due preferenze di stile in una pagina Web, insieme a pochi altri casi di nicchia. Il metodo CSS in linea utilizza il stile parola chiave insieme a una proprietà CSS per ottenere un risultato specifico.

Se intendi cambiare il colore di una singola intestazione in rosso, il CSS in linea potrebbe essere una buona opzione. Un caso di nicchia, come accennato in precedenza, sarebbe quando si creano layout HTML costituiti principalmente da tabelle (una pratica obsoleta).

Utilizzo dell'esempio CSS in linea

Titolo principale

La riga di codice sopra mostrerà il testo "Main Heading" rivestito di colore rosso. Questo è probabilmente uno dei pochi motivi pratici per usare CSS in linea perché di solito ce n'è solo uno h1 elemento su una determinata pagina web.

Se hai intenzione di rivestire tutto h2 elementi in una pagina web con il colore giallo. Dovrai usare il CSS stile parola chiave, insieme a colore proprietà e il suo valore (giallo) su ciascun elemento. Tuttavia, un modo più efficiente per eseguire questa operazione consiste nell'utilizzare i CSS interni.

Utilizzo dell'esempio CSS interno

Inserendo il codice sopra nel tag del tuo file HTML garantirà che tutti i h2 gli elementi in quel file sono rivestiti di giallo. Il CSS interno è separato dal codice HTML e questo rende il metodo più efficiente perché facilita il targeting di vari gruppi di elementi.

Allora perché il metodo di implementazione CSS esterno è ancora l'approccio più consigliato? Separazione degli interessi. Con CSS esterni, il tuo codice CSS è completamente separato dal tuo codice HTML, il che garantisce la scalabilità per progetti di grandi dimensioni e rende il processo di test più efficiente.

Utilizzo di un esempio CSS esterno

Inserendo la riga di codice sopra nel tag del tuo file HTML faciliterà lo stile della tua pagina web utilizzando il metodo CSS esterno. L'unico aspetto del codice sopra che cambierà è il valore assegnato al href proprietà, che dovrebbe essere sempre il nome del file CSS (inclusa l'estensione .css).

Imparentato: Cosa sono i fogli di stile a cascata e a cosa servono i CSS? Con il tuo file CSS collegato al tuo documento HTML, ora puoi iniziare a scrivere il codice CSS nel tuo file CSS. A questo punto, l'unica differenza tra l'esempio CSS interno sopra e il CSS esterno è il stile etichetta. Pertanto, l'inserimento del seguente codice in un file CSS produrrà lo stesso risultato dell'esempio CSS interno sopra.

h2{
colore: giallo;
}

Esplorare la struttura di base dei CSS

La dichiarazione CSS di base contiene sette elementi essenziali, come puoi vedere dall'esempio seguente. Lavorano tutti insieme per ottenere una serie specifica di preferenze di stile.

Il Selettore

In una dichiarazione CSS, un selettore può essere un ID, un classe, un elemento o, in alcuni casi speciali, uno pseudo-selettore. Nella struttura CSS sopra il un viene utilizzato come selettore, il che significa che tutti i collegamenti su una pagina web saranno rivestiti di rosso. In sostanza, lo scopo del selettore è identificare l'elemento o gli elementi a cui applicare lo stile.

Inizio e fine della dichiarazione

L'inizio e la fine della dichiarazione sono importanti perché racchiudono tutte le preferenze di stile che si applicano a un selettore specifico. Entrambi gli elementi sono rappresentati da una coppia di parentesi graffe aperte e chiuse. Un buon modo per ricordare di utilizzare un inizio o una fine di dichiarazione è ricordare che se si dispone di una parentesi graffa aperta, dovrebbe esserci una parentesi graffa chiusa corrispondente e viceversa.

La proprietà

La proprietà CSS in una struttura di dichiarazione può essere uno qualsiasi degli oltre cento diversi tipi di proprietà. Il tipo di proprietà utilizzato nella struttura CSS sopra è colore e questa proprietà ha come target il testo su una pagina web. Se vuoi saperne di più, dai un'occhiata al nostro elenco completo delle proprietà CSS e del loro utilizzo.

Il separatore proprietà/valore

Sebbene possa sembrare piccolo e insignificante, il separatore proprietà/valore è importante quanto tutti gli altri elementi nella struttura CSS. Se c'è mai un'istanza in cui questo elemento viene dimenticato, l'intera dichiarazione CSS non verrà eseguita.

Il valore

Il valore della proprietà CSS rappresenta lo stile esatto che desideri applicare a una determinata proprietà. I valori disponibili per l'uso dipendono dal tipo di proprietà. Ad esempio, la proprietà utilizzata nella struttura di cui sopra è colore, il che significa che esiste un solo tipo di valore che può essere applicato a questa proprietà, un nome di colore. UN colore Il valore può essere presentato in una delle quattro forme seguenti: un valore a parola (come nell'esempio sopra), un valore esadecimale, un valore HSL (tonalità, saturazione, luminosità) o un valore RGB (rosso, verde, blu).

Il separatore di dichiarazioni

Il separatore di dichiarazione indica che sei alla fine di una specifica dichiarazione di stile. Nella struttura sopra c'è un solo separatore di dichiarazione, ma possono essercene di più. Tutto dipende dal numero di proprietà CSS che intendi utilizzare su uno specifico classe, ID, o elemento.

Cosa sono gli ID e le classi?

ID e classi giocano un ruolo fondamentale nel processo di stile CSS. Come gli elementi HTML, CSS ID e classi sono usati come selettori in una dichiarazione CSS. Però, classi e ID avere la precedenza su un elemento HTML.

La regola generale nei CSS è che l'ultima dichiarazione di stile che aggiungi a un file sovrascriverà quelle che c'erano prima. Pertanto, se ci sono due dichiarazioni con an h2 selector in un file CSS, la dichiarazione aggiunta per ultima sovrascrive quelle che erano presenti prima.

Tuttavia, se questo h2 l'elemento ha an ID utilizzato come selettore in una dichiarazione CSS, indipendentemente dalla sua posizione (prima o dopo) rispetto a una dichiarazione CSS che ha il h2 elemento come selettore, la preferenza di stile nel ID La dichiarazione avrà sempre la precedenza sull'elemento. In breve, an ID sovrascriverà altri selettori di stile.

È importante ricordare che in una dichiarazione CSS, ID iniziano con un numero e le lezioni iniziano con un punto. La differenza più significativa tra an ID e un classe è quello un? ID è unico, mentre a classe può essere duplicato. Ad esempio, una raccolta di simili i tag possono essere assegnati allo stesso modo classe nome; in ogni caso, il ID di ciascuna il tag deve essere univoco.

Esplorare i diversi tipi di selettori

Esistono tre tipi fondamentali di selettori: singolo, multiplo e annidato. Finora, questo articolo ha ampiamente trattato i singoli selettori.

Quando usi i CSS, ci saranno casi in cui desideri elementi diversi in posizioni diverse su a pagina web per avere uno stile simile che è diverso dallo stile generale applicato all'intera pagina web. In questi casi, sarà utile sapere come utilizzare più selettori.

Esempio di modello HTML di base

Accoglienza

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architetto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Di

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architetto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Titolo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corruzione
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?







Titolo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corruzione
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?

Se osservi attentamente il file HTML sopra, vedrai la dinamica che esiste tra ID e classi. In riferimento al file sopra, se vuoi applicare lo stesso stile al di sezione e gli articoli solo sulla pagina web, il seguente codice CSS realizzerà questo.

Utilizzo di più selettori Esempio

#Informazioni su, .contenuto{
colore bianco;
colore di sfondo: ciano scuro;
}

Quando si utilizzano più selettori, separare sempre ciascun selettore utilizzando una virgola. L'esempio sopra ha due selettori, an ID e un classe. Se la virgola che segue diID è mancante, la dichiarazione CSS non verrà eseguita.

Tornando all'esempio di modello HTML di base sopra, ce ne sono due tag presenti, uno nella sezione di benvenuto e l'altro nella sezione delle informazioni. Se il tuo obiettivo è prendere di mira solo uno di questi tag, un selettore annidato dovrebbe essere il tuo metodo preferito.

Utilizzo di esempi di selettori nidificati

#Benvenuto p span{
colore rosso;
}

Il selettore nidificato sopra contiene un ID e due elementi HTML. Come puoi vedere dall'esempio sopra, un selettore annidato ti offre la possibilità di scegliere come target un elemento specifico all'interno di un gruppo.

Pertanto, solo il span sezione nel tag del div con il id di benvenuto sarà rivestito nel colore rosso.

Sia che tu stia utilizzando un linguaggio di stile come CSS o un linguaggio di programmazione, dovresti assolutamente sapere come scrivere un commento. I commenti sono essenziali nei progetti a livello aziendale in cui più sviluppatori lavorano insieme ed è anche utile quando si esegue lo sviluppo su piccola scala.

Un commento CSS contiene due barre, due asterischi e una sezione di commento.

/* Ecco come si scrive un commento a riga singola in CSS */

/*
Ecco come scrivi
un commento su più righe
in CSS
*/

Qual è il prossimo?

Questo articolo fornisce i componenti fondamentali dei CSS. Ora puoi utilizzare un'identificazione:

• Uno dei tre metodi di implementazione CSS
• Tutti gli elementi in una dichiarazione CSS
• I tre tipi fondamentali di selettori
• Un commento CSS

Eppure, questo è solo l'inizio. I CSS hanno diversi framework che ti aiuteranno a sviluppare una migliore comprensione del linguaggio. L'unica sfida è decidere quale è la migliore per te.

Tailwind CSS vs. Bootstrap: qual è un framework migliore?

Quando si sceglie un framework CSS è importante trovare quello che soddisfa le proprie esigenze.

Leggi Avanti

Circa l'autore