CSS BAŞLARKEN / CSS2 ÖZELLİK ve SOY SEÇİCİLERİ

CSS BAŞLARKEN / CSS2 ÖZELLİK ve SOY SEÇİCİLERİ

Tarhi : 27-04-2017 02:25:49 | Yazar : ÇAĞLAR BOSTANCI

 

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.

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.

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.

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.

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.

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.

CSS dosyalarında classlar aşağıdaki gibi . nokta ile çağırılarak {} süslü parantezler içerisinde özellikleri tanımlanır.

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.

Sınıflar bu şekilde kullanıldıkları gibi bir elementin içerisinden birden fazlada class tanımlayabiliriz.

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.

Başka bir kullanımı: p[özellik=”deger”]{}

Başka bir kullanım : div *[özellik]{}

Başka bir kullanım : div a[id]{}

Başka bir kullanım: [title=”b”]{color: red;} bir elementin özellik değeri b ise.

Başka bir kullanım: [class|=”a”]{color: red;} ard arda kullanılan classlardan ilkinin rengini değiştirir.

Başka bir kullanım: [title~=”deneme”]Bir elementin özellik değeri boşluk ile ayrılmış ve bu belirtilen isimse.

Başka bir kullanım: [title^=”c”]Bir elementin özelliği c ile başlıyorsa.

Başka bir kullanım: [title$=”r”]Bir elementin özelliği r ile bitiyorsa.

Başka bir kullanım: [title*=”gl”]Bir elementin özelliği içerisinden gl geçiyorsa.

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.

ÇOCUK SEÇİCİ
E>F : E’nin bütün F çocukları için css tanımlama;

DOĞRUDAN KARDEŞ SEÇİCİ
E+F : E ile bitişi F kardeşi için css tanımı

DOLAYLI KARDEŞ SEÇİCİ
E~F : E’nin kendisinden sonra gelen F kardeşleri için css tanımı

DİĞER BİR ÖRNEK

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”]

 

Reklam Alanı