3 beğenilme 0 beğenilmeme
36 gösterim

Css Nedir ?

Css açılımı nedir ?

Css ne işe yarar ?

 

16 Temmuz Css kategorisinde ahmetbal Yeni Mezun (690 puan) paylaştı | 36 gösterim

1 cevap

0 beğenilme 0 beğenilmeme

css nedir

CSS (Cascading Style Sheets), HTML ve JavaScript gibi, internet sayfalarının kodlanmasında kullanılan 3 ana teknolojiden biridir.

CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder. Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda,ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.

CSS’in tarihçesi hakkında kısa bilgi

CSS ilk kez 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Bunun ardından W3C (Dünya Çapındaki Ağ Birliği), çeşitli forum ve eposta listelerinde yapılan birkaç farklı stil sayfası dili taslağını da göz önünde bulundurarak, 1996 yılında ilk CSS önerisini sunmuştur (CSS1).

İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin 12 Mayıs 1998’de CSS2 önerisini sunmasıyla sonuçlanmıştır. Bunun hemen ardından çalışmalarına başlanan CSS3 ise, tarayıcı desteği artmış olmasına rağmen 2016’da halen geliştirilme aşamasındadır.

İnternet safasının yapısı ve CSS

Yapısal olarak incelendiğinde internet sayfaları üç katmandan oluşur. Bu katmanlar önem ve uygulama sırasına göre içerik katmanı, görselleştirme katmanı ve etkileşim katmanıdır.

İçerik katmanı (HTML)

İçerik katmanı her intenet sayfasında mutlaka vardır. Sayfa sahibinin ziyaretçiye aktarmak istediği bilgi, HTML ile etiketlenerek bu katmanı oluşturur. Günümüzde internet sayfalarının içeriği ağırlıklı olarak metin olsa da, resim, animasyon, video gibi farklı ortamlar da içerik olarak kullanılmaktadır. Bu katmanda içeriğin nasıl görüntüleneceğine dair bilgi olmaz (olmaması gerekir).

Görselleştirme katmanı (CSS)

Görselleştirme katmanı, içeriğin sayfayı ziyaret eden kişiye nasıl gösterileceğini belirler. İçeriğin ekran boyutuna göre ayarlanması, yazı boyutunun belirlenmesi, renk, beyaz alan gibi görsel öğelerin tanımlanması bu katmanda yapılır. Görselleştirme katmanı için önerilen ve yaygın olarak kullanılan dil CSS’tir.

Etkileşim katmanı (JavaScript)

Etkileşim katmanı, kullanıcı ve sayfa arasındaki etkileşim yöntemlerini ve sonuçlarını tanımlar. Genellikle JavaScript ile kodlanır. Bir sayfanın ziyaretçi ile etkileşimi, formların kontrol edilmesi gibi basit işlemlerden, masaüstü yazılımlarına benzer kapsamlı web uygulamalara kadar çeşitlilik gösterebilir.

Neden CSS?

HTML, içeriğin nasıl görüntüleneceğini, sayfaya nasıl yerleşeceğini belirlemek için tasarlanmış bir dil değildir. HTML’nin amacı içeriği tarif etmek, içeriğin hiyerarşisini belirlemektir. Sayfanın başlığı nedir, sayfadaki bağlantılar hangileridir, alt alta dizili bu satırlar bir liste midir yoksa sıradan paragraflar mıdır? HTML’nin işi bu soruların cevaplarını vermektir. Başlık kırmızı mı olsun, logo büyük mü olsun, sol üstte mi olsun? HTML bunlara karışmaz.

CSS tam burada devreye girer. CSS’in işlevi neyin, nerede, nasıl görüntüleneceğini tarif etmektir. Mesela logonun sayfanın sol üst köşesini tamamıyla kaplayacak şekilde görüntülenmesi CSS’in sorumluluk alanındadır. Bir ay sonra logonun sağ üst köşenin tamamını kaplaması icap ettiğinde, HTML koduna veya logonun yer aldığı resim dosyasına hiç dokunmadan bu işi gerçekleştirmek yine CSS’le yapılacaktır.

CSS’in sağladığı avantajların başlıcaları şunlardır:

  • Güncelleme kolaylığı: Tüm bir sitenin görselleştirme bilgisi, bir veya birkaç CSS dosyasında tutulabilir. Her sayfanın görsel tarifinin kendi içinde tanımlandığı bir yapıyla kıyaslandığında bu, sitenin bakımı ve güncellemesi açısından müthiş bir avantajdır. 1000 sayfalık bir sitede başlıkları bir punto büyütmek gerektiğinde, CSS kullanan kişi tek bir dosyada tek bir satırı günceller. Görselleştirmeyi ayrı bir katman olarak ayırmamış kişi, bin sayfayı ayrı ayrı güncellemek durumundadır.
  • Veri trafiği tasarrufu: Tüm stiller birkaç tane CSS dosyasında bulunduğundan, veri trafiğinde ölçülebilir bir tasarruf sağlanır. Ayrı olarak kodlanan CSS dosyası, bir kere indirildikten sonra tarayıcı tarafından saklanır. Aynı CSS dosyasını kullanan diğer sayfalarda, saklanan bu dosya kullanılır. Aynı dosya bir daha indirilmez.
  • İçerik esnekliği: İçerik ile görsel tasarım ayrıldığında, aynı içeriği farklı farklı ortamlarda kullanmak kolaylaşır. Mesela aynı içeriği hem anasayfada, hem iç sayfada, hem RSS feed için hem de ekran okuyucular için kullanabilirsiniz.
  • Güncel kodlama stratejilerine imkan sağlama: Görsel tasarımın içerikten ayrı oluşu, artık vaz geçilmez bir strateji haline gelmiş olan responsive tasarım için zorunludur. Böylelikle her cihaz, her ekran boyu için farklı bir sayfa yapmak zorunluluğu ortadan kalkar.

css nedir

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 kullanabilirsiniz.

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.

Örnek : 

//Bir div nesnesinin arkaplan rengini kırmızı yaptı
<div style="background-color:red;"> ... İçerik ... </div>

//Resmin genişliğini 200px yüksekliği 150px yaptı
<img src="..." style="width:200px; height:150px;" />

//div içindeki span içinde bulunan yazıyı kalın, 15px boyutunda ve mavi yaptı
<div>
    Şu anda <span style="font-size:15px; font-weight:bold; color:blue;">Uzman Coder</span> ile css öğreniyoruz.
</div>

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.

Örnek :

<html>
<head>
    <title>Uzman Coder - Css başlangıcı</title>
    <style>
        body{background-color: #ffffff; font-size:16px;}
        #sidebar{ 
            width:300px; 
            height:800px; 
            background-color:blue; }
        
        .box{
            font-size:16px;
            font-weight:bold;
            }
        img{
            width:400px;
            height:400px;
            border:3px solid #d0d0d0;}
    </style>
</head>
<body>
    #SİTENİN GÖRÜNÜR KODLARI
</body>
</html>

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.

Örnek :

<html>
<head>
    <title>Uzman Coder - Css başlangıcı</title>
    <link rel="stylesheet" <span class="highATT">type=</span><span class="highVAL">"text/css"</span> href="dosya_ismi.css">
</head>
<body>
    #SİTENİN GÖRÜNÜR KODLARI
</body>
</html>

Örneklerle CSS

Yaptığımız tanımı biraz somutlaştırmak için iki kod örneği verelim. Kod deyince gözünüz korkmasın. CSS’in ayrıntılarını değil, mantığını anlatacak basit örnekler kullanacağız.

Örnek 1: CSS ile logonun yerleştirilmesi

#logo {
 width: 180px;
 position: absolute;
 left: 10px;
 top: 20px;
}

Örnek 2: CSS ile ikinci seviye başlıkların düzenlenmesi

h2 {
 margin-top: 24px;
 color: red;
 font-size: 24px;
}
 
#sidebar-left h2 {
 font-size: 18px;
}

Bu CSS bloğu da şunu söylemektedir:

  • Yüklenen sayfadaki 2. derece başlıkları bul.
  • Bulduğun öğelerin tümünün rengini kırmızı, metin boyutunu 24 piksel yap.
  • Bir istisna ile; eğer bu başlık soldaki sütundaysa metin boyutunu 18piksel yap

Özetlersek

CSS, HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif eder.

CSS, görselleştirme yükünü HTML’in sırtından alır ve bu bilgiyi birkaç dosyada toplar.

Böylece site güncellemelerini ve bakımını kolaylaştırır.

Tüm görselleştirme bilgisinin birkaç dosyada toplanması, aynı zamanda, veri trafiğinde de tasarruf sağlar.

Görselleştirme yükünü sırtından atan HTML de, asıl amacına uygun olarak yalnızca içerik hakkında bilgi taşır ve böylece daha portatif hale gelir.

CSS, responsive tasarım stratejisinin belki de en vazgeçilmez ayağıdır.

CSS kolay öğrenilebilen bir dildir.

Kullanımı da kolay, hatta zevklidir.

CSS sayesinde ön-taraf yazılımı (front-end development), günümüzün milyon çeşit cihaz-ekran ortamında bile insanın akıl sağlığını yitirmeden yapabileceği bir iş olarak kalmıştır.

Aşağıdaki görsele bakarak css'in tam olarak ne işe yaradığını görebilirsiniz :)

css nedir

16 Temmuz serhat.öcal Uzman Coder (13,350 puan) cevapladı
uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER

    96 soru

    81 cevap

    19 yorum

    122 üye

    ×

    Bizi Takip Edin!

    Bumerang - Yazarkafe

    comodo ssl




    96 soru
    81 cevap
    19 yorum
    122 üye