CSS(Cascading Style Sheet - Basamaklı Stil Dosyası)
CSS, HTML taglarına(etiektlerine)stil özellikleri eklemek, onları şekillendirmek ve tag içeriğini daha hassas bir şekilde web sayfasında konumlandırmak için kullanır. CSS öselliklerini araştırdığınıza göre html taglarının, web sayfasının tasarımında tasarımcının isteklerine karşılık vermekte yetersiz kaldığını farketmişsinizdir. Önce bu durumu şöyle özetleyelim. Bir html elemanına biçim verelim mesela bir yazının rengi, fontu, boyutu gibi özelliklerini html ile değiştirelim.Bu durumda;
< font >
etiketinin içine <font face="arial" size="3" color="red">ÖRNEK METİN</font> şeklinde bir kodlama yapmak gerekir. Bu kodlamanın sonucu aşağıdaki gibi olur.
ÖRNEK METİN
Bir veya iki elemanın belki on tanesinin özelliğini bu şekilde değiştirebilirsiniz. Ancak web siteleri onlarca hatta yüzlerce sayfadan oluşur. Tüm sayfaların tek tek incelenmesi gerekli değişikliklerin birer birer yapılması ne kadar uzun sürer siz düşünün. kodlama yapmaktan tasarım yapmaya fırsatınız kalmaz. İlk insanları düşünün, onların; avcılk, toplayıcılık, yırtıcı hayvanlar derken gelişmeye fırsatları olmuyordu. Vahşi hayvanlara yem olmdan avcılık yapmak, ya da sürekli yiyecek bişeyler aramak; maaş yok sigorta yok, habire göç; düzenli ev hayatı yok. Ne zamanki tarımı ve tarım aletlerini geliştirdiler, o zaman insanlık az da olsa rahata erdi. Karnı her daim doyar oldu, yıtıcı hayvanlarla muhatap olma derdi bitti, hatta avcılık biR spor faaliyeti olarak yapılır oldu. "Web tasarımı yapcam!!! tasarımcı olcam!" diyerek yola çıkan herkes bu mağara adamı devrinden geçer (genelde). Sonrasında css ile tanışırsınız. Artık öyle her elemana ayrı stil uygula; acaba hangi eleman nasıl biçimlendiriyodu diye düşün; stilini değiştireceğin elemanı kodlar arasında araya araya şaşı ol yoluna gideme yok!!! CSS var :))
CSS' yi ve onun olanaklarını keşfettiğin zaman tarımı bulmuş mağara adamı kadar sen de yeni bir hayata gözlerini açarsın yeniden doğarsın. CSS ile artık elemanlara stil vemek çok kolay. Tüm elemanları tek bir css sayfasından yönetmek.Birkaç kod değiştirerek tüm sayfaları altüst etmek senin elinde!! Güüüç sende artııık!!! :))) Neyse.. Konu kodlar ve kodlama olduğunda lafı dolandırmakta her zaman fayda var. Çünkü ne kadar kolaylık getirise getirsin kodlarla uğraşmak insanı bunaltır. Öğrenmek ise daha sıkıcıdır. İşin en güzel tarafı öğrendiğini uygulamak ve çalıştığını görmek... Her şeyi doğru yaptığın zaman karşında senin eserin olan bir web sitesi adeta yaşayan bir organizma gibi arz-ı endam eder. Sen de Dr. Frankestein edasıyla isterik kahkahalara garkolursun. Peki nasıl olacak bu iş CSS yi nasıl kullanıcaz? CSS Siteye nasıl eklenir? İşte size cevabı:
CSS, html sayfasına genelde üç şekilde etki ettirilir:
1. HTML taglarının içine yazarak: Bazı durumlarda sadece bir iki özel elemanın biçimini değiştirmek isteyebiliriz. bu durumda HTML tagının içine style="" şeklinde ufak bir kodlama yaparız ve istediğmiz biçimlendirme gerçekleşmiş olur. Mesela:
<h3>ÖRNEK 2</h3> CSS'siz hali
ÖRNEK 2
<h3 style="font-size:50px; font-style:italic; color:green; text-decoration:underline;">ÖRNEK 2</h3> şeklinde bir kodlama yaptığımızda ise;
ÖRNEK 2
Gördüğünüz gibi CSS, <h3> tagının özelliklerini tamamen değiştirmiş, ona yeni bir nitelik kazandırmıştır. Demin de deiğim gibi bu tip kolamayı sadece sayfada, sayfa genelinden ayrı olarak özeli bir elemana biçim verirken kullanın.
2. <style></style> tagını kullanmak: Web sayfanızın <head></head> tagları arasına, bu etiketin içine yazarak biçimlendirme yapılır. Genel kullanımı şu şekildedir:
<head>
<style type="text/css">
h3 {
font-size:50px;
font-style:italic;
color:green;
text-decoration:underline;
}
</style>
</head >
Burada <h3> tagına stil özellikleri verilmiştir. <h3> tagını kullanarak etiketlendirdiğiniz yazı elemanları baştan ayarlamış olduğumuz özelliklerle biçimlendirilir.
3.Harici CSS dosyası kullanmak:Web siteleri birbirinin aynı öselliklerde biçimlendirilmiş onlarca hatta yüzlerce sayfa içerir. Daha büyük sitelerde bu sayı binleri bulur. Bu durumda okadar sayfayı biçimlendirmenin ya da var olan biçiminde değişiklik yapmanın kopyala-yapıştırdan daha pratik bir yolu olmalı diyorsanız, haklısınız ;olmalı ve oldu da!! Harici CSS dosyası oluşturmak ve bunu etki etmesini istediğimiz sayfalara tek bir bağlantı linki ile bağlamak.Nasıl mı? Şöyle:
Wordpad gibi basit bir metin editörü kullanarak bir text dosyası açılır ve web sayfamızı biçimlendiren CSS kodları bu dosyanın içine kopyala-yapıştır yapılır. Sonra da sonu .css uzantılı (mesela harici.css) bir dosya şeklinde kaydedilir. Bundan sonra yapılacak tek iş bir bağlantı linki ile css dosyanızı HTML sayfanıza bağlamak olacak işte bağlantı linki:
<head>
.
.
<link href="harici.css" rel="stylesheet" type="text/css" />
.
.
</head>
Burada burada CSS dosyamızın bağlantı adresini doğru vermeyi ihmal etmiyoruz!!
Tüm bunlar haricinde bir yöntem daha var @import yöntemi uygulaması da şu şekilde
<head>
<style type="text/css">
@import "harici.css";
}
</style>
</ head >
tarayıcıları tarafından. Ayrıca CSS dosyalarımızda @import özelligini
kullanarak devamlı kullandıgımız kodları css dosyamıza harici olarak
ekleyebiliriz böylelikle tekrarlardan kurtulmus oluruz (Fatih HAYRİOĞLU)
Şimdilik hepsi bu kadar. Biliyorum sıkıldınız ben de konuyu çok uzattım ama laf lafı açıyor naaparsın mağara adamlarından girdiiiik CSS den çıkdık mı HAAAYIIIRRR!! CSS bundan çok daha uzun ve derin bir konu. Buraya kadar sadece CSS'nin avantajlarından ve sayfaya eklenmesinden kısaca bahsettim daha bunun biçimlendirmesi vaaarr, konumlandırması varrr!! Onları da bir dahaki sefere artık. Umarım canınızı sıkmamışımdır. Her ne kadar sürç ü lisan ettiysek affola !!!
Hiç yorum yok:
Yorum Gönder