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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div{ color:white; background-color: red; width: 200px; height: 150px; float:left; margin:10px 3px 5px 3px; padding:25px; border: #000000 solid 2px; box-sizing: border-box; } </style> |
Örnek 16: Yukarıdaki kodlara ek olarak #kutu2 nesnesini 45 derece sola doğru çevirin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div{ color:white; background-color: red; width: 200px; height: 150px; float:left; margin:10px 3px 5px 3px; padding:25px; border: #000000 solid 2px; box-sizing: border-box; } #kutu2{ transform: rotate(-45deg); } </style> |
Örnek 17: Yukarıdaki kodlara ek olarak #kutu1 içinde yazıya siyah gölge ekleyin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> div{ color:white; background-color: red; width: 200px; height: 150px; float:left; margin:10px 3px 5px 3px; padding:25px; border: #000000 solid 2px; box-sizing: border-box; } #kutu2{ transform: rotate(-45deg); } #kutu1{ text-shadow:black 3px 3px 2px; /* renk x y bulanıklık*/ } </style> |
Yukarıdaki uygulamalardan farklı olarak
Örnek 18: CSS Tablo Biçimlendirme Örneği
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!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> #personel { border-collapse: collapse; width: 100%; background-color: #ecf0f1; font-weight: bold; } #personel td, #personel th { padding: 8px; } #personel th { background: #3498db; padding-top: 12px; padding-bottom: 12px; text-align: left; color: #fff; } #personel td{ color:#2c3e50; } </style> </head> <body> <table id="personel"> <tr> <th>Sıra</th> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>1</td> <td>Asuman</td> <td>Göldağ</td> <td>29</td> </tr> <tr> <td>2</td> <td>Ünlüsoy</td> <td>Mansur</td> <td>49</td> </tr> <tr> <td>3</td> <td>Cansen</td> <td>Karaburun</td> <td>84</td> </tr> <tr> <td>4</td> <td>Ülküsel</td> <td>Özkahraman</td> <td>73</td> </tr> <tr> <td>5</td> <td>Funda</td> <td>Sığırcı</td> <td>38</td> </tr> <tr> <td>6</td> <td>Edibe</td> <td>Farımaz</td> <td>89</td> </tr> <tr> <td>7</td> <td>Uluer</td> <td>Akgül</td> <td>38</td> </tr> <tr> <td>8</td> <td>Tarımer</td> <td>Zımba</td> <td>60</td> </tr> <tr> <td>9</td> <td>Şule</td> <td>Alaca</td> <td>66</td> </tr> <tr> <td>10</td> <td>Hafız</td> <td>Bayduz</td> <td>38</td> </tr> </table> </body> </html> |
Örnek 19: CSS buton örneği
|
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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Örnekler</title> <style> button.ornek { -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; -ms-transition: all 0s ease-out; transition: all 0s ease-out; height: 35px; display: block; font-family: Arial, "Helvetica", sans-serif; font-size: 14px; color: #fff; text-decoration: none; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,0.4); padding: 4px 20px 0; margin: 10px auto; left: 30px; position: relative; cursor: pointer; border: none; border-radius: 5px; border-radius: 5px; border: solid 1px #2E4476; background: #3B5999; -webkit-box-shadow: 0px 5px 0px 0px #2E4476; box-shadow: 0px 5px 0px 0px #2E4476; } button.ornek:active { top: 3px; -webkit-box-shadow: 0px 2px 0px 0px #2E4476; box-shadow: 0px 2px 0px 0px #2E4476; } </style> </head> <body> <button class="ornek">Beğen!</button> </body> </html> |
Örnek 20: CSS HTML Form Örneği
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!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> #form-alan{ width: 600px; margin-top: 25px; } #form-alan input, #form-alan textarea { padding: 5px; width: 471px; font-family: Helvetica, sans-serif; font-size: 1.4em; margin: 0px 0px 10px 0px; border: 2px solid #ccc; } #form-alan textarea { height: 90px; } #form-alan textarea:focus, #form-alan input:focus { border: 2px solid #900; } #form-alan input[type="submit"] { width: 100px; float: right; border:3px solid #2980b9; background: #fff; color:#2980b9; } label { float: left; text-align: right; margin-right: 15px; width: 100px; padding-top: 5px; font-size: 1.4em; } </style> </head> <body> <div id="form-alan"> <form method="post" action="#"> <label for="Ad">Ad:</label> <input type="text" name="Ad" id="Ad" /> <label for="Soyad">Soyad:</label> <input type="text" name="Soyad" id="Soyad" /> <label for="Email">Eposta:</label> <input type="text" name="Email" id="Email" /> <label for="Mesaj">Mesaj:</label><br /> <textarea name="Mesaj" rows="20" cols="20" id="Mesaj"></textarea> <input type="submit" name="kaydet" value="Kaydet" /> </form> </div> </body> </html> |
