Iniziamo il nostro blog con questa questa piccola introduzione al css3 il linguaggio di programmazione web che ci serve per disegnare il nostro sito.
CSS3: oggi si sente parlare costantemente di CSS all’interno dei nostri siti html o dinamici, a prescindere da quale CMS (Content management system) si intenda utilizzare, sia che parliamo di quello più utilizzato WordPress o di altri come Drupal, Prestashop e altri.
Il CSS3 è la nuova versione del CSS (Cascading Style Sheets) più evoluto e con il quale possiamo realmente formattare lato utente tutta la parte grafica del nostro sito. Grazie a questo linguaggio di programmazione web non abbiamo più bisogno di utilizzare immagini per creare tasti, box colorati, linee e testi.
Come funziona?
Iniziamo dall’inizio: possiamo utilizzarlo sia all’interno di una pagina html o esternamente in un file .css che collegheremo tramite un link (ES: <link rel=”stylesheet” type=”text/css” href=”stile.css”>) da inserire nell’header della nostra pagina.
Nel caso vogliate inserire gli stili css direttamente nella vostra pagina dovrete aggiungere le classi sempre nell’header della pagina. In un file css possono essere create infinite classi e delle stesse possono essere create le versioni per tutti i dispositivi mobile! Comodo no?
Cerchiamo di capire però come agiscono queste classi.
Scrivere il css non è sufficiente a formattare la nostra pagina, sarà necessario marcare ogni elemento presente associando a quest’ultimo la classe css che poi andremo a definire. Ad esempio se vogliamo formattare un testo con un link e farlo vedere ai nostri ospiti come un bottone dovremo semplicemente racchiudere il nostro link nella classe CSS che lo formatta ES: <div class=”formatta-testo”><a href=”#”>IO SONO UN BOTTONE</a></div> dove “formatta-testo” sarà la classe che andremo a definire all’interno del nostro css o nell’header della nostra pagina.
Ecco un esempio di come potremmo formattare il nostro link:
.formatta-testo {
background: #fc0;
text-align: center;
border-radius: 3px;
}
.formatta-testo a {
color:#000000;
padding: 10px 3px;
text-align: center;
text-decoration: none;
border-radius: 3px;
text-trasform: uppercase;
}
Con queste due classi il nostro link apparirà con uno sfondo giallo, gli angoli arrotondati, il testo nero e tutto maiuscolo, una spaziatura interna, il link non sarà sottolineato.
Semplice no?