 |
|
 |
Stil Nedir? |
CSS Nedir? |
|
Yerel Stil |
Genel Stil |
|
id |
class |
|
Hypertextlink Biçimlendirme |
CSS-link |
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.
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.
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.
<BODY ... > içinde yapılan genel stiller yerine istenen yerlerde farklı biçimler yaratmanın bir yoludur.
| 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 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.
Her HTML takısı içine onun biçemini belirten bir stil kodu yazmak, yapılabilecek en kötü iştir. Bu yöntem çok özel hallerde kullanılmalıdır. Örneğin, belli bir paragrafın 3em içeriden başlamasını istiyorsak, aşağıdaki gibi P takısına gömülü stili yazarız:
<p style="text-indent: 3em;">... </p>
H1 başlıklarının kırmızı renkli olmasını istiyorsak aşağıdaki gibi H1 takısına gömülü stili yazarız:
<h1 style="color: #ff0000;">... </h1>
Web dökümanında
gibi damgalarla seçilen yerleri tek tek biçimlendirmek yerine, onları HEAD bölümüne yazacağımız bir kodla biçimlendirebiliriz. Örneğin bütün paragrafların 3em içeriden başlamasını istiyorsak, HEAD bölümüne
<head>
<title>İlk css sayfam</title>
<style type="text/css">
<!--
p { text-indent: 3em; }
--></style>
</head>
<STYLE TYPE="text/css"> ... ... </STYLE>
Bu kodlar web dökümanının
<HEAD> ... ... </HEAD>
bölümü içine yazılır. Bunu bir örnekle gösterelim:
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 1Linkleri 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 |
| <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.
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:
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
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>
Web dökümanında istenilen yerleri
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>
<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.
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:
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
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>
Web dökümanında istenilen yerleri
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>
<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.
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ı http://www.w3.org 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.
Ö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%;
}