Come configurare smartphone e PC. Portale informativo
  • casa
  • sistema operativo
  • CSS: valore della proprietà: eredita. Disabilita gli elementi HTML indesiderati utilizzando i CSS

CSS: valore della proprietà: eredita. Disabilita gli elementi HTML indesiderati utilizzando i CSS

Spesso quando consegniamo un progetto ad un cliente, perdiamo il controllo del codice HTML. A volte un cliente utilizza un CMS (Content Management System) che gli fornisce pieno controllo su alcune parti del codice HTML. A volte un cliente utilizza semplicemente i nostri modelli per inviare il proprio codice a un documento.
Nella maggior parte dei casi, è abbastanza difficile informare il cliente su come utilizzare i modelli o il CMS che gli fornisci, e talvolta è semplicemente inaccettabile fare discorsi infuocati sul layout semantico e sugli standard web. Il cliente può/vorrà utilizzare il “buon vecchio markup”, quello che conosce, semplicemente perché funziona e ha l'aspetto a cui è abituato. Molto probabilmente conterrà tag e attributi indesiderati (deprecati), come bgcolor, allinea ed "eterno" font. Questo articolo spiega come bloccare i tag HTML indesiderati con utilizzando i CSS, guidando così attentamente il cliente nella giusta direzione.

Esistono diverse soluzioni al problema. Uno di questi è visualizzare un'immagine di avviso utilizzando i CSS quando vengono utilizzati tag indesiderati. Ci sono spiegazioni dettagliate di questo metodo. La seconda soluzione è “eliminare” tag e attributi indesiderati sul lato server. Questo metodo è il più efficace, un'altra cosa è che non sempre c'è il controllo sul server su cui si trova il sito.
L'idea è quella di preservare la cascata naturale e l'eredità degli stili in tutti i browser, "disattivando" con garbo l'HTML che il client non desidera utilizzare. E poi il client smetterà di usarlo, perché i tag indesiderati semplicemente smetteranno di "funzionare". Un modo elegante e senza stress per guidare il cliente lungo la strada giusta.
Tag e attributi HTML indesiderati:

bgcolor allineamento bordo vspace hspace valign larghezza altezza
Soluzione
Idealmente potremmo semplicemente modificare alcuni tag HTML inserendo il valore ereditare per la proprietà CSS equivalente. I browser basati su standard ignoreranno semplicemente gli attributi indesiderati specificati nel codice e utilizzeranno invece i valori ereditati nella cascata.
Ad esempio questo CSS:
carattere (color:eredita;)
avrà la precedenza su questo codice:
Blu
Di conseguenza, il colore del testo all'interno del tag font sarà un colore ereditato attraverso la cascata e non il blu, come specificato nel codice. Proprio quello di cui hai bisogno. Ma come probabilmente saprai, Internet Explorer ci sono problemi con i valori ereditati. E anche nella settima versione. Quindi mettiamoci al lavoro:
Espressioni e currentStyle per aiutare:
font ( colore:eredita; /* Browser normali*/ color:expression(this.parentNode.currentStyle["color"]); /* CIOÈ */ )
Lavori? Ottimo, andiamo avanti:
font ( font-family:inherit; /* Browser normali */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ )
Tutto è meraviglioso, tranne che Opera 9 non ne eredita il valore famiglia di font. fortunatamente font Ci accontenteremo inoltre di:
font ( font:inherit; /* Browser normali */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ )
Questo è tutto risolto. Passiamo alla proprietà dimensione del font. Ciò richiede una certa sensibilità poiché il valore della dimensione del carattere viene ereditato dal valore calcolato. Precedente espressione"s non funzionerà qui, perché se per corpo il valore della proprietà è impostato dimensione del font, pari a 2em, da questo punto inizierà il calcolo del valore della dimensione del carattere. Il browser controllerà il valore dimensione del font Per elemento genitore etichetta font, che è uguale a 2em e rappresenterà un valore calcolato pari a 4em (2em da 2em). E non è questo ciò di cui abbiamo bisogno. La soluzione è semplice. Necessario utilizzare valore iniziale dimensione del font, pari al 100% per tutti i browser. Aggiungiamo alcune proprietà al tag indesiderato basefont per calmare anche lui. Ecco un elenco completo delle regole per domare i tag font E basefont:
font,basefont ( color:inherit; /* Browser normali */ color:expression(this.parentNode.currentStyle["color"]); /* IE */ font:inherit; /* Browser normali. Carattere invece della dimensione del carattere per Operas */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ font-size:100% /* Tutte le dimensioni del browser sono ereditate */ )
Andiamo avanti. Approfittiamo tecnologia di base per cancellare i tag centro, s, sciopero E tu:
center ( text-align:inherit; /* Browser normali */ text-align:expression(this.parentNode.currentStyle["textAlign"]); /* IE */ ) s,strike,u ( text-decoration:inherit; /* Browser normali */ text-decoration:expression(this.parentNode.currentStyle["textDecoration"] /* IE */ )
È finito! Abbiamo "disabilitato" la maggior parte dei tag indesiderati utilizzando solo CSS ed espressioni.
E gli attributi? HTML4 include una serie di attributi indesiderati che possono essere piuttosto fastidiosi. Spegniamo anche loro. Iniziamo con allineare:
* ( text-align:inherit; ) /* Browser normali */
Andrebbe tutto bene, ma IE6 non supporta i selettori di attributi. Pertanto, dobbiamo modificare espressione, in modo che controlli la presenza dell'attributo allineare all'etichetta. Ecco cosa è successo:
* ( text-align:inherit; ) /* Browser normali */ * ( text-align:expression(this.align ? this.parentNode.currentStyle["textAlign"] : ""); ) /* IE */
I successivi sono gli attributi dei tag imm. A parte l'attributo allineare, vogliamo disabilitare gli attributi confine, spazio virtuale E hspace. Poiché i valori margine E confine non vengono ereditati, in questo caso si applica una semplice regola:
img (margine:0; bordo:none; ) /* Tutti i browser */
È qui che ci troviamo di fronte a un problema irrisolvibile per IE6. vspace E hspace non equivalgono alla proprietà margine al suo interno, quindi IE6 continuerà a visualizzarli. Unica decisione, che mi è venuto in mente è di scrivere un piccolo script che eliminerà semplicemente questi attributi durante il caricamento di un documento:
window.onload = function() ( for (i=0;i document.getElementsByTagName("img")[i].removeAttribute("vspace"); document.getElementsByTagName("img")[i].removeAttribute("hspace "); ) )
Preferirei non usarlo javascript, ma in in questo caso Semplicemente non vedo nessun'altra alternativa. Quindi lascia che sia. Ora aggiungiamo l'attributo tipo nell'etichetta ol:
ol (list-style-type:decimal; ) /* Tutti i browser */
E ora l'attributo bgcolor Per corpo:
body ( background-color:transparent; ) /* Tutti i browser */
Tabelle. Il passo finale. Nelle tabelle, in HTML4/4.01, sono presenti numerosi attributi indesiderati che venivano utilizzati attivamente per il layout della pagina. Ma non vogliamo che il cliente utilizzi le tabelle per il layout? Quindi disabilitiamo gli attributi larghezza, altezza, bgcolor, valign E confine:
table,tr,th,td ( larghezza:auto; /* Tutti i browser */ altezza:auto; /* Tutti i browser */ background-color:transparent; /* Tutti i browser */ vertical-align:inherit; /* Tutti i browser (incluso IE) */ border:none /* Tutti i browser */ )
Riassumiamo:
Utilizzando le regole CSS e un Javascript minimo, siamo stati in grado di "disabilitare" la maggior parte dei tag e degli attributi indesiderati preservando elegantemente l'eredità naturale. Non è necessario "insegnare" al cliente, dovrà comunque utilizzare il markup corretto. Tenendo conto di una nota molto importante: è molto importante fornire al cliente un numero sufficiente di classi CSS descritte in modo che non sia limitato nel lavorare con il markup.
Tutti gli stili insieme:
font,basefont ( color:inherit; /* Browser normali */ color:expression(this.parentNode.currentStyle["color"]); /* IE */ font:inherit; /* Browser normali. Carattere invece della dimensione del carattere per Opera */ font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */ font-size:100% /* Tutti i browser */ ) center ( text-align:inherit; / * Browser normali */ text-align:expression(this.parentNode.currentStyle["textAlign"] /* IE */ ) s,strike,u ( text-decoration:inherit; /* Browser normali */ text-decoration : espressione(this.parentNode.currentStyle["textDecoration"]); /* IE */ ) * ( text-align:inherit; ) /* Browser normali */ * ( text-align:expression(this.align ? this. parentNode .currentStyle["textAlign"] : ""); /* IE */ img ( margin:0; border:none; ) /* Tutti i browser */ ol ( list-style-type:decimal; ) /* Tutti browsers */ body ( background-color:transparent; /* Tutti i browser */ ) table,tr,th,td ( width:auto; /* Tutti i browser */ Height:auto; /* Tutti i browser */ background-color: trasparente; /* Tutti i browser */ vertical-align:inherit; /* Tutti i browser (incluso IE) */ border:none; /* Tutti i browser */ )

Traduzione gratuita e preparazione di un articolo basato sui materiali

Sebbene alcune caratteristiche in CSS vengono ereditati automaticamente, potrebbero verificarsi situazioni in cui è necessario aumentare il peso della proprietà ereditata. Specificando ereditarietà per qualsiasi proprietà CSS, applicato a un elemento, passerà il valore calcolato della proprietà dell'elemento genitore a quell'elemento. Specificando nello stile personalizzato che una proprietà eredita il suo valore da un antenato, è possibile aumentarne il peso.

Internet Explorer eredita il supporto

Internet Explorer 7 e versioni successive prime versioni non supportano l'ereditarietà per tutte le proprietà tranne la direzione e la visibilità.

Tipicamente, in assenza di definizioni applicabili, il colore è una proprietà ereditata. Tuttavia, nel caso in cui l'elemento sia un puntatore, la proprietà color è solitamente impostata su blu, nello stile del browser dell'utente. Se vuoi enfatizzare l'importanza di ereditare un valore, puoi utilizzare il valore inherit in un foglio di stile autore o utente, sovrascrivendo le definizioni di stile del browser. In basso seguente esempio, impostiamo la proprietà color dell'elemento p su #000 o nero e specifichiamo che qualsiasi puntatore discendente dovrebbe ereditare il valore color dell'elemento genitore:

P ( colore: #000; ) p a:link ( colore: eredita; )

Quando utilizziamo un'abbreviazione come background , non possiamo mescolare inherit con altri valori. Ad esempio, la seguente dichiarazione di background non è corretta:

P ( sfondo: #fff eredita in alto a sinistra; }

In questo caso, potremmo sperare che questo elemento erediti la proprietà background-image del genitore. Sfortunatamente saremmo sfortunati, perché... ereditare deve avere un valore specifico nella definizione. Nell'esempio precedente, l'ereditarietà non viene interpretata in modo univoco; può essere una proprietà dell'immagine di sfondo o di un allegato di sfondo e il browser dell'utente non può determinare a quale proprietà associarla. Per usare inherit dobbiamo usare l'ortografia completa invece di quella abbreviata. In questo caso, dobbiamo specificare la proprietà background-image.

6 risposte

Come le altre risposte, eredita la proprietà CSS dall'elemento genitore.

Ciò che le altre risposte non sono riuscite a dire è perché ne hai bisogno. Perché alla fine Proprietà CSS ereditato comunque, giusto?

Oh no. La maggior parte di essi lo sono per impostazione predefinita (ma il colore del collegamento non è ereditato dall'elemento genitore, ad esempio). Ma considera questo caso:

P ( colore: blu; ) div.importante ( colore: rosso; )

Questo è un testo

Il testo ora sarà blu anziché rosso. Se vogliamo

Se avesse lo stile dei suoi genitori e non lo stile predefinito, dobbiamo sovrascriverlo con i CSS. Ovviamente potremmo ripetere il valore della proprietà (rosso), ma questo viola DRY (non ripeterti). Invece lo ereditiamo:

Div.importante p ( color: inherit; )

La dichiarazione font:inherit viene utilizzata in molti stili di stile CSS Reset, che vengono spesso copiati in varie librerie e framework. Il ripristino CSS originale di Eric Meyer ha font:inherit . Non viene fornita alcuna motivazione specifica. Si dice che la logica generale sia quella di "ridurre l'incoerenza del browser in cose come l'altezza della riga predefinita, i margini dell'intestazione e le dimensioni dei caratteri, ecc." Ma Meyer si collega ad un post precedente in cui spiega l'idea, dicendo, tra le altre cose: "Voglio tutto perché non voglio dare per scontati gli effetti stilistici. Ha due scopi: primo, mi fa riflettere su cosa , che è un po' più complicato nella semantica del mio documento. utilizzando il ripristino Non scelgo il forte perché il design richiede coraggio. Invece scelgo elemento corretto- che sia forte o em o b o h3 o qualsiasi altra cosa - e poi cancellalo se necessario."

Diversi elementi HTML hanno un rendering predefinito nei browser rispetto alle proprietà dei caratteri: intestazioni, campi modulo, celle di intestazione di tabella, alcuni elementi di frase, ecc. Utilizzando i CSS Reset o più specificamente font: inherit significa che nei browser che supportano inherit , tutti questi elementi vengono visualizzati in carattere del testo copia se non diversamente specificato nel foglio di stile.

COSÌ, stiamo parlando sulla metodologia specifica (o come dicono alcuni, ideologia o religione) di paternità e progettazione. Ha guadagnato popolarità e viene spesso utilizzato regolarmente.

Non tutti i browser ereditano le proprietà dei caratteri per tutti gli elementi. Netscape 4.x è noto per essere pessimo riguardo all'ereditarietà. Considera il seguente stile:

Corpo (fondo: nero; colore: bianco)

In Netscape 4.x, il colore non veniva applicato agli elementi della tabella, quindi per impostazione predefinita otterrai testo nero all'interno di una tabella su sfondo nero.

Le proprietà dei caratteri hanno lo stesso tipo di accordo per alcuni elementi, in particolare gli elementi del modulo (e gli elementi della tabella per i browser meno recenti). Spesso puoi vedere questa definizione:

Tabella, modulo (carattere: inherit)

inherit viene utilizzato per ottenere proprietà dall'elemento genitore. In altre parole, eredita le proprietà dell'elemento genitore.

Per impostazione predefinita la proprietà è inherit , il che significa che hai un div e un p .

Ciao mondo!

Ora dai lo stile:

Div (famiglia di caratteri: Tahoma;) p (famiglia di caratteri: eredita;)

Questa famiglia di caratteri è ereditata per p dal suo genitore elemento div.

Usare (font:inherit;) nei CSS ha senso perché vari user agent (browser a.k.a.) hanno un foglio di stile dell'user agent (leggi: foglio di stile predefinito) con qualcosa come

Corpo ( font: -magic-font-from-user-preferences; ) textarea, input ( font: monospace; )

(font:inherit;) viene utilizzato per bypassare occasione speciale quando font o font-family non vengono ereditati per impostazione predefinita a causa del foglio di stile del programma utente, ma l'autore del contenuto desidera che la famiglia di font venga ereditata.

Il comportamento effettivo dell'agente utente con inherit è purtroppo diverso da vari errori. Tuttavia, il risultato potrebbe essere più vicino all'intento dell'autore rispetto a quello predefinito.

Opzioni dei caratteri

Cominciamo con gli attributi di stile, che specificano i parametri del carattere con cui viene digitato il testo. Dopotutto, il testo nelle pagine Web è il capo di tutto.

L'attributo font-family style specifica il nome del carattere in cui verrà visualizzato il testo:

famiglia di font: <список имен шрифтов, разделенных запятыми> |ereditare

I nomi dei caratteri vengono specificati come nomi, ad esempio Arial o Times New Roman. Se il nome del carattere contiene spazi, deve essere racchiuso tra virgolette:

P (famiglia di caratteri:Arial)

H1 (famiglia di caratteri: "Times New Roman")

Se questo attributo style è presente nello stile in linea, le virgolette vengono sostituite con apostrofi:

Se il carattere da noi specificato è presente sul computer del visitatore, programma di navigazione in rete lo usa. Se non esiste un carattere di questo tipo, il testo viene visualizzato nel carattere specificato nelle impostazioni predefinite. E la nostra pagina Web potrebbe non avere l'aspetto che intendevamo. (Tuttavia, i caratteri Arial e Times New Roman sono presenti su qualsiasi computer che esegue Windows.) È possibile specificare diversi nomi di caratteri separati da virgole:

P (famiglia di caratteri: Verdana, Arial)

Quindi il browser Web cercherà prima il primo dei caratteri specificati, se la ricerca non ha successo: il secondo, poi il terzo, ecc. Invece del nome carattere specificoè possibile specificare il nome di uno di famiglie di caratteri, che rappresenta interi set di caratteri simili. Esistono cinque famiglie di questo tipo: serif (caratteri serif), sans-serif (caratteri sans-serif), corsivo (caratteri che imitano il testo scritto a mano), fantasy (caratteri decorativi) e monospace (caratteri monospace):

H2 (famiglia di caratteri: Verdana, Arial, sans-serif)

Il valore speciale inherit specifica che il testo di questo elemento della pagina Web deve avere lo stesso carattere del testo dell'elemento genitore. In questo caso, si dice che l'elemento della pagina Web "eredita" il carattere dal suo elemento genitore. Questo, tra l'altro, è il valore predefinito dell'attributo font-family style. L'attributo di stile font-size specifica la dimensione del carattere:

dimensione del font: <размер >|xx-piccolo|x-piccolo|piccolo|medio|grande|x-grande|xx-grande|più grande|più piccolo|eredita

La dimensione del carattere può essere specificata in valori assoluti e relativi. Per fare ciò, usa uno di unità di misura, supportato dai CSS (Tabella 8.1).

Tabella 8.1. Unità di dimensione supportate dallo standard CSS

La designazione dell'unità di misura selezionata è indicata dopo il valore stesso:

P (dimensione carattere: 10pt) STRONG (dimensione carattere: 1 cm) EM (dimensione carattere: 150%)

Si noti che tutto riportato nella tabella. Le unità 8.1 sono adatte per impostare i valori di altri attributi di stile CSS.

Oltre che numerico attributo dimensione carattere possono assumere anche valori simbolici. Pertanto, i valori da xx-small a xx-large specificano sette dimensioni di carattere predefinite, dalla più piccola alla più grande. E i valori più grandi e più piccoli rappresentano la dimensione del carattere successiva, rispettivamente, in ordine ascendente e discendente. Ad esempio, se l'elemento genitore è impostato su una dimensione di carattere media, più grande imposterà l'elemento corrente su una dimensione di carattere grande.

Il valore ereditario lo indica questo elemento Le pagine Web devono avere la stessa dimensione del carattere dell'elemento principale. Questo è il valore predefinito dell'attributo di stile font-size.

L'attributo color style specifica il colore del testo:

colore: <цвет> |ereditare

IN capitolo 7 Abbiamo accennato al fatto che il colore può essere specificato dal cosiddetto codice RGB (Rosso, Verde, Blu - rosso, verde, blu). È scritto nel formato

#<доля красного цвета><доля зеленого цвета><доля синего цвета> ,

dove nel modulo sono indicate le quote di tutti i colori numeri esadecimali dalle 00 alle FF. Impostiamo il colore del testo su rosso:

H1 (colore: #FF0000) E ora colore grigio: INDIRIZZO (colore: #CCCCCC)

Inoltre, i CSS ti consentono di specificare i colori per nome. Quindi, il valore nero corrisponde a nero, bianco - bianco, rosso - rosso, verde - verde e blu - blu.

H1 (colore: rosso)

Lista completa i nomi e i colori corrispondenti possono essere trovati nella pagina Web http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .

Il valore ereditario specifica che questo elemento della pagina Web dovrebbe avere lo stesso colore del carattere dell'elemento principale. Questo è il valore predefinito dell'attributo di stile font-size.

ATTENZIONE!

Quasi tutti gli attributi supportano il valore ereditario Stile CSS. Indica al browser Web che l'elemento della pagina Web a cui è associato lo stile "eredita" il valore del parametro corrispondente dall'elemento genitore. Questo è il valore predefinito per tutti gli attributi. In quanto segue non lo descriveremo dato valore per ogni attributo di stile; se qualche attributo di stile non lo supporta, lo menzioneremo specificamente.

Utilizzando l'attributo color style possiamo, ad esempio, impostare il colore linea orizzontale HTML.

L'attributo stile opacità consente di specificare il grado di traslucenza di un elemento di una pagina Web:

opacità:<числовое значение>|ereditare

Il valore di traslucenza è un numero compreso tra 0 e 1, dove 0 indica piena trasparenza elemento (ovvero l'elemento non è effettivamente visibile) e 1 è completamente opaco (questo è un comportamento normale).

Ecco un esempio di impostazione della mezza trasparenza (valore 0,5) per il testo a formattazione fissa:

PRE (opacità: 0,5)

Nota, come abbiamo indicato un numero frazionario- Al posto della virgola viene utilizzato il punto.

SU UNA NOTA

La traslucenza è solitamente utile solo per la creazione effetti speciali. IN testo semplice Se ne sconsiglia l'utilizzo in quanto potrebbe scoraggiare il visitatore.

L'attributo di stile font-weight imposta lo spessore del carattere:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|eredita

Qui sono disponibili sette valori assoluti da 100 a 900, che rappresentano diversi pesi di carattere, dal minimo al massimo; in questo caso, un carattere normale avrà un “audace” di 400 (o normale), e un carattere semi-grassetto avrà un “peso” di 700 (o grassetto). Il valore predefinito è 400 (normale). I valori più audaci e più leggeri sono relativi e rappresentano i successivi gradi di “grassezza”, rispettivamente verso l’alto e verso il basso.

CODICE (peso carattere: grassetto)

L'attributo font-style specifica lo stile del carattere:

stile carattere: normale|italico|obliquo|eredita

Sono disponibili tre valori, che rappresentano il carattere normale, il corsivo e uno stile decorativo speciale simile al corsivo (obliquo).



L'attributo text-decoration style specifica la "decorazione" (sottolineato o barrato) che verrà applicata al testo:

decorazione del testo: none|underline|overline|line-through|blink|inherit

Sono disponibili cinque valori qui (senza contare l'ereditarietà):

Nessuno rimuove tutte le decorazioni specificate per il carattere dell'elemento genitore;

Sottolineato enfatizza il testo;

Overline “sovralinea” il testo, ovvero traccia una linea sopra le righe;

Il testo barrato viene cancellato;

Blink fa tremolare il carattere (on questo momento non supportato da Safari).

ATTENZIONE!

Non dovresti sottolineare il testo se non necessario. Il problema è che i browser Web visualizzano i collegamenti ipertestuali come sottolineati per impostazione predefinita e il testo sottolineato che non è un collegamento ipertestuale può creare confusione per il visitatore.

L'attributo di stile font-variant ti consente di specificare come il file minuscolo font:

variante carattere: normal|small-caps|inherit

Il valore del maiuscoletto imposta il comportamento del carattere, quando le sue lettere minuscole sembrano esattamente uguali alle lettere maiuscole, hanno solo taglia più piccola. Il valore normale imposta il carattere su lettere maiuscole normali.

L'attributo di stile di trasformazione del testo ti consente di modificare il caso dei caratteri di testo:

trasformazione testo: maiuscolo|maiuscolo|minuscolo|none|eredita

Possiamo convertire il testo in maiuscolo (il valore maiuscolo di questo attributo) o minuscolo (minuscolo), convertire la prima lettera di ogni parola in maiuscolo (maiuscolo) o lasciarlo così com'è (nessuno).

L'attributo di stile line-height specifica l'altezza di una riga di testo:

altezza della riga: normale| <расстояние> |ereditare

Qui puoi impostare assoluto e dimensione relativa distanze specificando l'unità appropriata Dimensioni CSS(vedi tabella 8.1). Se è assente, il valore che impostiamo viene prima moltiplicato per l'altezza del carattere corrente e poi utilizzato. Quindi per raddoppiare la normale altezza della linea, possiamo scrivere:

P (altezza della linea: 2)

Il valore normale di questo attributo restituisce il controllo dell'altezza della linea al browser Web.

L'attributo di stile letter-spacing ti consente di specificare uno spazio aggiuntivo tra i caratteri del testo:

spaziatura delle lettere: normale| <расстояние>

Tieni presente che questa è solo una distanza aggiuntiva; verrà aggiunto a quello originale installato dal browser Web stesso.

Qui puoi anche impostare la distanza assoluta e relativa specificando l'unità CSS appropriata (vedi Tabella 8.1). La distanza può essere positiva o negativa; V quest'ultimo caso i caratteri dei font verranno spaziati più vicini tra loro del solito. Il valore normale imposta la distanza extra predefinita su zero.

L'attributo di stile di spaziatura delle lettere non supporta il valore di eredità.

Ecco un esempio di impostazione della distanza aggiuntiva tra i caratteri su cinque pixel:

H1 (spaziatura tra lettere: 5px)

Il testo digitato con tali caratteri apparirà scarso.

E qui impostiamo la distanza aggiuntiva negativa tra i caratteri su due pixel:

H6 (spaziatura tra lettere: -2px)

Questi due pixel verranno sottratti dalla distanza originale, facendo sì che i caratteri si avvicinino e il testo sembri compresso. Forse i simboli si sovrapporranno addirittura tra loro.

Attributo simile lo stile di spaziatura delle parole specifica uno spazio aggiuntivo tra le singole parole del testo:

spaziatura delle parole: normale| <расстояние>

H1 (spaziatura tra le parole: 5 mm)

Beh, 5 mm forse sono un po' troppi... Anche se questo è solo un esempio.

Infine, diamo un'occhiata all'attributo stile del carattere, che ti consente di impostare più parametri del carattere contemporaneamente:

carattere: [ <начертание> ] [<вид строчных букв> ] [<"жирность"> ] [<размер> ] <имя шрифта>

Come puoi vedere, è richiesto solo il nome del carattere: potrebbero mancare altri parametri.

Imposta il testo del paragrafo sulla dimensione del carattere Times New Roman 10 punti:

P (carattere: 10pt "Times New Roman")

E per le intestazioni di sesto livello - dimensione carattere Arial 12 punti e stile corsivo:

H6 (carattere: corsivo 12pt Verdana)

I migliori articoli sull'argomento