Bu ipuçlarıyla gerçekleri öğrenin
Tüm web tarayıcıları "varsayılan olarak stilleri" olarak bilinenleri içerir. Bunlar, başka herhangi bir stil bilgisinin yokluğunda HTML öğelerinin görünümünü ve hissini dikte eden stillerdir. Örneğin, neredeyse her tarayıcıda varsayılan köprüler görünümü, bir alt çizgi ile parlak mavi bir renktir. Onlara farklı bir şekilde göstermelerini söylemediğiniz sürece, bu bağlantılar nasıl görünür.
Varsayılan tarayıcı stilleri yardımcı olabilir, ancak çoğu durumda web tasarımcıları bu stilleri kaldırmak isterler, böylece% 100 kontrol altında oldukları stilleri ile taze başlayabilirler. Bu, "ana stil sayfası" olarak bilinen şeyin kullanılmasıyla yapılır.
Bir ana stil sayfası, tüm belgelerinizde aradığınız ilk stil sayfası olmalıdır. Çapraz tarayıcı Web tasarımında sorunlara neden olabilecek varsayılan tarayıcı ayarlarını temizlemek için bir ana stil sayfası kullanırsınız. Stilleri bir ana stil sayfasıyla temizledikten sonra, tasarımınız tüm tarayıcılarda aynı yerde başlar - resim için temiz bir tuval gibi.
Küresel Varsayılanlar
Ana stil sayfanız, sayfadaki kenar boşluklarını, dolguları ve kenarlıkları sıfırlayarak başlamalıdır. Bazı Web tarayıcıları, belgenin gövdesini tarayıcı bölmesi kenarlarından çıkarılan 1 veya 2 piksele varsayılanlar. Bu, hepsinin aynı görüntülendiğinden emin olur:
html, vücut {marjı: 0px; dolgu malzemesi: 0px; kenarlık: 0px; }Ayrıca yazı tipini tutarlı hale getirmek istersiniz. Yazı tipi boyutunu yüzde 100 veya 1em olarak ayarladığınızdan emin olun, böylece sayfanıza erişilebilir, ancak boyut hala tutarlı. Ve çizgi yüksekliğini eklediğinizden emin olun.
vücut {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Başlık Biçimlendirme
Başlık veya başlık etiketleri (H1, H2, H3, vb.), Genellikle büyük kenar boşlukları veya çevrelerindeki dolgularla kalın metinleri varsayılan olarak alır. Ağırlığı, kenar boşluklarını ve dolguyu temizleyerek, bu etiketlerin etrafındaki metinden fazla stil içermeden daha büyük (veya daha küçük) kalmasını sağlarsınız:
h1, h2, h3, h4, h5, h6 {kenar: 0; dolgu malzemesi: 0; yazı tipi ağırlığı: normal; yazı tipi ailesi: Arial, Helvetica, sans-serif; }Başlık etiketlerinize belirli boyutlar, harf aralığı ve dolgu eklemeyi düşünebilirsiniz, ancak bu gerçekten tasarladığınız sitenin stiline bağlıdır ve ana stil sayfasından çıkarılmalıdır. Bu başlıklar için özel tasarımınız için gereken daha fazla stil ekleyebilirsiniz.
Düz Metin Biçimlendirme
Başlıkların ötesinde, temizlediğinizden emin olmanız gereken başka metin etiketleri de vardır. İnsanların çoğu zaman unutduğu bir set, masa hücresi etiketleri (TH ve TD) ve form etiketleri (SELECT, TEXTAREA ve INPUT). Bunları bedeniniz ve paragraf metninizle aynı boyuta getirmezseniz, tarayıcıların bunları nasıl işlediğine şaşırmayın.
p, th, td, li, dd, dt, ol, blockquote, q, kısaltma, abbr, giriş, select, textarea, {margin: 0; dolgu malzemesi: 0; yazı tipi: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Ayrıca teklifleri (BLOCKQUOTE ve Q), kısaltmalar ve kısaltmalar biraz ekstra stil vermek için güzel, böylece biraz daha fazla dikkat çekiyor:
blockquote {margin: 1.25em; doldurma: 1.25em} q {font-style: italic; kısaltma, abbr {imleç: yardım; kenar-alt: 1px kesik; }Linkler ve Görüntüler
Bağlantılar, yukarıda bahsedilen parlak mavi altı çizili metinden yönetmek ve değiştirmek kolaydır. Her zaman bağlantılarımın altı çizilmeyi tercih ederim, ancak tercih ederseniz farklı bir şekilde bu seçenekleri ayarlayabilirsiniz. Ayrıca ana stil sayfasına renk eklemiyorum, çünkü bu tasarıma bağlı.
a, a: link, a: ziyaret edilen, a: aktif, a: vurgulu {text-decoration: underline; }Resimlerle sınırları kapatmak önemlidir. Çoğu tarayıcılar düz bir görüntünün etrafında bir kenarlık göstermezken, resim bağlandığında tarayıcılar kenarlığı açar. Bunu düzeltmek için:
img {border: none; }Tablolar
Tablolar artık mizanpaj amacıyla kullanılmasa da, site bunları gerçek tablo verileri için kullanmaya devam edebilir. Bu, HTML tablolarının iyi bir kullanımıdır. Varsayılan metin boyutunun tablo hücreleriniz için aynı olduğundan emin olduk. Ancak, tablolarınızın aynı kalması için ayarlamanız gereken birkaç başka stil var:
tablo {marjı: 0; dolgu malzemesi: 0; kenarlık: yok; }Formlar
Diğer öğelerle olduğu gibi, formlarınızdaki kenar boşluklarını ve dolguları temizlemelisiniz. Yapmayı sevdiğim başka bir şey, form etiketini " inline " olarak yeniden yazmanız, böylece etiketi kod içine yerleştirdiğinizde fazladan boşluk eklememesidir. Diğer metin öğelerinde olduğu gibi, seçim, tekstüre ve yukarıdan giriş için yazı tipi bilgilerini tanımlarım, böylece metnin geri kalanıyla aynı olur.
form {margin: 0; dolgu malzemesi: 0; ekran: satır içi; }İmleç etiketleriniz için değiştirmek de iyi bir fikirdir. Bu, kullanıcıların, etiketin tıkladıklarında bir şey yapmasını sağlamasına yardımcı olur.
etiket {imleç: işaretçi; }Ortak Sınıflar
Ana stil sayfasının bu kısmı için, size mantıklı sınıflar tanımlamalısınız. Bunlar en çok kullandığım sınıflardan bazıları. Belirli bir öğeye ayarlanmadıklarını unutmayın, böylece ihtiyacınız olan her şeye atayabilirsiniz:
.clear {clear: ikisi de; } .floatLeft {float: left; } .floatRight {float: sağ; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; kenar boşluğu: otomatik; kenar boşluğu: otomatik; } / * genişlik ayarlamayı unutmayın * / .bold {font-weight: bold; .italic {font-style: italic; .underline {text-decoration: underline; } .noindent {margin-left: 0; dolgu-sol: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; liste tarzı resim: yok; }Unutmayın ki bu sınıflar başka stillerden önce yazıldığından ve sadece sınıflar olduklarından, daha sonra kaskadda ortaya çıkan daha özel stil özellikleriyle geçersiz kılmaları kolaydır. Bir öğe üzerinde ortak bir sınıf ayarladığınızı ve bunun geçerli olmadığını fark ederseniz, aynı öğe üzerinde etki eden sonraki stil sayfalarınızda başka bir stil olmadığından emin olmanız gerekir.
Tüm Master Stil Sayfası
/ * Küresel Varsayılanlar * / html, body {margin: 0px; dolgu malzemesi: 0px; kenarlık: 0px; vücut {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Başlıklar * / h1, h2, h3, h4, h5, h6 {margin: 0; dolgu malzemesi: 0; yazı tipi ağırlığı: normal; yazı tipi ailesi: Arial, Helvetica, sans-serif; } / * Metin Stilleri * / p, th, td, li, dd, dt, ul, ol, blockquote, q, kısaltma, abbr, a, giriş, select, textarea {margin: 0; dolgu malzemesi: 0; yazı tipi: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {marj: 1.25em; doldurma: 1.25em} q {font-style: italic; kısaltma, abbr {imleç: yardım; kenar-alt: 1px kesik; küçük {font-size: .85em; büyük {font-size: 1.2em; } / * Linkler ve Görüntüler * / a, a: link, a: ziyaret edilen, a: aktif, a: vurgulu {text-decoration: underline; } img {kenarlık: yok; } / * Tablolar * / tablo {margin: 0; dolgu malzemesi: 0; kenarlık: yok; } / * Formlar * / form {margin: 0; dolgu malzemesi: 0; ekran: satır içi; } label {imleç: işaretçi; } / * Ortak Sınıflar * / .clear {temiz: her ikisi; } .floatLeft {float: left; } .floatRight {float: sağ; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; kenar boşluğu: otomatik; kenar boşluğu: otomatik; } / * genişlik ayarlamayı unutmayın * / .bold {font-weight: bold; .italic {font-style: italic; .underline {text-decoration: underline; } .noindent {margin-left: 0; dolgu-sol: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; liste tarzı resim: yok; }Jennifer Krynin tarafından yazılmış orijinal makale. 10/6/17 tarihinde Jeremy Girard tarafından düzenlenmiştir