Dobar dan, štreberi izgradnje web stranice. U današnjoj ćemo publikaciji razmotriti temu vezanu za dizajn tekstualnog sadržaja. Zato ćete naučiti kako postaviti velika slova u css - pomoću njih ćete se upoznati s nekoliko opcija za stvaranje drop cap -a, i naravno možete sve isprobati u praksi. A sada prijeđimo na zabavni dio!

Pretvorimo tekst

Pomoću kaskadnih stilskih listova možete promijeniti i prvi znak bloka i cijeli tekst. Pokazat ću vam kako možete učiniti oboje. Štaviše, svi alati navedeni u ovom članku podržani su na tri nivoa jezika: css1, css2, css2.1 i css3.

Počet ću sa zanimljivim svojstvom koje mijenja sav tekstualni sadržaj u odabiru. to tekstualna transformacija.

Imenovani element može pretvoriti znakove u velika, mala slova, a može i pisati velika slova svakog prvog znaka riječi. Napisao sam više o vrijednostima u tabeli.

Sada, kako biste konsolidirali teorijski materijal, uzmite primjer.

Pažnja!

! Sutra je popust na sve kozmetičke proizvode!

Promocija vrijedi u svim poslovnicama u vašem gradu.

Kreiranje drop cap -a

Ako ne znate što znači pojam "drop cap", vrijeme je da to saznate jer je izravno povezan s aktualnom temom.

Ograničenje (ili ponekad kažu početno slovo) je prvo slovo poglavlja, koje se razlikuje od ostalih po svojoj velikoj veličini, boji, a u nekim slučajevima čak i dizajnu fonta. U životu se primjer takvog pisma može pronaći u starim rukopisima i knjigama.

Postoji nekoliko načina za stvaranje početnog slova. Često je znak označen oznakom jezika za označavanje a nakon toga su određena svojstva propisana u stilovima koji ga mijenjaju. Ovo je dobar način, ali ova publikacija govori o css mehanizmima (koji su, po mom mišljenju, u ovom slučaju mnogo logičniji i prikladniji za upotrebu).

Da biste riješili problem, možete koristiti alat poput.

Dakle, u ovom slučaju: koristi se prvo slovo. Kao i svi pseudo-elementi, dodijeljen je selektoru, odvojenom dvotačkama. Nakon toga, prema svim pravilima stilskih listova, svojstva su navedena. Međutim, možete primijeniti samo svojstva koja se odnose na uređivanje fontova, paddinga, boje, pozadine, margina i obruba.

Predlažem da razmotrim određeni primjer. Provodeći predstavljeni mali program, odlučio sam napraviti ne samo kapicu u boji, već je napuniti cvijećem. Da biste to učinili, morate upotrijebiti nekoliko trikova s ​​postavljanjem prozirne boje fonta i popunjavanjem slova odabranom slikom.

Ovaj odlomak sadrži rečenicu vrlo zanimljivog sadržaja.

Nastavimo zanimljivu priču u sljedećem odlomku.

Rezultat izgleda vrlo atraktivno i neobično, što je savršeno rješenje za.

Kao što vidite, ova tema je vrlo jednostavna. Možete lako koristiti programski kôd koji sam dao za svoje web resurse, mijenjajući i prilagođavajući svom stilu.

Ako vam je gornji materijal bio od koristi, pretplatite se na ažuriranja na mom blogu i ne zaboravite podijeliti stečeno znanje (i naravno vezu na moj blog) sa svojim prijateljima. Sretno!

Ćao ćao!

Srdačan pozdrav, Roman Chueshov

Veliko slovo, prema definiciji, je element teksta koji se relativno povećava u veličini. U gotovo svim jezicima rečenica počinje velikim slovom. Dizajn početka odlomka s istaknutim velikim slovom omogućuje vam strukturiranje teksta i olakšava čitanje. Prilikom izrade web stranice, tekst se može napisati u skladu s preferencijama autora i pravilima ruskog jezika. Također, njegov dizajn se može "automatizirati" unosom određenih "naredbi" u datoteku s ekstenzijom css - stilskom tablicom - ili dopuniti vašu html datoteku odjeljkom stila. CSS se obično dodatno proučava s html -om kako bi se brzo promijenili neki elementi dizajna u cijelom tekstu odjednom.

Ovo je posebno istinito ako web mjesto ima stotine stranica, a unošenje promjena na svaku od njih je vrlo dugotrajan proces.

Ako primijenite css, velika slova na početku svakog odlomka mogu izgledati posebno. Na primjer, donji kod, unesen u html bez zagrada, dopušta da tekst, ukrašen oznakom "p", učini veliko slovo - prvo slovo - većim - 220% standardne veličine, žuto - vrijednost boje je žuto i napišite ga fontom, drugačijim od ostatka teksta - Georgia protiv batangche.

(<) style(>)

p: prvo slovo (porodica fontova: Georgia; veličina fonta: 220%; boja: žuta;)

(<)/style(>)

Prekrasna velika slova možete dobiti ako stvorite vlastiti font u obliku slika - za svako slovo zasebnu sliku, na primjer, u starom ruskom ili gotičkom stilu. Mogu se nacrtati u. Zatim na tražena mjesta umjesto velikog slova možete umetnuti kôd bez zagrada (<) img src=”ссылка на место, где лежит картинка”(>). Dodatni atributi bit će visina i širina - širina i visina slike, koji se mogu postaviti u pikselima kako bi se skladno uklopili s ostatkom teksta. Primjer: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Zagrade oko< и >uklanjamo.

Ako nemate priliku sami nacrtati abecedu, veliko se slovo može ukrasiti fontovima koji su slobodno dostupni na Googleu (odjeljak Fontovi) ili drugim tražilicama i resursima. Da biste to učinili, gornji kôd morate oblikovati na sljedeći način:

(<) style(>)

p (font-family: batangche; font-size: 93%;)

p: prvo slovo (porodica fontova: Kelly + Slab; veličina fonta: 220%; boja: plava;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

Google usluga vam omogućuje da odaberete jedno ili drugo i pruža gotove veze za umetanje u html ili css. Skrećemo vam pažnju na činjenicu da je potrebno odabrati grupu fontova - latinične ili ćirilične, jer gotovo svi latinični fontovi ne rade za tekst na ruskom jeziku. Trenutno, tražilica nudi oko 40 vrsta besplatno.

Veliko slovo ili njegov veliki parnjak mogu se stilizirati pomoću svojstva CSS tekstualne transformacije. Ako postavite tekstualnu transformaciju: vrijednost u listu stilova, tada će tekst izgledati dok ga pišete. Za pretvaranje svih slova u mala slova postavite tekstualnu transformaciju: mala slova odvojena dvotačkom i velika slova za velika slova. Postavljanje svojstva na tekstualnu transformaciju: velikim slovima bit će tako da na početku svake riječi postoji veliko slovo.

Omogućava vam promjenu velikih i malih slova u tekstu.

Prema zadanim postavkama, vrijednost je postavljena na none, što nema utjecaja na tekst. Slučaj teksta ostaje isti. Velika i mala slova pretvaraju znakove u velika i mala slova. Ako navedete vrijednost s velikim početnim slovom, bit će napisani samo prvi znakovi svake riječi. Nasljeđivanje nasljeđuje vrijednost od roditelja.

Primjer

h3 (tekstualna transformacija: velika slova;). mala slova (tekstualna transformacija: mala slova;). velika slova (tekstualna transformacija: velika slova;)

Ovo je naslov. Ima svojstvo za pretvaranje teksta postavljeno na velika slova. Svi znakovi bit će velika slova.

Svojstvo pretvaranja teksta primijenjeno je na ovaj odlomak s malim slovima, što znači da će sva slova biti mala.

I ovaj posljednji odlomak ima svojstvo pretvaranja teksta sa primijenjenim svojstvom CAPITALIZE. Prva slova svake riječi bit će velika, i samo to.

Rezultat

Međutim, nije sve tako jednostavno. Postoje neke nijanse. Ako obratite pažnju na drugi odlomak gornjeg primjera, primijetit ćete da se riječ velikim slovima, uprkos svojstvu pretvaranja teksta primijenjenom na odlomak s vrijednošću napisanom velikim slovima, prikazuje u potpunosti velikim slovima, što odgovara izvornom tekstu. To se objašnjava činjenicom da se s navedenom veličinom velikih slova provjeravaju samo prva slova riječi, a ostala ostaju nepromijenjena, bez obzira na njihovo početno stanje.
Unatoč prividnoj jednostavnosti, svojstvo pretvaranja teksta može biti vrlo korisno. Na primjer, da biste napisali veliki tekst svih naslova H1 na vašoj web lokaciji, sve što trebate učiniti je dodati jedno svojstvo u svoju tablicu stilova.

H1 (tekstualna transformacija: velika slova;)

i problem će biti riješen. I nema potrebe ručno mijenjati sva zaglavlja, kojih može biti jako, jako mnogo.

Često u žurbi prilikom dodavanja materijala na web mjesto ili, na primjer, stvaranja nove teme na forumu, korisnik može početi pisati rečenicu (naslov) malim (malim) slovom. U određenoj mjeri ovo je greška.

Pokazat ću vam nekoliko mogućnosti za rješavanje ovog problema: PHP i CSS prikladniji su za već objavljene materijale, kada jQuery može popraviti situaciju i prije objavljivanja.

Prvo slovo niza je veliko u PHP -u

U PHP -u ​​postoji funkcija koja se zove “ ucfirst", Koji samo pretvara prvi znak niza u velika slova, ali njegov minus je što ne radi sasvim ispravno sa ćirilicom.

Da bismo to učinili, napisat ćemo vlastitu malu funkciju. Implementacija će izgledati ovako:

U ovoj verziji dobit ćemo rečenicu koja počinje velikim slovom, što nam je, u stvari, potrebno.

Veliko slovo niza u CSS -u

Ova metoda vizualno (to jest, u izvornom kodu web stranice, ponude će izgledati onakve kakve jesu) također pretvara prvi znak u velika slova.

Upotreba je sljedeća:

Koristeći pseudo-element " prvo slovo"I nekretnine" tekstualna transformacija»Postavili smo izgled za svako prvo slovo odlomka.

Prvo slovo niza je veliko u jQueryju

Kao što sam već rekao, ovaj način konverzije je najbolji za materijale koji će tek biti objavljeni.

Na primjer, uzet ćemo tekstualno polje (ono će nam djelovati kao polje za unos naslova) i za njega napisati malu skriptu koja, kad unesete rečenicu malim slovom, čini je velikim slovima:

Skripta se pokreće i prilikom pisanja teksta i jednostavnog lijepljenja. Ne zaboravite da za rad skripti na vašoj web lokaciji morate imati povezanu biblioteku jQuery.

Kontrolira pretvaranje teksta elementa u velika ili mala slova. Kada je vrijednost različita od none, promijenit će se velika i mala slova izvornog teksta.

kratke informacije

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A & B	Vrijednosti se moraju prikazati prikazanim redoslijedom.	<размер> && <цвет>
A | B	Pokazuje da bi se trebala odabrati samo jedna od predloženih vrijednosti (A ili B).	normalno | male kape
A || B	Svaka vrijednost može se koristiti sama ili zajedno s drugima bilo kojim redoslijedom.	širina || count
	Vrijednosti grupa.	[usev || krst]
*	Ponovite nulu ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	inset?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta, odvojene zarezima.	<время>#

×

Vrednosti

pisanje velikih slova Prvi znak svake riječi u rečenici bit će napisan velikim slovom. Ostali simboli ne mijenjaju svoj izgled. mala slova Svi tekstualni znakovi postaju mala slova (mala slova). velika slova Svi tekstualni znakovi su velika (velika). none Ne mijenja velika i mala slova znakova.

Sandbox

Winnie the Pooh nije uvijek volio malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera nije ni pomislila da počne. I, naravno, bio je užasno sretan što je vidio Zeca kako vadi šalice i tanjure.

div (tekstualna transformacija: velikim slovima;)

Primjer

Spomenik kulture srednjeg vijeka

Amazonska nizina prihvaća malu količinu mačaka i pasa, a Hayosh Bayah je poznat po svojim crnim vinima.

Rezultat ovog primjera prikazan je na Sl. 1.

Pirinač. 1. Primjena svojstva text-transform

Objektni model

Objekat.style.textTransform

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ova specifikacija je odobrena od strane W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da je u skladu sa svojim ciljevima, ali za implementaciju standarda potrebna je pomoć zajednice programera.
• Predložena preporuka ( Predložena preporuka) - Dokument se u ovom trenutku dostavlja Savjetodavnom vijeću W3C -a na konačno odobrenje.
• Radni nacrt - Zrelija verzija nacrta nakon rasprave i revizije za pregled u zajednici.
• Nacrt urednika ( Urednički nacrt) - nacrt verzije standarda nakon uređivanja urednika projekta.
• Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.

×