Fatih Hayrioğlu'nun not defteri » özellik http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Özellik Seçicileri(Attribute Selectors) http://www.fatihhayrioglu.com/ozellik-secicileriattribute-selectors/ http://www.fatihhayrioglu.com/ozellik-secicileriattribute-selectors/#comments Sat, 06 Jan 2007 13:42:41 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=243 Bu konuya biraz geç değindik biliyorum. Ancak bu konuyu (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesi içinde yazmayı düşündüğümde IE bu özelliği desteklemiyordu(şimdi IE7 bu özelliği desteklemektedir.) bu nedenle yazımını ertelemiştim, sonrada unuttum gitti açıkçası neyse sonunda yazıyorum işte:)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı – Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.

Javascript gibi id’si olan her elemente(hata daha fazlası da var) css özelliği atanması bize bir çok bakımdan avantaj sağlar.

Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:

img[src="grafik.gif"]{
	border: 1px solid #000;
}

Dört çeşit Özellik Seçicisi vardır.

1- Basit Özellik Seçicisi

Belirli bir etiketin(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar.

Basit özellik seçicisi

Bir örnek yapalım

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
img[alt] {
	border: 5px solid lime
}
</style>
</head>
<body>
	<img src="logo.gif" alt="Logo" width="32" height="41" />
</body>
</html>

Örneği görmek için tıklayınız.

Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece
alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit
Özellik Seçicisini kullanabiliriz.

Tarayıcı Uyumu:

Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

2- Özellik Değeri Seçicisi

Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.

Özellik Değeri Seçicisi

Bir örnek yapalım

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın
</p>
</body>
</html>

Örneği görmek için tıklayınız.

Genelde formlarda tanımlama yaparken sadece metin girisi yaptıgımız alanlara atama yapmakta zorlanırız. Bunun sebebi <input> etiketini sadece metin girisi için kullanılmamasıdır, radyo buton ve isaretleme kutuları içinde bu etiketin kullanılmasıdır. Özellik Degeri Seçicisi bu sorunu kökten çözer. Yukarıdaki örnekte görüldügü gibi

Tarayıcı Uyumu:

Internet Explorer6: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

3- Kısmi Özellik Değeri Seçicisi

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

Kısmi Özellik Değeri Seçicisi

Bir örnek yapalım

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>

Örneği görmek için tıklayınız.

Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap
edin artık.

Tarayıcı Uyumu:

Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

4- Dikkate Değer Özellik Seçicisi

Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

Dikkate Değer Özellik Seçicisi

Bir örnek yapalım

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>

Örneği görmek için tıklayınız.

Tarayıcı Uyumu:

Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor

Bunların dısında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. “Belirlenen Sözdizimi ile Baslayan Özellik Deger Seçicisi”, “Belirlenen Sözdizimi ile Biten Özellik Deger Seçicisi”, “İçinde Belirlenen Sözdizimi Geçen Özellik Deger Seçicisi” ve Aduzayı Özellik Deger Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Amaç CSS ve XHTML arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak.

Kaynaklar

]]> http://www.fatihhayrioglu.com/ozellik-secicileriattribute-selectors/feed/ 30 CSS’de Tanımlamalar ve Etkinlikleri(Specificity) http://www.fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/ http://www.fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/#comments Sun, 08 Oct 2006 09:22:02 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=180 CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir.

Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızdan birinde h1 elementine bold özelliği atanmışken diğer stil dosyamızda italiktik özelliği atanmış. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.

Burada iki tanımlamanın yakınlık dereceleri aynı. O zaman hangisi uygulanacak. Böyle durumlarda web tarayıcıları kendilerine has garip bir hesaplama sistemi kullanırlar. Kuralları aşağıdaki gibidir.

  • Kod içinde tanımlama yapılmışsa (inline-kod)
  • Stil dosyasındaki tanımlı ID’lerin sayısına
  • Sınıf tanımlalarının sayısına
  • Seçicilerin sayısına bakar
Kod içinde tanımlama yapılmışsa (inline-kod) kısmı CSS2.1 ile gelen yeni bir özelliktir ve etkinlik değerini 4 basamağa çıkarmıştır. CSS2 ve öncesinde üç basamaklı hesaplama yapılmakta idi, kod içindeki tanımlamalar üç başamağa göre 1,0,0 olarak belirlenirdi.

Web tarayıcısı bu sayıları toplamaz. Yalnızca rakamları yanyana sıralar. Bu web tarayıcılarına özel bir aritmetik işlemdir. Bir örnek verecek olursak id değeri 2, sınıf değeri 3 ve seçici değeri 0 olan bir tanımlamada

0 (kod içinde değil), 2 (id), 3 (class), 0(seçici) = 0230

Değerini elde ederiz. Burada id değeri 100′ler basamağına sınıf değeri 10′lar basamağına yazılarak hesaplama yapılır ve ikiyüz otuz değeri elde edilir. 

ul h1 li.secili {
	color: yellow;
}

Yukarıdaki tanımlama da 0013 değerini elde ederiz.

0 (kod içinde değil), 0 (id), 1 (secili sınıfı), 3 (ul h1 li seçicileri) = 0013

h1 {
	color: blue;
}

Bu tanımlamanın değeri 0001 dir. CSS belirlemeye göre yüksek değer alanın özelliği uygulanır. Her ikisinde de h1′e bir tanımlama yapılmıştır. Ancak tanımlama sistemleri farklıdır. XHTML kodumuzdaki h1 elementimizi mavi değil sarı(yellow) olarak gösterecektir.

Bide öncelik için!important tanımlaması vardır. Eğer yukarıdaki koda !important eklersek 

h1 {
	color: blue !important;
}

Tanımlama yukarıdaki gibi değiştirildiğinde h1 elementimiz mavi renkde görünecektir.

Eğer değer aynı olursa(mesela 0013 e 0013) ne olur, bu durumda son yapılan tanımlamanın özellikleri uygulanır.

]]> http://www.fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/feed/ 10 CSS’in Yapısı http://www.fatihhayrioglu.com/cssin-yapisi/ http://www.fatihhayrioglu.com/cssin-yapisi/#comments Tue, 20 Jun 2006 20:24:11 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=42 CSS’in Yapısı

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Not

XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)

Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {font-family: Arial;}
Not

CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır,
” * ” ile gösterilir.

* {color: red;}

tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {text-align: right}
p.ortala {text-align: center}

Bu Seçicileri sayfamızda uygulamak için;

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

.ortala {
text-align: center
}

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

<span class="ortala"> Burada birşeyler yazar </span>
<p class="ortala">Burada da başka bişeyler yazar</p>

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

.onemli {
font-weight: bold;
}
.uyari {
font-style: italic;
}
.onemli.uyari {
background: silver;
}

Önemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.

Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

...
#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>
Sınıf mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

p.onemliBilgi {
font-weight: bold;
}

ve kullanımıda;

<p class="onemlibilgi">Uygulama olmaz .</p>

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.

]]> http://www.fatihhayrioglu.com/cssin-yapisi/feed/ 84