CSS Kev Teeb Meem Ntau tshaj Xwb, Y Coordinates
CSS chaw lawm ntev tau yog ib qho tseem ceeb ntawm kev tsim cov website layouts. Txawm tias muaj kev nce siab ntawm CST tshiab qhov kev ua si xws li Flexbox thiab CSS Grid, qhov chaw tseem muaj qhov chaw tseem ceeb hauv txhua qhov web designer lub hnab ntawm tricks.
Thaum siv CSS tso, thawj qhov uas koj yuav tsum tau ua yog tsim CSS cov cuab yeej rau txoj hauj lwm qhia rau tus browser yog tias koj yuav siv qhov tseeb lossis txheeb ze rau ib qho chaw. Koj kuj yuav tsum tau nkag siab qhov txawv ntawm qhov ob qhov kev tso kawm.
Thaum lub sij hawm zoo thiab txheeb ze yog ob qho chaw CSS qhov chaw siv ntau tshaj plaws nyob rau hauv tsim web, muaj plaub lub xeev rau qhov chaw:
- zoo li qub
- tsis meej
- tus txheeb ze
- tsau
Static yog qhov chaw tseem ceeb rau txhua lub caij ntawm nplooj ntawv web. Yog tias koj tsis txhais txoj hauj lwm ntawm lub caij, nws yuav zoo li qub. Qhov no txhais tau hais tias nws yuav tso tawm rau ntawm qhov screen raws li nws nyob rau hauv HTML daim ntawv thiab nws yuav pom li cas hauv cov nquag khiav ntawm daim ntawv ntawd.
Yog hais tias koj ua raws li cov cai tswj zoo li saum toj los sis sab laug rau ib lub caij uas muaj txoj hauj lwm zoo li qub, cov cai yuav raug tsis lees paub thiab lub caij yuav nyob qhov twg nws tshwm nyob rau hauv cov ntaub ntawv. Nyob rau hauv qhov tseeb, koj yuav tsis tshua, yog puas, yuav tsum tau teem ib lub caij mus rau ib txoj hauj lwm zoo li hauv CSS vim tias qhov nqi yog vim.
Kev CSS Txoj Kev Ceev
Kev tsis txaus siab yog qhov kev xaiv CSS uas yooj yim tshaj plaws kom nkag siab. Koj pib nrog no cov cuab yeej CSS qhov chaw:
txoj haujlwm: tsis meej;Cov nqi no qhia txog qhov browser xijpeem yuav tsum tau muab tshem tawm ntawm qhov nquag khiav ntawm daim ntawv thiab muab tso rau hauv qhov chaw qhia tseeb ntawm nplooj ntawv. Qhov no yog muab xam raws li lub caij ntawd qhov ze tshaj rau cov poj koob yawm txwv uas tsis yog nyob hauv.
Vim hais tias lub caij kiag li yuav tsum yog tawm ntawm cov nquag khiav ntawm daim ntawv, nws yuav tsis cuam tshuam li cas lub ntsiab ua ntej nws los yog tom qab nws nyob rau hauv cov HTML yog nyob rau ntawm phab web.
Ua ib qho piv txwv - yog tias koj muaj ib qho chaw faib ua tus siv tus nqi txheeb ze (peb yuav saib cov nqi no tsocai), thiab nyob rau hauv qhov kev faib haujlwm no koj muaj ib pawg lus uas koj xav tau 50 plhom tawm ntawm qhov chaw faib, koj yuav ntxiv ib qho kev nqis ntawm qhov "tsis" rau cov lus teev tseg nrog rau tus nqi ntawm 50px ntawm "khoom saum toj", zoo li qhov no.
txoj haujlwm: tsis meej; saum toj: 50px;Qhov no yuav tsum muaj qhov zoo tshaj plaws ces yuav tsum tso tawm 50 pixels los ntawm qhov sib txawv ntawm qhov chaw faib nyob rau hauv - tsis muaj teeb meem dab tsi ntxiv tshwm nyob rau hauv cov nquag khiav. Koj qhov "sawv daws" uas yog "tiag" yog siv qhov teeb tsa ua ib qho raws li nws cov lus teb thiab qhov nqi ntawm qhov koj siv yog tus txheeb ze ntawd.
Plaub yam khoom uas koj muaj rau koj siv yog:
- saum toj
- txoj cai
- hauv qab
- sab laug
Koj tuaj yeem siv sab saum toj los yog hauv qab (txij li lub caij tsis muaj peev xwm muab tso raws li ob qho ntawm cov kev ntseeg no) thiab sab xis lossis sab laug.
Yog hais tias lub caij teem mus rau ib txoj hauj lwm ntawm meej, tiam sis nws muaj nws tsis muaj cov poj koob yawm txwv uas tsis yog staticly, ces nws yuav tsum muaj qhov nruab nrab ntawm lub cev lub cev, uas yog theem siab tshaj plaws ntawm nplooj ntawv.
Txheeb Tus Txheeb Ze
Peb twb hais txog kev txheeb ze qhov chaw, yog li cia peb saib cov cuab yeej tam sim no.
Cov txheeb ze sib xws siv tib qho plaub qho khoom siv los ua qhov chaw tso meej, tiam sis tsis yog siv qhov chaw ntawm lub hauv paus rau qhov nws tsis yog qhov tseem ceeb ntawm nws cov poj koob yawm txwv, nws pib ntawm qhov chaw nyob yog tias nws tseem nyob hauv qhov nquag khiav.
Piv txwv, yog tias koj muaj peb pawg lus ntawm koj qhov web page, thiab qhov thib peb muaj ib txoj hauj lwm "txheeb ze" sib txuas rau nws, nws txoj hauj lwm yuav tsum tau ua raws li nws qhov chaw nyob tam sim no.
Tshooj 3.
Hauv qhov ua piv txwv saum toj no, daim ntawv thib peb yuav muab 2d los ntawm sab laug ntawm lub khob ntim khoom, tab sis tseem yuav qis dua thawj ob nqe lus. Nws yuav nyob twj ywm hauv cov nquag khiav ntawm cov ntaub ntawv, thiab yuav tsum yog me me xwb. Yog tias koj hloov mus rau txoj haujlwm: tsis; txhua yam tom qab nws yuav tso rau sab saum toj ntawm nws, vim nws yuav tsis nyob hauv qhov nquag khiav ntawm daim ntawv.
Cov ntsiab lus ntawm cov nplooj ntawv web feem ntau yog siv los ua tus nqi ntawm txoj hauj lwm: tus txheeb ze uas tsis muaj kev tshaj tawm uas tau tsim, uas txhais tau hais tias lub caij nyob raws nraim qhov nws yuav tshwm sim hauv qhov nquag khiav. Qhov no yog ua los ntawm kev tsim kom muaj lub ntsiab lus raws li lub ntsiab lus teb uas lwm cov ntsiab lus tau muab tso ua ke. Piv txwv li, yog tias koj muaj ib feem ntawm koj lub vev xaib nrog rau ib qho "class" (uas yog ib qho kev tshwm sim hauv web tsim), qhov kev faib no yuav muab tso rau ib qho chaw txheeb ze kom txhua yam hauv nws siv tau nws raws li lub ntsiab lus tseem ceeb.
Dab Tsi Hais Txog Dab Tsi?
Tseg chaw ua hauj lwm yog qhov zoo ib yam li tsis tso chaw. Txoj hauj lwm ntawm lub caij yog xam hauv tib txoj kev raws li tus qauv, tiam sis tsau cov ntsiab lus ces tsau nyob rau hauv qhov chaw - yuav luag zoo li ib lub watermark . Txhua tsav txhua yam ntawm nplooj ntawv yuav pib txheeb tias yav dhau los.
Siv cov cuab yeej no, koj yuav tau teev:
txoj haujlwm: tsau;Nco ntsoov, thaum koj txhim kho ib qho chaw nyob hauv koj qhov chaw, nws yuav sau rau qhov chaw thaum koj qhov Web site luam tawm. Piv txwv, yog tias koj lub caij nyob ruaj rau saum toj ntawm koj sab, nws yuav tshwm rau saum toj ntawm txhua nplooj ntawv - vim nws yog tsau rau saum phab ntawv. Koj tuaj yeem siv hom media los pauv qhov cov ntawv luam tawm tau qhia meej li cas:
@media screen {h1 # thawj {txoj hauj lwm: tsau; }} @media luam {h1 # thawj {txoj hauj lwm: zoo li qub; }}Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 1/7/16.