)
Bir CSS bildirimi daima bir noktalı virgül sembolüyle sonuçlanır ve bildiri grupları "{}" sembolleri arasına alınır.
Kod:
p {color:blue;text-align:left;}Kod:
p {
color: blue;
text-align: left;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
text-align: left;
}
</style>
</head>
<body>
<p>GELECEGİ YAZANLAR</p>
<p>CSS STIL KODLAMASI ORNEGI</p>
</body>
</html>
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.
Kod:
p {
color: blue;
/* paragraf mavi renkte yapılıyor */
text-align: left;
/*metin sola yanaşık*/
}Kod:
/* bu açıklama
tek satıra
sığmadı*/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 <p> elemanlarını etkileyecek bir değişikliği bu şekilde gerçekleştirebilirsiniz.
Kod:
p {
text-align: left;
color: blue;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: left;
color: blue;
}
</style>
</head>
<body>
<p>HER PARAGRAF STILDEN ETKILENECEKTIR</p>
<p id="para1">BU PARAGRAF DA ETKILENIR</p>
<p>BU DA ISTISNA DEGILDIR</p>
</body>
</html>
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.
Kod:
#parag1 {
text-align: left;
color: blue;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#parag1 {
text-align: left;
color: red;
}
</style>
</head>
<body>
<p id="parag1">GELECEGI YAZANLAR</p>
<p>BU PARAGRAF STILDEN ETKILENMIYOR</p>
<p>BU PARAGRAF DA STILDEN ETKILENMIYOR</p>
</body>
</html>
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.
Kod:
.lefty {
text-align: left;
color: red;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
.lefty {
text-align: left;
color: red;
}
</style>
</head>
<body>
<h1 class="lefty">KIRMIZI VE SOLA YANASIK BASLIK</h1>
<p class="other">STILIN ETKISI YOK</p>
<h1 class="lefty">KIRMIZI VE SOLA YANASIK BASLIK</h1>
</body>
</html>.png "5e6276a2338f3_css_yazim_kurallari-4_(1)")
Sınıf arama bazen aşağıdaki biçimde de gerçekleştirilebilir:
Kod:
p.left {
text-align: left;
color: red;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
p.left {
text-align:left;
color:red;
}
</style>
</head>
<body>
<h1 class="left"> BU PARAGRAF STIL BILGISINDEN ETKILENMEDI </h1>
<p class="left"> BU PARAGRAF STIL BILGISINDEN ETKILENDI </p>
</body>
</html>
Seçicileri gruplama
Stil sayfalarında pek çok kez aynı stilde elemanlar gözünüze çarpar:
Kod:
h1 {
text-align: left;
color: red;
}
h2 {
text-align: left;
color: red;
}
p {
text-align: left;
color: red;
}Kod:
h1, h2, p {
text-align: left;
color: red;
}Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: left;
color: red;
}
</style>
</head>
<body>
<h1>GELECEGI YAZANLAR</h1>
<h2>UYGULAMA MARATONU</h2>
<p>Uygulama maratonuna bu sene katılım epey fazla oldu.</p>
</body>
</html>
