Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Temel Kavramlar
Dil Kuralları (CSS Syntax)

CSS dil kuralları iki bölümden oluşur. Bunlar sırasıyla seçici, tanımlamadır. Daha sonra
tanımlama en az bir özellik ve değer ikilisiyle kullanılır.

seçici {özellik: değer} "seçici" genelde tanımlayacağınız bir HTML öğesidir (<p> gibi).
"Özellik" değiştireceğiniz niteliktir ve her özellik en az bir değer alır. Özellik ve değer
birbirinden iki nokta üstüste (:) ile ayrılır ve kıvrımlı parantez {} çiftiyle çevrelenir.

Seçici bir HTML sayfasıyla Stil sayfaları arasındaki bağı oluşturur. Hemen her HTML öğesi
olası seçici tanımlanabilir.
örnek:
h1 {color: black}
eğer değer birkaç kelimeden oluşuyorsa çift tırnak (") içinde tanımlanır.
p {font-family: "sans serif"}
eğer birden çok özellik tanımlanacaksa özellik ve değer ikilisi diğerlerinden ; ile ayrılır.
p { text-align:center; color:red }
Stillerin daha okunaklı olması için her özelliği ayrı satırda yazmak iyidir. Örneğin:

p
{
text-align: center;
color: black;
font-family: arial
}

Stil tanımlarında özelliklerin değerleri girilirken değer birimleri arasında boşluk bırakmayın.
Örneğin, "margin-left: 20px" yerine "margin-left: 20 px" yazarsanız IE6'da çalışabilir ama
Mozilla/Firefox ya da Netscape altında çalışmaz.

Kalıplama modeli

Kutu yapısında kalıplama modeli, her öğenin bir ya da daha çok kutulardan oluşur. (öğelerin
görüntelenme komunu 'none' olanlar kutularda yer almaz). Her kutu çekirdek içerik alanının
çevresel dolgu alanı vardır bunlara sınır ve kenar alanları denir.
| |
| |
| _________________________________ |
| | | |
| | border(sınır) | |
| | ___________________________ | |
| | | | | |
| | | padding(dolgu) | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content(içerik) | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|

| ö ğ e eni |
| kutu eni |

Gruplama

seçicileri gruplama olanağı vardır. Bunun nedeni stil sayfalarının uzunluğunu kısaltmaktır.
Seçiciler virgül ile birbirinden ayrılır. Örneğin:

h1,h2,h3,h4,h5,h6
{
color: green
}

Kalıtım/Geçiş

Bir öğeden altındaki öğelere stilin geçmesi konusu önemlidir. Çünkü tüm stiller bir öğeden
altındaki öğeler geçmez. Örneğin 'background' özelliği geçmez ama önceki öğenin art alanı
içinde tanımlanmış öğede de kullanılır

Sınıf (class) seçicileri

Aynı HTML öğesine birden çok seçici tanımlamak Sınıf (class) ile sağlanır.

Ama her seçici için bir sınıf tanımlanabilir. Bu durumda 'p.pastoral.marine' gibi tanımlama
hatalı olur. Stil sayfalarında sınıf tanımları çok etkilidir. Hemen her öğe ile kullanılılabilir.
Örneğin paragraf tanımında iki değişik seçici tanımı aşağıdaki gibi olsun:

p.right {text-align: right}

p.center {text-align: center;}
HTML içinde bu seçiciler şöyle kullanılır:

<p class="right">
Bu paragraf sağa yanaşıktır.
</p>

<p class="center">
Bu paragraf ortalanmıştır.
</p>
Bir öğeye birden çok seçici tanımlamak isterseniz kullanım:

<p class="center bold">

Bu bir paragraftır.
</p>
biçimindedir.
HTML öğesi tanımlamadan seçici tanımlayıp o seçiciyi tüm HTML öğelerinde kullanmak
isterseniz:

.center {text-align: center}

biçimde tanım yaparsınız...

Not: sınıf (class) adını numarayla başlamayın Mozilla/Firefox'da çalışmaz.

İçerik Seçicileri

Kalıtım (ya da geçiş) stil yazanlara kolaylıklar sağlar. Tüm stil özelliklerini uzun uzun
yazmak yerine kullanıcı önce varsayılanları tanımlar, varsa ayrıcalıkları ekler.
Örneğin <h1> içinde <em> biçimine kırmızı renk verdirmek istediğimizde:
h1 { color: blue }
em { color: red }
tanımı yerine

h1 em { color: red }
kullanılır. Büyük bir olasalıkla yalnız "h1" içindeki "em" tanımları kırmızı olacaktır.

Bu tür seçicilere içerik seçicileri denir.

ul li { font-size: small }
ul ul li { font-size: x-small }

Yukarıdaki örnekte "li" "ul" altında kullanılırsa yazı-tipi boyu küçük olacaktır. Buna göre "ol"
altındaki "li" tanımlarının yazı-tipi boyları değişmemiş olur. İkinci satırda bir önceki satırla
çelişki olmaması için iç içe tanımlanmış iki tane "ul" olunca yazı-tipi boyu iyice küçük
olacaktır.

İçerik seçicileri öğe tipleriyle, sınıf (class) ve kimlik (id) niteliğiyle ya da bunların karışımıyla
tanımlanabilir. Örneğin:

div p { font: small sans-serif }

.reddish h1 { color: red }
#x78y code { background: blue }
div.sidenote h1 { font-size: large }

Özel nitelikleri olan öğelere (elemanlara) stil eklemek

Yalnız belirli nitelik değerleri için stil tanımı yapabilirsiniz. Örneğin aşağıdaki tanım "input"
html öğesinde tipi "text" olanlar için geçerlidir.
input[type="text"] {background-color: blue}

Kimlik (Id) Seçici

Kimlik (Id) seçicileriyle HTML öğeleri için stil tanımı yapılır. Kimlik (Id) seçicilerinin
başında # işareti bulunur.
Aşağıdaki stil tanımı html öğelerinden kimlik (id) tanımı "yesil" olanlar için geçerlidir.
#yesil {color: green}
Aşağıdaki stil tanımı <p> HTML öğesinde kimlik (id) türü "para1" olanlar için geçerlidir.

p#para1
{
text-align: center;
color: red
}
Not: KIMLIK (ID) adı sayıyla başlamamalıdır. Mozilla/Firefox bu tanımları anlamaz.

CSS Açıklamaları

Açıklamalar CSS kodlarınızı anlatmak için kullanılır. Belki daha sonra kaynak kodlarınızı
incelerken unuttuklarınızı anımsatmak için gerekli olabilir. Tarayıcı (ya da gezgin) açıklamayı
önemsemez. Bir CSS açıklaması "/*" ile başlar ve "*/" ile son bulur. Örnek:

/* Bu bir açıklama */
p
{
text-align: center;
/* Bir bir başka açıklama */
color: black;
font-family: arial
}

HTML içinde Stillerin gösterilişi

Stil sayfalarının etkin olabilmesi için tarayıcının bu stil sayfalarını okumuş olması gereklidir.
HTML tanımlarında stil sayfalarının HTML belgelerine nasıl bağlanacağı aşağıdaki örnekte
gösterilmiştir:

<html>
<head>
<title>title</title>
<link rel=stylesheet type="text/css"
HREF="http://style.com/cool" title="Cool">
<style type="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</style>
</head>
<body>
<h1>Headline is blue</h1>
<p style="color: green">While the paragraph is green.
</body>
</html>
Bu örnekte stilleri HTML'e bağlamanın dört yöntemi belirtilmiştir. LINK öğesi kullanılarak
bir dosyada bulunan stil sayfaları HTML içine taşınmış olur. <head> altında 'stil' öğesi
kullanılarak yalnız o HTML için gereken stiller tanımlanabilir. 'body' öğesi içinde 'style'
niteliği kullanılarak tanımlama yapılabilir. Ya da '@import' tanımıyla stiller HTML sayfasına
eklenebilir.

Dışsal Stil Tanımları

Birçok sayfada aynı stil tanımları kullanılacaksa dosyadan stilleri okumak en iyisidir. Bir
sayfada değişiklik yaparak tüm web sitesinin görünüşünü değiştirebilirsiniz. Bunun için her
html sayfası <link> komutuyla stil sayfalarını okuyabilmelidir (Yukarıdaki örneğe bakın)

İçsel Stil Tanımları

Tek sayfada özel bir stiller kullanıldığında HTML kodu içinde stil tanımı yapılabilir.

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Not: Bir tarayıcı bilinmeyen tanımları önemsemez, atlar. Yani stil komutlarını tanımayan eski
bir tarayıcı <style> komutunu atlar ama içeriğini web sayfasına yazar. Eski tarayıcının böyle
bir şey yapmaması için stil komutlarını açıklama içinde tanımlamak yararlıdır. Aşağıdaki
örnek bu amaçla gösterilmiştir:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

Kod içi Stiller

Kod içi stil tanımı, "style" komutunun pekçok özelliklerini anlatımla karıştığı için pek verimli
kullanamaz. Bu komutu ayrıcalıklı olarak tek başına kullanılan bir öğe olduğunda tanımlamak
daha doğrudur. Kod içi stillerde komut içinde "style" niteliği ile tanım yapılır. "Style" niteliği
CSS özelliklerinden oluşur. Aşağıdaki örnek bu tür tanımı gösterir.

<p style="color: sienna; margin-left: 20px">

Bu bir paragraftır
</p>

Çoklu Stil Tanımları

Eğer aynı seçici için değişik stiller tanımlanmışsa, değerler en belirgin olandan alınır. Örneğin
dışsal stil tanımı aşağıdaki gibiyse:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
ve içsel stil tanımı aşağıdaki özelliklerle tanımlanmışsa:

h3
{
text-align: right;
font-size: 20pt
}
Bu sayfada <h3> öğenin stil değerleri:

color: red;
text-align: right;
font-size: 20pt
biçimindedir. Burada renk dışsal stil tanımından alınırken, metin-yaslanma ve yazı-tipi-boyu
özellikleri içsel stil tanımından alınmıştır.