Kunyoresa Nyaya Inotsigira Webhupu neCSS

01 yegumi

Gadzira CSS Style Sheet

Nenzira imwecheteyo isu takasarudza imwe faira faira ye HTML, iwe uchagadzira text file yeCSS. Kana iwe uchida mazamuko emugadziriro iyi tapota ona tutori yokutanga. Heano matanho ekuumba yako CSS style sheet mu Notepad:

1. Sarudza Faira> Yatsva mu Notepad kuti uwane firiji isina chinhu
2. Chengetedza faira seCSS nokudhonza File
3. Dzokera kune faira yangu ye_website pane dambudziko rako
4. Shandura iyo "Chengetedza Seye Rudzi:" kune "All Files"
5. Taura iwe faira yako "styles.css" (siya zvinyorwa) uye chengeta Save

02 yegumi

Link the CSS Style Sheet kuHTML yako

Kana uchinge wava nepepa yepaIndaneti yako, iwe uchada kusanganisa iyo paIndaneti peji. Kuti uite izvi unoshandisa chibatanisi chekubatanidza. Isai zvinotevera link tag chero kupi zvako mukati me tags yako yepets.htm document:

03 wegumi

Rongedza Page Margins

Paunenge uchinyorera XHTML yevashandisi vakasiyana-siyana, chimwe chinhu chaunodzidza ndechokuti vose vanoita kunge vane mararamiro akasiyana uye mitemo yekuti vanoratidza sei zvinhu. Nzira yakanakisisa yekuziva kuti nzvimbo yako inotarisa yakafanana mune dzimwe browsers ndeyokutendera zvinhu zvakaita semakona kuti zvisiyane nekusarudza shanduro.

Ndinosarudza kutanga mapeji angu mukona yepamusoro yekona, pasina podha yepamusoro kana margin akakomberedza zvinyorwa. Kunyangwe kana ndichienda pane zvinyorwa, ndinoisa marita kune zero kuitira kuti ini ndive kutanga nematombo asina chinhu. Kuti uite izvi, wedzera zvinotevera kumutsara wako we styles.css:

html, body {
marginal: 0px;
padding: 0px;
muganhu: 0px;
kuruboshwe: 0px;
kumusoro: 0px;
}

04 yegumi

Kuchinja Pepa paPeji

Mhando yacho kazhinji ndiyo chinhu chokutanga chaunoda kuchinja paWebhu peji. Izvo zvisizvo zvisiri pamusangano pewebhu zvinogona kuva zvakaipa, uye chaizvoizvo zviri paWeb browser iyo pachayo, saka kana iwe usingarevi zvinyorwa, iwe hauzozivi kuti peji yako ichaita sei.

Kazhinji, iwe unogona kuchinja iyo faira pane ndima, kana dzimwe nguva pane dhiyo rose pacharo. Nokuda kweiwebsite ino tichajekesa faira pamusoro wepamusoro nepakati pemavara. Wedzera zvinotevera kumutsara wako we styles.css:

p, li {
fonti: 1m Arial, Helvetica, sans-serif;
}
h1 {
fonti: 2m Arial, Helvetica, sans-serif;
}
h2 {
fonti: 1.5m Arial, Helvetica, sans-serif;
}
h3 {
fonti: 1.25m Arial, Helvetica, sans-serif;
}

Ndakatanga ne1em sekukura kwangu kwemasimendi ye ndima uye nhamba yezvinhu, ndokubva ndashandisa izvozvo kuisa uswa hwemasheji angu. Handitarisiri kushandisa musoro wakadzika kupfuura h4, asi kana ukaronga kwauri unoda kuitaura zvakare.

05 of 10

Kuita Unhu Hwako Hwakawedzerwa Kufarira

Mavara asina kusvibiswa kwehutano ndebhuruu uye ruvara rwepepuru rwekusaonekwa uye akashanyira mazamu akafanana. Kunyange zvazvo ichi chiri chimiro, hachikwanise kukodzera ruvara rwemapeji ako, saka regai tishandure. Mufaira rako recc.css, wedzera zvinotevera:

a: link {
font-family: Arial, Helvetica, sans-serif;
ruvara: # FF9900;
text-decoration: underline;
}
a: vakashanyira {
ruvara: # FFCC66;
}
a: hover {
mamiriro acho ezvinhu: #FFFFCC;
font-weight: bold;
}

Ini ndakagadzira zvitatu zvekubatanidza, i: link sekusingaperi, a: kushanyira kana yave yashanya, ndinoshandura ruvara, uye: hover. Ndiine: hover Ndine hubatanidza kuwana ruvara rwemukati uye enda ushingi kuti usimbise kuti iri kubatanidza kuiswa.

06 of 10

Kunyorera Kufamba Chikamu

Kubvira patinoisa iyo kufamba (id = "nav") chikamu chekutanga mu HTML, ngatishandise iyo kutanga. Tinofanira kuratidzira kuti yakave yakajeka sei uye kuisa mararamiro akawandisa kune rumwe rutivi kuitira kuti rugwaro rukuru rurege kupfuurira kurwisana naro. Ndinoisawo muganhu wakakomberedza.

Wedzerai CSS inotevera kumutsara wenyu we styles.css:

#nav {
kureba: 225px;
marginal-right: 15px;
border: medium solid # 000000;
}
#nav li {
rwandu-style: hapana;
}
.footer {
font-size: .75em;
chena: zvose;
kureba: 100%;
text-align: center;
}

Nzira yekunyora-nzvimbo inogadzirisa urongwa mukati mechikamu chekufamba-famba kuti irege kuva nemabhomba kana nhamba, uye iyo .footer michina chikamu chekodzero chidiki uye chakanyanya mukati mechikamu.

07 pa10

Kuisa Pakati peZvikamu Zvikamu

Nokuisa chikamu chako chikuru nekugadzirisa zvakakwana iwe unogona kuva nechokwadi chokuti ichagara iwe chaiyo iwe unoda kuti igare paWebhu peji yako. Ndakaita 800px yangu yakawanda kuti iite maziso makuru, asi kana iwe uine chekuita zvishoma, iwe ungada kuita izvozvo zvakaderera.

Isa zvinhu zvinotevera mumutsara wako we styles.css:

#main {
kureba: 800px;
kumusoro: 0px;
nzvimbo: mhedziso;
Kuruboshwe: 250px;
}

08 yegumi

Kunyorera Zvikamu Zvako

Sezvo ndatove ndakatarisa ndima yepamusoro, ndaida kupa ndima imwe neimwe zvishoma "kukanda" kuti iite pachena. Ndakaita izvi nekuisa muganhu kumusoro uko wakaratidza ndima kupfuura chifananidzo chete.

Isa zvinhu zvinotevera mumutsara wako we styles.css:

.topline {
border-top: thick solid # FFCC00;
}

Ndakasarudza kuzviita sekirasi inonzi "topline" kwete kungotsanangura ndima dzose nenzira iyoyo. Nenzira iyi, kana ndikasarudza kuti ndinoda kuva nemuchina usina ruvara rwemutsara wepamusoro, ndinokwanisa kungosiya kirasi = "topline" mumutsetse wepavara uye hauzove nepamusoro wepamuganhu.

09 yegumi

Kutamba Mifananidzo

Mifananidzo yakawanda ine muganhu wakakomberedza, izvi hazvisi nguva dzose zvichioneka kunze kwekuti chifananidzo chiri chekubatanidza, asi ndinoda kuva nekirasi mukati meCSS yangu yemasikirwoti anodzima muganhu pakarepo. Pamusoro peizvi, ndakasarudza "noborder" kirasi, uye dzakawanda zvezvifananidzo zviri muchikwata chikamu chechikoro.

Chimwe chikamu chinokosha chezvifananidzo izvi ndezvavanoita pane peji. Ndaida kuti vave chikamu chemavara avakanga vari kunze kwekushandisa tafura kuti vaenzanise. Nzira yakajeka yekuita izvi ndeyokushandisa float CSS.

Isa zvinhu zvinotevera mumutsara wako we styles.css:

#main img {
float: left;
marginal-right: 5px;
marginal-bottom: 15px;
}
.noborder {
Muganhu: 0px none;
}

Sezvaunogona kuona, panewo marginal properties akaiswa pamifananidzo, kuti ave nechokwadi chokuti haasati aputsika pamusoro pemashoko akatenderera ari pedyo navo mundima.

10 pa10

Iye zvino Tarisa Pawakapedza Page

Kana wapedza kuchengeta CSS yako unogona kutorazve peji yepets.htm muWeb browser yako. Peji yako inofanira kutarisa yakafanana neyakaratidzwa mumufananidzo uyu, nemifananidzo yakanyatsorongedzwa uye kufamba kwacho kwakaiswa nenzira yakarurama kuruboshwe rwepeji.

Tevera matanho ayachete kune mapeji ako ose emukati wepaiti ino. Iwe unoda kuva nepeji rimwe peji rimwe nerimwe mukufamba kwako.