Style Koj Cov Duab thiab Siv Cov Duab Hauv Ib Leeg
Ntau tus neeg siv CSS los kho cov ntawv, hloov cov font, xim, qhov loj thiab ntau dua. Tab sis ib qho uas ntau tus neeg tsis nco qab yog tias koj siv tau CSS nrog cov duab zoo li.
Hloov cov duab nws tus kheej
CSS tso cai rau koj hloov kho li cas daim duab qhia rau ntawm nplooj ntawv. Qhov no yuav ua tau tiag tiag rau kev ua kom koj cov nplooj ntawv zoo ib yam. Los ntawm kev teeb tsa txhua yam ntawm cov duab, koj tsim ib tus qauv zoo rau koj cov dluab. Qee yam uas koj tuaj yeem ua:
- Ntxiv ib ciam los yog tus qauv qhia nyob ib ncig ntawm cov duab
- Tshem cov xim ciam teb ntawm cov duab sib txuas
- Kho qhov dav thiab / lossis qhov siab ntawm cov duab
- Ntxiv ib qho duab ntxoo
- Tig duab
- Hloov cov cwj pwm thaum daim duab hovered dhau
Muab koj daim duab ciam av yog qhov chaw zoo pib. Tab sis koj yuav tsum xav txog ntau tshaj li tus ciam teb - xav txog tag nrho cov ntug ntawm koj tus duab thiab kho cov margins thiab padding thiab. Ib daim duab uas muaj cov ciam teb dub nyias zoo li zoo, tab sis ntxiv ib co padding ntawm ciam teb thiab cov duab tuaj yeem saib zoo dua.
img {
ciam teb: 1px dub dub;
padding: 5px;
}
Nws yog ib lub tswv yim zoo uas yuav tsum txuas cov duab tsis zoo nkauj , thaum ua tau. Tab sis, thaum twg koj ua, nco ntsoov tias feem ntau cov browsers ntxiv ib qho xim ib ncig ntawm daim duab. Txawm hais tias koj siv cov cai saum toj no los pauv tus ciam teb, qhov txuas yuav rhuav tau qhov tshwj tias ntshe koj tshem tawm lossis hloov ciam teb ntawm qhov txuas ntawd. Ua li no koj yuav tsum siv CSS cai rau me nyuam kom tshem tawm los yog hloov tus ciam teb uas txuas nrog cov duab sib txuas:
img> a {
ciam teb: tsis muaj;
}
Koj tuaj yeem siv CSS hloov lossis tsim qhov siab thiab dav ntawm koj cov duab. Thaum nws tsis yog ib lub tswv yim zoo los siv qhov browser los kho qhov ntau thiab tsawg ntawm cov duab ntau vim tias kev download speeds, lawv tau txais ntau yam zoo dua ntawm cov duab thaij duab kom lawv zoo. Thiab nrog CSS koj tuaj yeem teev koj cov dluab rau txhua tus ua tus qauv dav lossis qhov siab los yog txawm tias teem caij rau qhov ntsuas kom ze rau lub khob.
Nco ntsoov, thaum koj resize dluab, kom tau qhov zoo tshaj plaws, koj yuav tsum tsuas yog resize ib qhov loj - qhov siab lossis dav. Qhov no yuav ua kom pom tseeb tias cov duab ua rau nws feem sib piv, thiab tsis zoo li coj txawv txawv. Teem lwm tus nqi rau nws los yog tawm nws tawm mus qhia tus browser kom cov nam piv yeem.
img {
dav: 50%;
qhov siab: pib;
}
CSS3 muaj kev daws teeb meem rau qhov teeb meem no nrog cov khoom tshiab khoom haum-haum thiab qhov khoom tawm. Nrog rau cov khoom no koj yuav muaj cuab kav txhais tau cov duab kos qhov siab thiab qhov dav thiab qhov piv txwv piv yuav tsum tau ua licas. Qhov no tej zaum yuav tsim teebmeem rau koj cov dluab lossis xa cov ntawv xa kom haum raws li qhov koj xav tau.
Thaum lub CSS3 qhov khoom-haum thiab thaj chaw ntawm cov khoom tsis txaus siab tsis tau, muaj lwm yam CSS3 cov khoom uas zoo txaus siab nyob rau hauv feem ntau cov browsers uas koj siv tau los hloov koj cov dluab. Tej yam zoo li cov duab ntxoov ntxoo ntxoov ntxoo, sib npaug ntawm qhov chaw, thiab hloov mus hloov, nplawm, los yog tshem koj cov duab txhua yam tam sim no nyob rau hauv feem ntau cov browsers niaj hnub. Koj tuaj yeem siv CSS zaus los ua cov duab hloov thaum khuam dua, lossis nias, los yog tom qab lub sijhawm.
Siv Cov Duab Ua Tom Qab
CSS ua rau nws yooj yim los tsim tej yam zoo nkauj nrog koj cov duab.
Koj tuaj yeem ntxiv keeb kwm rau tag nrho cov nplooj ntawv los yog tsuas yog ib qho kev caij. Nws yooj yim los tsim cov duab keeb kwm yav dhau los ntawm nplooj ntawv nrog cov khoom siv keeb kwm yav dhau los:
lub cev {
tom qab duab: url (background.jpg);
}
Hloov lub cev selector mus rau ib lub caij tshwj xeeb ntawm nplooj ntawv los muab cov keeb kwm yav dhau los ntawm ib qho.
Lwm qhov kev lom zem tshaj plaws uas koj tuaj yeem ua nrog cov duab yog tsim tau ib cov duab keeb kwm yav dhau los uas tsis los nrog cov nplooj ntawv - zoo li lub tshav puam. Koj tsuas yog siv cov tom qab ntaus ntawv txuas ntxiv: tsau; nrog rau koj cov duab tom qab. Lwm cov kev xaiv rau koj cov keeb kwm yav dhau los yog ua rau lawv cov pobzeb yog horizontally los yog siv cov khoom tom qab rov tom qab.
Sau ntawv rov tom qab: rov ua dua x; kom ntub cov duab horizontally thiab tom qab rov tso: rov ua dua-y; mus rau pobzeb vertically. Thiab koj tuaj yeem tso koj tus duab tom qab nrog cov khoom tom qab.
Thiab CSS3 ntxiv ntau hom rau koj keeb kwm thiab. Koj tuaj yeem ncab koj cov dluab kom haum rau txhua tus me me tom qab los sis muab cov duab tom qab los teev nrog qhov loj qhov rais . Koj tuaj yeem hloov tau txoj haujlwm thiab tom qab ntawd koj cia li kaw cov duab tom qab. Tab sis ib yam ntawm cov zoo tshaj plaws txog CSS3 yog tias koj tau tam sim no txheej ntau cov dluab tom qab los tsim ntau cov teeb meem zoo nkauj tshaj.
HTML5 Pab Duab Duab
Cov duab cim hauv HTML5 yuav tsum muab tso rau ib qho duab uas sawv tuaj yeem sawv ntsug ntawm daim ntawv. Ib txoj kev xav txog nws yog tias daim duab tuaj yeem tshwm sim nyob rau hauv ib qho appendix, ces nws yuav tsum nyob sab hauv daim duab. Koj tuaj yeem siv qhov khoom ntawd thiab FIGCAPTION lub caij ntxiv rau kev sib txawv rau koj cov dluab.