Poukisa yon senp vigil senplifye kod
CSS, oswa Cascading Style Sheets, se endepandan konsepsyon endistri a nan fason yo ajoute estil vizyèl nan yon sit. Avèk CSS, ou ka kontwole paj layout, koulè, tipografi , imaj background, ak plis ankò. Fondamantalman, si li se yon style vizyèl, Lè sa a, CSS se yon fason a pote sa yo Styles nan sit entènèt ou.
Kòm ou ajoute Styles CSS nan yon dokiman, ou ka remake ke dokiman an kòmanse jwenn pi long ak pi long. Menm yon sit ti ak sèlman yon ti ponyen nan paj ka fini ak yon dosye CSS dimensionable - ak yon sit gwo anpil ak anpil ak anpil nan paj nan kontni inik ka gen dosye gwo CSS anpil. Sa a se konpoze pa sit reponn ki gen anpil nan medya queries enkli nan dra a style chanje ki jan vizyèl yo gade ak paj la mete deyò pou ekran diferan.
Wi, dosye CSS ka jwenn long. Sa a se pa yon gwo pwoblèm lè li rive pèfòmans sit ak vitès download, paske menm yon dosye CSS long se chans yo dwe trè ti (depi li se reyèlman jis yon dokiman tèks). Toujou, chak ti kras konte lè li rive vitès paj, kidonk si ou ka fè mennaj style ou fèy, se sa ki yon bon lide. Sa a se kote "vigil la" ka vini nan anpil sou la men nan fèy style ou!
Koma ak CSS
Ou ka te mande sa ki wòl jwe nan vigil nan CSS selektè sentaks. Kòm nan fraz, vigil a pote klè - pa kòd-a separateur yo. Vigil la nan yon seleksyon CSS separe selektè miltip nan estil yo menm.
Pou egzanp, kite gade nan kèk CSS anba a.
th {koulè: wouj; }}
td {koulè: wouj; }}
p.red {koulè: wouj; }}
div # firstred {koulè: wouj; }}
Avèk sentaks sa a, ou ap di ke ou vle th tags, tags tag, Tags paragraf ak klas la wouj, ak tag a div ak ID a firstred tout gen style koulè wouj la.
Sa a se parfe akseptab CSS, men gen de dezavantaj enpòtan nan ekri li fason sa a:
- Nan lavni an, si ou deside chanje koulè a font nan pwopriyete sa yo ble, ou dwe fè sa chanje kat fwa nan fèy style ou.
- Li ajoute yon anpil nan karaktè siplemantè nan fèy style ou ke ou pa bezwen. Sa yo Styles 4 pa ka sanble tankou overkill, men si ou kontinye ap fè sa a atravè fèy style ou tout antye, liy yo ap ajoute moute ak ke fèy yo pral anpil, pi gwo pase sa li bezwen yo dwe.
Pou ka evite sa yo dezavantaj, ak rasyonalize dosye CSS ou, nou pral eseye lè l sèvi avèk komas.
Sèvi ak koma pou seleksyone separe
Olye pou yo ekri 4 separe selil CSS ak 4 règleman yo, ou ka konbine tout estil sa yo nan yon sèl pwopriyete règ pa separe selektè yo endividyèl ak yon vigil. Men ki jan sa ta dwe fè:
th, td, p.red, div # firstred {koulè: wouj; }}
Karaktè a karma fondamantalman aji kòm mo "ak" anndan sele a. Se konsa, sa a aplike nan t h Tags ak tag td AK Tags paragraf ak klas la wouj AK tag nan div ak ID a firstred. Sa se ekzakteman ki sa nou te gen anvan, men olye pou yo bezwen 4 règleman CSS, nou gen yon règ sèl ak selektè miltip. Sa a se sa ki vigil la fè nan seleksyon an, li pèmèt nou gen selektè miltip nan yon sèl règ.
Se pa sèlman apwòch sa a fè pou mèg, pi pwòp dosye CSS, li tou fè dènye nan lavni tèlman pi fasil. Koulye a, si ou te vle chanje koulè a soti nan wouj nan ble, ou gen sèlman fè chanjman an nan yon sèl kote olye pou yo atravè orijinal la 4 règleman style nou te gen! Reflechi sou ekonomi tan sa yo atravè yon tout dosye CSS epi ou ka wè ki jan sa a pral delivre ou tou de tan ak espas nan kouri nan longè!
Sentaks Variation
Gen kèk moun ki chwazi fè CSS a pi lizib pa separe chak selekteur sou liy pwòp li yo, olye pou yo ekri li tout sou yon sèl liy tankou pi wo a. Sa a se ki jan sa ta dwe fè:
th,
td,
p.red,
div # firstred
{
koulè: wouj;
}}
Avi ke ou mete yon vigil apre chak selekteur ak Lè sa a, sèvi ak "antre" kraze seleksyon kap vini an sou liy pwòp li yo. Ou pa ajoute yon vigil apre seleksyon final la.
Lè l sèvi avèk komas ant selektè ou, ou kreye yon fèy estil plis kontra enfòmèl ant ki pi fasil yo mete ajou nan lavni an e se sa ki pi fasil li jodi a!
Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 5/8/17