10 semplici esempi di codice CSS che puoi imparare in 10 minuti
Dopo aver iniziato a dilettarti in HTML, probabilmente sarai interessato ad aggiungere più potenza alle tue pagine web. CSS è il modo migliore per farlo. CSS consente di applicare le modifiche su tutta la pagina senza fare affidamento sullo stile in linea.
Ecco alcuni semplici esempi CSS per mostrarti come apportare alcune modifiche di base allo stile sulla tua pagina web.
1. Codice CSS di base per una facile formattazione dei paragrafi
Lo stile con CSS significa che non è necessario specificare uno stile ogni volta che si crea un elemento. Puoi solo dire "tutti i paragrafi dovrebbero avere questo stile particolare" e sei a posto.
Supponiamo che tu voglia che ogni paragrafo (<p>, uno dei tag HTML che tutti dovrebbero conoscere ) sia leggermente più grande del solito. E testo grigio scuro, anziché nero. Il codice CSS per questo è:
p { font-size: 120%; color: dimgray; } Semplice! Ora, ogni volta che il browser esegue il rendering di un paragrafo, il testo erediterà la dimensione (120 percento del normale) e il colore ("dimgray").
Se sei curioso di sapere quali colori di testo semplice puoi usare, dai un'occhiata a questo elenco di colori CSS da Mozilla.
2. Cambia lettera maiuscola
Vuoi creare una designazione per i paragrafi che dovrebbero essere in maiuscolo? Un esempio CSS per questo sarebbe:
p.smallcaps { font-variant: small-caps; } Per creare un paragrafo interamente in maiuscolo, utilizzeremo un tag HTML leggermente diverso. Ecco come appare:
<p class="smallcaps">Your paragraph here.</p> L'aggiunta di un punto e il nome di una classe a un elemento specifica un sottotipo di quell'elemento definito da una classe. Puoi farlo con testo, immagini, collegamenti e qualsiasi altra cosa.
Se vuoi cambiare il caso di un set di testo in un caso specifico, usa questi esempi CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; L'ultimo mette in maiuscolo la prima lettera di ogni frase.
3. Cambia i colori dei link
I cambiamenti di stile non sono limitati ai paragrafi. Esistono quattro diversi colori a cui è possibile assegnare un collegamento: il colore standard, il colore visitato, il colore al passaggio del mouse e il colore attivo (che viene visualizzato mentre si fa clic su di esso). Ecco il codice CSS per quelli:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; } Con i collegamenti, ogni "a" è seguita da due punti, non da un punto.
Ognuna di queste dichiarazioni cambia il colore di un collegamento in un contesto specifico. Non è necessario cambiare la classe di un collegamento per farlo cambiare colore.
4. Rimuovere i collegamenti sottolineati
Mentre il testo sottolineato indica chiaramente un collegamento, a volte sembra più bello scartarlo. Ciò si ottiene con l'attributo "text-decoration". Questo esempio CSS mostra come rimuovere le sottolineature sui collegamenti:
a { text-decoration: none; } Qualsiasi cosa con il tag link ("a") rimarrà non sottolineata. Vuoi sottolinearlo quando l'utente ci passa sopra? Aggiungi semplicemente:
a:hover { text-decoration: underline; } È inoltre possibile aggiungere questa decorazione di testo ai collegamenti attivi per assicurarsi che la sottolineatura non scompaia quando si fa clic sul collegamento.
5. Crea un pulsante di collegamento con codice CSS
Vuoi attirare più attenzione sul tuo link? Un pulsante di collegamento è un ottimo modo per procedere. Questo richiede alcune righe in più, ma le esamineremo singolarmente:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } L'inclusione di tutti e quattro gli stati dei collegamenti garantisce che il pulsante non scompaia quando un utente lo posiziona o fa clic su di esso. Puoi anche impostare diversi parametri per il passaggio del mouse e i collegamenti attivi, ad esempio cambiando il pulsante o il colore del testo.
Il colore di sfondo è impostato con il colore di sfondo e il colore del testo con il colore. L'imbottitura definisce le dimensioni della casella: il testo è imbottito di 10 pixel in verticale e 25 pixel in orizzontale.
L'allineamento del testo garantisce che il testo sia visualizzato al centro del pulsante, anziché su un lato. La decorazione del testo, come abbiamo visto nell'ultimo esempio, rimuove la sottolineatura.
Il codice CSS "display: inline-block" è un po 'più complicato. In breve, ti permette di impostare l'altezza e la larghezza dell'oggetto. Assicura inoltre che inizi una nuova riga quando viene inserita.
6. Creare una casella di testo
Un semplice paragrafo non è molto eccitante. Se vuoi evidenziare un elemento sulla tua pagina, potresti voler aggiungere un bordo. Ecco come farlo con una stringa di codice CSS:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Questo è semplice. Crea un bordo viola solido, largo cinque pixel, attorno a qualsiasi paragrafo di classe importante. Per fare in modo che un paragrafo erediti queste proprietà, dichiaralo così:
<p class="important">Your important paragraph here.</p> Funzionerà indipendentemente dalla grandezza del paragrafo.
Esistono molti stili di bordo diversi che è possibile applicare; invece di "solido", prova "punteggiato" o "doppio". Nel frattempo, la larghezza può essere "sottile", "medio" o "spesso". Il codice CSS può persino definire lo spessore di ciascun bordo individualmente, in questo modo:
border-width:
5px 8px 3px 9px; Ciò si traduce in un bordo superiore di cinque pixel, un bordo destro di otto, un fondo di tre e una dimensione del bordo sinistro di nove pixel.
7. Allinea al centro degli elementi
Per un compito molto comune, centrare elementi con codice CSS è sorprendentemente poco intuitivo. Una volta che lo hai fatto alcune volte, diventa molto più facile. Hai un paio di modi diversi per centrare le cose.
Per un elemento a blocchi (di solito un'immagine), utilizzare l'attributo margin:
.center { display: block; margin: auto; } Ciò garantisce che l'elemento sia visualizzato come un blocco e che il margine su ciascun lato sia impostato automaticamente. Se vuoi centrare tutte le immagini su una determinata pagina, puoi anche aggiungere "margin: auto" al tag img:
img { margin: auto; } Per sapere perché funziona in questo modo, dai un'occhiata alla spiegazione del modello di scatola CSS su W3C .
E se volessimo centrare il testo con i CSS? Usa questo CSS di esempio:
.centertext { text-align: center; } Vuoi usare la classe "centertext" per centrare il testo in un paragrafo? Aggiungi semplicemente quella classe al tag <p>:
<p class="centertext">This text will be centered.</p> 8. Esempi CSS per la regolazione dell'imbottitura
L'imbottitura di un elemento specifica quanto spazio dovrebbe essere su ciascun lato. Ad esempio, se aggiungi 25 pixel di riempimento nella parte inferiore di un'immagine, il seguente testo verrà spostato di 25 pixel verso il basso. Molti elementi possono avere un'imbottitura, non solo immagini.
Supponiamo che tu voglia che ogni immagine abbia 20 pixel di riempimento sui lati sinistro e destro e 40 pixel in alto e in basso. L'esecuzione più semplice è:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } C'è un codice CSS abbreviato che possiamo usare per presentare tutte queste informazioni in una sola riga:
img { padding: 40px 25px 40px 25px; } Questo imposta le imbottiture superiore, destra, inferiore e sinistra sul numero destro. Grazie al solo utilizzo di due valori (40 e 25) possiamo renderlo ancora più breve:
img { padding: 40px 25px } Quando si utilizzano solo due valori, il primo valore viene impostato per la parte superiore e inferiore, mentre il secondo sarà sinistro e destro.
9. Evidenzia righe della tabella
Il codice CSS rende le tabelle molto più belle delle griglie predefinite. L'aggiunta di colori, la regolazione dei bordi e la risposta del tuo tavolo agli schermi dei dispositivi mobili sono facili. Vedremo solo un fantastico effetto qui: evidenziare le righe della tabella quando ci si passa sopra con il mouse.
Ecco il codice che ti servirà per questo:
tr:hover { background-color: #ddd; } Ora ogni volta che passi con il mouse sopra una cella della tabella, quella riga cambierà colore. Per vedere alcune delle altre cose interessanti che puoi fare, dai un'occhiata alla pagina del W3C su fantasiose tabelle CSS .
10. Spostamento delle immagini tra trasparente e opaco
Il codice CSS può aiutarti a fare cose interessanti anche con le immagini. Ecco un esempio CSS per visualizzare immagini con un'opacità inferiore alla piena, in modo che appaiano leggermente "imbiancate". Quando passi il mouse sulle immagini, vengono visualizzate in piena opacità:
img { opacity: 0.5; filter: alpha(opacity=50); } L'attributo "filtro" fa la stessa cosa di "opacità", ma Internet Explorer 8 e precedenti non riconoscono la misurazione dell'opacità. Per i browser più vecchi, è una buona idea includerlo.
Ora che le immagini sono leggermente trasparenti, le porteremo completamente opache al passaggio del mouse:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } 10 esempi CSS con codice sorgente
Con questi esempi di codice CSS, dovresti avere un'idea molto migliore di come funziona CSS. I modelli CSS possono aiutare, ma comprendere gli elementi grezzi è di vitale importanza.
I 10 semplici esempi di codice CSS che abbiamo visto:
- Facile formattazione dei paragrafi
- Cambia la lettera maiuscola
- Cambia i colori dei link
- Rimuovi collegamenti sottolinea
- Crea un link buuton
- Crea una casella di testo
- Allineamento centrale elementi
- Regola l'imbottitura
- Evidenzia le righe della tabella
- Rendi opache le immagini
Esaminandoli nuovamente, noterai diversi schemi che puoi applicare al codice futuro. Ed è allora che sai che hai davvero iniziato a diventare un maestro CSS. Ma ricordare che può essere difficile. Potresti voler aggiungere questa pagina ai segnalibri per riferimento futuro.
Per un modo rapido per ricordare alcune delle cose che hai imparato qui, assicurati di consultare il nostro cheat sheet sulle proprietà CSS3 .
Leggi l'articolo completo: 10 semplici esempi di codice CSS che puoi imparare in 10 minuti
