Bu seri boyunca stil sayfalarına zaten birkaç kez dikkat çekildi. Bu stil sayfaları düzen ile tasarımı sıkı bir şekilde ayırmanızı sağlar. CSS sayesinde HTML elementleri sadece web belgesinin mantıksal veya anlamsal tanımı için sorumludur.
Başlangıçta bir stil sayfasının nasıl göründüğünü bilmek faydalı olabilir. İlk örneğe bir göz atın.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Belgede tarayıcıda böyle görünecektir:
HTML dosyasının body alanında iki element tanımlandı:
• bir başlık
• bir metin paragrafı
Bu iki element CSS ile biçimlendirilir. Bu biçimlendirme, bir stil sayfası alanı olan style ile başlık alanında tanımlanır. Bu alan içinde elemanların biçimlendirilmesi gerçekleştirilir.
İşte tekrar h1 başlığının tanımı:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Gösterilen söz dizimiyle iki şey belirlenir:
• Yazı tipi ailesi belirlenir.
• Yazı boyutu tanımlanır.
Burada öncelikle kullanılan söz dizimi hakkında genel bir açıklama yapılacak. Her CSS beyanı temelde iki parçadan oluşur - bir seçici ve CSS bildirimi. Seçici, biçimlendirilmesi gereken elemanı belirler. Biçimlendirmenin nihai şekli ise CSS bildirimi tarafından belirlenir. Seçici her zaman sol tarafta, CSS bildirimi ise sağ tarafta süslü parantezler arasında yer alır.
Gerçek CSS bildirimi yine iki elemandan oluşur, yani özellik ve değer. Özellik ve değer iki nokta üst üste ile ayrılır. Değerin hemen arkasından bir noktalı virgül gelir.
Seçici {
Özellik: Değer;
}Stil sayfalarını dahil etme
Web sitelerinde stil sayfalarını dahil etmek için pek çok farklı yöntem bulunmaktadır. İlk olarak stil talimatlarını doğrudan bir HTML etiketine atayabilirsiniz. Bir örnek:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Bu örnekte başlık mavi renkte gösterilecektir.
Bir HTML etiketine birden fazla stil talimatı ekleyebilirsiniz.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Bunları sırayla ekleyin, her biri arasına noktalı virgül koyarak ayırın.
Genel olarak bu "Inline Stiller" denilen şeyler, bir sayfa içinde belirli alanların özel olarak biçimlendirilmesi gerektiğinde mantıklıdır. Bununla birlikte, genellikle bu tür doğrudan biçimlendirme şeklini kaçınmalısınız çünkü HTML kodu bundan dolayı karışık hale gelir.
Başlık alanında merkezi definisyon
HTML dosyasının kafa bölümünde merkezi bir stil sayfası tanımlayabilirsiniz. Bu dosya için geçerli olacak tüm stiller burada tanımlanır.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Bu seçeneğin avantajı: Inline seçeneğine kıyasla tanımlanan biçimler belge içinde birden çok kez kullanılabilir. Önceki örnekte CSS sınıfı text tanımlandı. (Kullanılan seçiciler hakkında ayrıntılı bilgiler bir sonraki öğretide verilecektir). Bu sınıf daha sonra belgede istediğiniz kadar kullanılabilir.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Bu tanım, doğrudan biçimlendirme ile karşılaştırıldığında çok daha hızlı değişiklik yapmayı sağlar.
CSS Talimatlarını Hariciye Çıkarma
CSS tanımının en pratik şekli, stilleri harici bir dosyaya taşımaktır. Bu şekilde istediğiniz kadar HTML dosyası aynı CSS dosyasına erişebilir. Bu sayede projeye ait tüm dosyaların birbirine uygun bir biçimde biçimlendirilmesi kolayca mümkün olur. Tüm sayfalara etki edecek sonradan yapılacak değişiklikler bu şekilde sorunsuzca gerçekleştirilebilir.
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTML dosyasının başında link etiketi tanımlanır. link içinde önce rel="stylesheet" öznitelik-değer kombinasyonu verilir. Ardından type="text/css" gelir. href özniteliği ile ilgili CSS dosyası atanır. Burada - resim eklerken olduğu gibi - doğru dizin yolunu belirttiğinizden emin olun. Bu örnekte, styles.css CSS dosyasının, etikeli HTML dosyasının kendisi ile aynı seviyedeki css dizininde olduğunu varsaydım.
Referans verilen CSS dosyası, css uzantılı normal bir metin dosyasıdır. Harici CSS dosyasında ilgili CSS talimatları tanımlanır.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Gösterilen bağlantı varyantına alternatif olarak Stil Sayfaları da içe aktarılabilir. CSS talimatları yine harici bir dosyada bulunur. Bunun için aşağıdaki sözdizimi kullanılır:
<style type="text/css">
@import url("css/styles.css");
</style>
Parantez içinde içe aktarılacak CSS dosyasının yolunu belirtiriz. Bu arada @import, CSS sözdizimi olduğundan CSS dosyaları içinde de kullanılabilir. Bu sayede bir Stil Sayfasından diğer Stil Sayfalarını çağırmak mümkün olur, bu da Stil Sayfalarının daha iyi bir düzenlenmesine olanak sağlar.
Şimdi akla şu soru geliyor, link mi yoksa @import mi kullanmalıyız. Genel olarak ben linki tercih ederim, çünkü bu seçenek daha hızlıdır ve dolayısıyla sayfanın performansı daha iyidir.
Ortam Uygunluğu Stil Sayfaları
Farklı ortamlar için CSS sayfaları tanımlamak mümkündür; örneğin yazıcılar veya ekranlar için. Bunun için media niteliği kullanılır. Virgülle ayrılmış birden fazla ortama da Stil Sayfası atanabilir.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Bu durumda iki Stil Sayfası çağrıldı, biri ekran için diğeri ise sayfa yazdırıldığında kullanılmak üzere. druck.css CSS dosyası, tarayıcının yazdırma işlevi çağrıldığında yüklenir. Genel olarak aşağıdaki media değerleri kullanılabilir:
• all – Tüm çıkış ortamları için geçerlidir.
• aural – CSS dosyası sesli çıkış sistemleri için kullanılır.
• braille – Dokunsal geribildirimli Braille yazıcılar için tasarlanmış CSS dosyasıdır.
• embossed – Braille sayfa yazıcılarını hedefler.
• handheld – Elde taşınan cihazlar için kullanılır.
• print – CSS dosyası kağıda yazdırmak için geçerlidir. Tarayıcılar, yazdırma işlevi çağrıldığında otomatik olarak bu dosyaya başvurmalıdır.
• projection – Yansıtılan sunumlar için tasarlanmıştır.
• screen – Ekran gösterisi için tasarlanmıştır.
• tty – Sabit karakter döşeme kullanan medya için geçerlidir. Örneğin teletip ve terminal cihazları olabilir.
• tv – TV benzeri cihazları hedefler. Bu durumda cihazların düşük çözünürlüğe sahip olduğu ve sınırlı kaydırma özelliğine sahip oldukları varsayılır.
Gösterilen link öğesiyle HTML sözdiziminin yanı sıra özel CSS varyantları da bulunmaktadır. Bunlar @import veya @media kullanımını içerir.
<style type="text/css">
@media screen, projection {
/* Ekran tarafı formatlar */
}
@media print {
/* Yazdırma tarafı formatlar */
}
</style>
style öğesi içinde @media üzerinden belirli bir çıkış ortamı için format tanımlarız. Bunun için @media'nın arkasına, virgülle ayrılmış olarak, yukarıda tanımlanan medya türlerinden biri yazılmalıdır. Birden fazla ortam türü arasına virgülle ayrılarak yazılmalıdır.
