Sen ne zaman sıfırdan bir web sitesi kurmak, tanımlanan temel stiller ile başlamak akıllıca olur. Temiz bir tuval ve taze fırçalarla başlamak gibi. Web tasarımcılarının karşılaştığı ilk sorunlardan biri, internet tarayıcıları hepsi farklı. Varsayılan yazı tipi boyutu platformdan platforma farklıdır, varsayılan yazı tipi ailesi farklıdır, bazı tarayıcılar gövde etiketinde kenar boşlukları ve dolgu tanımlarken diğerleri tanımlamaz, vb. Web sayfalarınız için varsayılan stilleri tanımlayarak bu tutarsızlıkları giderin.
CSS ve Karakter Kümesi
İlk önce, CSS belgelerinizin karakter setini şu şekilde ayarlayın: utf-8. Tasarladığınız sayfaların çoğunun İngilizce yazılmış olması muhtemel olsa da, bazıları yerelleştirilebilir—farklı dilsel ve kültürel bağlamlara uyarlanmış olabilir. Olduklarında, utf-8 süreci basitleştirir. Karakter setinin ayarlanması harici stil sayfası bir şeye göre öncelikli olmayacak HTTP başlık, ancak diğer tüm durumlarda, olacaktır.
Karakter setini ayarlamak kolaydır. CSS belgesinin ilk satırı için şunu yazın:
@karakter kümesi "utf-8";
Bu şekilde, içerik özelliğinde uluslararası karakterler kullanıyorsanız veya sınıf ve kimlik adları, stil sayfası yine de düzgün çalışacaktır.
Sayfa Gövdesini Şekillendirme
Varsayılan bir stil sayfasının ihtiyaç duyduğu bir sonraki şey, kenar boşluklarını, dolguyu ve sınırları sıfırlayın. Bu, tüm tarayıcıların içeriği aynı yere yerleştirmesini ve tarayıcı ile içerik arasında herhangi bir gizli boşluk olmamasını sağlar. Çoğu web sayfası için bu, metin için kenara çok yakındır, ancak arka plan resimlerinin ve yerleşim bölümlerinin doğru şekilde sıralanması için oradan başlamak önemlidir.
html, gövde {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
sınır: 0 piksel;
}
Varsayılan ön plan veya yazı tipi rengini siyah ve varsayılan arka plan rengini beyaz olarak ayarlayın. Bu, çoğu web sayfası tasarımı için büyük olasılıkla değişecek olsa da, gövdede bu standart renklerin ayarlanması ve HTML etiketi başta sayfanın okunmasını ve üzerinde çalışılmasını kolaylaştırır.
html, gövde {
renk: #000;
arka plan: #fff;
}
Varsayılan Yazı Tipi Stilleri
Yazı tipi boyutu ve yazı tipi ailesi, tasarım tutulduğunda kaçınılmaz olarak değişecek, ancak varsayılan yazı tipi boyutu 1 ile başlayacak bir şeydir. em ve bir varsayılan font ailesi Arial, Cenevre veya başka bir sans-serif yazı tipi. ems kullanımı sayfayı mümkün olduğunca erişilebilir tutar ve sans-serif yazı tipi ekranda daha okunaklı olur.
html, gövde, p, th, td, li, dd, dt {
yazı tipi: 1em Arial, Helvetica, sans-serif;
}
Metin bulabileceğiniz başka yerler olabilir, ancak p, inci, td, li, dd, ve dt temel yazı tipini tanımlamak için iyi bir başlangıçtır. Dahil etmek HTML ve vücut her ihtimale karşı, ancak birçok tarayıcı geçersiz kılar yazı tipi seçenekleri yazı tiplerinizi yalnızca HTML veya gövde için tanımlarsanız.
Başlıklar
HTML başlıkları sitenizin ana hatlarını belirlemeye yardımcı olmak ve arama motorlarının sitenizde daha derine inmesine izin vermek için kullanılması önemlidir. Stiller olmadan hepsi oldukça çirkindir, bu nedenle hepsinde varsayılan stiller ayarlayın ve her biri için yazı tipi ailesini ve yazı tipi boyutlarını tanımlayın.
h1, h2, h3, h4, h5, h6 {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
}
h1 { yazı tipi boyutu: 2em; }
h2 { yazı tipi boyutu: 1.5em; }
h3 { yazı tipi boyutu: 1.2em; }
h4 { yazı tipi boyutu: 1.0em; }
h5 { yazı tipi boyutu: 0.9em; }
h6 { yazı tipi boyutu: 0.8em; }
Linkleri Unutmayın
Bağlantı renklerini şekillendirmek neredeyse her zaman tasarımın kritik bir parçasıdır, ancak bunları varsayılan stillerde tanımlamazsanız, sözde sınıflardan en az birini unutabilirsiniz. Bunları mavi üzerinde küçük bir değişiklikle tanımlayın ve ardından site için renk paletini tanımladıktan sonra değiştirin.
ayarlamak için bağlantılar mavi tonlarında ayarlayın:
- bağlantılar mavi olarak
- ziyaret edilen bağlantılar koyu mavi olarak
- vurgulu bağlantılar açık mavi olarak
- aktif bağlantılar daha da soluk mavi olarak
Bu örnekte gösterildiği gibi:
a: bağlantı { renk: #00f; }
a: ziyaret edildi { renk: #009; }
a: üzerine gelin { renk: #06f; }
a: aktif { renk: #0cf; }
Bağlantıları oldukça zararsız bir renk şemasıyla şekillendirerek, sınıfların hiçbirini unutmamanızı sağlar ve ayrıca onları varsayılan mavi, kırmızı ve mordan biraz daha az gürültülü yapar.
Tam Stil Sayfası
İşte tam stil sayfası:
@karakter kümesi "utf-8";
html, gövde {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
sınır: 0 piksel;
renk: #000;
arka plan: #fff;
}
html, gövde, p, th, td, li, dd, dt {
yazı tipi: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
}
h1 { yazı tipi boyutu: 2em; }
h2 { yazı tipi boyutu: 1.5em; }
h3 { yazı tipi boyutu: 1.2em; }
h4 { yazı tipi boyutu: 1.0em; }
h5 { yazı tipi boyutu: 0.9em; }
h6 { yazı tipi boyutu: 0.8em; }
a: bağlantı { renk: #00f; }
a: ziyaret edildi { renk: #009; }
a: üzerine gelin { renk: #06f; }
a: aktif { renk: #0cf; }