Le proprietà CSS più comuni

Per sviluppare lo stile del nostro sito web, il linguaggio CSS mette a disposizione numerose proprietà da poter inserire all’interno delle pagine HTML o nei fogli di stile.

Tutte queste proprietà possono essere inserite sia nel tag <style> nell’head della pagina; nell’ attributo style=”” nel caso si vogliamo aggiungere proprietà CSS direttamente ad un oggetto HTML, o in un foglio di stile .css esterno da dover richiamare all’interno della pagina.

Dato che le proprietà disponibili sono parecchie, il mio consiglio è quello di imparare quelle più comuni ed utilizzate, che vedremo qui di seguito in questo articolo, e studiare mano a mano quelle di cui avremo bisogno per creare il nostro sito.

Una lista completa di tutte le proprietà CSS sono disponibili nel sito W3Schools.com

Lista delle proprietà

Di seguito la lista delle proprietà più usate seguiti dai valori possibili, per alcuni tipi di proprietà sono riportati più valori differenti a seconda del caso e dell’utilizzo:

N.B. Il commenti di codice nel CSS si inseriscono all’interno dei simboli: /* commento */

Testo

Le proprietà del testo possono interessare il colore, il font, la grandezza del carattere, la formattazione, ecc. ecc. proprio come un editor di testo.

color: blue;       /* colore testo blu */

color: #000000;    /* colore testo nero in formato RGB */

font-size: 40px;   /* grandezza del font in pixel */

font-style: italic;    /* stile del testo (italic, oblique, normal) */

text-align: center;    /* allineamento del testo (left, center, right) */

line-height       /* altezza della linea di scrittura, non del testo*/

Background

Sfondi colorati o immagini, le proprietà background servono per aggiungere uno sfondo colorato agli oggetti o contenitori, oppure importare un immagine o foto.

background-color: green;       /* sfondo di colore verde */

background-color: #FFFFFF;     /* sfondo colore bianco in formato RGB */

background-image: url("image.jpg");   /* immagine esterna come sfondo */

background-repeat: no-repeat;    /* ripeti immagine (no-repeat, repeat-y repeat-x) */

Esempio background

Codice utilizzato:

<div style=" 
   font-size:20pt; 
   color: white;
   background-color:green; 
   height:200px; 
   width:auto;
   max-width:300px; 
   margin:auto;"> 
          <b>Questo è uno sfondo verde</b>
</div>

Margin & Padding

Le seguenti proprietà determinano i margini ed il padding di un contenitore, oggetto o testo.
La differenza tra margin e padding è che, il primo indica uno distaccamento dell’oggetto verso l’esterno, il secondo verso l’interno (margine dal bordo al testo per esempio).

margin

margin-top: 10 px;      /* margine alto di 10 pixel */

margin-right: 10 px;    /* margine destro di 10 pixel */

margin-bottom: 10 px;   /* margine basso di 10 pixel */

margin-left: 10 px;     /* margine sinistro di 10 pixel */

/* oppure */

margin: 12px 20px 30px 40px;       /* margine alto 12px, destro 20px, basso 30px, sinistro 40px */

 margin: auto;     /* oggetto centrato automaticamente in orizzontale nel contenitore */

padding

padding-top: 20 px;      /* padding alto di 20 pixel */

padding-right: 20 px;    /* padding destro di 20 pixel */

padding-bottom: 20 px;   /* padding basso di 20 pixel */

padding-left: 20 px;     /* padding sinistro di 20 pixel */

/* oppure */

padding: 22px 23px 26px 28px;      /* padding alto 22px, destro 24px, basso 26px, sinistro 28px */

Height & Width

Queste proprietà possono essere utilizzare per indicare la misura di un oggetto, tabella o di un contenitore.

height: 200px;           /* altezza 200 pixel */

width: 400px;            /* larghezza 400 pixel */

width: 50%;              /* larghezza impostata al 50% del contenitore */

max-width: 500px;        /* larghezza massima 500 pixel */

max-height: 500px;       /* altezza massima 500 pixel */

min-width: 500px;        /* larghezza minima 100 pixel */

min-height: 500px;       /* altezza minima 100 pixel */

Overflow

Overflow determina il modo in cui dovrà essere visualizzato un contenitore o sezione, per esempio, visibile, non visibile o a scorrimento:

overflow: visible;      /* contenitore visibile*/

overflow: hidden;       /* contenitore non visibile */

overflow: scroll;       /* finestra con barra scorrimento */

overflow: auto;       /* automatica, simile a scroll ma a scorrimento quanto necessario (in base ala dimensione dello schermo) */

Esempio overflow

Codice utilizzato:

<div style="background-color: #eee;
  width: 250px;
  height: 150px;
  overflow: scroll;
  margin:auto;"> 
<b> Esempio di div Scroll</b>
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis quam tortor. Duis nec lectus mi. Pellentesque interdum lectus tristique quam interdum, id maximus quam porttitor. Ut accumsan quis dui id elementum. Sed ex nunc, scelerisque ac augue quis, fringilla tempus nisl. In faucibus porttitor odio eget aliquam. Duis facilisis dignissim justo, eu hendrerit massa sagittis nec. Suspendisse dictum urna ac congue ultricies. Nam interdum enim et orci auctor ornare. Pellentesque ullamcorper cursus nisi, vel commodo odio luctus et. Aliquam erat volutpat. Suspendisse justo elit, sollicitudin at aliquet tempor, luctus posuere nisi. Cras tincidunt nisi ac nisl viverra vulputate. Donec euismod laoreet felis sit amet rhoncus. Aliquam nec tellus viverra nisi viverra lacinia quis in sem. </p>
</div>

Esercita la scrittura di attributi CSS e HTML con il nostro editor online.

Resta aggiornato per nuove proprietà CSS ed imparare a creare il tuo sito web con l’HTML >>

Iscriviti alla nostra newsletter

Continua con: Classi e ID in CSS

Leggi anche: Guida al CSS

Articoli Recenti

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle