01 ya 10
Unda Karatasi ya Sinema ya CSS
Njia sawa tuliunda faili ya maandishi tofauti ya HTML, utaunda faili ya maandishi kwa CSS. Ikiwa unahitaji picha za mchakato huu tafadhali angalia mafunzo ya kwanza. Haya ni hatua za kuunda karatasi yako ya mtindo wa CSS katika Kichunguzi:
- Chagua Picha> Mpya katika Kipeperushi ili kupata dirisha tupu
- Hifadhi faili kama CSS kwa kubonyeza faili
- Nenda kwenye folda yangu_website kwenye gari yako ngumu
- Badilisha "Hifadhi Kama Aina:" hadi "Faili Zote"
- Fanya faili yako "styles.css" (futa quotes) na bofya Hifadhi
02 ya 10
Unganisha Karatasi ya Sinema ya CSS kwenye HTML yako
Mara baada ya kupata karatasi ya mtindo kwenye tovuti yako, utahitaji kuunganisha kwenye ukurasa wa Wavuti. Kwa kufanya hivyo unatumia lebo ya kiungo. Weka alama ya kiungo ifuatayo popote ndani ya lebo
03 ya 10
Weka Ukurasa wa Kwanza
Unapoandika XHTML kwa vivinjari mbalimbali, jambo moja utajifunza ni kwamba wote wanaonekana kuwa na margin tofauti na kanuni za jinsi wanavyoonyesha vitu. Njia bora ya kuhakikisha kwamba tovuti yako inaonekana sawa katika vivinjari vingi ni kuruhusu vitu kama vile vijijini kuwa chaguo kwa uchaguzi wa kivinjari.
Napenda kuanzisha kurasa zangu kwenye kona ya kushoto ya juu, bila padding au margin ya ziada inayozunguka maandiko. Hata kama ninaenda pedi yaliyomo, nitaweka margin hadi sifuri ili nimeanza na slate moja tupu. Kwa kufanya hivyo, ongeza yafuatayo kwa waraka wako wa styles.css:
html, mwili {
margin: 0px;
padding: 0px;
mpaka: 0px;
kushoto: 0px;
juu: 0px;
}
04 ya 10
Kubadilisha Font kwenye Ukurasa
Mara nyingi font ni jambo la kwanza ambalo unataka kubadilisha kwenye ukurasa wa wavuti. Fonti ya msingi kwenye ukurasa wa wavuti inaweza kuwa mbaya, na kwa kweli ni juu ya kivinjari chawewe mwenyewe, kwa hiyo ikiwa hufafanua font, hutajua kwa kweli jinsi ukurasa wako utavyoonekana.
Kwa kawaida, utabadilisha font kwenye aya, au wakati mwingine kwenye hati nzima yenyewe. Kwa tovuti hii tutafafanua font kwenye ngazi ya kichwa na ngazi. Ongeza zifuatazo kwa hati yako ya styles.css:
p, li {
font: 1 ya Arial, Helvetica, sans-serif;
}
h1 {
font: 2m Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5m Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25m Arial, Helvetica, sans-serif;
}
Nilianza kwa 1m kama ukubwa wangu wa msingi kwa vitu na orodha ya orodha, kisha nikitumia ili kuweka ukubwa wa vichwa vya habari yangu. Sitaraji kutumikia kichwa cha habari zaidi kuliko h4, lakini ikiwa unapanga nia utaenda kutaka mtindo pia.
05 ya 10
Kufanya Viungo Vyako Kuvutia zaidi
Rangi ya default kwa ajili ya viungo ni bluu na zambarau kwa unvisited na alitembelea viungo kwa mtiririko huo. Ingawa hii ni ya kawaida, haiwezi kufanana na mpango wa rangi wa kurasa zako, basi hebu tuibadilishe. Katika faili yako ya styles.css, ongeza zifuatazo:
: kiungo {
font-familia: Arial, Helvetica, sans-serif;
rangi: # FF9900;
mapambo-maandishi: kusisitiza;
}
: alitembelea {
rangi: # FFCC66;
}
: hover {
background: #FFFFCC;
font-uzito: ujasiri;
}
Nimeweka mitindo mitatu ya kiungo, ya: kiungo kama chaguo-msingi,: kilichotembelea wakati kinapotembelewa, nikibadilisha rangi, na: hover. Na: hover Nina kiungo kupata rangi ya nyuma na nenda ujasiri ili kusisitiza ni kiungo cha kubonyeza.
06 ya 10
Inapenda sehemu ya Navigation
Tangu sisi kuweka urambazaji (id = "nav") sehemu ya kwanza katika HTML, hebu mtindo kwanza. Tunahitaji kuonyesha jinsi pana inapaswa kuwepo na kuweka margin pana upande wa kulia ili maandiko kuu haipaswi kupinga dhidi yake. Mimi pia kuweka mpaka kuzunguka.
Ongeza CSS zifuatazo kwenye hati yako ya styles.css:
#nav {
upana: 225px;
haki ya kulia: 15px;
mpaka: kati imara # 000000;
}
#nav li {
orodha ya orodha: hakuna;
}
.footer {
ukubwa wa font: .75m;
wazi: wote wawili;
upana: 100%;
kuandika maandishi: kituo;
}
Mali ya mtindo wa orodha huweka orodha ndani ya sehemu ya urambazaji ili kuwa na risasi au namba, na mitindo ya .footer sehemu ya hakimiliki kuwa ndogo na inayozingatia ndani ya sehemu hiyo.
07 ya 10
Kuweka sehemu kuu
Kwa kuweka nafasi yako kuu na nafasi nzuri kabisa unaweza kuwa na uhakika kwamba itabaki hasa mahali unayotaka iendelee kwenye ukurasa wako wa wavuti. Nilitengeneza upana wangu wa 800px kufikia wachunguzi wakubwa, lakini ikiwa una kufuatilia ndogo, ungependa kufanya hivyo kuwa nyepesi.
Weka zifuatazo kwenye hati yako ya styles.css:
#main {
upana: 800px;
juu: 0px;
msimamo: kabisa;
kushoto: 250px;
}
08 ya 10
Kupiga Makala Yako
Kwa kuwa nimeweka tayari fungu ya kifungu hapo juu, nilitaka kutoa kila aya kidogo zaidi ya "kick" ili kuiweka vizuri zaidi. Nilifanya hivyo kwa kuweka mipaka juu ambayo ilionyesha aya zaidi ya picha tu.
Weka zifuatazo kwenye hati yako ya styles.css:
.topline {
mpaka-mpaka: nene imara # FFCC00;
}
Niliamua kufanya kama darasa linaloitwa "topline" badala ya kufafanua aya zote kwa njia hiyo. Kwa njia hii, ikiwa nitaamua kuwa na kifungu bila mstari wa juu wa manjano, naweza tu kuondoka darasa = "topline" katika alama ya aya na haitakuwa na mpaka wa juu.
09 ya 10
Kupiga picha kwa picha
Picha huwa na mpaka kuzunguka nao, hii sio daima inayoonekana isipokuwa picha ni kiungo, lakini napenda kuwa na darasa ndani ya stylesheet yangu ya CSS ambayo inazima mpaka kwa moja kwa moja. Kwa stylesheet hii, nimeunda darasa la "noborder", na picha nyingi katika waraka ni sehemu ya darasa hili.
Sehemu nyingine maalum ya picha hizi ni eneo lao kwenye ukurasa. Nilitaka wawe sehemu ya aya waliyokuwa nao bila kutumia meza ili kuifanya. Njia rahisi zaidi ya kufanya hii ni kutumia mali ya kueleza CSS.
Weka zifuatazo kwenye hati yako ya styles.css:
#main img {
kuelea: kushoto;
kulia upande wa kulia: 5px;
chini ya chini: 15px;
}
.noborder {
mpaka: 0px hakuna;
}
Kama unavyoweza kuona, pia kuna mali ya margin iliyowekwa kwenye picha, ili kuhakikisha kwamba haipatikani dhidi ya maandishi yaliyomo yaliyo karibu nao katika aya.
10 kati ya 10
Sasa angalia ukurasa wako uliokamilishwa
Mara baada ya kuokoa CSS yako unaweza kurejesha ukurasa wa pets.htm kwenye kivinjari chako cha wavuti. Ukurasa wako unapaswa kuangalia sawa na ule ulionyeshwa kwenye picha hii, na picha zilizounganishwa na urambazaji umewekwa kwa usahihi upande wa kushoto wa ukurasa.
Fuata hatua hizi sawa kwa kurasa zako zote za ndani za tovuti hii. Unataka kuwa na ukurasa mmoja kwa kila ukurasa katika urambazaji wako.