CSS Kullanım Alanları
Daha önceki yazımızda oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır:
- Yerel kullanım alanı
- Global kullanım alanı
- Bağlantılı kullanım alanı
Yerel Kullanım Alanı
Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım şeklinde CSS direkt etiketin “style” öz niteliği kullanılarak uygulanır.
Örnek: p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım;
şeklinde olacaktır.
Yerel, bir başka deyişle etiket içi CSS kullanımı, tek tek her etiketin içine yazılması gerektiği
ve yönetiminin zor olması sebebiyle çok gerekmedikçe önerilmemektedir.
Global Kullanım Alanı
Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın
<head> kısmında, <style>…</style> etiketi içinde yer alır. Kısmen de olsa HTML ve CSS kodumuzu
birbirinden ayırmış oluruz.
Örnek: h3 etiketine uygulanmak üzere yazı rengini kırmızı, yazı büyüklüğünü 12pt ve sola hizalı yapalım;
Görüldüğü üzere stilimizi <style> etiketi içinde <style type=”text/css” > …CSS…</style> yer alacak şeklinde yazdık. Şimdi de bunu <head>…</head> etiketleri arasına aşağıdaki gibi yerleştirmemiz gerekiyor.
Global (dahili) olarak yerleştirdiğimiz CSS kodumuz sadece bu sayfayı etkileyecektir. Başka bir sayfada h3 etiketi normal görevini yapacaktır.
Global kullanım alanına sahip olan stil şablonu muzda seçici olarak etiket seçici kullanıldığını görmekteyiz. Şimdi de kullanım yerine müdahale etmeden seçici tipini değiştirelim. Seçimimizi, istediğimiz başlıkların stilini değiştirmeye yönelik bir stil şablonu olarak tasarladığımız için aynı sayfada birden çok kez kullanılma olasılığı yüksektir. Bu sebeple ID seçici değil de sınıf (class) seçici seçmemiz gerekmektedir.
İsim olarak rakamla başlamayan, Türkçe karakter içermeyen ve karışıklığa yol açmaması için var olan etiket isimlerinden olmayan bir isim belirleyelim. Örneğin; seçtiğimiz isim “baslik” olsun ve tabii ki bunun bir sınıf seçicisi olduğunu belirtmek için başında nokta işareti olacak şekilde “.baslik” yazmalıyız. Uygulama aşağıda görülmektedir.
Bağlantılı Kullanım Alanı
Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi “.css” uzantılı stil şablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda <link> etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmış oluruz. Sayfalarımızın okunaklı lığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir. Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil şablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak “CSS” veya “styles” isimlerini tercih edebilirsiniz. Bu klasörler içinde yer alan .css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluşturulmuş tüm stilleri sayfamıza uygulayabiliriz.
Örnek olarak stilim.css isminde harici bir stil şablonu (CSS) dosyası oluşturalım.Oluşturduğumuz dosyanın içine bir önceki örnekte yaptığımız stilin kodlarını yazalım.
stilim.css dosyasının içeriği;
Bu örnekte sadece sınıf (class) seçici kullanılmıştır. İstenildiği takdirde her türlü seçici türünü dosya içine yazabiliriz. Önemli olan dosya içinde sadece stil şablonu formatına ait kodların yer almasıdır. Şimdi bu dosyayı sayfamıza <link> etiketini kullanarak bağlayalım;
Dikkat etmemiz gereken nokta css dosyasını çağırdığımız sayfanın bulunduğu konumdan, css dosyasının bulunduğu konuma dosya yolunun tam olarak yazılmasıdır.
Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve index sayfasından style dosyasında bulunan stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır.
<link href=”styles/stilim.css” rel=”stylesheet” type=”text/css”>
Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve template dosyası içindeki bir sayfadan style dosyasında bulunun stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır.
<link href=”../styles/stilim.css” rel=”stylesheet” type=”text/css”>
Yorum gönder