Bir web sitesinin görsel stili ve düzeni, CSS veya Basamaklı Stil Sayfaları tarafından belirlenir. Bunlar, bir web sayfasının HTML işaretlemesini şekillendiren ve web tarayıcılarına bu işaretlemeden kaynaklanan sayfaların nasıl görüntüleneceğine ilişkin talimatlar sağlayan belgelerdir. CSS, bir sayfa düzeninin yanı sıra renk, arka plan resimleri, tipografi ve çok daha fazlasını yönetir. Bir CSS dosyasına bakarsanız, herhangi bir işaretleme veya kodlama dili gibi, bu dosyaların da kendilerine özgü bir sözdizimine sahip olduğunu göreceksiniz. Her stil sayfası bir dizi CSS kuralından oluşur. Bu kurallar, tam olarak alındığında siteyi şekillendiren şeydir.
CSS Kuralının Parçaları
Bir CSS kuralı, seçici ve bildirim olmak üzere iki ayrı bölümden oluşur. Seçici, bir sayfada neyin stillendirileceğini belirler ve bildirim, bunun nasıl stillenmesi gerektiğidir. Örneğin: p {
renk: #000;
}
type=”code”> Bu bir CSS kuralıdır. Seçici kısım, p, “paragraflar” için bir öğe seçicidir. Bu nedenle, bir sitedeki TÜM paragrafları seçer ve onlara bu stili sağlar (CSS belgenizin başka bir yerinde daha spesifik stiller tarafından hedeflenen paragraflar yoksa). Kuralın yazan kısmı, “renk: #000;” deklarasyon olarak bilinen şeydir. Bu beyanname iki parçadan oluşur – Emlak ve değer. Emlak bu renk bu deklarasyonun bir parçası. Seçicinin hangi yönünün görsel olarak değiştirileceğini belirler. değer seçilen CSS özelliğinin değiştirileceği şeydir. Örneğimizde, onaltılık değerini kullanıyoruz. #000“siyah” için CSS kısaltmasıdır. Dolayısıyla, bu CSS kuralını kullanarak, sayfamız siyah yazı tipi renginde görüntülenen paragraflara sahip olacaktır.
CSS Özelliği Temelleri
CSS özelliklerini yazdığınızda, bunları uygun gördüğünüz şekilde oluşturamazsınız. Örneğin, “renk” gerçek bir CSS özelliğidir, böylece onu kullanabilirsiniz. Bu özellik, bir öğenin metin rengini belirleyen şeydir. CSS özellikleri olarak “metin rengi” veya “yazı tipi rengi” kullanmayı denediyseniz bunlar başarısız olur çünkü bunlar CSS dilinin gerçek parçaları değildir. Başka bir örnek, “background-image” özelliğidir. Bu özellik, aşağıdaki gibi bir arka plan için kullanılabilecek bir resim ayarlar: .logo {
arka plan resmi: url(“/images/şirket-logo.png”);
}
type=”code”> Bir özellik olarak “arka plan resmi” veya “arka plan grafiği” kullanmayı denediyseniz, bunlar başarısız olur çünkü bir kez daha bunlar gerçek CSS özellikleri değildir.
Bazı CSS Özellikleri
Bir siteye stil vermek için kullanabileceğiniz bir dizi CSS özelliği vardır. Bazı örnekler:
- Kenarlık (kenarlık stili, kenarlık rengi ve kenarlık genişliği dahil)
- Dolgu (üst dolgu, sağ dolgu, alt dolgu ve sol dolgu dahil)
- Kenar boşlukları (üst kenar boşluğu, sağ kenar boşluğu, kenar boşluğu alt ve kenar boşluğu dahil)
- Font ailesi
- Yazı Boyutu
- Arka plan rengi
- Genişlik
- Yükseklik
Bu CSS özellikleri, örnek olarak kullanmak için harika özelliklerdir, çünkü hepsi çok basittir ve CSS’yi bilmiyor olsanız bile, adlarına göre ne yaptıklarını muhtemelen tahmin edebilirsiniz. Adlarına göre nasıl çalıştıkları o kadar açık olmayan, karşılaşacağınız başka CSS özellikleri de vardır:
- şamandıra
- Açık
- taşma
- Metin dönüştürme
- Z-endeksi
Web tasarımında derinleştikçe, tüm bu özellikler ve daha fazlasıyla karşılaşacaksınız (ve kullanacaksınız)!
Özellikler İhtiyaç Değerleri
Bir özelliği her kullandığınızda, ona bir değer vermelisiniz – ve belirli özellikler yalnızca belirli değerleri kabul edebilir. İlk “renk” özelliği örneğimizde bir renk değeri kullanmamız gerekiyor. Bu bir onaltılık değer, RGBA değeri ve hatta renkli anahtar kelimeler olabilir. Bu değerlerden herhangi biri işe yarar, ancak bu özellikle “kasvetli” kelimesini kullanırsanız, hiçbir şey yapmaz çünkü bu kelime ne kadar açıklayıcı olursa olsun, CSS’de tanınan bir değer değildir. İkinci “arka plan resmi” örneğimiz, sitenizin dosyalarından gerçek bir resim getirmek için kullanılacak bir resim yolunu gerektirir. Bu, gerekli olan değer/sözdizimidir. Tüm CSS özellikleri bekledikleri değerlere sahiptir. Örneğin:
- Border-color bir renk değeri bekler.
- Border-size, pikseller veya yüzdeler gibi bir boyutlandırma değeri bekler.
- Kenarlık stilleri, “katı” gibi bu özellik için kullanılan ayrılmış stillerden birini bekler.
CSS özellikleri listesini gözden geçirirseniz, her birinin amaçlanan stilleri oluşturmak için kullanacakları belirli değerleri olduğunu keşfedeceksiniz.
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “CSS Özelliğinin Tasarım Tanımı.” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/property-definition-3466899.
Kyrin, Jennifer. (2021, 14 Mayıs). CSS Özelliğinin Tasarım Tanımı. https://www.thinktco.com/property-definition-3466899 adresinden alındı
Kyrin, Jennifer. “CSS Özelliğinin Tasarım Tanımı.” Düşünce Şirketi https://www.thinktco.com/property-definition-3466899 (4 Haziran 2021’de erişildi).
