CSS
CSS'in açılımı Cascading Style Sheets' dir. Türkçe’ye birbirinin üzerine binmiş biçim katmanları şeklinde çevirebiliriz. Hemen bir örnekle yukarıdaki örneğimizi kodlamaya başlayalım. Sayfamızda üç paragraf olsun. Ortadaki paragrafın yazı rengi diğerlerinden farklı olarak mavi renkte görüntülensin.
<body> … </body> etiketlerimizin arasına aşağıdaki kodları yazalım.
<p> Bu birinci paragrafımız olsun.</p> <p style="color:#0000FF">Bu ikinci paragrafımız olsun.</p> <p>Bu üçüncü paragrafımız olsun.</p>
Tarayıcıdaki görünümü;
Bu birinci paragrafımız olsun.
Bu ikinci paragrafımız olsun.
Bu üçüncü paragrafımız olsun.
Yukarıdaki kodlarda
etiketine style özelliği ekleyerek bir biçim kazandırdık. Bunu style özelliğine color:#0000FF değeri vererek gerçekleştirdik. Stil tanımlaması için birinci yöntem budur.
Şimdi farklı bir şekilde tüm <p> etiketlerine özellik tanımlayalım. Bunun için <head>…</head> etiketleri arasındaki bölümde genel bir stil tanımlaması yapmamız gerekmektedir. Aşağıdaki kodu inceleyelim.
<html lang="tr,TR">
<head> <meta charset="UTF-8">
<title>Genel CSS tanımlaması örnek</title>
<style type="text/css"> p { color:#FF0000; } </style>
</head>
<body>
<p> Bu birinci paragrafımız olsun.</p>
<p> Bu ikinci paragrafımız olsun.</p>
<p> Bu üçüncü paragrafımız olsun.</p>
</body>
</html>
Yukarıdaki örnekte <head>…</head> etiketleri arasında kırmızı renkle belirtilmiş yeni bir kod satırı eklenmiştir. Bu kod satırı <style>…</style> etiketleri arasında oluşturulmuştur. <style> etiketine type özelliği eklenerek ve değeri text/css olarak belirlenerek, tüm sayfada bulunan p etiketlerine uygulanmasını istediğimiz renk değişimi, color:#FF0000; satırı ile kırmızı olarak gerçekleştirilmiştir. Bu kod satırı ile sayfa içinde kullanacağımız tüm <p> etiketleri arasındaki içerikler kırmızı olacaktır.
Pekiyi şimdi düşünelim. Hem son örneğimizdeki gibi genel bir stil tanımlaması yapıp hem de ilk örneğimizdeki gibi sadece tek bir etikete özel stil tanımlaması yapsak sonuç ne olur?
Kodumuzda ikinci <p> etiketini ilk örneğimizdeki haline getirelim.
Yani son örneğimizdeki;
<p> Bu ikinci paragrafımız olsun.</p>
satırını
<p style="color:#0000FF"> Bu ikinci paragrafımız olsun.</p>
olarak değiştirerek o paragrafın mavi renk olmasını sağlayalım. Şimdi sonuca bakalım.
Buradan nasıl bir sonuç çıkarıyoruz?
Demek ki genel tanımlamaya göre ilk olarak tüm <p> etiketleri kırmızı renk oluyor fakat herhangi bir etikete özel bir biçim (style) tanımlaması yapıldıysa (ikinci <p> etiketine
mavi renk biçimi verildi ) o biçim tanımlaması genel tanımlamanın üzerinde baskın ve geçerli oluyor.
Stil tanımlaması yapmanın üçüncü bir yolu da harici stil dosyaları ile çalışmaktır. Bu harici stil dosyalarını html sayfalarımıza bağlayarak da istediğimiz biçimi sayfamıza yansıtabiliriz.
<head> … </head> bölümü arasında çok fazla satırdan oluşan (belki binlerce satır) bir stil tanımlaması yapmak yerine bu kodları harici bir stil dosyasında tutabiliriz ve bu dosyayı html sayfası ile ilişkilendirebiliriz. Bunu yapabilmek için <style>…</style> etiketleri arasına yazdığımız biçim tanımlamalarını css dosya uzantısı ile kaydedeceğimiz (stil.css gibi) başka bir dosyaya yazmamız gerekir. Şimdi böyle bir stil.css adında bir dosya oluşturup bu dosyayı www klasörü içinde oluşturacağımız css klasörüne kaydedelim.
stil.css dosyasının içeriği aşağıdaki gibi olsun.
p{
color:#00FF00;
text-decoration:underline;
font-weight: bold;
}
index.html dosyamızın içeriği de aşağıdaki gibi olsun.
<html lang="tr,TR"> <head> <meta charset="UTF-8"> <title>Dış stil dosyası bağlantısıyla CSS tanımlaması örnek</title> <link rel="stylesheet" href="css/stil.css"/> </head> <body> <p> Bu birinci paragrafımız olsun.</p> <p style="color:#0000FF"> Bu ikinci paragrafımız olsun.</p> <p> Bu üçüncü paragrafımız olsun.</p> </body> </html>
Farklı bir klasörde bulunan stil.css dosyasını index.html dosyası ile ilişkilendirebilmek için index.html dosyamızda title etiketinin altına <link rel="stylesheet" href="css/stil.css"/> kod satırını <head> … </head> etiketleri arasında yerleştirdik. <link> etiketine rel özelliği ekleyerek bunun bir stylesheet (biçim katmanı) olduğunu bildirdik ve ilişkilendirdiğimiz dosyanın bulunduğu konumu href özelliğinin değerine yazdık. href="css/stil.css" yazarak stil.css dosyamızın index.html dosyası ile aynı seviyede (aynı www klasörü içinde) bulunan css klasörünün içinde yer aldığını bildirdik. css klasörünü daha düzenli bir klasör ve dosya yapısı oluşturabilmek için ekledik. Yoksa stil.css dosyasını da index.html ile aynı seviyede (aynı www klasörü içinde) oluşturabilirdik. Böyle yapmayı tercih etseydik href="stil.css" yazmamız yeterli olacaktı. Bir dosyaya başka bir dosyayı hatasız bağlayabilmenin en önemli yanı, klasör yapısını hatasız belirlemiş olmaktır.
Şimdi sonuca bakalım.
stil.css dosyasındaki kodları tekrar gözden geçirelim.
p{
color:#00FF00; /*(Renk olarak yeşil belirlendi) */
text-decoration:underline; /* (Metnin altı çizgili olması sağlandı) */
font-weight: bold; /* (Font olarak kalın font kullanıldı.) */
}
Soru: İkinci paragraftaki yazılar neden mavi oldu?
Soru 2: index.html dosyasında <head> … </head> arasında
<link rel="stylesheet" href="css/stil.css"/> kodundan sonra;
<style type="text/css">
p { color:#000000; text-decoration:none; }
</style>
kodunu kullansaydık nasıl bir değişiklik gözleyecektik? Hangi biçim tanımlamaları hangi biçim tanımalarına baskın görünüyor? Biçim tanımlamalarında en baskın olandan en az baskın olana doğru nasıl bir hiyerarşi fark ediyorsunuz?
Not: CSS çok geniş bir konudur. Burada CSS için çok genel bir giriş bilgisi verilmiştir. Daha ayrıntılı bilgi için sadece CSS konusuna odaklanmış kitaplardan yararlanılabilir.
Buraya kadar her şey yolundaysa yeni bir sorum var. İşler her zaman daha karmaşığa doğru ilerler. :)
Soru şu:
Üçüncü paragrafın son sözcüğünün stilini nasıl değiştirebiliriz? Örneğin kırmızı renkli olsun.
<span> ... </span> etiketi
Bunu yapabilmek için yeni bir html etiketine gerek duyarız. Bu etiket <span> etiketidir. Görevi satır içi bir alanı işaretlemektir. İşaretlemek istediğimiz satır içi alanı <span> … </span> etiketleri arasına alırsak bu etikete style özelliği ekleyebiliriz. Style özelliğine de color:#FF0000 değerini verirsek istediğimizi yapmış oluruz. Hemen son paragrafın kodunu yazalım.<p>Bu üçüncü paragrafımız <span style="color:#FF0000"/> olsun</span></p>
Burada önemli bir konu da şu: İç içe geçmiş etiketlerde etiketlerin açılış ve kapanış sırası önemlidir. Yukarıdaki kod satırında görüldüğü gibi ilk açılan <p> etiketi kapanmadan ikinci bir <span> etiketi açılmış ve daha sonra </span> kapatılıp son olarak </p> etiketi kapanmıştır. Yani <p> etiketi <span> etiketini dıştan sarmakta, kapsamaktadır. Ve istediğimiz sonuca ulaşabildiğimizi tarayıcı ekranından görebiliriz.
<div> ... </div> etiketi
CSS konusu ile birlikte öğrenmemiz gereken son html etiketi <div> dir. <div> etiketi de <span> etiketi gibi yer belirler. Farkı <span> bunu satır içi için yaparken, <div> web sayfamız üzerinde belirlediğimiz daha geniş bir alan için gerçekleştirir.
Örneğimize geçelim. Aşağıdaki kodlarla yeni bir index.html dosyası oluşturalım.
<html lang="tr,TR">
<head>
<meta charset="UTF-8">
<title>div örnek</title>
<style type="text/css">
div {
height:200px;
width:400px;
float:left;
background-color:#FF0000;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<p> Bu birinci paragrafımız olsun.</p>
<p style="color:#0000FF"/> Bu ikinci paragrafımız olsun.</p>
<p> Bu üçüncü paragrafımız <span style="color:#FF0000"/>olsun.</span></p>
<div>
Bu bölüm kodumuzdaki div etiketleri arasındaki alandır.<br/>
Sayfa kodumuzun head bölümünde < style > etiketi içinde <br/>
tanımlanan biçim özelliklerini açıklayalım.<br/>
height:150px; bu alanın 150 pixel yüksekliğinde,<br/>
width:400px; 400pixel genişliğinde olmasını sağlar.<br/>
float:left; bu alanın sayfamızın solunda yer almasını<br/>
background-color:#FF0000; arka plan renginin kırmızı olmasını<br/>
color:#FFFFFF; yazı renginin beyaz olmasını belirler.<br/>
</div>
</body>
</html>
<div> etiketinin belirlediği alanı istediğimiz gibi biçimlendirdik.
Ama şimdi de farklı bir senaryo yazalım. Örneğin sayfamızda birden fazla alanı <div> ile işaretlemek istiyoruz ve her işaretlediğimiz alanın arka plan renginin farklı olmasını istiyoruz. Ne yapmalıyız?
div etiketine id (kimlik) tanımlamak
Bu durumda yapmamız gereken her <div> için sadece kendisine ait bir kimlik tanımlaması yapmak. İngilizce identification (kimlik) sözcüğünden gelen id özelliğini <div> etiketlerine verip her id özelliğine benzersiz bir değer atayalım. Örnekle daha iyi anlayacağız.
<html lang="tr,TR">
<head>
<meta charset="UTF-8">
<title>div örnek</title>
<style type="text/css">
#sol {
height:250px;
width:400px;
float:left;
background-color:#FF0000;
color:#FFFFFF;
text-decoration:none;
padding:5px; margin: 5px;
}
#sag {
height:250px;
width:400px;
float:right;
background-color:#AA00FF;
color:#FFFF00;
text-decoration:none;
padding:5px; margin: 5px;
}
</style>
</head>
<body>
<div id="sol">
Bu bölüm kodumuzdaki div etiketleri arasındaki alandır.<br/>
id'si sol olarak belirlenen < div id="sol"> kodu stil <br/>
tanımlaması yaparken #sol olarak bildirilir. (# önemli)<br/>
tanımlanan biçim özelliklerini açıklayalım.<br/>
height:250px; bu alanın 250 pixel yüksekliğinde,<br/>
width:400px; 400pixel genişliğinde olmasını sağlar.<br/>
float:left; bu alanın sayfamızın solunda yer almasını<br/>
background-color:#FF0000; arka plan renginin kırmızı olmasını<br/>
color:#FFFFFF; yazı renginin beyaz olmasını belirler.<br/>
padding:5px; div içinde kenarlardan boşluk verildi.(5px) <br/>
margin: 5px; div dışında kenarlardan boşluk verildi.(5px)
</div>
<div id="sag">
Bu bölüm kodumuzdaki div etiketleri arasındaki alandır.<br/>
id'si sag olarak belirlenen < div id="sag"> kodu stil <br/>
tanımlaması yaparken #sag olarak bildirilir. (# önemli)<br/>
tanımlanan biçim özelliklerini açıklayalım.<br/>
height:250px; bu alanın 250 pixel yüksekliğinde,<br/>
width:400px; 400pixel genişliğinde olmasını sağlar.<br/>
float:right; bu alanın sayfamızın sağında yer almasını<br/>
background-color:#AA00FF; arka plan renginin mor olmasını<br/>
color:#FFFF00; yazı renginin sarı olmasını belirler.<br/>
padding:5px; div içinde kenarlardan boşluk verildi.(5px) <br/>
margin: 5px; div dışında kenarlardan boşluk verildi.(5px)
</div>
</body>
</html> Tarayıcıdaki görünümüne bakalım.
div etiketlerine class (sınıf) tanımlamak
Bu bölümdeki son soru. (Emin olun öyle :)) Birden çok <div> etiketini aynı özellikler ile kullanmak istediğimizi düşünelim. Örneğin 4 adet yükseklik 100px, genişlik 100px ve arka planı mavi renkli <div> etiketi kullanalım. Bu dört <div> etiketinin özellikleri aynı olacağı için hepsinin bu özelliklerini tek bir sınıf içinde toplayabiliyoruz. Örneğimize geçelim.
<html lang="tr,TR">
<head>
<meta charset="UTF-8">
<title>div örnek</title>
<style type="text/css">
.kutu{
width:180px;
height:200px;
background-color:#FF0000;
float:left;
margin:5px;
}
</style>
</head>
<body>
<div class="kutu">
Bu bölüm kodumuzdaki ilk div etiketi arasındaki alandır.<br/>
</div>
<div class="kutu">
Bu bölüm kodumuzdaki ikinci div etiketi arasındaki alandır.<br/>
</div>
<div class="kutu">
Bu bölüm kodumuzdaki üçüncü div etiketi arasındaki alandır.<br/>
</div>
<div class="kutu">
Bu bölüm kodumuzdaki dördüncü div etiketi arasındaki alandır.<br/>
tüm divler aynı class ismine sahiptir.< div class="kutu">
</div>
</body>
</html>
Not: stil tanımlamalarını, id için # (diyez) işareti ile, class için . (nokta) işareti ile belirtiriz.
id veya class ismini, bu işaretlerden sonra boşluk bırakmadan yazarız.
Biçim tanımlamalarını { … } (süslü parantezler) arasında yaparız.
Her bir biçim tanımlama satırı ; (noktalı virgül) ile sonlandırılır.
Kodumuzdaki tüm div etiketlerini <div class="kutu"> şeklinde oluşturduk ve sayfamızın <head> bölümünde <style>
etiketleri arasında . (nokta) kullanarak kutu isminde bir sınıf tanımladık.
< style> etiketi arasında yapılan biçim tanımlaması;
.kutu{ (class tanımlaması için . (nokta) kullanıyoruz)
width:180px; (genişlik belirledik.)
height:200px; (yükseklik belirledik.)
background-color:#FF0000; (arka plan rengi kırmızı)
color:#FFFFFF; (yazı rengi beyaz olsun istedik.)
float:left; (arka arkaya gelen divleri birbirlerinin soluna doğru eklemesi için kullanılır.)
margin:5px } (divlerin birbirlerinden dış uzaklığı belirlendi)
Not: Tarayıcı sayfamız dördüncü div alanını aynı satıra sığdıramadığı için bir alt satırda oluşturdu.