01 kwezingu-10
Dala ishidi lesitayela se-CSS
Ngokufanayo sakha ifayela elihlukile lombhalo we-HTML, uzokwakha ifayela lombhalo we-CSS. Uma udinga izibonisi kule nqubo sicela ubone isifundo sokuqala. Nazi izinyathelo zokudala ishidi lakho lesitayela se-CSS ku-Notepad:
- Khetha Ifayela> Okusha ku-Notepad ukuze uthole iwindi elingenalutho
- Londoloza ifayela njengeCSS ngokuchofoza Ifayela
- Hamba uye kufolda yami_website ku-hard drive yakho
- Shintsha i- "Londoloza njengohlobo:" ku "Wonke amafayela"
- Yisho ifayela lakho "styles.css" (shiya izingcaphuno) bese uchofoze Londoloza
02 kwezingu-10
Xhuma i-CSS Style Sheet ku-HTML yakho
Uma usuphethe ishidi lesitayela kuwebhusayithi yakho, uzodinga ukuzihlanganisa ekhasini leWebhu ngokwalo. Ukuze wenze lokhu usebenzisa ithegi yesixhumanisi. Beka ithegi yesixhumanisi esilandelayo noma ikuphi ngaphakathi kwamathegi we-
we-pets.htm yakho:03 ka-10
Lungisa Amakhadi Ekhasi
Uma ubhala i-XHTML yeziphequluli ezihlukene, into eyodwa ozoyifunda ukuthi bonke babonakala babe nemigqa ehlukene nemithetho yokuthi babonisa kanjani izinto. Indlela engcono kakhulu yokuqiniseka ukuthi isayithi lakho libukeka elifanayo kuziphequluli eziningi ukuvumela izinto ezinjengezansi ukuba zikhohlise ekukhethweni kwesiphequluli.
Ngiyathanda ukuqala amakhasi ami ekhoneni elingenhla elingakwesokunxele, kungekho sici esingeziwe noma umkhawulo oseduze nombhalo. Ngisho noma ngizopakisha okuqukethwe, ngibeka ama-margins ku-zero ukuze ngiqale ngesikhwama esingenalutho esifanayo. Ukuze wenze lokhu, engeza lokhu okulandelayo kumbhalo wakho wesitayela.css:
i-html, umzimba {
umkhawulo: 0px;
i-padding: 0px;
umngcele: 0px;
kwesokunxele: 0px;
phezulu: 0px;
}}
04 kwezingu-10
Ukushintsha Ifonti ekhasini
Ifonti ngokuvamile yinto yokuqala ofuna ukuyishintsha ekhasini leWebhu. Iphoyinti elizenzakalelayo ekhasini lewebhu lingase libi, futhi empeleni livule isiphequluli seWebhu ngokwalo, ngakho-ke uma ungachazi ifonti, ngeke ukwazi ukuthi ikhasi lakho lizobukeka kanjani.
Ngokujwayelekile, ungashintsha ifonti ngezigaba, noma ngezinye izikhathi kuwo wonke umbhalo ngokwayo. Kule sayithi sizocacisa ifonti kusizinga sekhanda nesigaba. Engeza okulandelayo kumbhalo wakho wesitayela.css:
p, li {
ifonti: ku-Arial, Helvetica, sans-serif;
}}
h1 {
ifonti: 2am Arial, Helvetica, sans-serif;
}}
h2 {
ifonti: 1.5 i-Arial, i-Helvetica, i-sans-serif;
}}
h3 {
ifonti: 1.25m Arial, Helvetica, sans-serif;
}}
Ngaqala nge-1em njengesayizi yami eyisisekelo sezindima nezinto zohlu, bese ngisebenzisa lokho ukusetha usayizi wezinhloko zami. Angilindele ukusebenzisa inhloko ejulile kune-h4, kodwa uma uhlela ukuthi uzofuna ukuyibeka ngesitayela.
05 ka-10
Ukwenza Izixhumanisi Zakho Zijabulise Kakhulu
Imibala ezenzakalelayo yezixhumanisi ziluhlaza okwesibhakabhaka nokubomvu ezingalindelekile futhi zivakashelwe izixhumanisi ngokulandelanayo. Ngenkathi lokhu kujwayelekile, kungase kungalungele uhlelo lombala lwamakhasi akho, ngakho ake siwuguqule. Kufayela lakho le-styles.css, engeza okulandelayo:
i: isixhumanisi {
umsebenzisi wefonti: Arial, Helvetica, sans-serif;
umbala: # FF9900;
umbhalo-umhlobiso: ugcizelela;
}}
a: wavakashela {
umbala: # FFCC66;
}}
i: hover {
isizinda: #FFFFCC;
ifonti-isisindo: isibindi;
}}
Ngimise izitayela ezintathu zokuxhumanisa, i: isixhumanisi njenge-default, i: ivakashelwe lapho ivakashelwe, ngishintsha umbala, futhi: i-hover. Nge: i-hover Nginesixhumanisi sithola umbala wangemuva bese uya ngesibindi ukuze ugcizelele ukuthi yisixhumanisi sokuchofoza.
06 kwangu-10
Ukuthayipha Isigaba Sokuhamba
Njengoba sisebenzisa isigaba sokuhamba (id = "nav") okokuqala ku-HTML, masibhale kuqala. Kudingeka sikhombise ukuthi kufanele kube mkhulu kangakanani futhi ubeke umkhawulo ohlangothini olungakwesokudla ukuze umbhalo oyinhloko ungaphambuki kuwo. Ngiphinde ngibeke umngcele nxazonke.
Engeza i-CSS elandelayo kumbhalo wakho wesitayela.css:
#nav {
ububanzi: 225px;
umkhawulo ngakwesokudla: 15px;
Umngcele: oqinile ophakathi # 000000;
}}
#nav li {
isitayela-uhlu: akekho;
}}
.footer {
Usayizi wefonti: .75em;
cisha: kokubili;
ububanzi: 100%;
ukuhambisana kombhalo: isikhungo;
}}
Isakhiwo sesitayela somdwebo sakha uhlu ngaphakathi kwesigaba sokuhamba ukuze singabi nezinhlamvu noma izinombolo, kanye nezitayela ze-.footer isigaba se-copyright sibe sincane futhi sigxile ngaphakathi kwesigaba.
07 kwangu-10
Ukubeka esikhundleni Isigaba Esiyinhloko
Ngokubeka isigaba sakho esiyinhloko ngokuma okuphelele ungaqiniseka ukuthi kuzohlala ngqo lapho ufuna khona ukuhlala ekhasini lakho leWebhu. Ngenze amamitha angu-800px ububanzi ukuba akhonze abaqaphi abakhulu, kodwa uma unomqapha omncane, ungase uthande ukwenza lo mncipha.
Beka okulandelayo kumbhalo wakho wesitayela.css:
#main {
ububanzi: 800px;
phezulu: 0px;
isikhundla: ngokuphelele;
kwesokunxele: 250px;
}}
08 kwezingu-10
Ukuthakazelisa Izigaba Zakho
Njengoba sengivele ngisethe ifonti yesigcawu ngenhla, ngifuna ukunikeza isigaba ngasinye "ukukhakha" okuncane ukuze kwenzeke kube ngcono. Ngakwenza lokhu ngokubeka umngcele phezulu ogqokise isigaba ngaphezu kwesithombe kuphela.
Beka okulandelayo kumbhalo wakho wesitayela.css:
.topline {
umngcele-phezulu: okuqinile okuqinile # FFCC00;
}}
Nganquma ukukwenza njengeklasi elibizwa ngokuthi "topline" kunokuchaza nje zonke izigaba ngaleyo ndlela. Ngale ndlela, uma nginquma ukuthi ngifuna ukuba nesigcawu ngaphandle komugqa ophuzi ophezulu, ngingakwazi ukushiya iklasi = "topline" emgqeni wendima futhi ngeke ibe nomngcele ophezulu.
09 kwezingu-10
Ukubetha izithombe
Izithombe ngokuvamile zinomngcele ozungezile, lokhu akubonakali ngaso sonke isikhathi ngaphandle kokuthi isithombe siyisixhumanisi, kodwa ngithanda ukuba nesigaba ngaphakathi kwekhasi lami lezitayela ze-CSS ezivala umda ngokuzenzekelayo. Kule fayili yezitayela, ngidale isigaba "noborder", futhi iningi lezithombe kulo mbhalo ziyingxenye yalesi sifundo.
Okunye okuyingxenye ekhethekile yalezi zithombe indawo yabo ekhasini. Ngangifuna ukuba yingxenye yendima ababeyiyo ngaphandle kokusebenzisa amatafula ukuze bahambisane nabo. Indlela elula yokwenza lokhu ukusebenzisa i-floss CSS impahla.
Beka okulandelayo kumbhalo wakho wesitayela.css:
#main img {
faka: kwesokunxele;
umkhawulo ngakwesokudla: 5px;
umkhawulo-ngezansi: 15px;
}}
.noborder {
Umngcele: 0px;
}}
Njengoba ungabona, kunezakhiwo zomkhawulo ezibekelwe ezithombeni, ukuze uqiniseke ukuthi aziphihliwe ngokumelene nombhalo ohambile obhekene nabo ezigabeni.
10 kwangu-10
Manje Bheka ikhasi lakho eliphelile
Uma usulondolozile i-CSS yakho ungaphinda ulayishe ikhasi le-pets.htm kusiphequluli sakho seWebhu. Ikhasi lakho kufanele libukeke elifana nalo eliboniswe kulesi sithombe, ngezithombe ezihambelanisiwe futhi ukuhamba kuhambisane kahle ngakwesokunxele kwekhasi.
Landela lezinyathelo ezifanayo kuwo wonke amakhasi akho angaphakathi ale sayithi. Ufuna ukuba nekhasi elilodwa kuwo wonke ikhasi ekuhambeni kwakho.