CSS Seçiciler

CSS, CSS Seçiciler, CSS Kodları, Sınıf Seçicisi, Class Selector, XHTML CSS, CSS Seçiciler hakkında bilgi, CSS Selector, Özellik Seçici gibi sorgular yazarak web sitemize ulaşan değerli ziyaretçimiz web sitemize hoş geldiniz.

Seçiciler; CSS’in kalbi ve ruhudur. XHTML etiketlerine stil tanımlamak için kullandığımız bu yapıda daha önce de değindiğimiz gibi p, h1, body… vb bütün XHTML etiketleri CSS için birer seçicidirler. Şimdi gelin seçicilerin kullanım şekillerini tek tek inceleyelim.

SINIF SEÇİCİSİ (CLASS SELECTOR)

Bir XHTML etiketine birden fazla özellik kazandırmak istediğimizde ya da bir özelliği bir çok XHTML etiketine uygulamak istediğimizde kullanırız. Bir XHTML etiketine birden fazla özellik kazandırmak istediğimiz durumda kullanım:

seçici.sını_adı {Özellik:Değer;} şeklindedir.

<head>

<style type=”text/css”>

#cizgi {text-decoration:underline;}

</style>

</head>

<body>

<p id=”cizgi”> Altı çizilecek önemli bir metin </p>

</body>

css-seciciler

CSS Seçiciler

 

SEÇİCİ UYGULAMA HİYERARŞİSİ

XHTML belge mimarisinin hiyerarşik yapısı, seçicilerimizi oluştururken de işimize çok yarayacak bir yapıdır. Aşağıdaki örnekte XHTML dilinin hiyarerşik yapısını şema üzerinde daha net olarak görmektesiniz.

<body>

<h3> ÖĞRENMEM GEREKENLER </h3>

<ol>

<li> XHTML:

<ul>

<li> Belge Bildirimi </li>

<li> Metin Etiketleri</li>

<li> Listeler </li>

<li> Tablolar </li>

<li> Çerçeveler </li>

</ul>

</li>

<li> CSS </li>

<li> DREAMEAVER </li>

</ol>

</body>

</html>

Bu hiyerarşi için gereken tanımlamalar aile soyağacı mantığından yola çıkılarak yapılmıştır. Buna göre yukarıdaki şemedaki ol etiketi ata ancestor li etiketi çocuk child onun altındaki ul ise torun descendant seçici olmaktadır. Ayrıca yan yana olan li etiketleri de Bitişik Kardeş Seçiciler ( Next Sibling Selector) olmaktadırlar.

ÇOCUK SEÇİCİLERİ

(DIRECT CHILD SELECTORS)

Bir etiket (örn:em) bir belge ağacında bir çok kez kullanılmış olabilir. İşte bu etiketlerin bazılarına farklı özellikler atamak istediğimizde hepsiyle tek tek uğraşmak çok zahmetli olacaktır. Bu durum hiyerarşide aralarında bir basamak fark olan seçiciler için söz konusu olduğunda Çocuk Seçiciler imdadımıza yetişmektedir.

<body>

<h1> Başlık <em> metni </em> </h1>

<div>

Açıklama <em> metin </em>

<p> paragraf <em> metin </em> </p>

</div>

</body>

TORUN SEÇİCİLERİ

(DESCENDANT SELECTORS)

Çocuk seçicileri anlatırken söylediğimiz olay, hiyerarşide aralarında iki basamak fark olan seçiciler için söz konusu olduğunda Torun Seçiciler diye tabir edilen yapıyı kullanıyoruz.

<body>

<p> Lorem ipsum dolor <em> sit</em> amet. </p>

<ul>

<li> öge 1 </li>

<li> oge 2 </li>

</lu>

</body>

bu örnekte xhtml belgemize stil verirken eğer kodumuzu em{color:blue;}

şeklinde yazarsak atayacağımız değer, tüm em etiketlerine uygulanır. Fakat biz değerimizi sadece şemada büyük puntolarla göstereceğimiz em etiketine uygulamak istiyorsak ne yapacağız. Tahmin ettiğiniz gibi torun seçii olayını devreye sokacağız. Yani belgenin hiyerarşik yapısından yararlanarak bu isteiğimizi kolayca gerçekleştireceğiz.

Bu takdirde kodumuz,

ul em {color:blue;}

şeklinde olacaktır. Bu kullanımın anlamı; stil atamamızın sadece ul etiketinin altındaki yani sadece ul etiketiyle akraba olan bir başka ifade ile ul etiketinin torunu olan em etiketine uygulanacağı diğerine ise uygulanmayacağıdır.

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

 

CSS Seçiciler
Bu yazıya oy ver

About the Author:

 
%d blogcu bunu beğendi:
EV SSL