HTML velika slova i CSS razmak između slova. Izrada velikih slova css stilova pomoću Css pseudo-elemenata sva slova su velika

Dobar dan, štreberima za izradu web stranica. Današnja publikacija govorit će o temi dizajniranja tekstualnog sadržaja. Zato ćete naučiti kako postaviti velika slova pomoću CSS alata, upoznati se s nekoliko opcija za izradu kape i, naravno, sve ćete moći isprobati u praksi. Pa, sad prijeđimo na zabavni dio!

Preobrazimo tekst

Zahvaljujući kaskadnim listovima stilova, možete promijeniti i prvi znak bloka i cijeli tekst. Reći ću vam kako možete učiniti oboje. Štoviše, svi alati spomenuti u ovom članku podržani su na tri jezične razine: css1, css2, css2.1 i css3.

Počet ću sa zanimljivim svojstvom koje mijenja sav tekstualni sadržaj u odabranom . Ovo je transformacija teksta.

Imenovani element može pretvarati znakove u velika i mala slova te također postaviti svaki prvi znak riječi u veliko slovo. Napisao sam više o vrijednostima u tablici.

Sada, kako bismo ojačali teoretski materijal, pogledajte primjer.

Tijelo transformacije teksta ( poravnanje teksta: središte; ) h1 ( transformacija teksta: velika slova; ) h3 ( transformacija teksta: veliko slovo; ) Pažnja! !Sutra je popust na sve kozmetičke proizvode!

Akcija vrijedi u svim poslovnicama koje se nalaze u vašem gradu.

Stvaranje kapice

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

Veliko slovo (ili ponekad kažu inicijal) je prvo slovo poglavlja, koje se od ostalih razlikuje po Veliki broj, boja i u nekim slučajevima čak i dizajn fonta. U stvarnom životu, primjer takvog pisma može se naći u starim rukopisima i knjigama.

Postoji nekoliko načina za stvaranje inicijala. Često je simbol istaknut oznakom označnog jezika, a zatim su navedena određena svojstva u stilovima koji ga mijenjaju. Ovo je dobar način, ali ova publikacija govori o CSS mehanizmima (koji su, po mom mišljenju, mnogo logičniji i praktičniji za korištenje u ovom slučaju).

Da biste riješili ovaj problem, možete koristiti alat kao što je.

Dakle, u ovom slučaju koristimo: prvo slovo. Kao i svi pseudoelementi, dodjeljuje se selektoru pomoću dvotočke. Nakon svih pravila listova stilova, naznačena su svojstva. Međutim, možete primijeniti samo ona svojstva koja se odnose na uređivanje fontova, uvlaka, boja, pozadina, polja i granice.

Predlažem da razmislite konkretan primjer. Prilikom implementacije predstavljenog malog programa, odlučio sam napraviti ne samo početno slovo u boji, već ga ispuniti cvijećem. Da biste to učinili, morate upotrijebiti nekoliko lukavih trikova postavljanjem boje fonta na prozirnu i ispunjavanjem slova odabranom slikom.

Izbočeno početno p (veličina fonta: 26px; obitelj-fonta: fantasy; ) P:prvo-slovo ( /*propisuje stilska pravila za prvo slovo odlomka*/ obitelj-fonta: sant-serif; težina-fonta: 900 ; boja: prozirna; pozadina: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); veličina pozadine: 99%; veličina fonta: 119px; -webkit-background- isječak: tekst ;)

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

Nastavimo zanimljivu priču u sljedećem odlomku.

Dobiveni rezultat izgleda vrlo atraktivno i neobično, što je idealno rješenje za.

Kao što vidite, ova je tema vrlo jednostavna. Možete jednostavno koristiti programski kod koji sam dao za vaše web resurse, mijenjajući ga i prilagođavajući tako da odgovara vašem stilu.

Ako vam je predstavljeni materijal bio koristan, pretplatite se na ažuriranja mog bloga i ne zaboravite podijeliti znanje koje ste stekli (i naravno vezu na moj blog) sa svojim prijateljima. Sretno!

Doviđenja!

Srdačan pozdrav, Roman Chueshov

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

Pokazat ću nekoliko opcija za rješavanje ovog problema: PHP i CSS su prikladniji za već objavljene materijale, kada jQuery može ispraviti situaciju prije objave.

Prvo slovo niza u velika slova u PHP-u

U PHP-u postoji funkcija koja se zove “ucfirst”, koja samo pretvara prvi znak retka u veliko slovo, ali njen nedostatak je što ne radi sasvim ispravno sa ćirilicom.

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

U ovoj verziji dobit ćemo rečenicu koja počinje velikim slovom, što nam zapravo i treba.

Veliko prvo slovo niza u CSS-u

Ova metoda je vizualna (to jest, u izvorni kod prijedlozi mjesta će se pojaviti kakvi jesu) također pretvara prvi znak u veliko slovo.

Upotreba je sljedeća:

prva rečenica

druga rečenica

treća rečenica

četvrta rečenica

#sadržaj p:prvo-slovo (transformacija teksta: velika slova;)

Koristeći pseudoelement "prvo slovo" i svojstvo "transformacija teksta", postavili smo dizajn za svako prvo slovo odlomka.

Prvo slovo niza velikim slovima u jQueryju

Kao što sam ranije rekao, ova metoda pretvorbe je najprikladnija za materijale koji tek trebaju biti objavljeni.

Na primjer, uzet ćemo tekstualno polje (ono će služiti kao polje za unos naslova) i napisati malu skriptu za njega, koja, kada upisuje rečenicu s malim slovom, čini da je velika:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(ovo).val(novi_tekst); )); ));

Skripta radi i kada pišete tekst i kada ga jednostavno ubacujete. Ne zaboravite da za rad skripti na vašoj stranici morate imati omogućenu jQuery biblioteku.

Pozdrav čitateljima ovog bloga. Danas ću govoriti o tome kako možete napraviti sva velika slova koristeći CSS. Naravno, da biste to učinili, možete uključiti Caps Lock i napisati željeni tekst, ali ovo je prilično primitivna metoda. Ali što ako trebate istaknuti zaseban odlomak u gotovom članku?

Izrada svih slova velikim u css

Za ovo postoji svojstvo pretvaranja teksta, koje, kao što ste možda pogodili, transformira tekst. Ima sljedeće vrijednosti:

• mala slova – sav tekst se prikazuje malim slovima
• velika slova – sve riječi se prikazuju velikim slovima (što nam je potrebno)
• veliko slovo – prvo slovo svake riječi je veliko

To je u biti sve što trebate znati. Ostaje samo smisliti kako pristupiti željenom elementu. Zamislimo ovaj primjer: peti odlomak u članku morate napisati velikim slovima. I kako se to može provesti?

Kako doći do željenog elementa?

Kao što znate, odlomak se stvara pomoću uparene html oznake, čiji cijeli sadržaj postaje odlomak. Sve što preostaje je definirati novu klasu stila za njega:

Sada imamo priliku pristupiti ovom specifičnom paragrafu putem CSS jezika bez utjecaja na ostatak. Možete to učiniti ovako:

Veliko slovo(
Transformacija teksta: velika slova;
}

Ova je metoda prikladna kada trebate istaknuti fragment u određenom članku. Što ako sve stranice moraju imati određeni tekst velikim slovima. U ovom slučaju, bolje je staviti blok u datoteku predloška kako ga ne biste svaki put pisali.

Ili možda trebate istaknuti drugi odlomak u svakom članku s koristeći css velikim slovima. Tada će vam odgovarati druga opcija. Pronađite blok u kojem se pojavljuje članak i pristupite drugom paragrafu koristeći pseudo-klasu nth-child. U u ovom primjeru Naš blok članaka ima klasu članaka.

Članak p:nth-child(2)(
Transformacija teksta: velika slova
}

Kao što vidite, za svaki pojedini slučaj postoji drugačije rješenje. Najvažnije je zapamtiti svojstvo text-transform, koje mijenja velika i velika slova.

Općenito, nije preporučljivo prikazivati ​​tekst na ovaj način, jer to uvelike narušava njegovu percepciju, ali neki posebno važni fragmenti mogu biti istaknuti.

Danas smo pogledali svojstvo text-transform. Pretplatite se na blog kako biste primali nove članke.

Kapica (kapnica ugrađena u tekst) je prvo slovo odlomka, veće od ostalih, a postavljeno tako da mu je vrh u razini prvog retka odlomka. Na slici možete vidjeti primjer kape umetnute u tekst.

Usput, WordPress ima poseban dodatak (wordpress.org/extend/plugins/drop-caps) koji vam omogućuje da automatski stvorite tekst ugrađen (i pomaknut prema dolje) velika slova. nevjerojatno! Međutim, što ako ne želite koristiti dodatak (siguran sam da ne želite), a trebate samo stvoriti drop cap na više postova, a možda i na određenom mjestu?

Dobre vijesti: Ne trebate dodatak za stvaranje velikih slova, sve što trebate je malo css-a i span tag. Otvorite svoju css datoteku i dodajte sljedeći kod:

Span.dropcaps (font-family:Georgia, serif; boja: #ccc; veličina fonta: 46px; float: lijevo; težina fonta: 400; visina retka: 1em; margin-bottom: -0.4em; margin-desno : 0,09 em; položaj: relativan; )

Nešto kao ovo. Naravno, trebat će vam stil koji odgovara vašem dizajnu i tekstu. Na primjer, vrijednosti svojstava: veličina fonta, margine i visina linije morat će se odabrati na temelju vašeg dizajna i teksta.

Raspon oznaka

Kako bi se stil primijenio na veliko slovo teksta potrebno je veliko slovo “zamotati” u span tag i odrediti odgovarajuću klasu.

A

Pseudo-element: prvo slovo

Također možete stilizirati prvi znak u tekstu pomoću pseudo-elementa: first-letter . Međutim, ograničen broj svojstava može se primijeniti na pseudoelement:prvo slovo: to su svojstva koja se odnose na font, boju, pozadinu, obrube, margine i ispune. Još jedna stvar koju treba napomenuti je da pseudo-element:prvo-slovo neće raditi u starijim preglednicima.

P:prvo-slovo (familija-fontova:Georgia, serif; boja: #ccc; veličina-font-a: 46px; float: lijevo; težina-font-a: 400; visina-line: 1em; margin-bottom: -0.4em; margina -desno: 0,09em; položaj: relativno; )

Evo zapravo nekoliko metoda za uređivanje velikih slova pomoću CSS-a.

U html-u veličina fonta igra važnu ulogu. Omogućuje vam da privučete pozornost korisnika važna informacija, objavljeno na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.

Oznake i atributi pri radu s html fontovima

Jezik hiperteksta ima širok raspon alata za rad s fontovima. Uostalom, oblikovanje teksta je glavni zadatak html-a.

Razlog stvaranja HTML jezik Došlo je do problema s preglednicima koji prikazuju pravila oblikovanja teksta.

Pogledajmo oznake koje se koriste za rad s fontovima u HTML-u i njihove atribute. Glavna je oznaka. Pomoću vrijednosti njegovih atributa možete postaviti nekoliko karakteristika fonta:

• boja – postavlja boju teksta;
• veličina – veličina slova u konvencionalnim jedinicama.

Podržane su pozitivne vrijednosti atributa od 1 do 7.

• lice – koristi se za postavljanje obitelji fontova teksta koji će se koristiti unutar . Podržano je nekoliko vrijednosti odvojenih zarezima.

Formatiran je samo tekst koji se nalazi između dijelova par oznaka font. Ostatak teksta prikazuje se standardnim zadanim fontom.

Također u html-u postoji niz uparenih oznaka koje određuju samo jedno pravilo oblikovanja. To uključuje:

• - postavlja u html podebljani font. Oznaka radnje slična je prethodnoj;
• — veličina je veća od zadane;
• — manja veličina slova;
• — tekst u kurzivu (kurziv). Slična oznaka ;
• — tekst s podvlačenjem;
• - prekrižen;
• — prikaz teksta samo malim slovima;
• - velikim slovima.

Običan tekst

Sličica

Sličica

Više nego inače

Manje nego inače

Kurziv

Kurziv

S podvlakom

Prekrižen

Mogućnosti atributa stila

Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje generičkog atributa stila. Pomoću vrijednosti njegovih svojstava možete postaviti stil prikaza fontova:

1) font-family – svojstvo postavlja obitelj fontova. Moguće je ispisati više vrijednosti.
Promjena fonta u html u sljedeća vrijednost dogodit će se ako prethodna obitelj nije postavljena operacijski sustav korisnik .

Sintaksa pisanja:

obitelj-fontova: naziv-fonta [, naziv-fonta[, ...]]

2) veličina fonta – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u.
Sintaksa pisanja:

veličina-fonta: apsolutna veličina | relativna veličina | značenje | kamata | naslijediti

Također možete postaviti veličinu fonta:

• U pikselima;
• U apsolutnoj vrijednosti (xx-malo, x-malo, malo, srednje, veliko);
• U postocima;
• U bodovima (pt).

Veličina slova: 7

Veličina fonta: 24 px

Veličina fonta: x-veliko

Veličina fonta: 200%

Veličina fonta: 24 pt

3) font-style – postavlja stil pisanja fonta. Sintaksa:

stil fonta: normalan | kurziv | koso | naslijediti

Vrijednosti:

• normalno – normalan pravopis;
• kurziv – kurziv;
• oblique – font nakošen udesno;
• naslijediti – nasljeđuje pravopis nadređenog elementa.

Primjer kako promijeniti font u html-u pomoću ovog svojstva:

font-style:nasljedi

font-style:kurziv

font-style:normal

font-style: oblique

4) varijanta fonta – pretvara sva velika slova u velika slova. Sintaksa:

varijanta fonta: normalno | mala slova | naslijediti

Primjer kako promijeniti font u html-u s ovim svojstvom:

font-varijanta: naslijediti

font-varijanta:normalno

font-varijanta: mala velika slova

5) font-weight – omogućuje vam postavljanje debljine teksta (zasićenost). Sintaksa:

težina-fonta: podebljano|podebljano|svjetlije|normalno|100|200|300|400|500|600|700|800|900

Vrijednosti:

• podebljano – postavlja html font podebljano;
• hrabriji – hrabriji u odnosu na normalno;
• svjetlije - manje zasićeno u odnosu na normalno;
• normalno – normalan pravopis;
• 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.

težina-fonta: podebljano

font-weight:bolder

font-weight:lighter

težina fonta: normalna

težina slova: 900

težina slova: 100

Svojstvo HTML fonta i boja fonta

Font je još jedno svojstvo spremnika. U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova. sintaksa fonta:

font: veličina-font-familija | naslijediti

Vrijednost se također može postaviti na fontove koje koristi sustav u oznakama na različitim kontrolama:

• natpis - za gumbe;
• ikona – za ikone;
• jelovnik - jelovnik;
• okvir za poruke – za dijaloške okvire;
• mali natpis – za male kontrole;
• status-bar – font statusne trake.

font: ikona

font:naslov

font:izbornik

font:box-poruka

mali natpis

font: statusna traka

font:kurziv 50px bold "Times New Roman", Times, serif

Za postavljanje boje fonta u HTML-u, možete koristiti svojstvo boje. Omogućuje vam postavljanje boje pomoću ključna riječ, i u rgb formatu. I također u heksadecimalnom kodu.