CSS Öğrenmeye Başlarken

CSS Öğrenmeye Başlarken

  Aralık 10, 2017    Gökhan Krl

---

CSS öğrenmek bir çok programlama dilinden daha kolaydır. Aslında bu dilin kullanımı HTML ile de kıyaslanılabilir. Şöyle ki HTML etiketlerinin kullanımını, yani açma kapama ve etiketleme mantığını anladıysanız, CSS ile de kodlama yapmanız aynı mantıkla kolay. Çünkü, bir özellik öğrendikten sonra diğerlerini zaten ezbere gerek kalmadan bir kaç uygulama ile öğrenmiş olacaksınız.

Bu anlamda öğrenmeye başlamadan önce kendinizi bazı konularda şartlar iseniz, kafa karışıklığı ve unutkanlık gibi durumların önüne geçebilirsiniz. Yani kısaca,

Bu İş Çok Kolay !

Nihayetinde beyin cerrahi müdehele uzmanlığını öğrenmiyoruz. Bu yüzden bu işin kolay bir iş olduğunu, altından kalkıp kendinizi iyi derecede şekillendirebileceğinizi unutmayın.

Not Alarak Çalışmak

Öğrendiklerinizi başlangıçta da olsa not alarak başlayın. Aldığınız bu notlar size yakın bir yerde olabilir. Örneğin masaüstünüzde veya masaüstünde kolayca erişebileceğiniz bir klasör içerisinde olabilir.
Son zamanların popüler uygulamaları olan Google Drive gibi uygulamalara kayıt edebilir ve bir sekme uzaklıkta notlarınıza tekrar ulaşabilirsiniz.
Klasik not alıyorsanız çalışma masanızın hemen karşısına notlarınızı tutturabilir ve ihtiyaç halinde göz önünde bulundurabilirsiniz.

Önizleme Yapmak

Tabii ki de en önemli mesele, örneklerle çalışmak. Web Tasarım ve Kodlama öyle bir iştir ki hem öğrenir hem de kolayca önizlersiniz. Zamanınızın haricinde başka masrafınız yok. Keza bu işin püf noktası zamanı yerli yerinde kullanmaktır. Sürekli örnekler halinde çalışabilirsiniz. Aynı zamanda bilgisayarınıza şimdiden bir local server kurulumu yaparak yeni projeler oluşturabilirsiniz. Bu deneyim kazanmanızı hızlandıracaktır.

Yazıyı Oku...

CSS Söz dizimi ve Seçiciler

CSS Söz dizimi ve Seçiciler

  Aralık 09, 2017    Gökhan Krl

---

Söz Dizimi

Söz dizimleri bir seçiciden ve bir bildirim bloğundan oluşur.

Element Seçiciler

Yukarıdaki görsele baktığımızda h1 etiketi seçilmiş ve köşeli parantez açılarak, bu etikete bazı değerler girilmiş.

Verilecek değerler her zaman köşeli parantezler içine yazılır.

Örnek kullanımı 

h1 {
değerler...
}

Bu yöntem ile bir sayfa içerisindeki tüm h1 etiketlerine otomatik olarak değer atamış oluyoruz. Yani bu bir Genel Seçicidir. Tüm HTML etiketilerine bu şekilde değer atayabiliriz. Aynı zamanda bir özelliği birden fazla HTML etiketi üzerinde de gruplama yaparak uygulayabiliriz.

h1, h2, p {
değerler...
}

İşte bu da Grup Seçicileri olarak adlandırılır.

ID ve Class(Sınıf) Seçicileri

Genel ve Grup seçicileri öğrendikten sonra. Şimdi ise sırada ID ve Class seçicileri var. Bu seçicilerin özelliklerini sırasıyla başlıklar halinde anlatalım.

ID Seçicileri

ID Seçiciler bir sayfa içerisinde daima bir defa kullanılmaktadır. Yani bir etikete vermiş olduğunuz bir ID, yalnızca o etikete aittir. Bu yüzden ID 'ler bir sayfa içerisinde yalnızca bir defa çağırılmaktadır.

#yenielement {
    degerler...
}

gördüğünüz gibi yeni bir ID oluşturduk ve adını "yenielement" koyduk. İstediğiniz isimi koyabilirsiniz. ID tanımlarken başına "#" işareti koyuyoruz ve adını yazıyoruz. İşte bu kadar kolay.

Dikkat edilmesi gereken yer Türkçe Karakter kullanılmaması gerektiğidir.

HTML içinde kullanımı

<h1 id="yenielement"> Merhaba </h1>

Bu örnek bir ID kullanımı.

Class(Sınıf) Seçicileri

Class seçicileri ID 'den farklı olarak istenildiği kadar bir sayfa üzerinde kullanılabilir.

.yenielement {
    degerler...
}

Bu da bir Class oluşturma örneği. Sınıf oluşturmak için başına "." işareti koyuyor ve adını yazıyoruz. Hepsi bu kadar.

Yine bir etikete ID veya Class ataması yapmak için o etiketin içerisine ne tanımlayacağımızı yazıyoruz ve tanımın içine tanımladığımız ismi yazıyoruz.

Class kullanımı da ID ile aynı mantıktadır.

<h1 class="yenielement"> Merhaba </h1>

İlave olarak çeşitli ön izleme siteleri ile akılda kalıcı örnekler yapabilir kendinizi geliştirebilirsiniz.

CSS Yorumlar

CSS içerisinde bir değerin kullanılmamasını sağlayabilir veya isteğe bağlı yorum belirtebilirsiniz. Bir CSS yorumu eklemek için /* ve */ işaretleri kullanılır. Bu işaretler içerisinde kullanılan kısım yorum kısmıdır.

p {
    degerler...
   /* Burası yorum kısmıdır. */
}
/* Ve ya sayfanın herhangi bir alana yorum yazabilirsiniz. */

Yazıyı Oku...

CSS Giriş

CSS Giriş

  Aralık 09, 2017    Gökhan Krl

---

CSS 3 'e ait Logo

CSS Nedir ?

CSS, açılımı Cascading Style Sheets 'tir. Web sayfalarının özelleştirilmesi için geliştirilmiş bir kodlama dilidir.

Bu dil ile HTML etiketlerini özelleştirebilir ve Web Sayfalarını istediğimiz gibi özelleştirebiliriz.
Şu an CSS 3 ile bu dil pek çok farklı özelliği de beraberinde getirmiş ve geçmişte Javascript ile yapılabilen çeşitli özellikleri de kullanılabilir hale getirmiştir.

CSS 'nin bu gelişimi bazı tarayıcılarda yeni özellikleri destekleme konusunda sıkıntı çıkarsa da, geçen zamanda bir çok tarayıcı da bu gelişmeye ayak uydurarak yeni özellikleri de desteklemeye başlamışlardır.

İyi de Neden CSS Kullanalım ?

CSS, Web Sayfalarınızın farklı cihazlara uyumunu, sayfa için tasarımını, yerleşim ve daha pek çok özelleştirmeyi yapmanıza olanak sağlar.

Şuan HTML üzerinde sayılı özelleştirmelerin haricinde, ileri seviyede bir sayfa tasarlama söz konusu değildir. CSS gibi bir sayfa tasarlama hem daha kolay hem de sayfa içi etiketler daha yönetilebilirdir.

Eskiden HTML etiketi içerisinde bulunan font özelliği kullanımı adeta bir kabustu. Nedeni her sayfada ve her etikette bu özelliği ayrı ayrı kullanılmak zorunda olunmasıydı. Ancak CSS ile bir sayfa içerisindeki istediğiniz elemanlara özellik ataya bilir ve isterseniz tüm etiketleri tek seferde özelleştirebilirsiniz.

Bundan sonraki yazılarımda CSS 'ye ait tüm özellikleri anlatmaya çalışacağım.

Yazıyı Oku...