Mayroon akong problema kung saan itinakda ko ang laki ng font ng katawan sa 11px, ngunit ipinapakita ng mga talahanayan ang font sa 16px. Wala akong ideya kung ano ang sanhi nito - paulit-ulit kong pinagdaanan ang CSS at ang output (ang pinagmulan kapag pupunta sa pahina). Ang pagtatakda ng laki ng font ng talahanayan sa 11px ay malinaw na may gustong epekto, ngunit hindi ko kailangang itakda ito kahit saan na hiwalay sa istilo ng katawan.

Mayroon akong sumusunod na CSS:

Body ( font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; background-color: #E7D2B8; color: #863F2B; ) img.headerImg ( width: 100%; ) . menu-strip ( float: left; width: 20%; ) .main-content ( float: left; width: 80%; ) .clear ( clear: both; ) ul.menu ( margin: 0px; margin-left: 10px ; padding: 0px; list-style: none; ) ul.menu li ( margin: 0px; padding-top: 10px; padding-bottom: 10px; ) div.footer (lapad: 60%; margin-left : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( clear: right; ) table ( lapad: 100%; pagbagsak ng hangganan: pagbagsak;

At ang konklusyon ay ito:

Talagang wala akong nakikitang anumang bagay na maaaring magtakda ng laki ng font sa 16px sa talahanayan. Nangyayari ito para sa lahat ng tatlong seksyon (thead, tfoot, tbody). Mukhang hindi rin mai-format nang tama ng Netbeans 6.9 ang talahanayan, ngunit ang natitirang bahagi ng dokumento (bago at pagkatapos). Parang may mali sa table, pero hindi ko makita kung ano. Nangyayari ito sa Firefox at Opera (ang pinaka pinakabagong bersyon pareho). Hindi ko pa ito nasubukan sa IE dahil hinding-hindi ito gagamitin sa IE.

Ang mga sukat ng talahanayan, ang taas at lapad nito, ay awtomatikong tinutukoy depende sa kung ano ang nilalaman ng mga cell sa loob ng mga ito. Ang mas maraming pagpuno sa mga cell, ang mas malalaking sukat mga mesa at kabaliktaran.

Gayunpaman Mga tampok ng CSS nagbibigay-daan sa iyo na baguhin ang laki ng isang talahanayan sa HTML, na eksaktong tinutukoy ang lapad at taas na kailangan mo. Upang maging patas, dapat tandaan na pinapayagan ka rin ng mga katangian ng talahanayan na magtakda mga kinakailangang sukat. Gayunpaman, sa kasalukuyang sandali CSS lang ang pag-uusapan natin.

Dapat itong bigyang-diin na ang bawat talahanayan ay may sariling pinakamababang lapad at pinakamababang taas, na apektado ng nilalaman nito. At kahit na itakda mo ang mga halaga ng lapad at taas kahit na mas maliit, walang mangyayari. Ang mga gilid ng talahanayan ay hindi lalampas sa kanilang minimum.

Upang tukuyin ang lapad ng talahanayan kailangan mong gumamit ng CSS property lapad, at para itakda ang taas na kailangan mong gamitin ang property taas.

Sa isang halimbawa ay ganito ang hitsura.

Talahanayan ( lapad: 500px; taas: 100px; )

Resulta sa browser:

Buong code:

Table na may ibinigay na laki

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Ang mga halaga ng lapad at taas ng talahanayan ay maaaring tukuyin bilang ganap na halaga(sa mga pixel) at kamag-anak - sa porsyento. Halimbawa, 20px at 20% ayon sa pagkakabanggit.

Kung gagamit ka ng mga porsyento upang magtakda ng mga sukat ng talahanayan, kakalkulahin ang mga ito batay sa mga sukat elemento ng magulang. Kung pag-uusapan natin ang ating halimbawa, kung gayon pinag-uusapan natin tungkol sa window ng browser.

May isa pang kahulugan - auto. At ito ay espesyal dahil sa tulong nito, ang lapad at taas ng talahanayan ay awtomatikong kinakalkula, bilang default. Sa pagsasagawa, ang pagtukoy sa halagang ito ay ganito ang hitsura.

Lapad: auto;

Taas: auto;

Nais naming ituon ang iyong pansin sa isa pang bagay: mahalagang punto. Mas mainam na huwag ipahiwatig ang taas bilang isang porsyento, dahil, bilang isang patakaran, sa kasong ito ay hindi sila gagana.

Tinutukoy ang mga laki ng indibidwal na mga cell at column

Kung sa tingin mo ay hindi naitakda nang tama ng browser ang lapad ng mga column, batay sa mga nilalaman ng mga cell, kung gayon may karapatan kang tukuyin ang mga laki ng mga cell at column sa iyong sarili. At ngayon ay pag-uusapan natin kung paano baguhin ang laki ng cell sa isang HTML table.

Ginagawa ang pagbabago ng laki ng mga cell gamit ang parehong mga katangian ng CSS gaya ng mga laki ng talahanayan, katulad ng: lapad At taas.

Upang magdagdag ng mga istilo sa mga cell, maaari mong gamitin ang isa sa dalawang opsyon:

1. Bigyan ang mga cell ng mga indibidwal na pangalan ng klase. Magiging ganito ang hitsura nito: class="cell-50px"

   At pagkatapos nito dapat kang mag-aplay ng mga istilo para sa mga klase na ito.

2. Paganahin ang katangian istilo, sa loob kung saan isulat ang kinakailangang CSS code.

Sa pagsasagawa, ang pangalawang pagpipilian ay magiging ganito:

...

Gayunpaman, nais naming tandaan na hindi kinakailangang baguhin nang paisa-isa ang mga laki ng cell nang napakadalas. Bilang isang patakaran, ito ay ginagawa sa mga sitwasyon kung saan kinakailangan upang magtakda ng isang tiyak na lapad para sa mga haligi ng talahanayan. Sa kasong ito, mas madaling malutas ang problema. Kailangan mo lamang tukuyin ang lapad ng mga cell sa unang hilera.

Table na may ibinigay na laki

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Resulta sa browser:

Paano baguhin ang laki ng font sa isang talahanayan

Kadalasan mayroong pangangailangan na baguhin ang laki ng teksto sa isang talahanayan. Halimbawa, sa mga cell ng header. Magagawa ito gamit ang isang CSS property laki ng font. Itakda natin ang laki ng font para sa mga elemento :

Th (laki ng font: 30px; )

Tungkol dito ang araling ito nagtatapos. Iminumungkahi kong pag-isipan mong mabuti ang iyong takdang-aralin. Pag-aralan mo lang itong mabuti at pag-isipan ito. All the best sa lahat!

Mukhang, bakit alam ang mga HTML na tag para sa teksto, kung ngayon halos anumang admin panel ay may isang maginhawang isa na awtomatikong nagtatakda ng mga ito?

Ang katotohanan ay ang pag-format ng nilalaman sa isang website ay pangunahing naiiba sa pagtatrabaho mga aplikasyon sa opisina. Dito hindi sapat na bigyan lamang ng kaakit-akit na anyo ang teksto, dahil tamang disenyo Hindi lamang ang pagpapakita ng isang web page ang nakasalalay, kundi pati na rin ang pag-promote nito sa mga search engine.

Mga Tag at Katangian ng HTML: Pangunahing Syntax

Kahit anong text meron nakatagong code, na "nagpapaliwanag" sa computer kung ano at paano ipapakita sa screen. Ang lahat ng impormasyon ay naitala gamit ang isang hanay ng mga unibersal na elemento.

Sa pangkalahatan, ang mga HTML na text tag ay mga utos na nagdaragdag o nagbabago ng ilang partikular na block sa isang page. hitsura. Tamang format ganito ang entry:

Pakitandaan na hindi lahat ng mga tag ay ipinares. Halimbawa,
(line skip) o

---

(dagdag pahalang na linya) ay hindi kailangang isara sa lahat.

Bakit hindi mo maaaring kopyahin ang mga artikulo mula sa Word at iba pang mga programa sa editor ng website

Bagama't moderno mga programa sa opisina gumamit ng parehong mga HTML tag para sa teksto, sa 99% ng mga kaso ay hindi magagamit ang native code para sa mga web page. Kahit na ang dokumento ay karaniwang ipinapakita sa mismong application, kapag ipinasok sa isang website, maaaring mawala ang pag-format. Bukod dito, dahil sa malaking dami mga karagdagang tag at katangian, hindi sapat na masuri ng mga search engine ang nilalaman ng pahina. Na, sa turn, ay nagpapahirap sa pag-promote ng iyong mapagkukunan.

Upang makakuha ng malinis at nauugnay na code, kailangan mo munang i-clear ang text ng mga HTML tag na ginawa ng isang regular na editor. Mayroong ilang mga paraan upang gawin ito:

1. "Patakbuhin" ang artikulo sa pamamagitan ng Notepad at pagkatapos lamang ipasok ito sa site. Binura ng application ang lahat ng HTML, kaya pagkatapos nito ay kailangan mong i-format muli ang teksto (gamit ang mga tool sa editor o manu-mano).
2. Sumulat at mag-publish ng mga artikulo gamit ang LiveWriter. Ang sikat na editor ng blog ay agad na bumubuo ng tamang code. At sa isang hiwalay na tab makikita mo kung ano ang magiging hitsura ng teksto sa site.
3. Gumamit ng HTML Cleaner. Ang serbisyong online na ito ay hindi sinisira ang buong code, ngunit hindi kinakailangang mga fragment lamang. Gamit ang mga filter, pipiliin mo kung aling mga tag ang gusto mong i-save. Mayroon ding makapangyarihan visual editor para sa pag-format, na nagdaragdag ng mga naka-optimize na command sa code.

Mga talata

Ang elementong ito ay nasa halos lahat ng artikulo. Ang bawat talata ay dapat na matatagpuan sa loob ng naturang lalagyan - pinapasimple nito ang pag-format at pinapayagan kang mag-save unipormeng istilo sa lahat ng pahina ng site. Para sa kaginhawahan, ang tag

Laging magsulat kasama bagong linya.

Pag-align

Ang hiwalay na HTML na "Text Alignment" na tag ay hindi nagamit nang mahabang panahon. Sa halip, isang generic na ALIGN attribute ang ginawa. Upang baguhin ang posisyon ng isang text block sa pahina, dapat kang pumili ng isa sa 3 mga halaga - CENTER, KANAN o KALIWA. Maaari mong itakda ang pagkakahanay para sa iba pang mga elemento, tulad ng mga heading, sa parehong paraan.

Sa ilang sitwasyon, ginagamit ang ibang mga tag para sa pag-align, halimbawa, maaari mong iposisyon gamit ang elemento

.... Bakit ito maginhawa hiwalay na tag? Hindi tulad ng katangian, gumagana ito sa anumang nilalaman, kabilang ang mga larawan, video, flash, atbp.

Mga pamagat at subtitulo

Binibigyang-daan ka ng subheading system na lumikha ng lohikal na istraktura ng nilalaman. Kapag ang teksto ay nahahati sa makabuluhang mga bloke, mas madali para sa mambabasa na tumutok at sumipsip ng bagong impormasyon. Sinusuri din ng mga search engine ang mga headline upang maunawaan kung para saan ang mga query na ipo-promote ang page. Ito ang dahilan kung bakit inirerekomenda ng mga eksperto sa SEO ang paggamit ng mga topical na keyword sa mga ito.

Gumagamit ang HTML ng anim na antas ng mga subheading - mula sa

sa

. Mayroong malinaw na hierarchy sa sistemang ito:

• ...

  . Pangunahing artikulo, produkto sa isang online na tindahan, atbp.). Maaaring isa lamang sa teksto

  . Bilang isang tuntunin, naglalaman ito ng pangunahing keyword.

• ...

  . Hinahati ng mga pangalawang antas na subheading ang teksto sa mga makabuluhang bloke. Halimbawa, kung nagre-rate ka ng mga laptop, marami kang magagawa

  na may mga pangalan ng iba't ibang mga modelo.

• ...

  . Ang ikatlong antas ay kailangan kung ang teksto ay nasa pagitan ng dalawa

  ay pinaghiwa-hiwalay din sa maliliit na bloke. Sa aming halimbawa, maaaring ito ay mga pamantayan sa pagsusuri - "Pagganap", "Memory", "Graphics card", atbp. para sa bawat modelo.

• ,

  ,

  . Sa pagsasagawa sila ay napakabihirang. Ngunit ang pangkalahatang prinsipyo ay pareho - dapat silang "naka-nest" sa isang bloke na may top-level na subheading.

Siguraduhing panatilihin ang tamang hierarchy. Bumabalik sa aming halimbawa, nangangahulugan ito na hindi mo kaagad mailalagay ang mga pangalan ng modelo bilang

o

. At higit pa rito, gumamit ng mga subheading ng iba't ibang antas para sa mga bloke ng homogenous na kahulugan (halimbawa, i-highlight ang isang laptop na huling naganap sa pagraranggo gamit ang

).

Narito ang isang diagram na makakatulong sa iyo na agad na maunawaan at matandaan ang tamang istraktura ng mga heading sa HTML.

Mga listahan

Mas mainam na i-format ang anumang mga listahan at tagubilin sa anyo ng mga listahan, gamit ang mga espesyal na HTML tag para sa teksto ( tipikal na pagkakamali- ilang talata lang

Na nagsisimula sa isang gitling o numero).

Ang istraktura ng naturang mga bloke ay napaka-simple. Una, tinutukoy namin ang uri ng listahan - may bullet o may bilang.

Ang lahat ng mga elemento ay nasa pagitan ng pagbubukas at pagsasara ng mga tag. Ang bawat item sa listahan ay nagsisimula sa isang bagong linya at may format . Ang bilang ng mga elemento ay hindi limitado.

Pagpili at mga katangian nito

Ano ang maaaring baguhin gamit ang font at kulay na ito - at nang hindi nagdaragdag ng mga bagong klase sa CSS. Ito ay napaka-maginhawa kapag kailangan mong i-highlight lamang ang isang pangungusap o fragment.

ay may ilang mga katangian:

• Mukha. Binibigyang-daan kang baguhin ang font ng teksto. Maaari kang maglista ng ilang mga opsyon na pinaghihiwalay ng mga kuwit (Tahoma, Verdana). Kung ang user ay walang unang font na naka-install, ang system ay gumagamit lamang ng alternatibo.
• Sukat. Upang gawing mas malaki o mas maliit ang text, maglagay ng value sa pagitan ng 1 at 7 sa mga panipi.
• Kulay. Depende sa disenyo, maaari kang pumili ng isa sa mga karaniwang shade (pula, berde, asul) o maglagay ng code para sa anumang kulay na gusto mo.

Huwag gumamit ng mga talata na may format , sa halip na mga subheading. Mas mainam na itakda ang parehong mga parameter ng disenyo na may tamang tag.

Mga paraan upang i-highlight ang teksto

Nakakapagod ang monotonous na text, kahit na pinaghiwa-hiwalay sa mga talata. Upang maakit ang atensyon at mapukaw ang interes ng mambabasa, mahahalagang punto Inirerekomenda na i-highlight ang graphically. Narito ang ilang mga utos na tutulong sa iyo na makayanan ang gawaing ito.

... . Isang napakasikat na HTML tag. Bold text agad na nakakakuha ng mata, at samakatuwid sa tulong nito ay maginhawa upang i-highlight ang mahahalagang tesis at katotohanan.

Maraming tao ang nalilito sa mga tag At . Walang visual na pagkakaiba, ngunit gumagana ang mga ito nang iba. Ang una ay binabago lamang ang hitsura ng teksto, at ang pangalawa ay gumaganap bilang isang "index" at nagha-highlight sa pinakamahalagang mga fragment (mga keyword ng paksa at parirala para sa SEO).

... . Ang elegante at mahigpit na italics ay mainam para sa disenyo ng mga pang-agham na termino, mga salitang banyaga at iba't ibang mga sipi. Sa mga seryosong publikasyon, ang mga pangalan ng mga gawa ng sining ay naka-highlight din sa italic na teksto.

... . Marahil walang ibang HTML tag na nagdulot ng napakaraming kontrobersya. Ang salungguhit na teksto ay bihirang gamitin dahil ang pamamaraang ito Ang mga highlight ay dating itinalaga sa mga hyperlink. Kung gagamitin mo sa mga artikulo, pakitandaan na ito ay angkop lamang para sa mga maikling fragment - hindi hihigit sa 1 linya.

... . Isang kawili-wiling tag na nagbibigay-daan sa iyong gumawa ng isang bahagi Napaka-kaugnay sa advertising - halimbawa, upang bigyang-diin ang kaibahan sa pagitan ng luma at bagong mga presyo.

... . Ang pinakamadaling paraan upang palakihin ang laki ng font nang walang anumang karagdagang mga opsyon.

... . Gumagana ito sa parehong prinsipyo tulad ng nakaraang tag. Ang teksto na matatagpuan sa loob ay nabawasan na may kaugnayan sa pangunahing isa.

^... . Tamang pangalan ang format na ito ay isang superscript. Ang tag na ito ay pangunahing inilaan para sa mga mathematical degree at footnote. Binabawasan nito ang laki ng font at pinapataas ang napiling teksto.

_... . Ang mga subscript ay madalas na matatagpuan sa iba't ibang mga formula. Ang napiling fragment ay matatagpuan sa ibaba ng pangunahing teksto.

Mga makabuluhang lalagyan

Dahil natagpuan ang ilang mga bloke sa maraming teksto, nagsimulang gumawa ng mga espesyal na tag para sa kanila. Pinapasimple nito ang pag-format, dahil kung ang bawat uri ng nilalaman ay may sariling hanay ng mga istilo, kailangan mo lang i-highlight ang isang piraso ng teksto at ipahiwatig kung anong impormasyon ang nilalaman nito.

... . Tag para sa pagdaragdag ng mga code ng computer. Kailangan sa mga artikulo sa programming na may mga halimbawa - ang mga utos ay hindi isinasagawa, ngunit ipinapakita bilang plain text.

... . Idinisenyo para sa pag-format ng mga quote - halimbawa, mga pangunahing sipi mula sa isang panayam.

. Inilalagay ang bahagi ng teksto sa isang hiwalay na bloke. Bilang default, ang pagpili ay may higit pang natitirang padding, ngunit maaari mo ring baguhin ang laki, istilo, at kulay ng teksto sa CSS.

...

. Isang karagdagang tag na naglalaman ng impormasyon tungkol sa may-akda, kabilang ang mga link.

linyang naghahati

---

Ang isang simpleng linya ay maaaring gamitin upang markahan ang lohikal na dulo ng isang malaking seksyon.

---

hindi nalalapat sa mga nakapares na tag. Nangangahulugan ito na ang elemento ng pagsasara ng formathindi kailangan.

Gamit ang attribute na WIDTH, maaari mong gawing mas maikli ang separator sa pamamagitan ng pagtukoy ng angkop na laki sa mga pixel o isang porsyento ng lapad ng window.

Sa pamamagitan ng pag-aaral kung paano wastong gumamit ng mga tag upang i-format ang teksto sa HTML, hindi mo lamang gagawing mas madaling basahin ang iyong mga artikulo, ngunit madaragdagan din ang iyong pagiging epektibo sa SEO.

Mayroon akong isyu kung saan itinakda ko ang laki ng font ng katawan sa 11px ngunit ipinapakita ng mga talahanayan ang font sa 16px. Wala akong ideya kung ano ang sanhi nito - paulit-ulit kong pinagdaanan ang CSS at ang output (ang pinagmulan kapag pupunta sa pahina). Ang pagtatakda ng laki ng font ng talahanayan sa 11px ay malinaw na may gustong epekto, ngunit hindi ko kailangang itakda ito kahit saan na hiwalay sa istilo ng katawan.

Mayroon akong sumusunod na CSS:

Body ( font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; background-color: #E7D2B8; color: #863F2B; ) img.headerImg ( width: 100%; ) . menu-strip ( float: left; width: 20%; ) .main-content ( float: left; width: 80%; ) .clear ( clear: both; ) ul.menu ( margin: 0px; margin-left: 10px ; padding: 0px; list-style: none; ) ul.menu li ( margin: 0px; padding-top: 10px; padding-bottom: 10px; ) div.footer (lapad: 60%; margin-left : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( clear: right; ) table ( lapad: 100%; pagbagsak ng hangganan: pagbagsak;

At ang output ay ganito:

• Bahay
• Mga contact
  • Mga customer
  • Mga ahente
  • Mga artista
  • Mga supplier
  • Iba pa

Code	Forename	Apelyido	Address	Postcode	Telepono	Fax	I-edit
							Lumikha
code4	James	Asul	tirahan11 tirahan24 address32 bayan5	postcode4	fone4	fone2	I-edit
code5	Fred	Puti	tirahan13 tirahan24 address31 bayan1	postcode2	fone5	fone3	I-edit

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6

Talagang wala akong nakikitang anumang bagay na maaaring magtakda ng laki ng font sa 16px sa talahanayan. Nangyayari ito para sa lahat ng tatlong seksyon (thead, tfoot, tbody). Mukhang hindi rin mai-format nang tama ng Netbeans 6.9 ang talahanayan, ngunit ang natitirang bahagi ng dokumento (bago at pagkatapos). Parang may mali sa table, pero hindi ko makita kung ano. Nangyayari ito sa Firefox at Opera (ang pinakabagong mga bersyon ng pareho). Hindi ko pa ito nasubukan sa IE dahil hinding-hindi ito gagamitin sa IE.

Mula sa may-akda: Maligayang pagdating, mga mambabasa ng blog na ito. Ang laki ng font sa HTML, kasama ang kulay nito, ay ang mga pangunahing katangian ng teksto, na lubos na nakakaimpluwensya sa pang-unawa ng impormasyon, at bilang isang resulta, ang kaginhawahan ng site para sa mga gumagamit. Ang artikulong ito ay tungkol sa kung paano itakda ang laki ng font sa html.

Paano baguhin ang laki ng teksto nang tama

Ang katotohanan ay ang html ay nagbibigay ng napakalimitadong mga kakayahan sa mga tuntunin ng pagkontrol sa laki ng font. Halimbawa, mayroon itong maliit at malalaking tag. Pinapayagan ka nitong magpakita ng teksto sa bahagyang mas malaki o mas maliit na sukat, kaugnay ng normal na teksto sa pahina. Ngunit ang mga ganitong pagkakataon ay kakaunti, dahil ang nilalaman ay binago lamang nang bahagya, at sa pangkalahatan ang paggamit ng mga naturang tag ay kinasusuklaman.

Kaya kung paano dagdagan ang laki ng font sa html nang tama? Siyempre, kasama gamit ang css. At hindi lamang tumaas, ngunit bumaba rin, dahil ito ay kinakailangan din.

Halimbawa, ang mga hindi mahalagang salita sa isang pahina, tulad ng petsa kung kailan nai-publish ang pahina o iba pang pagmamay-ari na impormasyon, ay karaniwang pinananatiling maliit hangga't maaari. Para sa naturang teksto, maaari kang tumukoy ng font na mas maliit kaysa sa pangunahing teksto.

Ang mga heading, sa kabaligtaran, ay dapat na hindi bababa sa 2-3 beses na mas malaki kaysa sa pangunahing nilalaman. Kailangan mo ring pangalagaan ang tamang pagpapakita ng mga subheading. Ang panuntunan dito ay: sa anumang kaso ay hindi dapat mas malaki ang laki ng h3 kaysa sa h2.

Sa nilalaman mismo, bilang isang panuntunan, hindi ka dapat gumamit ng pinalaki na mga titik upang maakit ang pansin. Mas mainam na i-highlight ang mga ito gamit ang ilang uri ng background, bigyan sila ng italic o bold na istilo, ang gayong pag-highlight ay higit pa ay mas angkop pangunahing teksto at pagbutihin ang pang-unawa nito. Well, okay, iyon ay isang maliit na teorya, at ngayon ay pumunta tayo sa punto.

Gamit ang CSS

Kailangan namin ang font-size na property. Pinapayagan ka nitong itakda ang laki ng mga titik sa iba't ibang mga yunit ng pagsukat. Sa pagbuo ng website, mga pixel at mga kamag-anak na yunit em, ngunit tingnan natin ang lahat ng mga opsyon.

Susing salita. Sa css, ang halaga ng property na ito ay maaaring itakda sa mga keyword na mas maliit at mas malaki, na ginagawang mas maliit at mas malaki ang font kaugnay ng parent na elemento. Masasabi nating ang epekto ay magiging katulad ng paggamit ng maliliit at malalaking tag.

Ganap na sukat gamit mga keyword. Ang isa pang pangkat ng mga susi para sa property na ito - xx-small, x-small, small, medium, large, x-large at xx-large - ay nagbibigay-daan sa iyong itakda ganap na halaga. Bagaman sa katunayan hindi posible na tumpak na kalkulahin ito sa mga pixel, dahil marami ang nakasalalay sa mga setting ng browser. Ligtas na sabihin na ang paggamit ng mga naturang halaga ay tiyak na hindi gagawing magkatugma ang site na cross-browser.

Ganap na sukat gamit ang mga yunit ng pagsukat. Kadalasan, ang font ay tinukoy sa mga pixel (px). Sa pangkalahatan ito ay magandang desisyon, ngunit malamang na kailangan mong bahagyang baguhin ang laki ng mga titik sa iba't ibang mga resolusyon. Halimbawa, sa malalawak na screen dagdagan ang font. Magagawa ito gamit ang mga query sa media, na nagpapatupad tumutugon na disenyo.

Kamag-anak na laki. Sa isang mabuting paraan, ang kamag-anak na opsyon ay isinasaalang-alang sa pinakamahusay na posibleng paraan tukuyin ang laki ng font sa html, dahil pinapayagan ka nitong makamit ang perpektong pagiging madaling mabasa at mahusay na pagpapakita ng teksto sa anumang device.

Kamag-anak na halaga karaniwang tinutukoy gamit ang mga ems at porsyento. Kinakatawan ng Em ang taas ng font ng parent na elemento. Maaari mo itong itakda sa ganitong paraan, halimbawa:

body( font-size: 12px; ) a( font-size: 1.2em; ) h1( font-size: 2.8em; ) table td( font-size: 0.9em; )

katawan( laki ng font: 12px; laki ng font: 1.2em; h1 ( laki ng font: 2.8em; talahanayan td ( laki ng font: 0.9em;

Kaya, sa pamamagitan ng pagtukoy lamang ng isang ganap na halaga, ang lahat ng natitira ay maaaring tukuyin nang medyo. Kaya, ang mga headline sa unang antas ay magiging 2.8 beses na mas mataas payak na teksto sa pahina, ang mga link ay magiging mas malaki ng kaunti, at sa mga cell ng talahanayan ang teksto, sa kabaligtaran, ay magiging mas maliit.

Anong mga pakinabang ang ibibigay nito? Kung biglang nagbago ang font sa browser, ang lahat ng mga elemento ay magbabago nang proporsyonal at walang panganib na masira ang isang bagay sa iyong layout. Ang kamag-anak na laki ay maaari ding isulat bilang isang porsyento. Ang lahat dito ay simple din - 100% ang laki ng font ng parent element. Alinsunod dito, kung ang isang talata ay may sukat na 120%, at ang mga panipi sa isang talata ay may sukat na 150%.

Iba pang mga salik na nakakaapekto sa nilalaman ng teksto

Sa pangkalahatan, siyempre, gamit ang laki ng font maaari mong malinaw na itakda ang mga laki ng font, ngunit may ilang iba pang mga katangian na sa isang paraan o iba pa ay nakakaapekto sa laki nito. Maikling tungkol sa kanila:

Font-variant: small-caps – ipinapakita ng property na ito na may ganitong value ang lahat ng letra sa mga capitals, ngunit mas maliit ng kaunti kaysa sa mga normal. Ito ay tulad ng hindi karaniwang pag-uugali.

Text-transform: uppercase – lahat ng text na may ganitong property ay ipapakita sa malalaking letra, na may katumbas na epekto sa kanilang laki.

Text-transform: lowercase – ang kabaligtaran na sitwasyon, sa ganoong text ay magkakaroon ng no malaking titik.

Font-weight: bold – dito, sa tingin ko naiintindihan mo. Ginagawang bold ng property na ito ang text, at sa ganitong istilo ay nagiging mas malaki ito ng kaunti.

Letter-spacing: value sa pixels - binibigyang-daan ka ng parameter na ito na matukoy ang distansya sa pagitan ng mga character. Hindi nito naaapektuhan ang laki ng mga character sa anumang paraan, ngunit binabago nito ang lapad ng teksto. Maaari kang magpasok ng mga positibo at negatibong halaga.

Bottom line

Upang matukoy ang laki ng mga character sa text, gamitin ang font-size na property, na maaaring itakda sa parehong absolute at mga kamag-anak na sukat. Maaari rin itong hindi direktang maimpluwensyahan ng iba pang mga katangian na kahit papaano ay nagbabago sa teksto. Sa pamamagitan nito, nagpapaalam ako sa iyo para sa araw na ito, at huwag kalimutang tumingin sa aming blog sa paghahanap ng bagong impormasyon sa pagbuo ng website.