[RESIZE=900]
[/RESIZE]
CSS Nedir?
Html sayfaları biçimlendirmek için kullanılan teknolojiye CSS denir. Aşağıda sizlere css kodlarını html kodları ile birleştirmeyi, css yazım kurallarını ve ebeveyn mantığını anlatmaya çalışacağım.
Css Yazım Kuralları ve Standartları
seçici { özellik : alacağı değer }
Yukarıda yazılmış olan kod tüm paragraflardaki yazı renginin kırmızı olacağını söylüyor. Noktalı virgül ";" kullandığımıza dikkat etmişsinizdir. Özellikleri birbirinden ayırmak için koymalısınız. En son özelliğin sonuna koymaya gerek yok ama alışkanlıktan ben hep koyarım. Üstünde bulunan açıklamaya göre seçicimiz "p" yani paragraf, özellik "color" yani yazı rengi ve bu özelliğin alacağı değer de "red" yani kırmızı olarak ayarlanmış.
Eğer bir seçiciye birden fazla özellik vermek isterseniz;
şeklinde yapabilirsiniz.
Eğer istediğiniz birden fazla seçiciye aynı özellikleri uygulamaksa;
eklinde yapabilirsiniz. Yani araya "," koymanız gerekmektedir.
Css Kodlarını Sayfamıza Dahil Etme
Satır Düzeyinde Css Kodu Ekleme
Css özelliğini elementin içerisinde "style" özelliği ile belirtebilirsiniz. Öncelik kuralına göre diğerlerine göre ilk sıradadır. Yazım şekli şöyledir;
Sonuç:
CottonCandy
Sayfa İçi Css Kodu Ekleme
Sayfanın en üstünde "head" etiketleri arasına "style" etiketleri yerleştirilir ve css kodları bunların arasına yazılır. Bu şekilde yapılmış biçimlendirmeye sayfa içi biçimlendirme diyebiliriz.
Sonuç:
CottonCandy
Sayfa Dışı (Harici Dosyadan) Css Kodu Ekleme
Harici bir stil dosyası oluşturulur ve uzantısı ".css" olacak şekilde ayarlanır. "link" etiketi içerisinde "href" özelliğinde dosyanın yolu belirtilir. Aşağıda göreceli bir adres ile yol gösterilmiştir. Css dosyasında kodlar aynen yazılır.
index.html
stil.css
Sonuç :
CottonCandy
Seçiciler
Id(Tekil) Seçicisi
X)Html dökümanlarda elementlerin içerisinde bir id tanımlaması yapılır ve elemana bir isim verilir.(<div id="tasiyici"></div>) (X)Html kurallarına göre bir id isminden sayfada yalnızca bir tane olmalıdır. Bu yüzden tekil seçici dememiz gayet anlamlı olacaktır. Css içerisinden id tanımlaması yapılmış bir elemana ulaşmak gayet basittir. Id tanımlaması önüne "#" diyez işareti konarak bu tanımlama yapılabilir.
Class Seçicisi:
Class seçicisi ile birden fazla elemana uygulamak istediğiniz biçimlendirmeleri tek seferde yazıp istediğiniz kadar kullanabilirsiniz yada bir elemana birden fazla class uygulayabilirsiniz.
Html Kod:
Css Kod:
Örnekte katmanların boyutları farklı olduğu için id tanımlamaları içerisinde boyutlandırmalar yapıldı. Yazı rengi her ikisinde aynı olduğundan tek class tanımlaması ile bu işi hallettik, aynı zamanda katman2'de birden fazla class uygulayarak hem yazı hem zemin rengi değiştirildi.
Seçim işlemlerinde css, aynen bir soy ağacı mantığı ile çalışır. Yukarıda bir html dökümanın dom yapısı(soy ağacı) görülmektedir. Soy ağacının en üstünde "html" etiketi bulunuyor. Yani "html dede" demekte bir sakınca yok. "head" ve "body" etiketleri "html" in çocukları ve diğerleri de torunları olarak isimlendirilir. Bu yaptığımız tanımlar istediğimiz elemana ulaşabilmek için gereklidir.
Çocuk Seçici (">")
Bu seçim şekli ile bir elementin bir alt düzeyindeki element seçilir. Şöyle açıklayalım, 6 numaralı p elementini seçmek için;
"body" nin çocuğu olan "p" elementini seç demiş olduk. Eğer şöyle deseydik;
Hem 12 numaralı, hem de 13 numaralı "em" elementi seçilmiş olur. Ama şöyle demiş olsaydık;
Bu şekilde yazılırsa sadece 12 numaralı "em" elementi seçilmiş olur. Sanırım çocuk olayını anladık.
Torun Seçici (Boşluk Karakteri)
şeklinde bir şeçim yapıldığında 10,12,13 numaralı "em" elementleri seçilmiş olur. Bence daha fazla örneğe gerek yok anlaşılmıştır diye düşünüyorum.
Css pseudo (sözde) etiketler, sınıflar ve seçiciler
Pseudo element ve pseudo sınıf arasındaki farkı anlamaya çalışarak başlayalım. Aslında söylenmek istenen şey yapısı gereği bir etikete mi benziyor yoksa seçiciye mi? Mesela :first-line ilk satır anlamına geliyor ve öyle olmasa da bir etiket gibi davranıyor yada :hover fare üzerine geldiğinde gibi bir anlamı var ve bu da onu bir sözde sınıf yapıyor.
Bence özetle şöyle söylenebilir, css'e işlevsellik katan özellikler.
Elementler
Sınıflar
Seçiciler
Sprite Yöntemi Nedir?
Fare olayına bağlı olarak çalışan zemin resmi değiştirme olayı sırasında gecikmeler olabiliyor. Tabi ki resim dosyaları ayrı ise, sprite tekniğinde resmin her hali tek bir dosyada tutulur ve resmin belli bir bölgesi gösterilir. Bu da resmin yüklenmesi sırasında gerçekleşen gecikme problemini ortadan kaldırır. Çünkü tüm görünümler başlangıçta yüklenmiş durumdadır.
Dikkat edilmesi gereken önemli noktalar şunlardır; öncelikle genişlik ve yüksekliği belirtilmiş olan, block düzeyi bir eleman olmalıdır. Neme lazım overflow özelliğini "hidden" yaparız ki eleman dışına taşan bir şey olursa gizlenir. Son olarak background-position özelliğini kullanarak, resmin hangi bölgesinin gösterileceğini belirtiriz. Negatif değerler vererek resmi yukarıya ve sola çekebilirsiniz.
- - - Güncellendi - - -
css ilgili soruları olan sorabilir işden gelince cevaplarım
CSS Nedir?
Html sayfaları biçimlendirmek için kullanılan teknolojiye CSS denir. Aşağıda sizlere css kodlarını html kodları ile birleştirmeyi, css yazım kurallarını ve ebeveyn mantığını anlatmaya çalışacağım.
Css Yazım Kuralları ve Standartları
seçici { özellik : alacağı değer }
Kod:
[COLOR=#0000cd]p { color : [/COLOR][COLOR=#ff0000]red;[/COLOR][COLOR=#0000cd] }
[/COLOR]Eğer bir seçiciye birden fazla özellik vermek isterseniz;
Kod:
p{
color:red;
font-size:12pt;
text-decoration:underline;
}şeklinde yapabilirsiniz.
Eğer istediğiniz birden fazla seçiciye aynı özellikleri uygulamaksa;
Kod:
p,h1,span{
color:red;
font-size:12pt;
text-decoration:underline;
}eklinde yapabilirsiniz. Yani araya "," koymanız gerekmektedir.
Css Kodlarını Sayfamıza Dahil Etme
Satır Düzeyinde Css Kodu Ekleme
Css özelliğini elementin içerisinde "style" özelliği ile belirtebilirsiniz. Öncelik kuralına göre diğerlerine göre ilk sıradadır. Yazım şekli şöyledir;
Kod:
[B]<p style="color:red;">CottonCandy</p>[/B]CottonCandy
Sayfa İçi Css Kodu Ekleme
Sayfanın en üstünde "head" etiketleri arasına "style" etiketleri yerleştirilir ve css kodları bunların arasına yazılır. Bu şekilde yapılmış biçimlendirmeye sayfa içi biçimlendirme diyebiliriz.
Kod:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<p>CottonCandy</p>
</body>
</html>Sonuç:
CottonCandy
Sayfa Dışı (Harici Dosyadan) Css Kodu Ekleme
Harici bir stil dosyası oluşturulur ve uzantısı ".css" olacak şekilde ayarlanır. "link" etiketi içerisinde "href" özelliğinde dosyanın yolu belirtilir. Aşağıda göreceli bir adres ile yol gösterilmiştir. Css dosyasında kodlar aynen yazılır.
index.html
Kod:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<p>CottonCandy</p>
</body>
</html>stil.css
Kod:
p{
color:blue;
text-decoration:underline;
}Sonuç :
CottonCandy
Seçiciler
Id(Tekil) Seçicisi
X)Html dökümanlarda elementlerin içerisinde bir id tanımlaması yapılır ve elemana bir isim verilir.(<div id="tasiyici"></div>) (X)Html kurallarına göre bir id isminden sayfada yalnızca bir tane olmalıdır. Bu yüzden tekil seçici dememiz gayet anlamlı olacaktır. Css içerisinden id tanımlaması yapılmış bir elemana ulaşmak gayet basittir. Id tanımlaması önüne "#" diyez işareti konarak bu tanımlama yapılabilir.
Kod:
[B]#tasiyici{[/B]
[B] color:#00FF00;[/B]
[B] width:300px;[/B]
[B]}[/B]Class Seçicisi:
Class seçicisi ile birden fazla elemana uygulamak istediğiniz biçimlendirmeleri tek seferde yazıp istediğiniz kadar kullanabilirsiniz yada bir elemana birden fazla class uygulayabilirsiniz.
Html Kod:
Kod:
<div id="katman1" class="sari_yazi"></div>
<div id="katman2" class="siyah_zemin sari_yazi"></div>Css Kod:
Kod:
#katman1{
width:100px;
height:100px;
}
#katman2{
width:250px;
height:250px;
}
.siyah_zemin{
background-color:yellow;
}
.sari_yazi{
background-color:yellow;
}Örnekte katmanların boyutları farklı olduğu için id tanımlamaları içerisinde boyutlandırmalar yapıldı. Yazı rengi her ikisinde aynı olduğundan tek class tanımlaması ile bu işi hallettik, aynı zamanda katman2'de birden fazla class uygulayarak hem yazı hem zemin rengi değiştirildi.
Seçim işlemlerinde css, aynen bir soy ağacı mantığı ile çalışır. Yukarıda bir html dökümanın dom yapısı(soy ağacı) görülmektedir. Soy ağacının en üstünde "html" etiketi bulunuyor. Yani "html dede" demekte bir sakınca yok. "head" ve "body" etiketleri "html" in çocukları ve diğerleri de torunları olarak isimlendirilir. Bu yaptığımız tanımlar istediğimiz elemana ulaşabilmek için gereklidir.
Çocuk Seçici (">")
Bu seçim şekli ile bir elementin bir alt düzeyindeki element seçilir. Şöyle açıklayalım, 6 numaralı p elementini seçmek için;
Kod:
body>p{
color:red;
}"body" nin çocuğu olan "p" elementini seç demiş olduk. Eğer şöyle deseydik;
Kod:
span>em{
color:red;
}Hem 12 numaralı, hem de 13 numaralı "em" elementi seçilmiş olur. Ama şöyle demiş olsaydık;
Kod:
body>span>em{
color:red;
}Bu şekilde yazılırsa sadece 12 numaralı "em" elementi seçilmiş olur. Sanırım çocuk olayını anladık.
Torun Seçici (Boşluk Karakteri)
Kod:
body em{
color:red;
}şeklinde bir şeçim yapıldığında 10,12,13 numaralı "em" elementleri seçilmiş olur. Bence daha fazla örneğe gerek yok anlaşılmıştır diye düşünüyorum.
Css pseudo (sözde) etiketler, sınıflar ve seçiciler
Pseudo element ve pseudo sınıf arasındaki farkı anlamaya çalışarak başlayalım. Aslında söylenmek istenen şey yapısı gereği bir etikete mi benziyor yoksa seçiciye mi? Mesela :first-line ilk satır anlamına geliyor ve öyle olmasa da bir etiket gibi davranıyor yada :hover fare üzerine geldiğinde gibi bir anlamı var ve bu da onu bir sözde sınıf yapıyor.
Bence özetle şöyle söylenebilir, css'e işlevsellik katan özellikler.
- Elementler
- :first-line
- :first-letter
- :before
- :after
- Sınıflar
- :link
- :active
- :visited
- :hover
- :focus
- :enabled
- :disabled
- :checked
- Seçiciler
- :root
- :empty
- :not
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :last-child
- :first-child
- :first-of-type
- :last-of-type
nly-child- nly-of-type
Elementler
Sınıflar
Seçiciler
Sprite Yöntemi Nedir?
Fare olayına bağlı olarak çalışan zemin resmi değiştirme olayı sırasında gecikmeler olabiliyor. Tabi ki resim dosyaları ayrı ise, sprite tekniğinde resmin her hali tek bir dosyada tutulur ve resmin belli bir bölgesi gösterilir. Bu da resmin yüklenmesi sırasında gerçekleşen gecikme problemini ortadan kaldırır. Çünkü tüm görünümler başlangıçta yüklenmiş durumdadır.
Dikkat edilmesi gereken önemli noktalar şunlardır; öncelikle genişlik ve yüksekliği belirtilmiş olan, block düzeyi bir eleman olmalıdır. Neme lazım overflow özelliğini "hidden" yaparız ki eleman dışına taşan bir şey olursa gizlenir. Son olarak background-position özelliğini kullanarak, resmin hangi bölgesinin gösterileceğini belirtiriz. Negatif değerler vererek resmi yukarıya ve sola çekebilirsiniz.
Kod:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a.sprite{
display:block;
width:99px;
height:179px;
background:url(birlesik.gif) no-repeat 0px 0px;
overflow:hidden;}
a.sprite:hover{
background-position:-99px 0px;}
</style>
</head>
<body>
<a href="" class="sprite"></a>
</body>
</html>- - - Güncellendi - - -
css ilgili soruları olan sorabilir işden gelince cevaplarım
