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?
Wow, fantastic blog layout! How long have you been blogging for?
RispondiEliminayou made blogging look easy. The overall look of your web site
is fantastic, as well as the content!
My webpage ... divorce costs (www.google.ca)