Çok Kullanılan CSS Seçicileri

1. *: Bu #container div öğesinin altındaki her bir çocugu hedefleyecektir.
#container * {
 border: 1px solid black;
}

2. X Y: Descendant(torun)seçicisidir. Seçicilerinizde daha spesifik olmanız gerektiğinde bunları kullanırsınız
li a {
  text-decoration: none;
}

3. X:visited and X:link: Tıklanmamış tüm link etiketlerini :link hedefler ve :visited ise tıklanılmış linkleri hedefler.
a:link { color: red; }
a:visted { color: purple; }

4. X + Y: Komşu seçici denir. Yalnızca önceki öğenin hemen sonrasında bulunan öğeyi seçer. Ör: her ul'den sonraki sadece ilk paragrafı metnini kırmızı yapar.
ul + p {
   color: red;
}

5. X > Y: Standart X Y ile arasındaki fark, direk çocukları seçecektir. Ör: Sadece container içerisindeki ul'ler hedeflenir, li içerisindeki ul'ler hedeflenmez. İçtekileri de hedeflemek için div#container ul kullanılır.
div#container > ul {
  border: 1px solid black;
}
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

6. X ~ Y: X + Y yanlnızca ilk seçicinin hemen sonrasındaki seçerken X ~ Y ile seçicin sonrasındaki sıra farketmeksizin tümünü seçer.
ul ~ p {
   color: red;
}

7. X[title]: Nitelik seçicidir. Ör:Yalnızca bir title(başlık) özelliğine sahip olan link etiketleri seçecektir.a[title] {
   color: green;
}

8. X[href="foo"]: href niteliği "foo" olan elementler hedeflenir.
a[href="https://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

9. X[href*="nettuts"]: Yıldız tırnak içindeki değerin özelliğin içinde bir herhangi bir yerde bulunması gerektiğini belirtir. Dizenin başını ve sonunu işaretlemek için ^ ve $ kullanılır. ^ ile belirttiğimiz kelime ile başlayanları, # ile ise belirttiğimiz kelime ile bitenleri seçtirtebiliriz.
a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

10. X[href$=".jpg"]: sonu .jpg ile biten href içeriklerine göre elementleri hedefler.
a[href$=".jpg"] {
   color: red;
}

11. X[foo~="bar"]: Hedeflenen içeriklerde "bar" dizesinin geçmesi seçmek için yeterlidir. Ör: <a href="path/image.jpg" data-info="external image"> Click Me, Fool </a>
a[data-info~="external"] {
   color: red;
}

12. X:checked: Bu takma sınıf, aktif hale gelen bir kullanıcı arabirimi öğesini (bir radyo düğmesi veya onay kutusu gibi) hedefleyecektir. Ör: radio seçildiğinde ilk öğesi olan label mavi olur.
input[type=radio]:checked + label {
          color: blue;
}

13. X:after: Önce(before) ve sonra(after) takma sınıfları superdir. Seçilen öğenin etrafında içerik oluşturmaya olanak sağlarlar.
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

14. X:hover: Bir öğenin üzerine fare ile gelindiğinde çalışır.
div:hover {
  background: #e3e3e3;
}

15. X:not(selector): Ör id'si container olan div'ler dışındaki bütün div'leri seçmek için
div:not(#container) {
   color: blue;
}

16. X::pseudoElement:Pseudo elemanlarını(:: ile belirlenir) kullanarak bir öğenin ilk satırı veya ilk harfi gibi belli bir parçasına stil uygulamanızı sağlar.
p::first-letter { //paragrafın ilk harfi hedeflenir.
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

p::first-line { //Paragrafın İlk Satırını Hedefleyin
   font-weight: bold;
   font-size: 1.2em;
}

17. X:nth-child(n): Liste elemanını hedeflemek için kullanılır. Ör: 3.li gibi
li:nth-child(3) {
   color: red;
}

18. X:nth-last-child(n): Liste elemanını sondan hedeflemek için kullanılır. Ör: sondan 3.li gibi
li:nth-last-child(2) {
   color: red;
}

19. 24. X:nth-of-type(n): Elemanın türüne(type) göre seçmede kullanılır. Ör: Sadece içinçi ul hedeflenir.
ul:nth-of-type(3) {
   border: 1px solid black;
}

20. X:nth-last-of-type(n): Elemanın türüne(type) göre sondan başlayarak seçmede kullanılır.
ul:nth-last-of-type(3) {
   border: 1px solid black;
}

21. X:first-child: Yalnızca öğenin ebeveyninin ilk çocuğunu hedeflememizi sağlar.
ul li:first-child {
   border-top: none;
}

22. X:last-child: Yalnızca öğenin ebeveyninin son çocuğunu hedeflememizi sağlar.
ul > li:last-child {
   color: green;
}

23. X:only-child: Ebeveyninin tek çocuğu olan öğeleri hedeflemenize izin verir. Ör: div içerisinde tek p etiketi olanları hedefler.
div p:only-child {
   color: red;
}

24. X:only-of-type: Ana evebeyn konteyneri içinde kardeşi olmayan öğeleri hedefleyecektir. Örnek olarak, tek bir liste öğesine sahip tüm ul'leri hedef alalım.
ul > li:only-of-type {
   font-weight: bold;
}

25. X:first-of-type: first-of-type, türünün ilk kardeşlerini seçmenize izin verir.
<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
 
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

"List Item 2" hedeflemek için;
Çözüm1:Bu kod kısaca, "sayfadaki ilk sırasız listeyi bul, daha sonra yalnızca liste öğeleri olan en yakın olan çocukları bul" diyor. Sonrada, bu bulunan setteki sadece ikinci liste öğesine göre filtreleme yapılıyor.
ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}
Çözüm2:Başka bir seçenek, bitişik seçiciyi kullanmaktır. Bu senaryoda, p etiketinin hemen sonrarsındaki ul'yi buluruz ve daha sonrada öğenin son çocuğunu buluruz.
p + ul li:last-child {
   font-weight: bold;
}
Çözüm3: Sayfadaki ilk ul'ı kapıyoruz ve alttan başlayarak ilk liste öğesini buluyoruz
ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

 


Css Sprite Tekniği

CSS Sprite Nedir?

CSS Sprite, web sitenizde kullandığınız küçük çaplı görselleri ve ikonları parça parça çağırmak yerine bütün görsellerin bir arada bulunduğu tek bir görsel üzerinden koordinat belirleyerek çağırmamıza yarayan, sitenin yüklenme hızını olumlu anlamda etkileyen bir sistemdir.

CSS Sprite Tekniğinin Avantajları

CSS Sprite tekniği kullanılarak hazırlanan bir web sayfası, bu tekniği kullanmayan aynı web sayfasından daha hızlı yüklenecektir. Çünkü sitede 10 görsel varsa, bu da her biri için sunucuya gönderilecek 10 request demektir. CSS Sprite ile 10 görseli tek bir görsel haline getirirseniz, bu da tek bir request demek olacaktır ki, sayfanızın hızlı yüklenmesini sağlayacaktır.

CSS Sprite Oluşturma

CSS Sprite oluşturmak için iki yol var. Bunlardan biri her bir görseli photoshop gibi bir programla birleştirmek ve yanyana ya da altalta dizdiğiniz bu görsellerin piksel bazında koordinatlarını hesaplamaktır. Tahmin edeceğiniz gibi bu biraz zahmetlidi ve hata şansınız vardır.

Diğer yol ise bu işlem için bir aracı kullanmak. Görsellerin herbirini ayrı ayrı imaj haline getirip, bunları zip formatında sıkıştırarak, CSS Sprite Generator‘a (CSS Tümleşik Resim Üreteci) yükleyelim. Bu servis görselleri tek bir imaj haline getirecek ve görsellerin css kodlarında kullanmak üzere koordinatlarını bize verecektir.

Bu adres ise HTML5 tekniğini kullanan başka bir oluşturucudur. Bilgisayarınızdaki resim dosyalarını sürükle bırak yöntemi ile buraya atabilir, Generate butonuna tıklayarak sağındaki Sprite ile kombine edilmiş tek bir resim dosyasını, Stylesheet ile kullanabileceğiniz css dosyasını görüntüleyebilirsiniz.

CSS Sprite Kullanımı

Yukarıdaki site bize gerekli kodları verecektir ama yine de anlatmakta fayda var. CSS Sprite tekniği ile kodlama yapmak için css’in background özelliği kullanılır.

Örneğin; almak istediğimiz görsel, bütün görselin yukarıdan 10 piksel aşağısında ve soldan 20 piksel solundaysa, css aşağıdaki şekilde kullanılır.

span #sprite {  background-image: url(gorsel.png);  background-position: -10px -20px;}

Alıntıdır… http://sanagrafi.com/css-sprite

CSS Ölçü Birimleri(Göreceli Değerler)

CSS  İçinde kullanılan em,ex,px,% değerleri css içinde kullanılan göreceli değerlerdir.

em: Nesnenin yazı tipinin yüksekliğidir.Sayfanın Font-size değeri 16 px olarak atanmış ise 1 em=16 px‘dir.

Şayet  sayfanın Font-size değeri 12 px olarak atanmış ise 1 em=12 px‘dir.

Zaten font büyüklüğünü belirtmeden bir yazı yazsanız bunun büyüklüğü 16 px’dir.

ex: Hangi yazı tipi seçilmişse o yazı tipindeki küçük x harfinin büyüklüğüdür.Genelde de Font-Size‘in yarısıdır.

px: Ekran çözünürlüğüne göre değişen,ekranda bulunan noktalardan bir tanesinin yüksekliğidir.Standart Monitörlerde inç başına 96 nokta düşer.(DPI-Dot Per Inch)

%: Uygulanan nesneye göre değişen bir değerdir.<body>’nin varsayılan değerine göre kendini ayarlar.

Conditional Comment Kullanımı

Bu yazımızda şartlı yorum kullanarak sayfamızın kullanacağı css kodunu belirleyeceğiz. Şartlı yorumlarda kod eğer koşulu sağlamıyorsa yorum olarak algılanmaktadır.
Bu sayede hangi css dosyasının kullanılacağını seçebiliyoruz.

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" /><![endif]-->

Bu durumda kullanıcı ie6 kullanıyorsa style.ie6.css, ie7 kullanıyorsa style.ie7.css diğer tüm tarayıcılar için isestyle.css aktif olacaktır.

Ayrıca <!- -[if lte IE 6]> şeklinde tanımlayarak ie6 ya da daha düşükse olarak tanımlayabiliyoruz.

Not: Bu özelliği sadece internet explorerda kullanabilimekyiz.

 

Target ALL VERSIONS of IE (Tüm İE sürümleri için)

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE (İE harici tarayıcılar için)

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY (İE 7 için)

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER (İE 6 ve alt versiyonları için)

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER (İE 7 ve alt versiyonları için)

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER (İE 6 ve üst versiyonları için)

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

SCRİPT İLE ALMAK İÇİM;

<script>
 $(document).ready(function() {
 if ($.browser.msie)
 {
     if ($.browser.version < 9)
     {
         $('.wrapper').hide();
     }
 }
 });
 </script>