CSS Nedir? Ne İşe Yarar? Nasıl Kullanılır? Örnekli Anlatım - Koddit

• Kategoriler
  • Yazılım
  • Genel
  • iOS
  • İş Zekası
  • Anket
  • Girişim
  • Oyun
  • Verim
  • İş
  • Veri Madenciliği
• Sık Kullanılan Etiketler
  • Bize Ulaşın
  • Gizlilik Politikası
  • Privacy Policy

• Arama
• Bizi Takip Edin

  Bizi Takip Edin

  • 
  • 
  • 

  Facebook Sayfamız

• Paylaş
  • Tweet
  • 
• Off Drop

Yazı Etiketleri

csscss nedir

Paylaş

• Tweet
• 

Diğer Yazılar

• CDN Nedir? Ne İşe Yarar?
• Firebase Nedir? Ne İşe Yarar? Nasıl Kullanılır?
• Express JS Nedir?
• Hadoop ve Mahout ile ‘Big data’ İşleme | Multi-Node Recommendation Örneği
• IBM Cognos Report Studio’nun Özellikleri

By Caner Öncü - Aralık, 20th 2015 İçerik gizle 1 CSS nedir? 2 Markup dili mi?! CSS nedir anladım da, markup dili nedir peki? 3 CSS ne işe yarar? 4 İlla CSS mi kullanmalıyım görünümü değiştirmek için? İstediğim stili HTML ile sağlayamaz mıyım? 4.1 HTML 4.2 CSS 5 CSS kullanmanın sağlayacağı faydalar nedir? 5.1 Sonuç olarak…

CSS nedir?

CSS (Cascading Style Sheets) basitçe, sayfamıza ait görselliğe dair her türlü yapıyı düzenlememizi sağlayan bir markup dilidir. Sayfaya ait öğelerin (form, buton, arkaplan vb.) renklerini, boyutlarını, konumlarını vb. özelliklerini düzenlememize imkan sağlar.

CSS bir programlama dili değildir. CSS bir markup dilidir.

Markup dili mi?! CSS nedir anladım da, markup dili nedir peki?

Markup dili, bir dökümanı sistemin/uygulamanın/aracın yorumlayabileceği formatta oluşturmamızı sağlayan dile verilen isimdir. Örneğin, HTML de bir markup dilidir. Örnek vermek gerekirse:

<title>Deneme</title>

yazısını kaydettiğimiz html uzantılı bir döküman, herhangi bir web browser tarafından sayfa başlığı Deneme olan bir web sayfası olarak yorumlanacaktır.

HTML & CSS kardeştir, ayıran kalleştir!

CSS ne işe yarar?

Tanımında da belirttiğimiz gibi, CSS, web sayfamızdaki öğelerin stilini/görünümünü değiştirmemizi sağlar. Butonunuza gölge mi eklemek istiyorsunuz? Biri sola diğeri sağa dayalı 2 formu aynı konumda mı göstermek istiyorunuz? Ya da sayfanızı scroll etseniz bile yukarıda sabit kalan bir header’a mı ihtiyacınız var? O halde CSS yardımınıza koşacaktır. Web sayfasının görünümüyle alakalı nice senaryoda CSS kullanmanıza gerek olacaktır.

İlla CSS mi kullanmalıyım görünümü değiştirmek için? İstediğim stili HTML ile sağlayamaz mıyım?

CSS ile düzenleyebildiğimiz bazı görünüm düzenlemelerini CSS kullanmadan yalnızca HTML kullanarak da sağlayabiliriz. Örneğin, yazı font büyüklüğünü değiştirme, yazı rengini değiştirme, resim boyutunu düzenleyebilme gibi… Ancak yapılmak istenen işler karmaşıklaştıkça (buton gölgelendirme, resim saydamlığını düzenleme, link üzerine geldiğimizde rengin değişmesi vb.) CSS kullanmaya yöneliyoruz.

CSS ve HTML arasındaki ilişki için verilen örneklerde genelde şu mantıkla örneklerle karşılaşırsınız:

HTML

Bir arabayı meydana getiren pek çok bileşeninin bir araya gelmesiyle o arabayı gerçekleştiren yapıya HTML diyebiliriz. Koltuklar, direksiyon, vites, tekerlekler… hepsi arabayı oluşturan bir öğedir. Bu öğeler ve hepsinin birleşmesiyle ortaya çıkan araba yapısını HTML ile oluşturuyoruz gibi düşünebiliriz.

CSS

Oluşan arabaya ait direksiyonun rengi, koltukların kaplaması, camların film ile kaplanması, farların renkleri, konsolun ahşap kaplaması olması… tüm bu örnekler, kurulan HTML yapısının stilini/görümünü belirleyen CSS ile ilgilidir.

HTML ve CSS’in birbiriyle ilişkisi…

CSS kullanmanın sağlayacağı faydalar nedir?

• Görünüme dair özellikleri birden fazla öğede tekrar tekrar kullanabilmemizi sağlar (Bir buton öğesine ait yazı boyutunu ve rengini CSS ile ayarladıktan sonra, aynı özellikleri bir başka öğede olan textbot içinde de kullanabiliriz)
• Farklı görünüm özelliklerini dilersek bir öğe üzerinde aynı anda uygulayabilmemize olanak tanır (Gölgelendirme için hazırladığımız bir CSS parçası ile renklendirme için hazırladığımız ayrı bir CSS parçasını aynı öğe üzerinde kullanarak iki özelliğini de birleştirebiliriz)
• Oluşturacağımız bir .css dosyası ile görsel özellikleri derli toplu tutarak, sabit bir HTML yapısınaki görselliğe ait değişiklikleri yalnızca bir dosyayı düzenleyerek sağlayabiliriz
• Farklı öğelere ait olacak özellikleri tek CSS parçasında tanımlayarak tekrar tekrar stil belirtiminden kaçınmak websitemizin boyutunu da düşürecektir
• Farklı browser türleri ve mobil ya da masaüstü uygulamadan girişin tespiti ile farklı bir görünüm sunma imkanı yakalayabiliriz (Bağlanan kullanıcının giriş yaptığı cihaz/browser’a göre farklı CSS gösterimi sağlayarak daha rahat kullanım deneyimini yakalayabiliriz)

Sonuç olarak…

Web tasarımıyla uğraşan herkesin aşina olması gereken CSS, öğrenmesi çok kolay faydası ise çok yüksek bir markup dili. Web uygulaması geliştiren pek çok geliştiricinin aşina olduğu bu markup dilini öğrenmeniz size zaman/efor konusunda büyük fayda sağlayacaktır.

• Tweet
• 

Caner Öncü

Benzer Yazılar

• 

  Dropshipping Nedir? Nasıl Yapılır? Nasıl Başlanır?

  Genel
• 

  Remote Desktop Nedir?

  Genel
• 

  SAP Nedir? Ne işe yarar?

  Genel

Site içi arama

[the_ad id="2530"]

Son Tweet’ler

Tweets by @kodditcom

Son yazılar

Etiket Bulutu

anket api api nedir application programming interface cognos css css nedir dark web deep web elektronik mühendisleri elektronik mühendisliği etl hidden web ibm ikon informatica ios işe alım iş zekası mvc nedir mvc örneği mülakat teknikleri mülakat yöntemleri neden mvc objective-c onion ozan uykun php framework powercenter PowerDesigner PushDown Optimizasyon rapor swift teknik iş teknik iş alım teknik mülakat teknoloji tor transformation veri madenciliği yazılım zn framework zntr İş Zekası Nedir İş Zekasının Geleceği

Kategoriler

• Anket
• Bilgi
• Dev & Design
• Genel
• Girişim
• iOS
• İş
• İş Zekası
• Oyun
• Veri Madenciliği
• Verim
• Veritabanı
• Yazılım