Örnek Stil Sayfası ile Basamaklı Stil Sayfalarına Genel Bakış
Sıfırdan bir web sitesi oluşturduğunuzda, tanımlanmış temel stillerle 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, web tarayıcılarının hepsinin farklı olmasıdır. Varsayılan yazı tipi boyutu, platformdan platforma farklıdır, varsayılan yazı tipi ailesi farklıdır, bazı tarayıcılar ise, diğerlerinin yapmadığı gibi, gövde etiketinde kenar boşlukları ve dolgu malzemesi tanımlar. Web sayfalarınız için varsayılan stilleri tanımlayarak bu tutarsızlıkları ortadan kaldırın.
CSS ve Karakter Seti
İlk önce, CSS belgelerinizin karakter kümesini utf-8 olarak ayarlayın . Tasarım yaptığınız sayfaların çoğu İngilizce yazılmış olsa da, bazıları farklı diller ve kültürel bağlamlar için uyarlanmış yerelleştirilebilir. Ne zaman, utf-8 süreci basitleştirir. Harici stil sayfasındaki karakter kümesini ayarlamak, bir HTTP üstbilgisine göre öncelikli olmayacaktır, ancak diğer tüm durumlarda, olacaktır.
Karakter setini ayarlamak çok kolay. CSS belgesinin ilk satırı için:
@charset "utf-8";Bu şekilde, içerik özelliğinde veya sınıf ve kimlik adları olarak uluslararası karakterler kullanırsanız stil sayfası yine de doğru şekilde çalışır.
Sayfa Gövdesini Şekillendirmek
Varsayılan stil sayfası gereksiniminin sonraki özelliği, kenar boşluklarını, dolguyu ve kenarlıkları sıfırlama stilleridir. Bu, tüm tarayıcıların içeriği aynı yere yerleştirdiğinden ve tarayıcı ile içerik arasında herhangi bir gizli alan olmadığından emin olur. Çoğu web sayfası için bu, metnin kenarına çok yakındır, ancak arka plan görüntüleri ve düzen bölümleri doğru şekilde dizilmiş olacak şekilde orada başlamak önemlidir.
html, vücut {marjı: 0px; dolgu malzemesi: 0px; kenarlık: 0px; }Varsayılan ön plan veya yazı tipi rengini siyah olarak ve varsayılan arka plan rengini beyaz olarak ayarlayın. Bu, çoğu web sayfası tasarımında büyük olasılıkla değişecek olsa da, ilk önce vücutta ayarlanan standart renklere ve HTML etiketine sahip olmak, sayfayı daha kolay okumayı ve birlikte çalışmayı sağlar.
html, vücut {renk: # 000; arkaplan: #fff; }Varsayılan Yazı Tipi Stilleri
Yazı tipi boyutu ve yazı tipi ailesi, tasarım bekledikten sonra kaçınılmaz olarak değişecek bir şeydir, ancak varsayılan yazı boyutu olan 1 em ve Arial, Geneva ya da başka bir sans-serif yazı tipi varsayılan yazı tipi ailesiyle başlar. Em'lerin kullanımı, sayfayı olabildiğince erişilebilir tutar ve ekranda bir sans-serif yazı tipi daha okunaklı olur.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Metin bulabileceğiniz başka yerler olabilir, ancak p , th , td , li , dd ve dt , temel yazı tipini tanımlamak için iyi bir başlangıçtır. Her durumda HTML ve gövdeyi dahil edin, ancak yazı tiplerini yalnızca HTML veya gövde için tanımladığınızda yazı tipi tercihlerini geçersiz kılar.
haber başlıkları
HTML başlıklarının sitenizin ana hatlarını belirlemesine yardımcı olmak ve arama motorlarının sitenize daha derin girmesine izin vermek önemlidir. Stilleri olmadan, hepsi oldukça çirkin, bu yüzden hepsinde varsayılan stilleri ayarlayın ve her biri için yazı tipi ailesini ve yazı tipi boyutlarını tanımlayın.
h1, h2, h3, h4, h5, h6 {font ailesi: Arial, Helvetica, sans-serif; h1 {font-size: 2em; h2 {font-size: 1.5em; h3 {font-size: 1.2em; h4 {font-size: 1.0em; h5 {font-size: 0.9em; h6 {font-size: 0.8em; }Linkleri Unutmayın
Link renklerini tasarlamak neredeyse her zaman tasarımın kritik bir parçasıdır, ancak bunları varsayılan stiller içinde tanımlamazsanız, olasılıkla sözde sınıflardan en az birini unutursunuz. Onları mavi üzerinde küçük bir varyasyonla tanımlayın ve sonra tanımlanmış site için renk paletine sahip olduktan sonra değiştirin.
Bağlantıları mavinin tonlarında ayarlamak için ayarlayın:
- mavi olarak bağlantılar
- bağlantıları koyu mavi olarak ziyaret etti
- hover bağlantıları açık mavi
- hatta paler mavisi gibi aktif bağlantılar
bu örnekte gösterildiği gibi:
a: link {color: # 00f; } a: ziyaret edilen {renk: # 009; } a: vurgulu {renk: # 06f; } a: etkin {color: # 0cf; } Linkleri oldukça zararsız bir renk şemasıyla şekillendirerek, sınıfların hiçbirini unutmamayı ve aynı zamanda mavi, kırmızı ve mordan daha az gürültülü olmasını sağlar.Tam Stil Sayfası
İşte tam stil sayfası:
@charset "utf-8"; html, vücut {marjı: 0px; dolgu malzemesi: 0px; kenarlık: 0px; renk: # 000; arkaplan: #fff; html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; h1, h2, h3, h4, h5, h6 {font-aile: Arial, Helvetica, sans-serif; h1 {font-size: 2em; h2 {font-size: 1.5em; h3 {font-size: 1.2em; h4 {font-size: 1.0em; h5 {font-size: 0.9em; h6 {font-size: 0.8em; } a: link {color: # 00f; } a: ziyaret edilen {renk: # 009; } a: vurgulu {renk: # 06f; } a: etkin {color: # 0cf; }