HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm3)

Söz Dizimi

Sayfa 3 / 3


 

CSS3 Dilbilgisi

 

CSS3 Temel Kavramları

 

CSS belge sunum dili "token" adı verilen temel kavramların tekrarı ile programlanır. CSS dilinin çekirdek sözdizimi (core syntax) tüm CSS eski sürümler için aynıdır ve gelecek sürümler için de aynı olacaktır. Geriye doğru uyum oldukça, bir CSS programının hangi CSS sürümüne ait olduğu önemli olmayacak ve sürümü sadece içeriğinden anlaşılabilecektir. Fakat önemli olan, yazılan programın, belge çözümleyicilerce ne kadar destekleneceğidir. Bu konuda, a priori bir fikir yürütmek yerine, daima yazılan program denenerek sonuca ulaşılmalıdır. Eğer üst sürümden bir CSS kuralı desteklenmezse, bir alt sürüm denenmelidir.

Aşağıdaki tabloda CSS3 tokenlerinin tam bir listesi verilmiştir. Sayısal değerler, Universal Karakter Kümesine (Unicode karakterlerinin ait olduğu karakter uzayına) ait karakterleri belirten, onaltılı (hexadécimal) (kısaca hexcode veya hex) sayılardır.

 

IDENT

::=

ident

ATKEYWORD

::=

'@' ident

STRING

::=

string

HASH

::=

'#' name

NUMBER

::=

num

PERCENTAGE

::=

num '%'

DIMENSION

::=

num ident

URI

::=

"url(" w ( string | urlchar * ) w ")"

UNICODE-RANGE

::=

"U+" [0-9A-F?]{1,6} ('-' [0-9A-F]{1,6})?

CDO

::=

"<!--"

CDC

::=

"-->"

S

::=

wc +

COMMENT

::=

"/*" [^*]* '*'+ ([^/] [^*]* '*'+)* "/"

FUNCTION

::=

ident '('

INCLUDES

::=

"~="

DASHMATCH

::=

"|="

PREFIXMATCH

::=

"^="

SUFFIXMATCH

::=

"$="

SUBSTRINGMATCH

::=

"*="

CHAR

::=any other character not matched by the above rules, except for " or '

BOM

::=

#xFEFF

(BOM=Byte Order Mark)

Yukarıdaki tokenlerin oluşturulması için kullanılabilecek yöntemler aaşğıda görülmektedir.

 

ident

::=

'-'? nmstart nmchar *

name

::=

nmchar +

nmstart

::=

[a-zA-Z] | '_' | nonascii | escape

nonascii

::=

[#x80-#xD7FF#xE000-#xFFFD#x10000-#x10FFFF]

unicode

::=

'\' [0-9a-fA-F]{1,6} wc ?

escape

::=

unicode | '\' [#x20-#x7E#x80-#xD7FF#xE000-#xFFFD#x10000-#x10FFFF]

nmchar

::=

[a-zA-Z0-9] | '-' | '_' | nonascii | escape

num

::=

[0-9]+ | [0-9]* '.' [0-9]+

string

::=

'"' ( stringchar | "'")* '"' | "'" ( stringchar | '"')* "'"

stringchar

::=

urlchar | #x20 | '\' nl

urlchar

::=

[#x9#x21#x23-#x26#x27-#x7E] | nonascii | escape

nl

::=

#xA | #xD #xA | #xD | #xC

w

::=

wc *

wc

::=

#x9 | #xA | #xC | #xD | #x20

 

CSS bilgilerimiz geliştikçe bu ifadelere uyum sağlanması da kolaylaşacaktır.

 

CSS3 Dilbilgisi Kuralları

 

CSS3 dilinin dilbilgisi kuralları aşağıda görülmektedir. Burada, CSS3 tokenleri büyük harflerle, üretilebilecek ifadeler küçük harflerle, CHAR tokenleri ise ' arasına yazılmıştır.

 

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
               | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
               | FUNCTION S* any* ')' | DASHMATCH | '(' S* any* ')'
               | '[' S* any* ']' ] S*;
 

S=whitespace (boşluk)

Tüm CSS kısıtlamaları bu dilbilgisi kuralları ile açıklanamamaktadır. Örnek olarak, @charset kuralı, iliştirilmiş (embedded) bir stil sayfasında bulunmamalıdır. Bu kurallar hatalı kod olarak kabul edilecek ve değerlendirilmeyeceklerdir.

Tüm eğitimciler, yukarıdaki listenin yazarlar tarafından yorumlanmasının güçlüğü üzerine fikir birliği içindedir. Kullanıcıların yukarıdaki tanımlara çok az gereksinmeleri olacaktır. Buna rağmen, bu tablonun yorumu yapılmadan, kullanıcıların doğrudan üretmeleri gereken CSS3 selektörlerinin bilimsel olarak oluşturulması olanağı da yoktur. Bu açıdan, bu tablonun kullanımı yerine spesifikasyonda verilen aşağıdaki selektör tanımını uygulamak şimdilik yeterli olacaktır.

 

Karakterler Ve Karakter Duyarlılığı

 

Aşağıdaki kurallar daima geçerlidir:

Örnek olarak Olun ve Uluğbek iki selektör önerisi olabilir. Bunlardan ilki sadece US-ASCII karakterleri, ikincisi Türkçe karakterleri de içermektedir. Bu önerilerin geçerliği http://jigsaw.w3.org/css-validator/ adresinden sınama olanağı bulunabilir. Yapılan sınama sonunda, her iki önerinin de geçerli olduğu belirlenmiştir. Stil sayfalarında Türkçe selektör adlarının kullanılabilmesi, gerçekten de büyük kolaylık sağlamaktadır.

Bu değerlerin uygulamada desteklenip destelenmediğinin kontrolu için, aşagıdaki gibi bir HTML sayfası yazımı yapılabilir:

bu program css-deneme.htm olarak kaydedilmiştir. Internet Explorer 6.02 SP2, Opera 8 (beta), Netscape 8, Mozilla Firefox 1.5 bu programı doğru çalıştırabilmiştir. Bu durumda, tüm belge çözümleyicilerinin son sürümleri tarafından desteklenen Türkçe karakter içeren selektör ve onlarların hedefi olacak class ve id adları kullanımın sorunsuz olduğu görülmektedir. Yine de, yüzde yüz güvenli destek isteniyorsa, US-ASCII karakterlerinin dışına çıkılmamalıdır.

 

Saklı Sözcükler (Keywords)

 

Saklı sözcükler, tırnak içinde kullanılmaz, örnek olarak "red" bir saklı sözcüktür ve doğru kullanımı,

şeklindedir. Bu tanımda,

şeklinde bir ifadenin kullanılması yanlış olacak ve belge çözümleyicisi bu tanımı gözardı edecektir.

 

Şirketlere Özgü Saklı Sözcükler

CSS3 de, saklı sözcükler bağlaç veya alt bağlaç işareti ile başlayabilir. Buna rağmen sadece şirketlere özgü özel saklı sözcüklerin bu ayrıcalıktan yararlanmasına karar verilmiştir. Bu özel sözcükler (Vendor Specific Keywords), bir bağlaç veya alt bağlaç işareti ile başlayacak, bunu şirketin bir kısa ismi takip edecek, bunu bir bağlaç veya alt bağlaç işareti, sözcüğe bağlayacaktır. Örnek olarak,

mso-anlamlı saklı sözcük (Microsoft için)

-wap-anlamlı saklı sözcük (WAP için)

-moz-anlamlı saklı sözcük (Mozilla için)

-o-anlamlı saklı sözcük (Opera için)

kullanılabilecektir. Bu kullanımın çok özel olduğunu, ve şirketlere kendi özel saklı sözcüklerini üretebilmelerini sağlamak amacı ile bir esneklik olanağı vermek üzere spesifikasyona alındığı bilinmektedir. Saklı sözcük üretmek aslında kolay olabilir ama, bu saklı sözcüğü değerlendirebilecek uyumlu bir belge çözümleyicisinin de oluşturulmasının gerekeceği de unutulmamalıdır.

 

CSS3 İfadeleri (Statements)

 

Hangi sürüm olursa olsun geçerli bir stil sayfası, geçerli CSS ifadelerinden oluşur. İki tür CSS ifadesi tanımlanmıştır. Bunlardan ilki, hedef kuralları (at rules) diğeri kural grupları (rule sets) olarak adlandırılır. CSS ifadelerinin etrafında boşluk karakterleri olabilir.

 

Hedef Kuralları (At Rules)

 

Hedef kuralları, bir @ sözcüğünü takip eden bir tanımlayıcı ile gösterilir. Örnek olarak, @import ve @print birer hedef kurallarıdır.

Bir hedef kuralı hengisine önce rastlanırsa, ya ilk semikolon (;), ya da ilk blok ({}) başlangıcına kadar devam eder.

Eğer kullanılacaksa, @charset hedef kuralı diğer tüm kurallardan önce, tüm belgenin olabildiğince başında verilmelidir. @charset Hedef kuralı sadece dış stil sayfalarının ilk satırı olarak kullanılmalı ve iç (iliştirilmiş) (embedded) stil ifadelerinde kullanılmamalıdır.

@import Hedef kuralı, varsa @charset hedef kuralından sonra ve tüm hedef ve stil kurallarından önce verilmelidir. Aşağıdaki örnek yanlıştır:

Bu kurallar dizisi, belge çözümleyiciler tarafından,

şeklinde değerlendirilecektir. Bu ifadelerin doğrusu,

şeklinde olmalıdır. Ayrıca, bir hedef kural bloğu içinde başka bir hedef kuralı konulamaz. Aşağıdaki örnekte üçüncü hedef kuralı (@import"printer.css") geçersizdir, çünkü bir media bloğu içinde çağrılmıştır.

Burada, belge çözümleyiciler kuralları,

 

şeklinde yorumlayacaklardır.

 

Bloklar

 

Bir blok, bir sol süslü parantez { ile başlar ve bunu kapatan bir sağ süslü parantez } ile biter. Bloklar içinde tüm karakterler bulunabilir, fakat parantez köşeli parantez ve süslü parantezler daima çiftler halinde kullanılabilir ve içiçe yuvalanabilirler. Tek ve çift tırnak işaretleri arasında bulunan sözcükler birer karakter dizini (string) olarak yorumlanırlar. Örnek :

 

Kural Grupları, Bildirim Blokları ve Selektörler

 

Kural grupları (buna basitçe "kural" adı da verilir) bir selektör ve bir belirtim blokundan oluşur.

Bir belirtim-bloğu (Buna bir süslü parantez bloku adı da verilir), bir sol süslü parantez { ile başlar ve bunu kapatan bir sağ süslü parantez } ile biter. İki süslü parantez arasında, istendiği kadar boşluk ve sıfır veya istendiği kadar, bir semikolon (;) ile sonlanan belirtim bulunabilir.

Selektörler, ileride açıklanacağı gibi, sol süslü paranteze ({) kadar (sol süslü parantez dışında) herşeyi içerir. Bir selektörün, her zaman bir belirtim bloğu ile birlikte kullanılması gereklidir.

Eğer bir belge çözümleyici, bir selektörün içerdiği bir öğeyi çözümleyemezse, geriye kalan terimler kurallara uygun bile gözükse, tüm blok gözardı edilir. Örnek:

Bu ifadede bulunan & işareti yasal olmadığı için, ne div ne de span elementinin metin içerikleri kırmızı ile görüntülenmeyecektir.

 

Belirtimler (Declarations) ve Özellikler (Properties)

 

Bir belirtim (süslü parantez bloku), boş olabilir veya kolon (:) ile ayrılmış bir r özellik ve değerden oluşabilir. Özellik:değer çiftleri bir semikolon (;) ile birbirlerinden ayrılan gruplar halinde belirtilebilirler Yazılımda istendiği kadar boşluk bırakılabilir.

Bir özellik, bir tanımlayıcıdır (identifier). Bir özelliğin değerini tanımlamak için her karakter kullanılabilir fakat, süslü, köşeli ve normal parantezler çiftler halinde kullanılmalı ve karakter katarı (string) içinde bulunmayan semikolon işaretleri, kaçış karakteri (escape) ile saklanmalıdır. Süslü, köşeli ve normal parantezler içiçe yuvalanabilir. Tırnak içindeki değerler, karakter katarı (string) olarak değerlendirilir.

Özelliklerin değerleri, ayrıca spesifikasyonda belirtilmiştir. Buna rağmen her durumda bu değerler, belirleyicilerden (identifier), karakter katarı (string), sayılar, uzunluklar, yüzdeler, URI değerleri, renkler, zaman ve frekans değerlerinden oluşur.

Her CSS3 özelliği kabul edebileceği değerler ile ilgili, spesifikasyonda belirtilmiş olan, kendisine özgü sözdizimi (sentaks) ve söz yazımı (semantik) (içerik) kuralları ile kısıtlıdır.

Belge çözümleyiciler, bir bildirimde geçersiz olan özellik isimlerini veya değerlerini içeren bildirimleri yok sayarlar. Örnek olarak,

şeklinde bir bildirim, color:blueish bildirimi yanlış olduğundan,

haline indirgenecektir.

 

Yorumlar

 

Yorumlar /* ...*/ arasına yerleştirilerek programın her yerine konulabilirler. Yorumlar çok satırlı olabilir fakat içiçe olamaz. Ayrıca, eskiden stil komutlarını değerlendiremeyen belge çözümleyicilerden stil komutlarının gizlenmesi için, stil ifadelerinin, <!-- ve --> işaretleri arasına yerleştirilmesi gerekirdi, bugün için tüm belge çözümleyicilerinin en son sürümleri, stil programlarını değerlendirebildikleri için, bu şekilde bir kod gizlenmesine gerek kalmamıştır.

 

Stil Sayfalarının Belgelerle Birleştirilmesi

 

Medya Türleri

 

Medya türleri, belgenin sunumun hedeflendiği ortamı belirtir. Bu ortam, duruma göre yazıcı, cep telefonu veya bilgisayar ekranı olabilir. Bazı durumlarda, CSS özellikleri sadece bir tek medya türüne özgü olabilir. Bazı durumlarda ise, değişik medya türleri aynı özelliği kullanır, fakat bu özelliğin değeri her medya türü için farklı olabilir. Bu nedenlerden dolayı, stil sayfasının veya stil sayfasının bir kısmının uygulanacağı medya türünün belirtilmesi gerekli olabilir.

 

Hedeflenen Medya Türünün Stil Sayfasında Belirtilmesi

 

Hedeflenen medya türünün belirtilmesi için iki yöntem uygulanabilir. Bunlardan ilki, hedeflenen ortamın, bir medya hedef kuralı ile bildirilmesidir. Örnek olarak,

Diğeri ise, stil sayfasının bağlanması sırasında hedeflenen medya türünün belirtilmesidir. Bu konuda birinci örnek olarak, stil sayfasının belgeye bir <link> elementi ile bağlanması,

İkinci örnek ise, sayfaya bir stil sayfasının ithal edilmesidir.

Medya türleri aslında bir belge çözümleyici için birbirini dışlayan türlerdir, fakat bazı özel durumlarda, bir belge çözümleyici, birkaç tür stil sayfasını değerlendirebilir.

 

@media Hedef Kuralı

 

@media Kuralı, stil sayfasının hedeflediği virgül ile sıralanmış medya türlerini süslü parantezler arasında belirtir. Örnek,

Geçerli medya türleri, ek3 sayfa2 de açıklanmıştır. Bu listeye yeni medya türleri katılabilir. Medya türü yazılımı büyük/küçük harf ayrımı yapmaz yani PRINt ile PrinT aynı etkiyi yapar.

 

Başka Stil Sayfalarından @import Hedef Kuralı ile Stil Kuralı İthal Etmek

 

Başka sayfalarda yazılı bulunan CSS kuralları, @import kuralı ile bir stil sayfasına veya stil elementinin içeriğine ithal edilebilir. @import Kuralı, @charset kuralından hemen sonra ve tüm CSS ifadelerinden önce belirtilmelidir. Çakışma durumunda, ithal edenin kuralları önceliklidir. @import sözcüğünü, ithal edilecek CSS programının yerini belirten, bir URI deyimi takip etmelidir. Bir karakter katarı da URI değeri olarak kabul edilebilir. Örnek,

Medayaya bağımlı stil sayfaları, koşullu ithal ile stil sayfalarına katılabilirler. Örnek,

Eğer bir medya kısıtlaması yoksa, belirtilen dosyadaki stil kuralları, koşulsuz olarak ithal edilirler.

Friday, January 11, 2019 22:34

validate in W3C !