Saib cov nplooj ntawv web thiab koj yuav pom cov ntsiab lus ntawm cov ntawv nyeem thiab cov duab lus. Ob qho no yog cov khoom xyaw uas tseem ceeb hauv kev vam meej ntawm lub website. Cov ntsiab lus ntawm cov ntawv nyeem yog cov qhua tuaj saib ntawv thiab nyeem cov kev tshawb fawb xyaw yuav siv los ua ib feem ntawm lawv cov qhab-nees algorithms. Dluab yuav ntxiv qhov muag saib rau lub vev xaib thiab pab cov ntsiab lus tseem ceeb.
Ntxiv cov ntawv nyeem thiab cov duab rau cov websites yooj yim. Cov ntawv nyeem ntxiv nrog standard HTML cov ntawv cim npe xws li paragraphs, cov ntawv, thiab cov npe, thaum duab tso rau ntawm nplooj ntawv nrog element. Thaum koj tau ntxiv cov duab rau koj qhov web page, txawm li cas los xij, tej zaum koj yuav xav muaj cov ntawv nyeem ntu ntawm daim duab, es tsis ua raws li hauv qab nws (uas yog lub neej txoj kev ib qho duab ntxiv rau HTML code yuav kav hauv qhov browser). Technically, muaj ob txoj kev uas koj tuaj yeem ua tau qhov kev saib no, los ntawm kev siv CSS (pom zoo) los yog ntxiv cov lus qhia hauv qhov HTML (tsis pom zoo, vim koj xav tswj qhov sib cais ntawm cov qauv thiab cov qauv rau koj lub vev xaib).
Siv CSS
Qhov tseeb yog los hloov txoj kev ntawm nplooj ntawv cov ntawv thiab cov duab duab thiab seb lawv cov kev pom zoo li cas hauv qhov browser yog nrog CSS . Cia li nco qab, txij thaum peb tham txog kev hloov pauv ntawm nplooj ntawv (ua cov ntawv nyeem ntws ntawm ib daim duab), qhov no txhais tau tias nws yog tus sau ntawm Cascading Style Sheets.
- Ua ntej, ntxiv koj cov duab rau koj qhov web page. Nco ntsoov cais txhua tus yam ntxwv ntawm qhov muag (xws li qhov dav thiab qhov siab qhov tseem ceeb) ntawm qhov HTML. Qhov no tseem ceeb heev, tshwj xeeb tshaj yog rau lub vas sab uas qhov duab loj yuav txawv raws qhov browser. Qee software, zoo li Adobe Dreamweaver, yuav ntxiv cov ntaub ntawv dav thiab qhov siab rau cov duab uas tso nrog lub cuab tam, yog li nco ntsoov tshem tawm cov ntaub ntawv no ntawm HTML code! Nco ntsoov, txawm li cas los, kom muaj cov ntawv nyeem uas tsim nyog . Ntawm no yog ib qho piv txwv ntawm seb koj cov HTML code yuav zoo li cas:
-
- Rau cov laj thawj zoo nkauj, koj tuaj yeem ntxiv ib chav kawm rau ib daim duab. Cov nqi no yog qhov peb yuav siv rau hauv peb cov ntaub ntawv CSS. Nco ntsoov tias tus nqi uas peb siv ntawm no yog arbitrary, tab sis, rau qhov kev xyov tshwj xeeb no, peb yuav siv qhov tseem ceeb ntawm "sab laug" lossis "txoj cai", nyob ntawm seb peb xav tau peb cov duab los ua ke. Peb pom tau tias yooj yim syntax ua hauj lwm zoo thiab ua kom yooj yim rau lwm tus neeg uas yuav tsum tswj xyuas qhov chaw nyob yav tom ntej kom to taub, tab sis koj muab tau qhov no tus nqi kawm uas koj xav tau.
-
- Los ntawm nws tus kheej, qhov nqi kawm no yuav tsis ua dab tsi. Daim duab yuav tsis tuaj yeem mus ua ke mus rau sab laug ntawm cov ntawv nyeem. Rau qhov no, peb tam sim no yuav tsum tig mus rau peb cov ntaub ntawv CSS.
-
- Nyob rau hauv koj cov stylesheet, koj muaj peev xwm tam sim no ntxiv cov nram qab no style:
- .left {
- ntab: sab laug;
- padding: 0 20px 20px 0;
- }
- Yam koj tau ua ntawm no yog siv CSS "float" vaj tse , uas yuav rub daim duab los ntawm cov ntaub ntawv nquag khiav (txoj kev uas tus duab yuav nquag saib, nrog cov ntawv nyeem raws li nws) thiab nws yuav ua kom nws mus rau sab laug ntawm nws lub thawv . Cov ntawv nyeem los tom qab nws nyob rau HTML HTML nrog tam sim no qhwv ib ncig nws. Peb kuj ntxiv ib co kev padding qhov tseem ceeb kom cov ntawv nyeem no tsis yog tab sis ncaj qha mus tawm tsam tus duab. Xwb, nws yuav muaj qee tus yoojyim zoo uas yuav pom tau ntxim nyiam nyob hauv phab ntawv tsim. Hauv CSS shorthand rau padding, peb ntxiv 0 qhov tseem ceeb rau sab saum toj thiab sab laug ntawm daim duab, thiab 20 pixels rau nws sab laug thiab hauv qab. Nco ntsoov, koj yuav tsum ntxiv ib co padding rau sab xis ntawm cov duab uas muaj kab sab nraud. Ib txoj cai dlhos duab (uas peb yuav saib nyob rau hauv ib pliag) yuav muaj padding thov rau nws sab laug.
- Yog tias koj pom koj qhov webpage hauv qhov browser, koj yuav tsum tam sim no pom tias koj daim duab mus ua ke mus rau sab laug ntawm sab ntawv thiab cov ntawv nyeem zoo nkauj nyob ncig nws. Lwm txoj kev hais qhov no yog tias daim duab "floated mus rau sab laug".
- Yog tias koj xav hloov cov duab no kom haum rau sab xis (xws li hauv daim duab yees duab nrog cov ntawv no), nws yuav yooj yim. Ua ntej, koj yuav tsum nco ntsoov tias, ntxiv rau cov style peb tsuas ntxiv rau peb CSS rau chav kawm ntawv tus nqi ntawm "sab laug", peb kuj muaj ib qho rau txoj cai sib haum. Nws yuav zoo li no:
- .right {
- ntab: txoj cai;
- padding: 0 0 20px 20px;
- }
- Koj tuaj yeem pom tias qhov no yog ze li ntawm CSS thawj zaug. Qhov txawv tsuas yog qhov peb siv rau cov khoom ntab "float" thiab cov padding qhov tseem ceeb uas peb siv (ntxiv ib co mus rau sab laug ntawm peb cov duab siv ntawm txoj cai).
- Thaum kawg, koj yuav hloov tus nqi ntawm cov duab hauv chav kawm ntawm "sab laug" txog "txoj cai" hauv koj cov HTML:
-
- Saib ntawm koj nplooj ntawv hauv qhov browser tam sim no thiab koj daim duab yuav tsum mus ua ke nrog sab xis nrog cov ntawv nyeem zoo nkauj nyob ib ncig ntawm nws. Peb yuav ntxiv ob hom ntawm cov yeeb yaj kiab, "sab laug" thiab "txoj cai" rau tag nrho peb lub yeeb yam kom peb siv tau cov yeeb yam no thaum tsim nyog thaum peb tsim cov nplooj ntawv web. Cov kev ua yeeb yam no yog qhov zoo tshaj plaws, peb rov ua tau zoo dua thaum twg peb xav tau cov duab thaij nrog cov ntawv nyeem nyob ib puag ncig lawv.
Siv HTML Los Siv CSS (thiab Vim Li Cas Koj Tsis Txhob Ua Qhov No)
Txawm hais tias nws muaj peev xwm los ua cov ntawv sau nyob ib ncig ntawm cov duab nrog HTML, cov qauv web tsim hais qhov CSS (thiab cov kauj ruam uas tau hais los saum toj no) yog txoj kev mus kom peb muaj peev xwm tswj tau kev sib cais ntawm cov qauv (HTML) thiab cov qauv (CSS). Qhov no yog qhov tshwj xeeb tshaj yog thaum koj xav txog tias, rau qee yam khoom siv thiab cov teeb tsa, cov ntawv nyeem ntawd tsis tas yuav mus ncig ntawm daim duab. Cov ntxig khoom me me, ib lub vev xaib qhov tsim tawm yuav xav tau tias cov ntawv nyeem tseeb tiag hauv qab cov duab thiab cov duab uas nthuav dav dav dav ntawm qhov screen. Qhov no yooj yim tau nrog cov lus nug yog tias koj tus cwj pwm txawv ntawm koj cov cim HTML. Nyob rau hauv hnub no lub ntiaj teb multi-device, qhov twg cov dluab thiab ntawv yuav tshwm sim rau cov neeg tuaj xyuas txawv thiab ntawm cov ntxig ntxig txawv, qhov kev sib cais yog qhov tseem ceeb rau qhov kev vam meej mus ntev thiab kev tswj ntawm qhov web page.