Cov Chav Kawm thiab Cov Ntawv Qhia Tawm ID Cuam Koj CSS
Siv cov websites hauv hnub no lub vas sab yuav tsum to taub tob tob txog CSS (Cascading Style Sheets). Cov no yog cov lus qhia uas koj muab rau ib lub vas sab los txiav txim seb nws yuav kho qhov twg hauv qhov rai qhov rais. Koj ua ntawv thov cov "yeeb yam" rau koj cov ntawv HTML uas yuav tsim qhov zoo thiab xav txog koj qhov webpage.
Muaj ntau txoj hauv kev uas siv cov lus hais dhau los ntawm cov ntaub ntawv, tab sis oftentimes koj xav siv ib lub ntsiab ntawm cov ntsiab lus hauv ib daim ntawv, tiam sis tsis yog txhua zaus ntawm lub caij ntawd.
Koj tuaj yeem xav tsim ib cov style uas koj tuaj yeem thov rau ob peb lub ntsiab lus hauv ib daim ntawv, tsis tas yuav rov qab ua txoj cai style rau txhua tus ntiag tug. Kom ua tau raws li cov qauv no, koj yuav siv cov chav kawm ntawv thiab cov cim ID HTML. Cov cwj pwm no yog ntiaj teb cov cwj pwm uas siv tau rau txhua daim HTML tag nrho .Exam txhais tau hais tias seb koj yog styling divisions, paragraphs, links, lists lossis ib qho ntawm lwm daim HTML hauv koj daim ntawv, koj tuaj yeem tig mus rau hoob kawm thiab tus cwj pwm ID rau pab koj ua tiav txoj hauj lwm no!
Xaiv cov hoob kawm
Cov chav kawm ntawv xaiv tau tso cai rau koj xaiv ntau yam yeeb yam rau tib lub caij los sis daim pib hauv ib daim ntawv. Piv txwv, tej zaum koj yuav xav muaj qee ntu ntawm koj cov ntawv nyeem hu ua nyob hauv ib qho txawv txawv ntawm cov ntawv nyeem hauv daim ntawv. Cov nqe lus tseem ceeb no yog "kev ceeb toom" uas koj tau teem rau nplooj ntawv. Koj tuaj yeem muab koj cov lus nrog cov ntawv zoo li no:
p {xim: # 0000ff; }
p.alert {color: # ff0000; }
Cov kev cai no yuav teev cov xim ntawm txhua pawg lus rau xiav (# 0000ff), tab sis cov pawg lus nrog ib chav kawm ntawm tus cwj pwm "alert" yuav tsis yog los ntawm styled hauv liab (# ff0000). Qhov no yog vim hais tias hoob kawm tus cwj pwm muaj kev siab dua li thawj CSS txoj cai, uas tsuas yog siv daim ntawv xaiv ntsej muag.
Thaum ua haujlwm nrog CSS, ib txoj cai tswjfwm ntau dua yuav ua rau tsis muaj qee yam tshwj xeeb. Yog li nyob rau hauv qhov kev piv txwv no, txoj cai ntau tshaj plaws teev cov xim ntawm txhua pawg lus, tiam sis qhov thib ob, ntau txoj cai tshaj qhov tshaj qhov teev nyob rau qee cov lus.
Ntawm no yog li cas no yuav siv rau hauv ib co HTML cim:
Cov pawg lus no yuav tshwm nyob rau hauv xiav, uas yog lub neej rau cov nplooj ntawv.
Cov ntsiab lus no kuj yuav muaj nyob hauv xiav.
Thiab cov pawg lus no yuav tshwm sim rau hauv liab vim hais tias hoob kawm tus cwj pwm yuav overwrite tus qauv xiav xim ntawm lub tshuab selector styling.
Hauv qhov ua piv txwv, tus qauv ntawm "p.alert" yuav tsuas yog siv rau pawg lus uas siv qhov kev qhia "alert ".Yog hais tias koj xav siv chav kawm ntawd nyob rau ntau cov ntsiab lus HTML, koj tsuas xav tshem HTML qhov pib ntawm qhov pib style hu (cia li nco ntsoov tawm lub sijhawm (.) nyob rau hauv qhov chaw), zoo li qhov no:
.alert {tom qab xim: # ff0000;}
Cov chav kawm tam sim no muaj rau txhua lub caij uas xav tau nws. Ib qho ntawm koj cov HTML uas muaj ib qho txiaj ntsim hauv chav kawm ntawm "alert" yuav tam sim no tau txais qhov style no. Hauv HTML, peb muaj ob nqe lus thiab ib theem ntawm qib 2 uas yog siv cov lus qhia "alert". Ob ntawm cov no yuav muaj xim-xim liab raws li CSS peb nyuam qhuav pom.
Cov pawg lus no yuav muab sau rau hauv liab.
Thiab qhov no h2 kuj tseem yuav liab.
Nyob rau cov websites niaj hnub no, feem ntau ntawm cov chav kawm feem ntau yog siv los ntawm ntau lub ntsiab vim tias lawv yooj yim mus ua haujlwm nrog ib qhov kev xam pom tias IDs yog. Koj yuav nrhiav tau cov nplooj ntawv HTML cov nplooj ntawv tam sim no kom muaj cov chav kawm hauv chav kawm, qee cov ntawm yuav rov ua ntau zaus hauv ib daim ntawv thiab lwm cov uas tsuas tshwm sim ib zaug xwb.
ID Xaiv
Lub tshuab selector tso cai rau koj muab ib lub npe rau ib hom lus uas tsis muaj kev koom nrog ib lossis lossis lwm yam HTML . Hais tias koj muaj ib qho kev faib nyob rau hauv koj cov cim HTML uas muaj cov ntaub ntawv hais txog qhov kev tshwm sim.
Koj tuaj yeem muab qhov kev faib no rau tus "ID", thiab tom qab ntawd yog tias koj xav piav qhia tias faib nrog ib tus ciam teb dav dav 1-pixel koj sau tus cim ID li no:
#event {ciam: 1px khoom # 000; }
Cov kev sib tw nrog ID selectors yog tias lawv tsis tuaj yeem rov qab rau hauv HTML daim ntawv. Lawv yuav tsum muaj nyias (koj tuaj yeem siv tib daim ID rau ntau nplooj ntawv ntawm koj qhov chaw, tab sis tsuas yog ib zaug hauv txhua daim ntawv HTML). Yog li ntawd, yog tias koj muaj 3 txheej xwm uas txhua tus xav tau tus ciam teb no, koj yuav tsum muab lawv cov cim ID "event1", "event2" thiab "event3" thiab txhua yam ntawm lawv. Nws yuav, yog li ntawd, yuav yooj yim dua los siv cov lus qhia hauv chav kawm ntawm "event" thiab lawv txhua lub sijhawm.
Lwm cov kev sib tw nrog tus cwj pwm ID yog tias lawv muaj feem ntau dua li cov cwj pwm hauv chav kawm. Qhov no txhais tau hais tias yog tias koj xav tau CSS uas ua kom dhau ib tus qauv dhau los, nws yuav tsis yooj yim yog tias koj tau tso siab heev rau cov ID. Nws yog vim li no tias ntau lub web tsim tau tsiv tawm ntawm kev siv cov cim ID hauv lawv cov cim, txawm tias lawv tsuas npaj siab siv qhov nqi ntawd ib zaug, thiab tau hloov mus rau cov chav kawm tsawg dua tshwj xeeb rau txhua tus qauv.
Qhov chaw ntawm tus cim ID tuaj rau hauv kev ua si yog thaum koj xav tsim ib phab uas muaj nplooj ntawv hauv cov nplooj ntawv txuas. Piv txwv li, yog tias koj muaj ib lub vas sab website uas muaj tag nrho cov ntsiab lus ntawm ib nplooj ntawv nrog cov kev txuas "dhia" rau ntau qhov chaw ntawm nplooj ntawv ntawd. Qhov no yog siv cov ntaub ntawv tus ID thiab cov ntawv nyeem uas siv cov kev txuas rau qhov no.
Koj yuav tsuas ntxiv cov nqi ntawm tus attribute, preceded ntawm lub # cim, rau cov href attribute ntawm qhov txuas, zoo li no:
Qhov no yog qhov txuas
Thaum clicked los yog kov, qhov txuas no yuav dhia mus rau ib sab ntawm nplooj ntawv uas muaj tus cim ID. Yog tias tsis muaj cov npe ntawm nplooj ntawv no siv tus nqi ntawm tus ID, qhov txuas yuav tsis ua dab tsi.
Nco ntsoov tias, yog tias koj xav tsim kev txuas hauv ib qhov chaw, kev siv tus cwj pwm (ID) yuav tsum muaj, tiam sis koj tseem tuaj yeem tig mus rau cov chav kawm rau CSS cov hom phiaj. Qhov no yog li cas kuv kos cov nplooj ntawv hnub no - kuv siv hoob xaiv cov kom ntau li ntau tau thiab tsuas tig mus rau IDs thaum kuv xav tau tus cwj pwm ua tsis raws li kev sib ceg rau CSS tab sis kuj yog ib qhov txuas hauv nplooj ntawv.
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 8/9/17