Stil Sayfaları HTML dosyaları oluştururken her satır ve paragraf için gerekli biçimleri ilgili yerlerde her seferinde belirtmemiz gerekir. Bazı durumlarda bu işlem HTML dosyalarının boyutunun büyümesi ve yükleme sırasında yavaşlık gibi sorunları ortaya çıkarır. Bu sorunu aşmak için stil sayfaları (stylesheets) gündeme gelmiştir. Stil sayfaları (Cascading Style Sheets-CSS) iç içe stil sayfaları olarak da adlandırılırlar. Stil sayfalarının güçlü yönleri şu şekilde sıralanabilir: İçerik, yazı tipleri, renkler, arka plan desenleri ve diğer biçimler üzerinde daha etkin kontrol. Tek bir dosyadan bir çok HTML dosya biçimlerinin düzenlenebilmesi. Gözgezdirici ve işletim sistemlerine tam uyumluluk. Daha az kod yazımı, daha küçük boyutlu sayfalar ve hızlı yükleme.
Stil Sayfalarının Özellikleri Stil sayfaları kullanarak, form ve yapıyı ayırabilir, planı daha önce hiç olmadığı kadar kontrol edebilir, kısa ve hızlı yüklenen sayfalar hazırlayabilir, birden fazla sayfayı, bir defada, kolayca ve hızlıca düzenleyebilir ve gözgezdiriciler için daha güvenli sayfalar oluşturabiliriz.
Form ve Yapı Ayrımı HTML, Web sayfasındaki elemanların yapısını ve fonksiyonlarını belirleyen bir dil olduğundan, hiç bir zaman Web sayfalarının görünümünü veya formları kontrol edememiştir. Bu elemanların nasıl görüneceğine gözgezdirici karar vermiştir. Önceleri metnin istediğimiz gibi görünmesini sağlamak için <FONT FACE>, <I>, <P> ve benzeri elemanlar kullanıldı. Metinleri ötelemek için boşluklar veya boşluk resimleri kullanıldı. Böylece kodlarımız gittikçe büyüdü ve sayfalarımız zor yüklenir hale geldi. Stil sayfaları, yapıyı anlatan bölüm ile formu anlatan bölümü birbirinden ayırarak bu işlemleri daha kontrollü yapmamıza olanak sağladı. Sonuçta, stil kodları HTML dosyasından ayrıldı ve kod daha basit bir hale geldi.
Plan Kontrolü <FONT SIZE> belirtecini kullanarak yazı tipinin büyüklüğünü değiştirip başlıklara istediğimiz büyüklüğü verebiliyoruz. Ancak, genel olarak baktığımızda, 80 piksel büyüklüğünde metinler yazmak, sayfalar, kelimeler ve satırlar arasındaki boşlukları ayarlamak ve resimleri ekranda istenilen alana yerleştirmek oldukça güç işlemlerdir. Stil sayfaları, bütün bu işlemleri ve daha fazlasını gerçekleştirmemizi sağladı.
Kısa ve Hızlı Sayfalar Stil sayfaları HTML gibi basit bir metinden oluşur. Grafik, program, resim, transfer ve bekleme elemanları içermez. HTML kodu kadar hızlı yüklenir. Stil sayfaları ile, HTML kodu içerisinde defalarca yazılması gereken biçim tanımlarına gerek duyulmaz.
Hızlı Düzenleme Stil sayfaları olmasaydı, yazı tipini değiştirmek gibi basit bir işlem için sitede bulunan tüm dosyaları tek tek düzeltmek gerekirdi. Oysaki, stiller ayrı bir dosyada bulunabildiği için tek bir işlemle bütün dosyaları değiştirmek olasıdır.
Güvenli Sayfalar Diğer web teknolojilerinden farklı olarak, stil sayfaları kullanıldığında, gözgezdiricide bir alt sürüm program yüklü değil ise veya eski sürümler kullanıldığında sayfada istenmeyen görüntülerle karşılaşılmaz. Çünkü stil sayfaları kodları farklı biçimde iletebilir.
İlk Stil Sayfası <HTML> <HEAD> <TITLE>İlk Stil Sayfası</TITLE> </HEAD> <BODY> <H1>Stil Sayfaları: </H1> <H3>Bir Web Tasarım Aracı </H3> <P>Mutlaka Öğrenmeliyiz!</P> </BODY> </HTML> Şimdi bu koda bazı stil tanımları ekleyelim. Aşağıda verilen kodu <HTML> ve <BODY> belirteçleri arasında herhangi bir yere yerleştirelim. <STYLE TYPE="text/css"> <!-- H1 { color: red; font-size: 36px; font-family: verdana } H3 { color: blue; font-size: 26px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier } --> </STYLE>
Stil Tanımları Stil sayfalarının temelinde kurallar bulunmaktadır. En basit kural stil tanımlarının nasıl yapılacağı konusundadır: H1 { color: red } Bu ifade Web gözgezdiricisine <H1>…</H1> belirteçleri arasında yer alan tüm metinlerin kırmızı olarak gösterilmesi gerektiğini belirtmektedir. Her tanımlama bir seçici (belirteç) ve bir açıklama içerir. Yukarıdaki örnekte, H1 seçicidir. Seçiciler, stillerin eklendiği HTML belirteçleridir. Açıklama; stilin içeriğini belirtir ve iki bölümden oluşur: özellik (bu örnekte color: renk) ve değer (bu örnekte red: kırmızı). Herhangi bir HTML belirteci seçici olarak kullanılabilir. Stil sayfaları bilgisi, <P> ve <TABLE> gibi istenilen her elemana eklenebilir.
Stil Tanımları Ayrıca ilk örneğimizde de görüldüğü gibi, stil tanımlamaları gruplanabilir. Üç farklı açıklamayı bir seferde <P> belirteci için tanımladık. Paragrafımız tek satırda yaptığımız üç farklı tanımlama sonucunda, soldan 1 cm içeride, arka planı sarı ve courier yazı tipinde görüntülendi. Benzer biçimde seçiciler de gruplanabilir: H1, P, BLOCKQUOTE { font-family: arial } Bu tanımlamada <H1>, <P> ve <BLOCKQUOTE> belirteçleri arasındaki tüm metinler için Arial yazı tipinin kullanılması gerektiğini belirtmektedir.
Stil Tanımları Stil tanımlamalarına ilişkin bir diğer önemli konuda kalıtım olayıdır. Stil tanımları, ana elemandan alt elemana aktarılabilirler. Bir örnekle açıklayalım: B { color: blue } Bu tanımlama gözgezdiriciye <B> belirteci içerisindeki tüm metinlerin mavi yazılmasını söylemektedir. Ama gözgezdirici aşağıdaki durumda ne yapacaktır? <B>Üniversitelerdeki çoğu bölüm <I>4</I> seneliktir.</B> <I> belirteci için açıklanmış bir kural yoktur. Ama <B> belirteci içerisinde yer aldığı için bu belirteç için yapılmış açıklama <I> belirteci için de geçerli olacaktır. Yani ana elemanın özellikleri alt elemana aktarılacaktır.
Stillerin Web Sayfalarına Eklenmesi Stil tanımları, her birinin kendine ait güçlü yönleri olan, dört farklı biçimde web sayfalarına eklenebilir. Stil tanımlamasını HTML kodu içerisine ekleme HTML dosyasından stil sayfalarına bağ yapma Stil sayfasını HTML koduna dahil etme Stilleri doğrudan HTML dosyasına ekleme
Stil Tanımlamasını HTML Kodu İçerisine Ekleme Bu yöntem yukarıdaki örnekte kullandığımız yöntemdir. Tüm stil tanımları HTML kodunun üst kısmında <BODY> belirtecinden önceki bir konuma eklenir. Kodu tekrar gözden geçirelim: <HTML> <HEAD> <TITLE>İlk Stil Sayfası</TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- H1 { color: red; font-size: 36px; font-family: verdana } H3 { color: blue; font-size: 26px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier } --> </STYLE> <BODY> <H1>Stil Sayfaları: </H1> <H3>Bir Web Tasarım Aracı </H3> <P>Mutlaka Öğrenmeliyiz!</P> </BODY> </HTML>
Stil Sayfalarına Bağ Koyma <HTML> <HEAD> <TITLE>İlk Stil Sayfası</TITLE> </HEAD> <LINK REL=stylesheet HREF="stiller.css" TYPE="text/css"> <BODY> <H1>Stil Sayfaları için gerekli olan dosyanın adı: </H1> <H3>"stiller.css" </H3> <P>Bu sayfa bu dosyaya bağ kurarak görüntüleniyor!</P> </BODY> </HTML> Bağ kurularak eklenen stil sayfası için yorum belirteçleri kullanmamız gerekmez. Şimdi “stiller.css” isimli yeni bir metin dosyası oluşturalım ve dosya içeriğini aşağıdaki gibi düzenleyelim: H1 { color: red; font-size: 26px; font-family: verdana } H3 { color: blue; font-size: 16px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier }
Stil Sayfasını HTML Koduna Dahil Etme <HEAD> <TITLE>İlk Stil Sayfam</TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- @import url(stiller.css); H1 { color: orange; font-family: impact } --> </STYLE> <BODY> <H1>Stil Sayfaları: </H1> <H3>Bir Web Tasarım Aracı</H3> <P>Deneyin ve Görün!</P> </BODY> </HTML> Örnekte çağrılan “stiller.css” dosyasının içeriğinin aşağıdaki gibi olduğunu varsayalım: H1 { color: red; font-size: 26px; font-family: verdana } H3 { color: blue; font-size: 16px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier }
Stilleri Doğrudan HTML Dosyasına Ekleme <HEAD> <TITLE>İlk Stil sayfam</TITLE> </HEAD> <BODY> <H1 STYLE="color: red; font-family: tahoma"> Stil Tanımlarını doğrudan Web Sayfamıza Ekledik!</H1> <P STYLE="background: pink; font-family: verdana">Deneyin ve Görün!</P> </BODY> </HTML>
Sınıflar İlk paragraf metninin sarı, ikinci paragrafın mor ve üçüncü paragrafın gri renkte olmasını nasıl sağlayacağız? Bu noktada sınıflar (classes) devreye girmektedir. <P> belirteci için, her biri farklı stil açıklamaları içeren üç ayrı sınıf tanımı yapabiliriz. Örneğin paragrafların, P.ilk { color: blue } P.ikinci { color: purple } P.ucuncu { color: gray } şeklinde tanımlandığı durumda HTML kodunu aşağıdaki gibi değiştirmemiz gerekir: <BODY> <font face="verdana"> <P CLASS=ilk>"ilk" isimli sınıf tanımı olan ilk paragraf mavi renkte.</P> <P CLASS=ikinci>"ikinci" isimli sınıf tanımı olan ikinci paragraf mor renkte.</P> <P CLASS=ucuncu>"ucuncu" isimli sınıf tanımı olan üçüncü paragraf gri renkte</P> görüntülenmektedir. </BODY>
İlişkilendirilmiş Seçiciler Varsayalım ki, koyu yazılmış tüm metinlerin kırmızı olmasını istiyorsunuz ve bunun yalnızca normal metinler için geçerli olmasını istiyorsunuz. Bu işlemi gerçekleştirmek için ilişkilendirilmiş seçicileri kullanmamız gerekir. İlişkilendirilmiş seçiciler tanımlamaların uygulanabilmesi için doğru olan durumu isteyen seçicilerdir. P B { color: red } … <H3><B>Stil Sayfaları ile metin biçimlendirme</B></H3> <P>ne kadar <B>kolay</B> …</P> Buradaki stil tanımlaması gözgezdiriciye, yalnızca <P>…</P> belirteçleri arasında yer alan ve koyu yazılan bütün metinleri kırmızı yapmasını söylemektedir. Bu nedenle <H3>…</H3> belirteçleri arasında yer alan koyu yazılmış metin kırmızı yazılmayacaktır.
Soru? Bir HTML dosyası içerisinde üç farklı stil tanımı kuralı olduğunu ve her üçünün de seçici olarak P belirtecini kullandığını varsayalım. Dışarıdan dahil edilmiş bir stil kuralı <P> içeriklerini kırmızı, dosyanın üst kısmında tanımlanmış gömülü bir stil kuralı mavi ve dosyanın BODY bölümünde tanımlanmış bir stil kuralı da sarı renkte olması için gerekli tanımlamaları içeriyor. Bu durumda gözgezdirici ne yapacaktır?
İç içe Stil Sayfaları Gözgezdirici yazılımları, bu tür durumlarda nasıl davranmaları gerektiğini belirten dahili tanımlamalar içerir. Belirtilen kurallar içerisinde bazıları diğerlerinden daha önemlidir. Stil tanımlamalarının önemlerine göre uygulama sırası aşağıda verilmektedir: BODY bölümünde belirtilmiş kurallar (Dahili Stiller) BODY bölümünden önce belirtilmiş kurallar (Gömülü Stiller) Başka bir dosyaya bağ konularak tanımlanmış kurallar (Bağlı Stiller) Dışarıdan dahil edilmiş kurallar (İthal (import) Stiller) Gözgezdiricinin varsayılan stil tanımlamaları
Daha özgün olan kuralın kullanılması Aşağıdaki örnekte, <P> içerikleri özgün olarak kırmızı tanımlanmış ama aynı zamanda <BODY> ile tanımlı kuraldan yeşil tanımını da kalıtımsal olarak almaktadır (<BODY> belirtecine bir kural tanımlandığında bu tanım tüm sayfa elemanları tarafından kullanılır). Bu durumda özgün kural kalıtımsal kuralın önüne geçer ve stil tanımlaması yapılan paragraf kırmızı olarak yazılır. BODY { color: green } P { color: red }
Kalıtımsal olarak gelen kuralın kullanılması Birinci adım bir kazanan ile sonuçlanmazsa (yani özgün olarak tanımlanmış bir kural yoksa veya birden fazla özgün kural varsa), gözgezdirici bu adımı geçer. Gözgezdirici kalıtımsal gelen bir kural olup olmadığına bakar ve eğer varsa onu kullanır. Eğer yoksa, veya birden fazla tanımlama varsa gözgezdirici üçüncü adıma geçer.
Stil tanımlarının kod içerisindeki sırası ile uygulanması Diğer adımlar uygun olmadığında gözgezdirici tanımlamaların sırasını kullanarak karar verecektir. Aşağıdaki örnekte <P> içeriği kırmızı görünecektir, çünkü son yapılan tanım kırmızıdır. P { color: green } P { color: red }