Html formātā fonta lielumam ir svarīga loma. Tas ļauj pievērst lietotāja uzmanību svarīgai informācijai, kas ievietota tīmekļa vietnes lapā. Lai gan svarīgs ir ne tikai burtu izmērs, bet arī to krāsa, biezums un pat ģimene.
Tagi un atribūti, pārmeklējot ar html fontiem
Hiperteksta valodai ir liels rīku komplekts darbam ar fontiem. Galu galā teksta formatēšana ir galvenais html uzdevums.
HTML valodas izveides iemesls bija teksta formatēšanas noteikumu parādīšanas problēma pārlūkprogrammās.
Apsveriet tagus, kas tiek izmantoti, lai strādātu ar fontiem html un to atribūtiem. Galvenais ir tags ... Izmantojot tā atribūtu vērtības, varat iestatīt vairākus fonta raksturlielumus:
- krāsa - nosaka teksta krāsu;
- izmērs - fonta lielums parastajās vienībās.
Tiek atbalstītas pozitīvas atribūtu vērtības no 1 līdz 7.
- seja — izmanto, lai iestatītu tagā izmantojamā teksta fontu saimi ... Vienlaicīgi tiek atbalstītas vairākas vērtības, atdalītas ar komatiem.
Tiek formatēts tikai teksts starp pārī savienotā fonta taga daļām. Pārējais teksts tiek parādīts noklusējuma standarta fontā.
Arī html ir vairāki sapāroti tagi, kas norāda tikai vienu formatēšanas noteikumu. Tie ietver:
- - html iestata treknrakstu. Tag darbība ir līdzīga iepriekšējai;
- - izmērs ir lielāks par noklusējuma;
- - mazāks fonta izmērs;
- - teksts slīprakstā. Līdzīga atzīme ;
- - pasvītrots teksts;
- izsvītrots;- - parādīt tekstu tikai ar mazajiem burtiem;
- - ar lielajiem burtiem.
Vienkāršs teksts
Sīktēls
Sīktēls
Vairāk nekā parasti
Mazāk nekā parasti
Slīpraksts
Slīpraksts
Pasvītrots
Izsvītrots
Stila atribūtu iespējas
Papildus aprakstītajiem tagiem ir vēl vairāki veidi, kā mainīt fontu html. Viens no tiem ir vispārīgā stila atribūta izmantošana. Izmantojot tā rekvizītu vērtības, varat iestatīt fonta displeja stilu:
1) font-family — rekvizīts nosaka fontu saimi. Ir iespējams uzskaitīt vairākas vērtības.
Html fonta maiņa uz nākamo vērtību notiks, ja lietotāja operētājsistēmā nav instalēta iepriekšējā saime.
Rakstīšanas sintakse:
fontu saime: fonta nosaukums [, fonta nosaukums [, ...]]
2) font-size - izmērs ir iestatīts no 1 līdz 7. Šis ir viens no galvenajiem veidiem, kā palielināt fontu html.
Rakstīšanas sintakse:
fonta izmērs: absolūtais izmērs | relatīvais izmērs | vērtība | procenti | mantot
Var iestatīt arī fonta lielumu:
- pikseļos;
- Absolūtā vērtībā ( xx-mazs, x-mazs, mazs, vidējs, liels);
- Procentos;
- Punktos (pt).
Fonta lielums: 7
Fonta lielums: 24 pikseļi
Fonta lielums: x-large
Fonta lielums: 200%
Fonta lielums: 24 pt
3) font-style - nosaka fonta rakstīšanas stilu. Sintakse:
fonta stils: normāls | slīpraksts | slīpi | mantot
Vērtības:
- normāls - normāla pareizrakstība;
- slīpraksts - slīpraksts
- slīps — pa labi noliekts fonts;
- inherit — pārmanto vecākelementa pareizrakstību.
Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:
fonta stils: mantot
fonta stils: slīpraksts
fonta stils: normāls
fonta stils: slīps
4) font-variant - pārvērš visus lielos burtus par lielajiem burtiem. Sintakse:
fonta variants: normāls | mazie burti | mantot
Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:
fonta variants: mantot
fonta variants: normāls
fonta variants: mazie burti
5) fonta svars - ļauj iestatīt teksta rakstīšanas biezumu (piesātinājumu). Sintakse:
fonta svars: trekns | treknāks | gaišāks | normāls | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Vērtības:
- treknraksts — iestata html treknrakstu fontu;
- drosmīgāks - resnāks salīdzinājumā ar parasto;
- gaišāks - mazāk piesātināts salīdzinājumā ar parasto;
- normāls - normāla pareizrakstība;
- 100-900 — iestata fonta biezumu ciparu ekvivalentā.
fonta svars: treknrakstā
fonta svars: treknāks
fonta svars: vieglāks
fonta svars: normāls
fonta svars: 900
fonta svars: 100
Fonta rekvizīts un html fonta krāsa
Fonts ir vēl viens konteinera īpašums. Iekšēji tas ir apvienojis vairāku rekvizītu vērtības, kas paredzētas fontu maiņai. Fonta sintakse ir:
fonts: font-size font-family | mantot
Vērtību var iestatīt arī fontiem, ko sistēma izmanto uzrakstos uz dažādām vadīklām:
- paraksts - pogām;
- ikona - ikonām;
- izvēlne - izvēlne;
- ziņojumu lodziņš - dialoglodziņos;
- mazie paraksti — mazām vadīklām
- statusa josla — statusa joslas fonts.
fonts: ikona
fonts: paraksts
fonts: izvēlne
fonts: ziņojumu lodziņš
mazais paraksts
fonts: statusa josla
fonts: slīpraksts 50 pikseļi treknrakstā "Times New Roman", Times, serif
Lai iestatītu fonta krāsu html, varat izmantot krāsu rekvizītu. Tas ļauj iestatīt krāsu, izmantojot atslēgvārdu vai RGB formātā. Un arī heksadecimālā koda formā.
Nolaižamais vāciņš ir rindkopas pirmais burts, kas ir lielāks par pārējo un novietots tā, lai tā augšdaļa būtu rindkopas pirmās rindas līmenī. Attēlā var redzēt tekstā iestrādāta nolaižamā vāciņa piemēru.
Starp citu, WordPress ir īpašs spraudnis (wordpress.org/extend/plugins/drop-caps), kas ļauj automātiski izveidot iegultu tekstā (un nobīdi uz leju) lielie burti... Brīnišķīgi! Tomēr ko darīt, ja nevēlaties izmantot spraudni (esmu pārliecināts, ka nevēlaties) un jums vienkārši ir jāizveido ierobežojums vairākām ziņām un, iespējams, kādā noteiktā vietā?
Labā ziņa ir tā, ka, lai izveidotu lielos burtus, nav nepieciešams izmantot spraudni, viss, kas jums nepieciešams, ir mazs css un span tags. Atveriet css failu un pievienojiet šādu kodu:
Span.dropcaps (fontu saime: Georgia, serif; krāsa: #ccc; fonta lielums: 46 pikseļi; peldošs: pa kreisi; fonta svars: 400; līnijas augstums: 1 em; piemale-apakša: -0,4 em; mala-pa labi : 0,09 em; pozīcija: relatīvs;)
Kaut kas tamlīdzīgs. Protams, jums būs nepieciešams stils, kas atbilst jūsu dizainam un tekstam. Piemēram, rekvizītu vērtības: fonta lielums, piemales un līnijas augstums būs jāizvēlas, pamatojoties uz jūsu dizainu un tekstu.
Laipnes tags
Lai stils tiktu attiecināts uz teksta lielo burtu, span tagā "jāiet" lielais burts un jāuzraksta atbilstošā klase.
A
Pseidoelements: pirmais burts
Varat arī veidot teksta pirmo rakstzīmi, izmantojot: pirmā burta pseidoelementu. Tomēr ierobežotu skaitu rekvizītu var lietot: pirmā burta pseidoelementam: tie ir rekvizīti, kas saistīti ar fontu, krāsu, fonu, apmalēm, piemalēm un polsterējumu. Jāņem vērā arī tas, ka: pirmā burta pseidoelements nedarbosies vecākās pārlūkprogrammās.
P: pirmais burts (fontu saime: Georgia, serif; krāsa: #ccc; fonta izmērs: 46 pikseļi; peldošs: pa kreisi; fonta svars: 400; līnijas augstums: 1 em; piemale-apakša: -0,4 em; piemale -pa labi: 0,09 em; pozīcija: relatīvs;)
Šeit ir dažas rediģēšanas metodes. lielie burti izmantojot CSS.
CSS lielie burti palīdz lauzt vienveidīga dizaina vienmuļību, kura teksti izskatās vienādi no sākuma līdz beigām.
Agrāk un tagad pilināmie vāciņi
Hronisti ar roku rakstītos manuskriptos izmantoja lielos burtus, daži no tiem datēti ar 5. gadsimtu. Lielos burtus turpināja lietot no 8. līdz 15. gadsimtam, kad iespiedmašīna drukāšanu panāca industriālā līmenī. Teksta sākumā tika novietoti gan ar roku rakstīti, gan drukāti pilienu vāciņi. Tie bieži tika dekorēti ar dekoratīvu rakstu, kas tika novietots ap burtu.
Paaugstinātie un nolaistie burti tiek lietoti arī mūsdienās. Tos var atrast laikrakstos, žurnālos un grāmatās, kā arī digitālajā tipogrāfijā. Paceltos burtus dažreiz sauc par pagarinātiem. Tie ir novietoti vienā līmenī ar tiem sekojošā teksta apakšdaļu. Izlaistie burti atrodas vienā līmenī ar teksta augšdaļu, dažreiz slānī aiz teksta satura galvenās daļas, vai arī pārējais teksts plūst ap tiem.
Paceltos burtus ir daudz vieglāk definēt, jo tie ir vienā līmenī ar pārējo tekstu, un parasti, lai to izdarītu, nav jāmaina plūsma ap ārējām malām. Izlaistajiem burtiem nepieciešama precīzāka pielāgošana. Jums būs vieglāk to atrisināt, ja vispirms sapratīsit, kā tiek apstrādātas izvirzītās rakstzīmes.
Nodarbību izmantošana
Dizaineri, kuri jau pārzina CSS, prot izveidot atsevišķu CSS klasi pirmajam lielajam burtam.
CSS rindkopas elementam un klasei, kas veido burtu, izskatītos šādi:
p (fonta izmērs: 20 pikseļi; fontu saime: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (fonta izmērs: 48 pikseļi; fontu saime: Didot;)
Un HTML kods izskatīsies šādi:
Kas mums sniedz:
Šķiet pārāk viegli? Faktiski jums būs jāveic pielāgojumi, pamatojoties uz konkrētajiem paaugstinātajiem burtiem, jo katram lielajam burtam ir nepieciešama īpaša kodināšana. Pēc fonta izvēles izvirzītajiem burtiem un pamattekstam ir jāizveido atsevišķas klases katram izvirzītajam burtam. Tālāk Css klase.myinitialcapsi labajā pusē esošais lodziņš ir negatīvs, lai samazinātu attālumu starp I un n.
Myinitialcapsi (fonta izmērs: 48 pikseļi; fontu saime: Didot; malas labā puse: -1 pikseļi;)
Šajā gadījumā starp burtiem “I” un “n” ir papildu atstarpe.
tostarp jauna klase ar negatīvu rezervi pievelk to tuvāk.
Atkarībā no ekrāna izšķirtspējas iepriekš minētajā piemērā I un n var izskatīties tā, it kā tie būtu sapludināti. Tas ir saistīts ar serifiem burtu galos. Tāpēc, pirms izlemjat par galīgajiem CSS stiliem, pārbaudiet vietni dažādās ierīcēs, lai redzētu, kā tajās izskatās teksts ar visiem lielajiem CSS stiliem.
Citāti un citi īpaši gadījumi
Jūs varat palielināt ne tikai burtus teksta sākumā. Varat ieviest citu klasi, lai izveidotu liela izmēra pēdiņu versiju, kas parādās blakus burtam. Mūsu gadījumā pēdiņās nav piemērota ne 48 pikseļu klase, ne 20 pikseļu teksta klase. Drīzāk tas būs kaut kas pa vidu – 30 pikseļi. Mēs pārvietosim pēdiņas uz leju par 4 pikseļiem, lai tās optiski izlīdzinātu ar I:
Myinitialcapsq (fonta izmērs: 30 pikseļi; fontu saime: Didot; peldēšana: pa kreisi; mala augšpusē: 4 pikseļi;)
tostarp ”jauna klase ar negatīvu rezervi pievelk to tuvāk.
Jums jābūt ļoti uzmanīgam, norādot katru no CSS lielajiem burtiem kopā ar pēdiņām, lai to apgriešana un līdzinājums atbilstu apkārtējam marķējumam. Piemēram, burts T būs jāpārvieto pa kreisi, nedaudz aiz rindkopas malas, lai tā šķērslīnija vizuāli iekļautos izkārtojumā. Tas pats būs jādara ar apaļajiem burtiem, piemēram, C, G, O un Q. Šajā piemērā izmantotie fontu izmēri ir 20, 30 un 48. Bet jums būs jāizvēlas izmēri, pamatojoties uz izvēlēto fontu specifiku. Kā arī to ekrānu izmēri un izšķirtspēja, kuros vietne tiks skatīta.
Pseidoelementi un pseidoklases
Izmantojot CSS pseidoelementu, varat viegli izveidot paaugstinātu burtu, rindkopas elementam pievienojot :: pirmo burtu. Izmantot: pirmais burts ( ar vienu kolu) novecojušām pārlūkprogrammām:
p (fonta lielums: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serifs; līnijas augstums: 2 em; polsterējums apakšā: 1,2 em;) p :: pirmais burts (fonta lielums: 3,6 em; teksta pārveidošana: lielie burti; fontu saime: "Monotype Bernard Condensed", serif; mala-labā: 0,03 em;) .initialb (margin-lab): -0,1 em;) .initialn (margin-labais: -0,15 em ;)
HTML kods, kas satur CSS klases, kas veido burtu N un B atzarojumu, izskatīsies šādi...
Sākuma burts, pirmais burts ir lielais burts.
Ja ir līnijas pārtraukums, nākamajai rindai nav sākuma ierobežojuma.
n HTML avotā ievērojiet, kā pirmais burts, nevis lielais burts HTML, tiek pielāgots sākotnējam ierobežojuma izmēram — 3,6 em. Kārtīgi, vai ne?
B ut ar smagu atdevi un jaunu rindkopu, vienmēr tiek izveidots cits sākuma ierobežojums. Jūs varētu jautāt sev, Kā es par to rēķināšos? Vai man vajadzētu būt sākotnējam ierobežojumam ļoti jaunas rindkopas sākumā? Nu, jūs varētu. Bet vai vēlaties, lai tas tā izskatītos, un vai tam noteikti ir jāizskatās?
Rindas pirmais lielais burts tiek pārvērsts par burtu.
Pirmais burts pēc rindiņas pārtraukuma netiks rakstīts ar lielo burtu.
OŅemiet vērā, ka HTML avotā pirmais burts netiek rakstīts ar lielo burtu, bet tiek pārveidots par 3,6 em rakstzīmi.
O Tomēr pat pēc piespiedu rindiņas pārtraukuma un katras jaunas rindkopas sākumā vienmēr tiek izveidots burts. Jūs, iespējams, uzdodat sev jautājumu: Kā es varu to ņemt vērā? Vai man ir jāpievieno burti visos šajos gadījumos? Nu, jūs varat. Bet vai tas ir nepieciešams?
Pat ņemot vērā priekšrocības, ko sniedz pseidoelementi, mums bija jāpievieno daudz koda, lai definētu atsevišķas klases, kas risinātu atzarošanas un atkāpes problēmas. Bet šī metode pārvērš katras jaunās rindkopas pirmo burtu par CSS lielo burtu. Dažiem tas var nedarboties, jo nav nepieciešams pārveidot katras rindkopas pirmo burtu.
Apvienojot pseidoklases un pseidoelementus, lai izveidotu viedu izkārtojumu
Pirmā bērna pseidoklases pievienošana palīdz atrisināt nevajadzīgas pirmo burtu pārveidošanas problēmu:
p (fonta izmērs: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serifs; līnijas augstums: 2 em; polsterējums apakšā: 0,5 em;) p: pirmais bērns :: pirmais burts ( fonta izmērs: 3,6 em; teksta pārveidošana: lielie burti; fontu saime: "Monotype Bernard Condensed", serifs; malas labā puse: 0,03 em;)
Apvienojot šo kodu ar HTML:
Pirmais burts, kas tiek definēts kā pirmais bērns, ir vienīgais burts, kas šajā metodē tiek pārveidots par paaugstinātu nolaižamo vāciņu.
Tā kā tiek pārveidots tikai burts, kas definēts kā pirmais bērns, ņemiet vērā, ka šis piemērs atšķiras no iepriekšējā, bez pirmā bērna. Turklāt mēs nepārvēršam pirmos burtus pēc rindkopas sākuma un pēc piespiedu rindiņas pārtraukuma. Tas izskatās elegantāk nekā izkārtojums, kad mēs pārveidojām visus rindkopu pirmos burtus.
Pseidoklases izmantošanas priekšrocība ir spēja rīkoties ar dažādiem īpašiem gadījumiem. Kā ar mīnusiem? Ir daudz dažādu pseidoklases, un tās var apvienot tik dažādos veidos, ka tas var likt galvai griezties. Piemēram, pseidoklases: first-child un: first-of-type var dot vienādus rezultātus. Varat arī piemērot pseidoklasi ne tikai rindkopai, bet arī elementiem sadaļa (fonta izmērs: 1,2 em; fontu saime: Georgia, "Times New Roman", Times, serifs; rindas augstums: 3 em;) sadaļa> p: pirmais bērns: pirmais burts (fonta izmērs: 4 em; teksta pārveidošana: lielie burti; fontu saime: Didot, serif; mala pa labi: 5 pikseļi;) Un kopā ar HTML: Sadaļas sākumā pirmais burts ir iestatīts uz pacelto nolaižamo vāciņu. Un jauna rindkopa... Ja vēlaties eksperimentēt, varat izpētīt dažādas metodes papildus: pirmbērnam un: pirmā tipa. Piemēram, piemēram: nth-of-type vai: nth-of-child, lai redzētu, kā noteikta veida pseidoklases var izmantot tekstam ar lielajiem CSS burtiem. Neatkarīgi no tā, vai ievērojat šajā rakstā izklāstītos principus vai sākat rakties dziļāk, pēc tam, kad iemācīsities strādāt ar CSS pseidoklasēm pirmbērns,: pirmā tipa un: pirmais burts, varēsiet tos pareizi piemērot HTML elementi. vai sīkāk par burtiem un HTML CSS formatējumu Nodaļā ir piemēri burtu formatēšana no hiperteksta iezīmēšanas apgabala. Kreisajā pusē esošajā izvēlnē jūs atradīsiet modernas un ļoti detalizētas HTML apmācības. Tie ļaus jums izveidot vietni no nulles., bet pagaidām skatieties nedaudz zemāk. Tas varētu būt interesanti. Informācijas sabiedrības laikmets Cilvēce ir iegājusi jaunā savas attīstības periodā, kurā informācijas un tīklu tehnoloģijām ir ārkārtīgi liela nozīme. Mēs dzīvojam informācijas sabiedrības laikmetā, kam raksturīga strauja informācijas un telekomunikāciju tehnoloģiju attīstība. Līdz ar datora un interneta parādīšanos sākās kolosālas pārmaiņas. Dators un internets mudina sabiedrību formulēt jaunas uzvedības normas, noteikumus un ideālus. Internets jaunajai paaudzei ir tas, kas televīzija bija iepriekšējai paaudzei. Taču globālais tīkls ir daudz funkcionālāks par televīziju, jo sniedz iespēju veikt pirkumus, pārdošanu, piedāvā saziņu un dažādus pašizpausmes veidus, piemēram, veidojot personīgās interneta lapas un vietnes. Burtu formatēšanas piemērs: Formatēšanas rezultāts: Lieliem burtiem rakstīta brīvā teksta piemērs Brīvā teksta piemērs, kas rakstīts ar lielajiem burtiem Tagi - definēt lielie burti(šie tagi netiek atbalstīti HTML 5). CSS style = "text-transform: lielie burti" kods - definē lielie burti.
Citiem vārdiem sakot, lielie burti tiek definēti, izmantojot CSS atribūti. Burtu formatēšanas piemērs: Formatēšanas rezultāts: Patvaļīgs HTML teksts un CSS 2 pikseļu burtu atstarpes Atribūtu un vērtību apraksts: CSS koda stils = "burtu atstarpes: 2 pikseļi" - definē CSS burtu atstarpes.
Kreisajā pusē esošajā izvēlnē meklējiet līdzīgus formatēšanas piemērus. Paldies par jūsu uzmanību. Ļauj mainīt tekstā esošo burtu reģistru. Pēc 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, tad tikai katra vārda pirmās rakstzīmes tiks rakstītas ar lielo burtu. Inherit manto vērtību no vecāka. Teksta pārveidošanas rekvizīts ir lietots šai rindkopai ar mazo burtu vērtību, kas nozīmē, ka visi burti būs mazie. Un šajā pēdējā rindkopā ir teksta pārveidošanas rekvizīts ar lietotu CAPITALIZE rekvizītu. Katra vārda pirmie burti būs lielie, un tikai tie.HTML burti: lielie un lielie burti
HTML burti un CSS attālums starp tiem
Piemērs
h3 (teksta pārveide: lielie burti;) .mazie burti (teksta pārveide: mazie burti;) .capitalize (teksta pārveidošana: lielie burti;)
Šis ir nosaukums. Tam ir teksta pārveidošanas rekvizīts, kas iestatīts uz lielajiem burtiem. Visas rakstzīmes būs ar lielajiem burtiem.