CASCADING SYTLE SHEETS CSS
Stil şablonları olarak tanımlanan bu kodlama tekniği, HTML belgesinde bu standartların kullanılması için kullanılır. Bir HTML belgesinde bu standartların kullanılması için belge girişinde belge tanımlaması yapılmalıdır. CSS html5 ile tasarımda zirveye çıkmış durumdadır. CSS kurallarını ve söz dizimlerini içeren teknik özellikler css1, css2 ve en son css3 standartlaştırılmıştır.
TEMEL CSS SÖZDİZİMİ
CSS kurlı bir seçici ile bu seçicinin sınırlarını gösteren {} süslü parantezler arasındaki css özelliklerinin tümüne denir.
|
1 2 3 4 5 |
body{ color:red; } |
SAYFA DÜZEYİNDE STİL TANIMI
Sayfa düzeyinde stil tanımı <head> kısmında <style> elementi bildirimi ile yapılır. <style> elementi başlangıç ve bitiş etiketleri vardır.
Bu etiketlerin kullanımı zorunludur.
|
1 2 3 4 5 6 7 8 |
<style> body{ color: red; } </style> |
CSS SÖZ DİZİMİ
Aşağıda birinci parça bir veya birden fazla seçiciyi temsil edebilir. Her html elementi bir seçici olabilir. Elementlerin id ve class adları da birer seçicidir. Bunlara ek olarak elementlerin diğer özellikleri src,href,title… vb özellikler seçici olarak kullanılabilir.
seçici { css özelliği:özellik değeri;(bildirim bitiş bloğu)…. }
BİLDİRİM BLOĞU
Seçici içinde css özelliklerini bir arada tutan yapıya verilen addır. Bu yapı {} süslü parantezlerden oluşur. Seçiciye ait css özellikleri süslü parantezler içinde belirtilerek sonlandırılır.
BİLDİRİMLER
Bildirim CSS özelliği ve bu özelliğin aldığı değer ikilisidir. Özellikle değeri bir birine bağlayan iki notka üst üste karakteridir.
Bu bloglar bir birinden ; noktalı virgül ile ayrılır.
ÖZELLİK ve DEĞER
CSS standartlarında bir çok özellik bulunmaktadır. Bu özellikler kendi aralarında sınıflandırılmışlardır.
ELEMENT SEÇİCİ
Seçici olarak html elemenlerini kullanabiliriz. Bütün HTML elemenleri seçici durumundadır.
|
1 2 3 |
a{color:blue;} |
ID SEÇİCİSİ
İd seçiciler bir elementin kimliğidir. İçerisinde Türkçe karakter olmamak şartıyla istediğimiz bir harf kelime gibi değeri id isim olarak kullanabiliriz.
|
1 2 3 |
<p id="paragraf">METİN ALANI</p> |
p etiketinin id’si “paragraf” tır. Bu ismi seçici olarak kullanmak için css tanımlaması yapılırken başına # işaret konulur.
|
1 2 3 |
#paragraf{font-family:Arial; color:blue;} |
hedef elementin id sinin başına # işaret konulduktan sonra {} süslü parantezler içerinsinde özellikleri tanımlanır. Bir elementin id bilgisine sadece o elemente ait olacak bir isim yazılabilir. Bu isim başka bir elementin id sine yazılmaz. Id belirlenirken bir isim sadece bir sefer kullanılarak bir etikete tanımlanır.
SINIF SEÇİCİ CLASS
Sınıf seçicinin en büyük özelliği bir sınıf isminin birden fazla element ile kullanılabilmesidir. Sınıf seçiciler aşağıdaki gibi tanımlanır.
|
1 2 3 |
<p class="metinalani2">METİN ALANI</p> |
CSS dosyalarında classlar aşağıdaki gibi . nokta ile çağırılarak {} süslü parantezler içerisinde özellikleri tanımlanır.
|
1 2 3 |
.metinalani2{ özellikler } |
Sınıf isimleri bir sayfada birden çok element için kullanılabilir. Bir sınıf birden fazla elementte aşağıdaki gibi kullanırız.
|
1 2 3 |
.kirmizimetin{color:red;} |
|
1 2 3 4 |
<p class="kirmizimetin">KIRMI YAZILAN METİN</p> <a class="kirmizimetin" href="http://caglarbostanci.com.tr">KIRMIZI YAZILAN LİNK</a |
Sınıflar bu şekilde kullanıldıkları gibi bir elementin içerisinden birden fazlada class tanımlayabiliriz.
|
1 2 3 4 5 |
.renk{color:blue;} .font{font-family:Arial} .boyut{font-size:16px;} |
|
1 2 3 4 |
<a class="renk font" href="http://www.caglarbostanci.com.tr">mavi ve arial fontla yazılan link</a> <p class="renk font boyut">mavi arial ve 16px boyutunda yazılan metin</p> |
GENEL EVRENSEL SEÇİCİ
* karakterini kullanarak bütün elemenleri seçici olarak kullabiliriz.
*{color:yellow}
sayfa içerisindeki bütün yazıların rengi sarı olacaktır.
div *{width:200px}
Sayfa içerisindeki bütün div taglarının genişliği 200px dir.
CSS2 ÖZELLİK ve SOY SEÇİCİLERİ
* Bütün elementleri seçer.
E Herhangi bir elementi seçer
.class Bir elementin sınıf adını seçer class=”renk” gibi
E.class Bir E elementi ile eşleşen sınıf adı.
#id Bir elementin kimliğini seçer.
E#id Bir E elementi ile eşleşen kimlik adı
E[test] Test özelliği olan bir elementi seçer.
E[test=”var”] Test özelliği var olan elementi seçer
E[test~=”var”] Test özelliği var içeren elementleri seçer.
E[att^=”var”] Her hangi bir elementin özelliği var ile başlıyorsa
E[att$=”var”] Her hangi bir elementin özelliği var ile bitiyorsa.
E[att*=”var”] Her hangi bir elementin alt dizisinin içinde var geçiyorsa.
E ~ F E Elementi F elementinden önceyse ve kardeşseler.
E > F E Elementin çocuğu olan F elementi.
E + F E Elementinden sonraki F elementi.
E F E Elementinin soyundan gelen f elementi.
ÖZELLİK SEÇİCİLER
Bir elementin herhangi bir özelliğini seçer. Aşağıdaki örnekte <p> elementine bizim belirlediğimiz özelikler verilmiştir.
|
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 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [caglar]{ color: red; } </style> </head> <body> <!-- p ve a etikentini metinleri kırmız olarak yazmıştır. --> <p caglar> MERHABA DÜNYA</p> <a href="" caglar>MERHABA DÜNYA</a> </body> </html> /* DİĞER BİR KULLANIM : a[özellik]{css kodları} */ <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> a[caglar]{ color: red; } </style> </head> <body> <!-- sadece a etiketi kırmızı yazılmıştır. --> <p caglar> MERHABA DÜNYA</p> <a href="" caglar>MERHABA DÜNYA</a> </body> </html> |
Başka bir kullanımı: p[özellik=”deger”]{}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> p[caglar="1"]{color: blue;} </style> </head> <body> <!-- sadece <p caglar="1"> etiketinden degeri bir olan parağraf mavi yazımıştır. --> <p caglar="1"> MERHABA DÜNYA</p> <p caglar> MERHABA DÜNYA</p> <a href="" caglar>MERHABA DÜNYA</a> </body> </html> |
Başka bir kullanım : div *[özellik]{}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> div *[id]{color: blue;} </style> </head> <body> <!-- div içerisindeki p etiketlerinden id 'si olanlar mavi yazıldı. --> <div> <p id="a"> MERHABA DÜNYA</p> <p id="b"> MERHABA DÜNYA</p> <p > MERHABA DÜNYA</p> </div> </body> </html> |
Başka bir kullanım : div a[id]{}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> div a[id]{color: red;} </style> </head> <body> <!-- div içerisindeki a etiketlerinden id 'si olanlar kırmızı yazıldı. --> <div> <p id="a"> MERHABA DÜNYA</p> <p id="b"> MERHABA DÜNYA</p> <a id="c" href="#"> MERHABA DÜNYA</a> </div> </body> </html> |
Başka bir kullanım: [title=”b”]{color: red;} bir elementin özellik değeri b ise.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [title="b"]{color: red;} </style> </head> <body> <!--elementlerden title="b" özelliği olanlar kırmızı yazılmıştır --> <p title="a"> MERHABA DÜNYA</p> <p title="b"> MERHABA DÜNYA</p> <a title="b" href="#"> MERHABA DÜNYA</a> </body> </html> |
Başka bir kullanım: [class|=”a”]{color: red;} ard arda kullanılan classlardan ilkinin rengini değiştirir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [class|="a"]{color: red;} [class|="b"]{color: yellow;} </style> </head> <body> <!--elementlerden class="b-c" ard arda kullanılan ve - işareti ile ayrılan classlardan ilkinin rengini değiştirir --> <p class="a-c"> MERHABA DÜNYA</p> <p class="b-c"> MERHABA DÜNYA</p> <a class="c-a" href="#"> MERHABA DÜNYA</a> </body> </html> |
Başka bir kullanım: [title~=”deneme”]Bir elementin özellik değeri boşluk ile ayrılmış ve bu belirtilen isimse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [title~="a"]{color: blue;} [title="b"]{color: yellow;} </style> </head> <body> <!--elementlerden title~="a" özelliği olanların her ikiside mavi yazılmıştır. --> <p title="a b"> MERHABA DÜNYA</p> <p title="b a"> MERHABA DÜNYA</p> </body> </html> |
Başka bir kullanım: [title^=”c”]Bir elementin özelliği c ile başlıyorsa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [title^="c"]{color: blue;} [title="b"]{color: yellow;} </style> </head> <body> <!--elementlerden title^="c" özelliğindeki değer c ile başlıyorsa, metin rengi mavi olacak. --> <p title="caglar"> MERHABA DÜNYA</p> <p title="hoca"> MERHABA DÜNYA</p> </body> </html> |
Başka bir kullanım: [title$=”r”]Bir elementin özelliği r ile bitiyorsa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [title$="r"]{color: blue;} [title="b"]{color: yellow;} </style> </head> <body> <!--elementlerden title$="r" özelliğindeki değer r ile bitiyorsa, metin rengi mavi olacak. --> <p title="caglar"> MERHABA DÜNYA</p> <p title="hoca"> MERHABA DÜNYA</p> </body> </html> |
Başka bir kullanım: [title*=”gl”]Bir elementin özelliği içerisinden gl geçiyorsa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> [title*="gl"]{color: blue;} [title="b"]{color: yellow;} </style> </head> <body> <!--elementlerden title*="gl" özelliğindeki değerde gl geçiryorsa, metin mavi yazacak --> <p title="caglar"> MERHABA DÜNYA</p> <p title="hoca"> MERHABA DÜNYA</p> </body> </html> |
SOYA BAĞLI SEÇİCİLER
Bir elementin diğer elementleri kendi içerisinde barındırdığı yapıya soy adı verilir. Aynı soydaki Elementler benzer özelliklerini bir birine devrederler.
ÇOCUK ve TORUN SEÇİCİLER
E F : E’nin F çocukları ve torunları için css codları işler.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> ul li{color: blue;} #caglar p{color:green;} </style> </head> <body> <!--elementlerden ul nin li çocuğunun rengi blue--> <ul> <li>ELEMENT 1</li> <li>ELEMENT 2</li> <li>ELEMENT 3</li> </ul> <div id="caglar"> <p>MERHABA DÜNYA</p> </div> </body> </html> |
ÇOCUK SEÇİCİ
E>F : E’nin bütün F çocukları için css tanımlama;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> div p{color: blue;} div p span{color:green;} </style> </head> <body> <!--elementlerden div p çocuğunun metin rengi blue, torunu span'ın ise metin rengi yeşildir.--> <div> <p>MERHABA <span>DÜNYA</span></p> </div> </body> </html> |
DOĞRUDAN KARDEŞ SEÇİCİ
E+F : E ile bitişi F kardeşi için css tanımı
|
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 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> #resimler .kedi{ width:100px; height:100px;} #resimler .kedi+img{ display:none; width:300px; height:300px; position:absolute;} #resimler .kedi:hover+img{ display:block;} </style> </head> <body> <!-- class="kedi" olan img'lerin üzerine gelindiğinde kardeşi img görünür hale gelecektir.--> <div id="resimler"> <img src="kedi1.jpg" class="kedi"> <img src="kedi1.jpg"> <img src="kedi2.jpg" class="kedi"> <img src="kedi2.jpg"> <img src="kedi3.jpg" class="kedi"> <img src="kedi3.jpg.jpg"> </div> </body> </html> |
DOLAYLI KARDEŞ SEÇİCİ
E~F : E’nin kendisinden sonra gelen F kardeşleri için css tanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> h2{cursor:pointer;} h2 ~ p{color:green; font-size:18px; display:none;} h2:hover ~ p{ display:block;} </style> </head> <body> <!-- H2 etiketinin üzerine varıldığında p elementlerinin görünür olacak--> <h2>GÜZEL SÖZLER</h2> <p>Bazen en iyi seçim, vazgeçmektir.</p> <p>Yüzü güzel insanlar için gönlü güzel insanları ne çok üzdünüz.</p> <p>İnsanın öğrenmesi gereken ilk dil; tatlı dildir. Barış Manço</p> </body> </html> |
DİĞER BİR ÖRNEK
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> h2{cursor:pointer;} h2 ~ p{color:green; font-size:18px; display:none;} h2:hover ~ p{ display:block;} </style> </head> <body> <!-- h2 lerin üzerine varıldığında altındaki p elementleri görünür hale gelecek--> <h2>BUKOWSKİ</h2><hr> <p>Yılların, bana öğrettiği şeylerden biri de bu oldu; Mutluluğu yakalamışsan, sorgulama.</p> <h2>jean Dale</h2><hr> <p>Yaşam, duygulananlar için bir trajedi, düşünenler için bir komedidir.</p> <h2>James Bryant Conant</h2><hr> <p>Kaplumbağaya dikkat et! Ancak kafasını çıkarıp risk aldığında ilerleyebilir.</p> </body> </html> |
GRUPLANDIRMA
Aynı özellikleri veya birden fazla farklı özelliği bir arada uygulamaya yarayan seçicilerdir.Bu seçiciler yazılırken aralarına virgüller konulur.
E,#div,.class,[title=”özellik”]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>başlık</title> <style> h1,h2,h3,h4{color:green} </style> </head> <body> <!-- class="kedi" olan img'lerin üzerine gelindiğinde kardeşi img görünür hale gelecektir.--> <h1>MEVLANA</h1> <h2>TEBRİZLİ ŞEMS</h2> <h3>KİMYA HATUN</h3> <h4>YUNUS EMRE</h4> <h5>YUNUS EMRE</h5> </body> </html> |