CSS (Style) nedir , ne işe yarar?
Stil (style) Nedir?
Web sayfalarının biçimidir.
Şimdiye kadar web sayfalarımızı biçimlendirmek için HTML damgalarını kullandık. Bu işi iki yöntemle yapabiliyorduk.
HTML Damgaları İle Gerel Stil Yaratma
HTML Damgaları İle Yerel Stil Yaratma
HTML Damgaları İle Genel Stil Yaratma
Bütün web sayfasında geçerli olmasını istediğimiz font tipi, font rengi, zemin rengi, link renkleri vb nitelemeleri <BODY ... > içinde yaptığımızı biliyoruz.
Örnek
<BODY color="blue" bgcolor="#FF0000" > ... <BODY ... >
nitelemesi bütün web sayfasının zemin rengini kırmızı, harf rengini mavi yapar. Ne var ki, bu tür genellemeler, çoğunlukla web sayfasının tekdüze olmasına neden olur. Zarif olmaktan uzak bu tür sayfaların, kullanıcının ilgisini çok çekmeyeceği açıktır. Bu nedenle biçimlendirmeyi gerektiğinde genel gerektiğinde yerel yapabilmeliyiz.
HTML Damgaları İle Yerel Stil Yaratma
<BODY ... > içinde yapılan genel stiller yerine istenen yerlerde farklı biçimler yaratmanın bir yoludur.
Örnek
Görüntü HTML Kodları
bold <b>bold</b>
italik <i>italik</i>
strong <strong>strong</strong>
emphisize <em>emphisize</em>
pre <pre>pre</pre>
abc <font color="Blue" face="Times New Roman"></font>abc
Bu yöntem, <BODY ... > içinde yapılan genel stillerden daha kullanışlı olmakla birlikte oldukça zaman alıcı ve yorucu bir iştir. Daha kötüsü, yüzlerce web sayfamız olduğunda, bu sayfalarda biçim değişikliği yapmak hemen hemen olanaksız hale gelir.
CSS dili bu zorlukları aşmak için yaratılmıştır. Önce bu kısaltmanın ne olduğunu açıklayalım.
CSS
Cascading Style Sheets.
CSS web dökümanlarını biçimlendiren etkili bir dildir. HTML nin hantallığını büyük ölçüde yokeder. İstenirse web dökümanı içinde seçilen bir yere, istenirse bütün web sayfasına, istenirse bir çok web sayfasına biçim verebilir. Bu nedenle, web tasarımcılarının vazgeçemeyeceği araçlardan birisi olmuştur.
CSS 1 ve CSS 2 tanımlamaları diye ikiye ayrılan bu dilin her kodunu bütün tarayıcılar (browser) aynı şekilde algılamayabilir. Ama biz burada, başlıca biçimlendirme kodlarını ele alacağız. Ayrıntılar için, CSS dökümanlarına bakılabilir.
CSS İle Stil Yaratma Yöntemleri
HTML Seçicileri İle Stil Yaratma
class Seçicisi İle Stil Yaratma
id Seçicisi İle Stil Yaratma
CSS Dosyaları İle Dış Stil Yaratma
HTML Seçicileri İle Stil Yaratma
Web dökümanında
BODY , H1, ... , H5 , P , i , B , OL , TD , A , div
gibi damgalarla seçilen yerleri
<STYLE TYPE="text/css">
...
...
</STYLE>
içinde biçimlendirebiliriz. Bu kodlar web dökümanının
<HEAD>
...
...
</HEAD>
bölümü içine yazılır. Bunu bir örnekle gösterelim:
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
i {color: #FF5500 ;
text-decoration: underline;
font-family: Courier}
P { background-color: #00FFFF ;
font-family: Times New Roman;
font-size:11pt ;
text-align:justify}
B { color: #CC6633 ;
font-family: Arial}
</STYLE>
</HEAD>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 1
Hypertexlink Biçimlendirme
Linkleri biçimlendirmek için CSS bize geniş olanaklar sağlar. Linkin renginin, font tipinin, büyüklüğünün vb görünümlerinin ziyaretten önce, ziyaretten sonra, ziyaret için tıklandığında ve mouse üzerinde iken nasıl olacağını belirleyebiliriz. Linkin yapıldığı yerdeki görüntüye zarif bir uyum sağlayabilmesi için bu biçimlendirme önem taşır.
A:link Ziyaretten önce
A:visited Ziyaretten sonra
A:hover Mouse üzerinde gezinirken
A:active Ziyaret için tıklandığında
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
A:link { color : #0000FF; text-decoration:underline; font-family:Verdana}
A:visited { color : #FF00FF }
A:hover { color : #00CCFF ; font-size:14pt}
A:active { color : #FF0000 }
</STYLE>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 2
Class Seçicisi İle Stil Yaratma
Web dökümanında farklı yerlerde olan ama bir sınıf içine almayı istediğimiz yerleri CLASS="class-adı" ile belirleriz. Sonra bu sınıfa giren yerlerin hepsini <STYLE> damgası içinde bir seferde biçimlendirebiliriz.
Class seçimi için iki yöntem izlenebilir:
1.Yöntem
H1,H2,...,H5, P, DIV vb bir HTML damgalarından biri ile seçilmiş bir ya da daha çok bölgeyi bir class olarak düşünebiliriz. Aşağıdaki örnekte
<P class="soru"> ... </p>
arasında kalan metin "soru" adıyla adlandırılan class'a aittir. Dolayısıyla, .soru class'ı için yapılacak biçimlendirme ile etkilenecektir.
<p class="soru">
MD-Uzun yıllar matematiğe emek vermişsiniz. İlk zamanlarınızla şimdiki konumunuz arasında neleri aştınız? Neler değişti? Hayal kırıklığına uğradınız mı?
</p>
2.Yöntem
Web dökümanında istenilen yerleri
<SPAN CLASS="class-adı">...</SPAN>
damgası içerisine alıp hepsine bir class adı verebiliriz.
<span class="cevap">
TK- Matematik, herkese, usavurma dediğimiz doğru düşünme becerisini kazandırır. Az ve öz konuşma alışkanlığı verir. Bir siyasetçi ya da bir toplumbilimci iki saat konuşup hiç bir şey söylemeyebilir. Ama bir matematikçi hiç bir (doğru) şey söylemeden iki dakika bile konuşamaz. Bunun yanında, matematikçi araştırmacıdır. Önüne gelen bir konunun özünü derinlemesine öğrenmeden, o konuda konuşamaz. Bu arada, ayrıca, doğu kültürü ile batı kültürü arasındaki önemli bir ayrıma değinmek gerekir. Doğu kültüründe, otoriteye inanmak esastır. Otoritenin düşünceleri, öğretileri, yargıları, buyrukları kesindir. Üstünde tartışılamaz; ona ancak biad edilir. Ortaçağ kilisesinin egemenliği de böyle kuruldu. Ama, Rönesanstan sonra, avrupada insan yeniden düşünmeye, doğruyu yanlışı sorgulamaya başladı. Doğudakiler inançta, kültürde bunu başaramadılar. Bu gün eğitimli kişilerimiz bile, bir konuyu asıl kaynağından araştırmak yerine, "bir bilenin dediğine inanmak" yöntemini izliyorlar. Kültürümüze sinen bu alışkanlık çok kötüdür; hızla değiştirmek zorundayız. Bunu ancak eğitim sistemimizle başarabiliriz. Öğrenmeyi, düşünmeyi, sorgulamayı öğretmenin, bunu kültürümüzün bir parçası haline getirmenin en iyi aracı matematik öğretimidir. Çünkü, matematik bir şeye inanmanızı istemez, onu sorgular, ispat eder.
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1,H2,H3 { color:red;
font-family:Arial;
}
P { font-family:Arial ;
text-decoration:none;
}
.soru { margin-left:10% ;
color:"#0000FF" ;
text-decoration:italic
}
.cevap {
background-color : Aqua;
font-family : "Times New Roman", Times, serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 3
id Seçicisi İle Stil Yaratma
Web dökümanında farklı yerlerde olan ama bir sınıf içine almayı istediğimiz yerleri id="id-adı" ile belirleriz. Sonra bu sınıfa giren yerlerin hepsini <STYLE> damgası içinde bir seferde biçimlendirebiliriz. id sınıflandırması tamamen claass sınıflandırmasına benzer. Yalnızca CSS tanımında (.) yerine (#) simgesi kullanılır.
Class seçimi için iki yöntem izlenebilir:
1.Yöntem
H1,H2,...,H5, P, DIV vb bir HTML damgalarından biri ile seçilmiş bir ya da daha çok bölgeyi bir sınıf olarak düşünüp bir id adı verebiliriz. Aşağıdaki örnekte
<P id="quest"> ... </p>
arasında kalan metin "quest" adıyla adlandırılan id sınıfına aittir. Dolayısıyla, #quest için yapılacak biçimlendirme ile etkilenecektir.
<p id="quest">
MD- Matematiğe ilgiyi artırmak için neler yapılabilir?
</p>
2.Yöntem
Web dökümanında istenilen yerleri
<SPAN id="id-adı">...</SPAN>
damgası içerisine alıp hepsine bir id-adı verebiliriz.
<span id="ans">
TK- Son 30 yılda Türkiye'de çok para kazanmak, köşeyi hızla dönmek insanların birincil hedefi oldu. İnsanlar para kazansınlar; buna bir diyeceğim yok. Çok para kazanmak da insanları mutlu edebilir. Ama çok para kazanmak, mutluluğun tek yolu değildir; hatta bazan hiç değildir. Sanatla uğraşmak, bilimle uğraşmak, bir şey üretmek, insanlığa yararlı bir eser bırakmak gibi işler de en az zengin olmanın insana vereceği kadar huzur verir. Hattâ daha fazlasını verebilir. Örneğin, Gauss'un zamanında yaşayan çok zengin insanlar vardı. Hiç birimiz o zenginlerin adlarını bile bilmiyoruz. Ama Gauss'u hepimiz biliyoruz. Adını heyecanla anıyoruz. Böyle biri olmayı, zengin olmaya kim yeğlemez!
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#quest { margin-left:10% ;
color:"#0000FF" ;
text-decoration:italic
}
#ans {
background-color : Aqua;
font-family : "Times New Roman", Times, serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 3
CSS Dosyaları İle Dış Stil Yaratma
CSS 'in en etkin olduğu yer dış stillerdir. Yüzlerce web sayfanız olduğunu düşünün. Bu sayfalarda istediğiniz yerlerde istediğiniz biçimi yaratmak için tek bir komut vermek nasıl bir duygudur. Sakın, kendinizi bir orduyu yöneten bir komutan gibi hissetmeyiniz. Ama, web sayfalarınıza kesinlikle hükmedebileceksiniz.
Bunun için yapmanız gereken tek şey, bir stil CSS dosyası yaratmaktır. CSS dosyalarına istediğiniz adları verebilirsiniz, ama uzantıları daima .css olmalıdır. Bir CSS dosyası içine web dökümanı ile ilgili her türlü biçimlendirme komutunu yazabilirsiniz. Çok syıda olan bu komutların tam listesini ilgili kaynaklardan öğrenebilirsiniz. Bunun için en yeni ve sağlam kaynakları Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yap sayfasından görebilirsiniz.
Varsayalım ki, bütün e-dersleri benzer biçemlere sokmak için ders.css adıyla bir CSS dosyası hazırladınız. Bu dosyada tanımladığınız biçemlerin etkili olmasını istediğiniz her web dökümanına ders.css dosyasını çağırmanız yetecektir.
Bu çağırma işlemini yapan kod şöyledir:
<link rel="stylesheet" type="text/css" href="ders.css">
Bu kodlar, web dökümanının <HEAD> ... </HEAD> bölümü içine yazılmalıdır. Eğer, CSS dosyası ile web dökümanı aynı dizinde değillerse, CSS dosyası için URL yazılmalıdır.
Biçem yaratan daha çok komut görmek için aşağıdaki dökümana bakabilirsiniz.
a href="./apb/apb.htm"
Örnek olarak, bu derse biçem veren ders.css adlı dosyanın içeriği aşağıda yazılmıştır. Farklı amaçlar için farklı CSS dosyaları hazırlamak uygun olur. Böylece, birbirine benzer web dökümanları aynı CSS dosyasıyla biçimlenebilirler. Daha önemlisi, web sayfalarınızda yapacağınız biçem değişiklikleri için, yalnızca CSS dosyasında ilgili komutları değiştirmek yetecektir.
BODY {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
margin-left: 2%;
margin-right: 2%;
background-color: #F0EBD7;
background-attachment : inherit;
background-image : url(../images/zemin3.jpg);
}
BLOCKQUOTE {
font-family : "Times New Roman", Times, serif;
font-size : xx-small;
}
DT{
font-size: 90%;
color: Maroon;
}
H3,H4,H5 {
color : Teal;
}
H1,H2 {
text-align: center;
color : #ff0000;
}
P {
top: 1%;
TEXT-ALIGN: justify;
}
PRE{
font-size : 100%;
color: Blue;
font : bold;
}
TD{
font-size : 90%;
}
OL {
top: 3%;
COLOR: #000080
}
UL {
marks: none;
top: 3%;
COLOR: #000080;
list-style: none; }
}
LI {
margin-top: 2%;
TEXT-ALIGN: left;
margin : 2%;
}
INPUT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana
}
SELECT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana
}
A:link {COLOR: "#0000FF"; TEXT-DECORATION: none;}
A:visited { COLOR: "#550066"; TEXT-DECORATION: none; }
A:hover { COLOR: "#FF0000"; }
A:active { COLOR: "#D0A0A0"; }
HR {
color: "#D0A0A0";
width: 100%;
padding: 2%;
}