Bu projenin amacı webte yayınlanacak yazılar için bir araçlar bütünü sağlamaktır. Şimdilik sadece stil kullanılmıştır. Daha sonra javascript eklenecektir.
Bir kitap başlıklardan, paragraflardan, tablolardan, listelerden ve resimlerden oluşur. Html'de h1'den h6'ya kadar 6 başlık vardır. Paragraf için sadece p etiketi vardır. Başlıklar uygun şekilde biçimlendirilebilir. Paragraf içinse css'de kullanılan classlar yapmak gerekir. Örneğin tip paragrafı,uyarı paragrafı.
Projede iki css dosyası bulunmaktadır. DefaultBook.css ve Book.css dosyası. DefaultBook.css dosyasında etiketlerin kendileri en basit kitap yazmak için gerekli olacak şekilde biçimlendirilmişlerdir. Böylece DefaultBook.css dosyasını link etiketiyle sayfaya bağlayınca p,h1....h6,body,img,table gibi etiketlerin biçimi en basit yazı biçimleri haline gelmiş olur. Book.css dosyasında ise her yazıda kullanılabilecek stiller eklenecektir. Örneğin uyarı paragrafı, tip paragrafı, kod biçimleri gibi. Aşağıda her iki dosyanın içeriği görüntülenmektedir.
Bu stilleri kullanmak için yapmanız gereken iki css doyasını link etmektir. Bu link etiketi ile yapılır ve bu etiket head etiketinin içine eklenir.Aşağıda görülüyor
Her kitabın bir stili olduğunu bilirsiniz. Örneğin bir matematik kitabında başlıklar siyah, paragraflar ciddidir. Ama bir mizah kitabında biçim daha değişiktir. Ancak genellikle bir tutarlılık vardır. Bir kitapta genellikle büyük başlıklar aynı şekilde, normal paragraflar aynı şekilde devam eder. Demek ki hepsinin stili kitap boyunca devam eder. Bu stil kitap yazdıktan sonra çok kolay bir şekilde nasıl değiştirilebilir. Yani bir satır değiştiriyorsun tüm kitabın stili değişiyor. Örneğin ciddi bir stildeyken son derece renkli bir biçime bürünüyor. Bunu yapmak çok kolaydır. DefaultBook.css ve Book.css dosyalarında ya etiketin adı var yada class var. sayfalara bu dosyaları link edersen kitabın stili bu dosyaların stili olur. Diyelim sen bu iki dosyanın stilini beğenmedin. Sen kendine bir css dosyası hazırlarsın MyBook.css adında. Burada p, h1, h2...h6, .warning, .tip vs.. classlarını istediğin gibi hazırlarsın. Eğer link olarak kendi dosyanı verirsen sayfanın stili tamamen senin istediğin stilde olur. Dikkat edilirse tek bir satırdaki src="DefaultBook.css" yerine src="MyBook.css" yazmak yeterli olacaktır.
Özetlersek. 1-Bir sayfa üzerindeki her nesnenin bir biçimini ayrı bir dosyadan konrol edeceksin. Html'in içinde hiçbir zaman biçimlendirme yapmayacaksın. 2-Bütün etiketlerin biçiminin bulunduğu bir .css dosyası yaparsın(bu projede DefaultBook.css). Buna tema diyebiliriz. 3-Aynı etiketle kullanılan ancak farklı biçimde olması gereken konular için class'ların olduğu bir dosya hazırlarsın. Örneğin normal paragraf ile uyarı paragrafı aynı p etiketiyle kullanılır. Bu projede normal paragraf için p etiketini kullandık. Uyarı paragrafı için ise .warning adlı bir class hazırladık.
Sonuç olarak tüm sitenin stiline tema deriz ve bunlar ayrı css dosyalarında durur. Yeni bir tema yapmak için css dosyası yaratılır ve etiket ve class stilleri ayarlanır. Bböylece az bir zahmetle tüm site değişir.
Bir Akıl Yürütme
Bir portal'nız var. 50 tane sayfanız var. sayfalarınız hepsi rengarenk. Deprem olduğu gün tüm sitenizi siyah ve gri tonlara büründürebilir misiniz? Bu matem temasıdır. matem.css dosyası hazırlar ve tüm sayfaları bu dosyaya bağlarsanız tüm site matem havasına bürünür. Bu kadar basit
Bir Sorun
Ben daha önceki temanın bazı stillerini kullanmak istiyorum derseniz ne olacak. Söylediğime göre eski.css dosyası kaldırılacak ve yeni.css dosyası kullanılacak. bir çözüm eski dosyadaki kullanmak istediğin stilleri yeni dosyaya kopyalamaktır. Ancak daha güzel bir çözümü var. Eski stillerin dosyası Old.css yeni stillerin dosyası New.css olsun. Sen Old.css dosyasındaki 6 stili kullanmak 18 stili değiştirmek istiyorsun. Şunu yapacaksın. New.css dosyasında değiştimek istediğin stilleri koyacaksın. Ve her iki dosyayı da link yapacaksın. Ancak link ederken New.css dosyasını sonra link edeceksin. Aşağıda görülüyor. şimdi eski css p için kırmızı diyor. Senin yeni css ise mavi diyor. Sen yeni css'ni en son yazdığın için senin dediğin geçerli olur.
1 <html> 2 <head> 3 <link href="Old.css" type="text/css" rel="stylesheet"></link> 4 <link href="New.css" type="text/css" rel="stylesheet"></link> 5 </head> 6 <body> 7 önce New.css'nin değdiği olur. sonra Old.css uygulanır
8 </body> 9 </html>
Bu sonuç çok güzel bir kullanıma yol açar. Örneğin Ciddi.css dosyanız olsun. Bu ciddi bir tema. Siz yine ciddi ancak paragraf yazılarının times değil arial olmasını istiyorsunuz. Bunun için bir ArialCiddi.css dosyası hazırlayıp sadece p{font-family:arial;} yazmanız yeterli olacak. p'nin diğer özellikleride eski dosyadan alınacak. Böylece istediğiniz kadar tema hazırlayabilirsiniz. Bütün herşeyi baştan yazmanız gerekmiyor.
