Qhov zoo thiab xav, los yog "style" ntawm lub website yog taw los ntawm CSS (Cascading Style Sheets). Nov yog cov ntaub ntawv koj yuav tau ntxiv rau koj lub vas sab cov npe uas yuav muaj ntau yam kev cai CSS uas tsim cov qauv tsim thiab kev teeb tsa ntawm koj cov nplooj ntawv.
Thaum cov chaw siv tau, thiab feem ntau ua, siv ntau hom ntawv txheeb, nws tsis tas yuav ua li ntawd. Koj tuaj yeem muab tag nrho koj cov cai CSS rau hauv ib qho ntaub ntawv, thiab muaj cov txiaj ntsim tau los ua li ntawd, nrog rau cov sij hawm sai thiab kev ua haujlwm ntawm nplooj ntawv vim lawv tsis xav nqa ntau hom ntaub ntawv. Thaum loj heev, cov tuam txhab lag luam yuav tsum xav tau cov ntawv teev npe txawv lub sijhawm, ntau qhov chaw me me los sis nruab nrab yuav ua tau zoo nrog ib qho ntaub ntawv. Qhov no yog qhov kuv siv rau feem ntau ntawm kuv qhov web tsim txoj haujlwm - ib daim CSS nkaus xwb nrog rau tag nrho cov cai kuv nplooj ntawv xav tau. Yog li ntawd cov lus nug tam sim no ua - dab tsi yuav tsum tau koj npe no CSS cov ntaub ntawv?
Naming Convention Basics
Thaum koj tsim ib daim ntawv qhia sab nraud rau koj cov nplooj ntawv web, koj yuav tsum tau teev cov npe tom qab cov npe zoo sib xws rau koj cov ntaub ntawv HTML:
Tsis Siv Cov Cim Tshwj Xeeb
Koj tsuas yog siv cov tsiaj ntawv tsawg, zauv 0-9, underscore (_), thiab hyphens (-) hauv koj cov npe CSS. Thaum koj cov ntaub ntawv kaw lus yuav cia koj los tsim cov ntaub ntawv nrog lwm cov cim hauv lawv, koj cov neeg rau zaub mov hauv OS yuav muaj teeb meem nrog cov cim tshwj xeeb. Koj muaj kev ruaj ntseg zoo dua siv cov cim tau hais ntawm no. Tom qab tag nrho, txawm tias koj tus neeg rau zaub mov pub rau cov cim tshwj xeeb, uas tej zaum yuav tsis yog qhov teeb meem yog tias koj txiav txim siab mus rau cov neeg zov me nyuam cov chaw pab yav tom ntej.
Tsis Txhob Siv Tej Chaw
Ib yam li cov cim tshwj xeeb, tej qhov chaw muaj peev xwm ua teeb meem rau hauv koj lub web server. Nws yog ib lub tswv yim zoo kom tsis txhob cia rau hauv koj cov npe hauv cov ntaub ntawv. Kuv txawm ua nws tus taw tes rau cov ntaub ntawv xws li PDFs siv cov kev cai qub, tsuas yog thaum kuv xav tau ntxiv rau lawv mus rau ib lub website. Yog tias koj xav tias koj xav tau ib qhov chaw los ua cov ntaub ntawv lub npe yooj yim nyeem, xaiv qhov sib thooj lossis cov cim underscores. Rau cov piv txwv, txhob siv "qhov no yog qhov file.pdf" Kuv yuav siv "this-is-the-file.pdf".
Cov Ntaub Ntawv Lub Npe Yuav Tsum Tau Nrog Tsab Ntawv
Thaum lub sij hawm no tsis yog qhov yuav tsum tau ua, qee lub tshuab muaj teeb meem nrog cov npe cov npe uas tsis pib nrog ib tsab ntawv. Piv txwv, yog tias koj xaiv pib koj cov ntaub ntawv nrog tus naj npawb cim, qhov no yuav ua rau muaj teeb meem.
Siv Cov Ntaub Ntawv Txo Qis
Thaum no tsis yog ib qho filename, nws yog ib lub tswv yim zoo, vim tias qee qhov web servers yog case sensitive, thiab yog tias koj tsis nco thiab siv cov ntaub ntawv nyob rau hauv ib rooj plaub sib txawv, nws yuav tsis ntsaws. Hauv kuv tus kheej ua haujlwm, kuv siv cov cim rooj plaub rau txhua daim ntawv lub npe. Kuv tau pom qhov no los ua ib yam dab tsi uas muaj ntau lub website tshiab tsim tawm kom nco ntsoov ua. Lawv cov neeg ua haujlwm thaum lub npe ntawm cov ntaub ntawv yog los ua tus thawj coj ntawm lub npe. Txhob cia qhov no thiab nkag mus rau hauv tus cwj pwm ntawm cov cim npe rau cov cim lus qis dua.
Khaws Ntaub Ntawv Lub Npe Luv Lawm Lawm
Thaum tseem muaj kev txwv ntawm cov ntaub ntawv lub npe loj rau feem ntau ntawm cov kev khiav haujlwm, nws ntev dua li qhov tsim nyog rau CSS cov ntaub ntawv. Ib txoj cai zoo ntawm tus ntiv tes xoo tsis yog tshaj 20 cim rau cov ntaub ntawv lub npe tsis suav nrog kev txuas ntxiv. Realistically, txhua yam ntau tshaj li uas yog unwieldy mus ua hauj lwm nrog thiab txuas mus rau nkawv noj!
Qhov Tseem Ceeb Tseem Ceeb hauv Koj Daim Ntawv CSS Lub Npe
Qhov tseem ceeb tshaj plaws ntawm CSS cov ntaub ntawv npe tsis yog lub npe ntawm nws tus kheej, tab sis qhov txuas ntxiv. Extensions tsis yuav tsum tau rau ntawm Macintosh thiab Linux systems, tab sis nws yog ib lub tswv yim zoo kom muaj ib qho twg thaum sau ntawv CSS. Ua li ntawd mas koj yeej yuav paub tias nws yog ib daim ntawv thiab tsis tas qhib cov ntaub ntawv los txiav txim seb nws yog dab tsi yav tom ntej.
Nws yog tej zaum tsis yog ib qho loj surprise, tab sis ncua ntxiv rau koj cov ntaub ntawv CSS yuav tsum:
.cssCSS Cov Ntaub Ntawv Hloov Ntawd
Yog tias koj tsuas yuav muaj ib CSS ua ntaub ntawv rau ntawm lub vev xaib, koj tuaj yeem sau nws lub npe koj nyiam. Kuv xav tias:
styles.css lossis default.cssVim tias feem ntau ntawm cov chaw kuv ua haujlwm rau ntawm cov ntaub ntawv CSS nkaus xwb, cov npe ua haujlwm zoo rau kuv.
Yog tias koj lub website yuav siv ntau CSS cov ntaub ntawv, sau cov ntawv txheeb cov ntawv tom qab lawv ua haujlwm ces nws muaj tseeb raws lub hom phiaj ntawm txhua cov ntaub ntawv yog. Vim tias qhov Web site tuaj yeem muaj ntau cov ntawv txheeb cov ntawv txuas rau lawv, nws yuav pab faib koj tus cwj pwm mus rau hauv ntau cov ntawv txheeb raws li qhov ua haujlwm ntawm daim ntawv ntawd thiab yam ntxwv ntawm nws. Piv txwv li:
- Layout vs Tsim layout.css design.css
- Nplooj ntawv main.css nav.css
- Tag nrho qhov chaw nrog sub-sections mainstyles.css subpage.css
Yog tias koj lub vev xaib siv lub hom phiaj ntawm qee yam, koj yuav pom tias nws siv ntau CSS cov ntaub ntawv, txhua nplooj siab rau feem ntawm cov nplooj ntawv lossis qhov chaw ntawm qhov chaw (typography, color, layout, etc.).
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 9/5/17