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.
1. Stil Şablonlarının Komut Yapısı
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 “<!--” ve “-->” işaretleri kullanılır. Bu işaretler, CSS tanımayan
tarayıcılarların bu kısmı geçmesini sağlar.
<html><head>
<style type=”text/css”>
<!--
……….
-->
</style></head>
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.
Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısımdan oluşur.
Selektör (selector)
bir style sheet bildiriminin ilk öğesine verilen isimdir.
Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımızı seçmeye yarar.
H1 {color:green}
Selektör (Selector) Bildirim (Declaration)
Bildirim (decleration)
Bu da kendi içinde özellik ve değer olarak 2 temel bileşene
ayrılmaktadır.
H1 {color : green}
Özellik (Property) Değer (Value)
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.
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.
Örnek:
Css
CSS Kullanımı
CSS
Kullanımı
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; 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.
Örnek:
Css
Web Tasarımı
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</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.
Örnek:
verilen kodları not defterine yazıp stil.css
olarak kaydediniz.
h1 {font-size:13pt; color:green}
h2 {font-size:20pt; color:blue}
h3 {font-size:15pt; color:red}
Daha sonra HTML dosyasını hazırlıyoruz.
CSS
Stil Şablonları
Stil Şablonları
Stil Şablonları
0 Yanıt
6366 Gösterim