CSS Hakkında Herşey

Uzun süredir yazamıyorum, artık yavaş yavaş başlamak lazım. “CSS Nedir?” diye girmek biraz abes gelebilir ama herşeyi temelden anlatmaya başlamak daha etkili oluyor. İlerleyen yazılarımda web teknolojilerinden bahsetmeyi planlıyorum. Özellikle ileri seviye php programlama ve jquery. Bunları daha iyi anlatabilmem için çok temel bilgileri yazmam gerekiyor ki referans verebileyim. Bu yazıda CSS’den bahsedelim. Belki bilinmeyen yönlerine değinebiliriz.95’te HTML‘in ilk versiyonun duyurulmasından sonra web tasarımcıları hızlı çoğalmaya ve değişik tasarımlar üretmeye başladılar. İstekler çoğaldıkça HTML’in sayfa düzeninde sağladığı esneklik yeterli gelmemeye başladı. Bu yüzden 96’da CSS 1.0 yayınlandı. Bu tarihten sonra sürekli gelişti ve günümüzde 2.1 sürümü kullanılmaya hatta eskimeye başladı. CSS 3.0 duyuruldu ve gelişmeye devam ediyor.

CSS kullanmanın birçok avantajı var tabiki. Bunları uzun uzun açıklamayacağım ama şöyle listeleyebilirim;

Zengin içerik
Kolay yönetim
Tasarımda tutarlılık
Ekran ve yazıcı için ayrı css tanımlayabilme imkanı

gibi avantajlar sağlar. Ayrıca HTML ile tasarladığınız sayfanızın kodunun sade ve okunabilir kalması da cabası. Tabi bunun için CSS kodlarınızı ayrı bir dosyada yazmanız gerekecektir. Konusu açılmışken CSS kodlarınızı nasıl import edersiniz bunları açıklayalım;

Doğrudan HTML etiketinin içine yazmak; Aşağıdaki gibi bir örnek olabilir. Tavsiye edilmez. Kodunuzu karışık gösterecektir.
```
<div style="text-align: center; width: 500px; color: red;"></div>;
```
<style> etiketi kullanarak yazmak; İlk yönteme göre biraz daha temiz bir tarz. Ayrıca size daha fazla avantaj sağlayacaktır. Yinede bu yöntemi de tavsiye etmiyoruz.
```
<style>
div {
    text-align: left;
    padding-left: 10px;
}
</style>
```
Ayrı dosyaya yazmak; En temizi css kodlarını ayrı bir dosyaya yazıp her html sayfanıza import etmek. Sadece bir sayfada kullanacağınız bir stil olursa belki o zaman ilk 2 seçeneği kullanmak mantıklı olabilir. Ayrı bir dosyada yazarken 2. seçenekte verdiğim örnek gibi yazıyorsunuz. Tek fark <style> etiketini açıp kapatmanıza gerek yok. HTML sayfasının <head> etiketleri içine aşağıdaki kodu ekleyerek harici CSS dosyanızı sayfanıza import edebilirsiniz.
```
<link href="tema/style.css" rel="stylesheet" type="text/css"
media="screen" />
```
Ayrıca bir css dosyası içerisine başka bir css dosyasını da import edebilirsiniz. Örneğin yukardaki gibi HTML sayfasına eklediğin style.css içinde şöyle olabilir;
```
@import "menu.css";
```

Çok ayrıntıya girdiğimi hissettim o yüzden biraz daha bilinmediğini düşündüğüm şeylerden bahsedeyim. Mesela css’de uzunluk ölçüleri. Css içerinde herhangi bir büyüklük belirtirken şunlardan birisini kullanırsınız;

Göreceli Uzunluklar; Bunlar bazı kriterlere bağlıdır ve onlarla orantılı olarak değişebilir. Örneğin px kişinin ekran çözünürlüğüne göre değişir, ex seçilen font-size‘a göre değişir ve genellikle font-size‘ın yarısı kadar bir uzunluğu gösterir. % ise en sık kullanılanıdır ve elementin parentına göre değişir.
Mutlak Uzunluklar; Bunlar her şartta sabittir. Örneğin cm ve mm bildiğimiz santimetre ve milimetredir ya da in İngilizlerin uzunluk ölçüsü olan inç anlamına gelir ve 2,54cm kadar bir uzunluk eder. pt ise point olarak bilinir ve 0,035 cm kadar bir uzunluğa tekabül eder.

RENKLER; CSS içerisinde renkleri göstermenin 5 yolu var ( başka bilen varsa söyleyebilir). Örneğin mavi için;

RGB (red, green, blue) olarak düşünürsek color: #00F; şeklinde gösterebiliriz. Burada ilk karakter kırmızı, ikincisi yeşil, üçüncüsü mavidir. İstediğinizden istediğiniz kadar koyarak (0, 1, 2, 3 … 8, 9, A, B, C, D, E, F) karıştırabilirsiniz.
İkinci gösterim birincinin biraz daha detaylandırılmış halidir. Birincide 3 ana rengin sadece 16 tonu varken burada 256 tonu kullanılabilir. ikinci yöntemde mavi color: #0000FF; şeklinde gösterilir.
Üçüncü yöntem mantık olarak ikinci ile aynıdır fakat gösterim farklıdır, şöyleki mavi için; color: rgb(0, 0, 255); şeklinde.
Dördüncü yöntem şekil olarak üçüncüye benzer. Tek fark 3 ana renk için 0-255 arası bir değer vermek yerine, elde etmek istediğimiz renk içerisindeki yüzdelerini belirtiriz. örneğin mavi için; color: rgb(0%, 0%, 100%); şeklinde.
Son yöntem en basiti ve en insancıl olanıdır. örneğin mavi için; color: blue; Bu yöntemde tek sorun bilgisayarda insanların isim verdikleri renklerden çok daha fazla renk olmasıdır. Bu sebeple 5. yöntem tüm renkleri cover edemez.

SEÇİCİLER

Yukarıda anlattıklarım biraz hikaye gibi gelebilir. Sıkılmış olabilirsiniz. İşin aslında en önemli kısmı seçiciler. Yazdığınız CSS özelliklerinin hangi HTML elementini etkileyeceğini seçiciler sayesinde seçersiniz. Hepsine kısaca değinelim;

Etiket ismi ile seçmek; Doğrudan etiketin ismini yazarak seçebilirsiniz. Bu durumda belirtilen etiketin tüm örnekleri etkilenecektir. Örneğin;
```
div {
    text-align: center;
    color: #F05A33;
}
```
ID ile seçmek; Bir id verilip css yazılabilir. Bu durumda belirtilen ID‘ye sahip tüm HTML etiketleri etkilenir. Örneğin;
```
#myDiv {
    text-align: left;
    font-size: 12pt;
}
```
Class ile seçmek; Bir class verilip css yazılabilir. Bu durumda belirtilen class‘a sahip tüm HTML etiketleri etkilenir. Örneğin;
```
.griLink {
    color: gray;
    font-weight: bold;
}
```
Hiyerarşik Seçim; İlk üç maddeyi birleştirerek hiyerarşik bir yapıda seçim yapabilirsiniz. Örneğin sayfanın body‘sinin içerisindeki tüm div‘lerde bulunan onemli id’sine sahip paragraflardaki icLink classlı linkleri mor yapmak istiyorsunuz;
```
body div #onemli .icLink {
    color: purple;
    text-decoration: none;
}
```
Herşeyi Seçmek; Bunun için * sembolü kullanılır. Bunu 4. maddedeki hiyerarşik yapıyla kullanabilirsiniz. Örneğin paragrafların içindeki herşeyi yukarı dayamak için;
```
p * {
    margin-top: 0px;
    padding-top: 0px;
}
```
Özelliğiyle Seçmek; HTML etiketlerinin stilleri dışında birde attribute denilen özellikleri bulunur. Bunları kullanarak da istediğiniz HTML etiketini seçip stil uygulayabilirsiniz.
Örneğin src özelliği my_image.jpg olan resimlerin genişliklerini %100 yapalım;
```
img[src="my_image.jpg"] {
    witdh: 100%;
}
```
Burada eşittir işleminden başka işlemlerde kullanılabilir. Örneğin tüm png uzantılı resimleri seçelim;
```
img[src$="png"] {
    witdh: 100%;
}
```
Ya da src özelliği “../resimler/” şeklinde başlayan yani resimler klasörünün içinde bulunan resimleri seçelim;
```
img[src^="../resimler/"] {
    witdh: 100%;
}
```
Ya da ilk örneğin aksine src özelliği my_image.jpg olmayan resimleri seçelim;
```
img[src!="my_image.jpg"] {
    witdh: 100%;
}
```
Ya da src özelliği içerisinde my_ geçen tüm resimleri seçelim;
```
img[src*="my_"] {
    witdh: 100%;
}
```
Aşağıdaki örnek ise içeriğine bakmaksızın src özelliği var olan tüm resimleri seçer;
```
img[src] {
    witdh: 100%;
}
```

Bu yazıyı okunabilir boyutlarda tutmak için burada bırakıyorum. CSS için bu kadar “bunları biliyor muydunuz” tarzında bilgi yeterli zannımca. Bir sonraki yazıda CSS 3.0 ile gelen yeniliklerden bahsedebilirim. Belki javascript içinde buna benzer bir giriş yapabilirim. jquery anlatabilmek için gerekli altyapıyı bir şekilde oluşturmak lazım. Kim bilir…

~Şarkı~