Selam Dostlar , Bugün Sizlere HTML'in Olmazsa Olmazı CSS'yi Tanıyalım 
:
(~) Colors / Renkler
Dünyadaki Tüm Renkleri CSS de Konuştura Bileceğimizi Biliyormuydunuz ? , Evet Renk Kodlarıyla Bunu Yapa Biliriz Tabikide Renk Kodlarıyla Yanaşı Renk İsimleri ve RGB Kodlarınıda Renkte Konuştura Biliyoruz , Örnek Verelim Hemen ;
Yazı Oluşturalım
Şimdi Üzerinde CSS'yi Deneyelim ...
Artık Yazımız Yeşil Renk Almış Durumda Yaptığımız İşlemse ;
h1 Belirtiyoruz ve Süslü Parantez Açıyoruz , Color: (renk); Yazdığımızda İşlem Bitiyor ve Tabikide Süslü Parantezimi Kapatıyoruz ..
Şimdi Aynı İşlevi RGB İle Deneyelim ..
Aynı İşlev Sadece Renk İsminin Yerine RGB Kodlarını Ekliyoruz ...
Sallama Bir RGB Kodu Diyorum ; rgb(225, 92, 41) , Turuncu Renk Aldık ...
Eklemeyi Göstereyim ;
Gördüğünüz Gibi ;
Şimdi Renk Etiketiyle Bir Renk Alalım ...
Turuncu Rengin , Renk Etiketi[ COLOR="Orange"] ( #ff6343 ) , Bunu Kodumuza Eklersekde Şöyle ;
(~) Çerçeve / Border
Bir Çok Çerçeve Türü Mevcuttur , Benim En Sevdiğim "Double" Yani İki Katlı Bir Çerçeve Hemen Test Edelim ...
Kodumuz ;
Test ;
Çerçeve Genişliği Ayarlamak İçin ;
4px Yerine İstediğiniz Rakamı Yaza Bilirsiniz ...
Deneyelim ...
Çerçeve Rengini Belirleyelim ;
Artık Çerçevemiz Kırmızı Renkdedir ...
Çerçevemizi Şekillendirelim ;
Artık Çerçevimizin Soldan 6px Kısımı Kırmızıdır ve Geriye Kalan Hissesi ( Arkaplanı ) Mavidir ...
Çerçeve Şekili ;
Çerçevimizin Köşelerini Esnetmek İçin Yani Daire Yapmak İçin ;
Kullanıyoruz ...
(~) Margin(s) / Kenar(lar)
Bu Kod Sayesinde Projemizin Belirtilen Kısımının Yerini Değişmemizi Sağlıyor ...
top - bottom - right - left : Bunlarla Şeklimizi Haraketlendire Biliyoruz ...
Örnek:
(~) Padding(s) / Esnekleştirme(ler)
Arkadaşlar Padding Şekilimizin Belirtilen Kısımdan Esnekleştirilmesine Yarıyor ..
Örnek :
Bundada Margindeki Gibi ( top - bottom - right - left ) Kullanılıyor ...
Örnek Verelim :
(~) Background / Arkaplan
Tasarımımız ve ya Body'miz Arkaplansız Düşünmek Korkunç
Arkaplana Renk Vere Biliriz ve ya Resim Ekleye Biliriz ...
Ben Bu Sefer Çerçeve ve Body Üzerinde Göstereceğim ;
:
(~) Colors / Renkler
Dünyadaki Tüm Renkleri CSS de Konuştura Bileceğimizi Biliyormuydunuz ? , Evet Renk Kodlarıyla Bunu Yapa Biliriz Tabikide Renk Kodlarıyla Yanaşı Renk İsimleri ve RGB Kodlarınıda Renkte Konuştura Biliyoruz , Örnek Verelim Hemen ;
Yazı Oluşturalım
Kod:
<h1> Herorahim </h1>Şimdi Üzerinde CSS'yi Deneyelim ...
Kod:
<h1> Herorahim </h1>
*********
h1 {
color: green;
}
</style>Artık Yazımız Yeşil Renk Almış Durumda Yaptığımız İşlemse ;
h1 Belirtiyoruz ve Süslü Parantez Açıyoruz , Color: (renk); Yazdığımızda İşlem Bitiyor ve Tabikide Süslü Parantezimi Kapatıyoruz ..
Şimdi Aynı İşlevi RGB İle Deneyelim ..
Aynı İşlev Sadece Renk İsminin Yerine RGB Kodlarını Ekliyoruz ...
Sallama Bir RGB Kodu Diyorum ; rgb(225, 92, 41) , Turuncu Renk Aldık ...
Eklemeyi Göstereyim ;
Kod:
<h1> Herorahim </h1>
*********
h1 {
color: rgb(225, 92, 41);
}
</style>Gördüğünüz Gibi ;
Şimdi Renk Etiketiyle Bir Renk Alalım ...
Turuncu Rengin , Renk Etiketi[ COLOR="Orange"] ( #ff6343 ) , Bunu Kodumuza Eklersekde Şöyle ;
Kod:
<h1> Herorahim </h1>
*********
h1 {
color: #ff6343;
}
</style>(~) Çerçeve / Border
Bir Çok Çerçeve Türü Mevcuttur , Benim En Sevdiğim "Double" Yani İki Katlı Bir Çerçeve Hemen Test Edelim ...
Kodumuz ;
Kod:
Border: Double;Test ;
Kod:
<h1> Herorahim </h1>
*********
h1 {
color: #ff6343;
Border: Double;
}
</style>Çerçeve Genişliği Ayarlamak İçin ;
Kod:
Border-width: 4px;4px Yerine İstediğiniz Rakamı Yaza Bilirsiniz ...
Deneyelim ...
Kod:
<h1> Herorahim </h1>
*********
h1 {
color: #ff6343;
Border: Double;
Border-width: 4px;
}
</style>Çerçeve Rengini Belirleyelim ;
Kod:
border-color: red;Artık Çerçevemiz Kırmızı Renkdedir ...
Çerçevemizi Şekillendirelim ;
Kod:
<h1> Herorahim </h1>
*********
h1 {
border-left: 6px solid red;
background-color: blue;
}
</style>Artık Çerçevimizin Soldan 6px Kısımı Kırmızıdır ve Geriye Kalan Hissesi ( Arkaplanı ) Mavidir ...
Çerçeve Şekili ;
Çerçevimizin Köşelerini Esnetmek İçin Yani Daire Yapmak İçin ;
Kod:
border-radius: 3,5px;Kullanıyoruz ...
(~) Margin(s) / Kenar(lar)
Bu Kod Sayesinde Projemizin Belirtilen Kısımının Yerini Değişmemizi Sağlıyor ...
Kod:
margin-top: 10px;top - bottom - right - left : Bunlarla Şeklimizi Haraketlendire Biliyoruz ...
Örnek:
Kod:
<h1> Herorahim </h1>
*********
h1 {
border: 4px solid red;
margin-top: 100px;
}
</style>(~) Padding(s) / Esnekleştirme(ler)
Arkadaşlar Padding Şekilimizin Belirtilen Kısımdan Esnekleştirilmesine Yarıyor ..
Örnek :
Kod:
padding-top: 50px;Bundada Margindeki Gibi ( top - bottom - right - left ) Kullanılıyor ...
Örnek Verelim :
Kod:
<h1> Herorahim </h1>
*********
h1 {
border: 4px solid red;
margin-top: 100px;
padding-top: 50px;
padding-bottom: 50px;
}
</style>(~) Background / Arkaplan
Tasarımımız ve ya Body'miz Arkaplansız Düşünmek Korkunç
Arkaplana Renk Vere Biliriz ve ya Resim Ekleye Biliriz ...
Ben Bu Sefer Çerçeve ve Body Üzerinde Göstereceğim ;
Kod:
[COLOR="lime"]<h1> Herorahim </h1>
*********
h1 {
border: 4px solid red;
margin-top: 100px;
padding-top: 50px;
padding-bottom: 50px;
Background: grey;
}
body {
background: green;
}
</style>Gördüğünüz Gibi Tüm Ekran Yeşil - Çerçeve Grey Oldu ...
Arkaplana Resim Eklemek İçin ;
Kod:
background-image: url("bubirlink.com/resim/foto.png");
Kod:
background-repeat: no-repeat;Kodunu Kullanıyoruz ...
(~) Text / Yazı
Yazdığımız Yazının Yerini Beğenmediyseniz Bunu Ayarlaya Bilirsiniz
: , (rakam)px İlede Ayarlaya Biliriz Ancak Ben Normal Sözcükleri Tercih Ediyorum ..
Kod:
text-align: right;
Kod:
<h1> Herorahim </h1>
*********
h1 {
border: 4px solid red;
margin-top: 100px;
padding-top: 50px;
padding-bottom: 50px;
text-align: right;
}
body {
background: green;
}
</style>Yazımıza Dekorasyonda Vere Biliyoruz , Örn.( Yazımızın Üzerine Çizgi Çekmek İstiyorsak )
Kod:
text-decoration: line-through;Tabi Yazımızın Büyük~Küçüklüğünüde Ayarlaya Biliriz ...
(~) İcons / İkonlar
CSS'de İkonlar Genellikle fa - fas - ca gibi sözcüklerle belirlenir , örn. ( Belge ) " fas-fa file " Kullanacağız ..
Kod:
<i class="fas fa-file"></i>Kodunuzun Üst Kısımına ;
Kod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">(~) Links / Adresler
Adresimizi :
Kod:
<a href="sitem.com">İnternet Sitem</a>Böyle Kullanıyoruz ve Adresimiz Belirleniyor ..
Bunu Şekillendirmek Mümkün ...
Kod:
<a href="default.asp">This is a link</a>
*********
a {
color: grey;
}
</style>Artık Adresimiz Grey Renk Aldı , Altındaki Çizgiyi Kaldırmak İstiyorsak
Kod:
text-decoration: none;Kodunu Kullanıyoruz ...
(~)(~) CSS Temelleri (~)(~)
(~) Hover
Örnek Verelim h1 Yazımız var ve Mouse İle Üzerine Gelince Yeşil Olsun İstiyoruz ...
Bunu Böyle Yapıcaz ;
Kod:
<h1> Herorahim </h1>
*********
h1:hover {
color: orange;
}
</style>Background - Text Family vbs. Üzerinde Uygulaya Biliriz ...
(~) NOT (~)
1-) CSS Kodumuzu Girince ********* </style> Unutmayın Sakın
2-) CSS Kısımında Ön Kodumuzdan Sonra Çift Nokta ( : ) Sonda İse Mutlaka Süslü Nokta ( ; ) Olacaktır
3-) Başka Bir Şey Hatırlarsam Yazarım
Arkadaşlar Konuya Saatlarla Emek Verdim , Umarım Teşekkürleri Görüpte Sevine Bilirim
:
