full screen background image
Search
Wednesday 28 June 2017
  • :
  • :

CSS Dersleri-5 Evrensel – Özellik Seçicileri Sözde Sınıf ve Elemanlar

css dersleri yeni baslayanlar

Css Seçiciler ve Sözdizimi

Önceki css Dersimizde

-Evrensel Seçiciler (Universal Selector)
-Özellik Seçicileri (Attribute Selectors)
-Sözde Sınıflar ve Sözde Elemanlar.

Kısımlarında kalmıştık şimdi bu kısımları inceleyeceğiz

Evrensel Seçiciler (Universal Selector)

Css de evrensel seçiciler Yıldız / asteriks (*) ile tanımlanır ve bir css tanımlamasını sayfadaki tüm elemanlara atamak için kullanılır.

Css Örneği:

* {color:#ff0000}

Bu örneğimize göre sayfamızdaki tüm materyaller, elemanlar kırmızı olacaktır.

daha geniş bir örnek vermek gerekirse:


<html>

<head>

<style type="text/css">

* {color:#ff000;}

</style>

</head>

<body>

<h1>Burası Bizim Başlığımız</h1>

<h2>Burası bizim Alt Başlığımız</h2>

<p>Alt Başlık Açıklama Satırımız <strong>"Bu Kısım Kalın Yazılacak"</strong></p>

</body

</html>

Örneğimizin Çıktısı Şu Şekilde Olacaktır:

Burası Bizim Başlığımız

Burası Bizim Alt Başlığımız

Alt Başlık Açıklama Satırımız “Bu Kısım Kalın Yazılacak”

Gördüğünüz gibi nasıl bir html elemanı girdiğimiz önemli değil tüm renkler yukardaki css bölümünde global seçicimiz sayesinde kırmızı olarak atanmıştır. Tüm Renkleri Kırmızı Yaptınız Ama Örneğin P içerisindeki Strong Elemanının rengini mavi yapmak istiyorsunuz bunun için

p strong {color:blue;}

Yapmanız yeterli olacaktır.

Bunun haricinde Bir eleman içindeki tüm elemanların tek bir özellik (renk, font border, margin, padding… gibi) almasını istiyorsanız bunu da şu şekilde yapabilirsiniz.

p * { color:yellow;}

Bundan sonra  p (paragraph) elemanları içindeki tüm içerikler sarı renkte görünecektir. eğer bazı kısımlarda özel tanımlama yapmadıysanız.

Özellik Seçiciler (Attribute Selector)

css’de özellik seçici mizi kendi tanımıyla tanımlamak istemiyorum çünkü anlamayabilirsiniz ya da kafanız karışabilir. Bu seçi-cimiz için örnek vermek istiyorum.

Örneğin: bir arama formu yapacaksınız ve bu arama formunun input kısmına arka plan ya da border ataması yapacaksınız. Normalde Css de aşağıdaki gibi yapabilirsiniz

input {border:1px solid #f00}

Yukarda input kısmımıza 1px genişliğinde solid yani düz çizgi şeklinde ve kırmızı bir border atadık. ama sayfamızda ya da sitemizde kullanacağım diğer inputlar ne olacak, bu css özelliği ile onlarda aynı özellikleri almış oldular. işte tamda burada devreye css özellik seçicileri (attribute selector) giriyor. hemen bir örnek verelim.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
     input[name="arama"] {
     border: 1px solid #f00;
     width: 100px;
     }
     </style>
</head>
<body>
<input type="text" name="arama" />
</body>
</html>

Bu örneğimizde biraz fazla detaya girdim aslında ama size mantığını göstermek adına yaptım.  Bu css tanımlamamız ile dedik ki name değeri arama olan her input elemanının belirtilen özelliklerini bu şekilde değiştir.

Bir Örnekte Basit Seçici için verelim

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
     img[alt] {
     border: 1px solid #f00;
     }
     </style>
</head>
<body>
<img src="webledim-logo.png" alt="webledim-logo"><!-- Alt Değeri Almış Etkilenir --></pre>
<pre><img src="website-logo.png"><!-- alt değeri almadığından Burası Style dan etkilenmez --></pre>
<pre><img src="birwebdesign-logo.png"><!-- alt değeri almadığından Burası Style dan etkilenmez --></pre>
<pre></body>
</html>

Yukardaki css basit seçici özelliğimizde de alt alta 3 img dosyamız olmasına rağmen sadece alt özelliği alan image etiketimize verdik özelliği

css kısmi özellik seçici ye örnek verelim

css kısmı:

a[title~="website"]{ color:#f00;}

html kısmı:

<a href="www.webledim.com" title="website">Webledim.com Webledim oldu:) </a>
<a href="www.birwebdesign.com">birwebdesign.com Her Telden Paylaşımlar</a>

Yukardaki style ve html kısmını incelerseniz, title kısmında website yazan her a elemanının yazı rengini kırmızı yaptık diğer a elemanları bu özellikten etkilenmediler.

SÖZDE SINIFLAR ve SÖZDE ELEMANLAR

CSS Sözde sınıf elemanları tarayıcılarda otomatik olarak tanınan elemanlardır.

Sözde sınıf (pseude) : bir elemana farklı özellikler tanımlar. örneğin a (link) elemanına, tıklayınca, tıkladıktan sonra, tıklanmadan önceki durumu gibi tanımlamalar yapar ve bunlara css özelliği atanır.

örnek vermek gerekirse:

a:visited {color:#ff0022}

Burada dedik ki bağlantıya tıklandıktan sonra yani ziyaret edildikten sonra rengini kırmızı yap.

a:hover {color:#cc1122}

Bu tanımlamada da bağlantının üzerine gelince yazı renginin ne olacağını belirledik.

a:link {color:#cc1122}
Bu tanımlamada da bağlantıya herhangi bir müdehale yapılmadan ilk görünen halinin yazı renginin ne olacağını belirledik.

NOT: Bu özellikler sadece yazıyla sınırlı değildir öyle anlaşılmasın. normal css ile vereceğiniz özelliklerin tümünü verebilirsiniz. Yine bu özellikler sadece a (anchor) elemanlarına uygulanacak diye de bir kaide yok. li, strong, div, input.... gibi her elemanda kullanabilirsiniz.

sözde elemanlar (pseude): Bir elemanı alt bölümlere ayırır.  Hemen tanımlama yapmak yerine örneklerle açıklayalım

CSS Kısmı:

p:first-letter{color:#blue; font-weight:bold; font-size:19px;}

HTML Kısmı

<p>Birwebdesign css eğitim seti</p>

Yukardaki css kısmında p elemanına tanımlı :first-letter özelliği paragrafımızdaki ilk harfin özelliklerini belirlemektedir. Çıktısı Şu Şekilde Olacaktır

Birwebdesign css eğitim seti

Şu css örneğimizi de inceleyelim

p:first-line{color:#f00; font-size:22px;}

bu css örneğimizde de :first-line seçicisi etkilediği p (paragraph)’nin ilk satırının css özelliklerini belirlemektedir.

Aşağıdaki örneğimizi de inceleyelim

a.baglanti:link, a.baglanti:visited, a.baglanti:hover {color:red;}

Buradaki style tanımlamamızla borwser’a dedikki baglanti class’ı nı alan tüm a (anchor) elemanlarında link, linkten sonra (tıklandıktan sonra) ve link üzerine gelinceki renkleri kırmızı yap. yani ne olmuş oldu. tüm durumları tek bir css satırında tek bir özelliğe atamış olduk.

Kısa açıklamalarla css seçicilerimiz şu şekildedir.

a:link = link alan yazının herhangi bir işlem yapılmamış hali (tıklanmamış, mouse ile üzerine gelinmemiş…)

a:visited = ziyaret edilmiş yani tıklanılmış linklerin css özelliklerini belirler

a:focus = odaklanılan elemana css özelliği atar (input a yazı yazacağımız zaman tıkladığımızdaki özellikleri gibi)

a: active = aktif olan elemanlara link tanımlaması yapar.

a:hover= bağlantı üzerine mouse ile geldiğinizdeki durumu için css tanımlaması.

ul li:first-child (ilk çocuk seçici) = örneğin listeleme elemanlarında listedeki ilk satıra css tanımlaması yapar.

p:lang(tr) = p elemanının lang özelliğine girilen dile css tanımlaması yapar (örnekte sadece tr girildi farklı diller için girilen dil kısaltmasını yazarsınız)

p:first-letter = style özelliğinin tanımlandığı alandaki ilk harf için css tanımlaması yapar.

p:first-line = style özelliğinin tanımlandığı alandaki ilk satır için css tanımlaması yapar.

p:before {content:” buraya yazacağımız herhangi birşeyi belirlenen satırın başına ekler”}

p:after {content:” buraya yazacağımız herhangi birşeyi belirlenen satırın sonuna ekler”}

Seçicilerimizi de bitirmiş olduk arkadaşlar.

Sonraki Dersimizde Yazı Tipi ve Font Özelliklerini İşlemeye Başlayacağız. umarım Faydalı Olmuştur Olduysa Bir Yorum Yapsanız Yeterlidir Benim İçin.



avatar

Yazar; 15 yıllık web & grafik tecrübesiyle çeşitli bakanlıkların web projelerinin yanı sıra, ünlü giyim firmalarının da (crispino, formenti, MXC Sports ... v.s ) web tasarım ve yazılımları ile birlikte 1000'i aşkın referans ile, Müşteri memnuniyetine devam ediyor.


Yorumlanan Konu “CSS Dersleri-5 Evrensel – Özellik Seçicileri Sözde Sınıf ve Elemanlar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Magento Themes