Stil Sayfaları (CSS) 1 - CSS Ekleme Yöntemleri
4.1. CSS Ekleme Yöntemleri
HTML bir web sitesinin vücudunu oluşturur. CSS ise o vücudun üzerindeki elbiseleri, aksesuarları
ve makyajı oluşturur. HTML kodları kullanılarak hazırlanan web sitelerinde, sayfa tasarımını
özelleştirmek için birtakım kodlar bulunmaktadır. HTML kodları günümüzde kullanılan web sitelerini
tasarlamak için tek başına yetersizdir. Sayfa tasarımını kolayca özelleştirmek, görsel açıdan
zenginleştirmek ve farklı ekran çözünürlüklerine sahip cihazlara uygun hâle getirmek için web sayfaları
hazırlanırken CSS kullanmak gerekmektedir (Görsel 4.1).
 |
| Görsel 4.1: CSS ekleme |
Bir elemanı görsel olarak özelleştirmek için o elemanın değiştirilecek özelliğine tasarım için uygun
değer atanır. Görsel 4.2’de görülen CSS kodunda elemanın yazı rengi beyaz, genişliği 1024
piksel olarak değiştirilmiştir.
 |
| Görsel 4.2: CSS kod yapısı |
CSS’yi web sayfalarına eklemek için farklı yöntemler kullanılmaktadır.
4.1.1. Satır İçi CSS Ekleme
olarak CSS kodları girilir. Sadece CSS kodunun eklendiği HTML etiketinde stil değişiklikleri görülür.
<h1 style="background-color: lightblue;">CSS öğreniyorum</h1>
Yukarıdaki örnek kodun çıktısı Görsel 4.3’teki gibidir.
 |
| Görsel 4.3: Satır içi CSS |
Uygulama
4.4’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.4: Renkli satırlar |
2. Adım: Paragraf elemanının arka plan rengini kırmızı ve yazı rengini beyaz yapınız.
Korkma, sönmez bu şafaklarda yüzen al sancak;<br>
Sönmeden yurdumun üstünde tüten en son ocak.<br>
O benim milletimin yıldızıdır, parlayacak;<br>
O benimdir, o benim milletimindir ancak.<br>
</p>
Not: Bir elemanın arka plan rengi background-color özelliğine renk değeri atanarak değiştirilmektedir.
Sıra Sizde
ve arka plan rengi yeşil, üçüncü satırda yazı boyutu 10px ve arka plan rengi mavi
olan web sayfasını Görsel 4.4’te görüldüğü gibi tasarlayınız.
4.1.2. Sayfa İçi CSS Ekleme
HTML kodlarının <head> </head> bölümüne <style> </style> etiketi içinde CSS ekleme yöntemidir.
Yapılan stil değişiklikleri sadece tek sayfa için geçerlidir.
<html>
<head>
<style>
p{
background-color: red;
color:white;
font-size:20px;
}
</style>
</head>
<body>
<p>Bu paragrafın arka plan rengi kırmızı, yazı rengi beyaz, yazı
boyutu 20 pikseldir.
</p>
</body>
</html>
Örnek kodun çıktısı Görsel 4.5’teki gibidir. Sayfada başka <p> etiketleri kullanıldığında, kullanılan <p> etiketlerinin de özellikleri değişecektir.
 |
| Görsel 4.5: Dâhilî CSS |
Sıra Sizde
120 piksel ve yüksekliğini 80 piksel yapınız.
<img src="galeri1.JPG">
<img src="galeri2.JPG">
<img src="galeri3.JPG">
<img src="galeri4.JPG">
<img src="galeri5.JPG">
</body>
Sıra Sizde
Üç adet “HTML” sayfası oluşturunuz ve HTML sayfalarının arka plan rengini kırmızı yapınız.
4.1.3. Sayfa Dışı (Haricî) CSS Ekleme
Web sayfasına uzantısı “css” olan bir stil dosyasını bağlayarak CSS ekleme yöntemidir. Web tasarımcıların en çok tercih ettiği CSS ekleme yöntemidir. Tüm web sayfalarındaki stil özelliklerini tek bir merkezden kontrol etmek için kullanılır. Örneğin, Şema 4.1’de görüldüğü gibi dört farklı web sayfasından oluşan kişisel bir web sitesi oluşturmak istenildiğinde tüm sayfaların yazı tiplerini, resim boyutlarını, arka plan renklerini vs. değiştirmek, web sitesinin tasarımını güncellemek, diğer yöntemlerle oldukça karmaşık olacak ve zaman alacaktır.
 |
| Şema 4.1: Sayfa dışı CSS ekleme |
Sayfa dışı CSS ekleme yöntemi ile sadece aşağıdaki kodu web sayfalarının <head> bölümüne yazarak stil.css dosyasını bağlamak yeterli olacaktır.
<link rel="stylesheet" href="stil.css" />
Örnek kodda sayfa dışı “css” uzantılı bir dosya bağlantısı yapılmıştır.
<link> Etiketi: Web sayfasının başka dosyalarla bağlantı kurması için kullanılır.
rel Özelliği: Bağlantı kurulacak sayfa ile <link> etiketinin kullanıldığı sayfa arasında nasıl bir ilişki bulunduğunu belirtir. Yukarıdaki örnek kodda iki sayfa arasındaki bağlantı ilişkisinin stil sayfası şeklinde olacağı belirtilmiştir.
href Özelliği: Bağlantı kurulacak sayfanın dosya yolunu belirtir.
Not: Aynı web sayfasına birden fazla “css” uzantılı dosya bağlanabilir. Örneğin: stil.css haricinde stil2.css, stil3.css, ozel.css vb. dosyalar <link> etiketi ile eklenebilir.
Sıra Sizde
Bir adet haricî CSS sayfası ve üç adet “HTML” sayfası oluşturunuz. HTML sayfalarına haricî CSS sayfasını bağlayınız. Haricî CSS sayfasından tüm HTML sayfalarının arka plan rengini kırmızı yapınız. Aynı işlemlerin dâhilî CSS ile yapılmasının avantajları ve dezavantajlarını arkadaşlarınızla tartışınız.
Uygulama
Haricî CSS ekleme yöntemini kullanarak web sayfasında stil değiştirme işlemini yönergeler doğrultusunda gerçekleştiriniz.
1. Adım: KutuAyarlari.css ve ResimAyarlari.css isimlerinde iki adet haricî CSS sayfası ve index.html isminde bir adet “HTML” sayfası oluşturunuz.
2. Adım: index.html sayfasına iki CSS dosyasını da bağlayınız.
3. Adım: index.html sayfasına aşağıdaki kodda olduğu gibi kutular ve metinler ekleyiniz.
<div>
Web sitenize <b>harici CSS</b> sayfaları ekleyerek sayfalarınızı tasarlamak çok kolaylaşmaktadır.
</div>
4. Adım: KutuAyarlari.css dosyasında, aşağıdaki gibi sadece kutulara ait stil özelliklerini değiştirmek için CSS kodları ekleyiniz.
div{font-size:34px; color:white; background-color:purple; }
5. Adım: ResimAyarlari.css dosyasında, aşağıdaki gibi sadece resimlere ait stil özelliklerini değiştirmek için CSS kodları ekleyiniz ve verilen adımlara göre web sayfalarını tasarlayınız.
img{ width: 200px; height: 200px; }
Hiç yorum yok