CSS per aspiranti programmatori – A overview

CSS sta per Cascading Style Sheets.

– Il collegamento in cascata si riferisce al modo in cui i CSS applicano uno stile su un altro.
– I fogli di stile controllano l’aspetto dei documenti Web.

CSS e HTML funzionano mano nella mano:

– HTML ordina la struttura della pagina.
– Il CSS definisce come vengono visualizzati gli elementi HTML.

Per capire i CSS, dovresti già avere una conoscenza di base dell’HTML. I CSS ti consentono di applicare stili specifici a specifici elementi HTML. Il vantaggio principale del CSS è che ti consente di separare lo stile dal contenuto. Usando solo HTML, tutti gli stili e la formattazione sono nella stessa posizione, che diventa piuttosto difficile da mantenere man mano che la pagina cresce. Tutta la formattazione può (e dovrebbe) essere rimossa dal documento HTML e archiviata in un file CSS separato. L’utilizzo di uno stile in linea è uno dei modi per inserire un foglio di stile. Con uno stile in linea, uno stile unico viene applicato a un singolo elemento. Per utilizzare uno stile in linea, aggiungi l’attributo style al tag pertinente. L’esempio seguente mostra come creare un paragrafo con uno sfondo grigio e testo bianco:

<p style = “color: white; background-color: gray;”>
Questo è un esempio di stile in linea.
</ P>

L’attributo style può contenere qualsiasi proprietà CSS.

Gli stili interni sono definiti all’interno dell’elemento <style>, all’interno della sezione head di una pagina HTML.

Ad esempio, il codice seguente definisce tutti i paragrafi:

<code>
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
</code>

Tutti i paragrafi hanno un carattere bianco e uno sfondo grigio. Un foglio di stile interno può essere usato se una singola pagina ha uno stile unico. Con questo metodo, tutte le regole di stile sono contenute in un singolo file di testo, che viene salvato con l’estensione .css. Questo file CSS viene quindi referenziato nell’HTML usando il tag <link>. L’elemento <link> entra nella sezione head.

Ecco un esempio:

<code>
<head>
<link rel=”stylesheet” href=”example.css”>
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
</code>

e il css:

<code>
p {
color:white;
background-color:gray;
}
</code>

Entrambi i percorsi relativi e assoluti possono essere utilizzati per definire l’href per il file CSS. Nel nostro esempio, il percorso è relativo, poiché il file CSS si trova nella stessa directory del file HTML. Il CSS è composto da regole di stile che il browser interpreta e quindi si applica agli elementi corrispondenti nel documento. Una regola di stile ha tre parti: selettore, proprietà e valore. Ad esempio, il colore del titolo può essere definito come:

h1 { color: orange; }

Il selettore punta all’elemento HTML che desideri applicare allo stile. Il blocco di dichiarazione contiene una o più dichiarazioni, separate da punti e virgola. Ogni dichiarazione include un nome di proprietà e un valore, separati da due punti. I selettori più comuni e facili da capire sono i selettori di tipo. Questo selettore seleziona i tipi di elementi nella pagina.

Ad esempio, per indirizzare tutti i paragrafi sulla pagina:

p {
color: red;
font-size: 130%;
}

Una dichiarazione CSS termina sempre con un punto e virgola ei gruppi di dichiarazione sono circondati da parentesi graffe. I selettori di id consentono di applicare uno stile a un elemento HTML con attributo id, indipendentemente dalla loro posizione nell’albero del documento. Ecco un esempio di un selettore di ID:

L’HTML:

<code>

This paragraph is in the intro section.

<p> This paragraph is not in the intro section.</p>
</code>

il css:

#intro {
color: white;
background-color: gray;
}

Per selezionare un elemento con un ID specifico, utilizzare un carattere hash e quindi seguirlo con l’id dell’elemento. I selettori di classe funzionano in modo simile. La principale differenza è che gli ID possono essere applicati solo una volta per pagina, mentre le classi possono essere utilizzate tutte le volte in una pagina secondo necessità. Nell’esempio seguente, entrambi i paragrafi con la “prima” classe saranno interessati dal CSS:

<code>

This is a paragraph

 

This is the second paragraph.

 

<p class=”first”> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
</code>

e il css:

.first {font-size: 200%;}

Per selezionare elementi con una classe specifica, usa un carattere punto, seguito dal nome della classe.
NON avviare un nome di classe o ID con un numero! Questi selettori vengono utilizzati per selezionare elementi che sono discendenti di un altro elemento. Quando si selezionano i livelli, è possibile selezionare tutti i livelli in profondità necessari. Ad esempio, per indirizzare solo gli elementi <em> nel primo paragrafo della sezione “intro”:

<code>

This is a paragraph.

 

This is the second paragraph.

 

<p class=”first”> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
</code>

e il css:

#intro .first em {
color: pink;
background-color:gray;
}

Di conseguenza, saranno interessati solo gli elementi selezionati. Il selettore discendente corrisponde a tutti gli elementi che discendono da un elemento specificato. I commenti sono usati per spiegare il tuo codice e possono aiutarti quando modifichi il codice sorgente in seguito. I commenti sono ignorati dai browser. Un commento CSS assomiglia a questo: / * Il commento va qui * /

Esempio:

p {
color: green;
/* This is a comment */
font-size: 150%;
}

I commenti possono anche estendersi su più righe. L’aspetto finale di una pagina Web è il risultato di diverse regole di stile. Le tre principali fonti di informazioni di stile che formano una cascata sono:

– Il foglio di stile creato dall’autore della pagina
– Gli stili di default del browser
– Stili specificati dall’utente

CSS è l’acronimo di Cascading Style Sheets. L’ereditarietà si riferisce al modo in cui le proprietà fluiscono attraverso la pagina. Un elemento figlio di solito assume le caratteristiche dell’elemento genitore se non diversamente definito.

Per esempio:

<code>
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
</code>

Poiché il tag di paragrafo (elemento figlio) si trova all’interno del tag body (elemento padre), assume qualsiasi stile assegnato al tag body.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...