CSS nedir, ne işe yarar ve nasıl kullanılır?
24 Ağustos 2015 Furkan Atabaş 11.960 Okunma Yorum Yok

CSS nedir, ne işe yarar ve nasıl kullanılır?


CSS (3)

Herkese merhaba.

Bu aralar neden bilmiyorum ama içimde bir blog yazma isteği fakat konu bulamamak gibi bir sorunum var. Ama sitemin güncel kalmasını sürekli yeni yeni konular olmasını istiyorum. Bu yüzden kendime bi konu bulup o konu üzerinde yazma kararı aldım. Konumuda CSS olarak belirledim. Biliyorum internette sanki hiç css dersleri yokmuş gibi, ama olsun bende de olsun 😀 ziyanı yok diye düşünüyorum ve daha fazla uzatmadan yeni öğrenecek olan arkadaşlar için bir başlangıç yapıyorum. ilk başlık (:

CSS nedir?

Css : açılımıyla Cascading Style Sheets yani Türkçe anlamı ile Basamaklı Stil Şablonu demektir. Eğer yazıya başlamadan önce ki araştırmamda düzgün bir çeviri yapabildiysem css hayatımıza HTML 4.0 ile dahil olmuştur. Görevi HTML etiketleri kullanılarak oluşturulmuş web site görüntülerini şekillendirmektir.  HTML demişken hatırlatmak isterim CSS’i kullanabilmek için HTML bilmemiz gerekiyor zaten css den önce bilmemiz gereken tek kodlama html kodlamasıdır.

CSS ne işe yarar, neler yapılabilir?

Yukarıda ki Css nedir? başlıklı paragrafımda da bahsettiğim gibi css, web sitelerinin kullanıcılar tarafından ekranda görünen arayüzünü şekillendirmemize, renklendirmemize, boyutlandırmamıza ve konumlandırmamıza yarar.  Aslında bunun için bir listeye gerek yok çünkü css ile hemen hemen bütün görüntü şekillendirmesini yapabiliriz fakat gene de bir örnek listesi vermem gerekir ise css ile;

  • Arkaplanlar renklendirebilir veya resim ekleyebilir.
  • Nesnelere kenarlıklar eklenebilir.
  • Kenarlıklar renklendirilebilir.
  • Yazılar boyutlandırılıp, farklı renklere boyanabilir.
  • Yatay menüler yapılabilir.
  • Css ile dikey menülerde yapılabilir.
  • Hatta css ile açılır menü bile yapılıyo 😮
  • Resimler en ve boy olarak küçültülebilir.
  • Buton yapılabiliyor.
  • Nesnelerin ve yazıların üzerine gelinince değişikler yapılabiliyor.
  • Yazıyı seçince seçili arkaplanı mavi yerine kırmızıya boyayabilir
  • Yazı başlıklarının altını çizebilir
  • Resimlerin köşelerini ovalleştirebilir
  • Yazılara gölge ekleyebilir
  • Css ile butonlara, resimlere ve içerik kutularına bile gölge ekleyebiliriz.
  • İnanmayacaksınız ama yazılar hatta sitenin tamamını ortalayabilirsiniz bile 😀

Liste bitiminde nefesimi rahatça almaya başladıktan sonra bir not css ile yapabilecekleriniz listesi yukardaki listeyi 3 e ve 4 e katlayabilir (:

CSS kodu nasıl olmalı?

seçilen_nesne {  özellik:değer;   özellik:değer;  özellik:değer }

Bir css kodu aşağıdaki css nasıl kullanılır? başlıklı yazımda ki 3 yöntemden üçünde de aynı yazılır. Fakat 1. yöntemde küçük bir istisna vardır ki bu istisna da 1. yöntemde css direk nesneye uygulandığı için bir seçiciye ihtiyaç duyulmaz bu yüzden yukarıda gösterdiğim css kullanım şeklindeki seçilen_nesne ve { } süslü parantezler 1. yöntemde yer almaz.

CSS nasıl kullanılır?

CSS kullanabilmenin 3 farklı yolu var. Göstereceğim 3 farklı css kullanım şeklinden en çok kullanmanız gereken 3. aşamadaki css kullanım şeklidir. Fakat yeri geldiğinde diğerlerini de kullanacaksınız.

1- Inline Styles (Html etiket içi)

Inline Styles yönteminin yanındaki parantez de bulunan Html etiket içi css kullanımı tamamen benim çevirimdir yani aslı öyle değil 😀 Asıl adı Inline Styles ama hoş ve mantıklı bir çevirisi  olmadığından ben html etiket içi css kullanımı adını verdim. Bu yöntem basit olarak yazdığımız html taglarının içerisinde style=”” özelliğine atanan değerler ile kullanılır ve diğer iki yöntemin en farklı olanı budur. Çünkü hangi html nesnesine css uygulanacağını seçmeyip direk o nesnenin üzerine kodları yazıyoruz. Bu yöntemi kullanmak için
1-) Hangi nesneye özellik atanacağını bul
2-) Nesneye style=”” etiketini ekle
3-) Style=”” etiketi içerisine css özelliklerini gir.

Şimdi sıra örnekte (:

2.  Internal style sheet (İç style sayfası)

Bu yöntem de html kodlarımızın içinde fakat bu sefer site kodlarımızda en yukarıda bulunan head kodları arasında herhangi bir yere style tagları içerisinde yukarıda belirttiğim Css kodu nasıl olmalı? başlıklı paragraftaki örnek şeklinde yazılır. Seçicileri daha sonra anlatacağım için ayrıntı vermeden örnek vermek istiyorum.
1-) Html kodları içinde en üste çık.
2-) <head></head> kodlarının içine gir.
3-) <style></style> kodlarını ekle.
4-) Style kodları içerisine css özelliklerini gir.

3. External style sheet (Dış stil sayfası)

Bu yöntem en çok kullanılan ve baş ağrıtmayan yöntemdir. 2. yöntemden tek farkı html kodlarının yazılı olduğu dosya dışında dosya_ismi.css isimli bir dosya oluşturup css kodlarını o dosya içerisine yazarak head kodlarının içerisinde dosya_ismi.css i çağırmaktır. dosya_ismi.css dosyasına <style> kodlarını eklemeye gerek yoktur direk css kodlarını yazabilirsiniz. dosya_ismi.css de bulunan dosya_ismi kısmını isteğinize göre değiştirebilirsiniz. Ben aşağıdaki örnekte style.css olarak çağırıcam. Css dosyasını çağırmak için gerekli kod
<link rel=”stylesheet” href=”dosya_ismi.css“>
1-) style.css adında bir dosya oluştur.
2-) style.css içerisine css kodlarını yaz.
3-) head kodu arasında style.css i çağır.

Çok şükür ki yazımı bitirebildim. Şimdilik bir sonraki css yazımda görüşmek üzere. Ve yazımı faydalı bulduysanız  G+1  lerin ve yazılarımın  sosyal  medya  da paylaşılmasının bana çok büyük desteği olduğunu unutmayın. Desteğinizi esirgemeyin.