CSS omogućuje fleksibilnu prilagodbu teksta, koji se prikazuje pomoću HMTL jezika. Danas ćemo pogledati učinak svojstva "text-transform", koje omogućuje promjenu veličine fonta. Ovu opciju podržavaju svi moderni preglednici i uključena je u specifikaciju svih verzija CSS-a.
Svrha
Svojstvo "text-transform" može uzeti tri glavne vrijednosti i dvije dodatne. Na primjer, možete dodijeliti velika slova cijelom odabranom tekstu. Ili možete dati naredbu suprotno od prethodnog svojstva, gdje svi znakovi postaju mala slova. Možete zakazati termin na bilo koji način koji vam odgovara. Na primjer, korištenje ugrađenih stilova. Ili možete stvoriti
Zasebna datoteka s opisom svih svojstava. Koji ćete način dodjele koristiti ovisi o vama. "Text-transform" može uzeti sljedeće vrijednosti:
- velika slova. Čini sve odabrane znakove velikim slovima. Velika su slova uobičajena vrijednost u CSS-u jer pomažu u rješavanju mnogih složenih problema vezanih uz tekst.
- mala slova. Ovo svojstvo je potpuno suprotno naredbi za velika slova.
- Piši velikim slovom. Mijenja veliko slovo u veliko. Preostali znakovi neće se promijeniti.
- Nijedan. Omogućuje poništavanje svih dodijeljenih vrijednosti (potrebno za unaprijed definiranje svojstva). Obično je ova vrijednost postavljena prema zadanim postavkama.
- naslijediti. Nasljeđuje sva svojstva od nadređeni element. Treba napomenuti da IE ne podržava ovo svojstvo.
Primjena
S koristeći CSS velika slova (ili slični učinci) postavljaju se jednom jednostavnom naredbom. Stoga nema potrebe mijenjati ili prepisivati cijeli tekst. Ako govorimo o web mjestu s jednom stranicom, onda ovo svojstvo možda neće biti korisno. Ali kada upravljate ogromnim portalom na kojem trebate ispraviti velika i velika slova u određenim fragmentima, tada "transformacija teksta" postaje jedini učinkovit alat. Na primjer, trebate popraviti font u oznakama naslova "h2". Da biste to učinili, trebate dodati unos: “h2 (transformacija teksta: velika slova; )”, a zatim će svi naslovi druge razine biti pisani velikim slovima.
Osobitosti
Neki bi mogli pomisliti da ručna obrada teksta i promjena fonta korištenjem svojstva "text-transform" nema nikakve razlike. Ali to nije istina. Ako ručno promijenite na velika slova (velika slova), tada kada se ove informacije kopiraju s vaše stranice, znakovi će ostati nepromijenjeni. Ako koristite CSS jezik, onda se sve događa drugačije. Svojstvo “text-transform” samo vizualno mijenja font za korisnike. Ali u stvarnosti simboli ostaju nepromijenjeni. To se događa svim vrijednostima ovog svojstva. Kopirani podaci (tekst) imat će izvorna velika i mala slova izvorni kod stranice. Ovo je jedina razlika između ručne obrade i korištenja CSS naredbi.
Nije važno koje želite koristiti - mala ili velika slova, glavna stvar je ne zaboraviti svrhu. Na primjer, ako trebate promjene samo u dekorativne svrhe, tada možete sigurno koristiti svojstvo "text-transform". Pa, ako znate da će vaši korisnici vjerojatno kopirati informacije koje objavite, onda je najbolje da ručno promijenite velika i mala slova u cijelom tekstu. Uostalom, ponekad čitatelji ne primjećuju takvu zamjenu fonta. To je osobito kritično kada su u pitanju važni dokumenti i slične informacije.
Indeks u odnosu na tekst je pomak znakova u odnosu na osnovnu liniju gore ili dolje. Ovisno o pozitivnom odn negativna vrijednost pomak, indeks se naziva gornji ili donji. Aktivno se koriste u matematici, fizici, kemiji i za označavanje mjernih jedinica. HTML nudi dva elementa za kreiranje indeksa: (od engleskog superscript) - superscript i (od engleskog subscript) - subscript. Tekst smješten u jedan od ovih spremnika označen je manjim od osnovnog teksta i pomaknut je gore ili dolje u odnosu na njega. Primjer 1 pokazuje kako se ti elementi i stilovi mogu koristiti zajedno za promjenu izgleda teksta.
Primjer 1: Stvaranje gornjeg i indeksnog indeksa
Superscript i subscript .formula (veličina fonta: 1.4em; /* Veličina teksta formule */) sup, sub (font-style: italic; /* Italic */ boja: crvena; /* Crvena boja znakova */) sub ( boja: plava; /* Plava boja znakova */ )
Karakteristična jednadžba plohe drugog stupnja
λ3 - I1λ2 + I2λ - I3 = 0
U primjeru se i indeks i superskript pojavljuju istovremeno. Za promjenu stila fonta indeksa koriste se stilovi koji postavljaju jedinstven dizajn (slika 1).
Riža. 1. Pregled indeksa nakon primjene stilova
Možete ih potpuno odbiti koristiti u korist stilova. Analog ovih elemenata je svojstvo vertical-align, koje uzrokuje okomito pomicanje teksta za određenu udaljenost. Točnije, u primjeru 2 vrijednost je 0,8 em za gornji indeks i -0,5 em za indeks. Em je relativna jedinica jednaka veličini trenutnog fonta. Na primjer, 0,5em označava da se tekst treba pomaknuti za pola veličine fonta.
Primjer 2: Korištenje stilova za upravljanje indeksima
Superscript i subscript .formula (font-size: 1.6em; /* Veličina teksta */ font-style: italic; /* Italic style */ ) .sup, .sub (font-style: normal; /* Normal style * / font-size: 0.6em; /* Index size */ color: /* Superscript color */ vertical-align: /* Shift text up */ .sub (color: blue; /* Boja indeksa */ vertical-align: -0.5em; /* Pomakni tekst prema dolje */ )
Polinom stupnja n
f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn
U primjeru je sama formula prikazana u uvećanoj veličini, nadnaredni simboli postavljeni su crvenom bojom, a donji plavom bojom (slika 2).
Zdravo. Ponekad prilikom izrade web stranica neke riječi morate postaviti velikim slovima ili nadnaslovima pomoću CSS-a. Da vidimo kako se to radi.
Velika i mala slova pomoću css-aOpćenito, danas možete staviti željeni tekst u oznake i dobiti željeni prikaz, ali pogledajmo i kako se to može učiniti pomoću CSS-a, jer je tehnika malo drugačija.
Na primjer, trebate napisati formulu H 2 O u html dokument. To se radi ovako:
- Sama formula je napisana
- One riječi i brojevi koje je potrebno prikazati u gornjem ili donjem indeksu nalaze se u span tagu, kojem je potrebno dodijeliti neku klasu. Na primjer: znakovi za izlaz
- U css-u trebate postaviti ovaj element:
Top-index(
Okomito poravnanje: super;
}
Ovo svojstvo odgovorno je za okomito poravnanje teksta. Njegova vrijednost super specificira da će tekst biti prikazan u superskriptu. Ali veličina fonta ostala je ista kao kod običnog teksta. Kako bi sve izgledalo ljepše, također biste trebali postaviti malo manju veličinu fonta pomoću svojstva font-size.
Ovako vlasništvo jednostavno funkcionira. Sukladno tome, za izlaz u indeksu trebate pisati ovako:
Top-index(
Okomito poravnanje: sub;
}
Razlika od sličnih HTML oznaka je u tome što ova pravila ne mijenjaju veličinu fonta, pa ako to trebate učiniti, morat ćete napisati novu veličinu u listu stilova.
To je sve što trebate znati o superscriptu i subscriptu u css-u. Nijedan dodatne mogućnosti nekretnina ne pruža, i nisu potrebni. Ako želite, ovaj tekst možete oblikovati na poseban način, ali to je rijetko potrebno.
Gdje bi moglo dobro doćiPri pisanju formula, dodavanju bilješki i bilješki u članke može se koristiti gornji i donji indeks. Na primjer, Wikipedia nudi izvore i bilješke za svaki članak. Kako članak napreduje, oni se stavljaju u obliku malih superskripta. To ne iritira čitatelje, a istovremeno vam omogućuje da člancima date željeni izgled.
Svojstvo je potpuno prilagođeno različitim preglednicima i podržano u svim verzijama CSS-a.
Pretvorite malo slovo u malo i prvo veliko slovo koristeći CSS(8)
U CSS-u ne postoji opcija cap clause. Ostali odgovori koji sugeriraju tekstualnu transformaciju: kapitalizirati su netočni jer ova opcija koristi svaka riječ za svaku riječ .
Ovdje nepristojan Način da to učinite je ako želite da prvo slovo svakog elementa bude veliko, ali to definitivno nije ni blizu stvarnih ograničenja:
P (transformacija teksta: mala slova; ) p:prvo slovo (transformacija teksta: velika slova;)
OVO JE PRIMJER REČENICE.
OVO JE JOŠ JEDAN PRIMJER REČENICE. A OVO JE DRUGO, ALI ĆE BITI SASVIM MALIM SLOVIMA.
Kako pretvoriti veliko slovo u malo slovo i prvo slovo velikog slova za svaku rečenicu kao što je prikazano u nastavku, samo s koristeći CSS?
Od: OVO JE PRIMJER PRIJAVE.
Za: Ovo je približna rečenica.
Ažuriranje: Kada koristim text-transform: capize; Rezultat je i dalje isti.
Ne možete to učiniti samo pomoću CSS-a. Postoji atribut tekstualne transformacije, ali ne prihvaća samo ništa, veliko slovo, veliko slovo, malo slovo i nasljeđivanje.
Možda biste trebali pogledati JS rješenje ili rješenje na strani poslužitelja.
Ako sve znakove možete učiniti malim slovima na poslužitelju, možete primijeniti:
Transformacija teksta: veliko slovo
Mislim da transformacija teksta neće raditi s velikim slovima kao unosom.
Ako želite koristiti for ovo neće raditi, for ili textarea trebate koristiti Javascript
funkcija capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )
koji bi trebao dobro funkcionirati za ili
