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

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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ı:

1608735579801.png
Ö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ı:

1608735600778.png
 
Üst Alt