cssdersleri
Merhaba bu sayfamızda sizlere CSS kod yazmayı öğreteceğiz. İyi Dersler
1.Dersimiz: Basit CSS Örneği
Aşağıda çok basit bir Html sayfası ve buna uygun CSS örneğini görüyorsunuz. Temel seviye olduğu için CSS dosyası ayrı bir sayfada tutulmak yerine aynı dosyanın başlık kısmında <style></style> tagları arasında tanımlanmıştır.
CSS stilleri yazılırken şu kurala göre yazılır:
eleman-tanımlayıcı { özellik:değeri ; }
Aşağıdaki Css örneği başlık yazısının rengini kırmızı yapar:
h1{ color:red}
Bu örneğe uygun bir html sayfası aşağıda gösterilmiştir. Bu kodları Not defterine yapıştırıp farklı kaydet seçeneği ile HTML uzantısı ile kaydedin.
<html>
<style>
h1{ color:red}
</style>
<h1>Başlık yazısı</h1>
</html>
Dosyaya çift tıkladığınızda kırmızı yazı ile başlık yazılmış olduğunu göreceksiniz.
2.Dersimiz: CSS Kullanım Şekilleri
CSS TANIMLAMA
Css tanımlamarı kullanılırken iki farklı şekilde yazılabilir. Bunladan birincisi saydadaki her elemanı kapsayan tag yazımıdır:
- Sayfadaki Tag adları kullanarak Css yazılabilir
Aşağıdaki gibi bir tanım yapıldığında sayfadaki tüm linklerin rengi değişir.
a{color:blur}
- Css için isim vererek özel tanımlamalar yapılabilir:
Bu tip Css tanımlamada nokta ile başlayan isimler kullanılır böylece sayfadaki tüm linklerin rengini bozmak yerine istenen birkaç elemanın rengi değiştirilebilir.
.renklilink{ color:yellow}
sayfa içersinde ise aynı isimle çağrılması gerekir.
CSS ÇAĞIRMA
Eğer Css bilgilerini ayrı bir dosyada tutacaksanız aşağıdaki gibi Html sayfasının başında yazmanız gerekir.
<head>
<link rel="stylesheet" type="text/css" href="ahmet.css" />
</head>
ahmet.css isimli dosyada herhangi bir <style> yazısı olması gerekmez. direkt css tanımları yazılır.
3.Dersimiz: CSS Relative ve Absolute İlişkisi
Css kullanarak cisimlerin hizalamasını yaparken düşülen hatalarda nbiri absolute ve relative ilişkisidir.','Css öğrenmeye yeni başlayanlar için bilinmesi gereken önemli konulardan biri iç içe iki cismin hizalanması olayıdır.
Örnek: sayfamızda bir çerçeve var diyelim. bu çerçeve içine menü yerleştirmek istiyoruz ama menünün sağa dayalı olmasını istiyoruz. float yapabilirsiniz ama float havada kaldığı için genel yapıya terslik yapar. float yapmadan bunu elde etmenin yolu.
Css dosyası:
.cerceve{ position:relative}
.menu{position:absolute;right:0}
html ise şöyle olacaktır:
<div class="cerceve"><div class="menu"></div></div>
4.Dersimiz: CSS ile Sayfayı Ortalamak
DIV ortalamak
Tablo kullanmadan Css ile herhangi bir div bölümünü ortalamak istiyorsanız. margin kullanabilirsiniz.
html ise şöyle olur:
<div class="ortala"></div>
Yazıyı ortalamak
Yazıyı ortalamak için ise text-align kullanabilirsiniz:
Yazıyı bulunduğu yerde düşey olarak ortalamak için ise aşağıdaki gibi lin height kullanıyoruz: örneğin yazı 30px yüksekliğinde bir çerçeve içinde ise, yazı alanı da 30px yapıldığında yazı ortalanır.
.menu{line-height:30px }
5.Dersimiz: CSS3 Transitions Özelliği
Bu Dersimiz Videolu Olacaktır . İyi SeyirlerCSS3 Transitions özelliğini kullanarak standart liste menümüze bir hareket katıyoruz... Artık menümüze belirli özelliklerini, animasyonlu hale getirebiliyoruz...
6.Dersimiz: CSS3 Text-Shadow Özelliği
Bu Ders Videolu . İyi Seyirler