01 10
Jieun CSS Style Lambaran
Cara sarua urang dijieun file téks misah pikeun HTML, Anjeun bakal nyieun file téks pikeun CSS di. Lamun perlu visuals keur proses ieu sumangga ningali tutorial munggaran. Di dieu mangrupakeun hambalan ka nyieun lambaran gaya CSS anjeun dina Notepad:
- Milih payil> New dina Notepad pikeun meunangkeun jandela kosong
- Simpen dina file sakumaha CSS ku ngaklik File
- Arahkeun ka folder my_website on teuas drive Anjeun
- Ngarobah "Simpen Salaku Tipe:" mun "Kabéh Payil"
- Ngaran berkas anjeun "styles.css" (ninggalkeun off tanda petik) teras klik Simpen
02 10
Ieu numbu ka CSS Style Lambaran ka HTML anjeun
Sakali anjeun saena hiji lambar gaya pikeun situs Wéb, anjeun bakal kedah ngahubungkeun ka kaca Wéb sorangan. Jang ngalampahkeun ieu Anjeun nganggo tag link. Tempat anu tag link di handap mana dina
03 10
Ngalereskeun nu margins Page
Nalika nu nuju nulis XHTML pikeun panyungsi béda, hiji hal anjeun bakal diajar nyaeta aranjeunna sadayana sigana gaduh margins béda jeung aturan pikeun kumaha aranjeunna nembongkeun hal. Cara pangalusna pikeun pastikeun yén situs anjeun Sigana sami di paling panyungsi nyaeta mun teu ngidinan hal kawas margins ka dituna kana pilihan browser.
Kuring resep pikeun ngamimitian kaca kuring di belah kénca juru luhur, kalayan henteu padding tambahan atawa margin sabudeureun téks. Malah lamun Kaula bade Pad eusi, abdi nyetel margins ka enol kitu nu Kuring dimimitian ku sabak kosong sarua. Jang ngalampahkeun ieu, nambahan di handap pikeun dokumen styles.css anjeun:
html, awak {
margin: 0px;
padding: 0px;
wates: 0px;
kénca: 0px;
luhur: 0px;
}
04 10
Ngarobah Font on Page nu
font mangrupa mindeng hal kahiji nu bakal rék ngarobah kana hiji kaca web. The font standar dina kaca Wéb tiasa awon, sarta sabenerna up browser Web sorangan, jadi lamun teu nangtukeun font, Anjeun bener moal terang naon kaca anjeun bakal kasampak kawas.
Ilaharna, anjeun bakal robah font on ayat, atanapi kadang dina sakabéh dokumen sorangan. Pikeun situs ieu kami gé ngartikeun font di header na ayat tingkat. Tambahkeun handap ka dokumen styles.css anjeun:
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;
}
Kuring ngamimitian kalawan 1em sakumaha ukuran dasarna mah ayat na daftar barang, terus dipake nu nangtukeun ukuran pikeun headline abdi. Kuring teu nyangka ngagunakeun judul deeper ti h4, tapi lamun rencana ka anjeun gé hayang gaya eta ogé.
05 10
Nyieun Tumbu anjeun More metot
Warna standar pikeun tumbu anu biru sarta wungu pikeun tumbu unvisited sarta dilongok mungguh. Bari ieu baku, eta bisa jadi teu cocog skéma warna kaca anjeun, sangkan hayu urang ngaganti eta. Dina file styles.css anjeun, nambahan di handap:
a: link {
font-kulawarga: Arial, Helvetica, sans-serif;
Warna: # FF9900;
téks-hiasan: ngagurat di handapna;
}
a: dilongok {
Warna: # FFCC66;
}
a: hover {
latar: #FFFFCC;
font-weight: kandel;
}
Kuring nyetél tilu gaya link, a teh: link salaku standar, hiji: dilongok for nya lamun keur geus dilongok, abdi ngarobah warna, sarta: hover. Ku: hover I gaduh link meunangkeun warna latar jeung buka kandel pikeun ngantebkeun éta tumbu bisa diklik.
06 10
Styling nu Bagéan Napigasi
Kusabab urang nempatkeun navigasi éta (id = "nav") bagian kahiji dina HTML nu, hayu urang gaya heula. Urang kudu nunjukkeun kumaha lega kudu teras nahan margin lega di sisi katuhu supaya téks utama moal nabrak up ngalawan eta. Kuring ogé nempatkeun wates a sabudeureun eta.
Nambah CSS handap ka dokumen styles.css anjeun:
#nav {
lebar: 225px;
margin-katuhu: 15px;
wates: medium solid # 000000;
}
#nav li {
Daptar-gaya: taya;
}
.footer {
font-ukuran: .75em;
jelas: duanana;
lebar: 100%;
téks-align: puseur;
}
Harta daftar-gaya susunan up daftar jero bagian navigasi mun boga pélor atawa nomer, sarta gaya .footer bagian hak cipta janten leutik sarta dipuseurkeun dina bagian anu.
07 10
Positioning anu Bagéan utama
Ku positioning bagian utama Anjeun sareng positioning mutlak bisa pastikeun yén nagara éta bakal tetep persis dimana rék ka cicing dina kaca Wéb Anjeun. Kuring dijadikeun milik 800px lega mun accomodate monitor gedé, tapi lamun boga monitor leutik, Anjeun bisa hayang nyieun nu narrower.
Teundeun handap dina dokumen styles.css anjeun:
#main {
lebar: 800px;
luhur: 0px;
posisi: absolut;
kénca: 250px;
}
08 10
Styling Paragraf anjeun
Kusabab kuring geus geus nyetel font paragraf di luhur, abdi hayang masihan tiap ayat anu saeutik tambahan "tajongan" sangkan eta nangtung kaluar hadé. Ku naon ku putting wates dina luhureun éta disorot ayat leuwih ti ngan gambar nyalira.
Teundeun handap dina dokumen styles.css anjeun:
.topline {
Wates-luhur: kandel solid # FFCC00;
}
Kuring mutuskeun pikeun ngalakukeun hal eta salaku kelas disebut "topline" tinimbang ngan watesan kabeh ayat di jalan éta. cara kieu, upami kuring mutuskeun abdi hoyong gaduh ayat tanpa garis konéng luhur, abdi tiasa saukur ninggalkeun off kelas = "topline" dina tag ayat sarta eta moal boga wates luhur.
09 10
Styling nu Gambar
Gambar ilaharna boga wates sabudeureun éta, ieu téh henteu salawasna katingali iwal gambar kasebut link, tapi kuring resep mun boga kelas hiji dina stylesheet CSS mah pareum wates otomatis. Pikeun stylesheet ieu, kuring nyieun "noborder" kelas, sarta lolobana gambar dina dokumen éta téh bagian tina kelas ieu.
Bagian husus sejenna gambar ieu mangrupa lokasi maranéhanana dina kaca. Kuring hayang aranjeunna janten bagian tina ayat éta di tanpa ngagunakeun tabel kana align aranjeunna. Cara pangbasajanna anu ngalakukeun ieu téh ngagunakeun harta ngambang CSS.
Teundeun handap dina dokumen styles.css anjeun:
#main IMG {
ngambang: kénca;
margin-katuhu: 5px;
margin-handap: 15px;
}
.noborder {
wates: 0px taya;
}
Sakumaha anjeun tiasa tingali, aya ogé margin sipat disetel dina gambar, pikeun mastikeun yén maranéhna teu smashed up ngalawan téks floated anu gigireun aranjeunna dina paragraf.
10 10
Ayeuna Tingali dina Page réngsé anjeun
Sakali anjeun geus disimpen CSS Anjeun bisa ngamuat kaca pets.htm dina browser web Anjeun. Kaca anjeun kudu néangan sarupa hiji ditémbongkeun dina gambar ieu, kalawan gambar Blok jeung navigasi ditempatkeun neuleu di sisi kénca kaca.
Tuturkeun ieu léngkah anu sarua pikeun sakabéh kaca internal Anjeun pikeun loka ieu. Rék boga salah halaman pikeun unggal kaca dina navigasi Anjeun.