Laba diena, vietnes veidošanas geeks. Šodienas publikācijā mēs aplūkosim tēmu, kas saistīta ar teksta satura noformējumu. Tāpēc jūs uzzināsit, kā css iestatīt lielos burtus - ar līdzekļiem iepazīstieties ar vairākām iespējām, kā izveidot nolaižamo vāciņu, un, protams, varat visu izmēģināt praksē. Tagad ķersimies pie jautrās daļas!

Pārveidosim tekstu

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

Sākšu ar interesantu īpašumu, kas maina visu atlases teksta saturu. to teksta pārveidošana.

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

Tagad, lai konsolidētu teorētisko materiālu, ņemiet piemēru.

Uzmanību!

Rīt visiem skaistumkopšanas produktiem ir atlaide!

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

Izlaišanas vāciņa izveidošana

Ja jūs nezināt, ko nozīmē termins "nomest vāciņu", tad ir īstais laiks to noskaidrot, jo tas ir tieši saistīts ar aktuālo tēmu.

Nolaižamais vāciņš (vai dažreiz viņi saka sākotnējo) ir nodaļas pirmais burts, kas no pārējiem atšķiras ar lielo izmēru, krāsu un dažos gadījumos pat fontu dizainu. Dzīvē šādas vēstules piemēru var atrast vecajos rokrakstos un grāmatās.

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

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

Tātad, šajā gadījumā: tiek izmantots pirmais burts. Tāpat kā visi pseidoelementi, tas tiek piešķirts atlasītājam, atdalot ar kolu. Pēc tam, saskaņā ar visiem stila lapu noteikumiem, tiek norādītas īpašības. Tomēr varat lietot tikai rekvizītus, kas saistīti ar 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, es nolēmu izgatavot ne tikai krāsainu pilināmo vāciņu, bet piepildīt to ar ziediem. Lai to izdarītu, jums jāizmanto daži viltīgi triki, nosakot caurspīdīgu fonta krāsu un aizpildot burtu ar izvēlēto attēlu.

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

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

Rezultāts izskatās ļoti pievilcīgs un neparasts, kas ir ideāls risinājums.

Kā redzat, šī tēma ir ļoti vienkārša. Jūs varat viegli izmantot manis doto programmas kodu saviem tīmekļa resursiem, mainot un pielāgojot savu stilu.

Ja iepriekš minētais materiāls jums bija noderīgs, tad abonējiet atjauninājumus manā emuārā un neaizmirstiet dalīties savās zināšanās (un, protams, ar saiti uz manu emuāru) ar draugiem. Veiksmi!

Čau čau!

Ar cieņu, Romans Čušovs

Lielais burts, saskaņā ar definīciju, ir teksta elements, kura izmērs ir relatīvi palielināts.Gandrīz visās valodās teikums sākas ar lielo burtu. Un rindkopas sākuma dizains ar ievērojamu lielo burtu ļauj strukturēt tekstu un atvieglo lasīšanu. Kad tiek veidota tīmekļa lapa, tekstu var uzrakstīt saskaņā ar autora vēlmēm un krievu valodas noteikumiem. Arī tā dizainu var "automatizēt", ievadot noteiktas "komandas" failā ar paplašinājumu css - stila lapu - vai papildināt savu html failu ar stila sadaļu. CSS parasti papildus tiek pētīts ar html, lai ātri mainītu dažus dizaina elementus vienlaikus visā tekstā.

Tas jo īpaši attiecas uz gadījumiem, ja vietnei ir simtiem lapu, un izmaiņas katrā no tām ir ļoti laikietilpīgs process.

Ja lietojat css, lielie burti katras rindkopas sākumā var izskatīties īpaši. Piemēram, zemāk esošais kods, kas ievadīts html bez iekavām, ļauj tekstam, kas dekorēts ar tagu "p", padarīt lielo burtu - pirmo burtu - lielāku - 220% no standarta izmēra, dzelteno - krāsas vērtība ir dzeltenā krāsā un uzrakstiet to ar fontu, kas atšķiras no pārējā teksta - Gruzija pret batangšu.

(<) style(>)

p: pirmais burts (fontu saime: Gruzija; fonta lielums: 220%; krāsa: dzeltena;)

(<)/style(>)

Jūs varat iegūt skaistus lielos burtus, ja izveidojat savu fontu attēlu veidā - katram burtam atsevišķu attēlu, piemēram, veckrievu vai gotikas stilā. Tos var ievilkt Tad vajadzīgajās vietās lielo burtu vietā varat ievietot kodu bez iekavām (<) img src=”ссылка на место, где лежит картинка”(>). Papildu atribūti būs augstums un platums - attēla platums un augstums, ko var iestatīt pikseļos, lai tie harmoniski saplūstu ar pārējo tekstu. Piemērs: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Apkārt iekavas< и >mēs noņemam.

Ja jums nav iespējas pašam uzzīmēt alfabētu, tad lielo burtu var izrotāt, izmantojot Google tīklā brīvi pieejamos fontus (sadaļa Fonti) vai citās meklētājprogrammās un resursos. Lai to izdarītu, iepriekš minētais kods ir jāformatē šādi:

(<) style(>)

p (fontu saime: batangche; fonta lielums: 93%;)

p: pirmais burts (fontu saime: Kelly + Slab; fonta lielums: 220%; krāsa: zila;)

(<)/style(>)

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

Google pakalpojums ļauj izvēlēties vienu vai otru un nodrošina gatavas saites ievietošanai html vai css. Mēs vēršam jūsu uzmanību uz to, ka ir jāizvēlas fontu grupa - latīņu vai kirilicas, jo gandrīz visi latīņu fonti nedarbojas krievu valodas tekstam. Šobrīd meklētājprogramma bez maksas nodrošina aptuveni 40 veidus.

Lielo burtu vai tā lielo burtu var veidot, izmantojot CSS teksta pārveidošanas rekvizītu. Ja stila lapā iestatāt teksta pārveidošanu: nav vērtības, teksts izskatīsies tā, kā to rakstāt. Lai pārvērstu visus burtus par mazajiem burtiem, iestatiet teksta pārveidošanu: mazo burtu vērtību atdala ar kolu un lielos burtus - ar lielajiem burtiem. Iestatot rekvizītu teksta pārveidošanai: ar lielo burtu, katra vārda sākumā būs lielais burts.

Ļauj mainīt teksta burtu reģistru.

Pēc noklusējuma vērtība ir iestatīta uz nulli, kas neietekmē tekstu. Teksta gadījums paliek nemainīgs. Lielie un mazie burti attiecīgi pārveido rakstzīmes par lielajiem un mazajiem burtiem. Ja norādāt lielo burtu vērtību, tad katra vārda pirmās rakstzīmes tiks lietotas tikai ar lielajiem burtiem. Mantojums manto vērtību no vecākiem.

Piemērs

h3 (teksta pārveidošana: lielie burti;). mazie burti (teksta pārveidošana: mazie burti;). kapitalizēt (teksta pārveidošana: rakstīt ar lielo burtu;)

Šis ir nosaukums. Tam ir teksta pārveidošanas rekvizīts, kas iestatīts uz lielajiem burtiem. Visas rakstzīmes būs lielās.

Teksta pārveidošanas rekvizīts šim punktam tika lietots ar mazajiem burtiem, kas nozīmē, ka visi burti būs mazie.

Un šai pēdējai rindkopai ir teksta pārveidošanas rekvizīts ar CAPITALIZE rekvizītu. Katra vārda pirmie burti būs lielie, un tikai tas.

Rezultāts

Tomēr ne viss ir tik vienkārši. Ir dažas nianses. Ja pievērsīsit uzmanību iepriekš minētā piemēra otrajai rindkopai, pamanīsit, ka vārds kapitalizēt, neraugoties uz teksta pārveidošanas īpašību, kas lietota rindkopai ar lielo burtu, tiek parādīts pilnībā 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 īpašums var būt ļoti noderīgs. Piemēram, lai savā vietnē lietotu visu H1 virsrakstu tekstu ar lielo burtu, viss, kas jums jādara, ir jāpievieno sava stila lapai viens rekvizīts.

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

un problēma tiks atrisināta. Un nav nepieciešams manuāli mainīt visas galvenes, kuru var būt ļoti, ļoti daudz.

Bieži vien steidzoties, pievienojot vietnei materiālus vai, piemēram, veidojot forumā jaunu tēmu, lietotājs var sākt rakstīt teikumu (virsrakstu) ar mazu (mazo) burtu. Zināmā mērā tā ir kļūda.

Es parādīšu vairākas iespējas šīs problēmas risināšanai: PHP un CSS ir vairāk piemērotas jau publicētiem materiāliem, kad jQuery var novērst situāciju pat pirms publicēšanas.

Virknes pirmais burts PHP ir lielie burti

PHP ir funkcija ar nosaukumu “ pirmoreiz", Kas tikai pārveido virknes pirmo rakstzīmi ar lielajiem burtiem, bet tās mīnuss ir tas, ka tā nedarbojas pareizi ar kirilicas alfabētu.

Lai to izdarītu, mēs uzrakstīsim savu mazo funkciju. Īstenošana izskatīsies šādi:

Šajā versijā mēs saņemsim teikumu, kas sākas ar lielo burtu, kas patiesībā ir tas, kas mums vajadzīgs.

Virknes lielie burti CSS

Šī metode vizuāli (tas ir, vietnes avota kodā piedāvājumi izskatīsies tādi, kādi tie ir) arī pārveido pirmo rakstzīmi ar lielajiem burtiem.

Lietošana ir šāda:

Izmantojot pseidoelementu " pirmais burts"Un īpašumi" teksta pārveidošana»Mēs esam noteikuši katra rindkopas pirmā burta izskatu.

Virknes pirmais burts jQuery ir lielie burti

Kā jau teicu iepriekš, šī pārveidošanas metode vislabāk piemērota materiāliem, kas vēl nav publicēti.

Piemēram, mēs paņemsim teksta lauku (tas darbosies kā lauks virsraksta ievadīšanai) un uzrakstīsim tam nelielu skriptu, kas, ievadot teikumu ar mazo burtu, padarīs to ar lielo burtu:

Skripts tiek aktivizēts gan rakstot tekstu, gan vienkārši to ielīmējot. Neaizmirstiet, ka, lai skripti darbotos jūsu vietnē, jums ir jābūt savienotai ar jQuery bibliotēku.

Kontrolē elementa teksta pārvēršanu par lielajiem vai mazajiem burtiem. Ja vērtība nav cita, avota teksta reģistrs tiks mainīts.

īsa informācija

Apzīmējumi

	Apraksts	Piemērs
<тип>	Norāda vērtības veidu.	<размер>
A & B	Vērtības jāparāda parādītajā secībā.	<размер> && <цвет>
A | B	Norāda, ka jāizvēlas tikai viena no ieteiktajām vērtībām (A vai B).	normāli | mazie vāciņi
A || B	Katru vērtību var izmantot atsevišķi vai kopā ar citiem jebkurā secībā.	platums || saskaitīt
	Grupē vērtības.	[kultūraugs || krusts]
*	Atkārtojiet nulli vai vairāk reizes.	[,<время>]*
+	Atkārtojiet vienu vai vairākas reizes.	<число>+
?	Norādītais veids, vārds vai grupa nav obligāts.	ielikt?
(A, B)	Atkārtojiet vismaz A, bet ne vairāk kā B reizes.	<радиус>{1,4}
#	Atkārtojiet vienu vai vairākas reizes, atdalot tās ar komatiem.	<время>#

×

Vērtības

rakstīt ar lielo burtu Katra teikuma vārda pirmā rakstzīme tiks sākta ar lielo burtu. Pārējie simboli nemaina to izskatu. mazie burti Visas teksta rakstzīmes kļūst par mazajiem (mazajiem). lielie burti Visas teksta rakstzīmes ir lielās (lielās). neviens Nemaina rakstzīmju reģistru.

Smilšu kaste

Vinnijs Pūks vienmēr nebaidījās no neliela veldzēšanās, it īpaši vienpadsmitos no rīta, jo šajā laikā brokastis jau sen bija beigušās, un vakariņas pat nebija iedomājušās sākt. Un, protams, viņš bija šausmīgi priecīgs, redzot, ka Trusis izņem krūzītes un šķīvjus.

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

Piemērs

Viduslaiku kultūras piemineklis

Amazones zemienes uzņem nelielu daudzumu kaķu un suņu, un Hayosh Bayah 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 piemērošana

Objekta modelis

Objekts.style.textTransform

Specifikācija

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

• Ieteikums - Šī specifikācija ir apstiprināta W3C un ieteicama kā standarts.
• Kandidātu ieteikums ( Iespējamais ieteikums) - par standartu atbildīgā grupa ir pārliecināta, ka tas atbilst tā mērķiem, taču standarta ieviešanai nepieciešama izstrādātāju kopienas palīdzība.
• Ierosinātais ieteikums ( Ieteiktais ieteikums) - Šajā brīdī dokuments tiek iesniegts W3C konsultatīvajai padomei galīgajai apstiprināšanai.
• Darba projekts - nobriedušāka projekta versija pēc apspriešanas un pārskatīšanas kopienas pārskatīšanai.
• Redaktora melnraksts ( Redakcijas projekts) - standarta projekta versija pēc projekta redaktoru rediģēšanas.
• Melnraksts ( Specifikācijas projekts) ir standarta pirmais projekts.

×