Skip to content

Bu CSS Hile Sayfası ile Basamaklı Stil Sayfalarını Tanıyın

12 de Mayıs de 2021

Sıfırdan bir web sitesi oluşturduğunuzda, tanımlanan temel stillerle başlamak akıllıca olacaktır. 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 gövde etiketinde kenar boşluklarını ve dolguyu tanımlarken diğerleri tanımaz ve bu böyle devam eder. Web sayfalarınız için varsayılan stilleri tanımlayarak bu tutarsızlıkların üstesinden gelin.

CSS ve Karakter Seti

Öncelikle, CSS belgelerinizin karakter setini şu şekilde ayarlayın: utf-8. Tasarladığınız sayfaların çoğu büyük olasılıkla İngilizce yazılmış olsa da, bazıları yerelleştirilebilir – farklı dilbilimsel ve kültürel bağlamlar için uyarlanmış olabilir. Uf-8 olduklarında işlemi basitleştirir. Harici stil sayfasında karakter kümesinin ayarlanması bir HTTP başlığına göre öncelikli olmayacaktır, ancak diğer tüm durumlarda, olacaktır. Karakter setini ayarlamak kolaydır. CSS belgesinin ilk satırı için şunu yazın: @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 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ırlayan stillerdir. Bu, tüm tarayıcıların içeriği aynı yere yerleştirmesini ve tarayıcı ile içerik arasında gizli boşluk kalmamasını sağlar. Çoğu web sayfası için bu, metin için çok yakındır, ancak arka plan görüntülerinin ve düzen bölümlerinin doğru şekilde sıralanması için buradan başlamak önemlidir. html, body {
kenar boşluğu: 0px;
dolgu: 0px;
sınır: 0px;
}

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, bu standart renklerin ilk başta gövde ve HTML etiketinde ayarlanması, sayfanın okunmasını ve çalışılmasını kolaylaştırır. html, body {
renk: # 000;
arkaplan: #fff;
}

Varsayılan Yazı Tipi Stilleri

Yazı tipi boyutu ve yazı tipi ailesi, tasarım tutulduktan sonra kaçınılmaz olarak değişecek, ancak varsayılan yazı tipi boyutu 1 em ve varsayılan yazı tipi ailesi Arial, Cenevre veya başka bir sans-serif yazı tipiyle başlayacak bir şeydir. Ems kullanımı, sayfayı olabildiğince erişilebilir tutar ve bir sans-serif yazı tipi ekranda daha okunaklı hale gelir. html, body, p, th, td, li, dd, dt {
yazı tipi: 1em Arial, Helvetica, sans-serif;
}

class = “ql-syntax”> Metin bulabileceğiniz başka yerler de olabilir, ancak p, inci, td, li, gg, 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 yazı tiplerinizi yalnızca HTML veya gövde için tanımlarsanız, birçok tarayıcı yazı tipi seçimlerini geçersiz kılar.

Başlıklar

HTML başlıklarının, sitenizin ana hatlarını çizmesine ve arama motorlarının sitenizde daha derinlere inmesine yardımcı olmak için kullanılması önemlidir. Stiller olmadan hepsi oldukça çirkin, bu nedenle 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 {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; }

Bağlantıları Unutmayın

Bağlantı renklerini biçimlendirmek neredeyse her zaman tasarımın kritik bir parçasıdır, ancak bunları varsayılan stillerde tanımlamazsanız, muhtemelen sözde sınıflardan en az birini unutacaksınız. Bunları mavi üzerinde küçük bir varyasyonla tanımlayın ve ardından tanımlanan site için renk paletini oluşturduğunuzda değiştirin. Bağlantıları mavi tonlarında ayarlamak için şunları ayarlayın:

  • bağlantılar mavi gibi
  • ziyaret edilen bağlantılar koyu mavi gibi
  • fareyle üzerine gelme bağlantıları açık mavi olarak
  • aktif bağlantılar daha soluk mavi gibi

Bu örnekte gösterildiği gibi: a: link {color: # 00f; }
a: {color: # 009 ziyaret edildi; }
a: vurgulu {renk: # 06f; }
a: aktif {renk: # 0cf; }

class = “ql-syntax”> Bağlantıları oldukça zararsız bir renk şemasıyla biçimlendirerek, 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ü yapar.

Tam Stil Sayfası

İşte tam stil sayfası: @charset “utf-8”;

html, body {
kenar boşluğu: 0px;
dolgu: 0px;
sınır: 0px;
renk: # 000;
arkaplan: #fff;
}
html, body, 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: {color: # 009 ziyaret edildi; }
a: vurgulu {renk: # 06f; }
a: aktif {renk: # 0cf; }