Ngapikake Notepad Kaca Web sing digawe karo CSS

01 saka 10

Nggawe CSS Style Sheet

Kanthi cara sing padha gawé file teks sing kapisah kanggo HTML, sampeyan bakal nggawe file teks kanggo CSS. Yen sampeyan butuh visual kanggo proses iki, waca tutorial pisanan. Kene langkah-langkah kanggo nggawe sheet style CSS ing Notepad:

1. Pilih File> Anyar ing Notepad kanggo njaluk jendela kosong
2. Simpen file minangka CSS kanthi ngeklik File
3. Navigasi menyang folder my_website ing hard drive
4. Ngganti "Simpen Tipe:" kanggo "Kabeh File"
5. Ngganti file "styles.css" (ninggalake kuotasi) lan klik Simpen

02 saka 10

Link CSS Style Sheet menyang HTML Sampeyan

Yen sampeyan wis entuk sheet gaya kanggo situs web sampeyan, sampeyan kudu nggandhengake menyang kaca web kasebut dhewe. Kanggo nindakake iki sampeyan nggunakake tag link. Selehake tag pranala ing ngisor iki ing endi tags ing dokumen pets.htm:

03 saka 10

Ndandani Margins Kaca

Nalika sampeyan nulis XHTML kanggo macem-macem browser, siji bab sampeyan bakal sinau iku kabeh padha duwe beda wates lan aturan carane padha nampilake samubarang. Cara sing paling apik kanggo mesthekake manawa situs sampeyan katon kaya ing kabeh browser iku ora ngidini samubarang kaya watesan dadi standar kanggo pilihan browser.

Aku luwih seneng miwiti kaca-kaca ing pojok kiwa ndhuwur, kanthi ora ana padding ekstra utawa wates sing nyedhaki teks kasebut. Malah yen aku arep ngiseni isi, aku nyetel pinggiran menyang nol supaya aku miwiti karo slate kosong padha. Kanggo nindakake iki, tambahake ing ngisor iki menyang dokumen styles.css panjenengan:

html, body {
watesan: 0px;
padding: 0px;
wates: 0px;
kiwa: 0px;
ndhuwur: 0px;
}

04 saka 10

Ngganti Font ing Page

Huruf kasebut asring bab pisanan sing bakal diganti ing kaca Web. Font standar ing kaca Web bisa dadi ora nyenengake, lan mung nggoleki browser web dhewe, dadi yen sampeyan ora nemtokake hurup, sampeyan pancene ora bakal ngerti apa kaca sampeyan bakal katon.

Biasane, sampeyan bakal ngganti huruf ing paragraf, utawa kadhangkala ing kabeh dokumen kasebut dhewe. Kanggo situs iki kita bakal nemtokake hurup ing tingkat header lan paragraf. Tambahake ing ngisor iki menyang dokumen 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;
}

Aku miwiti karo 1em minangka ukuran basa kanggo paragraf lan item dhaptar, lan banjur digunakake kanggo nyetel ukuran kanggo judhul-kabar. Aku ora ngarepake nggunakake judhul sing luwih jero tinimbang h4, nanging yen sampeyan pengin nggawe gaya uga.

05 saka 10

Nuduhake Tautan Sampeyan Luwih Menarik

Werna default kanggo pranala sing biru lan ungu kanggo tautan sing ora divisi lan dibukak. Nalika iki standar, bisa uga ora cocog karo skema werna ing kaca, supaya ngganti. Ing file styles.css sampeyan, nambahake ing ngisor iki:

a: link {
font-family: Arial, Helvetica, sans-serif;
werna: # FF9900;
text-decoration: underline;
}
a: dibukak {
werna: # FFCC66;
}
a: hover {
latar mburi: #FFFFCC;
font-weight: bold;
}

Aku ngeset telung gaya pranala, sing: minangka tautan minangka standar, sing: dibukak kanggo nalika wis dibukak, aku ngganti werna, lan: kisaran. Kanthi: kisaran aku duwe link njaluk werna latar mburi lan go kandel kanggo nandheske minangka link sing bakal diklik.

06 saka 10

Ngganti bagean Navigasi

Awit kita sijine bagian pandhu arah (id = "nav") ing HTML dhisik, supaya gaya kasebut pisanan. Kita kudu nuduhaké babagan apa sing kudu dadi jembar lan sijine wates sing luwih akeh ing sisih tengen supaya teks utama ora bakal bisa nglawan. Aku uga ngubengi sakulone.

Nambahake CSS ing ngisor iki menyang dokumen styles.css panjenengan:

#nav {
ambane: 225px;
margin-right: 15px;
wates: medium solid # 000000;
}
#nav li {
gaya-gaya: none;
}
.footer {
font-size: .75em;
jelas: loro;
jembar: 100%;
teks-align: center;
}

Properties gaya dhaptar nyetel dhaptar ing bagean pandhu arah supaya ora ana peluru utawa nomer, lan gaya footer bagean hak cipta luwih cilik lan pusat ing bagean kasebut.

07 saka 10

Posisi bagean Utama

Kanthi ngesahake bagean utama kanthi posisi Absolute sampeyan bisa uga yakin yen bakal tetep ing ngendi sampeyan pengin tetep ing kaca Web. Aku nggawe jembar 800px kanggo nyedhiyakake gedhe monitor, nanging yen sampeyan duwe monitor cilik, sampeyan bisa uga pengin nggawe sing luwih sempit.

Selehake ing ngisor iki ing document styles.css panjenengan:

#main {
jembar: 800px;
ndhuwur: 0px;
posisi: Absolute;
kiwa: 250px;
}

08 saka 10

Ngapresiasi Paragraf Panjenengan

Awit aku wis nyetel font paragraf ing ndhuwur, aku pengin menehi paragraf saben ekstra "kick" kanggo nggawe metu luwih apik. Aku nindakake iki kanthi nempatake wates ing ndhuwur sing nuduhake paragraf luwih saka mung gambar dhewe.

Selehake ing ngisor iki ing document styles.css panjenengan:

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

Aku mutusake kanggo nindakake minangka kelas disebut "topline" tinimbang mung mesthine kabeh paragraf ing cara sing. Kanthi cara iki, yen aku arep duwe paragraf tanpa garis kuning ndhuwur, aku mung bisa ninggalake kelas = "topline" ing tag paragraf lan ora duwe wates ndhuwur.

09 saka 10

Nggawe gambar

Gambar biasane duwe perbatasan watara, iki ora tansah katon kajaba gambar kuwi link, nanging aku seneng duwe kelas ing CSS style sheet sing mateni perbatasan kanthi otomatis. Kanggo gaya iki, aku nggawe kelas "noborder", lan sebagian besar gambar ing dokumen kasebut minangka bagéan saka kelas iki.

Bagian istimewa liyane saka gambar kasebut yaiku lokasi ing kaca kasebut. Aku pengin dadi bagian saka paragraf sing padha tanpa nggunakake tabel kanggo nata mau. Cara paling gampang kanggo nglakoni iki yaiku nggunake properti CSS float.

Selehake ing ngisor iki ing document styles.css panjenengan:

#main img {
ngambang: kiwa;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
wates: 0px ora ana;
}

Minangka sampeyan bisa ndeleng, ana uga sifat watesan sing disetel ing gambar, kanggo nggawe manawa dheweke ora digebugake marang teks sing ngambang ing jejere ing paragraf kasebut.

10 saka 10

Saiki Deleng ing Page Sampeyan

Sawise sampeyan nyimpen CSS sampeyan, sampeyan bisa muat maneh kaca pets.htm ing browser Web. Kaca sampeyan kudu katon kaya sing ditampilake ing gambar iki, kanthi gambar sing disajikake lan pandhu arah sing dipasang kanthi bener ing sisih kiwa kaca.

Tindakake langkah sing padha kanggo kabeh kaca internal kanggo situs iki. Sampeyan pengin duwe siji kaca kanggo saben kaca ing pandhu arah.