Bir web sitesinin görsel stili ve düzeni CSS veya Basamaklı Stil Sayfaları tarafından belirlenir. Bunlar, bir web sayfasının HTML biçimlendirmesini şekillendiren ve web tarayıcılarına bu biçimlendirmeden kaynaklanan sayfaların nasıl görüntüleneceğine ilişkin talimatlar sağlayan belgelerdir. CSS bir sayfanın düzenini, yanı sıra renk, arka plan resimleri, tipografi ve çok daha fazlasını ele alır.
Bir CSS dosyasına bakarsanız, herhangi bir biçimlendirme veya kodlama dili gibi, bu dosyaların kendilerine özgü bir sözdizimi olduğunu görürsünüz. Her stil sayfası bir dizi CSS kuralından oluşur. Bu kurallar, tam olarak alındığında, sitenin stilleridir.
CSS Kuralının Bölümleri
Bir CSS kuralı, iki ayrı bölümden oluşur - seçici ve beyan. Seçici, bir sayfada neyin tarzını belirlediğini ve beyanın nasıl şekillendirilmesi gerektiğini belirler. Örneğin:
p {
renk: # 000;
}
Bu bir CSS kuralıdır. Seçici kısım "paragraflar" için bir eleman seçici olan "p" dir. Bu nedenle, bir sitedeki TÜM paragrafları seçer ve onlara bu stil sağlar (CSS belgenizin başka yerlerinde daha özel stiller tarafından hedeflenen paragraflar olmadıkça).
Kuralın "renk: # 000;" beyan olarak bilinen şeydir. Bu beyan iki parçadan oluşur - mülk ve değer.
Özellik bu deklarasyonun "renk" parçasıdır. Seçicinin hangi yönünün görsel olarak değiştirileceğini belirler.
Değer, seçilen CSS özelliğinin ne olacağıdır. Örneğimizde, "siyah" için CSS kısayolu olan # 000 değerinin hex değerini kullanıyoruz.
Bu nedenle, bu CSS kuralını kullanarak sayfamızın siyah bir font renginde görüntülenen paragrafları olacaktır.
CSS Mülkiyet Temelleri
CSS özellikleri yazdığınızda, onları uygun gördüğünüz gibi yapamazsınız. Örnekler için "renk" gerçek bir CSS özelliğidir, dolayısıyla bunu kullanabilirsiniz. Bu özellik, bir öğenin metin rengini belirler. "Metin rengi" veya "yazı tipi rengi" CSS özellikleri olarak kullanmaya çalıştıysanız, bunlar CSS dilinin gerçek bölümleri olmadıkları için başarısız olur.
Başka bir örnek özellik "arka plan resmi" dir. Bu özellik, aşağıdaki gibi bir arka plan için kullanılabilecek bir resim ayarlar:
.logo {
arkaplan resmi: url (/images/company-logo.png);
}
"Arka plan resmi" veya "arkaplan-grafik" özelliğini bir özellik olarak kullanmaya çalıştıysanız, bunlar bir kez daha gerçek CSS özellikleri olmadığından başarısız olurlar.
Bazı CSS Özellikleri
Siteyi şekillendirmek için kullanabileceğiniz birkaç CSS özelliği vardır. Bazı örnekler:
- Kenarlık (kenarlık stili, kenarlık rengi ve kenarlık genişliği dahil)
- Dolgu (dolgu malzemesi, dolgu malzemesi, dolgu altlığı ve dolgu malzemesi dahil)
- Kenar boşlukları (kenar boşluğu, kenar boşluğu, kenar boşluğu ve kenar boşluğu dahil)
- Font ailesi
- Yazı Boyutu
- Arka plan rengi
- Genişlik
- Yükseklik
Bu CSS özellikleri, örnek olarak kullanılabilecek harika özelliklerdir, çünkü hepsi çok basittir ve CSS'yi bilmiyor olsanız bile, adlarına göre yaptıklarını tahmin edebilirsiniz.
Karşılaşacağınız diğer CSS özellikleri de vardır; bunlar, adlarına göre nasıl çalıştıkları belli olmayabilir.
- şamandıra
- Açık
- taşma
- Metin dönüşümü
- Z dizini
Web tasarımında daha derinleştikçe, tüm bu özellikleri ve daha fazlasını yaşayacaksınız (ve kullanacaksınız)!
Özellikler İhtiyaç Değerleri
Bir özelliği her kullandığınızda, ona bir değer vermelisiniz - ve bazı özellikler sadece belirli değerleri kabul edebilir.
"Renk" özelliğinin ilk örneğimizde, bir renk değeri kullanmamız gerekir. Bu bir hex değeri , RGBA değeri veya hatta renkli anahtar kelimeler olabilir . Bununla birlikte, bu değerlerle "kasvetli" kelimesini kullandıysanız, hiçbir şey yapmaz, çünkü bu sözcük gibi tanımlayıcı olarak, CSS'de tanınmış bir değer değildir.
"Arka plan resmi" ikinci örneğimiz, gerçek bir resmi sitenizin dosyalarından almak için bir resim yolunun kullanılmasını gerektirir. Bu gerekli olan değer / sözdizimi.
Tüm CSS özelliklerinin bekledikleri değerleri vardır. Örneğin:
- Kenarlık rengi bir renk değeri bekler
- Kenarlık boyutu, pikseller veya yüzdeler gibi bir boyutlandırma değeri bekler
- Kenarlık stilleri, bu özellik için kullanılan "katı" gibi ayrılmış stillerden birini bekler
CSS özellikleri listesinden geçerseniz, her birinin, amaçlanan stilleri oluşturmak için kullanacakları belirli değerlere sahip olduğunu keşfedeceksiniz.
Jeremy Girard tarafından düzenlendi