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.
 
|                                       |
|           kenar  (renksiz)            |
|   _________________________________   |
|  |                                 |  |
|  |        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
}
Bazı özelliklerde gruplama kalıbı farklı olabilir ve bunlar kendilerine özü bir dil kuralıyla gruplanırlar: 
h1 { font: bold 12pt/14pt helvetica }

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.