Seçiciler ve Bildirimler

Cs yapısı Seçiciler ve Bildirim Bloğundan oluşur.

  1. Seçiciler (Selector)
  2. Bildirim Bloğu (Declaration Block)

    • Özellik (Property
    • Değer (Value)
h1 {
text-decoration:none;
color:green;}

 Yukardaki css kodlarında

h1 ---------------------------------------------->Seçici
{text-decoration:none;color:green;} --->Parantez içindekiler Bildirim Bloğu
text-decoration:none;---------------------->Bildirim
color-------------------------------------------->Özellik
green------------------------------------------->Değer

Burada yapıya bir göz atalım. Seçicimizden sonra Bildirim Bloğu "{" (parantez) ile başlamıştır ve bildirimler sıralanmıştır. Bildirimlerde özelliklerden sonra ":"(iki nokta), özelliklerden sonra ";" (noktalı virgül) kullanılmıştır.

Verdiğimiz örnekte de gördüğümüz html'de ki h1 etiketi seçici olarak kullanılmıştır. Demek ki biz Html etiketlerini (body,p,a,h1,h2…) seçici olarak kullanılabililiyoruz.. Peki o zaman aşağıdaki örneğe bir göz atalım.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Yukardaki örnekte görüldüğü gibi birden fazla html etiketini Seçici olarak grupladık ve Bildirim Bloğu içindeki Bildirimleri bu seçicilerin hepsine uygulamış oldu.

Bu şekilde Html etiketlerini seçici olarak kullanabileceğimiz gibi kendimizde seçiciler tanımlayabiliriz. Bu noktada iki farklı seçici türü karşımıza çıkıyor.

  1. Sınıf (Class) Seçiciler

  2. Id Seçiciler

1. Sınıf Seçiciler

Sınıf Seçicilerinide 3 farklı kullanımda inleyeceğiz.

İlk Kullanım;

.sag_manset {
 text-align:center;
 background-color:#7c7a6d; }

 Sayfaya uygularken;

<td class="sag_manset">Bu bir örnektir</td>

Uygulamada da görüldüğü şekilde tanımladığımı "sag_manset" classını istediğimiz html etiketine uygulayabiliriz, bu noktada bir sınır yoktur. Bir class tanımladıktan sonra aynı biçimde olmasını istediğimiz yerlere uygulayabiliriz.

İkinci Kullanım

p .sag_manset {
 text-align:right;
 background-color:#7c7a6d; }

 

p .sol_manset {
 text-align:left;
 background-color:#000; }

Sayfaya uygularken;

<p class="sag_manset ">Sağ manşette paragrafı sağa dayalı yazdırmak için etikete bir seçici atadık.</p>
<p class="sol_manset ">Aynı html eitketine sol manşette farklı özellikler ile kullanmak için farklı bir seçici atadık.</p>

Bu uygulamada da görüldüğü gibi sol manşet ve sağ manşet bölümlerinde ki iki paragraftan birini sola birini sağa dayalı yazdırdık. İkisinde de p etiketine farklı seçiciler atayarak farklı biçimlerde gösterdik.

Üçüncü Kullanım

.renk {
color:#000;}

.yaziboyutu{
font-size:12px;}

.renk, .yazıboyutu{
background-color:#fff;}

Sayfaya uygularken;

<p class="renk yaziboyutu">Burada iki seçici classıda uyguladığımız için yazı rengini siyah, yazı boyutunu 12px, ve arkaplan rengini beyaz yapar.</p>

Üçüncü uygulamaya bir göz atalım isterseniz. İki farklı sınıf seçicisi oluşturduk. renk seçicisi yazı rengini siyah, yaziboyutu seçicisi yazı boyutunu 12px yapıyor. Devamın iki sınıf seçicisinede arkaplan rengi beyaz olarak veriliyor. Uygulamada html etiketine iki sınıf seçicisi aynı anda uygulanıyor. Bu durumda paragrafa renk sınıfının, yaziboyutu sınıfının ve ikisine birden uygulanan arkaplan rengi özelliklerinin hepsi bu paragrafta göürlecektir.

Bu bloğumda kullandığım Drupal CMS sisteminin görüntüsünü şekilendirmek için style.css dosyası üzerinde değişiklikler yapmak gerekebiliyor. Bu style dosyasını şekillendirirken bu son kullanımla sık sık karşı karşıya kaldım.

2. Id Seçiciler

Sınıf ve Id "tanımlaması" arasında ki tek fark Sınıf Seçicisinde seçicinin başına "." (nokta),Id Seçicisinde seçicinin başına "#"(diyez) eklenmesidir. İşlev olarak farklarına aşağıda deüinelim.

#sag_manset {
text-align:center;
background-color:#7c7a6d; }

Sayfaya Uygulamada;

<td id="sag_manset">Bu bir örnektir</td>

Görüldüğü biigi seçinin başındaki işaretler değişti ve html etiketine stili uygularken "class" yerine "id" yazdık.

 

Peki o zaman "class" ve "id" arasında ki fark ne ? Aslında aralarında ki fark Class Seçicinin birden fazla yerde Id Seçicinin tek bir yerde kullanılması olsada browserlar Id seçicinin birden fazla yerde kullanılmasına da ses çıkarmıyorlar. Ama biz yinede Id Seçiciyi tek bir yerde kullanmaya özen gösterelim.

İlk Yorumu Siz Yapın

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.