Realizarea de stiluri CSS cu majuscule folosind pseudo elemente

Bună ziua, tocilari care construiesc site-uri. Publicația de astăzi va discuta subiectul proiectării conținutului textului. Acesta este motivul pentru care veți învăța cum să setați majuscule literele css- înseamnă, familiarizați-vă cu mai multe opțiuni pentru a crea un drop cap și, desigur, puteți încerca totul în practică. Ei bine, acum să trecem la partea distractivă!

Să începem să transformăm textul

Datorită foilor de stil în cascadă, puteți modifica atât primul caracter al unui bloc, cât și întregul text. Îți voi spune cum le poți face pe amândouă. Mai mult, toate instrumentele menționate în acest articol sunt acceptate în trei nivele de limbaj: css1, css2, css2.1 și css3.

Voi începe cu o proprietate interesantă care modifică tot conținutul text din . Aceasta este transformarea textului.

Elementul numit poate converti caracterele în majuscule, litere mici și, de asemenea, poate seta fiecare prim caracter al unui cuvânt la o literă majusculă. Am scris mai multe despre valorile din tabel.

Acum pentru consolidare material teoretic uita-te la exemplu.

Corpul transformării textului ( text-align: center; ) h1 ( text-transform: majuscule; ) h3 ( text-transform: capitalize; ) Atenție! !Mâine se face reducere la toate produsele cosmetice!

Promoția este valabilă în toate sucursalele situate în orașul dumneavoastră.

Crearea unui plafon

Dacă nu știți ce înseamnă termenul „drop cap”, atunci acum este momentul să aflați, deoarece are legătură directă cu subiectul curent.

O literă mare (sau uneori se spune și o inițială) este prima literă a unui capitol, care diferă de restul prin dimensiunea mare, culoarea și, în unele cazuri, chiar și prin designul fontului. În viața reală, un exemplu de astfel de scrisoare poate fi găsit în manuscrise și cărți vechi.

Există mai multe moduri de a crea o inițială. Adesea, un simbol este evidențiat cu o etichetă de limbaj de marcare și apoi anumite proprietăți sunt specificate în stilurile care îl modifică. Acest nu e un mod rău, in orice caz această publicație vorbește despre mecanismele CSS (care, după părerea mea, sunt mult mai logice și mai convenabile de utilizat în acest caz).

Pentru a rezolva această problemă, puteți utiliza un instrument precum.

Deci, în acest caz folosim:first-litera. Ca toate pseudo-elementele, este atribuit unui selector folosind două puncte. După toate regulile foilor de stil, sunt indicate proprietățile. Cu toate acestea, puteți aplica numai acele proprietăți care se referă la editarea fonturilor, indentărilor, culorilor, fundal, câmpuri și granițe.

Vă sugerez să luați în considerare exemplu concret. Implementarea celor prezentate program mic, am decis să fac nu doar o literă inițială colorată, ci să o umplu cu flori. Pentru a face acest lucru, trebuie să utilizați mai multe trucuri de instalare complicate culoare transparentă font și umplerea literei cu imaginea selectată.

P inițial proeminent (dimensiunea fontului: 26px; familia fontului: fantezie; ) P:prima literă ( /*prescrie reguli de stil pentru prima literă a unui paragraf*/ familia de font: sant-serif; greutatea fontului: 900 ; culoare: transparent: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg: 99% -webkit-background-clip );

Acest paragraf conține o propoziție cu un conținut foarte interesant.

Să continuăm povestea interesantă în paragraful următor.

Rezultatul rezultat pare foarte atractiv și neobișnuit, adică solutie ideala Pentru .

După cum puteți vedea Acest subiect foarte simplu. Adus de mine codul programuluiîl puteți folosi cu ușurință pentru resursele dvs. web, modificându-l și personalizându-l pentru a se potrivi stilului dvs.

Dacă materialul prezentat v-a fost util, atunci abonați-vă la actualizările blogului meu și nu uitați să împărtășiți cunoștințele acumulate (și bineînțeles linkul către blogul meu) prietenilor tăi. Noroc!

Pa! Pa!

Cu stima, Roman Chueshov

Adesea se grăbește atunci când adaugă materiale pe un site sau, de exemplu, creează subiect nou pe forum, utilizatorul poate începe să scrie o propoziție (titlu) cu o literă mică (minuscule). Aceasta este într-o oarecare măsură o greșeală.

Voi arăta mai multe opțiuni pentru rezolvarea acestei probleme: PHP și CSS sunt mai potrivite pentru materialele deja publicate, când jQuery poate corecta situația înainte de publicare.

Prima literă a unui șir cu majuscule în PHP

Există o funcție în PHP numită „ucfirst”, care doar convertește primul caracter al unei linii în majuscule, dar dezavantajul ei este că nu funcționează destul de corect cu chirilic.

Pentru a face acest lucru, vom scrie propria noastră funcție mică. Implementarea ar arăta astfel:

În această variantă de realizare, vom primi o propoziție care începe cu litere mari, care, de fapt, este ceea ce avem nevoie.

Prima literă majusculă a unui șir în CSS

Această metodă este vizuală (adică în cod sursa propunerile de site vor apărea ca atare) convertește și primul caracter în majuscule.

Utilizarea este după cum urmează:

prima propoziție

a doua teză

a treia teză

a patra teză

#conținut p:prima-litera (text-transform: majuscule; )

Folosind pseudo-elementul „prima literă” și proprietatea „text-transform”, setăm designul pentru fiecare primă literă a paragrafului.

Prima literă a unui șir cu majuscule în jQuery

După cum am spus mai devreme, această metodă de conversie este cea mai potrivită pentru materialele care urmează să fie încă publicate.

De exemplu, vom lua un câmp de text (va acționa ca un câmp pentru introducerea unui titlu) și vom scrie un mic script pentru acesta, care, atunci când introduceți o propoziție cu literă mică, o face să o scrie cu majuscule:

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

Scriptul funcționează atât atunci când scrieți text, cât și când îl introduceți pur și simplu. Nu uitați că pentru ca scripturile să funcționeze pe site-ul dvs., trebuie să aveți biblioteca jQuery activată.

20 decembrie 2015

Salutare tuturor, astazi am informatii foarte scurte care va vor ajuta sa faceti prima litera in orice element de pe site folosind css. Pseudo-clasa:prima-litera ne va ajuta în acest sens. Pentru începători, vă sfătuiesc să citiți articolul despre ce este o pseudo-clasă.

prima scrisoare în acțiune

Deci, totul este extrem de simplu. Să presupunem că avem un text - 3 paragrafe. În primul paragraf, trebuie să evidențiați chiar prima literă, așa cum se face adesea în multe cărți. Adică, această scrisoare trebuie să-i fie dată ei stiluri proprii: dimensiunea fontului, culoarea etc.

Acest lucru se face folosind pseudo-clasa: first-letter , care trebuie atribuită elementului în care se află direct textul nostru. Dar dacă facem asta:

P: prima literă (culoare: roșu)

În ce paragrafe crezi că prima literă va deveni roșie? Așa este, în toate paragrafele. Dar avem nevoie doar de primul! Opțiuni de soluție:
— atribuiți o clasă de stil primului paragraf și utilizați acest selector pentru a proiecta scrisoarea
— selectați primul paragraf utilizând proprietățile primul copil sau al al-lea copil

Soluția 1 în cod:

Abzac1:prima-litera (stiluri...)

Înainte de asta, trebuie să dăm primului paragraf clasa corespunzătoare. Dacă nu știi cum să faci asta, vezi acest articol.

Soluția 2 în cod:

P:primul-copil:prima-litera (stiluri...)

După cum puteți vedea, am folosit două pseudo-clase și astfel am selectat primul paragraf și prima literă din el. Destul de convenabil de asemenea.

Deci, am găsit 2 soluții cele mai simple. Citiți acest blog pentru a afla alte lucruri utile.

Pseudo-elementul cu prima literă este conceput pentru a reprezenta prima literă a unui element. Orice semn de punctuație precedent trebuie formatat împreună cu prima literă. Puțin mai devreme, înainte versiuni CSS 2.1:prima-litera poate fi folosită numai cu elemente de bloc. Și de la specificația CSS 2.1, domeniul de aplicare sa extins, iar acum: prima literă este disponibilă pentru orice element.
Numai stilurile legate de designul textului, chenarele, marginile și culoarea pot fi aplicate acestui pseudo-element.

Exemplu p ( dimensiunea fontului: 1em; ) p:prima literă (culoare: roșu; dimensiunea fontului: 2em; ) Pseudo-element::prima literă Rezultat

CU folosind CSS Puteți modifica ușor acest efect. De exemplu, arată bine dacă mutați prima literă în jos, astfel încât să fie situată, așa cum ar fi, în paragraful

Exemplu p ( dimensiunea fontului: 1em; ) p: prima literă ( afișare: bloc; margine: 0,2 em 0,2 em 0 0; float: stânga; culoare: roșu; dimensiune font: 2,5 em; ) Pseudo-element:: prima literă

Lorem ipsum dolor sit amet, integer ut a a nulla lectus. Scelerisque id vitae ac orci. Pharetra porttitor ipsum vel quisque arcu, ligula sit ut at quisque, suspendisse wisi mollis nam massa. Diam consectetuer nec, a dui eu, dapibus pulvinar et vel morbi viverra morbi, odio eros erat ut accumsan, luctus elementum aptent nulla. Laoreet dolor ridiculus deserunt amet erat, id ultricies, dolor dolor parturient suspendisse pretium porro id, id magnis mi wisi in. Congue a nulla nunc ut nisl, curabitur odio commodo velit ad.

Ac quo non libero. Maecenas diam elit, conubia suspendisse et vulputate mollis et cubilia, nec ligula nulla, fusce ultrices. Ligula quam auctor sem nec, est nulla. Integer pharetra viverra eget ipsum, wisi facilis consequat ullamcorper, tenetur diam, viverra ac eget vestibulum mauris ac, quisque etiam. Id ultrices, lacus suspendisse nulla.

Rezultat

După ce ați citit acest articol, puteți afișa automat prima literă a articolului pe site-ul dvs marime mare, așa cum se întâmplă în ziare și reviste.

Dacă nu este clar acum, mai jos este o imagine cu un exemplu. Voi spune că cunoștințele acumulate vă vor permite să faceți majuscule similare pentru toate paragrafele articolului, chiar dacă manual.

Vă propun să faceți acest lucru în două moduri: folosind CSS3 și combinația clasică CSS+HTML (cross-browser).

Să încercăm să facem ceva asemănător acum. Începeți automat folosind CSS3.

Cum se face majusculă automat

ÎN aceasta metoda Folosind niște parametri CSS3 automatizăm procesul de scriere cu majuscule a primei litere a unui articol. Tot ce ne trebuie este să adăugăm următoarea linie în fișierul de stil (style.css):

p:first-child:first-letter (float: stânga; culoare: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font -familie: Georgia;

p:first-child:first-letter (float: stânga; culoare: #0078BF; dimensiunea fontului: 75px; înălțimea liniei: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font) -familie: Georgia;

Hai sa explic putin: scrisoare engleză p (prima) este o etichetă

Paragraf de desemnare (asemănător cu apăsarea Introduceți cheileîn timp ce tastezi un articol). Structura articolului dvs. conține exact aceste etichete atunci când începeți alineat nou. Aici setăm parametrii necesari pentru aceasta.

Ceea ce apare în codul prezentat după această literă p , și anume primul copil:prima-litera, vă permite să calculați automat prima literă din articol.

Cu toate acestea, codul propus nu va fi suficient, deoarece trebuie să aflați numele clasei în care se află acest paragraf. Acest lucru se face și în două moduri, pe care le-am descris în următorul podcast video:

Există, de asemenea, un dezavantaj al unei astfel de înlocuiri automate folosind CSS3 - browserele mai vechi nu acceptă această tehnologie. Același lucru pentru semi-browsere Internet Explorer nici un suport funcții similare. Sper că în curând majoritatea utilizatorilor de internet vor trece la browsere normale care vă permit să implementați lucruri inaccesibile anterior.

Realizarea manuală a unui browser încrucișat cu majuscule

În această metodă, va trebui să identificați manual fiecare literă pe care doriți să o faceți majuscule. La care se adauga aceasta metoda este că poți face nu numai prima literă atât de mare, ci și orice literă din text. De fapt, puteți scrie cu majuscule fiecare paragraf - nu durează mult timp.

Pentru a implementa acest lucru, va trebui să scrieți orice nume de clasă cu atributele din exemplul de mai sus în fișierul style.css. Va arăta cam așa (am venit cu clasa bigletter):

Litere mari (float: stânga; culoare: #0078BF; dimensiunea fontului: 75px; înălțimea liniei: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; )

Litere mari (float: stânga; culoare: #0078BF; dimensiunea fontului: 75px; înălțimea liniei: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia ; )

Aici avem toate aceleași atribute, doar că la început s-a schimbat puțin: am înregistrat o clasă nouă și nu am folosit eticheta p. De ce este așa - mai multe despre asta mai târziu.