Meunang fakta sareng tips ieu
Kabéh panyungsi wéb kaasup naon nyaho sakumaha "gaya defauly". Ieu gaya anu ngarahkeunnana katingal sarta ngarasakeun unsur HTML dina henteuna sagala informasi gaya lianna. Contona, dina ampir unggal browser nu katingal standar tina hyperlinks mangrupakeun warna biru caang kalawan ngagurat di handapna. Ieu kumaha Tumbu maranéhanana kasampak iwal mun ngabejaan aranjeunna pikeun nembongkeun dina cara béda.
gaya browser standar tiasa mantuan, malah dina loba kasus web désainer rék dipiceun gaya ieu ambéh maranéhanana bisa ngamimitian seger kalayan gaya anu sipatna 100% di kadali. Hal ieu dilakukeun nganggo naon anu dipikawanoh salaku "master stylesheet".
A stylesheet master kudu stylesheet munggaran anjeun nyauran dina sakabéh dokumén anjeun. Anjeun ngagunakeun master stylesheet mupus kaluar setélan pangotéktak standar nu bisa ngabalukarkeun masalah dina rarancang Web cross-browser. Sakali anjeun geus diberesihan kaluar ti gaya sareng stylesheet master, desain Anjeun dimimitian ti tempat anu sarua dina sagala panyungsi - kawas kanvas bersih pikeun lukisan.
ingkar global
Master stylesheet Anjeun kudu mimitian ku zeroing kaluar margins, paddings sarta wates dina kaca. Sababaraha panyungsi Web dituna awak dokumen ka 1 atawa 2 piksel indented ti edges jandela browser. Hal ieu ngajadikeun yakin yén maranéhna sagala nembongkeun sami:
html, awak {margin: 0px; padding: 0px; wates: 0px; }Anjeun oge hoyong ngadamel font konsisten. Pastikeun ogé nyetél ukuran font ka 100 persen atawa 1em, supaya kaca anjeun diaksés, tapi ukuranana masih konsisten. Tur pastikeun kaasup garis-jangkungna.
awakna {font: 1em / 1,25 Arial, Helvetica, sans-serif; }headline pormat
Headline atawa lulugu tag (H1, H2, H3, jsb) ilaharna dituna pikeun téks kandel kalawan margins ageung atanapi padding sabudeureun éta. Ku clearing teh beurat, margins na padding, Anjeun mastikeun yén tag ieu masih tetep leuwih gede (atawa leuwih leutik) ti téks sabudeureun éta tanpa ngabogaan gaya tambahan:
h1, H2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-kulawarga: Arial, Helvetica, sans-serif; }Anjeun bisa hoyong mertimbangkeun netepkeun ukuran spésifik, hurup-dipasing na paddings ka tag headline anjeun, tapi nu bener gumantung kana gaya sahiji situs nu nuju ngarancang jeung kudu ditinggalkeun kaluar tina master gaya lambar. Anjeun tiasa nambahkeun leuwih gaya pikeun lulugu ieu salaku diperlukeun pikeun desain husus Anjeun.
Polos téks pormat
Saluareun headline, aya tag téks lianna nu kedah yakin mupus kaluar. Hiji set anu urang mindeng poho nu tag sél tabel (TH na TD) jeung tag formulir (pilih, TEXTAREA na input). Mun anjeun teu diatur pamadegan kana ukuranana sarua salaku awak anjeun na ayat téks, Anjeun bisa jadi unpleasantly reuwas di kumaha panyungsi ngarobah aranjeunna.
p, th, TD, li, DD, DT, ul, ol, blockquote, q, akronim, abbr, a, input, pilih, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1,25 Arial, Helvetica, sans-serif; }Ieu ogé hade ka masihan cutatan anjeun (BLOCKQUOTE sarta Q), acronyms, sarta singkatan hiji gaya tambahan saeutik, ambéh maranéhanana nangtung kaluar saeutik leuwih:
blockquote {margin: 1.25em; padding: 1.25em} q {font-gaya: italic; } Akronim, abbr {kursor: pitulung; Wates-handap: 1px dashed; }Tumbu jeung Gambar
Tumbu nu gampang pikeun ngatur sarta ngarobih ti nu disebut tadi téks underlined biru caang. Kuring resep kana salawasna mibanda tumbu abdi tetep underlined, tapi lamun resep eta cara béda Anjeun tiasa nyetel pilihan ieu nyalira. Kuring ogé teu kaasup kelir dina master gaya lambar, sabab éta gumantung rarancang.
a, a: link, a: dilongok, a: aktip, a: hover {téks-hiasan: ngagurat di handapna; }Kalawan gambar, éta penting pikeun mareuman wates. Bari paling panyungsi teu nembongkeun wates a sabudeureun hiji gambar polos, nalika gambar ieu numbu, anu panyungsi Ngahurungkeun wates. Pikeun ngalereskeun ieu:
IMG {wates: taya; }Tables
Bari tabel anu henteu panjang dipaké pikeun tujuan perenah, situs anjeun bisa kénéh ngagunakeun éta pikeun data tabluar sabenerna. Ieu pamakéan denda tabel HTML. Simkuring geus geus dijieun yakin yen ukuran téks standar nyaéta sami pikeun sél méja anjeun, tapi aya sababaraha gaya séjénna Anjeun kudu ngeset ambéh tabel anjeun cicing sami:
méja {margin: 0; padding: 0; wates: taya; }Bentuk
Kawas nu mibanda elemen séjén, Anjeun kedah mupus kaluar margins na paddings sabudeureun bentuk Anjeun. Lain hal kuring resep mun geus nulis balik tag formulir salaku " inline " sedemikian rupa sehingga teu nambahkeun spasi tambahan dimana anjeun nempatkeun tag dina kode teh. Salaku nu mibanda elemen téks lianna, abdi ngartikeun informasi font pikeun milih, textarea na input nepi luhur, supaya éta sarua jeung sesa téks abdi.
formulir {margin: 0; padding: 0; tampilan: inline; }Ieu ogé mangrupakeun ide nu sae pikeun ngarobah kursor pikeun labél Anjeun. Ieu ngabantuan jalma ningali yén labél bakal ngalakukeun hiji hal nalika aranjeunna klik éta.
labél {kursor: pointer; }kelas umum
Pikeun ieu bagian tina master stylesheet, Anjeun kudu nangtukeun kelas anu make akal pikiran ka anjeun. Ieu sababaraha kelas I make paling sering. Catet yén maranéhna teu disetel ka sagala unsur nu tangtu, sangkan anjeun bisa napelkeun aranjeunna keur naon nu peryogi:
.clear {jelas: duanana; } .floatLeft {ngambang: ditinggalkeun; } .floatRight {ngambang: katuhu; } .textLeft {téks-align: ditinggalkeun; } .textRight {téks-align: katuhu; } .textCenter {téks-align: puseur; } .textJustify {téks-align: menerkeun; } .blockCenter {tampilan: block; margin-kénca: otomatis; margin-katuhu: otomatis; } / * Apal pikeun ngeset lebar * / .bold {font-weight: kandel; } .italic {font-gaya: italic; } .underline {téks-hiasan: ngagurat di handapna; } .noindent {margin-kénca: 0; padding-kénca: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {Daptar-gaya: taya; Daptar-gaya-gambar: taya; }Inget yen kusabab kelas ieu ditulis méméh sagala gaya nu sejen tur aranjeunna ngan kelas sipatna gampang override mibanda sipat gaya leuwih husus anu lumangsung engké di cascade . Lamun manggihan nu nangtukeun hiji kelas biasa dina unsur jeung teu mawa pangaruh, Anjeun kedah parios pikeun mastikeun yén aya moal sababaraha gaya séjénna di salah sahiji stylesheets anjeun engké mangaruhan yén unsur nu sarua.
Sakabéh Master Stylesheet
/ * Global ingkar * / html, awak {margin: 0px; padding: 0px; wates: 0px; } Awakna {font: 1em / 1,25 Arial, Helvetica, sans-serif; } / * Headline * / h1, H2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-kulawarga: Arial, Helvetica, sans-serif; } / * Téks Styles * / p, th, TD, li, DD, DT, ul, ol, blockquote, q, akronim, abbr, a, input, pilih, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1,25 Arial, Helvetica, sans-serif; } Blockquote {margin: 1.25em; padding: 1.25em} q {font-gaya: italic; } Akronim, abbr {kursor: pitulung; Wates-handap: 1px dashed; } Leutik {font-ukuran: .85em; } Badag {font-ukuran: 1.2em; } / * Tumbu na Gambar * / a, a: link, a: dilongok, a: aktip, a: hover {téks-hiasan: ngagurat di handapna; } IMG {wates: taya; } / * Tables * / tabel {margin: 0; padding: 0; wates: taya; } / * Bentukna * / formulir {margin: 0; padding: 0; tampilan: inline; } Labél {kursor: pointer; } / * Umum kelas * / .clear {jelas: duanana; } .floatLeft {ngambang: ditinggalkeun; } .floatRight {ngambang: katuhu; } .textLeft {téks-align: ditinggalkeun; } .textRight {téks-align: katuhu; } .textCenter {téks-align: puseur; } .textJustify {téks-align: menerkeun; } .blockCenter {tampilan: block; margin-kénca: otomatis; margin-katuhu: otomatis; } / * Apal pikeun ngeset lebar * / .bold {font-weight: kandel; } .italic {font-gaya: italic; } .underline {téks-hiasan: ngagurat di handapna; } .noindent {margin-kénca: 0; padding-kénca: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {Daptar-gaya: taya; Daptar-gaya-gambar: taya; }Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 10/6/17