WTP – 6. Hafta CSS (Stil Şablonları)
CSS Nedir?
Stil Şablonları yani CSS (Cascading Style Sheets) hazırladığımız web sitelerinde istediğimiz zaman kullanmak üzere şablonlar hazırlamamıza olanak tanır. Web sitelerini daha güzel ve görsel açıdan daha zengin yapabilmek için CSS’in nimetlerinden yararlanmamız gerekir. CSS kullanarak bir web sitesinde istediğimiz öğeleri bir yerden değiştirebiliriz. Size bunu bir örnekle açıklayayım. 5 sayfalık bir web sitesi yaptınız. Bu 5 sayfada kurumsal kimlik oluşturmak adına H1 etiketlerini ki bunlar 100 tane olsun, mavi ve Arial fontunda oluşturdunuz. Müşterinize gösterdiğinizde rengin mor olmasını ve yazı tipinin Comic Sans olmasını istediğinde oluşturduğunuz 100 tane H1 içindeki tüm kodları değiştirmeniz gerekir. Ancak CSS ile iki yerdeki değişiklikle müşterinizin isteğini yerine getirebilirsiniz.
CSS bize ne kazandırır?
CSS kullanmak en başta zaman kazandırır. Kod kısmı ve tasarım kısmını ayırdığınızda daha yönetilebilir siteler elde edersiniz. Herhangi bir sorunla karşılaştığınızda arap saçına dönen kodlarla uğraşmaz, kod kısmı ile tasarım kısmını birbirinden ayırmış olursunuz.
Görsel açıdan daha zengin içerikler oluşturabilirsiniz. Bu da web sitesini yaptığınız müşterilerinizin memnuniyet seviyesini artıracaktır.
CSS Çeşitleri
- Yerel CSS : Bir etiketin içine yazdığımız stil öğesine Yerel CSS denir.
- Genel CSS : <head> </head> etiketleri arasına yazdığımız stil öğesine Genel CSS denir. Bu stil türünde tüm sayfadaki etiketler etkilenir.
- Harici CSS: Global Stil Şablonu olarak da adlandırılır. Tüm CSS kurallarını içeren .css uzantılı bir dosya eklenerek sitede uygulamak istediğiniz her sayfada <head> </head> etiketi arasına eklenir.
Yerel CSS :
Belirli bir HTML etiketi için kullanılır. Etiketin style=”…” özelliği kullanılarak istenilen değişiklikler gerçekleştirilir.
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS - Yerel CSS</title> </head> <body> <h2 style="color: #00AF14;"> Bu Başlığa Yerel CSS uygulanmıştır</h2> </body> </html> |
Genel CSS :
<head> </head> etiketleri arasına yazdığımız stil öğesine Genel CSS denir. Bu stil türünde tüm sayfadaki etiketler etkilenir. Genel CSS kullanmak sayfadaki değişiklerin tek yerden idare edilmesini sağlar. İstenilen Stiller <style > …. </style> etiketleri arasına yazılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS - Genel CSS</title> <style type="text/css"> p { color: #FFFFFF; background-color:red; } </style> </head> <body> <h1> CSS Stil Şablonları (Bu Başlığa Stil uygulanmamıştır.)</h1> <p> CSS Türleri: (Bu Paragrafa Genel CSS uygulanmıştır.)</p> </body> </html> |
Harici CSS
Global Stil Şablonu olarak da adlandırılır. Tüm CSS kurallarını içeren .css uzantılı bir dosya eklenerek sitede uyguşamak istediğiniz her sayfada <head> </head> etiketi arasına <link href=”…” > ile eklenir.
Stilim.css dosyası :
|
1 2 3 4 5 6 7 |
@charset "utf-8"; /* CSS Document */ ol{ background-color: darkred; color: #FFFFFF; border: solid #000000; } |
Harici CSS eklenen index.html Dosyası
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS - Stil Şablonları Konusu</title> <link href="stilim.css" rel="stylesheet" type="text/css"> </head> <body> <h1> CSS Stil Şablonları (Bu Başlığa Stil uygulanmamıştır.)</h1> Aşağıdaki Sıralı Listeye Harici CSS uygulanmıştır. <ol> <li>Yerel CSS</li> <li>Genel CSS</li> <li>Harici CSS</li> </ol> </body> </html> |
CSS türlerini gördük bu türlerin kullanım amacınıza göre istediğiniz zaman kullanabilirsiniz. Hepsinin bir arada yer aldığı örnek aşağıdadır.
