Njaluk bukti nganggo tips iki
Kabeh browser web kalebu apa sing dikepengini minangka "gaya sithik." Iki gaya sing ndadékaké deleng lan aran unsur HTML tanpa anané informasi gaya liya. Contone, ing saklawasé saben browser tampilan standar hyperlinks minangka werna biru padhang karo garis bawah. Iki carane pranala sing katon yen sampeyan ngomong kanggo nampilake kanthi cara sing beda.
Gaya browser standar bisa mbiyantu, nanging ing pirang-pirang kasus, perancang web pengin ngilangi gaya kasebut supaya bisa mulai seger karo gaya sing 100% dikontrol. Iki rampung nggunakake sing dikenal minangka "stylesheet master".
Gaya gaya tulis kudu dadi stylesheet pisanan sing sampeyan gunakake ing kabeh dokumen sampeyan. Sampeyan nggunakake stylesheet master kanggo mbusak setelan browser gawan sing bisa nimbulaké masalah ing desain Web lintas browser. Sawise sampeyan ngilangi gaya nganggo gaya master, rancangan sampeyan wiwit saka panggonan sing padha ing kabeh browser - kaya kanvas sing resik kanggo lukisan.
Default global
Gaya gaya tulis sampeyan kudu diwiwiti kanthi ora nyilikake pinggiran, padding lan wates ing kaca. Sawetara panyayup Web mbusak awak dokumen kasebut kanthi 1 utawa 2 piksel sing ora dikawruhi saka sisi panel browser. Iki nggawe manawa kabeh padha nampilake sing padha:
html, body {margin: 0px; padding: 0px; wates: 0px; }Sampeyan uga pengin nggawe font konsisten. Dadi manawa uga nyetel ukuran font dadi 100 persen utawa 1em, supaya kaca sampeyan bisa diakses, nanging ukurane tetep konsisten. Lan manawa sampeyan kalebu dhuwur baris.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formatting Headline
Headline utawa header tags (H1, H2, H3, lan liya-liyane) biasane ditrapake kanggo teks kandel kanthi pinggul gedhe utawa padding watara mau. Kanthi ngresiki bobot, pinggiran lan padding, sampeyan mesthekake yen tandha-tandha iki isih tetep luwih gedhe (utawa luwih cilik) tinimbang teks ing saubengé tanpa gaya ekstra:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Sampeyan bisa uga pengin nimbang nyetel ukuran tartamtu, huruf-jarak lan paddings menyang tag utama, nanging sing bener-bener gumantung ing gaya situs sing sampeyan ngrancang lan kudu ditinggalake metu saka master sheet gaya. Sampeyan bisa nambah gaya luwih kanggo judhul iki kaya sing dibutuhake kanggo desain tartamtu.
Formatting Text Plain
Nglarani warta utama, ana tag teks liyane sing kudu ditrapake. Salah sijine wong sing kerep lali yaiku tag sel meja (TH lan TD) lan mbentuk tag (PILIH, TEXTAREA lan INPUT). Yen sampeyan ora nemtokake ukuran sing padha karo teks lan paragraf sampeyan, sampeyan bisa uga ora kaget amarga browser nampilake.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Iku uga becik kanggo menehi kutipan (BLOCKQUOTE lan Q), akronim, lan singkatan gaya ekstra sethitik, supaya padha metu luwih cilik:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; }Pranala lan Gambar
Tautan gampang ngatur lan ngganti saka teks sing digaris bawahi biru terang kasebut. Aku luwih seneng supaya pranala-pranalaku tetep digatekake, nanging yen sampeyan seneng karo cara sing beda, sampeyan bisa nyetel pilihan iki kanthi kapisah. Aku uga ora kalebu werna ing sheet gaya master, amarga gumantung marang desain.
a, a: link, a: dibukak, a: aktif, a: hover {text-decoration: underline; }Kanthi gambar, iku penting kanggo mateni wates kasebut. Nalika sapérangan panyedhiya browser ora nampilaké wates ing sawijining gambar kosong, nalika gambar disambung, browser bakal ngowahi wates kasebut. Kanggo ndandani iki:
img {border: none; }Tabel
Nalika tabel ora digunakake kanggo tujuan tata letak, situs sampeyan isih bisa digunakake kanggo data tabluar. Iki minangka nggunakake tabel HTML sing apik. Kita wis nggawe manawa ukuran teks standar padha kanggo sel tabel, nanging ana sawetara gaya liyane sing kudu disetel supaya tabel sampeyan tetep padha:
tabel {margin: 0; padding: 0; wates: ora; }Bentuke
Kaya karo unsur liyane, sampeyan kudu mbusak pinggiran lan paddle ing formulir. Perkara liyane sing aku karepake yaiku nulis ulang tag mbentuk minangka " inline " supaya ora nambah spasi ekstra ing ngendi sampeyan nemtokake tag ing kode kasebut. Minangka karo unsur teks liyane, aku nemtokake informasi font kanggo pilih, textarea lan input munggah ing ndhuwur, supaya padha karo sisa teksku.
wangun {margin: 0; padding: 0; tampilan: inline; }Iku uga apik kanggo ngganti kursor kanggo label sampeyan. Iki mbantu wong ndeleng label kasebut bakal nindakake apa-apa nalika lagi ngeklik.
label {kursor: pointer; }Kelas umum
Kanggo bagean saka stylesheet master, sampeyan kudu nemtokake kelas sing nggawe raos kanggo sampeyan. Iki minangka salah sawijining kelas sing paling kerep digunakake. Elinga yen ora disetel menyang sembarang elemen tartamtu, supaya sampeyan bisa nemtokake apa wae sing perlu:
.clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: otomatis; } / * éling kanggo nyetel width * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; daftar-gaya-gambar: none; }Elinga yen amarga kelas-kelas iki ditulis sadurunge gaya liyane lan mung kelas, gampang ditindakake karo sifat gaya sing luwih spesifik sing kedadeyan ing kaskade . Yen sampeyan nemtokake manawa sampeyan nemtokake kelas umum sajrone unsur lan ora dianggep, sampeyan kudu mriksa manawa ora ana gaya liya ing salah siji saka stylesheets sampeyan mengaruhi unsur sing padha.
Ing Entire Master Stylesheet
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; wates: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Teks Gaya * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, 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-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; } small {font-size: .85em; } big {font-size: 1.2em; } / * Tautan lan Gambar * / a, a: link, sing: dibukak, sing: aktif, sing: hover {text-decoration: underline; } img {border: none; } / * Tables * / table {margin: 0; padding: 0; wates: ora; } / * Forms * / form {margin: 0; padding: 0; tampilan: inline; } label {kursor: pointer; } / * Kelas umum * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: otomatis; } / * éling kanggo nyetel width * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; daftar-gaya-gambar: none; }Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 10/6/17