- PDF Ücretsiz indirin

Transkript

1 "Web Style Sheets" Kavramı ve CSS (Cascading Style Sheets = Yığılmalı Stil Kağıtları): CSS (ingilizce açılımı Cascading Style Sheets olan Türkçeye çevrildiğin de ise Yığılmalı Stil Kağıtları) bizi HTML'in kalıplaģmıģ olan stil etiketlerinden bir bakıma kurtarıyor. CSS kod kümesi sayfamızın <head> </head> etiketleri arasına yazılıyor. "Style Sheets" kavramı oldukça geniģ bir teknolojik yaklaģımı ifade ediyor. Açıkçası CSS konusu bu teknolojinin sadece bir bölümünü oluģturmakta olup, Style Sheets teknolojisi çerçevesinde CSS'den baģka XSL, XSLT, DSSL gibi biçimlendirme teknikleri ve dillerinden de söz etmek mümkündür. Bir web sayfasının tasarım elemanları (stil öğeleri) denilince aklımıza Ģunlar geliyor; arka planlar, baģlıklar, yazılar, fontlar, tablolar, listeler, renkler ve görsel biçimler, bağ renkleri, efektler, imaj, katman vb. nesneler ve bunların sayfa üzerindeki yerleģimleri vs. "Web Style Sheets" kavramı; iģte bu tasarım elemanları üzerinde tam denetim sağlamak ve web dökümanlarının görünümlerini tayin etme iģinde tasarımcılara ekstra güç kazandırmak için geliģtirilmiģ bir teknolojik yaklaģımı ifade etmektedir. "Style Sheets" teknolojisini kullanmak demek, stiller belirlemek suretiyle belge biçimlendirmek demektir. Burada web dökümanlarının nasıl görüneceğini tayin etmek üzere geliģtirilmiģ bir takım kurallar sözkonusudur. W3C'nin sitesinde "Web Style Sheets" teknolojisi çerçevesinde CSS, CSS1, CSS2, CSS3, CSS-P, XSL, XSLT, XPath, DSSL gibi kavramlardan sözedilmekle birlikte temelde 2 "Style Sheet" dili olduğu ifade edilmektedir. Bunlar; 1-1- CSS (Cascading Style Sheets), 2-2- XSL (extensible Style Language) Kursumuzda CSS konusunu ele alacağız. CSS (Cascading Style Sheets) CSS; çok daha etkin web sayfası biçimlendirebilmek amacıyla HTML'ye destek olması için oluģturulmuģ bir iģaretleme dilidir. CSS'ye, herhangi bir web dökümanındaki yazı, baģlık, font, arkaplan (background), imaj, katman, tablo ve liste gibi tasarım elemanlarının (stil öğelerinin) HTML kodlamasındaki uygulanıģ ve belirtim kurallarını belirleyen bir "web style sheets" teknolojisidir. Bu teknolojinin geliģtirilmesindeki en temel amaç, HTML'nin sayfa biçimlendirme iģlevlerini ekstra katkılarla arttırmak ve tasarımcıya çok daha etkin sayfa yapma imkanları sağlamaktır. HTML belgesi (web sayfası) tarayıcıya yüklendiğinde yaptığımız stil tanımlamaları deyim yerindeyse üst üste yığılarak (basamaklandırılarak) ele alınır ve stil tanımlamasındaki yönteme bağlı olarak değerlendirilir. Yani belgedeki stil tanımlamalarının nerede yapıldığına bakılarak komutlar bir nevi

2 basamaklandırmak suretiyle kademe kademe iģlenir ve sayfa ekranda öyle gösterilir. Burada CSS komutlarının tarayıcılar tarafından iģletilmesinde bir basamaklandırma modeli sözkonusudur. Bu nedenle stiller belirlemek suretiyle belge biçimlendirme olayına "Cascading Style Sheets" adı verilmiģtir. CSS'nin belli başlı faydaları; - daha iyi sayfa kontrolu (tek dosya ile tüm sitenin kontrol edilebilmesi imkanları), - - kolay renk yönetimi, - - etkin kenar boģluğu denetimleri, - - metin biçimlendirme, gölgeleme olanakları, - - geçiģler gibi görsel etkiler yaratabilme olanakları, - - nesne konumlandırma kolaylıkları, CSS Syntax Sözdizimi - Genel Kavramlar CSS kodu oluģturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (NotePad vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin "style.css") da dahil olmak üzere CSS kodları da HTML dökümanları gibi ASCII (plain-text) formatındadırlar. Bu nedenle CSS kodlamasını basit text editörleri yardımıyla yapılabilir. HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. Bu nedenle iyi bir tasarımcı olmanın koģullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir. Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısma ayrılır. Bildirim kısmı da yine aynı Ģekilde özellik ve değer olmak 2 bölümden oluģur. Bu söylediklerimizi aģağıda Ģematik olarak görebiliriz. En yalın CSS kodlaması; HTML'de yer alan ve stili belirlenebilen yani "selector" kimliği taģıyan etiketlerden herhangi birisini, örneğin H (Heading) etiketini baz alarak CSS kodlamasındaki en yalın hali ifade eden bir kod satırı yazalım. AĢağıda bildirim ve selectör kavramları gösterilmektedir. SELEKTÖR (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS lerde hangi etiket ile ilgili iģlem yapacağımız seçmeye yarar. Bildirim (decleration) kısmının da kendi içinde ÖZELLĠK ve DEĞER olarak 2 temel bileģene ayrıldığını görmekteyiz.

3 Yukarıda belirttiğimiz CSS kod satırına (Style Sheet) dikkat ederseniz, temel bileģenlerin biraraya getirilmesinde kullandığımız { } ve : Ģeklindeki noktalama iģaretlerinin de bu yalın haldeki kod satırının tamamlayıcı öğeleri olduğunu görürüz. Burada birbir önemli husus da; <STYLE>... </STYLE> etiketi arasındaki stil ifadelerinde, değer ataması yapmak için yazılan sözcükler " veya ' iģaretleri ile sınırlandırılmaz. Örneğin aģağıdaki ifade yanlıģtır. H1 {color: "blue"} CSS2 ile kurallaģan bu hususa özen göstermek gerekmektedir. CSS kapsamında ayrıca tasarımcı tarafından oluģturulabilen ID (kimlik) ve CLASS (sınıf) türünde 2 tip selektör daha vardır. CSS kod satırlarını (style sheet belirtimlerini) gruplandırmak; Aynı stil belirtiminde bulunacağımız selektör etiket sayısı birden çok ise, örneğin aģağıdaki kodlamada olduğu gibi; Bu 3 satırlık kodlama biçimini GRUPLANDIRMAK suretiyle aģağıda görüldüğü gibi tek satır halinde daha kolay bir Ģekilde ifade etmek mümkündür. Miras Kavramı (inheritance) Miras kavramı; bir etikete atanan bir stil tanımının ilgili etiket kapsamı içinde kullanılan bir baģka etiket tarafından aynen üstlenilmesi olayıdır. Örneğin; Stil ifadesi;h1 {color: green} olsun,html kodu ise; <H1>Bu cümlede H1'in stilini miras alan bir <EM>etiket</EM> var.</h1> Ģeklinde olsun. Burada kullandığımız <EM> etiketi <H1> etiketinin yeģil renk stil belirtimini aynen üstlenir. Yani miras devralır. Kodumuz yazarken miras kavramını göz önüne alarak yazmalıyız. Bir stil ifadesine açıklama satırı koymak; Stil ifadelerinde açıklama satırı kullanmak için /* ve */ iģaretlerinden yararlanılır. Örnek kod aģağıda; H1 {color: red} /* H1'i kırmızı yap */ Çok kullanılan bazı örnekler: <html> <head>

4 <style type="text/css"> <style>  </style> <head> <body> <p> Galatasaray UEFA kupasını <span class="bold">(2000 yılında) </span> müzesine götürdü <span class="yesilyazi > Bütün Avrupanın takdirini kazandı.</span> <span class="altinyazi"> Daha sonra Süper Kupaya sahip oldu</span> <span class="alticizili"> (2001 yılında) </span> <span class="maviyazi"> Daha birçok baģarıya imza atacak</span> <span class="italik">herkes Galatasaraylı olacak</span> </p> </body> </html> CSS denen Ģeyin, sayfanın <head> </head> bölümde parantezler ile yaptığımız kodlamayı görüyoruz.sayfamızda <p>(paragraf) ile kodladığımız kısımlar Font ailesinden Verdana, Size (geniģliği) 10 px ve rengi de Siyah olmak üzere belirlendi. Ve sayfa da <p> kodlamasını yaptığımız da hep aynı Ģekilde görünecektir. <a href="deneme.htm"> Dinamik CSS link denemesi </a> <html> <head> <style type="text/css">  </style> </head> <body> <p> <a href="deneme.htm"> Dinamik CSS link denemesi </a> </p> </body> </html>

5 Selektörler (seçiciler): Bir style sheet ifadesindeki ilk öğelere "selektör" adı verilir. Bu bir HTML etiketi olabileceği gibi, SINIF (class) veya KİMLİK (ID) niteliğinde tasarımcı tarafından tanımlanabilen selektörler de olabilir. Eğer ilk öğe bir HTML etiketi ise bu "HTML Selektörü" olarak adlandırılır. ġimdi bu selektörleri içeren style sheet ifadelerine bir bakalım; Bu stil ifadeleri harici bir.css dosyasında olabileceği gibi, <head>..</head> etiketleri arasına da konabilir Yukarıdaki stil ifadelerinde görüldüğü üzere;. iģareti ile baģlayan selektörlere sınıf (class), # ile baģlayan selektörlere ise kimlik (ID) tipinde selektör adı verilir. Buradaki örnek stil ifadelerinin bildirim (deklerasyon) kısımlarında ise CURSOR özelliğine birtakım değerler atanmaktadır. Bunların herhangi bir web dökümanı içerisinde uygulanmasına gelince, kod satırları Ģöyle olabilir;. Yukarıdaki kod satırları web dökümanının <body>.. </body> etiketleri arasında yer almalıdır <STYLE TYPE="text/css"> body { cursor: crosshair }.yardim { cursor: help } #bekle { cursor: wait } </STYLE> <body> <P STYLE="color: #c0c0c0"><b>açiklama: Mouse imlecini aģağıdaki cümlelerin üzerine götürünüz!. imleçteki değiģimlerr dikkat ediniz</b></p> <br> <font size="5"> <span class="yardim">bu cümlede imleç değiģir.</span> <br><br> <P ID="bekle">Bu cümlede de imleç değiģir.</p> </body> Bazı Özel Karakterler:

6 Yukarıda anlattığımız selektörler yerine * ve > olmak üzere 2 joker karakteri kullanabiliriz... Örneğin; *{font-color: red} Bu ifade sayfadaki bütün etiketlere "kırmızı font rengi" stilini uygular. > karakteri ise çocuk selektörler tanımlar. Örneğin; ul > li {list-style-type: decimal} Bu ifade UL etiketini ebeveyn olarak kabul eder ve UL içindeki LI öğelerini çocuk selektör olarak görür. Böylece sadece UL listelerindeki LI öğelerine stil belirtimi uygulanmıģ olur. Pseudo Classes Sınıfımsılar CSS de kullandığımız kodlarda da bazı yetersizlikler vardır. Bunlar normal etiketlerle karşılanamayan durumlar için düģünülmüģ kontrol elemanlarıdırlar. Bütün sınıfımsıların önünde : (iki nokta üst üste) iģareti bulunur. A:visited {color: maroon} ifadesi sınıfımsı kullanımına dair bir örnek teģkil eder. CSS2 ile tanımlanmıģ sınıfımsıları (pseudo-classes) aģağıdaki tabloda görebiliriz; :first-child :first-line Bir öğenin ilk çocuk öğesi Bir paragrafın biçimlendirilen ilk satırı :first-letter Bir paragrafın ilk harfi :link :visited :hover :active :focus :lang :before :after Henüz ziyaret edilmemiģ linkler Ziyaret edilmiģ linkler Ġmlecin o anda üzerinde durduğu öğe O anda etkin olan öğe Odakta olan öğe Geçerli dil tanımı Ġçeriği bir öğeden önceye konumlandırır Ġçeriği bir öğeden sonraya konumlandırır <STYLE TYPE="text/css">.ilksatirbuyuk:first-line{ font-size:310%; font-weight:bold; } </STYLE> Body bölümünde yer alacaktır. <p align="justify" class="ilksatirbuyuk"> Cim Bom Galatasaray

7 </p> <br> <p align="justify"> Cim Bom Galatasaray! Dikkat edelim class ifadesi yok! </p> ÖZELLİKLER: Bir web dökümanının tasarım elemanları (stil öğeleri) daha önce de ifade ettiğimiz gibi döküman gövdesi, arka planlar, baģlıklar, yazılar, fontlar, tablolar, listeler, renkler ve görsel biçimler, bağlar, efektler, imaj, kutu modeli, katman vb. ile bunların sayfa üzerindeki yerleģimleri gibi birtakım nesnelerden oluģur. CSS içinde bu nesneleri kontrol edebilmek için belirli sayıda "PROPERTIES" (Özellik) tanımlanmıģtır. Web sayfası oluģtururken yapılan stil belirtimlerinde, yukarıda sözünü ettiğimiz tasarım elemanlarıyla iliģkilendirilebilen özellikler baz alınarak, bu özelliklere birtakım değerler (values) atanır. Örneğin FONT (EN ÇOK KULLANILAN ÖZELLĠK) öğesini ele alırsak, bu öğenin özellikleri ve bu özelliklere atanabilecek değerler Ģöyledir; Font Özellikleri: font-family arial, verdana, times, courier vs. bold font-style font-size font-variant font-weight font-stretch font-size-adjust font normal, italic, oblique, inherit xx-small, small, medium, large, x-large, xx-large, larger, smaller, inherit, geçerli yüzde, geçerli uzunluk normal, small-caps, inherit normal, bold, bolder, lighter, , inherit normal, wider, narrower, ultra-condensed, extracondensed, condensed, semi-condenced, expanded, semi-expanded, extra-expanded, ultraexpanded, inherit none, geçerli sayı, inherit font-style, font-variant, font-weight, font-size, line-height, font-family, inherit Style Sheet Kullanım Metotları: Bir HTML dökümanında CSS kodlaması yapmanın, yani stil tanımlamasında bulunmanın 4 farklı metodu vardır. Bunlar Inline (İç), Embedded (Gömülü), External (Harici Bağlantı) ve Importing (İthal Etme) Ģeklinde isimlendirilmektedir. Tabii bu dört metodun hepsinin bir arada kullanıldığı bir beģinci metod'tan da sözetmek mümkün. Buna da "karma metod" adını verebiliriz INLINE (İç) Metotu: Bu yöntemle; bir HTML dökümanı içerisinde, stili belirlenebilen herhangi bir HTML etiketinin kendi içine stil tanımlaması yapılabilir. Bu metotta çift tırnak olamsına dikkat edilmelidir. <head> </head> etiketleri içine yazılması gibi durum söz konusu değildir.

8 <p style="color: blue">... </p> Böyle birģey yaptığımızda, yani bir HTML etiketine stil ataması yaptığımızda tarayıcılar tarafından bu atama en büyük öncelikle dikkate alınır. Diğer stil belirtimleri geçersiz olur. Bu yöntemi kullanabilmek için ayrıca 2 etiketten yararlanılır. Bunlar <DIV> ve <SPAN> etiketleridir. <div style="font-color: blue">... </div> ve diğer etiket, <span style="font-color: blue">... </span> Bu iki etiket arasındaki fark Ģudur; <div> etiketi blok düzeyinde iģlev görür. Yani kapsadığı aralıktaki bütün öğeler bir blok mantığıyla ele alınır ve bu aralıkta bütün HTML öğeleri yer alabilir. Ayrıca <div> etiketi sonlandığında bir satır atlatır. <span> etiketinde böyle bir Ģey sözkonusu değildir. Bu yüzden <span> etiketini cümle içlerinde rahatlıkla kullanabiliriz EMBEDDED (Gömülü) Metot: Bu yöntemde stil tanımlamaları <head>...</head> etiketleri arasında yer alacak Ģekilde yapılır. Ve bu amaçla <style> etiketinden yararlanılır. Örneğin; <style type="text/css">  </style> Buradaki '' ifadeleri stil kodlarını eski web tarayıcılardan saklamak için kullanılmaktadır. BODY ifadesi stil tanımlamasının selektörü, diğer ifadeler ise bu selektöre atanan stil bildirimleridir EXTERNAL (Linked - Harici Bağlı) Metot: CSS kodları çok uzun olabilir. Bunun için CSS kodlarımızı ayrı bir not defteri sayfasında yazarız ve uzantısını.css yaparız. Daha sonra bunu sayfamıza bağlarız. Sadece sayfamızın baģına yazacağımız CSS etiketlerini Notdefterine yazmak ve uzantısını.html değil de.css yapmak. ali.css dökümanını, bağlanacak olan.html dökümanlarınızın olduğu klasöre kopyalanır. Ve bu dosyanın sayfaya eklenmesi için aģağıdaki ifade yazılır;

9 <link rel="stylesheet" type="text/css" href="ali.css"> etiketini sayfanızın <head> </head> etiketleri arasına yazılması gerekir.böylece.css uzantılı dosyayı sayfanıza link yolu ile eklenmiģ olur. Bu yöntemi kullandığımızda bütün bir siteyi stil tanımlamaları açısından denetim altına almıģ oluruz. Örneğin sitemizdeki tüm sayfaların arkaplan rengini değiģtirmek istediğimizde "ali.css" dosyasındaki tek bir değiģiklikle bunu gerçekleģtirebiliriz. Aksi durumda sitedeki tüm sayfalar için bunu tek tek yapmak zorunda kalırdık IMPORTING (İthal Etme) Metotu: Bu yöntemde ise kullanılmak istenen stil tanımlamaları ayrı bir dosyadan ithal edilir. Bu amaçla harici bir stil dosyasını ithal etmek import komutu kullanılır. Örnek vermek gerekirse; web sayfasının <head>...</head> etiketleri arasına aģağıdaki gibi bir kod satırı yerleģtirilir; <STYLE TYPE="text/css"> url;... stil kodları --> </STYLE> NOT: Eğer bir web sayfasında yukarıda saydığımız bütün yöntemleri de birarada kullanırsak bunların tarayıcılar tarafından okunma sırası Ģu Ģekildedir; Harici stil -> Gömülü stil -> Ġç stil Ancak, okunan stil tanımlamalarının geçerlilik sırası ise tam tersidir; Ġç stil -> Gömülü stil -> Harici stil Yani CSS uyumlu bir tarayıcı herhangi bir web dökümanında bütün stil yöntemleri de uygulanmıģsa ilk olarak harici dosyayı, sonra gömülü tanımlamaları ve daha sonra da iç stil tanımlamalarını okur. Ve iģ sayfayı ekranda göstermeye gelince öncelikle "iç stil" tanımlamalarını geçerli kılar. Sonra gömülü stildeki tanımlamaları, son olarak ta harici dosyadaki tanımlamaları dikkate alır. Görüldüğü üzere burada iç stil gömülü stile baskın rol oynamaktadır. Aynı Ģekilde gömülü stil de harici stil üzerinde baskın olur. Böyle bir durumda, tanımladığımız stillerin değerlendirilmesi açısından, tarayıcı ile web sayfası arasındaki iliģkide bir nevi "basamaklama" olayı sözkonusudur. CSS'deki "Cascading" kelimesi de zaten buradan kaynaklanmaktadır. CSS Standartları ve W3C: CSS'nin geliģimi W3C tarafından kontrol edilmekte olup, Ģu ana kadar Cascading Style Sheets hakkındaki geliģmeler CSS1 ve CSS2 Ģeklinde iki versiyonda (level) toplanmıģtır. CSS3 için ise konsorsiyumun çalıģmaları halen sürmektedir. CSS hakkında herhangi bir hususta tereddüte düģtüğünüzde ilk bakacağınız yer bu konsorsiyumun teknik belgeleri olmalıdır. World Wide Web Konsorsiyumu için; CSS: CSS Homepage - W3C (Cascading Style Sheets) CSS1: (Cascading Style Sheets, level 1) CSS2: (Cascading Style Sheets, level 2) CSS3: