Da diverse lezioni ormai, ci siamo davvero fantasiosi con la formattazione del testo con i CSS, e questa volta stiamo imparando come cambiare il caso del testo. A questo proposito, i fogli di stile a cascata ci aprono possibilità molto ampie, o più precisamente possiamo:
- Visualizza tutto il testo in lettere maiuscole;
- Seleziona tutto il testo in lettere minuscole;
- Fai in modo che la prima lettera di ogni parola inizi con la maiuscola.
"Va tutto bene, naturalmente, ma quando potrebbe essere necessario?" - tu chiedi. Immagina una situazione in cui desideri visualizzare tutte le voci di menu in lettere maiuscole. Per fare ciò, non è necessario digitarli, incluso il tasto CapsLock, o tenendo premuto il tasto Maiusc. Sarà sufficiente impostare tutti gli elementi della lista da visualizzare in maiuscolo creando una regola corrispondente nel file CSS. E questa è solo una delle tante possibili situazioni.
La proprietà di trasformazione del testo
Controlleremo il caso del testo usando la proprietà text-transform. Ha 4 valori principali: maiuscolo (lettere maiuscole), minuscolo (lettere minuscole), maiuscolo (maiuscolo per ogni prima lettera della parola, il resto dei valori non cambia), nessuno (non viene applicata alcuna formattazione) . A prima vista, tutto questo può sembrare molto complicato per te.
L'importante è non farsi prendere dal panico... Ma in pratica, tutto è abbastanza semplice, come vedrai ora. La cosa principale è scegliere il selettore giusto, perché i valori della proprietà di trasformazione del testo sono ereditati.
Seleziona in maiuscolo
La prima cosa che suggerisco è di mettere in maiuscolo tutto il testo, per cui creiamo la seguente regola CSS:
Corpo (trasformazione del testo: maiuscolo;)
In linea di principio, niente di complicato, abbiamo usato solo il valore maiuscolo. Come si suol dire, tutto è intuitivo. Ecco come appare nella vita reale:
Tutto con la maiuscola... Minuscolo - si applica a tutti
Nel passaggio successivo, applichiamo le lettere minuscole ovunque, per le quali scriviamo quanto segue:
Corpo (trasformazione del testo: minuscolo;)
Come avrai intuito, i due significati che abbiamo appena incontrato sono in qualche modo contrari. E nell'illustrazione qui sotto, puoi vedere il risultato della proprietà appena creata.
Pagina Web con le minuscole abilitate Maiuscola la prima lettera di ogni parola
Per fare ciò, dobbiamo solo utilizzare il valore corrispondente:
Corpo (trasformazione del testo: maiuscolo;)
Non so quanto spesso utilizzerai una tale regola CSS, ma non ti farà male conoscere una tale possibilità, specialmente quando risolvi problemi non banali. Il risultato è visibile nell'immagine sottostante.
Testo dopo l'applicazione della maiuscola Infine, diamo una rapida occhiata all'ultimo valore, nessuno. Come ho detto, può essere usato per invertire l'ereditarietà da un genitore. Ad esempio, immaginiamo che tutte le regole precedenti valgano per noi, e per i paragrafi dovremmo cancellarle, per questo scriviamo quanto segue:
P (trasformazione di testo: nessuna;)
Oserei presumere che tu capisca tutto, in caso contrario - fai le tue domande nei commenti. E questo è tutto per me. Spero che tu abbia trovato utile questo tutorial CSS. Se è vero:
- Ripubblica questo articolo sui social network in modo che più persone possano beneficiarne;
- Iscriviti alla mia mailing list per non perdere post di blog utili e interessanti.
Su questo non ti dico addio. Grazie per l'attenzione e ci vediamo nelle seguenti pubblicazioni!
I CSS consentono una personalizzazione flessibile del testo presentato utilizzando il linguaggio HTML. Oggi esamineremo l'effetto della proprietà "text-transform", che rende possibile modificare il caso di un font. Questa opzione è supportata da tutti i browser moderni ed è inclusa nelle specifiche di tutte le versioni CSS.
Appuntamento
La proprietà "text-transform" può assumere tre valori primari e due aggiuntivi. Ad esempio, puoi assegnare una maiuscola a tutto il testo selezionato. In alternativa, puoi dare un comando all'opposto della proprietà precedente, dove tutti i caratteri diventano minuscoli. Puoi fissare un appuntamento utilizzando qualsiasi metodo conveniente per te. Ad esempio utilizzando gli stili in linea. Oppure puoi creare
Un file separato con una descrizione di tutte le proprietà. Quale modalità di assegnazione utilizzare dipende da te. "Text-transform" può assumere i seguenti valori:
- Maiuscolo. Rende maiuscoli tutti i caratteri selezionati. Il maiuscolo è comune nei CSS, poiché questo valore può aiutare a risolvere molti problemi complessi relativi al testo.
- Minuscolo. Questa proprietà è esattamente l'opposto del comando maiuscolo.
- Capitalizzare. Cambia il caso della prima lettera in maiuscolo. Il resto dei personaggi non verrà modificato.
- Nessuno. Consente di scartare tutti i valori assegnati (necessari per predefinire una proprietà). In genere, questo valore è impostato per impostazione predefinita.
- Ereditare. Eredita tutte le proprietà dall'elemento padre. Va notato che IE non supporta questa proprietà.
Applicazione
Con i CSS, le maiuscole (o effetti simili) vengono impostate con un semplice comando. Pertanto, non è necessario modificare o riscrivere l'intero testo. Se stiamo parlando di un sito di una pagina, questa proprietà potrebbe non essere utile. Ma quando hai un enorme portale sotto il tuo controllo, dove devi correggere il caso delle lettere in determinati frammenti, allora la "trasformazione del testo" diventa l'unico strumento efficace. Ad esempio, è necessario correggere il carattere nei tag di intestazione "h2". Per fare ciò, aggiungi la voce: "h2 (text-transform: maiuscolo;)", quindi tutte le intestazioni di secondo livello saranno maiuscole.
Peculiarità
Alcuni potrebbero pensare che la manipolazione manuale del testo e la modifica del carattere utilizzando la proprietà "trasformazione del testo" non faccia alcuna differenza. Ma questo non è il caso. Se lo cambi manualmente in maiuscolo (maiuscolo), quando copi queste informazioni dal tuo sito, i caratteri rimarranno invariati. Se usi i CSS, le cose sono diverse. La proprietà "text-transform" cambia solo visivamente il carattere per gli utenti. Ma in realtà i simboli rimangono invariati. Questo accade con tutti i valori di questa proprietà. Le informazioni copiate (testo) avranno il caso originale, che viene utilizzato nel codice sorgente della pagina. Questa è l'unica differenza tra il rendering manuale e l'utilizzo dei comandi CSS.
Non importa quale tu voglia usare - minuscolo o maiuscolo, l'importante è non dimenticare lo scopo. Ad esempio, se hai bisogno di modifiche solo per scopi decorativi, puoi tranquillamente utilizzare la proprietà "trasformazione del testo". Bene, se sai che i tuoi utenti probabilmente copieranno le informazioni che hai pubblicato, allora è meglio cambiare manualmente il caso di tutto il testo. In effetti, a volte i lettori non notano un tale cambiamento di carattere. Questo è particolarmente importante quando si tratta di documenti importanti e informazioni simili.
Nell'ultimo video tutorial, abbiamo imparato come eliminare e aggiungere nuove informazioni a una nuova versione di un documento HTML, informando i motori di ricerca ed evidenziandolo visivamente in modo che anche i visitatori possano vedere le modifiche. Per questo, abbiamo utilizzato i tag del e ins.
In questo video tutorial, continuiamo l'argomento della formattazione del testo in un documento HTML. Daremo un'occhiata a due tag HTML che indicano l'apice e il pedice del testo.
Il tag HTML sup è l'apice del testo in HTML.
tag HTML serve per specificare l'apice del testo in HTML. In alcuni argomenti del sito, questo tag sarà semplicemente insostituibile. Ad esempio, se hai o stai pianificando un sito associato a qualsiasi formula, matematica o chimica. Oppure, se c'è un cantiere, allora il tag sarà molto utile e aiuterà nella progettazione di articoli, quando si scrivono formule o qualsiasi quantità, ad esempio metri quadrati nell'argomento costruzione.
Ma se il tuo sito non appartiene agli argomenti elencati, questo non significa che il tag non tornerà utile. Basta mostrare immaginazione e ingegno e trovare un'applicazione per questo elemento.
Sottotag HTML - il pedice del testo in HTML.
Per quanto riguarda il tag HTML allora è l'opposto del tag , ed è responsabile di specificare il pedice del testo. Il pedice del testo può essere utilizzato durante la scrittura di formule o equazioni matematiche. Ma oltre a questo, potresti essere in grado di trovare altri usi per il tag. .
La prossima Video Lezione è dedicata ad altri due tag, che in alcune situazioni possono essere semplicemente insostituibili. Inoltre, sono in grado non solo di formattare il testo, ad esempio in un articolo, ma anche di specificare varie informazioni sul sito durante l'impaginazione. Uno dei tag si avvolge in HTML e l'altro disegna una linea orizzontale.
Ciao. A volte, quando si creano pagine web, è necessario impostare alcune parole usando css in posizione maiuscola o apice. Vediamo come si fa.
Maiuscole e minuscole con css
In generale, anche oggi puoi racchiudere il testo desiderato nei tag e ottieni il display che desideri, ma vediamo anche come si può fare con css, perché la tecnica è leggermente diversa.
Ad esempio, devi scrivere la formula H 2 O in un documento html. Questo è fatto in questo modo:
- La formula stessa è scritta
- Quelle parole e numeri che devono essere visualizzati in apice o pedice sono racchiusi in un tag span, a cui deve essere assegnata una classe. Per esempio: caratteri da emettere
- In css, devi impostare questo elemento:
Indice principale (
Allineamento verticale: super;
}
Questa proprietà è responsabile dell'allineamento verticale del testo. Il suo super valore specifica che il testo viene visualizzato come apice. Ma la dimensione del carattere rimane la stessa di quella del testo normale. Per rendere le cose più belle, devi anche impostare la dimensione del carattere leggermente più piccola usando la proprietà font-size.
Ecco come funziona semplicemente la proprietà. Di conseguenza, per visualizzare in pedice, è necessario scrivere in questo modo:
Indice principale (
Allineamento verticale: sub;
}
La differenza da tag html simili è che queste regole non cambiano la dimensione del carattere, quindi se devi farlo, dovrai registrare la nuova dimensione nel foglio di stile.
Questo è tutto ciò che devi sapere su apice e pedice in css. La proprietà non offre ulteriori opportunità e non sono nemmeno necessarie. Se lo desideri, puoi in qualche modo personalizzare questo testo, ma raramente è necessario.
Dove può tornare utile?
Il testo in apice e pedice può essere utilizzato durante la scrittura di formule, l'aggiunta di note e segni agli articoli. Ad esempio, Wikipedia elenca fonti e note per ogni articolo. Nel corso dell'articolo, sono collocati sotto forma di piccoli apici. Ciò non irrita i lettori e allo stesso tempo consente di dare agli articoli l'aspetto desiderato.
La proprietà è completamente cross-browser e supportata in tutte le versioni di CSS.
L'indice in relazione al testo è l'offset dei caratteri dalla linea di base verso l'alto o verso il basso. A seconda del valore di offset positivo o negativo, l'indice è chiamato rispettivamente superiore o inferiore. Sono attivamente utilizzati in matematica, fisica, chimica e per designare unità di misura. HTML offre due elementi per creare un indice: (dall'apice inglese) - apice e (dal pedice inglese) - pedice. Il testo posizionato in uno di questi contenitori è designato come più piccolo del testo di base ed è spostato verso l'alto o verso il basso rispetto ad esso. L'esempio 1 mostra la combinazione degli elementi e degli stili specificati per modificare l'aspetto del testo.
Esempio 1. Creare apice e pedice
Equazione caratteristica di una superficie di secondo grado
λ 3- IO 1λ 2+ io 2- io 3 = 0
L'esempio contiene contemporaneamente pedice e apice. Per modificare lo stile del carattere dell'indice, vengono applicati stili che stabiliscono un unico aspetto (Fig. 1).
Riso. 1. Visualizzazione degli indici dopo l'applicazione degli stili
Puoi rifiutarti completamente di usare e a favore degli stili. L'analogo di questi elementi è la proprietà di allineamento verticale, che forza lo spostamento verticale del testo di una distanza specificata. In particolare, l'Esempio 2 usa 0.8em per l'apice e -0.5em per il pedice come valore. Em è un'unità relativa uguale alla dimensione del carattere corrente. Ad esempio, 0,5 em significa che il testo deve essere spostato della metà della dimensione del carattere.
Esempio 2. Utilizzo degli stili per gestire gli indici
Polinomio di grado n
f (x) = a 0+ a 1 x + ... + a n-1 X n-1+ a n X n
Nell'esempio, la formula stessa viene visualizzata in una dimensione ingrandita, i caratteri in apice sono impostati in rosso e quelli inferiori in blu (Fig. 2).
