CSS è un linguaggio di styling utilizzato per modificare l'aspetto delle pagine Web. È tra le tecnologie più importanti che vengono utilizzate per costruire una pagina web. Ora ti stai chiedendo come CSS governa lo stile? BENE! Il CSS lo fa assicurando che come gli elementi appariranno su una pagina web come il loro colore di testo, il colore di sfondo, lo stile dei caratteri, ecc. Pertanto, è necessario seguire una struttura appropriata per scrivere un codice CSS efficace.

Questo articolo presenterà una guida passo-passo per capire come è strutturato CSS?

• la sintassi di base del CSS.
• Come implementare CSS su un documento HTML.
• Come lavorare con i selettori CSS seguiti dalla specificità del selettore.
• Spazi bianchi in CSS.
• Commenti in CSS.

Cominciamo con la sintassi di CSS.

Sintassi di CSS

La sintassi di base del CSS include un selettore insieme al suo blocco di dichiarazione. Il blocco della dichiarazione è costituito da due cose che.e. una proprietà CSS con il suo valore.

Nella figura sopra, P è un selettore che punta a un paragrafo dell'elemento HTML, il colore è una proprietà CSS e il verde è il valore assegnato alla proprietà del colore.

Come applicare CSS al documento HTML

CSS può essere applicato a qualsiasi documento HTML in tre modi i.e. Utilizzando stili in linea, utilizzando un foglio di stile interno o fogli di stile esterno. Questo articolo spiegherà il funzionamento di tutti e tre i metodi di stile con l'aiuto di esempi.

CSS in linea

Il metodo in linea in linea è più comunemente utilizzato per implementare uno stile unico su un singolo elemento. Quindi, dobbiamo utilizzare l'attributo "stile" in un elemento HTML per implementare qualsiasi proprietà CSS all'elemento specificato.

Esempio

L'esempio seguente implementa lo stile inline su

elemento:

CSS in linea

Il codice sopra imposta il colore del testo come rosso, il colore di sfondo come blu e allinea il testo al centro:

CSS interno

Il metodo in stile CSS interno specifica lo stile nella tag e nella sezione della testa. Viene utilizzato per implementare uno stile specifico sull'intera pagina.

Esempio Questo esempio descrive un foglio di stile interno per tutti i

elementi

CSS interno

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

L'output mostra che lo stile specificato nell'elemento di stile implementato su tutti i

elementi:

CSS esterno

Come suggerisce il nome stesso, un foglio di stile esterno è un file CSS separato che può essere utilizzato per lo styling dell'intero sito Web. In questo caso, il riferimento del file CSS esterno verrà aggiunto al file HTML.

Esempio Questo esempio definisce stili diversi per vari elementi HTML e questi stili saranno implementati utilizzando un foglio di stile esterno.

Html

Il file HTML include un collegamento a un file CSS esterno:

CSS esterno

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

CSS

H2
Colore: oro;
Background-color: nero;

P
colore arancione;
Background-color: Seagreen;
Testo-align: centro;

Il codice sopra produrrà il seguente output:

Concludiamo ciò che abbiamo imparato in questa sezione, usa i CS in linea solo se devi modellare solo alcuni elementi HTML, in linea non è considerato un buon approccio perché in caso di manutenzione forse devi modificare più cose per uno stile. Usa lo stile interno per i siti Web di una pagina, tuttavia quando si lavora su un ampio sito Web che ha più di una pagina, quindi utilizzare un foglio di stile esterno.

Selettori CSS

I selettori vengono utilizzati target Gli elementi HTML che si desidera modellare e ci sono più tipi di selettori CSS come:

• CSS Selettore degli elementi bersaglio gli elementi HTML in base al loro nome.
• CSS Selettore ID bersaglio gli elementi HTML in base al loro ID.
• CSS Selettore di classe bersaglio l'elemento HTML in base a un attributo di classe.
• CSS Selettore universale bersaglio tutti gli elementi presenti sulla pagina.

Esempio Lo stile del codice di seguito dà diversi elementi HTML i.e. H2 e P utilizzando il selettore elementi, il selettore di classe e il selettore ID rispettivamente.

Html

H2 usando il selettore degli elementi

paragrafo usando il selettore di classe

Paragrafo usando il selettore ID

CSS

H2
Background-color: nero;
Colore: Goldenrod;
Testo-align: centro;

.stile
Background-color: nero;
Colore: verde;
Testo-align: centro;

#style1
Background-color: nero;
colore rosso;
Testo-align: centro;

Otterremo il seguente output:

Specificità

A volte si verifica uno scontro.e. Due selettori/stili che mirano allo stesso elemento HTML cosa accadrà in tal caso e quale selettore otterrà la preferenza. BENE! Abbiamo una regola generale per la specificità

• !Importante ha una specificità più elevata, quindi prevaluterà tutto
• In linea ha la seconda specificità più alta, quindi può sovrascrivere tutto tranne il !importante
• Il selettore ID ha una specificità maggiore tra gli altri selettori ma inferiore a !importante e in linea
• Next Comes Class Selector, Attributi Selector e Pseudo-Class
• Element Selector e Pseudo-Elements
• Il selettore universale ha la più bassa specificità
• Se la stessa regola viene ripetuta in un foglio esterno, l'ultimo verrà implementato

Comprendiamo la specificità con un esempio:

Esempio L'esempio indicato di seguito spiegherà il concetto di specificità.

Html

Benvenuti in Linuxhint.com

Esempio di specificità

CSS

P
colore arancione !importante;

#style1
colore rosso;

.stile
Colore: verde;

P
colore blu;

H1
colore blu;

H1
Colore: verde;

L'output sarà:

Nell'esempio sopra abbiamo osservato i seguenti punti:

• IL

  L'elemento è mirato da !Selettore importante, ID, classe ed elementi ma il

  L'elemento è disegnato secondo il !importante che lo dimostra !importante ha la massima specificità.

• Esistono due diversi selettori di elementi per definire due stili diversi per il

  elemento, il selettore dell'elemento che arriva alla fine ottiene la priorità.

Per una migliore comprensione, mescolare l'ordine dei selettori e osservare la differenza!

Spazi bianchi in CSS

In CSS i browser ignorano gli spazi bianchi, tuttavia l'uso corretto degli spazi bianchi può migliorare la leggibilità del codice.

Esempio: Questo esempio spiega come gli spazi bianchi/ la riga aumentano la leggibilità del codice:

Html

H2 usando il selettore degli elementi

Esempio di specificità

CSS

.stile
Background-color: nero; Colore: verde; Testo-align: centro;

#style1
Background-color: nero;
colore rosso;
Testo-align: centro;

Nel selettore di classe, tutto il codice è scritto nella stessa riga mentre nel selettore ID scriviamo ogni proprietà su una nuova riga. Spazi bianchi/rotture di riga aumentano la leggibilità del codice. L'output verifica che al browser non importa come hai scritto il codice e entrambi i selettori eseguiti correttamente:

Commenti in CSS

In CSS tutte le sezioni commentate saranno racchiuse all'interno di "/*" e "*/". Tutto ciò che arriva nei commenti sarà trascurato dal browser. Alcuni dettagli aggiuntivi possono essere aggiunti nei commenti per comprendere il codice.

Esempio Questo esempio ha aggiunto alcuni commenti che ci aiuteranno a capire il codice.

Html

Primo paragrafo

Secondo paragrafo

CSS

/* selettore di classe*/
.stile
Background-color: nero;
colore arancione;
Testo-align: centro;

/* Selettore id*/
#style1
Background-color: nero;
colore rosso;
Testo-align: centro;

Il codice sopra genera il seguente output:

L'output verifica che i commenti forniscano una migliore comprensione del codice senza influire sui risultati.

Conclusione

La struttura di base di CSS include la sintassi di base della selezione dell'elemento HTML utilizzando i selettori CSS e lo styling dell'elemento selezionato usando le proprietà CSS.CSS può essere implementato in un file HTML in tre modi i.e. Styling in linea per impostare lo stile per un elemento specifico, lo stile interno utilizzando il tag e l'aggiunta di file CSS esterno.

Questo articolo discute tutte le basi per strutturare un file CSS. A partire dalla sintassi di base del CSS e successivamente, spiega i diversi tipi di selettori CSS e CSS. Inoltre, spiega il concetto di specificità in CSS e conclude che tra tutti i selettori ID selettori CSS ha una maggiore specificità. Infine, spiega il significato dei commenti e degli spazi bianchi in CSS.