CSS - Guida rapida
Superior styles to HTML - Il CSS ha una gamma di attributi molto più ampia rispetto all'HTML, quindi puoi dare un aspetto molto migliore alla tua pagina HTML rispetto agli attributi HTML.
Multiple Device Compatibility- I fogli di stile consentono di ottimizzare il contenuto per più di un tipo di dispositivo. Utilizzando lo stesso documento HTML, è possibile presentare diverse versioni di un sito Web per dispositivi palmari come PDA e telefoni cellulari o per la stampa.
Global web standards- Ora gli attributi HTML sono stati deprecati e si consiglia di utilizzare CSS. Quindi è una buona idea iniziare a utilizzare CSS in tutte le pagine HTML per renderle compatibili con i browser futuri.
Chi crea e gestisce i CSS?
CSS viene creato e gestito tramite un gruppo di persone all'interno del W3C chiamato CSS Working Group. Il CSS Working Group crea documenti chiamati specifiche. Quando una specifica è stata discussa e ufficialmente ratificata dai membri del W3C, diventa una raccomandazione.
Queste specifiche ratificate sono chiamate raccomandazioni perché il W3C non ha alcun controllo sull'effettiva implementazione del linguaggio. Società e organizzazioni indipendenti creano quel software.
NOTE - Il World Wide Web Consortium, o W3C, è un gruppo che fornisce raccomandazioni su come funziona Internet e su come dovrebbe evolversi.
Versioni CSS
Cascading Style Sheets livello 1 (CSS1) è uscito dal W3C come raccomandazione nel dicembre 1996. Questa versione descrive il linguaggio CSS e un semplice modello di formattazione visuale per tutti i tag HTML.
CSS2 è diventato una raccomandazione del W3C nel maggio 1998 e si basa su CSS1. Questa versione aggiunge il supporto per fogli di stile specifici per i media, ad esempio stampanti e dispositivi acustici, caratteri scaricabili, posizionamento degli elementi e tabelle.
selector { property: value }
Example - È possibile definire un bordo della tabella come segue:
table{ border :1px solid #C00; }Qui la tabella è un selettore e il bordo è una proprietà e il valore dato 1px solido # C00 è il valore di quella proprietà.
Puoi definire i selettori in vari modi semplici in base al tuo comfort. Consentitemi di inserire questi selettori uno per uno.
I selettori di tipo
Questo è lo stesso selettore che abbiamo visto sopra. Ancora una volta, un altro esempio per dare un colore a tutte le intestazioni di livello 1 -
h1 {
color: #36CFFF;
}I selettori universali
Piuttosto che selezionare elementi di un tipo specifico, il selettore universale abbina semplicemente il nome di qualsiasi tipo di elemento -
* {
color: #000000;
}Questa regola rende il contenuto di ogni elemento nel nostro documento in nero.
I selettori discendenti
Supponiamo di voler applicare una regola di stile a un particolare elemento solo quando si trova all'interno di un particolare elemento. Come indicato nell'esempio seguente, la regola di stile verrà applicata all'elemento <em> solo quando si trova all'interno del tag <ul>.
ul em {
color: #000000;
}I selettori di classe
È possibile definire regole di stile in base all'attributo di classe degli elementi. Tutti gli elementi con quella classe verranno formattati secondo la regola definita.
.black {
color: #000000;
}Questa regola rende il contenuto in nero per ogni elemento con l'attributo di classe impostato su nero nel nostro documento. Puoi renderlo un po 'più particolare. Ad esempio:
h1.black {
color: #000000;
}Questa regola rende il contenuto in nero solo per gli elementi <h1> con l'attributo di classe impostato su nero .
Puoi applicare più di un selettore di classe a un dato elemento. Considera il seguente esempio:
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>I selettori di ID
È possibile definire regole di stile in base all'attributo id degli elementi. Tutti gli elementi che hanno quell'ID verranno formattati secondo la regola definita.
#black {
color: #000000;
}Questa regola rende il contenuto in nero per ogni elemento con l' attributo id impostato su nero nel nostro documento. Puoi renderlo un po 'più particolare. Ad esempio:
h1#black {
color: #000000;
}Questa regola rende il contenuto in nero solo per gli elementi <h1> con l' attributo id impostato su nero .
Il vero potere dei selettori di ID è quando vengono utilizzati come base per i selettori discendenti, ad esempio:
#black h2 {
color: #000000;
}In questo esempio, tutte le intestazioni di livello 2 verranno visualizzate in colore nero quando quelle intestazioni si troveranno nei tag con l' attributo id impostato su nero .
I selettori figlio
Hai visto i selettori discendenti. C'è un altro tipo di selettore, che è molto simile ai discendenti ma ha funzionalità diverse. Considera il seguente esempio:
body > p {
color: #000000;
}Questa regola renderà tutti i paragrafi in nero se sono figli diretti dell'elemento <body>. Altri paragrafi inseriti in altri elementi come <div> o <td> non avrebbero alcun effetto su questa regola.
I selettori di attributi
Puoi anche applicare stili agli elementi HTML con attributi particolari. La regola di stile di seguito corrisponderà a tutti gli elementi di input che hanno un attributo di tipo con un valore di testo -
input[type = "text"] {
color: #000000;
}Il vantaggio di questo metodo è che l'elemento <input type = "submit" /> non viene modificato e il colore viene applicato solo ai campi di testo desiderati.
Ci sono le seguenti regole applicate al selettore di attributi.
p[lang]- Seleziona tutti gli elementi del paragrafo con un attributo lang .
p[lang="fr"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang ha un valore esattamente "fr".
p[lang~="fr"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene la parola "fr".
p[lang|="en"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene valori che sono esattamente "en" o che iniziano con "en-".
Regole di stile multiple
Potrebbe essere necessario definire più regole di stile per un singolo elemento. È possibile definire queste regole per combinare più proprietà e valori corrispondenti in un unico blocco come definito nell'esempio seguente:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Qui tutte le coppie di proprietà e valore sono separate da un file semicolon (;). Puoi tenerli su una o più righe. Per una migliore leggibilità, li teniamo in righe separate.
Per un po ', non preoccuparti delle proprietà menzionate nel blocco sopra. Queste proprietà verranno spiegate nei prossimi capitoli e potrai trovare dettagli completi sulle proprietà in Riferimenti CSS
Selettori di raggruppamento
Puoi applicare uno stile a molti selettori, se lo desideri. Basta separare i selettori con una virgola, come mostrato nell'esempio seguente:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Questa regola di definizione dello stile sarà applicabile anche agli elementi h1, h2 e h3. L'ordine della lista è irrilevante. A tutti gli elementi del selettore verranno applicate le dichiarazioni corrispondenti.
È possibile combinare i vari selettori di ID insieme come mostrato di seguito:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}Produrrà il seguente risultato:
Attributi
Gli attributi associati agli elementi <style> sono:
| Attributo | Valore | Descrizione |
|---|---|---|
| genere | text / css | Specifica il linguaggio per fogli di stile come tipo di contenuto (tipo MIME). Questo è un attributo obbligatorio. |
| media | schermo tty tv proiezione palmare Stampa braille uditivo tutti |
Specifica il dispositivo su cui verrà visualizzato il documento. Il valore predefinito è tutto . Questo è un attributo opzionale. |
CSS in linea: l' attributo di stile
È possibile utilizzare l' attributo di stile di qualsiasi elemento HTML per definire le regole di stile. Queste regole verranno applicate solo a quell'elemento. Ecco la sintassi generica:
<element style = "...style rules....">Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| stile | regole di stile | Il valore dell'attributo style è una combinazione di dichiarazioni di stile separate da punto e virgola (;). |
Esempio
Di seguito è riportato l'esempio di CSS in linea basato sulla sintassi precedente:
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Produrrà il seguente risultato:
CSS esterno: l'elemento <link>
L'elemento <link> può essere utilizzato per includere un file di foglio di stile esterno nel documento HTML.
Un foglio di stile esterno è un file di testo separato con estensione .cssestensione. Definisci tutte le regole di stile all'interno di questo file di testo e quindi puoi includere questo file in qualsiasi documento HTML utilizzando l'elemento <link>.
Ecco la sintassi generica per includere un file CSS esterno:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Attributi
Gli attributi associati agli elementi <style> sono:
| Attributo | Valore | Descrizione |
|---|---|---|
| genere | testo css | Specifica il linguaggio per fogli di stile come tipo di contenuto (tipo MIME). Questo attributo è obbligatorio. |
| href | URL | Specifica il file del foglio di stile con regole di stile. Questo attributo è obbligatorio. |
| media | schermo tty tv proiezione palmare Stampa braille uditivo tutti |
Specifica il dispositivo su cui verrà visualizzato il documento. Il valore predefinito è tutto . Questo è un attributo opzionale. |
Esempio
Considera un semplice file di foglio di stile con un nome mystyle.css avente le seguenti regole:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Ora puoi includere questo file mystyle.css in qualsiasi documento HTML come segue:
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>CSS importato - Regola @import
@import viene utilizzato per importare un foglio di stile esterno in modo simile all'elemento <link>. Ecco la sintassi generica della regola @import.
<head>
@import "URL";
</head>Qui URL è l'URL del file del foglio di stile con regole di stile. Puoi anche usare un'altra sintassi:
<head>
@import url("URL");
</head>Esempio
Di seguito è riportato l'esempio che mostra come importare un file di foglio di stile in un documento HTML:
<head>
@import "mystyle.css";
</head>Sovrascrittura delle regole CSS
Abbiamo discusso quattro modi per includere le regole del foglio di stile in un documento HTML. Ecco la regola per sovrascrivere qualsiasi regola del foglio di stile.
Qualsiasi foglio di stile in linea ha la massima priorità. Quindi, sovrascriverà qualsiasi regola definita nei tag <style> ... </style> o le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nei tag <style> ... </style> sovrascriverà le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nel file del foglio di stile esterno ha la priorità più bassa e le regole definite in questo file verranno applicate solo quando le due regole precedenti non sono applicabili.
Gestione dei vecchi browser
Ci sono ancora molti vecchi browser che non supportano i CSS. Quindi, dovremmo fare attenzione mentre scriviamo il nostro CSS incorporato in un documento HTML. Il seguente frammento mostra come utilizzare i tag di commento per nascondere CSS dai browser meno recenti:
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>Commenti CSS
Molte volte, potrebbe essere necessario inserire commenti aggiuntivi nei blocchi del foglio di stile. Quindi, è molto facile commentare qualsiasi parte nel foglio di stile. Puoi semplicemente mettere i tuoi commenti dentro /*..... questo è un commento nel foglio di stile ..... * /.
Puoi usare / * .... * / per commentare blocchi multilinea in modo simile a come fai nei linguaggi di programmazione C e C ++.
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Produrrà il seguente risultato:
| % | Definisce una misura come percentuale relativa a un altro valore, in genere un elemento che lo racchiude. | p {font-size: 16pt; line-height: 125%;} |
| centimetro | Definisce una misura in centimetri. | div {margin-bottom: 2cm;} |
| em | Una misura relativa per l'altezza di un carattere negli spazi em. Poiché un'unità em è equivalente alla dimensione di un dato carattere, se assegni un carattere a 12pt, ciascuna unità "em" sarà 12pt; quindi, 2em sarebbe 24pt. | p {spaziatura lettere: 7em;} |
| ex | Questo valore definisce una misura relativa all'altezza x di un carattere. L'altezza x è determinata dall'altezza della lettera minuscola x del carattere. | p {dimensione del carattere: 24pt; line-height: 3ex;} |
| in | Definisce una misura in pollici. | p {spaziatura parole: .15in;} |
| mm | Definisce una misura in millimetri. | p {spaziatura parole: 15 mm;} |
| pc | Definisce una misura in picas. Una pica equivale a 12 punti; quindi, ci sono 6 pica per pollice. | p {font-size: 20pc;} |
| pt | Definisce una misura in punti. Un punto è definito come 1/72 di pollice. | body {font-size: 18pt;} |
| px | Definisce una misura in pixel dello schermo. | p {padding: 25px;} |
| Codice esadecimale | #RRGGBB | p {color: # FF0000;} |
| Codice esadecimale breve | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {colore: rgb (50%, 50%, 50%);} |
| RGB assoluto | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| parola chiave | acqua, nero, ecc. | p {color: teal;} |
Questi formati sono spiegati più dettagliatamente nelle seguenti sezioni:
Colori CSS - Codici esadecimali
Un esadecimale è una rappresentazione a 6 cifre di un colore. Le prime due cifre (RR) rappresentano un valore rosso, le due successive sono un valore verde (GG) e le ultime sono il valore blu (BB).
Un esadecimale è una rappresentazione a 6 cifre di un colore. Le prime due cifre (RR) rappresentano un valore rosso, le due successive sono un valore verde (GG) e le ultime sono il valore blu (BB).
Un valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Jasc Paintshop Pro o anche utilizzando Advanced Paint Brush.
Ogni codice esadecimale sarà preceduto da un cancelletto o un cancelletto "#". Di seguito sono riportati gli esempi per utilizzare la notazione esadecimale.
| Colore | Colore HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Colori CSS - Codici esadecimali brevi
Questa è una forma più breve della notazione a sei cifre. In questo formato, ogni cifra viene replicata per arrivare a un valore di sei cifre equivalente. Ad esempio: # 6A7 diventa # 66AA77.
Un valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Jasc Paintshop Pro o anche utilizzando Advanced Paint Brush.
Ogni codice esadecimale sarà preceduto da un cancelletto o un cancelletto "#". Di seguito sono riportati gli esempi per utilizzare la notazione esadecimale.
| Colore | Colore HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #F F F |
Colori CSS - Valori RGB
Questo valore di colore viene specificato utilizzando il rgb( )proprietà. Questa proprietà accetta tre valori, uno per rosso, verde e blu. Il valore può essere un numero intero compreso tra 0 e 255 o una percentuale.
NOTE - Tutti i browser non supportano la proprietà rgb () del colore quindi si consiglia di non utilizzarla.
Di seguito è riportato l'esempio per mostrare pochi colori utilizzando i valori RGB.
| Colore | Colore RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Codici colore degli edifici
Puoi creare milioni di codici colore utilizzando il nostro Color Code Builder. Controlla il nostroHTML Color Code Builder. Per utilizzare questo strumento, è necessario un browser abilitato a Java.
Colori sicuri per il browser
Ecco l'elenco dei 216 colori che dovrebbero essere i colori più sicuri e indipendenti dal computer. Questi colori variano dal codice hexa 000000 a FFFFFF. Questi colori sono sicuri da usare perché assicurano che tutti i computer visualizzino i colori correttamente quando si esegue una tavolozza a 256 colori -
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Imposta il colore di sfondo
Di seguito è riportato l'esempio che mostra come impostare il colore di sfondo per un elemento.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Questo produrrà il seguente risultato:
Imposta l'immagine di sfondo
Possiamo impostare l'immagine di sfondo chiamando le immagini memorizzate in locale come mostrato di seguito -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Produrrà il seguente risultato:
Ripeti l'immagine di sfondo
L'esempio seguente mostra come ripetere l'immagine di sfondo se un'immagine è piccola. È possibile utilizzare il valore di non ripetizione per la proprietà di ripetizione dello sfondo se non si desidera ripetere un'immagine, in questo caso l'immagine verrà visualizzata solo una volta.
Per impostazione predefinita , la proprietà di ripetizione dello sfondo avrà un valore di ripetizione .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Produrrà il seguente risultato:
Il seguente esempio che mostra come ripetere l'immagine di sfondo verticalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Produrrà il seguente risultato:
L'esempio seguente mostra come ripetere l'immagine di sfondo orizzontalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Produrrà il seguente risultato:
Imposta la posizione dell'immagine di sfondo
L'esempio seguente mostra come impostare la posizione dell'immagine di sfondo a 100 pixel dal lato sinistro.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Produrrà il seguente risultato:
L'esempio seguente mostra come impostare la posizione dell'immagine di sfondo a 100 pixel di distanza dal lato sinistro e 200 pixel verso il basso dall'alto.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Produrrà il seguente risultato:
Imposta l'allegato in background
Lo sfondo allegato determina se un'immagine di sfondo è fissa o scorre con il resto della pagina.
L'esempio seguente mostra come impostare l'immagine di sfondo fissa.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Produrrà il seguente risultato:
L'esempio seguente mostra come impostare l'immagine di sfondo a scorrimento.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Produrrà il seguente risultato:
Proprietà di stenografia
È possibile utilizzare la proprietà background per impostare contemporaneamente tutte le proprietà dello sfondo. Ad esempio:
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>Imposta la famiglia di caratteri
Di seguito è riportato l'esempio, che mostra come impostare la famiglia di caratteri di un elemento. Il valore possibile potrebbe essere qualsiasi nome della famiglia di caratteri.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>Questo produrrà il seguente risultato:
Imposta lo stile del carattere
Di seguito è riportato l'esempio, che mostra come impostare lo stile del carattere di un elemento. I valori possibili sono normale, corsivo e obliquo .
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>Questo produrrà il seguente risultato:
Imposta la variante del carattere
L'esempio seguente mostra come impostare la variante del carattere di un elemento. I valori possibili sono normale e maiuscoletto .
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>This will produce following result −
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>This will produce following result −
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>This will produce following result −
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>This will produce following result −
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>This will produce following result −
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>This will produce following result −
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>It will produce the following result −
Set the Text Direction
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>It will produce the following result −
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>It will produce the following result −
Set the Space between Words
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>This will produce following result −
Set the Text Indent
The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>It will produce the following result −
Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left, right, center, justify.
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>This will produce following result −
Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>This will produce following result −
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>It will produce the following result −
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.
Here is the example −
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following black link −
Set the Color of Visited Links
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. It will change its color to pink when the user clicks it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Ora modifichiamo l'esempio precedente e vediamo l'effetto -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà sul lato della didascalia
La proprietà caption-side consente di specificare dove posizionare il contenuto di un elemento <caption> in relazione alla tabella. La tabella che segue elenca i possibili valori.
Questa proprietà può avere uno dei quattro valori superiore, inferiore, sinistro o destro . L'esempio seguente utilizza ogni valore.
NOTE - Queste proprietà potrebbero non funzionare con il tuo browser IE.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Produrrà il seguente risultato:
Proprietà celle vuote
La proprietà celle vuote indica se una cella senza contenuto deve avere un bordo visualizzato.
Questa proprietà può avere uno dei tre valori: mostra, nascondi o eredita .
Ecco la proprietà celle vuote utilizzata per nascondere i bordi delle celle vuote nell'elemento <table>.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà table-layout
La proprietà table-layout dovrebbe aiutarti a controllare come un browser dovrebbe eseguire il rendering o il layout di una tabella.
Questa proprietà può avere uno dei tre valori: fixed, auto o inherit .
L'esempio seguente mostra la differenza tra queste proprietà.
NOTE - Questa proprietà non è supportata da molti browser, quindi non fare affidamento su questa proprietà.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà border-color consente di modificare il colore del bordo che circonda un elemento. Puoi modificare individualmente il colore dei lati inferiore, sinistro, superiore e destro del bordo di un elemento utilizzando le proprietà -
border-bottom-color cambia il colore del bordo inferiore.
border-top-color cambia il colore del bordo superiore.
border-left-color cambia il colore del bordo sinistro.
border-right-color cambia il colore del bordo destro.
L'esempio seguente mostra l'effetto di tutte queste proprietà:
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà in stile bordo
La proprietà border-style consente di selezionare uno dei seguenti stili di bordo:
none- Nessun confine. (Equivalente alla larghezza del bordo: 0;)
solid - Il bordo è una singola linea continua.
dotted - Il bordo è una serie di punti.
dashed - Border è una serie di linee brevi.
double - Il bordo è costituito da due linee continue.
groove - Il bordo sembra come se fosse scolpito nella pagina.
ridge - Il bordo sembra l'opposto del solco.
inset - Bordo fa sembrare la casella incorporata nella pagina.
outset - Il bordo fa sembrare che la scatola stia uscendo dalla tela.
hidden - Uguale a nessuno, tranne in termini di risoluzione dei conflitti di confine per gli elementi della tabella.
È possibile modificare individualmente lo stile dei bordi inferiore, sinistro, superiore e destro di un elemento utilizzando le seguenti proprietà:
border-bottom-style cambia lo stile del bordo inferiore.
border-top-style cambia lo stile del bordo superiore.
border-left-style cambia lo stile del bordo sinistro.
border-right-style cambia lo stile del bordo destro.
L'esempio seguente mostra tutti questi stili di bordo:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà border-width
La proprietà border-width consente di impostare la larghezza dei bordi di un elemento. Il valore di questa proprietà potrebbe essere una lunghezza in px, pt o cm oppure dovrebbe essere impostato su thin, medium o thick.
È possibile modificare individualmente la larghezza dei bordi inferiore, superiore, sinistro e destro di un elemento utilizzando le seguenti proprietà:
border-bottom-width cambia la larghezza del bordo inferiore.
border-top-width cambia la larghezza del bordo superiore.
border-left-width cambia la larghezza del bordo sinistro.
border-right-width cambia la larghezza del bordo destro.
L'esempio seguente mostra tutte queste larghezze del bordo:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Produrrà il seguente risultato:
Proprietà del bordo utilizzando la stenografia
La proprietà border ti consente di specificare il colore, lo stile e la larghezza delle linee in una proprietà:
L'esempio seguente mostra come utilizzare tutte e tre le proprietà in una singola proprietà. Questa è la proprietà utilizzata più di frequente per impostare il bordo attorno a qualsiasi elemento.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Produrrà il seguente risultato:
Il margin-right specifica il margine destro di un elemento.
Ora vedremo come utilizzare queste proprietà con esempi.
La proprietà del margine
La proprietà margin consente di impostare tutte le proprietà per i quattro margini in una dichiarazione. Ecco la sintassi per impostare il margine attorno a un paragrafo:
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-bottom
La proprietà margin-bottom consente di impostare il margine inferiore di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-top
La proprietà margin-top consente di impostare il margine superiore di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-left
La proprietà margin-left consente di impostare il margine sinistro di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-right
La proprietà margin-right ti consente di impostare il margine destro di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
Ora vedremo come utilizzare queste proprietà con esempi.
La proprietà del tipo di elenco
La proprietà list-style-type consente di controllare la forma o lo stile del punto elenco (noto anche come marker) nel caso di elenchi non ordinati e lo stile dei caratteri di numerazione negli elenchi ordinati.
Ecco i valori che possono essere utilizzati per un elenco non ordinato:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Un cerchio pieno |
| 3 | circle Un cerchio vuoto |
| 4 | square Un quadrato pieno |
Ecco i valori, che possono essere utilizzati per un elenco ordinato:
| Valore | Descrizione | Esempio |
|---|---|---|
| decimale | Numero | 1,2,3,4,5 |
| zero decimale | 0 prima del numero | 01, 02, 03, 04, 05 |
| alfa inferiore | Caratteri alfanumerici minuscoli | a, b, c, d, e |
| alfa superiore | Caratteri alfanumerici maiuscoli | A, B, C, D, E |
| romano minuscolo | Numeri romani minuscoli | i, ii, iii, iv, v |
| maiuscolo | Numeri romani maiuscoli | I, II, III, IV, V |
| greco inferiore | L'indicatore è in greco inferiore | alfa, beta, gamma |
| latino inferiore | Il marcatore è un latino minuscolo | a, b, c, d, e |
| latino superiore | Il marcatore è il latino superiore | A, B, C, D, E |
| ebraico | Il marcatore è la tradizionale numerazione ebraica | |
| armeno | L'indicatore è la tradizionale numerazione armena | |
| georgiano | L'indicatore è la tradizionale numerazione georgiana | |
| cjk-ideographic | Il marker sono semplici numeri ideografici | |
| hiragana | Il marker è hiragana | a, i, u, e, o, ka, ki |
| katakana | Il marker è katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | Il marker è hiragana-iroha | io, ro, ha, ni, ho, lui, a |
| katakana-iroha | Il marker è katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Ecco un esempio:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Produrrà il seguente risultato:
La proprietà list-style-position
La proprietà list-style-position indica se il marcatore deve apparire all'interno o all'esterno della casella contenente i punti elenco . Può avere uno dei due valori:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | none N / A |
| 2 | inside Se il testo va su una seconda riga, il testo andrà a capo sotto il marcatore. Apparirà anche rientrato nel punto in cui il testo sarebbe iniziato se l'elenco avesse un valore esterno. |
| 3 | outside Se il testo va su una seconda riga, il testo sarà allineato con l'inizio della prima riga (a destra del punto elenco). |
Ecco un esempio:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Produrrà il seguente risultato:
La proprietà list-style-image
L' immagine in stile elenco consente di specificare un'immagine in modo da poter utilizzare il proprio stile di punto elenco . La sintassi è simile alla proprietà background-image con le lettere url che iniziano il valore della proprietà seguite dall'URL tra parentesi. Se non trova l'immagine data, vengono utilizzati i punti elenco predefiniti.
Ecco un esempio:
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Produrrà il seguente risultato:
La proprietà in stile elenco
Lo stile elenco consente di specificare tutte le proprietà dell'elenco in una singola espressione. Queste proprietà possono essere visualizzate in qualsiasi ordine.
Ecco un esempio:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Produrrà il seguente risultato:
La proprietà marker-offset
La proprietà marker-offset consente di specificare la distanza tra il marker e il testo relativo a quel marker. Il suo valore dovrebbe essere una lunghezza come mostrato nel seguente esempio:
Sfortunatamente, questa proprietà non è supportata in IE 6 o Netscape 7.
Ecco un esempio:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Produrrà il seguente risultato:
Il padding serve come scorciatoia per le proprietà precedenti.
Ora vedremo come utilizzare queste proprietà con esempi.
La proprietà padding-bottom
La proprietà padding-bottom imposta il padding inferiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-top
La proprietà padding-top imposta il padding superiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-left
La proprietà padding-left imposta il padding sinistro (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-right
La proprietà padding-right imposta il padding destro (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà Padding
La proprietà padding imposta il padding sinistro, destro, superiore e inferiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Produrrà il seguente risultato:
| 1 | auto La forma del cursore dipende dall'area di contesto su cui si trova. Ad esempio una I sul testo, una consegna di un collegamento e così via ... |
| 2 | crosshair Un mirino o un segno più |
| 3 | default Una freccia |
| 4 | pointer Una mano che indica (in IE 4 questo valore è la mano) |
| 5 | move Il bar |
| 6 | e-resize Il cursore indica che un bordo di una casella deve essere spostato a destra (est) |
| 7 | ne-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto e verso destra (nord / est) |
| 8 | nw-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto e verso sinistra (nord / ovest) |
| 9 | n-resize Il cursore indica che un bordo di una casella deve essere spostato verso l'alto (nord) |
| 10 | se-resize Il cursore indica che il bordo di una casella deve essere spostato in basso e a destra (sud / est) |
| 11 | sw-resize Il cursore indica che un bordo di una casella deve essere spostato in basso e a sinistra (sud / ovest) |
| 12 | s-resize Il cursore indica che un bordo di una casella deve essere spostato verso il basso (sud) |
| 13 | w-resize Il cursore indica che un bordo di una casella deve essere spostato a sinistra (ovest) |
| 14 | text Il bar |
| 15 | wait Una clessidra |
| 16 | help Un punto interrogativo o un fumetto, ideale per l'uso sui pulsanti di aiuto |
| 17 | <url> L'origine di un file immagine del cursore |
NOTE- Dovresti provare a utilizzare solo questi valori per aggiungere informazioni utili per gli utenti e, in alcuni punti, si aspetterebbero di vedere quel cursore. Ad esempio, l'utilizzo del mirino quando qualcuno passa sopra un collegamento può confondere i visitatori.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>Produrrà il seguente risultato:
Il outline-width viene utilizzata per impostare la larghezza del contorno.
Il outline-style viene utilizzata per impostare lo stile della linea per il contorno.
Il outline-color viene utilizzata per impostare il colore del contorno.
Il outline proprietà viene utilizzata per impostare tutte le tre proprietà precedenti in una singola istruzione.
La proprietà della larghezza del contorno
La proprietà outline-width specifica la larghezza del contorno da aggiungere alla casella. Il suo valore dovrebbe essere una lunghezza o uno dei valori thin, medium o thick, proprio come l'attributo border-width.
Una larghezza di zero pixel significa nessun contorno.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà in stile contorno
La proprietà outline-style specifica lo stile della linea (continua, punteggiata o tratteggiata) che gira intorno a un elemento. Può assumere uno dei seguenti valori:
none- Nessun confine. (Equivalente alla larghezza del contorno: 0;)
solid - Il contorno è una singola linea continua.
dotted - Outline è una serie di punti.
dashed - Outline è una serie di brevi righe.
double - Il contorno è costituito da due linee continue.
groove - Il contorno appare come se fosse scolpito nella pagina.
ridge - Il profilo sembra l'opposto del solco.
inset - Outline fa sembrare la casella incorporata nella pagina.
outset - Outline fa sembrare che la scatola stia uscendo dalla tela.
hidden - Uguale a nessuno.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà outline-color
La proprietà outline-color consente di specificare il colore del contorno. Il suo valore dovrebbe essere un nome di colore, un colore esadecimale o un valore RGB, come con le proprietà color e border-color.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà outline
La proprietà outline è una proprietà abbreviata che consente di specificare i valori per una qualsiasi delle tre proprietà discusse in precedenza in qualsiasi ordine ma in un'unica istruzione.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Produrrà il seguente risultato:
Il max-width viene utilizzata per impostare la larghezza massima che può essere una casella.
Il min-width viene utilizzata per impostare la larghezza minima che può essere una scatola.
Le proprietà di altezza e larghezza
Le proprietà di altezza e larghezza consentono di impostare l'altezza e la larghezza delle scatole. Possono assumere valori di una lunghezza, una percentuale o la parola chiave auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà line-height
La proprietà line-height consente di aumentare lo spazio tra le righe di testo. Il valore della proprietà line-height può essere un numero, una lunghezza o una percentuale.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà max-height
La proprietà max-height consente di specificare l'altezza massima di una casella. Il valore della proprietà max-height può essere un numero, una lunghezza o una percentuale.
NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>Produrrà il seguente risultato:
La proprietà min-height
La proprietà min-height consente di specificare l'altezza minima di un box. Il valore della proprietà min-height può essere un numero, una lunghezza o una percentuale.
NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>Produrrà il seguente risultato:
La proprietà max-width
La proprietà max-width consente di specificare la larghezza massima di una casella. Il valore della proprietà max-width può essere un numero, una lunghezza o una percentuale.
NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>Questo produrrà il seguente risultato:
La proprietà larghezza minima
La proprietà min-width consente di specificare la larghezza minima di una casella. Il valore della proprietà larghezza minima può essere un numero, una lunghezza o una percentuale.
NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>Produrrà il seguente risultato:
| 1 | visible Consente al contenuto di superare i bordi del suo elemento contenitore. |
| 2 | hidden Il contenuto dell'elemento annidato viene semplicemente troncato al bordo dell'elemento contenitore e non sono visibili barre di scorrimento. |
| 3 | scroll La dimensione dell'elemento contenitore non cambia, ma vengono aggiunte le barre di scorrimento per consentire all'utente di scorrere per vedere il contenuto. |
| 4 | auto Lo scopo è lo stesso dello scorrimento, ma la barra di scorrimento verrà visualizzata solo se il contenuto trabocca. |
Ecco un esempio:
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>Produrrà il seguente risultato:
| 1 | visible La scatola e il suo contenuto vengono mostrati all'utente. |
| 2 | hidden La scatola e il suo contenuto vengono resi invisibili, sebbene influenzino ancora il layout della pagina. |
| 3 | collapse Può essere utilizzato solo con colonne di tabelle dinamiche ed effetti di riga. |
Ecco un esempio:
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>Produrrà il seguente risultato:
- Sposta in alto: utilizza un valore negativo per la parte superiore .
- Sposta in basso: utilizza un valore positivo per la parte superiore .
NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra .
Ecco l'esempio:
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>Produrrà il seguente risultato:
Posizionamento assoluto
Un elemento con position: absolute è posizionato alle coordinate specificate rispetto all'angolo superiore sinistro dello schermo.
È possibile utilizzare due valori in alto e a sinistra insieme alla proprietà position per spostare un elemento HTML ovunque nel documento HTML.
- Sposta a sinistra: utilizza un valore negativo per la sinistra .
- Sposta a destra: utilizza un valore positivo per la sinistra .
- Sposta in alto: utilizza un valore negativo per la parte superiore .
- Sposta in basso: utilizza un valore positivo per la parte superiore .
NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra.
Ecco un esempio:
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>Posizionamento fisso
Il posizionamento fisso consente di fissare la posizione di un elemento in un punto particolare della pagina, indipendentemente dallo scorrimento. Le coordinate specificate saranno relative alla finestra del browser.
È possibile utilizzare due valori in alto e a sinistra insieme alla proprietà position per spostare un elemento HTML ovunque nel documento HTML.
- Sposta a sinistra: utilizza un valore negativo per la sinistra .
- Sposta a destra: utilizza un valore positivo per la sinistra .
- Sposta in alto: utilizza un valore negativo per la parte superiore .
- Sposta in basso: utilizza un valore positivo per la parte superiore .
NOTE- È possibile utilizzare anche i valori in basso o a destra allo stesso modo in alto e a sinistra .
Ecco un esempio:
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html><body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>Produrrà il seguente risultato:
Le pseudo-classi più comunemente usate sono le seguenti:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | :link Usa questa classe per aggiungere uno stile speciale a un collegamento non visitato. |
| 2 | :visited Usa questa classe per aggiungere uno stile speciale a un link visitato. |
| 3 | :hover Usa questa classe per aggiungere uno stile speciale a un elemento quando passi il mouse su di esso. |
| 4 | :active Usa questa classe per aggiungere uno stile speciale a un elemento attivo. |
| 5 | :focus Usa questa classe per aggiungere uno stile speciale a un elemento mentre l'elemento è attivo. |
| 6 | :first-child Usa questa classe per aggiungere uno stile speciale a un elemento che è il primo figlio di un altro elemento. |
| 7 | :lang Utilizzare questa classe per specificare una lingua da utilizzare in un elemento specificato. |
Mentre si definiscono le pseudo-classi in un blocco <style> ... </style>, si dovrebbero notare i seguenti punti:
a: hover DEVE venire dopo a: link e a: visitati nella definizione CSS per essere efficaci.
a: active DEVE venire dopo a: hover nella definizione CSS per essere efficace.
I nomi delle pseudo-classi non fanno distinzione tra maiuscole e minuscole.
Le pseudo-classi sono diverse dalle classi CSS ma possono essere combinate.
La pseudo-classe: link
L'esempio seguente mostra come utilizzare la classe : link per impostare il colore del collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Produrrà il seguente collegamento nero:
La pseudo-classe: visitata
Il seguente è l'esempio che dimostra come utilizzare la classe : visiting per impostare il colore dei collegamenti visitati. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Questo produrrà il seguente collegamento. Dopo aver fatto clic su questo collegamento, cambierà il suo colore in verde.
La pseudo-classe: hover
L'esempio seguente mostra come utilizzare la classe : hover per cambiare il colore dei collegamenti quando portiamo il puntatore del mouse su quel collegamento. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Produrrà il seguente collegamento. Ora posiziona il mouse su questo collegamento e vedrai che cambia colore in giallo.
La: pseudo-classe attiva
L'esempio seguente mostra come utilizzare la classe : active per modificare il colore dei collegamenti attivi. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Produrrà il seguente collegamento. Quando un utente fa clic su di esso, il colore diventa rosa.
La pseudo-classe: focus
L'esempio seguente mostra come utilizzare la classe : focus per modificare il colore dei collegamenti focalizzati. I valori possibili potrebbero essere qualsiasi nome di colore in qualsiasi formato valido.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Produrrà il seguente collegamento. Quando questo collegamento viene messo a fuoco, il suo colore diventa arancione. Il colore cambia quando perde la messa a fuoco.
La pseudo-classe: first-child
La pseudo-classe : first-child corrisponde a un elemento specificato che è il primo figlio di un altro elemento e aggiunge uno stile speciale a quell'elemento che è il primo figlio di qualche altro elemento.
Per fare: il lavoro del primo figlio in IE <! DOCTYPE> deve essere dichiarato all'inizio del documento.
Ad esempio, per far rientrare il primo paragrafo di tutti gli elementi <div>, potresti usare questa definizione:
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Produrrà il seguente risultato:
La pseudo-classe: lang
La pseudo-classe del linguaggio : lang , consente di costruire selettori in base all'impostazione della lingua per tag specifici.
Questa classe è utile nei documenti che devono fare riferimento a più lingue che hanno convenzioni diverse per determinati costrutti linguistici. Ad esempio, la lingua francese utilizza in genere le parentesi angolari (<e>) per le virgolette, mentre la lingua inglese utilizza le virgolette ("e").
In un documento che deve affrontare questa differenza, puoi usare la pseudo-classe: lang per modificare le virgolette in modo appropriato. Il codice seguente modifica il tag <blockquote> in modo appropriato per la lingua utilizzata:
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>I selettori: lang verranno applicati a tutti gli elementi nel documento. Tuttavia, non tutti gli elementi utilizzano la proprietà quotes, quindi l'effetto sarà trasparente per la maggior parte degli elementi.
Produrrà il seguente risultato:
Gli pseudo-elementi più comunemente usati sono i seguenti:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | :first-line Usa questo elemento per aggiungere stili speciali alla prima riga del testo in un selettore. |
| 2 | :first-letter Usa questo elemento per aggiungere uno stile speciale alla prima lettera del testo in un selettore. |
| 3 | :before Usa questo elemento per inserire del contenuto prima di un elemento. |
| 4 | :after Usa questo elemento per inserire del contenuto dopo un elemento. |
Lo pseudo-elemento: first-line
L'esempio seguente mostra come utilizzare l' elemento : first-line per aggiungere effetti speciali alla prima riga di elementi nel documento.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Produrrà il seguente collegamento:
Lo pseudo-elemento: first-letter
L'esempio seguente mostra come utilizzare l' elemento : first-letter per aggiungere effetti speciali alla prima lettera degli elementi nel documento.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Produrrà il seguente collegamento nero:
Lo pseudo-elemento: before
L'esempio seguente mostra come utilizzare l' elemento : before per aggiungere del contenuto prima di qualsiasi elemento.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Produrrà il seguente collegamento nero:
Lo pseudo-elemento: after
L'esempio seguente mostra come utilizzare l' elemento : after per aggiungere del contenuto dopo qualsiasi elemento.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Produrrà il seguente collegamento nero:
La regola @import
La regola @import ti consente di importare stili da un altro foglio di stile. Dovrebbe apparire proprio all'inizio del foglio di stile prima di qualsiasi regola e il suo valore è un URL.
Può essere scritto in uno dei due modi seguenti:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>Il significato della regola @import è che ti permette di sviluppare i tuoi fogli di stile con un approccio modulare. È possibile creare vari fogli di stile e quindi includerli ovunque siano necessari.
La regola @charset
Se stai scrivendo il tuo documento usando un set di caratteri diverso da ASCII o ISO-8859-1 potresti voler impostare la regola @charset nella parte superiore del tuo foglio di stile per indicare in quale set di caratteri è scritto il foglio di stile.
La regola @charset deve essere scritta proprio all'inizio del foglio di stile senza nemmeno uno spazio prima di essa. Il valore è racchiuso tra virgolette e dovrebbe essere uno dei set di caratteri standard. Ad esempio:
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>La regola @ font-face
La regola @ font-face viene utilizzata per descrivere in modo esaustivo un tipo di carattere da utilizzare in un documento. @ font-face può anche essere utilizzato per definire la posizione di un font per il download, sebbene ciò possa incorrere in limiti specifici dell'implementazione.
In generale, @ font-face è estremamente complicato e il suo utilizzo non è consigliato a nessuno tranne a coloro che sono esperti nella metrica dei caratteri.
Ecco un esempio:
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>La regola! Importante
Cascading Style Sheets a cascata. Significa che gli stili vengono applicati nello stesso ordine in cui vengono letti dal browser. Viene applicato il primo stile, quindi il secondo e così via.
La regola! Important fornisce un modo per creare il tuo CSS a cascata. Comprende anche le regole che devono essere applicate sempre. Una regola con una proprietà! Important verrà sempre applicata, indipendentemente da dove appare quella regola nel documento CSS.
Ad esempio, nel seguente foglio di stile, il testo del paragrafo sarà nero, anche se la prima proprietà di stile applicata è rossa:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Quindi, se vuoi assicurarti che una proprietà venga sempre applicata, dovresti aggiungere la proprietà! Important al tag. Quindi, per rendere il testo del paragrafo sempre rosso, dovresti scriverlo come segue:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Qui hai creato p {color: # ff0000! Important; } obbligatorio, ora questa regola sarà sempre valida anche se hai definito un'altra regola p {color: # 000000; }
Produrrà il seguente risultato:
| 1 | opacity Livello di opacità. 0 è completamente trasparente, 100 è completamente opaco. |
| 2 | finishopacity Livello di opacità all'altra estremità dell'oggetto. |
| 3 | style La forma del gradiente di opacità. 0 = uniforme 1 = lineare 2 = radiale 3 = rettangolare |
| 4 | startX Coordinata X per l'inizio del gradiente di opacità. |
| 5 | startY Coordinata Y per l'inizio del gradiente di opacità. |
| 6 | finishX Coordinata X per il gradiente di opacità alla fine. |
| 7 | finishY Coordinata Y per il gradiente di opacità alla fine. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Sfocatura movimento
Motion Blur viene utilizzato per creare immagini o testo sfocati con la direzione e la forza. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | add Vero o falso. Se vero, l'immagine viene aggiunta all'immagine sfocata; e se falso, l'immagine non viene aggiunta all'immagine sfocata. |
| 2 | direction La direzione della sfocatura, in senso orario, arrotondata a incrementi di 45 gradi. Il valore predefinito è 270 (a sinistra). 0 = in alto 45 = in alto a destra 90 = destra 135 = In basso a destra 180 = in basso 225 = in basso a sinistra 270 = Sinistra 315 = In alto a sinistra |
| 3 | strength Il numero di pixel che la sfocatura si estenderà. L'impostazione predefinita è 5 pixel. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Filtro Chroma
Il filtro Chroma viene utilizzato per rendere trasparente qualsiasi colore particolare e di solito viene utilizzato con le immagini. Puoi usarlo anche con le barre di scorrimento. Il seguente parametro può essere utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vorresti fosse trasparente. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto ombra esterna
L'ombra esterna viene utilizzata per creare un'ombra dell'oggetto con l'offset e il colore X (orizzontale) e Y (verticale) specificati.
I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore, in formato #RRGGBB, dell'ombretto. |
| 2 | offX Numero di pixel dell'ombra discendente rispetto all'oggetto visivo, lungo l'asse x. I numeri interi positivi spostano l'ombra discendente a destra, i numeri interi negativi spostano l'ombra discendente a sinistra. |
| 3 | offY Numero di pixel dell'ombra discendente rispetto all'oggetto visivo, lungo l'asse y. I numeri interi positivi spostano l'ombra discendente verso il basso, i numeri interi negativi spostano l'ombra discendente verso l'alto. |
| 4 | positive Se vero, tutti i pixel opachi dell'oggetto hanno un'ombra. Se falso, tutti i pixel trasparenti hanno un ombretto. L'impostazione predefinita è true. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto capovolgimento
L'effetto Capovolgi viene utilizzato per creare un'immagine speculare dell'oggetto. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | FlipH Crea un'immagine speculare orizzontale |
| 2 | FlipV Crea un'immagine speculare verticale |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto bagliore
L'effetto bagliore viene utilizzato per creare un bagliore attorno all'oggetto. Se è un'immagine trasparente, viene creato un bagliore attorno ai pixel opachi di essa. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vuoi che sia il bagliore. |
| 2 | strength L'intensità del bagliore (da 1 a 255). |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto scala di grigi
L'effetto scala di grigi viene utilizzato per convertire i colori dell'oggetto in 256 sfumature di grigio. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | grayscale Converte i colori dell'oggetto in 256 sfumature di grigio. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto invertito
L'effetto Inverti viene utilizzato per mappare i colori dell'oggetto ai loro valori opposti nello spettro dei colori, ovvero per creare un'immagine negativa. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | Invert Mappa i colori dell'oggetto sul loro valore opposto nello spettro dei colori. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto maschera
L'effetto maschera viene utilizzato per trasformare i pixel trasparenti in un colore specificato e rende trasparenti i pixel opachi. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che diventeranno le aree trasparenti. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Filtro ombra
Il filtro ombra viene utilizzato per creare un'ombra attenuata nella direzione e nel colore specificati. Questo è un filtro che si trova tra Dropshadow e Glow. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vuoi che sia l'ombra. |
| 2 | direction La direzione della sfocatura, in senso orario, arrotondata a incrementi di 45 gradi. Il valore predefinito è 270 (a sinistra). 0 = in alto 45 = in alto a destra 90 = destra 135 = In basso a destra 180 = in basso 225 = in basso a sinistra 270 = Left 315 = Top left |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>It will produce the following result −
Wave Effect
Wave effect is used to give the object a sine wave distortion to make it look wavy. The following parameters can be used in this filter −
| Sr.No. | Parameter & Description |
|---|---|
| 1 | add A value of 1 adds the original image to the waved image, 0 does not. |
| 2 | freq The number of waves. |
| 3 | light The strength of the light on the wave (from 0 to 100). |
| 4 | phase At what degree the sine wave should start (from 0 to 100). |
| 5 | strength The intensity of the wave effect. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>It will produce the following result −
X-Ray Effect
X-Ray effect grayscales and flattens the color depth. The following parameter is used in this filter:
| Sr.No. | Parameter & Description |
|---|---|
| 1 | xray Grayscales and flattens the color depth. |
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>It will produce the following result −
Given below is an example −
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>The Document Language
In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −
Following is an example −
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>Recognized Media Types
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −
| Sr.No. | Value & Description |
|---|---|
| 1 | all Suitable for all devices. |
| 2 | aural Intended for speech synthesizers. |
| 3 | braille Intended for braille tactile feedback devices. |
| 4 | embossed Intended for paged braille printers. |
| 5 | handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth). |
| 6 | Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media. |
| 7 | projection Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media. |
| 8 | screen Intended primarily for color computer screens. |
| 9 | tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. |
| 10 | tv Intended for television-type devices. |
NOTE − Media type names are case-insensitive.
The CSS2 defines a "page box", a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −
The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for layout that occurs between page breaks.
The margin area − It surrounds the page area.
You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.
For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on all sides between the page box edge and the page area −
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page.
Finally, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are printed. You may use one or both of the crop and cross keywords to create crop marks and registration marks, respectively, on the target print page.
Setting Page Size
The size property specifies the size and orientation of a page box. There are four values which can be used for page size −
auto − The page box will be set to the size and orientation of the target sheet.
landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.
portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.
length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.
In the following example, the outer edges of the page box will align with the target. The percentage value on the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>The following example sets the width of the page box to be 8.5 inches and the height to be 11 inches. The page box in this example requires a target sheet size of 8.5" × 11" or larger.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders all the tables in your document on landscape pages −
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>Due to the above rule, while printing, if the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it starts a new page and prints the table on a landscape page.
Left, Right, and First pages
When printing double-sided documents, the page boxes on left and right pages should be different. It can be expressed through two CSS pseudo-classes as follows −
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>You can specify the style for the first page of a document with the :first pseudo-class −
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Controlling Pagination
Unless you specify otherwise, page breaks occur only when the page format changes or when the content overflows the current page box. To otherwise force or suppress page breaks, use the page-break-before, page-break-after, and page-break-inside properties.
Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.
The keyword auto is the default, it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.
Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content. You can achieve this using following rule −
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule −
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Controlling Widows and Orphans
In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.
The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.
Here is the example to create 4 lines at the bottom and 3 lines at the top of each page −
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>- Medical documentation
When using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).
The CSS properties also allow you to vary the quality of synthesized speech (voice type, frequency, inflection, etc.).
Here is an example −
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>It will produce the following result −
It will direct the speech synthesizer to speak headers in a voice (a kind of audio font) called "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL.
Paragraphs with class ‘heidi’ will appear to come from front left (if the sound system is capable of spatial audio), and paragraphs of class ‘peter’ from the right.
Now we will see the various properties related to aural media.
The azimuth property sets, where the sound should come from horizontally.
The elevation property sets, where the sound should come from vertically.
The cue-after specifies a sound to be played after speaking an element's content to delimit it from other.
The cue-before specifies a sound to be played before speaking an element's content to delimit it from other.
The cue is a shorthand for setting cue-before and cue-after.
The pause-after specifies a pause to be observed after speaking an element's content.
The pause-before specifies a pause to be observed before speaking an element's content.
The pause is a shorthand for setting pause-before and pause-after.
The pitch specifies the average pitch (a frequency) of the speaking voice.
The pitch-range specifies variation in average pitch.
The play-during specifies a sound to be played as a background while an element's content is spoken.
The richness specifies the richness, or brightness, of the speaking voice.
The speak specifies whether text will be rendered aurally and if so, in what manner.
The speak-numeral controls how numerals are spoken.
The speak-punctuation specifies how punctuation is spoken.
The speech-rate specifies the speaking rate.
The stress specifies the height of "local peaks" in the intonation contour of a voice.
The voice-family specifies the prioritized list of voice family names.
The volume refers to the median volume of the voice.
La proprietà azimutale
La proprietà azimut imposta orizzontalmente la provenienza del suono. I valori possibili sono elencati di seguito:
angle- La posizione è descritta in termini di un angolo compreso tra -360 ° e 360 ° . Il valore 0deg significa direttamente davanti al centro del palcoscenico. 90deg è a destra, 180deg dietro e 270deg (o, in modo equivalente e più conveniente, -90deg ) a sinistra.
left-side- Uguale a "270deg". Con "dietro", "270deg".
far-left- Uguale a "300deg". Con "dietro", "240deg".
left- Uguale a "320deg". Con "dietro", "220deg".
center-left- Uguale a "340deg". Con "dietro", "200deg".
center- Uguale a "0deg". Con "dietro", "180 gradi".
center-right- Uguale a "20deg". Con "dietro", "160deg".
right- Uguale a "40deg". Con "dietro", "140 gradi".
far-right- Uguale a "60deg". Con "dietro", "120 gradi".
right-side- Uguale a "90deg". Con "dietro", "90 gradi".
leftwards- Sposta il suono a sinistra e rispetto all'angolo corrente. Più precisamente, sottrae 20 gradi.
rightwards- Sposta il suono a destra, rispetto all'angolo corrente. Più precisamente, aggiunge 20 gradi.
Ecco un esempio:
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>La proprietà elevazione
La proprietà di elevazione imposta verticalmente la provenienza del suono. I valori possibili sono i seguenti:
angle- Specifica l'elevazione come un angolo, tra -90deg e 90deg . 0deg significa sull'orizzonte in avanti, che liberamente significa livello con l'ascoltatore. 90deg significa direttamente sopra la testa e -90deg significa direttamente sotto.
below - Uguale a "-90deg".
level - Uguale a "0deg".
above - Uguale a "90deg".
higher - Aggiunge 10 gradi all'elevazione corrente.
lower - Sottrae 10 gradi dall'elevazione corrente.
Ecco un esempio:
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>La proprietà di spunto
La proprietà cue-after specifica un suono da riprodurre dopo aver pronunciato il contenuto di un elemento per delimitarlo da altri. I possibili valori includono:
url - L'URL di un file audio da riprodurre.
none - Niente deve essere giocato.
Ecco un esempio:
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>Lo spunto prima della proprietà
Questa proprietà specifica un suono da riprodurre prima di pronunciare il contenuto di un elemento per delimitarlo da altri. I valori possibili sono:
url - L'URL di un file audio da riprodurre.
none - Niente deve essere giocato.
Ecco un esempio:
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>La proprietà cue
La proprietà cue è una scorciatoia per impostare cue-before e cue-after . Se vengono forniti due valori, il primo valore è cue-before e il secondo è cue-after . Se viene fornito un solo valore, si applica a entrambe le proprietà.
Ad esempio, le due regole seguenti sono equivalenti:
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>La proprietà pausa dopo
Questa proprietà specifica una pausa da osservare dopo aver pronunciato il contenuto di un elemento. I valori possibili sono:
time - Esprime la pausa in unità di tempo assolute (secondi e millisecondi).
percentage- Si riferisce all'inverso del valore della proprietà della velocità del parlato . Ad esempio, se la velocità del parlato è di 120 parole al minuto (cioè una parola impiega mezzo secondo o 500 ms), una pausa dopo del 100% significa una pausa di 500 ms e una pausa dopo del 20% significa 100 ms .
La pausa prima di Property
Questa proprietà specifica una pausa da osservare prima di pronunciare il contenuto di un elemento. I valori possibili sono:
time - Esprime la pausa in unità di tempo assolute (secondi e millisecondi).
percentage- Si riferisce all'inverso del valore della proprietà della velocità del parlato . Ad esempio, se la velocità del parlato è di 120 parole al minuto (ovvero una parola impiega mezzo secondo o 500 ms), una pausa prima del 100% significa una pausa di 500 ms e una pausa prima del 20% significa 100 ms .
La proprietà pause
Questa proprietà è una scorciatoia per impostare la pausa prima e la pausa dopo . Se vengono forniti due valori, il primo valore è pausa prima e il secondo è pausa dopo.
Ecco un esempio:
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>La proprietà pitch
Questa proprietà specifica l'altezza media (una frequenza) della voce parlante. Il tono medio di una voce dipende dalla famiglia di voci. Ad esempio, il tono medio per una voce maschile standard è di circa 120 Hz, ma per una voce femminile è di circa 210 Hz. I valori possibili sono:
frequency - Specifica l'altezza media della voce parlante in hertz (Hz).
x-low, low, medium, high, x-high - Questi valori non vengono mappati su frequenze assolute poiché questi valori dipendono dalla famiglia di voci.
La proprietà pitch-range
Questa proprietà specifica la variazione del passo medio. I valori possibili sono:
number- Un valore compreso tra "0" e "100". Una gamma di intonazione di "0" produce una voce piatta e monotona. Una gamma di tonalità di 50 produce un'inflessione normale. Intervalli di tonalità superiori a 50 producono voci animate.
La proprietà del gioco
Questa proprietà specifica un suono da riprodurre come sottofondo durante la riproduzione del contenuto di un elemento. I valori possibili potrebbero essere uno dei seguenti:
URI - Il suono designato da questo <uri> viene riprodotto come sottofondo mentre viene pronunciato il contenuto dell'elemento.
mix- Quando è presente, questa parola chiave significa che il suono ereditato dalla proprietà play-during dell'elemento genitore continua a essere riprodotto e il suono designato dall'uri viene miscelato con esso. Se mix non è specificato, il suono di sottofondo dell'elemento sostituisce quello del genitore.
repeat- Quando presente, questa parola chiave significa che il suono si ripeterà se è troppo breve per riempire l'intera durata dell'elemento. In caso contrario, il suono viene riprodotto una volta e poi si interrompe.
auto - Il suono dell'elemento genitore continua a suonare.
none - Questa parola chiave significa che c'è silenzio.
Ecco un esempio:
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>La ricchezza della proprietà
Questa proprietà specifica la ricchezza o la luminosità della voce parlante. I valori possibili sono:
number- Un valore compreso tra "0" e "100". Più alto è il valore, più la voce trasporterà. Un valore più basso produrrà una voce morbida e melliflua.
Il speak Property
Questa proprietà specifica se il testo verrà riprodotto in modo acustico e, in tal caso, in che modo. I valori possibili sono:
none - Sopprime il rendering acustico in modo che l'elemento non richieda tempo per il rendering.
normal - Utilizza le regole di pronuncia dipendenti dalla lingua per il rendering di un elemento e dei suoi figli.
spell-out - Scrive il testo una lettera alla volta.
Nota la differenza tra un elemento la cui proprietà "volume" ha un valore di "silent" e un elemento la cui proprietà "speak" ha il valore "none". Il primo occupa lo stesso tempo come se fosse stato pronunciato, inclusa qualsiasi pausa prima e dopo l'elemento, ma non viene generato alcun suono. Quest'ultimo non richiede tempo e non viene renderizzato.
La proprietà speak-numeral
Questa proprietà controlla il modo in cui vengono pronunciati i numeri. I valori possibili sono:
digits- Pronuncia il numero come singole cifre. Quindi, "237" viene pronunciato "Due Tre Sette".
continuous- Pronuncia il numero come un numero intero. Quindi, "237" viene detto "Duecentotrentasette". Le rappresentazioni di parole dipendono dalla lingua.
La proprietà speak-punteggiatura
Questa proprietà specifica come viene pronunciata la punteggiatura. I valori possibili sono:
code - La punteggiatura come il punto e virgola, le parentesi graffe e così via devono essere pronunciate letteralmente.
none - La punteggiatura non deve essere pronunciata, ma resa naturalmente come varie pause.
La proprietà della velocità del parlato
Questa proprietà specifica la velocità di pronuncia. Tieni presente che sono consentiti valori di parole chiave sia assoluti che relativi. I valori possibili sono:
number - Specifica la velocità di pronuncia in parole al minuto.
x-slow - Uguale a 80 parole al minuto.
slow - Uguale a 120 parole al minuto.
medium - Uguale a 180-200 parole al minuto.
fast - Uguale a 300 parole al minuto.
x-fast - Uguale a 500 parole al minuto.
faster - Aggiunge 40 parole al minuto alla velocità vocale corrente.
slower - Sottrae 40 parole al minuto dalla velocità vocale corrente.
La proprietà stress
Questa proprietà specifica l'altezza dei "picchi locali" nel contorno di intonazione di una voce. L'inglese è una lingua accentata e alle diverse parti di una frase viene assegnato uno stress primario, secondario o terziario. I valori possibili sono:
number- Un valore compreso tra "0" e "100". Il significato dei valori dipende dalla lingua parlata. Ad esempio, un livello di "50" per una voce maschile standard di lingua inglese (tono medio = 122 Hz), che parla con intonazione e enfasi normali avrebbe un significato diverso da "50" per una voce italiana.
La proprietà della famiglia della voce
Il valore è un elenco di nomi di famiglia di voci con priorità, separati da virgole. Può avere i seguenti valori:
generic-voice- I valori sono famiglie di voci. I valori possibili sono "maschio", "femmina" e "figlio".
specific-voice - I valori sono istanze specifiche (ad esempio, comico, trinoidi, carlos, lani).
Ecco un esempio:
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>La proprietà volume
Il volume si riferisce al volume mediano della voce. Può avere i seguenti valori:
numbers- Qualsiasi numero compreso tra "0" e "100". '0' rappresenta il livello di volume udibile minimo e 100 corrisponde al livello massimo confortevole.
percentage - Questi valori vengono calcolati in relazione al valore ereditato e vengono quindi ritagliati nell'intervallo da "0" a "100".
silent- Nessun suono. Il valore "0" non ha lo stesso significato di "silenzioso".
x-soft - Uguale a "0".
soft - Uguale a "25".
medium - Uguale a "50".
loud - Uguale a "75".
x-loud - Uguale a "100".
Ecco un esempio:
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>Paragrafi con classe goat sarà molto morbido.
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}Se stai definendo il tuo foglio di stile in un file separato, puoi anche utilizzare l'attributo media quando ti colleghi a un foglio di stile esterno -
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">I CSS sono fondamentali per il futuro dei documenti Web e saranno supportati dalla maggior parte dei browser.
CSS è più preciso delle tabelle, consentendo di visualizzare il documento come previsto, indipendentemente dalla finestra del browser.
Tenere traccia delle tabelle annidate può essere una vera seccatura. Le regole CSS tendono ad essere ben organizzate, di facile lettura e facilmente modificabili.
Infine, ti suggeriamo di utilizzare qualsiasi tecnologia abbia senso per te e utilizzare ciò che sai o ciò che presenta i tuoi documenti nel modo migliore.
CSS fornisce anche proprietà di layout della tabella per velocizzare il caricamento delle tabelle. Di seguito è riportato un esempio:
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>Noterai maggiormente i vantaggi sui tavoli di grandi dimensioni. Con l'HTML tradizionale, il browser doveva calcolare ogni cella prima di rendere finalmente la tabella. Quando si imposta l'algoritmo di layout della tabella su fixed , tuttavia, è sufficiente esaminare la prima riga prima di eseguire il rendering dell'intera tabella. Significa che la tua tabella dovrà avere larghezze di colonna fisse e altezze di riga.
Esempio di layout della colonna
Ecco i passaggi per creare un semplice layout di colonna utilizzando CSS:
Impostare il margine e la spaziatura interna del documento completo come segue:
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Ora definiremo una colonna di colore giallo e successivamente collegheremo questa regola a un <div> -
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>Fino a questo punto avremo un documento con corpo giallo, quindi definiamo ora un'altra divisione all'interno del livello 0 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Ora, annideremo un'altra divisione all'interno del livello1 e cambieremo solo il colore di sfondo -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>Infine, useremo la stessa tecnica, annidare una divisione di livello3 all'interno di livello2 per ottenere il layout visivo per la colonna di destra -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>Completa il codice sorgente come segue:
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>Allo stesso modo, puoi aggiungere una barra di navigazione in alto o una barra degli annunci nella parte superiore della pagina.
Produrrà il seguente risultato:
Validatore CSS W3C (World Wide Web Consortium), questo validatore controlla il tuo css tramite caricamento di file, input diretto o URI - una pagina alla volta. Questo validatore ti aiuta a individuare tutti gli errori nel tuo CSS. Il validatore di controllo CSS WDG, ti consente di convalidare il tuo CSS tramite input diretto, caricamento di file e utilizzando l'URI. Gli errori verranno elencati in base ai numeri di riga e di colonna, se presenti. Gli errori di solito vengono forniti con collegamenti per spiegare il motivo dell'errore.Un validatore CSS controlla i tuoi Cascading Style Sheets per assicurarsi che siano conformi agli standard CSS impostati dal W3 Consortium. Ci sono alcuni validatori che ti diranno anche quali funzionalità CSS sono supportate da quali browser (poiché non tutti i browser sono uguali nella loro implementazione CSS).
Perché convalidare il codice HTML?
Ci sono una serie di ragioni per cui dovresti convalidare il tuo codice. Ma quelli principali sono -
Aiuta cross-browser, cross-platform e compatibilità futura.
Un sito web di buona qualità aumenta la visibilità sui motori di ricerca.
Professionalità: come sviluppatore web, il tuo codice non dovrebbe generare errori mentre viene visto dai visitatori.
CSS3 è la collaborazione delle specifiche CSS2 e delle nuove specifiche, che possiamo chiamare questa collaborazione è module. Alcuni dei moduli sono mostrati di seguito:
- Selectors
- Modello Box
- Backgrounds
- Valori dell'immagine e contenuto sostituito
- Effetti di testo
- Trasformazioni 2D
- Trasformazioni 3D
- Animations
- Layout a più colonne
- Interfaccia utente
La tabella seguente mostra i possibili valori per gli angoli arrotondati come segue:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | border-radius Utilizzare questo elemento per impostare la proprietà del raggio di quattro bordi |
| 2 | border-top-left-radius Usa questo elemento per impostare il bordo dell'angolo in alto a sinistra |
| 3 | border-top-right-radius Usa questo elemento per impostare il bordo dell'angolo in alto a destra |
| 4 | border-bottom-right-radius Usa questo elemento per impostare il confine dell'angolo in basso a destra |
| 5 | border-bottom-left-radius Usa questo elemento per impostare il confine dell'angolo inferiore sinistro |
Esempio
Questa proprietà può avere tre valori. L'esempio seguente utilizza entrambi i valori:
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>Produrrà il seguente risultato:
Ogni proprietà Corner
Possiamo specificare la proprietà di ogni angolo come mostrato nell'esempio seguente:
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>Produrrà il seguente risultato:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | border-image-source Utilizzato per impostare il percorso dell'immagine |
| 2 | border-image-slice Utilizzato per tagliare l'immagine del confine |
| 3 | border-image-width Utilizzato per impostare la larghezza dell'immagine del bordo |
| 4 | border-image-repeat Utilizzato per impostare l'immagine del bordo come arrotondata, ripetuta e allungata |
Esempio
Di seguito è riportato l'esempio che dimostra come impostare un'immagine come bordo per gli elementi.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Produrrà il seguente risultato:
I valori più comunemente usati sono mostrati di seguito:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | background Utilizzato per impostare tutte le proprietà dell'immagine di sfondo in una sezione |
| 2 | background-clip Utilizzato per dichiarare l'area di pittura dello sfondo |
| 3 | background-image Utilizzato per specificare l'immagine di sfondo |
| 4 | background-origin Utilizzato per specificare la posizione delle immagini di sfondo |
| 5 | background-size Utilizzato per specificare la dimensione delle immagini di sfondo |
Esempio
Di seguito è riportato l'esempio che mostra le immagini di sfondo multiplo.
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>Produrrà il seguente risultato:
Dimensione dello sfondo multiplo
La proprietà Multi background è accettata per aggiungere dimensioni diverse per immagini diverse.
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}Come mostrato sopra un esempio, ogni immagine ha dimensioni specifiche come 50px, 130px e dimensioni automatiche.
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL sta per hue, saturation, lightness. Qui Enorme è un grado sulla ruota dei colori, saturazione e luminosità sono valori percentuali compresi tra 0 e 100%. Una sintassi di esempio di HSL come mostrato di seguito:
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA sta per hue, saturation, lightness and alpha. Il valore alfa specifica l'opacità come mostrato RGBA. Una sintassi di esempio di HSLA come mostrato di seguito -
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacityè un diluente per le vernici è necessario aggiungere il nero per aumentare l'opacità. Di seguito è riportata una sintassi di esempio dell'opacità:
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}L'esempio seguente mostra la proprietà color rgba.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>Produrrà il seguente risultato:
L'esempio seguente mostra la proprietà del colore HSL.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>Produrrà il seguente risultato:
Il seguente esempio mostra la proprietà del colore HSLA.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>Produrrà il seguente risultato:
L'esempio seguente mostra la proprietà Opacity.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>Produrrà il seguente risultato:
Gradienti lineari
I gradienti lineari vengono utilizzati per disporre due o più colori in formati lineari come dall'alto verso il basso.
Dall'alto al basso
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Produrrà il seguente risultato:
Da sinistra a destra
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Produrrà il seguente risultato:
Diagonale
La diagonale inizia dal pulsante in alto a sinistra e destra.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Produrrà il seguente risultato:
Multi colore
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>Produrrà il seguente risultato:
Gradienti radiali CSS3
I gradienti radiali vengono visualizzati al centro.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Produrrà il seguente risultato:
CSS3 Ripeti sfumature radiali
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Produrrà il seguente risultato:
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Produrrà il seguente risultato:
casella ombra
Utilizzato per aggiungere effetti ombra agli elementi, di seguito è riportato l'esempio per aggiungere effetti ombra all'elemento.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>Produrrà il seguente risultato:
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | text-align-last Utilizzato per allineare l'ultima riga del testo |
| 2 | text-emphasis Utilizzato per enfatizzare testo e colore |
| 3 | text-overflow utilizzato per determinare il modo in cui il contenuto in eccesso che non viene visualizzato viene segnalato agli utenti |
| 4 | word-break Utilizzato per interrompere la linea in base alla parola |
| 5 | word-wrap Utilizzato per interrompere la linea e passare alla riga successiva |
Overflow del testo
La proprietà text-overflow determina il modo in cui il contenuto in overflow che non viene visualizzato viene segnalato agli utenti. l'esempio di esempio di overflow del testo è mostrato come segue:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Produrrà il seguente risultato:
CSS3 Word Breaking
Utilizzato per interrompere la riga, il codice seguente mostra il codice di esempio dell'interruzione di parole.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Produrrà il seguente risultato:
Word wrapping CSS
Il ritorno a capo automatico viene utilizzato per interrompere la riga e passare alla riga successiva. Il codice seguente avrà una sintassi di esempio:
p {
word-wrap: break-word;
}| 1 | TrueType Fonts (TTF) TrueType è uno standard per i caratteri di contorno sviluppato da Apple e Microsoft alla fine degli anni '80, è diventato i caratteri più comuni per i sistemi operativi Windows e MAC. |
| 2 | OpenType Fonts (OTF) OpenType è un formato per caratteri di computer scalabili e sviluppato da Microsoft |
| 3 | The Web Open Font Format (WOFF) WOFF viene utilizzato per sviluppare la pagina web e sviluppato nell'anno del 2009. Ora viene utilizzato dalla raccomandazione del W3C. |
| 4 | SVG Fonts/Shapes SVG consente i caratteri SVG nella documentazione SVG. Possiamo anche applicare CSS a SVG con la proprietà del tipo di carattere. |
| 5 | Embedded OpenType Fonts (EOT) EOT viene utilizzato per sviluppare le pagine web ed è incorporato nelle pagine web, quindi non è necessario consentire caratteri di terze parti |
Il codice seguente mostra il codice di esempio del tipo di carattere -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Produrrà il seguente risultato:
Descrizione dei caratteri
Il seguente elenco conteneva tutte le descrizioni dei caratteri che sono inserite nella regola @ font-face -
| Sr.No. | Valore e descrizione |
|---|---|
| 1 | font-family Utilizzato per definire il nome del carattere |
| 2 | src Utilizzato per definire l'URL |
| 3 | font-stretch Utilizzato per trovare come allungare il carattere |
| 4 | font-style Utilizzato per definire lo stile dei caratteri |
| 5 | font-weight Utilizzato per definire lo spessore del carattere (grassetto) |
| 1 | matrix(n,n,n,n,n,n) Utilizzato per definire trasformazioni di matrice con sei valori |
| 2 | translate(x,y) Utilizzato per trasformare l'elemento insieme all'asse xe all'asse y |
| 3 | translateX(n) Utilizzato per trasformare l'elemento insieme all'asse x |
| 4 | translateY(n) Utilizzato per trasformare l'elemento insieme all'asse y |
| 5 | scale(x,y) Utilizzato per modificare la larghezza e l'altezza dell'elemento |
| 6 | scaleX(n) Utilizzato per modificare la larghezza dell'elemento |
| 7 | scaleY(n) Utilizzato per modificare l'altezza dell'elemento |
| 8 | rotate(angle) Utilizzato per ruotare l'elemento in base a un angolo |
| 9 | skewX(angle) Utilizzato per definire le trasformazioni di inclinazione lungo l'asse x |
| 10 | skewY(angle) Utilizzato per definire le trasformazioni di inclinazione lungo l'asse y |
I seguenti esempi sono mostrati il campione di tutte le proprietà di cui sopra.
Ruota di 20 gradi
Rotazione della scatola con un angolo di 20 gradi come mostrato di seguito -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
Ruota di -20 gradi
Rotazione della scatola con angolo di -20 gradi come mostrato di seguito -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
Inclina l'asse X.
Rotazione box con asse x inclinato come mostrato di seguito -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
Inclina l'asse Y.
Rotazione box con asse y inclinato come mostrato di seguito -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
Trasformata di matrice
La rotazione del riquadro con trasformazioni Matrix si trasforma come mostrato di seguito
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
Matrix si trasforma con un'altra direzione.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Produrrà il seguente risultato:
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Utilizzato per trasformare l'elemento utilizzando 16 valori di matrice |
| 2 | translate3d(x,y,z) Utilizzato per trasformare l'elemento utilizzando l'asse x, l'asse ye l'asse z |
| 3 | translateX(x) Utilizzato per trasformare l'elemento utilizzando l'asse x |
| 4 | translateY(y) Utilizzato per trasformare l'elemento utilizzando l'asse y |
| 5 | translateZ(z) Utilizzato per trasformare l'elemento utilizzando l'asse y |
| 6 | scaleX(x) Usato per scalare trasforma l'elemento utilizzando l'asse x |
| 7 | scaleY(y) Usato per scalare trasforma l'elemento utilizzando l'asse y |
| 8 | scaleY(y) Utilizzato per trasformare l'elemento utilizzando l'asse z |
| 9 | rotateX(angle) Utilizzato per ruotare trasforma l'elemento utilizzando l'asse x |
| 10 | rotateY(angle) Utilizzato per ruotare, trasforma l'elemento utilizzando l'asse y |
| 11 | rotateZ(angle) Utilizzato per ruotare trasforma l'elemento utilizzando l'asse z |
Trasformazioni 3D dell'asse X.
Il seguente esempio mostra le trasformazioni 3D dell'asse x.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>Produrrà il seguente risultato:
Trasformazioni 3D dell'asse Y.
Il seguente esempio mostra le trasformazioni 3D dell'asse y:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>Produrrà il seguente risultato:
Trasformazioni 3D dell'asse Z.
Il seguente esempio mostra le trasformazioni 3D dell'asse Z:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>Produrrà il seguente risultato:
L'esempio sopra mostra l'altezza, la larghezza, il colore, il nome e la durata dell'animazione con la sintassi dei fotogrammi chiave.
Spostamento dell'animazione a sinistra
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Produrrà il seguente risultato:
Spostamento dell'animazione a sinistra con i fotogrammi chiave
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Produrrà il seguente risultato:
| 1 | column-count Utilizzato per contare il numero di colonne che l'elemento deve essere diviso. |
| 2 | column-fill Utilizzato per decidere come riempire le colonne. |
| 3 | column-gap Utilizzato per decidere lo spazio tra le colonne. |
| 4 | column-rule Utilizzato per specificare il numero di regole. |
| 5 | rule-color Utilizzato per specificare il colore della regola della colonna. |
| 6 | rule-style Utilizzato per specificare la regola di stile per la colonna. |
| 7 | rule-width Utilizzato per specificare la larghezza. |
| 8 | column-span Utilizzato per specificare l'intervallo tra le colonne. |
Esempio
L'esempio seguente mostra la disposizione del testo come nuova struttura della carta.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>Produrrà il seguente risultato:
Supponiamo, se l'utente desidera rendere il testo come nuovo foglio senza riga, possiamo farlo rimuovendo la sintassi dello stile come mostrato di seguito -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}Produrrà il seguente risultato:
| 1 | appearance Utilizzato per consentire all'utente di creare elementi come elementi dell'interfaccia utente. |
| 2 | box-sizing Consente agli utenti di fissare gli elementi sull'area in modo chiaro. |
| 3 | icon Utilizzato per fornire l'icona nell'area. |
| 4 | resize Utilizzato per ridimensionare gli elementi che si trovano nell'area. |
| 5 | outline-offset Utilizzato per disegnare il dietro il contorno. |
| 6 | nav-down Utilizzato per spostarsi in basso quando si preme il pulsante freccia giù nel tastierino. |
| 7 | nav-left Utilizzato per spostarsi a sinistra quando si preme il pulsante freccia sinistra nel tastierino. |
| 8 | nav-right Utilizzato per spostarsi a destra quando si preme il pulsante freccia destra nel tastierino. |
| 9 | nav-up Utilizzato per spostarsi in alto quando si preme il pulsante freccia su nel tastierino. |
Esempio di proprietà di ridimensionamento
La proprietà Resize ha tre valori comuni come mostrato di seguito:
- horizontal
- vertical
- both
Utilizzo di both valore nella proprietà resize nell'interfaccia utente css3 -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>Produrrà il seguente risultato:
CSS3 Outline offset
Fuori linea significa tracciare una linea attorno all'elemento all'esterno del bordo.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>Produrrà il seguente risultato:
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Produrrà il seguente risultato:
L'immagine sopra ha la stessa larghezza e altezza di due elementi ma il risultato è diverso, poiché il secondo è incluso nella proprietà di riempimento.
Proprietà dimensionamento box CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Il campione sopra ha la stessa altezza e larghezza con box-sizing:border-box. qui il risultato è mostrato sotto.
Produrrà il seguente risultato:
Gli elementi sopra hanno la stessa altezza e larghezza con il box-sizing: border-box quindi il risultato è sempre lo stesso per entrambi gli elementi come mostrato sopra.
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>Produrrà il seguente risultato:
Query multimediali
Le query multimediali riguardano regole di stile diverse per dispositivi di dimensioni diverse come cellulari, desktop, ecc.
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>Produrrà il seguente risultato:
Bootstrap responsive web design
Bootstrap è il framework di web design più popolare basato su HTML, CSS e script Java e ti aiuta a progettare pagine web in modo reattivo per tutti i dispositivi.
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>Produrrà il seguente risultato: