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 bold
italik italik
strong <strong>strong</strong>
emphisize emphisize
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
H1H2.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">

H1H2H3 { 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
H1H2.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.

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;
}

H3H4H5 {
color : Teal;
}

H1H2 {
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%;
}