Kujambula Kapepala Kapepala Yapanga Webusaiti Tsamba ndi CSS

01 pa 10

Pangani Pepala Loyamba la CSS

Momwemonso timapangidwira mafayilo osiyana a HTML, mumapanga ma fayilo a CSS. Ngati mukufuna zojambula pazinthu izi chonde onani phunziro loyamba. Nazi njira zomwe mungapange pepala lanu lachidule la CSS mu Notepad:

1. Sankhani Fayilo> Yatsopano mu Notepad kuti mupeze mawindo opanda kanthu
2. Sungani fayilo monga CSS podutsa Faili
3. Yendetsani ku fayilo yanga_nbsite pa hard drive
4. Sinthani "Sungani Monga Mtundu:" ku "Ma Files Onse"
5. Tchulani fayilo yanu "ma styles.css" (musiye mawuwo) ndipo dinani Save

02 pa 10

Gwirizanitsani tsamba la CSS pa HTML yanu

Mukakhala ndi pepala lolemba pawebusaiti yanu, muyenera kuigwiritsa ntchito pa tsamba la webusaiti. Kuti muchite izi mumagwiritsa ntchito chingwe chogwirizana. Ikani malumikizidwe otsatirawa kulikonse mkati mwa malemba a ziweto zanu.htm document:

03 pa 10

Konzani Tsambali

Pamene mukulemba XHTML kwa osakayika osiyanasiyana, chinthu chimodzi chomwe mudzaphunzire ndi chakuti onse akuwoneka kuti ali ndi mzere wosiyana ndi malamulo omwe akuwonetsera zinthu. Njira yabwino yotsimikizira kuti webusaiti yanu ikuwoneka chimodzimodzi m'masitomala ambiri ndikulola kuti zinthu ngati mitsinje ikhale yosasintha kwa osankhidwa.

Ndimakonda kuyamba masamba anga kumtunda wakumanzere kumanzere, popanda phokoso lowonjezera kapena m'mphepete mwake. Ngakhale nditati ndipange zinthuzo, ndimayika mazenera kuti ndiyambe ndi ndandanda yomweyi. Kuti muchite izi, onjezerani zotsatirazi pazomwe mumalemba:

html, thupi {
malire: 0px;
padding: 0px;
malire: 0px;
kumanzere: 0px;
pamwamba: 0px;
}}

04 pa 10

Kusintha Mndandanda pa Tsamba

Mndandanda nthawi zambiri ndi chinthu choyamba chimene mukufuna kusintha pa tsamba la webusaiti. Mndandanda wosasinthika pa tsamba la webusaiti ukhoza kukhala wonyansa, ndipo makamaka pawebusaitiyo yokha, kotero ngati simukufotokozera maonekedwe, simudziwa chomwe tsamba lanu lidzawoneka.

Kawirikawiri, mungasinthe mndandanda pamasamba, kapena nthawi zina pa pepala lonselo. Pa tsamba ili tidzatha kufotokoza ndondomeko pamutu ndi ndime. Onjezerani izi motsatira ndondomeko yanu ya styles.css:

p, li {
foni: 1mu Arial, Helvetica, sans-serif;
}}
h1 {
mapepala: 2mu Arial, Helvetica, sans-serif;
}}
h2 {
mapulogalamu: 1.5m Arial, Helvetica, sans-serif;
}}
h3 {
mitu: 1.25m Arial, Helvetica, sans-serif;
}}

Ndinayamba ndi 1em ngati kukula kwanga kwa ndime ndi mndandanda wa zinthu, ndiyeno ndikugwiritsa ntchito izo kuyika kukula kwa mutu wanga. Sindikuyembekezera kugwiritsa ntchito mutu wazitali kuposa h4, koma ngati mukukonzekera mudzafunanso kuzitchula.

05 ya 10

Kupanga Ubale Wanu Wokondweretsa Kwambiri

Mitundu yosasunthika ya maulumikizi ndi a buluu ndi afiira omwe sanagwirizane ndi maulendo omwe amawachezera. Ngakhale izi ndizowonjezera, izo sizingagwirizane ndi mapulani a masamba anu, kotero tiyeni tisinthe. Mu fayilo yanu ya style.css, onjezerani zotsatirazi:

a: link {
foni-banja: Arial, Helvetica, sans-serif;
Mtundu: # FF9900;
zokongoletsera malemba: pansi pano;
}}
a: anachezera {
Mtundu: # FFCC66;
}}
a: hover {
maziko: #FFFFCC;
foni-weight: bold;
}}

Ndakhazikitsa mafashoni atatu ogwirizana, a: kulumikizana monga osasintha, a: anawayendera pamene adayendera, ndikusintha mtundu, ndi: hover. Ndi:: hover Ndili ndi chiyanjano ndikupeza mtundu wakumbuyo ndikupita molimba mtima kuti ndikugogomeze kuti ndikugwirizanitsa.

06 cha 10

Kujambula Zida Zogwiritsa Ntchito

Popeza tikuyika gawo loyendetsa (id = "nav") choyamba mu HTML, tiyeni tiyiyambe yoyamba. Tiyenera kufotokoza momwe ziyenera kukhalira ndi kuika mtsinje waukulu kumbali yakumanja kuti malemba apamwamba asamayende motsutsana nawo. Ndimayikanso malire kuzungulira.

Onjezerani CSS yotsatirayi ku ndondomeko yanu ya styles.css:

#nav {
m'lifupi: 225px;
kumanja kumanja: 15px;
malire: osakaniza olimba # 000000;
}}
#nav li {
mndandanda wamndandanda: palibe;
}}
.footer {
kukula kwazithunzi: .75em;
momveka; zonse;
m'lifupi: 100%;
kulumikiza malemba: pakati;
}}

Mndandanda wazomwekuyimira mndandanda mkati mwa chigawo cha maulendo kuti musakhale ndi zipolopolo kapena manambala, ndi mafayilo a .footer chikalata chokhala ndi chichepere ndi chazing'ono mkati mwa gawolo.

07 pa 10

Kuikapo gawo lalikulu

Pogwiritsa ntchito gawo lanu lalikulu ndi kukhazikika kwathunthu mungakhale otsimikiza kuti zidzakhalabe komwe mukufuna kuti mukhale pa webusaiti yanu. Ndinapanga 800px kuti ndiwonetsere zazikulu, koma ngati muli ndi zochepetsera zing'onozing'ono, mungafune kuzipanga zochepa.

Ikani zotsatirazi muzitsulo lanu la style.css:

#main {
m'lifupi: 800px;
pamwamba: 0px;
udindo: mtheradi;
kumanzere: 250px;
}}

08 pa 10

Kukopa Zigawo Zanu

Popeza ndayika kale mapepala apamwamba pamwambapa, ndinkafuna kupereka ndime iliyonse yowonjezera "kukankha" kuti iwonetseke bwino. Ndinachita izi poika malire pamwamba omwe anatsindika ndime kusiyana ndi fano lokha.

Ikani zotsatirazi muzitsulo lanu la style.css:

.topline {
m'mphepete-pamwamba: wakuda olimba # FFCC00;
}}

Ndinaganiza kuti ndichite monga gulu lotchedwa "topline" m'malo mofotokozera ndime zonse mwanjira imeneyi. Mwanjira iyi, ngati ndikuganiza kuti ndifuna kukhala ndi ndime popanda chikasu chapamwamba, ndimatha kuchoka pakalasi = "pamwamba" palemba la ndime ndipo sichikhala ndi malire apamwamba.

09 ya 10

Kujambula Zithunzizo

Zithunzi zambiri zimakhala ndi malire kuzungulira iwo, izi sizikuwoneka nthawi zonse pokhapokha fano liri chiyanjano, koma ndimakonda kukhala ndi kalasi m'katikati mwa stylesheet yanga ya CSS yomwe imatsegula malire mosavuta. Kwa zojambulajambulazi, ndinapanga gulu la "noborder", ndipo zithunzi zambiri zomwe zili m'kalembedwe ndi gawo la kalasiyi.

Gawo lina lapadera la zithunzi izi ndi malo ake pa tsamba. Ndinkafuna iwo akhale gawo la ndime yomwe iwo analimo popanda kugwiritsa ntchito matebulo kuti awagwirizanitse. Njira yosavuta yochitira izi ndi kugwiritsa ntchito katundu wa CSS woyandama.

Ikani zotsatirazi muzitsulo lanu la style.css:

#main img {
sungunulani: kumanzere;
mbali ya kumanja: 5px;
m'munsi wam'munsi: 15px;
}}
.noborder {
malire: 0px palibe;
}}

Monga momwe mukuonera, palinso maimidwe omwe amaikidwa pazithunzi, kuti atsimikizidwe kuti asagwedezeke motsutsana ndi mawu omwe ali pambali pawo.

10 pa 10

Tsopano Yang'anani pa Tsamba Lanu Latsirizidwa

Mukasunga CSS yanu mukhoza kubwezeretsanso tsamba la pets.htm mu msakatuli wanu wa pawebusaiti. Tsamba lanu liyenera kuwoneka mofanana ndi lomwe lawonetsedwa pachithunzichi, ndi zithunzi zomwe zikugwirizana ndi momwe maulendo amayendera molondola kumanzere kwa tsamba.

Tsatirani ndondomeko zomwezi pa masamba anu onse a mkati. Mukufuna kukhala ndi tsamba limodzi pa tsamba lirilonse mukuyenda kwanu.