Css le basi...
Pre-requisiti per seguire il corso:
- Conoscere l' Html
- Saper gestire i Browser
In quest'articolo iniziamo a vedere le basi su questo linguaggio...
Inserire un codice CSS in una pagina html
Quando siamo all'interno di una pagina html, possiamo inserire del codice CSS mediante i tag "style".
Questi vanno inseriti nel tag "head" come nell'esempio:
<html>Tutto il codice inserito nel tag "style" è trattato come linguaggio CSS.
<head>
<style type="text/css">
Codice CSS
</style>
</head>
<body>
</body>
</html>
Importante non omettere la stringa type="text/css" che serve ad avvisare al browser che deve eseguire del codice CSS.
Modificare gli elementi della pagina
Consideriamo una pagina html strutturata in questo modo:
<html>Se noi volessimo modificare tutti i tag di tipo "p" a nostro piacimento? Vediamo come fare:
<head>
</head>
<body>
<p>Testo 1</p>
<p>Testo 2</p>
<p>Testo 3</p>
</body>
</html>
<html>Come si vede abbiamo inserito del codice CSS, questo codice non fa altro che far diventare tutto il testo contenuto nei tag "p" di colore rosso.
<head>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<p>Testo 1</p>
<p>Testo 2</p>
<p>Testo 3</p>
</body>
</html>
Ora però vediamo meglio la sintassi, nella prima riga del codice CSS abbiamo:
p {Questa serve a dire al CSS di cosa stiamo parlando, cioè a quale "oggetto" facciamo riferimento, quindi "p" rappresenta l'oggetto e "{" serve a far capire al CSS che si inizia a scrivere codice CSS (meglio se si dice regole); quindi dopo la parentesi graffa si danno le istruzioni su cosa modificare del tag (o dell'oggetto).
La seconda riga è il codice che modifica il tag, questa è formata da una proprietà e da un valore quindi la sintassi è proprietà:valore; non dimenticare mai il punto e virgola serve a far capire al CSS che l'istruzione è terminata!
Quindi il codice:
color:red;É una regola imposta all'elemento, in questo caso specifico il testo contenuto all'interno del tag "p" sarà rosso.
Il testo prima dei due puntini è definito proprietà e quello dopo è definito valore
Quindi la proprietà "color" definisce il colore, che in questo caso sarà rosso poiché il valore dato è "red" (dall'inglese rosso) che è situato dopo i due puntini seguito da un punto e virgola che serve a terminare l'istruzione.
Infine abbiamo un'altra parentesi graffa che chiude la personalizzazione dell'elemento, quindi dopo questa ("}") le istruzioni per il tag "p" non sono valide.
Se questo post ti è stato utile condividilo con gli amici e continua a seguirmi.
Un Saluto e un Abbraccio dal vostro -Luigi23-.
Ti è piaciuto l'articolo?
0 commenti :
Posta un commento