Bir Elemente Birden Fazla CSS Seçicisi Bağlamak

Bir Elemente Birden Fazla CSS Seçicisi Bağlamak

Hazırladığımız web sayfalarında CSS kodlarının uzadıkça fazlaca karmaşık durması hem bir sorun olduğunda müdahaleyi zorlaştırır hem de yazım hatalarına davetiye çıkarır. Bunu önlemenin yollarından birisi de her işi farklı sınıflara bölmek ve etki etmesini istediğimiz elemente bu sınıfları bağlamaktır. Bu iş aynı zamanda farklı bir elemente yalnızca bir sınıfı bağlayabilmemizi dolayısıyla da CSS kodlarını azaltmamızı da sağlar.



Bunu bir örnekle açıklayacak olursak; sayfamızı oluşturan ana divimize "gradyan arkaplan", "kenar yumuşatma" ve "gölge efekti" uygulamak istiyoruz. Bunun için aşağıdaki kodu yazabiliriz.

#disAlan {
    height: auto;
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top,  #e4f5fc 0%, #2ab0ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e4f5fc 0%,#2ab0ed 100%); /* W3C */    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);}

Bu kodu aşağıdaki hale getirmek ise daha makuldür.
 

#disAlan {
    height: auto;
    width: 960px;
    margin-left:auto;
    margin-right:auto;}

.gradyan{
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top,  #e4f5fc 0%, #2ab0ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(100%,#2ab0ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e4f5fc 0%,#2ab0ed 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e4f5fc 0%,#2ab0ed 100%); /* W3C */}

.yuvarlakKenar{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;}
    
.golgeEfekti{
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.75);}

Peki şu halde disAlan isimli dive bu classlar nasıl bağlanacak? Bunun için divin class özelliğine değer olarak class isimlerini aralarında boşluk bırakarak yazmak yeterli olacaktır. Üstteki örnek için HTML kodumuz aşağıdaki gibi olur.
 

<div id="disAlan" class="gradyan yuvarlakKenar golgeEfekti">

Üstelik CSS kodlarımızı bu şekilde yazarsak daha sonra bir başka nesneye gölge efekti vermek istediğimizde veya kenar yumuşatma uygulamak isteğimizde kodları tekrar yazmak zorunda kalmayacağız. İstediğimiz seçiciyi elemetin class özelliğine atamak yeterli olacaktır.

Faydalı olması dileğiyle...

Bu yazı en son 02 Mart 2013 tarihinde düzenlenmiştir ve güncelliğini yitirmiş olabilir.

blog comments powered by Disqus

© Mustafa Navruz 2011 0.0811 sn.

^ Başa Dön