CSS Dersleri – CSS Yazım Yöntemleri
CSS Dersleri – CSS Yazım Yöntemleri Hakkında Detaylı Bilgi İçin Videomuzu İzleyebilirsiniz
Bir CSS kural kümesi, bir seçici (selector) ve bir bildiri bloğundan (declaration block) oluşur. Selector, biçim (style) bilgilerini yükleyeceğiniz HTML elemanını işaret eder. Declaration block (bildiri bloğu) bir ya da daha fazla bildiriden oluşur. Değiştirilmek istenen birden fazla özellik varsa bildiriler arasına “;” sembolü konur. Her bildiri, bir özellik adı (property name) ve bir değer (value) içerir. Aralarına “:” sembolü yerleştirilir.
Bir CSS bildirimi daima bir noktalı virgül sembolüyle sonuçlanır ve bildiri grupları “{}” sembolleri arasına alınır.
p {color:blue;text-align:left;}
CSS kodunu daha okunabilir yapmak için her bildiri deyimi ayrı bir satıra konabilir:
p {
color: blue;
text-align: left;
}
GELECEGİ YAZANLAR
CSS STIL KODLAMASI ORNEGI
Yukarıdaki örneği tarayıcıda açtığımızda
etiketi içinde kalan yazılar mavi renkli görüntülenir.
CSS yorumları
Yorumlar yazılan kod üzerinde açıklama eklemek için kullanılır. Ayrıca kodu geliştiren kişinin bile uzun zaman geçtikten sonra unutabileceği bazı kritik noktaları kendisine hatırlatır. Yorum satırları tarayıcı tarafından dikkate alınmaz.
Bir CSS yorumu, “/*” sembolleriyle başlar ve “*/” sembolleriyle sona erer. Birden çok satıra da yayılabilir.
p {
color: blue;
/* paragraf mavi renkte yapılıyor */
text-align: left;
/*metin sola yanaşık*/
}
CSS seçiciler (selectors)
CSS seçicileri, HTML elemanlarını seçmenizi ve onlar üzerinde işlem yapmanızı sağlar. CSS seçicileri, HTML elemanlarını, id’leri, sınıfları (class), tipleri, özellikleri (attribute) ya da özellik değerlerini kullanarak bulur.
Eleman seçiçi
Eleman seçici, elemanları etiket adlarına göre seçer. Sayfadaki tüm
elemanlarını etkileyecek bir değişikliği bu şekilde gerçekleştirebilirsiniz.
p {
text-align: left;
color: blue;
}
HER PARAGRAF STILDEN ETKILENECEKTIR
BU PARAGRAF DA ETKILENIR
BU DA ISTISNA DEGILDIR
id seçici
id seçici, belirli bir elemanı bulmak için, HTML etiketinin id özelliğini kullanır. id, sayfa içinde tekil (unique) olmalıdır. id seçicisini, sayfa içinde belirli tek bir elemanı bulmak söz konusu olduğu zaman kullanmalısınız. id ile elemanı bulmak için aranan elemanın id’sinin önüne “#” sembolü koymalısınız. Örneğin, aşağıdaki kod içinde id=”parag1″ adlı eleman aranmaktadır.
#parag1 {
text-align: left;
color: blue;
}
GELECEGI YAZANLAR
BU PARAGRAF STILDEN ETKILENMIYOR
BU PARAGRAF DA STILDEN ETKILENMIYOR
Sınıf (class) seçici
Sınıf seçici aradığı elemanları belirli bir sınıf bilgisine göre arar. Sınıf seçici, HTML sınıf özelliğini kullanır. Belirli bir sınıfa ait elemanları bulmak için, bir nokta karakterinden sonra sınıfın adı yazılır.
.lefty {
text-align: left;
color: red;
}
Yukarıdaki örnekte class=”lefty” özelliğine (attribute) sahip olan elemanlar aranmaktadır.
KIRMIZI VE SOLA YANASIK BASLIK
STILIN ETKISI YOK
KIRMIZI VE SOLA YANASIK BASLIK
Sınıf arama bazen aşağıdaki biçimde de gerçekleştirilebilir:
p.left {
text-align: left;
color: red;
}
Burada class=”left” olan sınıfların bulunduğu paragraflar etkilenecektir.
BU PARAGRAF STIL BILGISINDEN ETKILENMEDI
BU PARAGRAF STIL BILGISINDEN ETKILENDI
Seçicileri gruplama
Stil sayfalarında pek çok kez aynı stilde elemanlar gözünüze çarpar:
h1 {
text-align: left;
color: red;
}
h2 {
text-align: left;
color: red;
}
p {
text-align: left;
color: red;
}
Kodu küçültmek için gruplama yapabilirsiniz. Burada hem h1 ve h2 başlıkları hem de p paragrafı aynı stilde tanımlanmak isteniyor. Buna göre h1, h2 ve p’yi virgüllerle ayırarak yukarıdaki uzun ifadeleri aşağıdaki gibi kısa ve tek bir ifade haline getirebiliriz:
h1, h2, p {
text-align: left;
color: red;
}
GELECEGI YAZANLAR
UYGULAMA MARATONU
Uygulama maratonuna bu sene katılım epey fazla oldu.
Fikir Proje olarak sizlere elimizden geldiğince, yararlı bilgiler paylaşmaya çalışıyoruz. Sizlerde bu paylaşımlarımızı, sosyal ağ ve diğer ağlarınızda paylaşırsanız seviniriz. Bilgi paylaştıkça çoğalır.
Bir Yorum Yazar Mısın?