Css le basi...

7/25/2013 09:30:00 AM -Luigi23- 1 Comments

Pre-requisiti per seguire il corso:
- Conoscere l' Html
- Saper gestire i Browser




Il primo articolo riguardante questo linguaggio è stato Css lo stile per la tua pagina, ma avevo solo accennato, le sue caratteristiche principali.
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>
  <head>
    <style type="text/css">
      Codice CSS
    </style>
  </head>
  <body>
  </body>
</html>
Tutto il codice inserito nel tag "style" è trattato come linguaggio CSS.
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>
  <head>
  </head>
  <body>
    <p>Testo 1</p>
    <p>Testo 2</p>
    <p>Testo 3</p>
  </body>
</html>
Se noi volessimo modificare tutti i tag di tipo "p" a nostro piacimento? Vediamo come fare:
<html>
  <head>
    <style type="text/css">
      {
         color:red;
         }
    </style>
  </head>
  <body>
    <p>Testo 1</p>
    <p>Testo 2</p>
    <p>Testo 3</p>
  </body>
</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.
Ora però vediamo meglio la sintassi, nella prima riga del codice CSS abbiamo:
{
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?

1 commento:

  1. Wow, fantastic blog layout! How long have you been blogging for?
    you 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)

    RispondiElimina

Grazie per il tuo feedback!