Etichetă cu indicativ. Se face majuscule CSS
Etichete HTML și - Text de subindice și superindice
Definiție și utilizare
Etichetă definește textul indicelui. Indicele este la jumătate din înălțime și apare sub linia de bază. Indiceul poate fi utilizat atunci când scrieți formule chimice precum H 2 O.
Etichetă definește textul cu superscript. Textul cu indicativ este la jumătate din înălțime și apare deasupra liniei de bază. Superscriptul poate fi utilizat atunci când scrieți note de subsol precum WWW.
Suport pentru browser
Etichete: și acceptat de toate browserele majore.
Diferențe între HTML și XHTML
Atribute standard
Coloană DTD specifică în ce tip de document HTML 4.01 / XHTML 1.0 DTD este permis atributul. S = strict, T = tranzitoriu și F = set de cadre.
Etichete: și acceptă următoarele atribute standard:
Atribut | Sens | Descriere | DTD |
---|---|---|---|
clasă | numele clasei | Specifică numele clasei pentru un element | STF |
dir | rtl ltr |
Specifică direcția textului pentru conținutul unui element | STF |
id | identificator | Specifică un identificator unic pentru un articol | STF |
lang | language_code | Specifică codul de limbă pentru conținutul unui element | STF |
stil | stil_definiție | Specifică un stil în linie pentru un element | STF |
titlu | text | Specifică informații suplimentare despre un articol | STF |
xml: lang | language_code | Definește codul de limbă pentru conținutul elementului în documentele XHTML | STF |
Aflați mai multe despre atributele standard.
Atribute eveniment
Etichete: și acceptă următoarele atribute de eveniment:
Atribut | Sens | Descriere | DTD |
---|---|---|---|
onclick | scenariu | Script cu clic pe mouse | STF |
ondblclick | scenariu | Script dublu clic | STF |
onmousedown | scenariu | Script pentru a rula cu un clic de mouse | STF |
onmousemove | scenariu | Script pentru a rula când cursorul mouse-ului este mutat | STF |
onmouseout | scenariu | Script pentru a rula când mouse-ul se deplasează în afara elementului | STF |
onmouseover | scenariu | Script pentru a rula atunci când indicatorul mouse-ului se deplasează peste un element | STF |
onmouseup | scenariu | Script pentru a rula când butonul mouse-ului este eliberat | STF |
onkeydown | scenariu | Script pentru a rula la apăsarea unei taste | STF |
onkeypress | scenariu | Script pentru a rula când o tastă este apăsată și apoi eliberată | STF |
onkeyup | scenariu | Script pentru a rula la eliberarea unei chei | STF |
Informații suplimentare despre
Indexul în raport cu textul este compensarea caracterelor de la linia de bază în sus sau în jos. În funcție de valoarea de compensare pozitivă sau negativă, indicele este denumit sus, respectiv jos. Ele sunt utilizate în mod activ în matematică, fizică, chimie și pentru a desemna unități de măsură. HTML oferă două elemente pentru crearea unui index: (din engleză superscript) - superscript și (din engleză subscript) - subscript. Textul plasat într-unul dintre aceste containere este desemnat mai mic decât textul de bază și este decalat în sus sau în jos față de acesta. Exemplul 1 arată combinația elementelor și stilurilor specificate pentru a schimba aspectul textului.
Exemplul 1. Creați un index și un index
Ecuația caracteristică a unei suprafețe de gradul al doilea
λ 3- Eu 1λ 2+ Eu 2λ - Eu 3 = 0
Exemplul conține în același timp atât indice, cât și superindice. Pentru a modifica stilul de font al indexului, se aplică stiluri care stabilesc un aspect uniform (Fig. 1).
Orez. 1. Vizualizarea indexurilor după aplicarea stilurilor
Puteți refuza complet utilizarea și în favoarea stilurilor. Analogul acestor elemente este proprietatea de aliniere verticală, care obligă textul să fie deplasat vertical cu o distanță specificată. În mod specific, Exemplul 2 folosește 0.8em pentru supercript și -0.5em pentru subscript ca valoare. Em este o unitate relativă egală cu dimensiunea fontului curent. De exemplu, 0.5em înseamnă că textul ar trebui să fie deplasat la jumătate din dimensiunea fontului.
Exemplul 2. Utilizarea stilurilor pentru gestionarea indexurilor
Polinom de grad n
f (x) = a 0+ a 1 x + ... + a n-1 X n-1+ a n X n
În exemplu, formula în sine este afișată într-o dimensiune mărită, caracterele supercript sunt setate în roșu, iar cele inferioare - în albastru (Fig. 2).
Convertiți litere mici în minuscule și prima majuscule folosind CSS (8)
Nu există nicio opțiune de sugestie de limită în CSS. Celelalte răspunsuri sugerând transformarea textului: majuscule sunt greșite, deoarece acest parametru folosește fiecare cuvânt pentru fiecare cuvânt .
Aici nepoliticos o modalitate de a o face dacă vrei prima literă a fiecărui articol a fost cu majuscule, dar cu siguranță acest lucru nu se apropie nici de limitele reale:
P (transformare text: minuscule;) p: prima literă (transformare text: majuscule;)
Aceasta este o propoziție de exemplu.
Aceasta este o altă propoziție de exemplu. ȘI ACESTA ESTE ALTĂ, DAR VA FI ÎNTREGUT MINUSCULĂ.
Cum pot converti litera MAJUSCULĂ în minusculă și prima literă majusculă pentru fiecare propoziție așa cum se arată mai jos folosind numai CSS?
Din: Acesta este un exemplu de aplicație.
La: Aceasta este o sugestie dură.
Actualizați: când folosesc text-transform: capize; Rezultatul este în continuare același.
Nu puteți face acest lucru doar cu CSS. Există un atribut text-transform, dar nu acceptă niciunul, scrie cu majuscule, majuscule, minuscule și moștenește.
S-ar putea să doriți să căutați o soluție JS sau o soluție pe partea de server.
Dacă puteți face ca toate caracterele să fie minuscule pe server, puteți aplica:
Transformare text: valorificați
Nu cred că conversia textului va funcționa cu litere mari ca intrare.
Dacă doriți să utilizați pentru nu va funcționa, pentru sau zonă text trebuie să utilizați Javascript
pentru care ar trebui să funcționeze bine sau
De câteva lecții acum, am lucrat cu greu la formatarea textului folosind CSS și de această dată învățăm cum să schimbăm cazul textului. În acest sens, foile de stil în cascadă ne deschid posibilități foarte largi sau, mai exact, putem:
- Afișează tot textul cu litere mari;
- Selectați tot textul cu litere mici;
- Faceți ca prima literă a fiecărui cuvânt să înceapă cu majuscule.
"Totul este bine, desigur, dar când poate fi nevoie?" - tu intrebi. Imaginați-vă o situație în care doriți să afișați toate elementele de meniu cu majuscule. Pentru a face acest lucru, nu este necesar să le tastați, inclusiv tasta CapsLock, sau în timp ce țineți apăsată tasta Shift. Va fi suficient să setați toate elementele listei pentru a fi afișate cu majuscule, creând o regulă corespunzătoare în fișierul CSS. Și aceasta este doar una dintre multele situații posibile.
Proprietatea text-transform
Vom controla cazul textului folosind proprietatea text-transform. Are 4 valori principale - majuscule (majuscule), minuscule (minuscule), cu majuscule (majuscule pentru fiecare primă literă a cuvântului, restul valorilor nu se modifică), niciuna (nu se aplică formatare) . La prima vedere, toate acestea îți pot părea foarte complicate.
Principalul lucru nu este să intrați în panică ...
Dar, în practică, totul este destul de simplu, așa cum veți vedea acum. Principalul lucru este să alegeți selectorul corect, deoarece valorile proprietății de transformare a textului sunt moștenite.
Selectați cu majuscule
Primul lucru pe care îl sugerez este să scriem cu majuscule tot textul, pentru care creăm următoarea regulă CSS:
Corp (text-transformare: majuscule;)
În principiu, nimic complicat, doar am folosit valoarea cu majuscule. După cum se spune, totul este intuitiv. Așa arată în viața reală:
Totul cu majusculă ...
Minuscule - se aplică tuturor
În pasul următor, să aplicăm minuscule peste tot, pentru care scriem următoarele:
Corp (transformare text: minuscule;)
După cum ați fi putut ghici, cele două semnificații pe care tocmai le-am întâlnit sunt oarecum antonime. Și în ilustrația de mai jos, puteți vedea rezultatul proprietății nou create.
Pagină web cu minuscule activată
Cu majusculă prima literă a fiecărui cuvânt
Pentru a face acest lucru, trebuie doar să folosim valoarea corespunzătoare:
Corp (text-transform: majuscule;)
Nu știu cât de des vei folosi o astfel de regulă CSS, dar nu te va strica să afli despre o astfel de posibilitate, mai ales atunci când rezolvi probleme non-banale. Rezultatul poate fi văzut în imaginea de mai jos.
Text după majuscule aplicate
În cele din urmă, să aruncăm o privire rapidă la ultima valoare, niciuna. După cum am spus, poate fi folosit pentru a inversa moștenirea de la un părinte. De exemplu, să ne imaginăm că avem în vigoare toate regulile anterioare, iar pentru paragrafe ar trebui să le anulăm, pentru aceasta scriem următoarele:
P (text-transform: none;)
Îndrăznesc să presupun că înțelegeți totul, dacă nu - puneți-vă întrebările în comentarii. Și asta e tot pentru mine. Sper că ați găsit util acest tutorial CSS. Dacă este adevărat:
- Repetați acest articol pe rețelele sociale, astfel încât mai mulți oameni să poată beneficia de el;
- Abonați-vă la newsletter-ul meu pentru a nu rata postări utile și interesante pe blog.
Nu îmi iau rămas bun de la tine. Vă mulțumim pentru atenție și ne vedem în următoarele publicații!
CSS permite personalizarea flexibilă a textului prezentat utilizând limbajul HMTL. Astăzi ne vom uita la efectul proprietății „text-transform”, care face posibilă schimbarea majusculelor unui font. Această opțiune este acceptată de toate browserele moderne și este inclusă în specificațiile tuturor versiunilor CSS.
Programare
Proprietatea „text-transform” poate lua trei valori principale și două suplimentare. De exemplu, puteți atribui majuscule textului selectat. Sau puteți da o comandă opusului proprietății anterioare, unde toate caracterele devin mici. Puteți face o programare folosind orice metodă convenabilă pentru dvs. De exemplu, folosirea stilurilor în linie. Sau poți crea
Un fișier separat cu o descriere a tuturor proprietăților. Ce mod de atribuire să utilizați depinde de dvs. „Transformare text” poate lua următoarele valori:
- Majuscule. Cu majuscule toate caracterele selectate. Majusculele sunt comune în CSS, deoarece această valoare poate ajuta la rezolvarea multor probleme complexe legate de text.
- Minuscule. Această proprietate este complet opusă comenzii majuscule.
- Valorifica. Schimbă majusculele cu majusculele. Restul personajelor nu vor fi modificate.
- Nici unul. Vă permite să renunțați la toate valorile atribuite (necesare pentru predefinirea unei proprietăți). De obicei, această valoare este setată implicit.
- Moşteni. Moștenește toate proprietățile de la elementul părinte. Trebuie remarcat faptul că IE nu acceptă această proprietate.
Cerere
Cu CSS, majuscule (sau efecte similare) sunt setate cu o singură comandă simplă. Prin urmare, nu este nevoie să modificați sau să rescrieți întregul text. Dacă vorbim despre un site cu o singură pagină, este posibil ca această proprietate să nu fie utilă. Dar când aveți un portal imens sub controlul dvs., unde trebuie să corectați cazul literelor din anumite fragmente, atunci „transformarea textului” devine singurul instrument eficient. De exemplu, trebuie să remediați fontul în etichetele de titlu „h2”. Pentru a face acest lucru, adăugați intrarea: "h2 (text-transformare: majusculă;)", iar apoi toate titlurile de nivel secundar vor fi majuscule.
Particularități
Unii ar putea crede că manipularea manuală a textului și modificarea fontului folosind proprietatea „text-transform” nu face nicio diferență. Dar nu este cazul. Dacă îl schimbați manual în majuscule (majuscule), atunci când copiați aceste informații de pe site-ul dvs., caracterele vor rămâne neschimbate. Dacă utilizați CSS, lucrurile stau altfel. Proprietatea „text-transform” modifică vizual fontul doar pentru utilizatori. Dar, în realitate, simbolurile rămân neschimbate. Acest lucru se întâmplă cu toate valorile pentru această proprietate. Informațiile copiate (text) vor avea versiunea originală, care este utilizată în codul sursă al paginii. Aceasta este singura diferență între procesarea manuală și utilizarea comenzilor CSS.
Nu contează pe care doriți să o utilizați - minuscule sau mici, principalul lucru este să nu uitați scopul. De exemplu, dacă aveți nevoie doar de modificări în scopuri decorative, atunci puteți utiliza în siguranță proprietatea „text-transform”. Ei bine, dacă știți că utilizatorii dvs. vor copia probabil informațiile pe care le-ați postat, atunci cel mai bine este să schimbați manual majusculele și minusculele. Într-adevăr, uneori cititorii nu observă o astfel de modificare a fontului. Acest lucru este deosebit de important atunci când vine vorba de documente importante și informații similare.