01 na 10
Ƙirƙiri CSS Style Sheet
Haka kuma muka kirkiro fayil ɗin rubutu daban don HTML, za ku ƙirƙiri fayil ɗin rubutu don CSS. Idan kana buƙatar abubuwan da ke gani don wannan tsari don Allah ka ga koyo na farko. A nan ne matakai don ƙirƙirar rubutun CSS ɗinku cikin Notepad:
- Zaɓi Fayil> Sabo a cikin Ƙamus ɗin don samo taga mara kyau
- Ajiye fayil a matsayin CSS ta latsa File
- Gudura zuwa babban fayil na asusunku a kan rumbun kwamfutarka
- Canja "Ajiye Kamar yadda:" zuwa "Duk Files"
- Sunan fayil ɗinka "styles.css" (barin kashe sharuddan) kuma danna Ajiye
02 na 10
Hanya da CSS Style Sheet zuwa ga HTML
Da zarar ka samu takarda don shafin yanar gizonka, za ka buƙaci haɗa shi zuwa shafin yanar gizon kanta. Don yin wannan zaka yi amfani da alamar mahaɗin. Sanya sautin mahaɗin da ke biye a ko'ina a cikin shafukan
tags na takardunku na pets.htm:03 na 10
Gyara Shafin Shafin
Lokacin da kake rubuta XHTML don masu bincike daban-daban, abu daya da za ka koyi shi ne cewa duk suna da alamun bambanci da dokoki don yadda suke nuna abubuwa. Hanyar da ta fi dacewa don tabbatar da cewa shafin dinka yana kallon wannan a cikin mafi yawan masu bincike shine kada ka bar abubuwa kamar layin martaba zuwa tsoho zuwa zaɓin mai bincike.
Na fi so in fara shafukanmu a kusurwar hagu, ba tare da ƙarin takarda ko gefe ba kewaye da rubutu. Koda koda zan bi abinda ke ciki, na sanya alamar ta zama nau'i don haka zan fara da sarƙaƙƙiya. Don yin wannan, ƙara da wadannan zuwa ga tsarin styles.css:
html, jiki {
gefe: 0px;
Samun: 0px;
iyaka: 0px;
hagu: 0px;
sama: 0px;
}
04 na 10
Canza Font a Page
Tilas ne sau da yawa abu na farko da za ku so a canza a shafin yanar gizon. Kuskuren tsoho a shafin yanar gizon yanar gizo na iya zama mummunan, kuma shine ainihin shafin yanar gizon kanta, don haka idan ba ku bayyana ma'anar ba, ba za ku san abin da shafinku yake so ba.
Yawancin lokaci, za ku sauya takaddamar a kan sakin layi, ko kuma wani lokacin a kan dukan takardun da kansa. Domin wannan shafin za mu ayyana lakabin a cikin rubutun kai da sakin layi. Ƙara da wadannan zuwa ga tsarin styles.css:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Na fara da 1em a matsayin matsakaicin matsakaici na sakin layi da jerin abubuwa, sa'an nan kuma amfani da su don saita girman don ɗakuna. Ba na tsammanin zan yi amfani da layi mai zurfi fiye da h4, amma idan kuna shirin ku za ku so kuyi shi.
05 na 10
Ƙara Hanyoyinku Da Farin Fari
Labaran launuka don alaƙa sune blue da purple don wadanda ba a duba ba kuma sun ziyarci haɗin gwiwar. Duk da yake wannan daidai ne, watakila ba zai dace da tsarin launi na shafukanku ba, don haka bari mu canza shi. A cikin fayilolin styles.css, ƙara da wadannan:
a: mahada {
font-iyali: Arial, Helvetica, sans-serif;
launi: # FF9900;
kayan ado-rubutu: layi;
}
a: ziyarci {
launi: # FFCC66;
}
a: hover {
Bayanan: #FFFFCC;
font-nauyi: m;
}
Na kafa matakai guda uku masu dangantaka, wanda: a haɗa shi azaman tsoho, a: ziyarci lokacin da aka ziyarta, na canza launi, da kuma: hover. Tare da: hover Ina da hanyar haɗi ta sami launin launi kuma je gabaga don jaddada cewa yana da hanyar haɗi don a danna.
06 na 10
Ƙarfafa Yanayin Sanya
Tun lokacin da muke sanya maɓallin kewayawa (id = "nav") na farko a cikin HTML, bari mu fara sa shi. Muna buƙatar nuna yadda ya kamata mu kasance kuma mu sanya gefe mai zurfi a gefen dama domin rubutu mai mahimmanci ba zai yi nasara ba. Na kuma sanya iyakar kewaye da shi.
Ƙara CSS na gaba zuwa ga tsarinku na style.css:
#nav {
nisa: 225px;
hagu-dama: 15px;
iyaka: matsakaicin matsakaici # 000000;
}
#nav li {
jerin-jerin: babu;
}
.afiyi {
font-size: .75em;
bayyana: duka biyu;
nisa: 100%;
Daidaita rubutu: cibiyar;
}
Yankin kayan da aka tsara ya tsara jerin a cikin ɓangaren kewayawa don ba su da wani harsashi ko lambobi, da kuma samfurin .footer na yancin haƙƙin mallaka ya zama karami kuma a tsakiya a cikin sashe.
07 na 10
Matsayi Babban Sashe
Ta hanyar sakawa babban ɓangarenku tare da cikakken matsayi za ku iya tabbata cewa zai kasance daidai inda kuke son shi ya zauna a kan shafin yanar gizonku. Na sanya inganci na 800px don ci gaba da kula da masu girma, amma idan kana da karamin dubawa, zaka iya so ya rage.
Sanya da wadannan a cikin tsarin styles.css:
#main {
nisa: 800px;
sama: 0px;
matsayi: cikakke;
hagu: 250px;
}
08 na 10
Ƙarfafa labarunku
Tun da na riga na kafa sashin layi na sama, ina so in ba kowane sakin layi don ƙarin "bugawa" don sa shi ya fi kyau. Na yi haka ta hanyar sanya iyaka a kan saman wanda ya nuna wannan sakin layi fiye da kawai hoton.
Sanya da wadannan a cikin tsarin styles.css:
.topline {
Yankin iyakoki: Ƙananan samfurin FFCC00;
}
Na yanke shawarar yin shi a matsayin kundin da ake kira "topline" maimakon ƙayyade dukan sassan a wannan hanya. Wannan hanyar, idan na yanke shawara na so in sami sakin layi ba tare da layin layi ba, zan iya barin kundin = "topline" a cikin sakin layi na kuma bazai da iyakar kan iyaka.
09 na 10
Sanya hotuna
Hotuna suna da iyakoki a kusa da su, wannan ba a bayyane ba ne sai dai idan hoton yana haɗi, amma ina so in sami aji a cikin CSS stylesheet wanda ya kashe iyakar ta atomatik. Don wannan tsarin, Na halicci kundin "noborder", kuma mafi yawan hotuna a cikin takardun suna cikin ɓangaren wannan aji.
Sauran bangare na waɗannan hotuna shine wurin su a shafi. Ina so su kasance wani ɓangare na sakin layi da suke cikin ba tare da yin amfani da tebur ba don daidaita su. Hanyar da ta fi sauƙi don yin wannan ita ce ta amfani da dukiya ta CSS.
Sanya da wadannan a cikin tsarin styles.css:
#main img {
taso kan ruwa: hagu;
hagu-dama: 5px;
gefe-kasa: 15px;
}
.nayayyun {
iyaka: 0px babu;
}
Kamar yadda ka gani, akwai wasu wuraren da aka sanya a kan hotunan, don tabbatar da cewa ba a rushe su ba a kan rubutun da ke kusa da su a cikin sakin layi.
10 na 10
Yanzu Duba Aikinka Na Kammala
Da zarar ka ajiye ka CSS zaka iya sake sauke shafi na pets.htm a cikin shafin yanar gizonku. Shafinku ya kamata yayi kama da wanda aka nuna a wannan hoton, tare da hotunan hoto da kewayawa da aka sanya daidai a gefen hagu na shafin.
Bi wadannan matakai guda daya don duk shafin yanar gizonku na wannan shafin. Kuna so ku sami shafi ɗaya don kowane shafi a cikin kewayawa.