Piano dei corsi

Tutorial avanzato CSS

• Libro di esercizi CSS
• Introduzione a CSS
• Sintassi di base CSS
• Sintassi avanzata CSS
• Selettore deriva CSS
• Selettore id CSS
• Selettore classe CSS
• Creazione CSS
• Sfondo CSS
• Testo CSS
• Caratteri CSS
• Elenco CSS

Modello di cornice CSS

• Panoramica del modello di frame CSS
• Margine interno CSS
• Bordo CSS
• Margine esterno CSS
• Merge di margini esterni CSS

Posizionamento CSS

• Panoramica della posizione CSS
• Posizione relativa CSS
• Posizione assoluta CSS
• Flottamento CSS

Selettore CSS

• Selettore di elemento CSS
• Gruppo di selettori CSS
• Dettagli del selettore classe CSS
• Dettagli del selettore id CSS
• Dettagli del selettore attributo CSS
• Selettore discendente CSS
• Selettore figlio CSS
• Selettore fratello consecutivo CSS

Corso a scelta

Raccomandazione del corso:

• Cassetta degli attrezzi CodeW3C.com

Le proprietà di testo di CSS possono definire l'aspetto del testo.

Tramite le proprietà del testo, è possibile modificare il colore del testo, lo spazio tra i caratteri, allineare il testo, decorare il testo, rientrare il testo, ecc.

Ritardo del testo

Rientrare la prima riga dei paragrafi sulla pagina web, è un effetto di formattazione del testo molto utilizzato.

CSS offre Proprietà text-indentQuesta proprietà permette di realizzare facilmente il rientro del testo.

Utilizzando l'attributo text-indent, la prima riga di tutti gli elementi può essere rientrata di una lunghezza specificata, anche se questa lunghezza può essere negativa.

L'uso più comune di questa proprietà è l'indentazione della prima riga del paragrafo, le seguenti regole faranno indentare la prima riga di tutti i paragrafi di 5 em:

p {indentazione-testo: 5em;}

Attenzione:Di solito, è possibile applicare l'indentazione-testo a tutti gli elementi bloccanti, ma non è possibile applicare questa proprietà agli elementi inline, come le immagini come elementi sostitutivi, non è possibile applicare l'attributo text-indent. Tuttavia, se un elemento bloccante (ad esempio un paragrafo) ha un'immagine nella prima riga, questa si muoverà con il testo rimanente della riga.

Suggerimento:Se si desidera creare un effetto di indentazione per la prima riga di un elemento inline, è possibile farlo utilizzando uno spazio interno o uno spazio esterno.

Utilizzo dei valori negativi

L'attributo text-indent può anche essere impostato su un valore negativo. Utilizzando questa tecnica, è possibile ottenere molti effetti interessanti, come l'indentazione sospesa, ovvero la prima riga sospesa sulla parte rimanente dell'elemento di destra:

p {indentazione-testo: -5em;}

Tuttavia, quando si imposta un valore negativo per text-indent, è necessario prestare attenzione. Se si imposta un valore negativo per un paragrafo, alcune parti del testo della prima riga potrebbero superare il margine sinistro della finestra del browser. Per evitare problemi di visualizzazione, si consiglia di impostare un margine esterno o un margine interno aggiuntivo per il negativo indentaggio:

p {indentazione-testo: -5em; spaziatura-sinistra: 5em;}

Utilizzo dei percentuali

L'attributo text-indent può utilizzare tutti i unità di lunghezza, inclusi i percentuali.

I percentuali devono essere relativi alla larghezza dell'elemento padre dell'indentazione. In altre parole, se si imposta un valore di indentazione del 20%, la prima riga dell'elemento influenzato si rientrerà del 20% della larghezza del padre.

Nel seguente esempio, il valore di rientro è il 20% dell'elemento padre, ovvero 100 pixel:

div {larghezza: 500px;}
p {indentazione-testo: 20%;}
<div>
<p>Questo è un paragrafo</p>
</div>

Ereditarietà

L'attributo text-indent può essere ereditato, considerate il seguente tag:

div#outer {larghezza: 500px;}
div#inner {indentazione-testo: 10%;}
p {larghezza: 200px;}
<div id="outer">
<div id="inner">Qualcosa di testo. Qualcosa di testo. Qualcosa di testo.</div>
<p>Questo è un paragrafo.</p>
</div>
</div>

I segmenti marcati saranno anche rientrati di 50 pixel, poiché questo paragrafo eredita il valore di rientro dell'elemento div con id 'inner'.

Allineamento orizzontale

text-align È un attributo di base che influisce suRiga di testoIl modo di allineamento tra di loro. I primi tre valori sono piuttosto diretti, ma i valori 4 e 5 sono un po' più complessi.

I valori left, right e center causano che il testo allineato all'interno dell'elemento sia rispettivamente allineato a sinistra, a destra e centrato.

Le lingue occidentali si leggono da sinistra a destra, quindi il valore predefinito di text-align è left. Il testo è allineato al margine sinistro, mentre il margine destro è azzardato (noto come testo da sinistra a destra). Per lingue come l'ebrreo e l'arabo, text-align è predefinito a right, poiché queste lingue si leggono da destra a sinistra. Non sorprende che center centra ogni riga di testo nell'elemento.

Suggerimento:Per centrare un elemento bloccante o un elemento tabella, è necessario impostare i margini esterni sinistri e destra dell'elemento in modo appropriato.

text-align:center e <CENTER>

Potresti pensare che text-align:center ha lo stesso effetto dell'elemento <CENTER>, ma in realtà sono molto diversi.

<CENTER> non solo influisce sul testo, ma anche centralizza l'intero elemento. text-align non controlla l'allineamento dell'elemento, ma solo l'effetto del contenuto interno. L'elemento stesso non si sposta da un lato all'altro di un paragrafo, ma è solo il testo che è influenzato.

justify

L'ultimo attributo di allineamento orizzontale è justify.

Nel testo allineato a due estremità, entrambi i lati delle righe di testo sono posizionati sugli estremi interni dell'elemento genitore. Poi, si aggiusta l'intervallo tra le parole e le lettere, in modo che la lunghezza di ogni riga sia uguale. Forse avete notato che il testo allineato a due estremità è comune nel campo della stampa.

È necessario notare che l'agente utente (non CSS) determina come il testo allineato a due estremità viene allungato per riempire lo spazio tra i margini laterali del genitore. Per ulteriori dettagli, si prega di consultare Pagina di riferimento dell'attributo CSS text-align.

Intervallo delle parole

L'attributo word-spacingÈ possibile modificare l'intervallo standard tra le parole (parole). Il valore predefinito normal è lo stesso dell'impostazione a 0.

L'attributo word-spacing accetta un valore di lunghezza positivo o negativo. Se si fornisce un valore di lunghezza positivo, l'intervallo tra le parole aumenterà. Impostare un valore negativo per word-spacing lo avvicinerà:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Questo è un paragrafo. Lo spazio tra le parole sarà aumentato.
</p>
<p class="tight">
Questo è un paragrafo. Lo spazio tra le parole sarà ridotto.
</p>

esempio TIY: aumento o riduzione dello spazio tra le parole (spaziatura tra parole)

Nota:Per una comprensione più approfondita della definizione di 'parola' (word) in CSS, visita pagina di riferimento delle proprietà word-spacing CSS.

spaziatura tra lettere

proprietà letter-spacingLa differenza rispetto a word-spacing sta nel fatto che letter-spacing modifica lo spazio tra i caratteri o le lettere.

Come per la proprietà word-spacing, i valori ammessi per letter-spacing includono tutte le lunghezze. La parola chiave predefinita è normal (che è uguale a letter-spacing:0). Il valore di lunghezza inserito aumenterà o ridurrà lo spazio tra i caratteri di una quantità specificata:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

esempio TIY: definizione della spaziatura tra i caratteri (spaziatura tra lettere)

conversione dei caratteri

proprietà text-transformGestione della maiuscolizzazione del testo. Questa proprietà ha 4 valori:

• none
• uppercase
• lowercase
• capitalize

Il valore predefinito none non modifica il testo in alcun modo, mantenendo la maiuscolizzazione originale del documento sorgente. Come suggerisce il nome, uppercase e lowercase trasformano il testo in maiuscolo e minuscolo completo. Infine, capitalize mette in maiuscolo solo la prima lettera di ogni parola.

Come attributo, text-transform potrebbe non essere così importante, ma se decidi improvvisamente di trasformare tutti gli elementi h1 in maiuscolo, questa proprietà diventa molto utile. Non è necessario modificare singolarmente il contenuto di tutti gli elementi h1, ma puoi utilizzare text-transform per eseguire questa modifica:

h1 {text-transform: uppercase}

L'uso di text-transform offre due vantaggi. Prima di tutto, è sufficiente scrivere una regola semplice per eseguire questa modifica, senza dover modificare l'elemento h1 stesso. In secondo luogo, se in futuro deciderai di ripristinare tutte le maiuscolizzazioni all'originale, la modifica sarà più semplice da completare.

esempio TIY: controllo della maiuscolizzazione dei caratteri nel testo

decorazione del testo

prossimamente, discutiamo attributo text-decorationÈ una proprietà interessante che offre molti comportamenti divertenti.

text-decoration ha 5 valori:

• none
• underline
• overline
• line-through
• blink

Sotto il profilo, underline aggiunge una sottolineatura all'elemento, come il carattere U in HTML. Overline ha l'effetto opposto, disegna una sottolineatura in alto nel testo. Il valore line-through disegna una linea di traverso nel testo, equivalente agli elementi S e strike in HTML. Blink farà lampeggiare il testo, simile al blinking tag supportato da Netscape.

Il valore none chiude tutte le decorazioni applicate a un elemento. Di solito, il testo senza decorazioni è l'aspetto predefinito, ma non sempre è così. Ad esempio, i link hanno sottolineature di default. Se si desidera rimuovere la sottolineatura dai link, è possibile farlo con il seguente CSS:

a {text-decoration: none;}

Attenzione:Se si rimuove esplicitamente la sottolineatura del link con una regola del genere, l'unica differenza visiva tra l'ancora e il testo normale è il colore (almeno questo è il caso di default, ma non si può garantire che il colore sia sicuramente diverso).

È possibile combinare più decorazioni in una regola. Se si desidera che tutti i link abbiano sia sottolineature che trattini superiori, la regola sarà la seguente:

a:link a:visited {text-decoration: underline overline;}

Tuttavia, è importante notare che se due decorazioni diverse si abbinano allo stesso elemento, il valore vincente sostituirà completamente l'altro valore. Considera le seguenti regole:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Per le regole specificate, tutti gli elementi h2 con class stricken hanno solo una decorazione di linea trasversale, senza sottolineature o trattini superiori, perché Il valore text-decoration sostituisce invece di accumularsi.

Gestione degli spazi bianchi

Proprietà white-spaceInfluenza il modo in cui l'agente utente gestisce gli spazi, i salti di riga e i caratteri tab nella documentazione sorgente.

Utilizzando questa proprietà, è possibile influenzare il modo in cui il browser gestisce gli spazi bianchi tra i caratteri e tra le righe di testo. In qualche modo, il trattamento predefinito di XHTML degli spazi bianchi è già completato: combina tutti gli spazi bianchi in un singolo spazio. Quindi, con i seguenti tag, quando viene visualizzato nel browser web, tra le parole viene visualizzato solo uno spazio e vengono ignorati i salti di riga all'interno degli elementi:

<p>This     paragraph has    many
    spaces           in it.</p>

Questo comportamento predefinito può essere impostato esplicitamente con la seguente dichiarazione:

p {white-space: normal;}

Le regole sopra elencate informano il browser di trattare il testo come di solito: eliminando gli spazi di bianco in eccesso. Se viene fornito questo valore, i caratteri di newline (return) vengono convertiti in spazi, e le sequenze di più spazi in una riga vengono convertite in un singolo spazio.

Esempio TIY: white-space: normal

Il valore pre

Tuttavia, se si imposta white-space su pre, il trattamento degli spazi di bianco degli elementi influenzati da questo attributo è diverso, e il comportamento è simile all'elemento pre di XHTML; gli spazi di bianco non vengono ignorati.

Se il valore dell'attributo white-space è pre, il browser presterà attenzione agli spazi extra, inclusi i return. In questo senso e solo in questo, qualsiasi elemento può essere equivalente a un elemento pre.

Esempio TIY: white-space: pre

Attenzione:Secondo il test, i browser IE 7 e precedenti non supportano questo valore, quindi utilizzare un browser non IE per visualizzare l'esempio sopra.

Il valore nowrap

Il valore opposto è nowrap, che impedisce al testo dell'elemento di andare a capo, a meno che non venga utilizzato un elemento br. L'uso di nowrap in CSS è molto simile all'uso di <td nowrap> in HTML 4 per impostare una cella di tabella che non può andare a capo, ma il valore white-space può essere applicato a qualsiasi elemento.

Esempio TIY: white-space: nowrap

I valori pre-wrap e pre-line

CSS2.1 ha introdotto i valori pre-wrap e pre-line, che non erano presenti nelle versioni precedenti del CSS. Questi valori servono a permettere agli autori di controllare meglio il trattamento degli spazi di bianco.

Se l'attributo white-space dell'elemento è impostato su pre-wrap, i segni di spaziatura sequenziali nel testo dell'elemento verranno conservati, ma le righe di testo verranno a capo in modo normale. Se impostato su questo valore, i separatori di riga del testo sorgente e i separatori di riga generati verranno anche conservati. pre-line è il contrario di pre-wrap, e come il testo normale, unisce le sequenze di spazi di bianco, ma conserva i separatori di riga.

Esempio TIY: white-space: pre-wrap

Esempio TIY: white-space: pre-line

Attenzione:Abbiamo testato i due esempi sopra in IE7 e Firefox2.0, ma i risultati sono che i valori pre-wrap e pre-line non sono stati supportati bene.

riassunto

Il seguente elenco riassume il comportamento dell'attributo white-space:

direzione del testo

Se si legge un libro in inglese, si legge da sinistra a destra e da alto a basso, questo è il flusso di testo inglese. Tuttavia, non tutte le lingue sono così. Sappiamo che il cinese antico veniva letto da destra a sinistra, così come l'ebrreo e l'arabo, ecc. CSS2 ha introdotto un attributo per descrivere la direzionalità.

attributo directionInfluenza la direzione di scrittura del testo nei elementi bloccanti, la direzione della disposizione delle colonne nella tabella, la direzione di riempimento orizzontale del contenuto nel riquadro dell'elemento e la posizione dell'ultima riga negli elementi allineati a due estremità.

Nota:Per gli elementi in linea, l'attributo unicode-bidi è applicato solo quando attributo unicode-bidiL'attributo direction viene applicato solo quando impostato su embed o bidi-override.

L'attributo direction ha due valori: ltr e rtl. Nella maggior parte dei casi, il valore predefinito è ltr, che visualizza il testo da sinistra a destra. Se si desidera visualizzare il testo da destra a sinistra, utilizzare il valore rtl.

proprietà di testo CSS

Strumenti

Manuale di riferimento CSS

Esempi CSS

Test CSS

Corso CSS

Link degli sponsor