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 setini UTF-8 . 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. 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 { kenar boşluğu: 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; } 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 1em 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, vücut, p, th, td, li, dd, dt { yazı tipi: 1em Arial, Helvetica, sans-serif; }
Metni bulabileceğiniz başka yerler olabilir, ancak p , inci , td , li , gg , ve dt Temel yazı tipini tanımlamak için iyi bir başlangıç. Dahil etmek HTML ve vücut Sadece durumda, ancak sadece yazı tiplerini HTML veya gövde için tanımlarsanız, birçok tarayıcı yazı tipi seçimlerini geçersiz kılar. 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 { yazı tipi ailesi: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-boyutu: 1.2em; } h4 {font-boyutu: 1.0em; } h5 {font-size: 0.9em; } h6 {font-boyutu: 0.8em; } 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: bu örnekte gösterildiği gibi: a: link {color: # 00f; }a: ziyaret edilen {color: # 009; }a: hover {color: # 06f; }a: aktif {color: # 0cf; }
Bağlantıları oldukça zararsız bir renk şemasıyla şekillendirerek, sınıflardan herhangi birini unutamayacağınızı ve bunları da varsayılan mavi, kırmızı ve mordan biraz daha az gürültülü hale getirmenizi sağlar. İşte tam stil sayfası: @charset "utf-8"; html, vücut { kenar boşluğu: 0px; dolgu malzemesi: 0px; kenarlık: 0px; renk: # 000; arkaplan: #fff; } html, vücut, 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 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-boyutu: 1.2em; } h4 {font-boyutu: 1.0em; } h5 {font-size: 0.9em; } h6 {font-boyutu: 0.8em; } a: link {color: # 00f; } a: ziyaret edilen {color: # 009; } a: hover {color: # 06f; } a: aktif {color: # 0cf; } Sayfa Gövdesini Şekillendirmek
Varsayılan Yazı Tipi Stilleri
haber başlıkları
Linkleri Unutma
Tam Stil Sayfası
