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:
|
1 2 3 |
<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.
|
1 2 3 4 5 6 7 |
/* 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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- CSS Kodu--> <style> .baslik { font-size: 32px; font-weight: bold; } </style> <!--HTML Kodu--> <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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 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> |
Örnek 3: .paragraf: Bu sınıf, bir paragrafı normal bir font büyüklüğünden büyük gösterir.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 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> |
Örnek 4: .link: Bu sınıf, bir linki yeşil ve altı çizgili gösterir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 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> |
Örnek 5: .resim-kutusu: Bu sınıf, bir resmi kırmızı bir çerçeveyle çevreler.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- CSS Kodu--> <style> .resim-kutusu { border: 2px solid red; } </style> <!--HTML Kodu--> <img src="resim.jpg" class="resim-kutusu" alt="Resim"> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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> |
Ekran Çıktısı:
