Günümüzde internet kullanımının artmasıyla birlikte web siteleride hayatımızın bir parçası haline geldi. Hemen hemen her kurum veya şirketin web sitesi bulunuyor desem abartmış olmam sanırım. Sadece Türkiye’de yaklaşık 50 milyon web sitesinin olduğunu biliyor muydunuz? Bunların yaklaşık 10 milyonu ise aktif olarak kullanılan web siteleri.
Doğal olarak her geçen gün web geliştiricilerine (front-end veya back-end) duyulan ihtiyaçta bu oranda artıyor. Bu ihtiyacın artmasıyla birlikte Web sitesi nasıl yapılır? Bende web sitesi yapabilir miyim? Web sitesi yapabilmek için neleri bilmem gerekiyor? gibi sorulara cevap aramaya başlıyoruz.
Biraz araştırma yaptıktan sonra ilk karşımıza çıkan konu Html oluyor. Evet, bir web sitesi yapmak istiyorsanız öncelikle ve mutlaka Html bilmelisiniz. Html ile ilgili eksikleriniz varsa A’DAN Z’YE HTML DERSLERİ yazımı inceleyerek Html konularına göz atabilirsiniz.
Html ile ilgili eksiklerinizi tamamladıktan sonra bu seferde karşınıza Css konusu çıkacaktır. İşte bu yazımızda Css nedir? Css ne işe yarar? Css nasıl kullanılır? gibi soruların cevaplarını öğreneceğiz. Konuyu daha fazla uzatmadan Css nedir ile başlayalım.
CSS NEDİR? CSS NE İŞE YARAR?
Css, hazırlamış olduğumuz Html sayfalarına stil vermek için kullanılan bir markup dildir. Bildiğiniz gibi Html ile oluşturulan sayfalar herhangi bir stil olmadan oluşturuluyor (Html etiketlerinin varsayalın Css değerleri hariç). Bu sayfaları renklendirmek, şekillendirmek vb.. gibi görünürlüğünü daha iyi bir hale getirmek için Css kodları yazmamız gerekiyor.
Css’in açılımı, “Cascading Style Sheets” yani “Kademeli Stil Şablonları” dır. Yani bir etikete birden fazla stil kademeli olarak verilebilir.
Örneğin bir butona renk olarak kırmızı verdik diyelim. Başka bir yerde aynı butona yeşil rengini verdiğimizi varsayalım. Yazdığımız iki koddan hangisi daha sonra yazılmış ise butona o renk uygulanacaktır.
Şimdi Html ile oluşturulmuş standart bir buton ile Css uygulanmış bir buton arasındaki farkı görmek için küçük bir örnek paylaşmak istiyorum.
Gördüğünüz gibi Css özelliklerini kullanarak Html etiketlerini çok daha güzel ve şık bir hale getirebiliyoruz.
CSS İLE RESPONSİVE WEB TASARIMI
Css özelliklerini kullanarak, oluşturduğumuz web sayfalarını responsive hale getirebiliriz. Yani normal bir laptop için oluşturduğumuz bir sayfayı Css kullanarak tablet ve telefona uyumlu hale getirebiliriz.
Örneğin bu site responsive bir sitedir. Telefon ve Laptop görüntülerine baktığımızda, cihaz ve ekran boyutu ile uyumlu olduğunu görüyoruz. İşte bunu Css özelliklerini kullanarak yapıyoruz.
Şimdi bu siteyi tarayıcıda açıp ekran boyutunu küçültmeye başlayacağım. Site içeriklerinin ekran boyutuna göre nasıl değiştiğini inceleyelim.
Gördüğünüz gibi ekran boyutu değiştikçe içeriklerde ona göre şekilleniyor.
Örneğin menüye dikkat ettiyseniz tamamen kapandı ve toggle menü haline dönüştü. İşte bunu Css’te bulunan media query sorguları ile yapabiliyoruz.
Bu tarz tasarımlara da Responsive Web Tasarımı diyoruz. Bu konuda daha fazla bilgi almak isterseniz RESPONSİVE WEB TASARIM NEDİR? yazımı okuyabilirsiniz.
Sanırım Css nedir? Ne işe yarar? sorularının cevabı artık anlaşılmıştır. Şimdi de Css kullanımı konusuna bakalım.
CSS SÖZ DİZİMİ (SYNTAX)
Örnek bir Css kod parçası yazalım.
|
1 2 3 4 5 6 |
p { color: yellow; font-size: 30px; } |
Gördüğünüz gibi Css kodlarını yazarken öncelikle bu kodlar hangi etiket için uygulanacaksa onu seçip süslü parantezler arasına kodlarımızı yazıyoruz.
Html etiketlerini seçebilmek için kullandığımız bazı yöntemler vardır. Bunlara seçiciler diyoruz. Bunun ile ilgili daha detaylı bilgi edinmek isterseniz Css Seçiciler yazımı okuyabilirsiniz.
Kodları yazarken, özellik:değer şeklinde yazıyoruz ve her birinin sonuna noktalı virgül koyuyoruz. Bu şekilde Html etiketlerinin görünümünü dilediğimiz gibi değiştirebiliriz.
Örneğin yukarıda yazmış olduğumuz kod ile p etiketinin yazı rengini sarı, yazı boyutunu ise 30px yapmış olduk.
Şimdilik burada yazdığımız Css özelliklerine takılmayın. İlerleyen derslerde tüm Css özelliklerini detaylı olarak öğreneceğiz.
CSS KULLANIMI
Yazacağımız Css kodlarını 3 farklı şekilde tanımlayabiliriz.
1 – Harici Stil Sayfası Oluşturarak Css Kullanımı
Bu şekilde tanımlama için .css uzantılı bir dosya oluşturup tüm Css kodlarımızı bunun içerisine yazarız.
Bu dosyayı hangi Html sayfasında kullanmak istiyorsak o sayfanın <head></head> etiketleri arasında tanımlarız. Yazılan kodlar, Css dosyasının referans verildiği tüm Html sayfalarında uygulanır.
En kullanışlı yöntemdir. Çünkü tüm Html sayfalarının stil yönetimini tek dosyadan yapmış olacağız.
Örneğin stil.css dosyamız olsun. İçerisinde birkaç Css kodu tanımlayıp Html sayfamıza ekleyelim.
Harici Css Kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//stil.css dosyası p{ color:red; font-size:20px; } h1{ color:yellow; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//html sayfası <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> //Burda stil.css dosyası hangi klasör içerisinde ise href parametresine o yolu yazmamız gerekiyor. <link href="stil.css" rel="stylesheet" /> </head> <body> <p>Sit amet, consectetur.</p> <h1>Sit amet, consectetur.</h1> </body> </html> |
2 – Dahili Stil Kodları Yazarak Css Kullanımı
Html sayfasının içerisinde <style></style> etiketi oluşturup içerisine Css kodlarımızı yazabiliriz.
Genelde <head></head> etiketleri arasına <style> etiketi oluşturulur. Yazılan kodlar sadece o sayfadaki Html etiketlerine uygulanır.
Dahili Css Kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//html sayfası <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p{ color:red; font-size:20px; } h1{ color:yellow; } </style> </head> <body> <p>Sit amet, consectetur.</p> <h1>Sit amet, consectetur.</h1> </body> </html> |
3 – Satır İçi Stil Kodları Yazarak Css Kullanımı
Html sayfasındaki etiketlerin style parametresinin içerisine Css kodlarımızı yazabiliriz.
Yazılan kodlar sadece o etikete uygulanır. Bu yöntem tavsiye edilmez. Çünkü Html kodları ile Css kodları iç içe geçeceği için karışıklık oluşacaktır.
Satır İçi Css Kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//html sayfası <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <p style="color:red;font-size:20px;">Sit amet, consectetur.</p> <h1 style="color:yellow;">Sit amet, consectetur.</h1> </body> </html> |
Önemli Bir Html etiketine birden fazla Css kodu tanımlanırsa, kodlar yukardan aşağıya doğru çalıştığı için en son yazılan kod geçerli olacaktır.
Örneğin aşağıdaki kodda h1 etiketinin rengi sarı olacaktır. Çünkü h1 etiketine sarı rengi kırmızıdan daha sonra verilmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> h1{ color:red; } h1{ color:yellow; } </style> </head> <body> <h1>Sit amet, consectetur.</h1> </body> </html> |
Önemli Bir Html etiketine bu 3 farklı yöntem ile Css kodu yazdığımızı varsayalım. Uygulanma sıralaması şu şekildedir:
1 Satır içi
2 Dahili stil kodları ve harici stil kodları ( Burda <head></head> etiketinde hangisinin daha sonra yazıldığına göre değişir.)
3 Tarayıcı varsayılan değerleri ( Tarayıcıların Html elementleri için varsayılan Css değerleri vardır.)
Gördüğünüz gibi en baskın Css kodları satır içi kodlar ama tavsiye edilmeyen yöntem de yine satır içi kod yazımı.
CSS DOSYALARINA YORUM SATIRI EKLEME
Son olarak Css dosyalarımıza nasıl açıklama bilgileri yazabiliriz onu öğrenelim.
Açıklama bilgileri /* ile başlar ve */ ile biter. Bu ikisinin arasına dilediğiniz kadar yazabilirsiniz. Bu yazılanlar kodun çalışmasını hiçbir şekilde etkilemez.
Bu açıklama satırlarını kullanırsanız size çok faydası olacaktır. Çünkü kodları yazmaya başlayınca bir müddet sonra kodlar çoğalacak ve neyi nerede nasıl yazdığınızı unutabilir veya bulmakta zorlanabilirsiniz.
Açıklama bilgileri bu nedenle işinizi çok kolaylaştıracaktır.
Css Yorum Satırı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Buraya açıklama bilgileri yazılacak. */ p{ color:red; } h1{ color:yellow; } |
Bir yazımızın daha sonuna geldik. Css Nedir? Css ne işe yarar? Css kullanımı gibi konuları öğrendiğimize göre diğer Css konularına başlayabiliriz.
Tüm Css özelliklerini öğrenmek için TÜM CSS KODLARI VE ANLAMLARI yazımı okuyabilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
WEB TASARIM ÖRNEKLERİ (HTML, CSS, JAVASCRİPT, JQUERY, BOOTSTRAP)
BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?
Jquery Nedir? Ne İşe Yarar? Jquery Kullanımı
Yeni bir yazımda görüşmek üzere.
