Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS

CSS’te Seçici, Bildirim, Özellik, Değer Yapıları (TAG, Class, ID)

Bir önce ki dersimizde bir örnek ile yüzeysel anlattığımız CSS yapılarını bu dersimizde detaylıca işleyeceğiz.

h1 { color: black; font-size: 11px; }

Bu örnekte ki yapılar:

  • "h1" Seçicidir.
  • "{ color: black; }" Bildirimdir. Bildirim bloğu süslü parantez ile açılır ve kapatılır. İçerisinde ki her bildirim süslü parantez (;) ile ayrılır. Bu bildirimler birer özellik ve değer içermektedir. Özellikler ve değerler arasında ise iki nokta üst üste (:) işareti koyulur.
  • "color" Özelliktir. Değiştirilmek istenilen stilin özniteliğidir. Örnek: color, font-style gibi.
  • "black" Değerdir. Değer ise değiştirilmek istenen stilin özniteliklerine verilen değerlerdir. Örnek: black, italic gibi.

Bir önceki yazımız: ardakaracayir.com/css-yapisi-yazim-kurallari-syntax

Seçici (Selector)

Seçiciler, kendi arasında altıya ayrılır. Seçici olarak örnekte ki gibi bütün HTML etiketlerini (<tag>'ları) kullanabileceğimiz gibi diğer 5 seçiciyi de kullanabiliriz. Seçici isimlendirirken kesinlikle Türkçe karakter kullanılamaz ve isimlendirmeler rakam ile başlayamaz.


TAG (Etiket) Seçicisi

TAG seçicileri, aynı türde ki tüm öğelere, - yani etiketlere - istediğimiz stili uygulamak için kullanılır. Yani etiketleri kendi isteğimize göre değiştiririz. Yukarıda ki örnekte gördüğünüz h1 <tag>'ına sahip tüm öğeler aynı niteliğe sahip olacaktır. Bir başka örnek ile sayfamızda ki tüm karakterlerin boyutunu 12px, rengini de yeşil yapalım.

<html>
<head>
    <title>CSS Dersleri - Arda Karaçayır</title>
<style>
    body {
        font-size: 12px;
        color: green;
    }
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Bir başka örnek ile sayfamızda bulunan bütün <p> etiketlerinin boyutunu, rengini, yazı tipini ve kalınlığını değiştirelim.

<html>
<head>
	<title>CSS Dersleri - Arda Karaçayır</title>
<style>
    body {
        font-size: 15px;
        color: blue;
        font-family: Arial;
        font-weight: bold;
    }
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Class (Sınıf) Seçicisi

Class seçicisi; birden fazla öğeye uygulanabilir, - h1 gibi - tek bir öğeye bağlı olmayan bir seçici türüdür. Size örnek bir class seçicisi gösterelim.

<html>
<head>
    <title>CSS Dersleri - Arda Karaçayır</title>
<style>
    .cssdersleri {    // Class seçicisi olarak belirlediğimiz öğenin önüne nokta (.) koymamız gerekiyor.
        color: #FF7F00;    // Renk özelliği ve bu özelliğe değer atadık.
        font-family: arial;    // Font tipi ve font'un adını belirledik.
        font-style: italic;    // Yazı tipinin stilini değiştirdik, yani italik bir yazı özelliği belirledik.
    }
</style>
</head>
<body>
    <p class="cssdersleri">Deneme yazısı</p>
</body>
</html>

ID (Kimlik) Seçicisi

Class (Sınıf) seçicisini bir çok öğeye uygulayabiliyorduk. ID (Kimlik) seçiciler ise sadece bir öğeye uygulanabilir ve bir kez kullanılırlar. ID seçicilerinin önüne nokta yerine diyez (#) işareti koyacağız. Örnek olarak "cssdersi_2" adında seçici oluşturalım ve bazı özellikler ekleyelim.

<html>
<head>
    <title>CSS Dersleri - Arda Karaçayır</title>
<style>
    #cssdersi_2 {    // ID seçicisi tanımlıyoruz.
        text-align: center;    // Yazıyı ortalayacağız.
        color: orange;    // Rengi turuncu olarak belirliyoruz.
        font-size: 25px;    // Font büyüklüğü’nü 25 px olarak belirliyoruz.
    }
</style>
</head>
<body>
    <p id="cssdersi_2">Deneme yazısı</p>
</body>
</html>

Evet, CSS'te ki seçicileri size detaylıca anlattık. Bir sonra ki yazımızda size CSS kullanım şekillerini anlatacağız.


CSS Kullanım şekilleri ve yönetimi hakkında daha fazla bilgi için: ardakaracayir.com/css-kullanim-bicimleri-ve-yontemleri/

Umarım paylaşımı faydalı bulmuşsunuzdur. Aklınıza takılan yer olursa yorum alanında sorabilirsiniz.

Yorum Yap

Not: Yorum alanı HTML kod desteklememektedir...
Gönder
Yorum gönderildi. Onaylandıktan sonra yayınlanacaktır.
© 2020 - Arda KARAÇAYIR | Freelance Web Developer