Thaum koj pib tsim webpages nrog HTML, koj yuav pib ua hauj lwm nrog koj lub cev. Ua kom koj qhov chaw zoo li koj xav kom nws saib, tej zaum yuav txuam tus qauv tsim koj los yog lwm tus tsim tau tsim, koj yuav xav hloov qhov loj ntawm cov ntawv rau ntawm qhov chaw, nrog rau lwm cov ntsiab lus ntawm nplooj ntawv. Ua li no koj tuaj yeem pib nrhiav qhov cim "HTML", tiam sis koj yuav pom sai sai.
HTML cim loj tsis nyob hauv HTML. Xwb, txhawm rau teem caij rau koj cov ntiv taw, cov duab los yog qhov tsim koj yuav tsum siv Cascading Style Sheets. Qhov tseeb, kev hloov pauv koj yuav tsum tau ua rau lub vev xaib los yog lwm lub khoom yuav tsum yog CSS tuav tau! HTML yog rau cov qauv xwb.
Qhov ze tshaj rau daim ntawv cim npe loj yog cov laus font lossis, uas tau muaj tseeb li muaj qhov loj ntawm tus cwj pwm. Yuav ceeb toom tias daim pib no tau raug muab tshem tawm tam sim no ntawm HTML thiab tsis tau txais kev txhawb los ntawm browsers yav tom ntej! Koj tsis xav siv font font rau hauv koj cov HTML! Xwb, koj yuav tsum kawm CSS kom loj txog koj cov ntsiab lus HTML thiab cov qauv koj lub vev xaib.
Font Sizes
Fonts yog arguably qhov yooj yim tshaj plaws rau me me nrog CSS. Moreso tshaj li ntawm koj cov ntawv nyeem, nrog CSS koj yuav ua tau ntau txog koj lub website typography . Koj tuaj yeem txhais cov ntawv loj, qhov xim, qhov kev sib tw, qhov nyhav, qhov pib, thiab ntau dua. Nrog font tag, koj tsuas yog txhais lub me me xwb, thiab tom qab ntawd ces tsuas yog ib tus lej txheeb rau qhov browser qhov default font loj uas txawv rau txhua tus neeg.
Txhim koj cov lus qhia kom muaj qhov font loj ntawm 12pt, siv qhov cuab yeej ntawm tus qauv font-size:
h3 {font-size = 24px; }Cov style no yuav teev cov font loj ntawm headiing3 ntsiab 24 pixels. Koj tuaj yeem muab qhov no ntxiv rau ib daim ntawv qhia sab nraud thiab tag nrho koj qhov chaw H3s yuav siv qhov style no.
Yog tias koj xav ntxiv cov yeeb yaj kiab ntxiv rau koj zaj lus, koj tuaj yeem sau ntxiv rau hauv CSS cov cai no:
h3 {font-size: 24px; xim: # 000; font-weight: qub; }Qhov no yuav tsis tsuas teev tias qhov loj me me rau H3s, nws yuav tau teev cov xim rau dub (uas yog qhov kev cai lij choj ntawm # 000 txhais tau tias) thiab nws yuav muab qhov nyhav rau "ib txwm". Yog vim li cas, browsers kav lub npe 1-6 ua cov ntawv nyeem bold, yog li no style yuav override tias default thiab yeej tseem zoo "un-bold" cov ntawv nyeem.
Daim duab qhov ntau thiab tsawg
Dluab yuav ua kom yooj yim kom txhais tau ntau thiab tsawg vim tias koj tuaj yeem siv qhov browser los hloov cov duab. Tau kawg, resizing dluab nrog qhov browser yog ib lub tswv yim phem vim nws ua rau phab mus ntsaws ntau qeeb thiab browsers feem ntau ua ib txoj hauj lwm tsis zoo ntawm resizing, ua cov dluab zoo phem. Xwb, koj yuav tsum siv cov software graphics los txhawm rau resize dluab thiab tom qab sau lawv qhov ntau thiab tsawg ntawm koj qhov Web page HTML.
Tsis zoo li fonts, cov dluab siv tau HTML los yog CSS los txheeb xyuas qhov loj. Koj txhais tau qhov dav ntawm daim duab thiab qhov siab. Thaum koj siv HTML, koj tuaj yeem txhais cov duab loj hauv pixels. Yog tias koj siv CSS, koj tuaj yeem siv lwm cov kev ntsuas xws li inches, centimeters, thiab feem pua. Qhov no kawg nqi, feem pua, yog qhov tseem ceeb thaum koj cov dluab xav tau kua, xws li tom lub website.
Kom txhais tau koj daim duab loj uas siv HTML, siv qhov siab thiab qhov dav ntawm img lossis. Piv txwv, qhov duab no yuav muaj 400 x 400 pixels square:
qhov siab = "400" width = "400" alt = "duab" />Kom txhais tau koj cov duab me me siv CSS, siv qhov siab thiab dav style khoom. Ntawm no yog tib yam duab, siv CSS los txheeb xyuas qhov loj:
style = "qhov siab: 400px; dav: 400px;" alt = "duab" />Layout Dim
Qhov ntau feem ntau koj txhais kom meej nyob rau hauv qhov tsim qhov dav yog qhov dav, thiab thawj zaug uas koj yuav tsum tau txiav txim siab yog seb puas yuav siv lub nras dav dav los yog lub vas sab lub website. Hauv lwm lo lus, koj puas yuav txhais cov dav raws li pes tsawg tus pixels, inches, los yog cov ntsiab lus? Los yog koj puas yuav npaj koj qhov dav qhov tsim kom tau siv cov ems los feem pua? Txheeb xyuas qhov loj ntawm koj qhov layout, koj siv dav thiab qhov siab CSS cov khoom zoo li koj nyiam nyob hauv tus duab.
Tsau dav:
style = "dav: 600px;">Cov dej dav dav:
style = "dav: 80%;">Thaum koj tab tom txiav txim siab rau ntawm qhov dav rau koj qhov layout, koj yuav tsum nco ntsoov qhov browser ntau qhov sib txawv uas koj nyeem tau siv thiab qhov sib txawv li lawv yuav tau siv. Qhov no yog vim li cas cov websites teb , uas tuaj yeem hloov lawv kev teeb tsa thiab cov zauv ntawm cov khoom sib txawv thiab qhov ntau thiab tsawg, yog qhov kev xyaum zoo tshaj plaws hnub no.