Sadaļas sākumā pirmajam burtam ir norādīts paaugstināts nolaižamais vāciņš.

Un jauna rindkopa...

Ja jūtaties eksperimentāls, varat izpētīt dažādas metodes papildus :first-child un :first-of-type . Piemēram, piemēram, :nth-of-type vai :nth-of-child, lai redzētu, kā šīs vai cita veida pseidoklases var izmantot CSS lielo burtu lietojuma tekstam. Neatkarīgi no tā, vai ievērojat šajā rakstā izklāstītos principus vai sākat iedziļināties, tiklīdz uzzināsiet, kā strādāt ar CSS pseidoklases first-child , :first-of-type un :first-letter , varēsit pieteikties. tos pareizi uz HTML elementiem.

Laba diena, vietņu veidošanas speciālisti. Šodienas publikācijā tiks apspriesta teksta satura noformēšanas tēma. Tieši tāpēc jūs uzzināsiet, kā iestatīt lielos burtus, izmantojot CSS rīkus, iepazīsieties ar vairākām iespējām, kā izveidot drop cap un, protams, varēsiet visu izmēģināt praksē. Nu, tagad pāriesim pie jautrās daļas!

Pārveidosim tekstu

Pateicoties kaskādes stila lapām, varat mainīt gan bloka pirmo rakstzīmi, gan visu tekstu. Es jums pastāstīšu, kā jūs varat darīt abus. Turklāt visi šajā rakstā minētie rīki tiek atbalstīti trīs valodu līmeņos: css1, css2, css2.1 un css3.

Sākšu ar interesantu rekvizītu, kas modificē visu teksta saturu atlasītajā . Šis teksta pārveidošana.

Nosauktais elements var pārvērst rakstzīmes par lielajiem un mazajiem burtiem, kā arī iestatīt katru vārda pirmo rakstzīmi uz lielo burtu. Vairāk par vērtībām rakstīju tabulā.

Tagad, lai nostiprinātu teorētisko materiālu, apskatiet piemēru.

Uzmanību!

!Rīt visiem kosmētikas produktiem atlaide!

Akcija ir spēkā visās filiālēs, kas atrodas jūsu pilsētā.

Nolaižamā vāciņa izveide

Ja nezini, ko nozīmē jēdziens “drop cap”, tad tagad ir īstais laiks to noskaidrot, jo tas ir tieši saistīts ar aktuālo tēmu.

Lielais burts (vai dažreiz saka arī iniciālis) ir nodaļas pirmais burts, kas no pārējiem atšķiras ar savu lielo izmēru, krāsu un dažos gadījumos pat fonta noformējumu. Reālajā dzīvē šādas vēstules piemēru var atrast vecos rokrakstos un grāmatās.

Ir vairāki veidi, kā izveidot iniciāļus. Bieži vien simbols tiek izcelts ar iezīmēšanas valodas tagu un tad noteiktas īpašības ir noteiktas stilos, kas to modificē. Tas ir labs veids, taču šajā publikācijā ir runāts par CSS mehānismiem (kas, manuprāt, šajā gadījumā ir daudz loģiskāki un ērtāk lietojami).

Lai atrisinātu šo problēmu, varat izmantot tādu rīku kā.

Tātad, šajā gadījumā mēs izmantojam:pirmais burts. Tāpat kā visi pseidoelementi, tas tiek piešķirts atlasītājam, izmantojot kolu. Pēc visiem stila lapu noteikumiem tiek norādītas īpašības. Tomēr varat lietot tikai rekvizītus, kas attiecas uz fontu, polsterējuma, krāsas, fona, piemaļu un apmaļu rediģēšanu.

Es ierosinu apsvērt konkrētu piemēru. Īstenojot prezentēto mazo programmu, nolēmu izveidot ne tikai krāsainu sākuma burtu, bet piepildīt to ar ziediem. Lai to izdarītu, jums ir jāizmanto daži viltīgi triki, iestatot fonta krāsu uz caurspīdīgu un aizpildot burtu ar atlasīto attēlu.

Šajā rindkopā ir teikums ar ļoti interesantu saturu.

Turpināsim interesanto stāstu nākamajā rindkopā.

Iegūtais rezultāts izskatās ļoti pievilcīgs un neparasts, kas ir ideāls risinājums.

Kā redzat, šī tēma ir ļoti vienkārša. Varat viegli izmantot programmas kodu, ko esmu nodrošinājis saviem tīmekļa resursiem, pārveidojot un pielāgojot to savam stilam.

Ja iesniegtais materiāls jums bija noderīgs, abonējiet mana emuāra atjauninājumus un neaizmirstiet dalīties iegūtajās zināšanās (un, protams, saitē uz manu emuāru) ar draugiem. Veiksmi!

Čau čau!

Ar cieņu, Romāns Čuešovs

Ļauj mainīt teksta burtu reģistru.

Noklusējuma vērtība ir iestatīta uz None , kas neietekmē tekstu. Teksta reģistrs paliek nemainīgs. Lielo un mazo burtu vērtības pārvērš rakstzīmes attiecīgi par lielajiem un mazajiem burtiem. Ja norādāt lielo burtu , tikai katra vārda pirmās rakstzīmes tiks rakstītas ar lielo burtu. Mantojums manto tā vecāku vērtību.

Piemērs

Šis ir nosaukums. Tam ir lietots teksta pārveidošanas rekvizīts ar lielajiem burtiem. Visas rakstzīmes būs ar lielajiem burtiem.

Šai rindkopai tiek lietots teksta pārveidošanas rekvizīts ar vērtību mazajiem burtiem, kas nozīmē, ka visi burti būs ar mazajiem burtiem.

Un šai pēdējai rindkopai tiek piemērots teksta pārveidošanas rekvizīts ar CAPITALIZE rekvizītu. Katra vārda pirmie burti tiks rakstīti ar lielajiem burtiem un tikai tie.

Rezultāts

Tomēr ne viss ir tik vienkārši. Ir dažas nianses. Ja skatāties uz iepriekšējā piemēra otro rindkopu, pamanīsit, ka vārds lielo burtu rakstīts , lai gan rindkopai ir iestatīts teksta pārveidošanas rekvizīts, lai rakstītu lielos burtus, tas pilnībā tiek rādīts ar lielajiem burtiem, kas atbilst oriģinālajam tekstam. Tas izskaidrojams ar to, ka ar norādīto lielo burtu vērtību tiek pārbaudīti tikai vārdu pirmie burti, bet pārējie paliek nemainīgi neatkarīgi no to sākotnējā stāvokļa.
Neskatoties uz šķietamo vienkāršību, teksta pārveidošanas rekvizīts var būt ļoti noderīgs. Piemēram, lai visu jūsu vietnes H1 virsrakstu tekstu padarītu ar lielajiem burtiem, stila lapai vienkārši jāpievieno viens rekvizīts.

H1 (teksta pārveidošana: lielie burti;)

un problēma tiks atrisināta. Un jums nevajadzēs manuāli mainīt visas galvenes, kuru var būt ļoti, ļoti daudz.

Kontrolē, vai elementa teksts tiek pārveidots par lielajiem vai lielajiem burtiem. Ja vērtība nav nekāda , avota teksta reģistrs tiks mainīts.

īsa informācija

Apzīmējumi

Vērtības

Lielais burts Katra vārda pirmā rakstzīme teikumā tiks rakstīta ar lielo burtu. Atlikušie simboli nemaina to izskatu. mazie burti Visas teksta rakstzīmes kļūst par mazajiem burtiem (mazajiem burtiem). lielie burti Visas teksta rakstzīmes kļūst par lielajiem (lielajiem burtiem). nav Nemaina rakstzīmju reģistru.

Smilšu kaste

Vinnijs Pūks vienmēr nevairījās no nedaudz atspirdzinājuma, īpaši vienpadsmitos no rīta, jo tajā laikā brokastis jau sen bija beigušās, bet pusdienas vēl nebija sākušās. Un, protams, viņš bija šausmīgi priecīgs, redzot, ka Trusis izņem krūzes un šķīvjus.

div (teksta pārveidošana: ar lielo burtu; )

Piemērs

Viduslaiku kultūras piemineklis

Amazones zemienē ir pārsvars mazs kaķu un suņu transports, un Hajos Bahia ir slavena ar saviem sarkanvīniem.

Šī piemēra rezultāts ir parādīts attēlā. 1.

Rīsi. 1. Teksta pārveidošanas rekvizīta pielietošana

Objekta modelis

Objekts.style.textTransform

Specifikācija

Katra specifikācija iziet vairākus apstiprināšanas posmus.

• Ieteikums — specifikāciju ir apstiprinājusi W3C, un tā ir ieteicama kā standarts.
• Ieteikums kandidātam ( Iespējamais ieteikums) - par standartu atbildīgā grupa ir pārliecināta, ka tas atbilst saviem mērķiem, bet standarta ieviešanai nepieciešama izstrādes kopienas palīdzība.
• Ierosinātais ieteikums Ieteiktais ieteikums) - šajā posmā dokuments tiek iesniegts W3C konsultatīvajai padomei galīgai apstiprināšanai.
• Darba projekts — izstrādāta projekta versija, kas ir apspriesta un grozīta kopienas pārskatīšanai.
• Redaktora melnraksts ( Redakcijas melnraksts) - standarta uzmetuma versija pēc projekta redaktoru veiktajām izmaiņām.
• Melnraksts ( Specifikācijas projekts) - standarta pirmā uzmetuma versija.

Sveiki šī emuāra lasītāji. Šodien es runāšu par to, kā jūs varat izveidot visus lielos burtus, izmantojot CSS. Protams, lai to izdarītu, varat ieslēgt Caps Lock un uzrakstīt vajadzīgo tekstu, taču šī ir diezgan primitīva metode. Bet ko darīt, ja jums ir jāizceļ atsevišķa rindkopa gatavajā rakstā?

Visu burtu pievienošana lielajiem CSS

Šim nolūkam ir teksta pārveidošanas rekvizīts, kas, kā jūs, iespējams, uzminējāt, pārveido tekstu. Tam ir šādas vērtības:

• mazie burti – viss teksts tiek rādīts ar mazajiem burtiem
• lielie burti - visi vārdi tiek parādīti ar lielajiem burtiem (kas mums ir nepieciešams)
• lielo burtu – katra vārda pirmais burts tiek rakstīts ar lielo burtu

Tas būtībā ir viss, kas jums jāzina. Atliek tikai izdomāt, kā piekļūt vēlamajam elementam. Iedomāsimies šo piemēru: raksta piektā rindkopa ir jāraksta tikai ar lielajiem burtiem. Un kā to var īstenot?

Kā sasniegt vēlamo elementu?

Kā zināms, rindkopa tiek izveidota, izmantojot pārī savienotu html tagu, kura viss saturs kļūst par rindkopu. Atliek tikai definēt tai jaunu stila klasi:

Tagad mums ir iespēja piekļūt šim konkrētajam punktam, izmantojot CSS valodu, neietekmējot pārējo. To var izdarīt šādi:

Lielie burti(
Teksta pārveidošana: lielie burti;
}

Šī metode ir piemērota, ja jums ir nepieciešams izcelt fragmentu konkrētā rakstā. Kā būtu, ja visās lapās būtu jābūt noteiktam tekstam ar lielajiem burtiem. Šajā gadījumā labāk ir ievietot bloku veidnes failā, lai to nerakstītu katru reizi.

Vai varbūt jums ir jāizceļ otrā rindkopa katrā rakstā, izmantojot CSS ar lielajiem burtiem. Tad jums būs piemērota cita iespēja. Atrodiet bloku, kurā parādās raksts, un piekļūstiet otrajai rindkopai, izmantojot n-to bērnu pseidoklasi. Šajā piemērā mūsu blokam ar rakstu ir rakstu klase.

pants p:nth-child(2)(
Teksta pārveidošana: lielie burti
}

Kā redzat, katram konkrētajam gadījumam ir atšķirīgs risinājums. Vissvarīgākais ir atcerēties par teksta pārveidošanas īpašību, kas maina burtu reģistru.

Kopumā nav ieteicams šādi attēlot tekstu, jo tas ļoti pasliktina tā uztveri, taču var izcelt dažus īpaši svarīgus fragmentus.

Šodien mēs apskatījām teksta pārveidošanas rekvizītu. Abonējiet emuāru, lai saņemtu jaunus rakstus.