CSS Sınıf Seçicileri ve Örnekleri

CSS (Cascading Style Sheets) sınıfları, HTML (Hypertext Markup Language) veya XML (Extensible Markup Language) belgelerinde kullanılan öğelerin görünümlerini tanımlayan bir yönetim sistemidir. CSS sınıfları, belge içindeki öğelerin görünümlerine uygulanacak stil kurallarını tanımlar. Örneğin, bir belge içindeki tüm başlıkların yazı tipi ve rengini değiştirmek istiyorsanız, bu öğeler için bir CSS sınıfı oluşturabilir ve bu sınıfı belge içindeki tüm başlık öğelerine uygulayabilirsiniz. CSS sınıfları, HTML veya XML belgelerinde class özniteliği kullanılarak tanımlanır.

Örneğin:


<p class="title">Bu bir başlıktır</p>

<p class="title">Bu bir başlıktır</p>

Bu örnekte, “title” sınıfı adı verilen bir CSS sınıfı tanımlanmıştır ve “p” öğesi için uygulanacak stil kurallarını tanımlar. title sınıfını uygulayan örnek CSS kodu da aşağıdaki gibi olacaktır.


/* Bu bir CSS sınıfı örneğidir */
.title {
  font-size: 20px;
  color: blue;
}

/* Bu bir CSS sınıfı örneğidir */

.title {

font-size: 20px;

color: blue;

}

Bu örnekte, “title” adı verilen bir CSS sınıfı tanımlanmıştr. Bu sınıf, font boyutunu 20px ve renk olarak mavi olarak belirlemektedir.

İçindekiler

CSS Sınıf Örnekleri

Basit bir kaç tane CSS sınıf örneği ile başlayalım.

Aşağıda, 10’dan fazla CSS sınıfı örneği ve bunların HTML dosyalarında nasıl kullanılacağı verilmiştir:

Örnek 1: .baslik: Bu sınıf, bir başlığı kalın ve büyük bir fontla gösterir.


<!-- CSS Kodu-->
<style>
    .baslik {
        font-size: 32px;
        font-weight: bold;
    }
</style>

<!--HTML Kodu-->
<h1 class="baslik">Bu bir örnek başlıktır</h1>

<style>

.baslik {

font-size: 32px;

font-weight: bold;

}

</style>

<h1 class="baslik">Bu bir örnek başlıktır</h1>

Örnek 2: .alt-baslik: Bu sınıf, bir alt başlığı kalın ve orta büyüklükte bir fontla gösterir.


<!-- CSS Kodu-->
<style>
    .alt-baslik {
        font-size: 24px;
        font-weight: bold;
    }
</style>

<!--HTML Kodu-->
<h2 class="alt-baslik">Bu bir örnek alt başlıktır</h2>

<style>

.alt-baslik {

font-size: 24px;

font-weight: bold;

}

</style>

<h2 class="alt-baslik">Bu bir örnek alt başlıktır</h2>

Örnek 3: .paragraf: Bu sınıf, bir paragrafı normal bir font büyüklüğünden büyük gösterir.


<!-- CSS Kodu-->
<style>
    .paragraf {
        font-size: 18px;
    }
</style>

<!--HTML Kodu-->
<p class="paragraf">Bu bir örnek paragraftır</p>
<p >Bu bir örnek paragraftır</p>

<style>

.paragraf {

font-size: 18px;

}

</style>

<p class="paragraf">Bu bir örnek paragraftır</p>

<p >Bu bir örnek paragraftır</p>

Örnek 4: .link: Bu sınıf, bir linki yeşil ve altı çizgili gösterir.


<!-- CSS Kodu-->
<style>
 .link {
  color: green;
  text-decoration: underline;
}
</style>

<!--HTML Kodu-->
<a href="#" class="link">Bu bir örnek linktir</a>
<a href="#" >Bu bir örnek linktir</a>

<style>

.link {

color: green;

text-decoration: underline;

}

</style>

<a href="#" class="link">Bu bir örnek linktir</a>

<a href="#" >Bu bir örnek linktir</a>

Örnek 5: .resim-kutusu: Bu sınıf, bir resmi kırmızı bir çerçeveyle çevreler.


<!-- CSS Kodu-->
<style>
    .resim-kutusu {
        border: 2px solid red;
    }
</style>

<!--HTML Kodu-->
<img src="resim.jpg" class="resim-kutusu" alt="Resim">

<style>

.resim-kutusu {

border: 2px solid red;

}

</style>

Diğer Sınıf örnekleri

Örneğimizde başlık etiketlerini Ana başlık ve Altbaşlık olarak sınıflandıracağız ve özelliklerini değiştireceğiz. Örneğimizi incelediğimizde hem alt başlıklar için hemde ana başlıklar için <h1> etiketinin kullanıldığını fakat alt başlıklar ve ana başlıklar için class ismi verilerek CSS ile biçimlendirme işleminin gerçekleştiğini göreceksiniz.


<!doctype html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
        <style>
            .ana-baslik{
                font-size: 30px;
                background-color: red;
                border: 5px solid blue;
            }
            .alt-baslik{
                font-size: 25px;
                background-color: blue;
                color: white;
                margin-left: 20px;
            }
            
            p{
                color: blueviolet;
            }
        </style>
    </head>
    
    <body>
        <h1 class="ana-baslik">Ana Başlık 1</h1>
        <h1 class="alt-baslik">Alt Başlık 1</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <h1 class="ana-baslik">Ana Başlık 2</h1>
        <h1 class="alt-baslik">Alt Başlık 2</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <h1 class="ana-baslik">Ana Başlık 3</h1>
        <h1 class="alt-baslik">Alt Başlık 3</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

<style>

.ana-baslik{

font-size: 30px;

background-color: red;

border: 5px solid blue;

}

.alt-baslik{

font-size: 25px;

background-color: blue;

color: white;

margin-left: 20px;

}

color: blueviolet;

}

</style>

</head>

<body>

<h1 class="ana-baslik">Ana Başlık 1</h1>

<h1 class="alt-baslik">Alt Başlık 1</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</p>

<h1 class="ana-baslik">Ana Başlık 2</h1>

<h1 class="alt-baslik">Alt Başlık 2</h1>

<p>

</p>

<h1 class="ana-baslik">Ana Başlık 3</h1>

<h1 class="alt-baslik">Alt Başlık 3</h1>

<p>

</p>

</body>

</html>

Ekran Çıktısı:

Örnek 2:

İkinci örneğimizde <div> etiketlerinden faydalanalım. 9 tane kutu ekleyerek bu kutulardan 1,3,5,7 ve 9. kutulara bir sınıf ismi, geri kalan kutulara da farklı bir sınıf ismi verelim. Örneğimizde k1 ve k2 isimlerini vereceğiz. Daha sonra bu kutulara renklendirme, kenar stili verme, boşluk (margin) ayarlama vb. özellikler uygulayalım.


<!doctype html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
        <style>
            
            .k1{
                width: 150px;
                height: 150px;
                border-color: blue;
                border-width: 3px;
                border-style: solid;
                background-color: palevioletred;
                float: left;
                margin: 5px;
            }
            .k2{
                width: 150px;
                height: 150px;
                border-color: red;
                border-width: 3px;
                border-style: dotted;
                background-color:cornflowerblue;
                float: left;
                margin: 5px;
            }
            
        </style>
    </head>
    
    <body>
        
        <div class="k1"></div>
        <div class="k2"></div>
        <div class="k1"></div>
        <div class="k2"></div>
        <div class="k1"></div>
        <div class="k2"></div>
        <div class="k1"></div>
        <div class="k2"></div>
        <div class="k1"></div>
        
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

<style>

.k1{

width: 150px;

height: 150px;

border-color: blue;

border-width: 3px;

border-style: solid;

background-color: palevioletred;

float: left;

margin: 5px;

}

.k2{

width: 150px;

height: 150px;

border-color: red;

border-width: 3px;

border-style: dotted;

background-color:cornflowerblue;

float: left;

margin: 5px;

}

</style>

</head>

<body>

</body>

</html>

Ekran Çıktısı:

CSS Sınıf Örnekleri

Diğer Sınıf örnekleri

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin