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

sdkbyrm · 23 Aralık 2020

Bu örneğimizde CSS ile sınıf seçici kullanımını göreceğiz. Ö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ı:

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

sdkbyrm