Css etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Css etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Çok Kullanılan Css Kodları ve Anlamları
Css ile yapabileceğimiz tasarımların sınırı yoktur. Tabi bu sınır sizin yaratıcılık ve becerilerinizle doğru orantılı uzar. Css kodlamak için hemen tüm css kodlarınızı ezberlemenize gerek yoktur. Sadece işin mantığını çözün ve gerekli kaynaklardan yardım alın. Örneğin bu yazımdaki çok kullanılan css kodları sizin çok işinize yarayacaktır.
Arkaplan
background-image:url(resim.uzantı); - arkaplana resim ekler
background-color:renk kodu; - arkaplan rengini belirler
background-repeat: repeat veya no-repeat; - arkaplanın tekrarlanıp tekrarlanmayacağını belirler.
Yazı
color: renk kodu; - yazı rengini belirler
font-size: large; - yazının boyutunu büyük yapar
font-family: verdana; - yazının tipini verdana yapar.
font-weight: bold; - yazıyı kalınlaştırır.
Link
a: - Linkin ilk durumudur.
a-hover: - Linkin üzerine fareyi getirdiğimizde ki durumdur.
a-active: Linke tıkladığımız andaki durumdur.
a-visited: Linkin tıklandıktan sonra alacağı durumdur.
Devamını Oku
Arkaplan
background-image:url(resim.uzantı); - arkaplana resim ekler
background-color:renk kodu; - arkaplan rengini belirler
background-repeat: repeat veya no-repeat; - arkaplanın tekrarlanıp tekrarlanmayacağını belirler.
Yazı
color: renk kodu; - yazı rengini belirler
font-size: large; - yazının boyutunu büyük yapar
font-family: verdana; - yazının tipini verdana yapar.
font-weight: bold; - yazıyı kalınlaştırır.
Link
a: - Linkin ilk durumudur.
a-hover: - Linkin üzerine fareyi getirdiğimizde ki durumdur.
a-active: Linke tıkladığımız andaki durumdur.
a-visited: Linkin tıklandıktan sonra alacağı durumdur.
Css Kodu Nasıl Yazılır? - Html Div Kullanımı
Css kodu yazmanın 3 farklı yöntemi vardır.
Birincisi:
.csskodu{
kodlar
}
İkincisi:
#csskodu{
kodlar
}
Üçüncüsü:
csskodu{
kodlar
}
bu komutların kullanımı html sayfasında farklıdır fakat alacağımız sonuçlar aynıdır. Biraz kafanız karıştıysa yazının devamını okumaya devam edin :).
Birincisinin html kodu:
<div class="csskodu">Kodlar</div>
İkincisinin html kodu:
<div id="csskodu">Kodlar</div>
Üçüncüsünün html kodu:
<csskodu>kodlar</csskodu>
yani buradan anlayacağımız divde kullanacağımız ismi belirtirken nokta "." ile başlarsak div class oluyor, # (diyez) işareti olarak başlarsak div id oluyor, başına bir işaret koymuyorsak aynı <center> gibi kullanabiliyoruz. Biz genellikle class olanını yani nokta ile başlayanını tercih ediyoruz fakat diğerleriyle arasında bir fark yoktur.
Öyleyse şimdi kodları yazmaya başlayalım.
Öncelikle css dosyasını açalım ve şu kodları ekleyelim;
.baslangic{
background-color:red; /*Arkaplan rengini belirtir.*/
width:150px; /*Genişliğini belirtir.*/
height:150px; /*Uzunluğunu belirtir.*/
border-style: solid; /*Kenarlık türünü belirtir.*/
border-width: 1px; /*Kenarlık kalınlığını belirtir.*/
border-color: black; /*Kenarlık rengini belirtir.*/
color:white; /*Yazı rengini belirtir.*/
}
Şimdi html sayfamızı açalım ve <body> </body> etiketleri arasına şu kodu ekleyelim;
<div class="baslangic">Merhaba Mars</div>
Sonuç:
Yazı rengi beyaz olan, siyah, 1px kalınlığında, solid türünde çerçeveli kırmızı bir kutu eklemiş olduk.
Eee bu yazıyı 1 saattir okuyorum kardeşim bu muydu? Diyecek olursanız; unutmayın emeklenmeden yürünmüyor :).
Bunları yapmadan önce Html Sayfasına Css Tanımlama yazımı da okumalısınız.
Devamını Oku
Birincisi:
.csskodu{
kodlar
}
İkincisi:
#csskodu{
kodlar
}
Üçüncüsü:
csskodu{
kodlar
}
bu komutların kullanımı html sayfasında farklıdır fakat alacağımız sonuçlar aynıdır. Biraz kafanız karıştıysa yazının devamını okumaya devam edin :).
Birincisinin html kodu:
<div class="csskodu">Kodlar</div>
İkincisinin html kodu:
<div id="csskodu">Kodlar</div>
Üçüncüsünün html kodu:
<csskodu>kodlar</csskodu>
yani buradan anlayacağımız divde kullanacağımız ismi belirtirken nokta "." ile başlarsak div class oluyor, # (diyez) işareti olarak başlarsak div id oluyor, başına bir işaret koymuyorsak aynı <center> gibi kullanabiliyoruz. Biz genellikle class olanını yani nokta ile başlayanını tercih ediyoruz fakat diğerleriyle arasında bir fark yoktur.
Öyleyse şimdi kodları yazmaya başlayalım.
Öncelikle css dosyasını açalım ve şu kodları ekleyelim;
.baslangic{
background-color:red; /*Arkaplan rengini belirtir.*/
width:150px; /*Genişliğini belirtir.*/
height:150px; /*Uzunluğunu belirtir.*/
border-style: solid; /*Kenarlık türünü belirtir.*/
border-width: 1px; /*Kenarlık kalınlığını belirtir.*/
border-color: black; /*Kenarlık rengini belirtir.*/
color:white; /*Yazı rengini belirtir.*/
}
Şimdi html sayfamızı açalım ve <body> </body> etiketleri arasına şu kodu ekleyelim;
<div class="baslangic">Merhaba Mars</div>
Sonuç:
Yazı rengi beyaz olan, siyah, 1px kalınlığında, solid türünde çerçeveli kırmızı bir kutu eklemiş olduk.
Eee bu yazıyı 1 saattir okuyorum kardeşim bu muydu? Diyecek olursanız; unutmayın emeklenmeden yürünmüyor :).
Bunları yapmadan önce Html Sayfasına Css Tanımlama yazımı da okumalısınız.
Html Sayfasına Css Tanımlama
Daha önceki yazımda belirttiğim üzere Html, Css olmadan pek bir işinize yaramaz. Tamam o zaman ben Css öğreneceğim diyorsanız ilk önce Html sayfasına Css eklemeyi öğrenmeniz gerekiyor.
Css kodlarımızı Html sayfasına yansıtmanın birden fazla yolu vardır. Bunlardan bazıları şunlardır:
1) Html sayfamızda <head> </head> etiketleri arasına;
<style type="text/css">
Css Kodları Buraya Yazılacak
</style>
eklemek.
2) Uzantısı .css olan bir metin dosyası içine tüm css kodları yazmak ve head etiketleri arasına;
<link rel="stylesheet" type="text/css" href="Buraya css dosyasının adresini yazın" />
ekleyerek css'i çağırmak.
Devamını Oku
Css kodlarımızı Html sayfasına yansıtmanın birden fazla yolu vardır. Bunlardan bazıları şunlardır:
1) Html sayfamızda <head> </head> etiketleri arasına;
<style type="text/css">
Css Kodları Buraya Yazılacak
</style>
eklemek.
2) Uzantısı .css olan bir metin dosyası içine tüm css kodları yazmak ve head etiketleri arasına;
<link rel="stylesheet" type="text/css" href="Buraya css dosyasının adresini yazın" />
ekleyerek css'i çağırmak.
Kaydol:
Kayıtlar (Atom)



