Daha önceki dersimizde CSS Nedir? sorusuna cevap verdik. Bu derste CSS yazım kuralı ve CSS seçicilerinin kullanımlarını ve kullanım amaçlarını öğreneceksiniz. CSS Seçicileri, stil oluşturmak istediğiniz HTML öğesine işaret eder. Aşağıda bir CSS bildiriminin yapısını görüyorsunuz.

Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

CSS biçimledirmesi özellik : değer şeklinde yazılır.

CSS Tanımlarını İsimlendirme – BEM Nedir?

Bir CSS bildirimi her zaman bir noktalı virgülle sonlanır ve bildirim blokları küme parantezleri ile çevrelenir.

Aşağıdaki örnekte tüm paragraf ögelerinin yazı renginin kırmızı olması sağlanmıştır.


p {
color: red;
text-align: center;
}

p {

color: red;

text-align: center;

}

CSS Seçiciler

CSS seçicileri (selector), HTML isimlerine, id’sine, class’ına, niteliğine ve daha fazlasına göre HTML öğelerini bulmak veya seçmek için kullanılır.

Küresel seçici (*)
Basit seçiciler (isim, kimlik, sınıfa göre öğeleri seçin)
Grup seçiciler (aynı özelliğe sahip farklı seçicileri gruplandırın)
Birleştirici seçiciler (aralarındaki belirli bir ilişkiye göre öğeleri seçin)
Sözde sınıf seçiciler (belirli bir duruma göre öğeleri seçin)
Sözde öğe seçiciler (bir öğenin bir bölümünü seçin ve stil verin)
Nitelik seçiciler (bir nitelik veya nitelik değerine göre öğeleri seçin)

İçindekiler

Küresl Seçici (*)

CSS tarafından sağlanan evrensel seçici, HTML sayfasındaki herhangi bir öğenin seçilmesine yardımcı olur. Tek bir öğeyle birlikte gelir ve seçiciyi evrensel bir seçici olarak belirtmek için kullanılan yıldız (yani “*”) sembolünü kullanır. Genellikle bir yıldız ve ardından bir seçici olarak yazılır. * tüm elemanları seçmek için kullanılır. Bu yıldız, başka bir öğenin içindeki tüm öğeleri seçme yeteneğine de sahiptir.

Evrensel seçici, web sayfanızdaki tüm HTML öğelerine belirli bir stil eklemek istediğinizde yardımcı olur. Ayrıca, HTML sayfanızın öğesindeki her bir öğe için de kullanılabilir.

Bu seçicinin temel sözdizimi şöyledir:


* {
     ozellik: deger;
  }

* {

ozellik: deger;

}

Örnek :


* {
     margin : 0px;
     padding : 0px;
  }

* {

margin : 0px;

padding : 0px;

}

Yukarıdaki CSS kodu tüm HTML öğelerinin dış ve iç boşluklarını “0” yapar.

Örnek :


<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Tasarım Kodlama</title>
    <style>
        *{
            color:red;
        }
    </style>
</head>
<body>

    <h1>Tasarım Kodlama</h1>
    <p>Merhaba Dünya</p>
    <p lang="en">Hello World</p>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

<style>

color:red;

}

</style>

</head>

<body>

<h1>Tasarım Kodlama</h1>

<p>Merhaba Dünya</p>

<p lang="en">Hello World</p>

</body>

</html>

Yukarıdaki kodda tüm HTML öğlerinin yazı rengi kırmızı(red) yapılmıştır.

Çıktısı:

Basit Seçiciler

Bu yazıda bir çok seçici türüne yer verilecektir. Ancak ilk olarak temel bir kaç seçici ile işleme başlayalım.

En ilkel seçici türleri 3 seçici olmak üzere bu bölümde incelenebilir.

HTML etiketleri seçmek için etiket seçici,
id değerlerine göre seçim yapmak için kimlik seçici,
class isimlerine göre seçim yapmak için sınıf seçici

kavramını Basit Seçiciler başlığı altında incelenecektir.

CSS Etiket Seçici

Etiket seçici, tüm etiket adına dayalı ögeleri seçer. Örnek olarak sayfamızda bulunan tüm <p> etiketlerinin yani paragrafların renginin kırmızı ve hizalama değerinin ortalı olmasını istersek;


<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Tasarım Kodlama</title>
    <style>
        p{
            color:red;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>Tasarım Kodlama</h1>
    <p>Merhaba Dünya</p>
    <p lang="en">Hello World</p>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

<style>

color:red;

text-align: center;

}

</style>

</head>

<body>

<h1>Tasarım Kodlama</h1>

<p>Merhaba Dünya</p>

<p lang="en">Hello World</p>

</body>

</html>

Çıktısı:

CSS ID (Kimlik) Seçiciler

ID seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id özelliğini kullanır.

Bir öğenin kimliği bir sayfa içinde benzersiz olmalıdır, bu nedenle kimlik seçici bir benzersiz öğe seçmek için kullanılır!

Belirli bir kimliğe sahip bir eleman seçmek için, “#” karakteri ve ardından öğenin kimliği yazılır.

Örnek: Aşağıdaki örnekte #ad öğesinin arkaplan rengi siyah, yazı rengi kırmızı olarak ayarlanmıştır.


<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Tasarım Kodlama</title>
    <style>
        #ad{
            background-color: black;
            color:red;
        }
    </style>
</head>
<body>

    <input type="text" id="ad"><br>
    <input type="text" id="soyad"><br>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

<style>

#ad{

background-color: black;

color:red;

}

</style>

</head>

<body>

</body>

</html>

Çıktısı:

Not: Bir kimlik adı sayı ile başlayamaz!

CSS Class (Sınıf) Seçici

Sınıf seçici, belirli bir sınıf özelliğine sahip öğeleri seçer. “id seçici“den faklı olarak birden fazla öğeye uygulanabilir.

İlgilinizi çekebilir: id ile class Arasındaki Fark

Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) Karakteri ve ardından sınıfın adını yazın.

Aşağıdaki örnekte, class = ‘ortala’ olan tüm HTML öğeleri kırmızı ve orta hizalanmış olacaktır:


<!DOCTYPE html>
<html>
<head>
<style>
.ortala {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="ortala">Kırmızı ve Ortalanmış Başlık</h1>
<p class="ortala">Kırmızı ve Ortalanmış Paragraf.</p> 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.ortala {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="ortala">Kırmızı ve Ortalanmış Başlık</h1>

<p class="ortala">Kırmızı ve Ortalanmış Paragraf.</p>

</body>

</html>

Ayrıca, yalnızca belirli HTML öğelerinin bir sınıf tarafından etkilenmesi gerektiğini de belirtebilirsiniz. Örnek olarak yukarıdaki örnekte sadece sınıfı ortala olan öğelerden sadece paragraf olanları ortalayalım.

p.ortala {…}


<!DOCTYPE html>
<html>
<head>
<style>
p.ortala {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="ortala">Kırmızı ve Ortalanmış Başlık</h1>
<p class="ortala">Kırmızı ve Ortalanmış Paragraf.</p> 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.ortala {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="ortala">Kırmızı ve Ortalanmış Başlık</h1>

<p class="ortala">Kırmızı ve Ortalanmış Paragraf.</p>

</body>

</html>

Html elemanlarına birden fazla sınıf özelliği uygulanabilir. Aşağıdaki örneği incelediğinizde en sondaki paragrafın ortala ve buyuk isimli sınıfa dahil olduğunu göreceksiniz.


<!DOCTYPE html>
<html>
<head>
<style>
p.ortala{
    text-align: center;
    color: red;
}

p.buyuk{
    font-size: 300%;
}
</style>
</head>
<body>

<h1 class="ortala">Bu başlığa biçimlendirme uygulanmamıştır.</h1>
<p class="ortala">Bu paragraf kırmızı renkli ve ortalanmıştır..</p>
<p class="ortala buyuk">Bu paragraf iki tane sınıf özelliği içerir. kırmızı, ortalanmış ve yazı boyutu arttırılmıştır.</p> 

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.ortala{

text-align: center;

color: red;

}

p.buyuk{

font-size: 300%;

}

</style>

</head>

<body>

<h1 class="ortala">Bu başlığa biçimlendirme uygulanmamıştır.</h1>

<p class="ortala">Bu paragraf kırmızı renkli ve ortalanmıştır..</p>

<p class="ortala buyuk">Bu paragraf iki tane sınıf özelliği içerir. kırmızı, ortalanmış ve yazı boyutu arttırılmıştır.</p>

</body>

</html>

Yukarıdaki örnekte h1 etiketinde bulunan başlık ortala sınıfına dahil olduğu halde herhangi bir biçimlendirme olmamıştır. Bunun sebebi css özelliğinin p.ortala şeklinde yazılmasıdır. Bu şekilde sadece sınıf adı ortala olan <p> etiketlerinin biçimlendirmeden etkilenmesi sağlanmıştır.

Not: Class isimleri rakam ile başlayamaz.

Grup Seçiciler (Seçicileri Gruplandırma)

Aşağıdaki gibi aynı stil tanımlarına sahip öğeleriniz varsa;


h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

Kodu küçültmek için seçicileri gruplamak daha iyi olacaktır. Seçici gruplamak için, her seçiciyi virgülle ayırın.

Aşağıdaki örnekte seçicileri nasıl gruplayabileceğinizi göreceksiniz.


h1, h2, p {
    text-align: center;
    color: red;
}

h1, h2, p {

text-align: center;

color: red;

}

Yukarıda <h1>, <h2> ve <p> etiketlerine ortalanmış ve kırmızı renk özelliği verilmiştir.

Kullanımı:


<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1>Başlık!</h1>
<h2>Küçük Başlık!</h2>
<p>Bu bir paragraf.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Başlık!</h1>

<h2>Küçük Başlık!</h2>

<p>Bu bir paragraf.</p>

</body>

</html>

Yukarıdaki sayfayı çalıştırdığınızda tüm öğelerin ortalanmış ve kırmızı renkte olduğunu göreceksiniz.

Bileştirici Seçiciler

Bir CSS seçicisi, birden fazla basit seçici içerebilir. Basit seçiciler arasına bir birleştirici ekleyebiliriz.

CSS’de dört farklı birleştirici vardır:

torun seçici seçici (boşluk)
çocuk seçici (>)
komşu kardeş seçici (+)
genel kardeş seçici (~)

Torun Seçici(Boşluk)

CSS’deki torun seçici, birleştiricisi olmayan iki seçici arasında boşluk bulunan herhangi bir seçicidir.

İşte bazı örnekler:


ul li {  }
header h2  {  }
footer a  {  }
.bolum div {  }
#logo span  {  }
table td a  {  }

ul li { }

header h2 { }

footer a { }

.bolum div { }

#logo span { }

table td a { }

ul li { } örneğini alalım. “Sırasız bir listenin soyundan gelen herhangi bir liste öğesi” anlamına gelir.

Descendant, DOM ağacında kendi içinde yuvalanmış herhangi bir yer anlamına gelir.

Doğrudan bir çocuk olabilir, beş seviye derinlikte bir torun olabilir, bu hala soyundan geldiği anlamına gelir. Bu seçim bir alt öğenin seçimini sağlayan çocuk seçicisinden(>) farklı olarak tüm alt öğlerde etkili olmasını sağlar.

Göstermek için, div p{ } eşleşecek:

CSS’deki torun seçici, birleştiricisi olmayan iki seçici arasında boşluk bulunan herhangi bir seçicidir.

İşte bazı örnekler:


ul li {  }
header h2  {  }
footer a  {  }
.bolum div {  }
#logo span  {  }
table td a  {  }

ul li { }

header h2 { }

footer a { }

.bolum div { }

#logo span { }

table td a { }

ul li { } örneğini alalım. “Sırasız bir listenin soyundan gelen herhangi bir liste öğesi” anlamına gelir.

Descendant, DOM ağacında kendi içinde yuvalanmış herhangi bir yer anlamına gelir.

Göstermek için, div p{ } eşleşecek:


<!DOCTYPE html>
<html>
<head>
    <style>
        div p{
            color:red;
        }
    </style>
</head>
<body>

    <p>Merhaba Dünya</p>
    <div>
        <p>Merhaba</p>
        <div>
            <p>Dünya</p>
        </div>
    </div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div p{

color:red;

}

</style>

</head>

<body>

<p>Merhaba Dünya</p>

<div>

<p>Merhaba</p>

<div>

<p>Dünya</p>

</div>

</body>

</html>

CSS Yapısı ve CSS Seçileri

CSS Seçiciler

Küresl Seçici (*)

Basit Seçiciler

CSS Etiket Seçici

CSS ID (Kimlik) Seçiciler

CSS Class (Sınıf) Seçici

Grup Seçiciler (Seçicileri Gruplandırma)

Bileştirici Seçiciler

Torun Seçici(Boşluk)

4 Yorum

İptal Et

CSS Seçiciler

Küresl Seçici (*)

Basit Seçiciler

CSS Etiket Seçici

CSS ID (Kimlik) Seçiciler

CSS Class (Sınıf) Seçici

Grup Seçiciler (Seçicileri Gruplandırma)

Bileştirici Seçiciler

Torun Seçici(Boşluk)

Bunları da beğenebilirsiniz

4 Yorum