CSS, los yog Cascading Style Sheets, yog dab tsi siv nyob rau hauv lub vev xaib niaj hnub tsim los siv qhov zoo nkauj saib rau phab. Thaum HTML tsim tus qauv ntawm cov nplooj ntawv thiab Javascript tuaj yeem tswj tus cwj pwm, qhov zoo thiab xav ntawm lub website yog qhov sau CSS. Thaum nws los txog rau ntawm cov yeeb yaj kiab no, feem ntau lawv siv cov ntawv tawm sab nraud lwm yam, tab sis koj tuaj yeem siv CSS yam ntxwv rau ib qho, tshwj xeeb lub ntsiab ntawm kev siv cov lus qhia uas yog hu ua "inline styles."
Cov qauv hauv kev ua si yog CSS hom uas siv rau hauv nplooj ntawv HTML. Muaj ob qho zoo thiab qhov tsis zoo rau qhov kev qhia no. Ua ntej, cia saib raws nraim li cov yeeb yam no sau.
Yuav ua li cas sau ib tus Inline Style
Los tsim ib qho qauv CSS style, koj pib los ntawm kev sau koj cov cuab yeej style zoo ib yam li cas koj yuav nyob rau hauv ib daim ntawv, tab sis nws yuav tsum tau ua txhua kab. Cais ntau yam khoom nrog lub semicolon ib yam li koj xav nyob rau hauv ib daim ntawv qhia style.
tom qab: #ccc; xim: #fff; ciam teb: khoom dub 1px;
Muab qhov kab ntawm cov yeeb yam hauv lub yeeb yam style ntawm lub caij uas koj xav kom tau styled. Piv txwv li, yog tias koj xav thov qhov style no rau ib pawg lus hauv koj cov HTML, lub caij ntawd yuav zoo li qhov no:
Hauv qhov ua piv txwv no, nqe lus no yuav tshwm sim nrog ib lub teeb txho keeb kwm (uas yog #ccc yuav kav tau), dub ntawv nyeem (ntawm # 000 xim), thiab nrog 1-pixel khoom dub ciam nyob ib ncig ntawm plaub sab ntawm cov pawg lus .
Qhov zoo ntawm Inline Styles
Tsaug rau qhov cascading ntawm Cascading Style Sheet inline yeej muaj ntau tshaj plaws los sis tseem ceeb tshaj plaws hauv ib daim ntawv. Qhov no txhais tau hais tias lawv yuav tsum tau ua ntaub ntawv tsis hais dab tsi ntxiv hauv koj daim ntawv teev ntsiab lus (nrog rau qhov kev zam ntawm cov kev cai uas tau muab tshaj tawm cov lus tshaj tawm, tab sis qhov no tsis yog dab tsi uas yuav tsum tau ua nyob rau qhov chaw yog qhov yuav zam tau).
Tsuas yog cov uas muaj ntau dua qhov kev sib tw hauv inline styles yog neeg siv cov lus thov los ntawm cov neeg nyeem lawv tus kheej. Yog hais tias koj muaj teeb meem rau koj cov kev hloov mus thov, koj tuaj yeem sim teeb qhov tus qauv hauv inline. Yog hais tias koj yeej tseem tsis tso saib siv tus qauv hauv inline, koj paub tias muaj lwm yam mus rau.
Inline yeej yog yooj yim thiab ceev ntxiv thiab koj tsis tas yuav txhawj txog kev sau ntawv kom zoo rau CSS selector txij li thaum koj muab cov kev ncaj qha rau lub caij koj xav hloov (lub caij ntawd yeej tseem zoo qhov selector koj yuav sau rau hauv ib daim ntawv qhia sab nraud ). Koj tsis tas yuav tsim kom tau ib daim ntawv tseem tshiab (xws li lwm cov ntawv tshiab) lossis hloov ib lub ntsiab lus tshiab hauv koj lub taub hau ntawm koj daim ntawv (nrog rau cov ntawv txhim kho sab hauv). Koj cia li ntxiv cov yeeb yam style uas yog siv tau rau ntawm txhua theem ntawm HTML. Cov no yog txhua yam uas yog vim li cas koj thiaj raug ntxias siv cov qauv ciaj ciam, tab sis koj yuav tsum paub txog qee qhov teeb meem tseem ceeb heev rau qhov no.
Disadvantages of Inline Styles
Vim hais tias cov qauv hauv inline lawv yog cov tseem ceeb tshaj plaws hauv cov cascade, lawv tuaj yeem ua haujlwm yam uas koj tsis tau npaj siab rau. Lawv kuj negate ib qho ntawm feem sib zog ntawm CSS - muaj peev xwm ua tau ntau ntau thiab ntau ntawm cov nplooj ntawv web los ntawm CSS ib qho chaw ua haujlwm kom hloov tshiab thiab hloov cov kev hloov yooj yim dua.
Yog tias koj yuav tsum tau siv cov ntaub ntawv inline xwb, koj cov ntaub ntawv ceev nrooj yuav ploj mus thiab tswj xyuas kom zoo. Qhov no yog vim hais tias inline yeej yuav tsum tau mus thov rau txhua lub caij uas koj xav kom lawv. Yog li, yog tias koj xav tau tag nrho koj cov pawg lus muaj font tsev neeg "Arial", koj yuav tsum ntxiv ib qho style inline rau txhua
lossis hauv koj daim ntawv. Qhov no ntxiv ob txoj haujlwm ua haujlwm rau tus kws kho dua thiab muab lub sijhawm rau tus nyeem ntawv vim koj xav tau hloov qhov no nyob rau txhua qhov chaw hauv koj qhov chaw kom hloov tau qhov kev hloov tsev-ntawv. Xwb, yog tias koj siv ib daim ntawv teev npe txawv, koj tuaj yeem hloov nws hauv ib qho chaw thiab muaj txhua nplooj ntawv txais qhov kev hloov tshiab ntawd.
Tseeb, qhov no yog ib theem rov qab hauv cov qauv tsim - rov qab cov hnub lossis!
Lwm drawback rau inline yeej yog tias nws yog tsis yooj yim sua style pseudo-ntsiab thiab -classes nrog lawv. Piv txwv li, nrog rau cov style ntawv sab nraud , koj tuaj yeem tsim cov kev tuaj xyuas, yuj, nquag, thiab txuas cov xim ntawm ib daim ntawv cog lus tag nrho, tab sis nrog ib tus qauv hauv inline, txhua yam koj ua tau yog qhov txuas nws tus kheej, vim tias qhov kev coj tus cwj pwm txuas nrog .
Thaum kawg, peb xav kom tsis txhob siv cov qauv hauv kev sib tw rau koj cov nplooj ntawv web site vim lawv ua teeb meem thiab ua rau cov nplooj ntawv ua haujlwm ntau dhau los. Tib lub sij hawm peb siv lawv yog thaum peb xav ntsuam xyuas ib lub tswv yim sai thaum txoj kev loj hlob. Thaum peb tau txais nws tab tom nrhiav txoj hau kev ntawd ib qho, peb tsiv mus rau peb sab nraud style ntawv.
Ntawv sau los ntawm Jennifer Krynin. Sau los ntawm Jeremy Girard.