CSS sözdizimi, CSS kurallarının tarayıcılar tarafından yorumlanıp HTML öğelerine uygulanabilmesi için nasıl yazıldığını tanımlar.
Selector: Targets the HTML element "h1" to apply styles.
Declaration Block: Enclosed in curly braces { }, contains one or more declarations.
Property: Specifies the style attribute, here "color" for text color.
Value: Defines the property's setting, here "blue" for the text hue.
Overall Structure: Forms a complete CSS rule: h1 { color: blue; }, styling h1 headings blue.
Kod:
Kod Çıktısı:
Yukarıdaki Örnekte,
h1: Bu seçici, sayfadaki tüm <h1> öğelerini hedefler. <h1> öğesine uygulanan stil, metin rengini maviye ve yazı tipi boyutunu 24 piksele ayarlar.
p: Bu seçici, tüm <p> öğelerini hedefler. Metin rengi yeşil, yazı tipi boyutu ise 16 piksel olur.
CSS'de Seçiciler
Seçiciler, hangi HTML öğelerinin biçimlendirileceğini tanımlar. CSS, çeşitli seçici türleri sunar.
1. Evrensel Seçici: Stilleri tüm öğelere uygular.
Kod:
2. Tür Seçici: Belirli HTML öğelerini hedefler.
Kod:
3. Sınıf Seçici: Öğeleri belirli bir sınıf niteliğiyle biçimlendirir.
Kod:
4. ID Seçici: Belirli bir kimliğe sahip tek bir öğeyi hedefler.
Kod:
CSS Sözdiziminde Bildirim Bloğu
Her bildirim, iki nokta üst üste ile ayrılmış bir özellik ve bir değerden oluşur ve her bildirimin ardından bir noktalı virgül gelir:
1. Özellikler: Özellikler, stil vermek istediğiniz seçili öğelerin özellikleridir (renk, genişlik, yükseklik vb. gibi).
renk: Metin rengini tanımlar.
arka plan rengi: Bir öğenin arka plan rengini tanımlar.
yazı tipi boyutu: Yazı tipi boyutunu ayarlar.
kenar boşluğu: Bir öğenin etrafındaki boşluğu belirtir.
dolgu: Öğenin içeriği ile kenarlığı arasındaki boşluğu tanımlar.
2. Değerler: Değerler, uygulamak istediğiniz özelliğin renk adı, sayı (örneğin 16 piksel) veya yüzdeler (örneğin %50) gibi özelliklerini tanımlar.
CSS Seçicilerinin Gruplandırılması ve İç İçe Yerleştirilmesi
Aynı stilleri uygulamak için seçicileri gruplayabilir veya hiyerarşik hedefleme için iç içe yerleştirebilirsiniz.
1. Gruplandırma
Kod:
2. Yuvalama
Kod:
Sözde sınıflar ve sözde elemanlar
Sözde sınıflar ve sözde elemanlar, belirli durumları veya elemanların belirli bölümlerini biçimlendirmek için kullanılır. Sözde sınıflar, elemanları belirli bir duruma göre hedeflerken, sözde elemanlar, elemanların belirli bir bölümüne göre hedefler.
Kod:
Selector: Targets the HTML element "h1" to apply styles.
Declaration Block: Enclosed in curly braces { }, contains one or more declarations.
Property: Specifies the style attribute, here "color" for text color.
Value: Defines the property's setting, here "blue" for the text hue.
Overall Structure: Forms a complete CSS rule: h1 { color: blue; }, styling h1 headings blue.
Kod:
<html>
<head>
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>Kod Çıktısı:
Hello, World!
This is a simple paragraph.
Yukarıdaki Örnekte,
h1: Bu seçici, sayfadaki tüm <h1> öğelerini hedefler. <h1> öğesine uygulanan stil, metin rengini maviye ve yazı tipi boyutunu 24 piksele ayarlar.
p: Bu seçici, tüm <p> öğelerini hedefler. Metin rengi yeşil, yazı tipi boyutu ise 16 piksel olur.
CSS'de Seçiciler
Seçiciler, hangi HTML öğelerinin biçimlendirileceğini tanımlar. CSS, çeşitli seçici türleri sunar.
1. Evrensel Seçici: Stilleri tüm öğelere uygular.
Kod:
* {
margin: 0;
padding: 0;
}2. Tür Seçici: Belirli HTML öğelerini hedefler.
Kod:
h1 {
font-family: Arial, sans-serif;
}3. Sınıf Seçici: Öğeleri belirli bir sınıf niteliğiyle biçimlendirir.
Kod:
.box {
border: 1px solid black;
padding: 10px;
}4. ID Seçici: Belirli bir kimliğe sahip tek bir öğeyi hedefler.
Kod:
#header {
background-color: lightgray;
}CSS Sözdiziminde Bildirim Bloğu
Her bildirim, iki nokta üst üste ile ayrılmış bir özellik ve bir değerden oluşur ve her bildirimin ardından bir noktalı virgül gelir:
1. Özellikler: Özellikler, stil vermek istediğiniz seçili öğelerin özellikleridir (renk, genişlik, yükseklik vb. gibi).
renk: Metin rengini tanımlar.
arka plan rengi: Bir öğenin arka plan rengini tanımlar.
yazı tipi boyutu: Yazı tipi boyutunu ayarlar.
kenar boşluğu: Bir öğenin etrafındaki boşluğu belirtir.
dolgu: Öğenin içeriği ile kenarlığı arasındaki boşluğu tanımlar.
2. Değerler: Değerler, uygulamak istediğiniz özelliğin renk adı, sayı (örneğin 16 piksel) veya yüzdeler (örneğin %50) gibi özelliklerini tanımlar.
CSS Seçicilerinin Gruplandırılması ve İç İçe Yerleştirilmesi
Aynı stilleri uygulamak için seçicileri gruplayabilir veya hiyerarşik hedefleme için iç içe yerleştirebilirsiniz.
1. Gruplandırma
Kod:
h1, h2, h3 {
color: darkblue;
}2. Yuvalama
Kod:
ul li {
list-style-type: square;
}Sözde sınıflar ve sözde elemanlar
Sözde sınıflar ve sözde elemanlar, belirli durumları veya elemanların belirli bölümlerini biçimlendirmek için kullanılır. Sözde sınıflar, elemanları belirli bir duruma göre hedeflerken, sözde elemanlar, elemanların belirli bir bölümüne göre hedefler.
Kod:
/*pseudo-class selector*/
a:hover {
color: green;
}
/*pseudo-element selector*/
p::first-line {
font-weight: bold;
}
