10 semplici esempi di codice CSS che puoi imparare in 10 minuti

10 semplici esempi di codice CSS che puoi imparare in 10 minuti

Una volta che hai iniziato a dilettarti con l'HTML, probabilmente sarai interessato ad aggiungere più impatto visivo alle tue pagine web. CSS è il modo migliore per farlo. CSS ti consente di applicare modifiche all'intera pagina senza fare affidamento sullo stile in linea.





Ecco alcuni semplici esempi CSS per mostrarti come apportare alcune modifiche di stile di base alla tua pagina web.



1. Codice CSS di base per una facile formattazione dei paragrafi

Lo stile con CSS significa che non devi specificare uno stile ogni volta che crei un elemento. Puoi semplicemente dire 'tutti i paragrafi dovrebbero avere questo particolare stile' e sei a posto.





Diciamo che vuoi ogni paragrafo (

, uno dei tag HTML che tutti dovrebbero conoscere) per essere leggermente più grande del solito. E con testo grigio scuro, anziché nero.

Imparentato: Il cheat sheet HTML



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 in testo semplice puoi usare, dai un'occhiata a questo Elenco colori CSS di Mozilla.

2. Esempio CSS per cambiare carattere

Vuoi creare una designazione per i paragrafi che dovrebbero essere in maiuscoletto? Un esempio CSS per questo sarebbe:



p.smallcaps { font-variant: small-caps; }

Per creare un paragrafo interamente in maiuscoletto, usa un tag HTML leggermente diverso. Ecco come appare:

Your paragraph here.

L'aggiunta di un punto e di un nome di 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 modificare un insieme di testo in un caso specifico, usa questi esempi di codice CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

L'ultimo mette in maiuscolo la prima lettera di ogni frase.

Le modifiche allo stile non sono limitate ai paragrafi. Ci sono quattro diversi colori che possono essere assegnati a un collegamento: il suo colore standard, il suo colore visitato, il suo colore al passaggio del mouse e il suo colore attivo (che mostra mentre fai clic su di esso). Usa questo codice CSS di esempio:

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 modificare la classe di un collegamento per farlo cambiare colore.

Sebbene il testo sottolineato indichi chiaramente un collegamento, a volte sembra più carino eliminare quella sottolineatura. Ciò si ottiene con l'attributo 'text-decoration'. Questo esempio CSS mostra come rimuovere le sottolineature sui collegamenti:

a { text-decoration: none; }

Tutto ciò che contiene il tag link ('a') rimarrà non sottolineato. Vuoi sottolinearlo quando l'utente ci passa sopra? Aggiungi semplicemente:

a:hover { text-decoration: underline; }

Puoi anche aggiungere questa decorazione di testo ai collegamenti attivi per assicurarti che la sottolineatura non scompaia quando si fa clic sul collegamento.

Vuoi attirare più attenzione sul tuo link? Un pulsante di collegamento è un ottimo modo per farlo. Questo richiede qualche riga in più:

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; }

Spieghiamo questo codice di esempio CSS.

L'inclusione di tutti e quattro gli stati dei collegamenti garantisce che il pulsante non scompaia quando un utente passa con il mouse o fa clic su di esso. Puoi anche impostare parametri diversi per il passaggio del mouse e i collegamenti attivi, ad esempio cambiando il pulsante o il colore del testo.

Il colore di sfondo viene impostato con background-color e il colore del testo con color. Il riempimento definisce la dimensione del riquadro --- il testo viene riempito di 10 pixel verticalmente e 25 pixel orizzontalmente.

L'allineamento del testo garantisce che il testo venga visualizzato al centro del pulsante, anziché su un lato. La decorazione del testo, come nell'ultimo esempio, rimuove la sottolineatura.

come accedere a Internet sul laptop ovunque

Il codice CSS 'display: inline-block' è un po' più complicato. In breve, consente di impostare l'altezza e la larghezza dell'oggetto. Assicura inoltre che inizi una nuova riga quando viene inserita.

6. Codice di esempio CSS per la creazione di una casella di testo

Un paragrafo semplice non è molto eccitante. Se vuoi evidenziare un elemento sulla tua pagina, potresti voler aggiungere un bordo. Ecco come farlo con una stringa di semplice 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 in questo modo:

Your important paragraph here.

Questo funzionerà indipendentemente da quanto grande sia il paragrafo.

Ci sono molti stili di bordo diversi che puoi applicare; invece di 'solido', prova 'punto' o 'doppio'. Nel frattempo, la larghezza può essere 'sottile', 'media' o 'spessa'. Il codice CSS può anche 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 bordo inferiore di tre e una dimensione del bordo sinistro di nove pixel.

7. Allinea al centro gli elementi con il codice CSS di base

Per un compito comune, centrare gli elementi con il codice CSS è sorprendentemente poco intuitivo. Dopo averlo fatto un paio di volte, però, diventa molto più facile. Hai un paio di modi diversi per centrare le cose.

Per un elemento di blocco (di solito un'immagine), usa l'attributo margin:

.center { display: block; margin: auto; }

Ciò garantisce che l'elemento venga visualizzato come un blocco e che il margine su ciascun lato venga 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 al Spiegazione del modello di scatola CSS al W3C .

Ma cosa succede se vuoi 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 a

etichetta:

This text will be centered.

8. Esempi CSS per la regolazione del riempimento

Il riempimento di un elemento specifica quanto spazio dovrebbe essere su ciascun lato. Ad esempio, se aggiungi 25 pixel di riempimento alla parte inferiore di un'immagine, il testo seguente verrà spostato di 25 pixel verso il basso. Molti elementi possono avere padding, 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 del codice CSS di base per questo è:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

C'è un'istruzione CSS più breve, tuttavia, che presenta tutte queste informazioni in una singola riga:

img { padding: 40px 25px 40px 25px; }

Questo imposta i padding superiore, destro, inferiore e sinistro sul numero corretto. Grazie all'utilizzo di soli due valori (40 e 25) puoi renderlo ancora più breve:

img { padding: 40px 25px }

Quando si utilizzano solo due valori, il primo valore è impostato per l'alto e il basso, mentre il secondo sarà a sinistra ea destra.

9. Evidenzia le righe della tabella con la codifica CSS

Il codice CSS rende le tabelle molto più belle delle griglie predefinite. Aggiungere colori, regolare i bordi e rendere il tuo tavolo reattivo agli schermi mobili è tutto facile. Questo semplice esempio CSS mostra come evidenziare le righe della tabella quando ci passi sopra con il mouse.

tr:hover { background-color: #ddd; }

Ora ogni volta che passi il mouse su una cella della tabella, quella riga cambierà colore. Per vedere alcune delle altre cose interessanti che puoi fare, dai un'occhiata a Pagina W3C su fantasiose tabelle CSS .

10. Esempio di CSS per spostare le immagini tra trasparente e opaco

Il codice CSS può aiutarti a fare cose interessanti anche con le immagini. Ecco un esempio CSS per visualizzare le immagini con un'opacità inferiore alla piena, in modo che appaiano leggermente 'sbiancate'. Quando passi il mouse sulle immagini, vengono portate alla massima opacità:

img { opacity: 0.5; filter: alpha(opacity=50); }

L'attributo 'filtro' fa la stessa cosa di 'opacità', ma Internet Explorer 8 e versioni precedenti non riconoscono la misurazione dell'opacità. Per i browser meno recenti, è una buona idea includerlo.

Ora che le immagini sono leggermente trasparenti, puoi renderle 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 funzionano i CSS. Modelli CSS può aiutare, ma capire gli elementi grezzi è vitale.

Questi 10 semplici esempi di codice CSS hanno riassunto:

  1. Facile formattazione dei paragrafi
  2. Cambia lettera maiuscola
  3. Cambia i colori dei link
  4. Rimuovi le sottolineature dei collegamenti
  5. Crea un pulsante di collegamento
  6. Crea una casella di testo
  7. Allineamento centrale elementi
  8. Regola l'imbottitura
  9. Evidenzia le righe della tabella
  10. Rendi opache le immagini

Riesaminandoli di nuovo, noterai diversi modelli che puoi applicare al codice futuro. Ed è allora che sai che hai davvero iniziato a diventare un maestro CSS. Ma ricordarlo può essere difficile. Potresti voler aggiungere questa pagina ai segnalibri per riferimento futuro.

Condividere Condividere Tweet E-mail Il cheat sheet delle proprietà essenziali di CSS3

Padroneggia la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3.

Leggi Avanti Argomenti correlati
  • Programmazione
  • Web design
  • CSS
  • Scripting
Circa l'autore Christian Cawley(1510 articoli pubblicati)

Deputy Editor for Security, Linux, DIY, Programming e Tech Explained e Really Utile Podcast producer, con una vasta esperienza nel supporto di desktop e software. Collaboratore della rivista Linux Format, Christian è un armeggiatore di Raspberry Pi, un amante dei Lego e un fan dei giochi retrò.

Altro da Christian Cawley

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti