Una volta che hai iniziato a dilettarti in HTML 17 Esempi di codice HTML semplici che puoi imparare in 10 minuti 17 Esempi di codici HTML semplici che puoi imparare in 10 minuti Se conosci i seguenti 17 tag HTML (e gli extra che li accompagnano), Sarai in grado di creare una pagina web di base da zero o modificare il codice creato da un'app come ... Per saperne di più, probabilmente sarai interessato ad aggiungere più potenza alle tue pagine web. Il CSS è il modo migliore per farlo. CSS ti consente di applicare le modifiche su tutta la pagina senza dover utilizzare molti stili HTML incorporati 9 Errori che non dovresti commettere quando costruisci un sito Web 9 Errori che non dovresti creare quando costruisci una pagina Web Questi seguenti errori di codifica HTML sono facili da fare, ma se li allontani prima piuttosto che dopo, la tua pagina avrà un aspetto migliore, sarà più facile da mantenere e funzionerà come vuoi. Leggi di più .
Vedremo come creare un foglio di stile in linea in modo da poter mettere in pratica le tue abilità CSS, quindi passeremo a 10 semplici esempi che ti mostreranno come fare alcune cose basilari. Da lì, la tua immaginazione è il limite!
Se vuoi un'introduzione leggermente più tecnica, assicurati di dare un'occhiata a 5 Baby Steps per imparare i CSS e diventare un Kick-Ass. CSS Sorcerer 5 Passi per imparare CSS e diventare un Kick-Ass CSS Sorcerer 5 Passi per imparare e diventare CSS un Kick-Ass CSS Sorcerer CSS è il singolo cambiamento più importante che le pagine web hanno visto nell'ultimo decennio e ha aperto la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce la struttura semantica ... Per saperne di più.
Foglio di stile in linea
Ogni documento HTML contiene un tag. Quella sezione principale è dove va il tuo foglio di stile CSS in linea. Ecco come sarà:
All of your CSS declarations.Mettilo nella parte superiore del documento, riempilo con il tuo CSS e sei pronto per partire.
1. Formattazione facile dei paragrafi
La cosa bella dello styling con i CSS è che non devi specificare uno stile ogni volta che crei un elemento. Puoi semplicemente dire "tutti i paragrafi dovrebbero avere questo stile particolare" e sei a posto. Ecco un esempio di come potresti farlo.
Diciamo che vuoi ogni paragrafo (questo è tutto con a
Tag HTML Top 11 Tag HTML Ogni proprietario di Blogger e sito Web deve conoscere i 11 tag HTML che ogni blogger e proprietario del sito web devono conoscere Il world wide web conosce molte lingue ed è codificato in diversi linguaggi. L'unica lingua, tuttavia, che può essere trovata dappertutto ed è stata utilizzata sin dall'invenzione delle pagine Web, è la ... Leggi di più) sulla tua pagina per essere leggermente più grande del solito. E grigio scuro, invece che nero. Ecco come lo faresti con i CSS:
p { font-size: 120%; color: dimgray; } Questo è tutto ciò che c'è da fare. Ora, ogni volta che il browser esegue il rendering a
paragrafo, il testo erediterà la dimensione (120 percento del normale) e il colore ("dimgray").
Se sei curioso di sapere quali colori del testo normale puoi usare, dai un'occhiata a questo elenco di colori CSS di Mozilla.
2. Cambia maiuscole / minuscole
Ok, ora che abbiamo visto come modificare ogni paragrafo, vediamo come possiamo essere un po 'più selettivi. Creiamo una designazione per i paragrafi che dovrebbero essere in maiuscoletto. Ecco come lo faremmo:
p.smallcaps { font-variant: small-caps; } Per creare un paragrafo interamente in maiuscoletto, utilizzeremo un tag HTML leggermente diverso. Ecco come appare:
Il tuo paragrafo qui.
Come puoi vedere, l'aggiunta di un punto e un nome di classe a qualsiasi elemento specifico in CSS specifica un sottotipo di quell'elemento definito da una classe. Puoi farlo con testo, immagini, link e qualsiasi altra cosa.
Se si desidera modificare il caso di un set di testo in un caso specifico, è possibile utilizzare queste linee CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; L'ultimo in maiuscolo la prima lettera di ogni frase.
3. Cambia i colori dei collegamenti
Proviamo a cambiare lo stile di qualcosa di diverso da un paragrafo completo. Esistono quattro colori diversi a cui è possibile assegnare un collegamento: il colore standard, il colore visitato, il colore del passaggio del mouse e il colore attivo (che viene visualizzato mentre si fa clic su di esso). Ecco come potremmo cambiare quelli:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Nota che 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 c'è bisogno di cambiare la classe di un link per farlo cambiare colore. Sarà determinato dall'utente e dallo stato del collegamento.
4. Rimuovi sottolineature di collegamento
Mentre il testo sottolineato indica chiaramente un link, a volte sembra più carino da sottolineare. Questo si ottiene con l'attributo "text-decoration". Ecco come ci libereremmo dei sottotitoli sui link:
a { text-decoration: none; } Qualsiasi cosa con il tag link ("a") rimarrà non sottolineato. Vuoi evidenziarlo quando l'utente vi passa sopra? Basta aggiungere questo qui sotto:
a:hover { text-decoration: underline; } È inoltre possibile aggiungere questa decorazione testuale ai collegamenti attivi per assicurarsi che la sottolineatura non scompaia quando si fa clic sul collegamento.
5. Crea un pulsante di collegamento
Se vuoi attirare più attenzione sul tuo link, utilizzare un pulsante di collegamento è un ottimo modo per farlo. Questo richiede qualche riga in più, ma li 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; } Includendo tutti e quattro gli stati dei collegamenti, ci assicuriamo che il pulsante non scompaia quando un utente si posiziona o fa clic su di esso. Puoi anche impostare diversi parametri per il passaggio del mouse e i collegamenti attivi, come cambiare il pulsante o il colore del testo, per aggiungere un po 'di pop.
Il colore di sfondo è impostato con il colore di sfondo e il colore del testo con il colore. Il riempimento definisce la dimensione del riquadro: il testo viene riempito da 10 px in verticale e 25 px 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'esempio precedente, rimuove la sottolineatura.
"Display: inline-block" è un po 'più complicato. In breve, ti consente di impostare l'altezza e la larghezza dell'oggetto e assicura che inizi una nuova riga quando viene inserita.
6. Creare una casella di testo
Un semplice paragrafo non è molto eccitante. Se vuoi mettere in evidenza il tuo invito all'azione o un altro elemento sulla tua pagina, potresti voler creare un bordo attorno ad esso. Ecco come farlo con una stringa di testo:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Questo è abbastanza semplice. Crea un bordo viola pieno, largo 5 pixel, attorno a qualsiasi paragrafo di classe importante. Per fare in modo che un paragrafo erediti queste proprietà, basta dichiararlo in questo modo:
Il tuo paragrafo importante qui.
Questo funzionerà indipendentemente dalla dimensione del tuo paragrafo; una singola riga otterrà un bordo della larghezza della pagina, una riga alta e un paragrafo più lungo sarà circondato da un bordo più grande.
Esistono molti stili di confine diversi che puoi applicare; invece di "solido", prova "punteggiato" o "doppio". E la larghezza può essere "sottile", "media" o "spessa". Puoi persino definire lo spessore di ciascun bordo singolarmente, in questo modo:
border-width: 5px 8px 3px 9px; Ciò si traduce in un bordo superiore di 5 pixel, un bordo destro di 8, un fondo di 3 e una dimensione del bordo sinistro di 9 pixel.
7. Centra gli elementi allineati
Per un compito molto comune, questa è una cosa sorprendentemente non intuitiva da fare con i CSS. Dopo averlo fatto un paio di volte, diventa molto più facile. Ci sono un paio di modi diversi per centrare le cose.
Per un elemento di blocco (di solito un'immagine), utilizzeremo 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 (il che li rende uguali). 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, controlla la spiegazione del modello di box CSS al W3C. Ecco una breve versione grafica:
Ma cosa succede se vogliamo centrare il testo? I CSS hanno un metodo specifico per farlo:
.centertext { text-align: center; } Se vogliamo usare la classe "centertext" per centrare il testo in un determinato paragrafo, tutto ciò che dobbiamo fare è aggiungere quella classe al
etichetta:
Questo testo sarà centrato.
Ricordare quei diversi passaggi, tuttavia, è un'altra questione. Potresti voler aggiungere questa pagina ai segnalibri.
8. Regolazione del riempimento
Il padding di un elemento specifica quanto spazio deve essere su ciascun lato. Ad esempio, se aggiungi 25 pixel di imbottitura alla base di un'immagine, il testo seguente verrà spinto di 25 pixel in basso. Molti elementi possono avere padding, ma qui useremo un'immagine per un esempio.
Diciamo che vuoi che ogni immagine abbia 20 pixel di riempimento sui lati sinistro e destro e 40 pixel in alto e in basso. Ci sono diversi modi per farlo. Il più elementare:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } C'è una piccola mano che possiamo usare per presentare tutte queste informazioni:
img { padding: 40px 25px 40px 25px; } Questo imposta il numero superiore, destro, inferiore e sinistro del numero giusto. Ma 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à a sinistra ea destra.
9. Evidenzia le righe del tavolo
I CSS possono fare molto per rendere i tuoi tavoli davvero belli. Aggiungere colori, regolare i bordi e rendere il tuo tavolo reattivo agli schermi mobili è tutto facile. Vedremo solo un effetto interessante qui: evidenziando le righe della tabella quando si passa il mouse su di esse.
Ecco il codice che ti serve per questo:
tr:hover { background-color: #ddd; } Ora ogni volta che passi il mouse su una cella di una tabella, quella riga cambierà colore. Per vedere alcune delle cose interessanti che puoi fare, controlla la pagina W3C su fantasiose tabelle CSS.
10. Spostamento delle immagini tra trasparente e opaco
I CSS possono aiutarti a fare cose interessanti anche con le immagini. Ad esempio, può visualizzare immagini con meno opacità totale (appaiono leggermente "sbiancate") e portarle alla massima opacità quando si passa il mouse su di esse. Ecco come lo faremo:
img { opacity: 0.5; filter: alpha(opacity=50); } L'attributo "filtro" ha la stessa funzione di "opacità", ma Internet Explorer 8 e precedenti non riconoscono la misurazione dell'opacità, quindi è una buona idea includerlo.
Ora che le immagini sono leggermente trasparenti, le porteremo completamente opache su un mouseover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Diventa un master CSS
Con questi esempi di codice CSS, dovresti avere un'idea molto migliore di come funziona il CSS. Dopo averli esaminati tutti, noterai una serie di pattern che puoi applicare a un ulteriore codice CSS. Impara HTML e CSS con questi tutorial passo passo. Impara HTML e CSS con questi tutorial passo per passo. Curioso di HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Leggi di più . E questo è quando sai che hai davvero iniziato a diventare un maestro CSS.
E se tutto ciò sembra troppo complicato, ricorda che ti basta prendere alcuni template CSS 11 Siti CSS Template: Do not Start From Scratch! 11 Siti di template CSS: Do not Start From Scratch! Ci sono migliaia di modelli CSS gratuiti disponibili online, che abbracciano le tendenze e le tecnologie del design moderno. Puoi usarli nella loro forma originale, o personalizzarli per renderli tuoi. Leggi di più e modificali.
Cosa fai con i CSS? Quali esempi ti piacerebbe vedere in futuro? Condividi i tuoi pensieri nei commenti qui sotto!