Bună ziua, tocilari ai construirii site-ului. În publicația de astăzi, vom lua în considerare un subiect legat de proiectarea conținutului text. De aceea, veți învăța cum să setați majuscule în CSS - prin intermediul acestora, să vă familiarizați cu mai multe opțiuni pentru crearea unui capac de scădere și, bineînțeles, puteți încerca totul în practică. Acum să trecem la partea distractivă!
Să transformăm textul
Cu foile de stil în cascadă, puteți schimba atât primul caracter al unui bloc, cât și întregul text. Vă voi arăta cum le puteți face pe amândouă. Mai mult, toate instrumentele numite în acest articol sunt acceptate în trei niveluri ale limbajului: css1, css2, css2.1 și css3.
Voi începe cu o proprietate interesantă care modifică tot conținutul textului din selecție. aceasta text-transform.
Elementul numit poate converti caractere în majuscule, minuscule și, de asemenea, cu majuscule fiecare prim caracter al unui cuvânt. Am scris mai multe despre valorile din tabel.
Acum, pentru a consolida materialul teoretic, luați un exemplu.
Atenţie!
! Reducere mâine la toate produsele de înfrumusețare!
Promoția este valabilă în toate sucursalele din orașul dvs.
Crearea unui capac de picătură
Dacă nu știți ce înseamnă termenul „capac”, atunci acesta este momentul pentru a afla, deoarece este direct legat de subiectul curent.
Capacul (sau uneori spun inițialul) este prima literă a capitolului, care diferă de restul prin dimensiunea mare, culoarea și, în unele cazuri, chiar designul fontului. În viața reală, un exemplu al unei astfel de scrisori poate fi găsit în manuscrise și cărți vechi.
Există mai multe moduri de a crea o inițială. Adesea un caracter este evidențiat cu o etichetă de limbaj de marcare și după aceea, anumite proprietăți sunt prescrise în stilurile care o modifică. Acesta este un mod bun, dar această publicație vorbește despre mecanismele CSS (care, în opinia mea, în acest caz sunt mult mai logice și mai convenabile de utilizat).
Pentru a rezolva problema, puteți utiliza un instrument precum.
Deci, în acest caz: se folosește prima literă. La fel ca toate pseudo-elementele, este atribuit selectorului, separat prin două puncte. După, conform tuturor regulilor foilor de stil, sunt specificate proprietățile. Cu toate acestea, puteți aplica numai acele proprietăți legate de editarea fonturilor, umplutură, culoare, fundal, margini și margini.
Propun să luăm în considerare un exemplu specific. În timp ce implementam programul mic prezentat, am decis să fac nu doar un capac colorat, ci să-l umplu cu flori. Pentru a face acest lucru, trebuie să utilizați câteva trucuri dificile cu setarea unei culori transparente a fontului și completarea literei cu imaginea selectată.
Acest paragraf conține o propoziție cu conținut foarte interesant.
Să continuăm o poveste interesantă în paragraful următor.
Rezultatul arată foarte atractiv și neobișnuit, ceea ce reprezintă soluția perfectă pentru.
După cum puteți vedea, acest subiect este foarte simplu. Puteți utiliza cu ușurință codul de program dat de mine pentru resursele dvs. web, modificându-le și adaptându-le stilului dvs.
Dacă materialul de mai sus ți-a fost util, atunci abonează-te la actualizările de pe blogul meu și nu uita să împărtășești prietenilor tăi cunoștințele acumulate (și bineînțeles un link către blogul meu). Noroc!
Pa! Pa!
Cu respect, Roman Chueshov
O literă majusculă, conform definiției, este un element de text care crește relativ în dimensiune. În aproape toate limbile, o propoziție începe cu o literă mare. Iar designul de la începutul paragrafului cu o majusculă proeminentă vă permite să structurați textul și să ușurați citirea. Când se întocmește o pagină web, textul poate fi scris în conformitate cu preferințele autorului și regulile limbii ruse. De asemenea, designul său poate fi „automatizat” prin introducerea anumitor „comenzi” într-un fișier cu extensia css - o foaie de stil - sau suplimentarea fișierului html cu o secțiune de stil. CSS este de obicei studiat suplimentar cu html pentru a schimba rapid unele elemente de design în întregul text simultan.
Acest lucru este valabil mai ales dacă site-ul are sute de pagini, iar modificarea fiecăreia dintre ele este un proces care necesită mult timp.
Dacă aplicați css, literele majuscule de la începutul fiecărui paragraf pot părea speciale. De exemplu, codul de mai jos, introdus în html fără paranteze, permite ca textul, decorat cu eticheta „p”, să facă litera mare - prima literă - mai mare - 220% din dimensiunea standard, galben - valoarea culorii este galben și scrieți-l cu font, diferit de restul textului - Georgia versus batangche.
(<) style(>)
p: prima literă (font-family: Georgia; font-size: 220%; culoare: galben;)
(<)/style(>)
Puteți obține majuscule frumoase creându-vă propriul font sub formă de imagini - pentru fiecare literă câte o imagine separată, de exemplu, în stilul vechi rusesc sau gotic. Pot fi trasate în Apoi, în locurile necesare în locul literei mari, puteți introduce codul fără paranteze (<) img src=”ссылка на место, где лежит картинка”(>). Atributele suplimentare vor fi înălțimea și lățimea - lățimea și înălțimea imaginii, care pot fi setate în pixeli pentru a se amesteca armonios cu restul textului. Exemplu: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Paranteze în jur< и >scoatem.
Dacă nu aveți ocazia să desenați singur alfabetul, atunci litera mare poate fi formatată folosind fonturi disponibile gratuit pe Google (secțiunea Fonturi) sau alte motoare și resurse de căutare. Pentru a face acest lucru, codul de mai sus trebuie formatat după cum urmează:
(<) style(>)
p (font-family: batangche; font-size: 93%;)
p: prima literă (font-family: Kelly + Slab; dimensiunea fontului: 220%; culoare: albastru;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Serviciul Google vă permite să alegeți unul sau altul și oferă linkuri gata făcute pentru inserare în html sau css. Vă atragem atenția asupra faptului că este necesar să selectați un grup de fonturi - latine sau chirilice, deoarece aproape toate fonturile latine nu funcționează pentru textul în limba rusă. În acest moment, motorul de căutare oferă aproximativ 40 de tipuri gratuit.
O literă majusculă sau omologul său cu majuscule pot fi stilizate folosind proprietatea de transformare a textului CSS. Dacă setați transformarea textului: nici o valoare în foaia de stil, atunci textul va arăta în timp ce îl scrieți. Pentru a converti toate literele în minuscule, setați transformarea textului: valoare minusculă separată prin două puncte și majuscule pentru majuscule. Setarea proprietății pentru transformarea textului: scrierea cu majuscule o va face astfel încât să existe o literă majusculă la începutul fiecărui cuvânt.
Vă permite să schimbați majusculele și minusculele literelor textului.
În mod implicit, valoarea este setată la none, ceea ce nu are niciun efect asupra textului. Cazul textului rămâne același. Valorile majuscule și minuscule convertesc caracterele în majuscule, respectiv minuscule. Dacă specificați o valoare cu majuscule, atunci numai primele caractere ale fiecărui cuvânt vor fi majuscule. Moșteni moștenește valoarea de la părinte.
Exemplu
h3 (transformare text: majuscule;). minuscule (transformare text: minuscule;) .capitalize (transformare text: majuscule;)Acesta este titlul. Are o proprietate de transformare a textului setată cu majuscule. Toate caracterele vor fi majuscule.
Proprietatea Transformare text a fost aplicată acestui paragraf cu o valoare cu litere mici, ceea ce înseamnă că toate literele vor fi cu litere mici.
Și acest ultim paragraf are o proprietate text-transform cu o proprietate CAPITALIZE aplicată. Primele litere ale fiecărui cuvânt vor fi majuscule și numai atât.