Þegar þú bætir texta við vefsíðurnar þínar er þessi texti sjálfgefinn svartur. En stundum viltu breyta textalitnum til að vera persónulegri.
Segjum til dæmis að þú sért með dekkri lit sem bakgrunn vefsíðunnar þinnar. Í því tilviki viltu gera textalitinn ljósari, bjartari lit til að bæta læsileika og aðgengi vefsíðunnar þinnar.
Í þessari grein muntu læra hvernig á að breyta litnum á textanum þínum í HTML. Við skoðum ýmsar aðferðir og ræðum hvaða aðferð er best.
Hvernig á að breyta textalit fyrir HTML5
Fyrir kynningu á HTML5 myndirðu nota <font>til að bæta texta við vefsíður. Þetta merki tekur coloreigindina, sem samþykkir litinn sem nafn eða hex kóða gildi:
<font color="#9900FF"> Welcome to freeCodeCamp. </font>
// Or
<font color="green"> Welcome to freeCodeCamp. </font>
Þetta merki var afskrifað þegar HTML5 var kynnt. Þetta er skynsamlegt vegna þess að HTML er álagningarmál, ekki stílmál. Þegar verið er að fást við hvers kyns stíl er best að nota CSS, sem hefur aðalhlutverkið að stíla.
Þetta þýðir fyrir þig að bæta lit á vefsíðurnar þínar, þú þarft að nota CSS.
Ef þú ert að flýta þér að sjá hvernig þú getur breytt litnum á textanum þínum, þá er hann hér:
// Using inline CSS
<h2 style="color: value;"> Welcome to freeCodeCamp! </h2>
// Using internal/external CSS
selector {
color: value;
}
Segjum sem svo að þú sért ekki að flýta þér. Við skulum kafa stuttlega beint inn.
Þú getur notað CSS litareiginleikann til að breyta textalitnum. Þessi eign tekur við litagildum eins og Hex kóða, RGB, HSL eða litaheiti.
Til dæmis, ef þú vilt breyta textalitnum í himinbláan, geturðu notað nafnið skyblue, sexkantskóðann #87CEEB, RGB aukastafakóðann rgb(135,206,235)eða HSL gildið hsl(197, 71%, 73%).
Það eru þrjár leiðir til að breyta litnum á textanum þínum með CSS. Þetta eru að nota innbyggða, innri eða ytri stíl.
Hvernig á að breyta textalit í HTML með innbyggðu CSS
Inline CSS gerir þér kleift að beita stílum beint á HTML þættina þína. Þetta þýðir að þú ert að setja CSS beint í HTML tag.
Þú getur notað stíleigindina, sem geymir alla stíla sem þú vilt nota á þetta merki.
<p>Welcome to freeCodeCamp!</p>
Þú munt nota CSS litareiginleikann ásamt valinn litagildi:
// Color Name Value
<p style="color: skyblue">Welcome to freeCodeCamp!</p>
// Hex Value
<p style="color: #87CEEB">Welcome to freeCodeCamp!</p>
// RGB Value
<p style="color: rgb(135,206,235)">Welcome to freeCodeCamp!</p>
// HSL Value
<p style="color: hsl(197, 71%, 73%)">Welcome to freeCodeCamp!</p>
En innbyggð stíll er ekki besti kosturinn ef forritin þín verða stærri og flóknari. Svo skulum skoða hvað þú getur gert í staðinn.
Hvernig á að breyta textalit í HTML með innri eða ytri CSS
Önnur valin leið til að breyta litnum á textanum þínum er að nota annað hvort innri eða ytri stíl. Þessir tveir eru nokkuð líkir þar sem báðir nota veljara.
Fyrir innri stílgerð gerirðu það innan <head>merkis HTML skráarinnar þinnar. Í <head>merkinu muntu bæta við <style>merkinu og setja alla CSS stílana þína þar eins og sést hér að neðan:
<!DOCTYPE html>
<html>
<head>
<style>
selector {
color: value;
}
</style>
</head>
// ...
</html>
Þó fyrir ytri stíl, allt sem þú þarft að gera er að bæta CSS stílnum við CSS skrána þína með því að nota almenna setningafræði:
selector {
color: value;
}
Valinn getur annað hvort verið HTML merkið þitt eða kannski a classeða ID. Til dæmis:
// HTML
<p> Welcome to freeCodeCamp! </p>
// CSS
p {
color: skyblue;
}
Eða þú gætir notað class:
// HTML
<p class="my-paragraph" > Welcome to freeCodeCamp! </p>
// CSS
.my-paragraph {
color: skyblue;
}
Eða þú gætir notað id:
// HTML
<p id="my-paragraph" > Welcome to freeCodeCamp! </p>
// CSS
#my-paragraph {
color: skyblue;
}
Athugið: Eins og þú hefur séð áðan, með innbyggðu CSS, geturðu notað litaheitið, Hex kóða, RGB gildi og HSL gildi með innri eða ytri stíl.
Klára
Í þessari grein hefur þú lært hvernig á að breyta letur-/textalit HTML frumefnis með því að nota CSS. Þú lærðir líka hvernig forritarar gerðu það áður en HTML5 var kynnt með <font>merki og litareiginleikum.
Hafðu líka í huga að það er alltaf æskilegra að stíla HTML þættina þína með innri eða ytri stíl en innbyggðri stíl. Þetta er vegna þess að það veitir meiri sveigjanleika.
Til dæmis, í stað þess að bæta svipuðum innbyggðum stílum við alla <p>merkjaþættina þína, geturðu notað eina CSS classfyrir þá alla.
Innbyggðir stílar eru ekki taldir bestu starfsvenjur vegna þess að þeir leiða til mikillar endurtekningar – þú getur ekki endurnýtt stílana annars staðar. Til að læra meira geturðu lesið greinina mína um Inline Style í HTML. Þú getur líka lært hvernig á að breyta textastærð í þessari grein og bakgrunnslit í þessari grein.
Ég vona að þessi kennsla gefi þér þekkingu til að breyta lit HTML textans til að láta hann líta betur út.
Skemmtu þér við kóðun!
Lærðu að kóða ókeypis. Opinn uppspretta námskrá freeCodeCamp hefur hjálpað meira en 40.000 manns að fá störf sem þróunaraðilar. Byrja
Höfundur valdi Diversity in Tech Fund til að taka við framlagi sem hluta af Write for Donations áætluninni.
Kynning
Cascading Style Sheets (CSS) er tungumál hannað fyrir tvær greinar: forritarans og hönnuðarins. Vinna með texta á vefnum er eitt skýrasta dæmið um þetta víðtæka aðgengi að tungumálinu. Stíll texta notar hugtök úr grafískri hönnunarheiminum en aðlagar nafnavenjur til að vera útfærðar á víðtækari hátt.
Í þessari kennslu muntu læra um leturfræði á vefnum, listina að stíla texta. Svipað og að vinna með prentvél, munt þú setja fram innihald þitt, beita sjónrænum stíl til að hjálpa til við að miðla innihaldinu og laga innihaldið til læsileika og áherslu. Tilgangurinn með stíl texta á vefnum er að búa til sjónrænt stigveldi með lit, stærð, lögun og rými. Þannig skera fyrirsagnir sig úr undirfyrirsögnum sem skera sig úr málsgreinum. Þessi hugtök hjálpa til við að gera texta læsilegri og skannanlegri fyrir lesendur.
Þú byrjar kennsluna á því að skrifa HTML uppbygginguna, sem mun samanstanda af staðgengilsefni frá Cupcake Ipsum. Þú munt vinna með mismunandi fyrirsagnarstig ( h2— h6) og innihaldsgerðir ( p, strong, og em) til að beita mörgum textatengdum CSS-eiginleikum, þar á meðal font-family, font-size, og color. Þú munt einnig hlaða sérsniðnum leturgerðum frá Google Fonts, þriðju aðila leturhýsingarþjónustu. Hvert skref í þessari kennslu mun kynna nýtt hugtak eða mengi eiginleika til að eiga við um innihaldið. Í lokin muntu hafa sérsniðna vefsíðu.
Forkröfur
- HTML skrá sem er vistuð á staðbundinni vél
index.htmlsem þú getur fengið aðgang að úr textaritlinum þínum og vafra að eigin vali. Til að byrja, skoðaðu hvernig á að setja upp HTML verkefnið þitt, og fylgdu Hvernig á að nota og skilja HTML frumefni fyrir leiðbeiningar um hvernig á að skoða HTML í vafranum þínum. Ef þú ert nýr í HTML skaltu prófa hvernig á að byggja upp vefsíðu í HTML seríunni.
Setja upp HTML-dæmið
Í þessu fyrsta skrefi muntu setja upp HTML sem þú munt stíla í restina af kennslunni. Tilgangur HTML í þessari kennslu er að útvega ýmsa þætti og aðstæður fyrir þig til að æfa stíl.
Opnaðu index.htmlskrána með textaritli, svo sem nano, Vim eða Visual Studio Code. Bættu við eftirfarandi HTML til að gefa skránni nauðsynlegan grunnkóða:
index.html
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
Einingin <link />hleður nú þegar inn í styles.cssskrána, svo vertu viss um að hafa þá skrá tilbúna líka.
Næst þarftu efni til að stíla. Þegar búið er til textastíla þarf verkefni oft stíla áður en efnið er tilbúið. Í grafískri hönnunarheiminum er staðsetningarefni notað í þessum tilgangi. Hönnuðir munu oft nota latneskt texta sem staðgengil, þekktur sem Lorem Ipsum. Það eru margar nútímalegar útfærslur á þessum staðsetningartexta, þar á meðal Cupcake Ipsum. Þetta mun vera tilvísunarafritið sem notað er í gegnum HTML.
Til að byrja, þarf HTML að sýna stigveldi , skýra greinarmun og röð efnis. Í HTML er það gert með fyrirsagnarmerkjum, sem spanna frá <h2>, efstu fyrirsögninni, í gegnum <h6>, neðstu fyrirsögnina. Sjálfgefin stíll vafra fyrir fyrirsagnirnar skilgreina sjónræna stigveldið eingöngu eftir stærð, þar sem <h2>sjálfgefið font-sizeer umtalsvert stærra en <h6>. Í gegnum þessa kennslu muntu nota aðrar meginreglur hönnunar, svo sem lit og rými, til að veita efninu sjónrænu stigveldi.
Til að búa til þetta stigveldisefni muntu skrifa út ýmsar fyrirsagnir og fylla hverja fyrirsögn með nokkrum orðum frá Cupcake Ipsum innan merkjanna <body>í index.html. Þú munt fylgja réttri HTML merkingarfræði , sem veitir vafrann nákvæma merkingu.
Til að hafa rétta HTML merkingarfræði:
- Það verður aðeins einn
<h2>þáttur á síðunni. Þetta mun venjulega vera titillinn. - Síðari fyrirsagnarstig verða aðeins eitt minna, jafnt eða eitthvert hærra stig. Til dæmis, eina fyrirsagnarstigið sem kemur á eftir
<h3>mun vera annað hvort<h4>, annað<h3>, eða<h2>, en aldrei an<h5>eða<h6>.
Með reglum merkingarfræði fyrirsagna skaltu bæta eftirfarandi auðkenndu HTML við index.html:
index.html
...
<body>
<h2>Sugar plum chupa chups chocolate bar cupcake donut</h2>
<h2>Tootsie roll oat cake macaroon</h2>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<h3>Apple pie pudding topping</h3>
<h4>Gingerbread danish</h4>
<h5>Carrot cake topping lollipop gummi bears</h5>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
</body>
...
Næst þarftu efni til að fylla út bil á milli hverrar fyrirsagnar. Þetta verða málsgreinar sem eru tilgreindar af <p>þættinum til að halda hverri málsgrein. Notaðu Cupcake Ipsum aftur til að búa til þetta efni og setja málsgreinarnar um alla síðuna.
Bættu við auðkenndu hlutunum af eftirfarandi kóðablokk. Þessi kennsla mun nota þetta snið fyrir kóðablokkir í gegn:
index.html
...
<body>
<h2>Sugar plum chupa chups chocolate bar cupcake donut</h2>
<h2>Tootsie roll oat cake macaroon</h2>
<p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<p>I love marshmallow candy. Sesame snaps muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
<h3>Apple pie pudding topping</h3>
<p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
<h4>Gingerbread danish</h4>
<p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
<h5>Carrot cake topping lollipop gummi bears</h5>
<p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
<p>Cupcake donut topping chupa chups halvah chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
</body>
...
Að lokum skaltu bæta við <strong>, <em>, og samsetningu þessara tveggja þátta saman. Þetta mun veita dæmi um orðasambönd sem lögð er áhersla á í innihaldinu:
index.html
...
<h2>Tootsie roll oat cake macaroon</h2>
<p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
<h2>Jelly beans tiramisu pastry danish donut</h2>
<h3>Lemon drops pastry marshmallow</h3>
<p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
<h3>Apple pie pudding topping</h3>
<p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
<h4>Gingerbread danish</h4>
<p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
<h5>Carrot cake topping lollipop gummi bears</h5>
<p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
<h6>Liquorice bonbon candy cotton candy liquorice</h6>
<p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
...
Nú þegar þú hefur skrifað HTML, vistaðu index.htmlog opnaðu það í vafranum þínum til að sjá hvernig síðan lítur út með sjálfgefnum stíl vafrans:
Textinn er á bilinu í stærðum yfir alla þættina, þar sem sjálfgefinn <h5>og <h6>stíll er minni en <p>textinn.
Í þessu skrefi seturðu upp HTML efnið sem verður stílað í restinni af kennslunni. Næst muntu vinna með font-familyeignina, læra um leturstaflann , lista yfir leturgerðir sem vafrinn getur notað og nota leturgerðir á mismunandi þætti.
Að nota font-familyeignina
Næst muntu vinna með font-familyCSS eignina og hlaða utanaðkomandi leturskrá frá Google Fonts þjónustunni. Nafn þessarar eignar er dregið af leturfræðihugtaki sem lýsir safni leturgerða og afbrigðum þess leturs, þar með talið feitletrað og skáletrað útgáfur. Leturgerð getur haft mörg af þessum afbrigðum en geta öll verið hluti af sama font-family, með þessum afbrigðum sem kallast með font-weightog font-styleeiginleikum.
Til að byrja að vinna með font-family, það er gagnlegt að skilja upplýsingar um verðmöguleika þess. Gildi font-familyeignar er listi yfir leturgerðir sem kallast leturstafli. Leturstaflan virkar sem varakerfi. Íhugaðu eftirfarandi font-familyeignargildi:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Vafrinn ætlar fyrst að ákvarða hvort Helvetica Neue sé í boði fyrir hann til notkunar, annaðhvort sem leturgerð sem er uppsett á tölvunni eða sem útgefið af vefsíðu. Ef vafrinn finnur ekki leturgerð sem heitir Helvetica Neue, þá fer hann niður á listann í Helvetica og síðan í Arial. Ef vafrinn getur ekki fundið neitt af þessum leturgerðum, þá mun síðasta leturgerðin á listanum, sans-serif, nota það sem vafrinn hefur stillt sem sjálfgefið leturgerð fyrir sans-serifstílleturgerð.
Athugið: Leturstaflar bjóða upp á sinn besta eiginleika, ekki þegar letur finnst ekki, heldur þegar tiltekinn stafur finnst ekki í letrinu. Þetta er sérstaklega nauðsynlegt fyrir tilvik þar sem notuð eru mörg tungumálastuðningur, þar sem ein leturgerð er kannski ekki með stafasett sem nær yfir allar tungumálaþarfir. Leturstafli getur innihaldið varaleturgerð sem veitir sérstafina og svipaða sjónræna tilfinningu og aðalleturgerðin í staflanum.
Búðu til skrá sem heitir styles.cssí sömu möppu og index.html. Opnaðu það í textaritlinum þínum og bættu við sjálfgefna letri fyrir síðuna:
styles.css
body {
font-family: "Avenir Next", Calibri, Verdana, sans-serif;
}
Í þessum kóða byrjarðu á bodytegundavali með font–familyeign. Næst, fyrir leturstaflann sem þú byrjar með "Avenir Next", sem verður fáanlegur á iOS og macOS vöfrum. Avenir Nexter innan gæsalappa vegna þess að leturnafnið er tvö orð. Næsta leturgerð er Calibrifyrir Windows vafra. Vertu viss um að setja kommu á milli hverrar leturgerðaryfirlýsingar. Til að veita almennari leturgerð, notarðu síðan Verdana, sem hefur verið víða aðgengilegt á tölvum síðan snemma á 20. Að lokum, þar sem allar þessar leturgerðir eru flokkaðar sem sans serif leturgerðir, bætir þú við sjálfgefna vafranum sans-serifsem loka leturgerð í leturstaflann.
Vistaðu styles.cssog opnaðu síðan index.htmlí vafranum þínum. Þú munt finna nýtt leturgerð í stað sjálfgefna leturgerðar vafrans fyrir innihaldið. Ef þú ert á Apple stýrikerfi mun Avenir Next birtast í vafranum. Ef þú ert á Windows mun Calibri birta í staðinn. Eftirfarandi mynd er hvernig þessi leturstafla lítur út á MacOS:
Í þessum hluta notaðir þú font-familyeignina til að setja upp sjálfgefna leturstafla fyrir vefsíðuna. Þú setur einnig upp font-familyeiginleika sem á sérstaklega við um innihald fyrirsagna. Í næsta hluta muntu nota Google leturgerðir til að hlaða sérsniðinni leturskrá og nota hana á síðunni.
Hleður sérsniðnum leturgerðum með Google leturgerðum
Nú þegar þú hefur notað font-familyeignina með leturgerð sem þegar er uppsett á tölvunni þinni er kominn tími til að hlaða leturgerð frá utanaðkomandi þjónustu. Þetta mun auka úrval leturgerða sem þú getur notað til að stíla textann þinn. Í þessum hluta muntu vinna með Google Fonts þjónustunni til að hlaða og nota leturgerð á vefsíðunni.
Vafrar hafa getu til að hlaða hvaða leturgerð sem er, svo framarlega sem það fylgir viðeigandi leturskráarsniði fyrir þann vafra. Leturþjónusta, eins og Google leturgerðir, léttir vinnuna við að skilgreina og hýsa leturgerðir með því að útvega bæði CSS og leturskrár sem þarf til að hlaða leturgerðinni. Það eru margar aðrar þjónustur eins og Google Fonts, en Google Fonts hýsir kónga- og opinn leturgerðir og býður upp á þjónustuna án endurgjalds.
Til að byrja skaltu opna fonts.google.comí vafranum þínum.
Það eru margar mismunandi leturgerðir sem þú getur valið úr í Google leturgerðum. Þessi kennsla mun nota tvö: Public Sans og Quicksand.
Í leitarreitnum á Google leturgerðum skaltu leita að Public Sans. Þegar leturspjaldið birtist úr leitarniðurstöðunni birtist sýnishorn af letrinu. Smelltu á spjaldið til að fara á síðuna fyrir leturgerðina:
Public Sans letursíðan sýnir öll afbrigði leturgerðarinnar. Þetta eru þekkt sem þyngd , sem eru á bilinu 100 til 900. Í tilgangi þessarar kennslu skaltu finna venjulegu (400) og feitletraða (700) stíla og ýta á + Velja þennan stíl hnappinn við hlið hvers stílafbrigðis, sem og skáletraður stíll þeirra.
Þegar þú hefur valið fyrsta stílinn mun valið fjölskyldutól renna inn. Þetta tól mun veita þér HTML og CSS sem þarf til að nota þessar leturgerðir:
Veldu <link />aðferðina til að hlaða leturgerðinni í vafranum og afritaðu HTML sem fylgir. Opnaðu index.htmlog bættu kóðanum við <head>þáttinn eftir <link />hleðsluna styles.css. Haltu Google leturgerðum opnum, þar sem þú munt fara aftur í það nokkrum sinnum í viðbót:
index.html
...
<head>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">
</head>
...
Á þessum tímapunkti mun endurhlaða index.htmlí vafranum þínum ekki hafa neinar sjónrænar breytingar. Vafrinn er að hlaða letrinu, en það þarf að bæta letrinu við leturstaflann til að nota leturgerðina á innihaldið.
Farðu aftur í Google leturgerðir til að finna CSS regluna sem hleður Public Sans. Google leturgerðir veitir leturstafla af Public Sans og sjálfgefna sans-serifleturgerð vafrans með font-family: 'Public Sans', sans-serif;. Þar sem þú ert nú þegar með leturstafla sett upp með varaleturgerðum, er allt sem þú þarft að taka úr dæmi Google leturgerða nafnið sem vísar til Public Sans.
Notaðu núverandi leturstafla í styles.css, skiptu út Avenir Nextog Calibrimeð Public Sans:
styles.css
body {
font-family: "Public Sans", Verdana, sans-serif;
}
Nú þegar grunnleturstafla hefur verið lýst yfir eru allar leturgerðir á síðunni nú Public Sans.
Ein algeng hönnunaraðferð til að vekja meiri athygli á fyrirsögnum er að nota annað letur fyrir fyrirsagnirnar en fyrir aðaltextann. Til að nota þetta á þinn eigin HTML skaltu fara aftur í Google leturgerðir og leita að „Quicksand“. Þetta verður fyrirsögn, eða birtingarletur , fyrir <h2>gegnum <h6>þættina á síðunni.
Þegar þú hefur fundið Quicksand skaltu velja leturspjaldið og bæta hálffeitletri (600) og feitletruðu (700) leturþyngd við valda leturgerð við hlið Public Sans. Google leturgerðir munu gefa upp nýja vefslóð til að hlaða öllum valnum leturgerðum og afbrigðum. Skiptu út fyrra hrefgildi fyrir nýja hlekkinn í skránni þinni index.html:
index.html
...
<head>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap">" rel="stylesheet">
</head>
...
Nú þegar Quicksand er stillt á að hlaðast í vafranum þarftu að nota það á fyrirsagnarmerkin. Þú munt ná þessu með því að bæta lista yfir CSS veljara sem eru aðskilin með kommum, sem kallast hópval , við styles.cssskrána þína. Í þessu tilviki skaltu nota leturstaflann sem Google leturgerðir veita með Quicksand og síðan sjálfgefið sans-serifleturgerð vafrans:
styles.css
...
h2, h2, h3, h4, h5, h6 {
font-family: "Quicksand", sans-serif;
}
Vistaðu breytingarnar þínar í styles.cssog farðu aftur í vafrann þinn til að endurhlaða index.html. Ekki hika við að loka Google leturgerðum á þessum tímapunkti. Þegar vafrinn hleðst, muntu nú sjá tvær leturgerðir birtar. Quicksand er nú á öllum fyrirsögnum og Public Sans er á öllu öðru efni, þar með talið feitletrað og skáletrað efni.
Í þessum hluta hleðst þú inn tveimur leturgerðum frá Google Fonts þjónustunni og bættir þeim leturgerðum við núverandi leturstafla. Næsti hluti mun skoða hvernig leturgerðin er notuð til að tilgreina hvenær og hvernig á að nota feitletrað og skáletrað leturgerð.
Notkun font-weightog font-styleEiginleikar
Í þessum hluta muntu nota eiginleikana font-weightog font-styletil að stilla hvernig leturgerð birtist. Það eru margar ástæður fyrir því að nota þessi afbrigði, svo sem til að leggja áherslu á innihald, sem hluta af tilvitnunarstílsleiðbeiningum og til að veita sjónræna afbrigði.
Nú þegar þú ert að hlaða inn sérsniðnum leturgerðum frá Google Fonts geturðu byrjað að fínstilla eiginleika textans. Frá og með font-weighteigninni geturðu breytt því hversu þykk eða þunn leturgerðin birtist. Eignin font-weighthefur tvö sameiginleg gildi: normalog bold. Gildið normaler sjálfgefið font-weightfyrir flesta texta í vafra. Gildið bolder sjálfgefið font-weightfyrir fyrirsagnir og <strong>þætti. En fyrir þessa kennslu þarftu að nota tölugildin í staðinn fyrir nafnið normalog boldgildin.
Tölugildi font-weighteru háð leturgerðinni sem þú ert að hlaða inn. Þegar þú bættir við Public Sans leturgerðinni frá Google leturgerð, valdir þú Venjulegt (400) og Feitletrað (700) þyngd. Tölurnar innan sviga falla saman við gildin sem þarf til að vísa til og hlaða það leturgerð. Að auki er font-weightgildið á 400tölulegt jafngildi normal, eins og 700er tölulegt jafngildi bold. Texti sem notar Public Sans, sem er allt nema fyrirsagnirnar, mun sjálfkrafa nota þessar lóðir.
Að öðrum kosti innihéldu Quicksand leturvalin hálffeitletrað (600) og feitletrað (700) leturþyngd. Gildið 600hefur ekki tölulega hliðstæðu og þarf að skilgreina það með því að nota tölugildi.
Þú byrjar á því að stilla font-weightaf öllum fyrirsögnum á 600hálffeitletrað afbrigði af Quicksand. Í styles.cssskránni þinni skaltu finna hópveljarann með öllum fyrirsagnargildunum og bæta font-weight: 600;yfirlýsingu við valreitinn:
styles.css
...
h2, h2, h3, h4, h5, h6 {
font-family: "Quicksand", sans-serif;
font-weight: 600;
}
Þegar þú hefur gert þessa breytingu skaltu vista styles.cssog endurhlaða index.htmlí vafranum þínum. Þú munt sjá smá þynningu á fyrirsögnunum þegar þær breytast úr 700gildi Quicksand í 600gildi.
Nú þegar þú hefur stillt alla fyrirsagnarþættina til að nota Quicksand 600þyngdina eru enn staðir til að nota 700afbrigði leturgerðarinnar. Til að byrja skaltu búa til h3tegundarval í styles.cssskrána þína og bæta við font-weight: 700;í valblokkinni:
styles.css
...
h3 {
font-weight: 700;
}
Þessi breyting mun valda því h3að textinn sker sig aðeins úr þar sem hann er nú djarfari en hinar fyrirsagnirnar. Þegar líður á kennsluna muntu gera frekari breytingar á h3stílunum til að gera það áberandi en samt viðhalda stigveldisröðinni.
Vistaðu breytingarnar þínar á styles.cssog búðu til nýjan valmynd sem miðar á texta sem er umvafinn bæði <em>og <strong>merkjum. Ef um er að ræða stíla sem skrifaðir eru hingað til mun texti af þessu tagi fá feitletrað skáletrað afbrigði af Public Sans. Í staðinn skaltu stilla stílana á að nota Quicksand leturstaflann.
Þar sem HTML til að fá feitletraðan skáletraðan stíl er <strong><em>...</em></strong>og <em><strong>...</strong></em>þarftu að búa til samsetningarhópaval í skránni þinni styles.cssog nota síðan font-familyeiginleikann með "Quicksand", sans-serifsem gildi:
styles.css
...
strong em,
em strong {
font-family: "Quicksand", sans-serif;
}
Þegar þú hefur bætt þessari viðbót við styles.cssskrána þína skaltu vista hana og endurhlaða hana síðan index.htmlí vafranum þínum. Textinn sem var feitletraður skáletraður núna notar Quicksand og er skáletraður, jafnvel þó að Google leturgerðir sé ekki með skáletraða útgáfu af letrinu. Þetta er kallað gervi skáletraður , þar sem vafrinn skilur að þetta efni ætti að vera skáletrað sjálfgefið, en þar sem skáletrað afbrigði er ekki skilgreint er textinn í staðinn tilbúnar hallandi.
Eiginleikinn til að meðhöndla hvort texti er skáletraður eða ekki er font-style. Verðmöguleikar font-styleeignarinnar eru normalog italic. Í stað þess að nota feitletrunina skaltu breyta stílnum fyrir þennan val þannig að hann sé ekki skáletraður. Bættu við strong em, em stronghópvalið í skránni þinni styles.csseigninni font-stylemeð gildinu normal:
styles.css
...
strong em,
em strong {
font-family: "Quicksand", sans-serif;
font-style: normal;
}
Þetta mun breyta tilviki feitletruðs skáletrs texta í að vera aðeins Quicksand feitletrað.
Vistaðu breytingarnar þínar á styles.cssog endurhlaðaðu index.htmlí vafranum þínum til að sjá breytinguna:
Þú notaðir eiginleikana font-weightog font-styleí þessum hluta til að nota afbrigði af Quicksand leturgerðinni sem er hlaðið úr Google leturgerðum. Næst muntu nota font-sizeeignina til að búa til stærri og læsilegri texta með skýrari stigveldi meðal fyrirsagnanna.
Að nota font-sizeeignina
Í þessum hluta muntu nota font-sizeeignina til að nota mismunandi leturstærð á innihaldið á síðunni. Stærð texta er mikilvægur þáttur í miðlun upplýsinga. Vel stór texti er auðveldara að lesa og viðeigandi stórar fyrirsagnir hjálpa til við að miðla stigveldi til að auðvelda flóru upplýsinganna. Þú munt breyta font-sizeöllum þáttunum sem þú bjóst til í index.htmltil að búa til skjal sem er læsilegra.
Byrjaðu á því að stilla sjálfgefið font-sizeá bodyþáttinn. Sjálfgefinn vafri font-sizeer 16px, en það getur verið gagnlegt fyrir aukinn læsileika fyrir mörg leturgerðir að vera aðeins stærri. Opnaðu styles.cssskrána þína og bættu a font-size: 18px;við bodyþáttinn:
styles.css
body {
font-family: "Public Sans", Verdana, sans-serif;
font-size: 18px;
}
...
Opnaðu index.htmlí vafranum þínum eða endurnýjaðu síðuna. Breytingin font-sizeá bodyþættinum breytti öllum leturgerðum á síðunni og stækkaði stærð þeirra.
Sjálfgefnar leturstærðir fyrir þætti eru tiltölulega stórar miðað við yfireininguna, í þessu tilfelli <body>frumeiningarinnar, með því að nota prósentugildi fyrir leturstærðina. Notkun formúlunnar (target / base) * 100%gefur þér prósentugildi sem er miðað við grunnleturstærð sem er stillt á <body>frumefninu.
Til að prófa þessa formúlu muntu vinna með að setja markmið font-sizefyrir <h2>þáttinn til að vera 45px. Með því að nota formúluna er markstærðin 45pxog grunnstærðin 18px, þannig að formúlan fyrir þetta verður (45 / 18) * 100%, sem kemur til 250%. Þetta þýðir að fyrirhuguð stærð fyrir <h2>botninn verður 2,5 sinnum stærri en grunnurinn font-size.
Farðu aftur í styles.cssskrána þína og bættu við þáttavali fyrir h2og bættu við font-size: 250%;eiginleika og gildi til að stilla leturstærðina:
styles.css
...
h2 {
font-size: 250%;
}
...
Nú þegar þú hefur stillt hlutfallslega leturstærð fyrir <h2>þáttinn skaltu nota sömu formúluna á fyrirsagnareiningarnar sem eftir eru. Með hverjum geturðu valið að hringja eða halda öllum aukastafunum. Það getur líka verið gagnlegt að skilja eftir athugasemdir sem útskýra markstærðina eða jafnvel formúluna.
Opnaðu styles.cssskrána þína og byrjaðu á því að bæta við athugasemd á eftir h2 font-sizeeigninni sem útskýrir birtu stærðina. Notaðu síðan formúluna fyrir hverja fyrirsögn þannig að h2jafngildi font-size, 36pxjafngildi h3, 32pxtil h4, 26pxtil h5, 22pxog loks við h6grunnstærð 18px. Sjálfgefin stærð <h6>frumefnisins er minni en grunnstærðin, þannig að ef hún er stillt á 100%tryggir hún að hún fari ekki undir grunngildið:
styles.css
...
h2 {
font-size: 250%; /* 45px */
}
h2 {
font-size: 200%; /* 36px */
}
h3 {
font-size: 177.78%; /* 32px */
}
h4 {
font-size: 162.5%; /* 26px */
}
h5 {
font-size: 122%; /* 22px */
}
h6 {
font-size: 100%; /* 18px */
}
...
Farðu aftur í vafrann þinn og endurnýjaðu index.html. Allar fyrirsagnirnar munu aukast font-sizemiðað við sjálfgefið font-sizesett á <body>frumefninu. Eftirfarandi mynd sýnir hvernig þessi breyting mun birtast í vafra:
Með þessu skrefi notaðirðu font-sizeeiginleikann til að breyta stærð textans á vefsíðunni. Þú notaðir hönnunarhugtakið stærð til að gefa innihaldinu stigveldi umfram sjálfgefna vafrastíla. Í næsta skrefi tekurðu hönnun innihaldsins lengra með coloreigninni.
Notkun coloreignarinnar til að greina texta
Áherslan í næsta hluta er colorCSS eignin, með því að nota lit til að aðgreina röð og bæta merkingu við innihaldið. Litur er eitt af algengustu hönnunarsjónarmiðunum, sérstaklega með því að skilgreina mismunandi merkingu texta. Í þessum hluta muntu nota nafngreinda liti til að stilla textalitinn þinn. Nafngreindir litir eru safn fyrirfram skilgreindra lita sem hafa stækkað í gegnum árin; þau passa við önnur litagildi á vefnum, eins og sextánsímal litakóða. Þessi hluti mun nota nafngreinda litalistann sem er að finna á síðu Wikipedia um vefliti. Þú gætir viljað hafa Wikipedia veflitasíðuna opna í vafranum þínum til viðmiðunar.
Eins og þú gerðir með font-size, þú ætlar að setja sjálfgefinn lit á allt skjalið. Þetta mun hafa áhrif á allt efni á síðunni, eins colorog erfðagildi fyrir flesta þætti. Mikilvægt er að hafa litaskil í huga, þar sem það hjálpar til við læsileika, sérstaklega þegar kemur að því að gera vefinn aðgengilegan öllum sjónstigum. Þar sem það background-colorverður áfram sjálfgefið hvítt, er það góð leiðarvísir að nota feitletraða, dekkri liti. Ef þú vilt læra meira um hönnun með aðgengilegum litaskilum skaltu horfa á þessa stuttu myndbandsseríu um efnið.
Til að byrja að nota colorskaltu fara aftur í styles.cssskrána þína í textaritlinum þínum. Eins og þú gerðir með font-sizehlutann, finndu bodyveljarann og bættu við coloreign. Sjálfgefinn litur fyrir texta í flestum vöfrum er svartur. Fyrir aðgengilegar litaskilgreiningar er mikilvægt að hafa grunnlitinn dökkan þegar hann er á ljósum bakgrunni. Notaðu nafngreindan lit DarkSlateGray, sem er aðeins úlfaldahulstur hér til að vera læsilegur, en getur verið allt með lágstöfum ef þú vilt:
styles.css
body {
font-family: "Public Sans", Verdana, sans-serif;
font-size: 18px;
color: DarkSlateGray;
}
...
Vistaðu styles.cssskrána þína og endurnýjaðu index.htmlí vafranum þínum. Litur efnisins mun breytast úr svörtu í dökkblágrænan:
Nú þegar grunnliturinn er stilltur geturðu byrjað að nota aðra liti til að veita meira sjónrænt stigveldi. Byrjaðu á h2veljaranum í skránni þinni styles.cssog bættu við coloreign með gildinu Indigo:
styles.css
...
h2 {
font-size: 250%; /* 45px */
color: Indigo;
}
...
Vistaðu styles.cssskrána þína, farðu aftur í vafrann þinn og endurnýjaðu index.html. Textinn <h2>hefur nú djúpfjólubláan lit í stað sjálfgefinns dökkblágræns litar:
Næst muntu setja liti á hinar fyrirsagnirnar. Quicksand er skemmtilegt, ávöl leturgerð og þú ert að nota einkennilega Cupcake Ipsum sýnishornið, svo búðu til bjart og fjörugt litasamsetningu með því að nota annan lit á hverri fyrirsögn. Farðu aftur í styles.cssog bættu við coloreiginleikum og litagildi fyrir hvern fyrirsagnaval. Fyrir h2þáttinn notkun MediumVioletRed, fyrir h3notkunina LimeGreen, fyrir h4viðbótina Chocolate, fyrir h5notkunina Crimson, svo að lokum fyrir h6notkunina DeepSky Blue:
styles.css
...
h2 {
font-size: 200%; /* 36px */
color: MediumVioletRed;
}
h3 {
font-size: 177.78%; /* 32px */
color: LimeGreen;
}
h4 {
font-size: 162.5%; /* 26px */
color: Chocolate;
}
h5 {
font-size: 122%; /* 22px */
color: Crimson;
}
h6 {
font-size: 100%; /* 18px */
color: DeepSkyBlue;
}
...
Þegar þú hefur bætt coloreiginleikum við fyrirsagnir skaltu vista styles.cssog fara aftur í vafrann til að endurnýja index.html. Efnið þitt er nú fullt af litum:
Með coloreigninni lærðir þú um nafngild gildi á veflitum og hvernig þú getur notað lit til að gefa merkingu. Þú notaðir líka coloreignina til að gefa innihaldinu persónuleika með því að bæta litríkri litatöflu við innihald vefsíðunnar.
Niðurstaða
Vinna með texta er stór hluti af því að skrifa CSS fyrir vefinn. Texti miðlar ekki aðeins merkingu í því sem hann segir heldur einnig hvernig hann lítur út. Með því að nota verkfærin sem þú hefur lært með font-family, font-weight, font-style, font-sizeog coloreiginleikum geturðu unnið með texta til að hjálpa til við að veita vefsvæðinu þínu þýðingarmikið samhengi. Þessir eiginleikar takmarkast ekki við fyrirsagnirnar sem fjallað er um í þessari grein: þeir geta verið notaðir með hvaða þætti sem inniheldur texta.
Ef þú vilt lesa fleiri CSS kennsluefni, skoðaðu CSS efnissíðuna okkar.