Ana Sayfa | Amacımız | Okulumuz | Ziyaretçi Defteri | İletişim

3. STİL ŞABLONLARI

Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir.

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

CSS kodları HTML kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilir.

3.1. STİL ŞABLONLARININ KOMUT YAPISI

Bir stil dokümanı <style type="text/css">…..</style> ifadeleri arasına yazılır. Stil kısmı HTML dokümanının <head>…</head> aralığında tanımlanır. Stil tanımlaya başlarken istenirse “” işaretleri kullanılır. Bu işaretler, CSS tanımayan tarayıcılarların bu kısmı geçmesini sağlar.

CSS kodu oluşturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (Note Defteri vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin “style.css”) da dahil olmak üzere CSS kodları da HTML dokümanları gibi ASCII (plain-text) formatındadır. Bu nedenle CSS kodlaması basit text editörleri yardımıyla yapılabilir.

HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. İyi bir tasarımcı olmanın koşullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir.

Temel bileşenlerin biraraya getirilmesinde kullandığımız “{ }” ve “:” şeklindeki işaretler de bu yalın haldeki kod satırının tamamlayıcı öğeleridir.

NOT: Burada önemli bir konu 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 H1 {color: "blue"} ifadesi yanlıştır. CSS2 ile kurallaşan bu hususa özen göstermek gerekmektedir.

3.2. STİL ŞABLONLARININ ÇEŞİTLERİ , SEÇİCİLER

3.2.1. Stil Şablonlarının Çeşitleri

Stil şablonları üç çeşittir. Bunlar, Yerel CSS, Genel CSS, Harici CSS’ dir.

Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur.

CSS Kullanımı

<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:25pt; color:blue;>CSS Kullanımı</h2>
</body>
</html>

Verilen kodları tarayıcıda çalıştırdığımızda iki tane “CSS Kullanımı” ifadesiyle karşılaşırız. Bunların her ikisi de h2 olmasına rağmen yazım şekilleri farklıdır. Çünkü ikinci etikete etki etmek üzere bir stil şablon eklenmiştir.

Genel stil şablonları:HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler.

Web Tasarımı

<html>
<head>
<title>Css</title>
<style type="text/css">

</style>
</head>
<body>
<h2>Web Tasarımı </h2>
</body>
</html>

Bu örneği genel şablon kullanarak yazdık, sonuçta her ikisi de şablonda belirttiğimiz özelliklerle görüntülendi.

Harici stil şablonları:Global stil şablonunu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız. Uygularken, stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız.Fakat bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya yazarız ve css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> … </head> etiketleri arasına <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde ekleriz.

<h1> {font-size:13pt; color:green}
<h2> {font-size:20pt; color:blue}
<h3> {font-size:15pt; color:red}

Yanda verilen kodları not defterine yazıp stil.css olarak kaydedin

Şimdi de HTML dosyasını hazırlayalım.

Stil Şablonları

<html><head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Stil Şablonları</h2>
<h2>Stil Şablonları</h2>
<h3>Stil Şablonları</h2>
</body></html>

HTML dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css" href="stil.css"> kodu harici olarak hazırladığınız stil.css dosyasındaki stil özelliklerini kullanmanızı sağlar. Aynı stilleri kullanmak istediğiniz diğer HTML dosyalarına bu satırı eklemeniz yeterlidir. Böylelikle her sayfada tek tek stil özellikleri tanımlamamış, başlangıçta tanımladığınız stil özelliklerini kullanarak koddan tasarruf etmiş olursunuz.

Örnek Uygulamalar

Verilen örneklerde parametreler ve özellikleri yan tarafta verilmiştir.

<html><head>
<title>Css</title>
<style type="text/css">

</style></head>
<body>
<p>Stil Şablonları</p>
</body></html>

font-family: Font tipini belirler. (Arial, Courier, Verdana…)
font-weight: Fontun kalınlık incelik durumunu belirler.
     bold: Fontu kalın yapar.
     normal: Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında normal özellik alınır.
font-style: Fontun stilini belirler.
     italic: Yazının sağa doğru yatık olmasını sağlar.
     color: Fontun rengini belirler.

<html><head>
<title>Css</title>
<style type="text/css">

</style><head>
<body>
<p>Stil Şablonları</p>
</body></html>

text-transform:
   lowercase: Yazının tümünü küçük harf yapar.
   uppercase: Yazının tümünü büyük harf yapar.
   capitalize: Yazıyı istenilen şekilde bırakır.
text-decoration:
   underline: Yazının altının çizili olmasını sağlar.
   overline: Yazının üstünün çizili olmasını sağlar.
   line-through: Yazının üzerinin çizili olmasını sağlar.
   none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
   left: Yazının sola bitişik olmasını sağlar.
   center: Yazının ortada olmasını sağlar.
   right: Yazının sağa bitişik olmasını sağlar.
   line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
   text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.

3.2.2. Seçiciler

Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id seçicisi ve sınıf seçicisi.

Id Selectors(Id Seçicileri) : Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır.

<html><head><title>Id seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9 httpequiv=Content-Type>
<style type="text/css">

</style></head><body>
<u id=idSecici>ID Seçiciler</u>
</body></html>

Class Selectors (Sınıf Seçicileri): Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır.

YEŞİL sınıf seçicisi ile

GRİ sınıf seçicisi ile

<html>
<head>
<title>Css</title>
<style type="text/css">

</style>
</head>
<body>
<h2 class=yesil>YEŞİL sınıf seçicisi ile </h2>
<br>
<h2 class=gri>GRİ sınıf seçicisi ile </h2>
</body>
</html>

Burada sınıf seçicisini sadece h2 için tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi tanımlamaktır.

YEŞİL sınıf seçicisi ile

GRİ sınıf seçicisi ile

<html>
<head>
<title>Css</title>
<style type="text/css">

</style>
</head>
<body>
<h3 class=yesil>YEŞİL sınıf seçicisi ile </h1>
<br>
<h4 class=gri>GRİ sınıf seçicisi ile </h1>
</body>
</html>

3.3. STİL ŞABLONLARININ GENEL KULLANIM ŞEKİLLERİ

CSS’i HTML üzerinde kullanmak için 3 yöntem (yerel-genel-harici) olduğunu daha önce belirtmiştik. Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl kullanacağımızı görelim.

3.3.1. A Etiketinin CSS ile Kullanımı

Bildiğiniz üzere a etiketi HTML’ye çok büyük bir özellik katan link etiketidir. Bu etiket ile diğer bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna geçecektir. Biz CSS yardımıyla a etiketinin aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi a etiketinin aldığı pozisyonları görelim:

Link: İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir.
Visited : Link tıklandıktan sonra etiketin aldığı değerdir.
Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur.
Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.

Örnek

<html><head><title>Css</title>
<style type="text/css">
<!-
A.normal
{
background-color:white;
color:blue;
}
A.ziyaret:visited
{
background-color:white;
color:maroon;
font-weight:normal;
}
A.aktif:active
{
background-color:white;
color:red;
font-weight:normal;
}
A.degisken:hover
{
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style></head>
<body>
<a href="#" class="normal">Linkin normal durumu</a><br>
<a href="#" class="ziyaret">Linki tıklayın ve degiştiğini görün</a><br>
<a href="#" class="aktif">Linkin aktif durumu</a><br>
<a href="#" class="değisken">Linkin üzerine geldiğinde stil
değişecek</a><br>
</body>
</html>

report phishing report abuse

This page is hosted by XM.COM - Free Web Hosting