CSS Örnekleri

S

sdkbyrm

webmasterfrm
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Ticaret: 0 / 0 / 0
Bu yazıda CSS ile bir <div> etiketini stil özelliklerini kullanarak adım adım değiştireceğiz. Bu yazıda hem CSS Örnekleri olması hemde CSS dersi için adım adım bir referans sağlayacaktır. En basit örneklerden ve en basit seçicilerden başlayıp daha karmaşık ve zor örneklere kadar bir çok örnek bulacak ve uygulayacaksınız.


CSS kodlarını yazarken aşağıdaki HTML belgesini referans alarak CSS kodlarını yazdım. Eğer sizde kodları uygulamak isterseniz. Aşağıdaki HTML belgesinin <style> etiketini her örnek için güncelleme yapmanız gerekecektir.



Kullanılacak HTML Belgesi


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Örnekler</title>
<style>
/*tüm stil kodlarını bu kısımda yazacağız*/
</style>
</head>
<body>
<!-- buradaki div etiketinin stilini değiştireceğiz. -->
<div id="kutu1" class="kutu">
<h2>KUTU 1</h2>
</div>
<div id="kutu2" class="kutu">
<h2>KUTU 2</h2>
</div>

</body>
</html>


CSS ÖRNEKLERİ​



Örnek 1: <div> etiketlerinin yazı rengini kırmızı olarak değiştirin. (Yazı rengi için color özelliği kullanılır.)


1
2
3
4
5
6
7
<style>
div{
color:red;
}
</style>


Örnek 2: <div> etiketlerinin yazı rengini beyaz, arkaplan rengi kırmızı yapın.( arkaplan rengi background-color ile verilir)


1
2
3
4
5
6
7
8
<style>
div{
color:white;
background-color: red;
}
</style>


Örnek 3: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (genişlik için width, yükseklik için height özelliği kullanılır)


1
2
3
4
5
6
7
8
9
10
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
}
</style>


Örnek 4: Yukarıdaki kodlara ek olarak yazı fontunu sans şerif yapın


1
2
3
4
5
6
7
8
9
10
11
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
font-family: sans-serif;
}
</style>


Örnek 4: Yukarıdaki css özelliklerine ek olarak <div> etiketinine yukarıdan ve sağdan 5px kaydırılmış mavi renkte gölge ekleyin


1
2
3
4
5
6
7
8
9
10
11
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
box-shadow: blue 5px 5px;
}
</style>


Örnek 5: Yukarıdaki kodlara ek olarak eklenen gölgenin 10px sonra bulanıklaşmasını sağlayın.


1
2
3
4
5
6
7
8
9
10
11
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
box-shadow: blue 5px 5px 10px;
}
</style>


Örnek 6: Yukarıdaki kodlara ek olarak <div> içindeki yazının yatay olarak ortalanmasını sağlayın. (yazıyı yatayda ortalamak için text-aling özelliği kullanılır)


1
2
3
4
5
6
7
8
9
10
11
12
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
box-shadow: blue 5px 5px 10px;
text-align: center;
}
</style>


Örnek 7: Yukarıdaki kodlara ek olarak yazıyı dikeyde ortalayın. (Nesneleri yatayda ortalamak CSS ile kolayken dikeyde ortalamak için flex nesneleri yada mevcut yükseklik bilinyorsa line-hegiht değeri mevcut yükseklik olarak ayarlanarak yapılıyor.


1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
box-shadow: blue 5px 5px 10px;
text-align: center;
line-height: 150px; /* height ile aynı girilir*
}
</style>


Örnek 8: class değeri kutu olan etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi class seçici kullanarak seçmek için class adının başına . (nokta) işareti konulur.)


1
2
3
4
5
6
7
8
9
10
<style>
.kutu{
color:white;
background-color: red;
width: 200px;
height: 150px;
}
</style>


Örnek 9: id değeri kutu2 olan etiketin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi id seçici kullanarak seçmek için id adının başına # (diyez) işareti konulur. Ayrıca her sayfada aynı id değerinden ikincisi olamaz)


1
2
3
4
5
6
7
8
9
10
<style>
#kutu1{
color:white;
background-color: red;
width: 200px;
height: 150px;
}
</style>


Örnek 10: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak ayarlayıp kutuların yan yana gelmesini sağlayın. ( etiketlerin yan yana gelmesi için bir çok farklı yöntem bulunmakta fakat bu örnek nesnelerin soldan sağa doğru dizmek için float:left seçeneğini kullanabilirsiniz.


1
2
3
4
5
6
7
8
9
10
11
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
float:left;
}
</style>


Örnek 11: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px , kutular arasındaki boşluğu 10px yapıp kutuların yan yana gelmesini sağlayın. (Nesnelerin arasında boşluk bırakmak için margin değeri kullanılır. tekli, ikili ve dört değerli kullanımı mevcuttur. En yaygın kullanımı margin:yukarıdan sağdan alttan soldan; şeklidedir.


1
2
3
4
5
6
7
8
9
10
11
12
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
float:left;
margin:10px;
}
</style>


Örnek 12: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px ,kutular arasındaki boşluğu yukarıdan 10px, aşağıdan 5px soldan ve sağdan 3px olarak ayarlayın.


1
2
3
4
5
6
7
8
9
10
11
12
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
float:left;
margin:10px 3px 5px 3px;
}
</style>


Örnek 13: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin iç boşluğunu 25px olarak ayarlayın. (İç boşluk için padding kullanılır. Ayrıca box-model ilkesine göre nesne nesnenin ölçüleri verilen genişlik yada yükseklik değeri + çerçeve + iç boşluklar olarak ayarlanır.)

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt)


1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
float:left;
margin:10px 3px 5px 3px;
padding:25px;
}
</style>


Örnek 14: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin çerçevesini siyah renkte 2px kalınlığında solid deseninde yapın. (Çerçeve için border özelliği kullanılır ve üç değeri aynı anda girilebilir.

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ) + 2px(çerçeve sol) +2px çerçeve sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt) + 2px(çerçeve üst) +2px çerçeve alt)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
div{
color:white;
background-color: red;
width: 200px;
height: 150px;
float:left;
margin:10px 3px 5px 3px;
padding:25px;
border: #000000 solid 2px;
}
</style>


Örnek 15: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin toplam genişliği witdth ve height içinde kullanılan değerler olmasını sağlayın. (genişlik 200px yükseklik 150px)
Yukarıdaki gibi biçimlendirilmiş <div> etiketine vermiş olduğumuz width yada height değerleri ile border ve padding değerleri nesnenin toplam genişlik değerini oluşturduğunu daha önceki örneklerde açıklamıştım. Burada istersek verdiğimiz width yada heigth değerlerini toplam genişlik yada yükseklik olarak ayarlayabiliriz. Bunun için box-sizing özelliğini kullanarak verilen değerleri sabitleyebiliriz.
 
Forum da cevap yazabilmeniz için Giriş Yapın ve Kayıt Ol'un.
Üst