Scrivere meno codice CSS: più istruzioni su una sola riga

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Il linguaggio CSS è lo standard per la stilizzazione delle pagine Web: non possiamo certo farne a meno e, aprendo un qualsiasi foglio di stile da non creato, possiamo renderci conto di quanto lungo sia il codice, sia pure semplice ed intuitivo da comprendere e ricordare.

Tuttavia, esistono dei sistemi per scrivere meno codice. Una sorta di shortcut se vogliamo, che consentono di scrivere su di una sola riga quel che normalmente scriviamo su almeno 3 o 4 righe.

Ad esempio, stilizziamo il corpo di una pagina applicando uno sfondo:

body
{
    background: #FFFFFF;
    background-image: url(sfondo.gif);
    background-repeat: repeat-x;
    background-position: top;
    background-attachment: fixed;
}

Possiamo scrivere la stessa cosa su di una sola riga:

body
{
    background: #FFFFFF url(sfondo.gif) repeat-x top fixed;
}

risparmiando notevolmente in termini di codice.

Stessa cosa per la formattazione del testo:

p
{
    font-style: normal;
    font-size: 13px;
    font-family: verdana;
}

Possiamo scrivere la stessa cosa su di una sola riga:

p
{
    font: normal 13px; verdana;
}

In fine, possiamo gestire il padding ed il margin di tutti e quattro i lati di un box in un colpo solo. Invece di scrivere:

#box
{
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

possiamo scrivere:

#box
{
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}

ottenendo lo stesso risultato.

NOTA - i quattro valori rappresentano, rispettivamente: top, right, bottom e left del box.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (45.201)

:: Referenze dei fogli di stile Css (41.489)

:: Menu ad effetto mouseover con i Css (38.571)

:: Effetti sui link con i Css (28.316)

:: Testo verticale coi Css (19.486)

:: Angoli smussati in un box coi Css (18.636)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.858)

:: Box con effetto ombra con i CSS3 (15.738)

:: Stilizzare i form Html con i Css (15.416)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.169)

IN EVIDENZA
DOWNLOAD