Rhy
15.Şubat.2014, 12:38
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 tipihttp://www.forumuz.net/images/digersmileyler/virgul.gif font rengihttp://www.forumuz.net/images/digersmileyler/virgul.gif zemin rengihttp://www.forumuz.net/images/digersmileyler/virgul.gif link renkleri vb nitelemeleri <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. > içinde yaptı ımızı biliyoruz.
Örnek
<BODY color="blue" bgcolor="#FF0000" > http://www.forumuz.net/images/digersmileyler/nokta.gif. <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. >
nitelemesi bütün web sayfasının zemin rengini kırmızıhttp://www.forumuz.net/images/digersmileyler/virgul.gif harf rengini mavi yapar. Ne var kihttp://www.forumuz.net/images/digersmileyler/virgul.gif bu tür genellemelerhttp://www.forumuz.net/images/digersmileyler/virgul.gif ço unlukla web sayfasının tekdüze olmasına neden olur. Zarif olmaktan uzak bu tür sayfalarınhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 http://www.forumuz.net/images/digersmileyler/nokta.gif. > 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öntemhttp://www.forumuz.net/images/digersmileyler/virgul.gif <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. > 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ühttp://www.forumuz.net/images/digersmileyler/virgul.gif yüzlerce web sayfamız oldu undahttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 yerehttp://www.forumuz.net/images/digersmileyler/virgul.gif istenirse bütün web sayfasınahttp://www.forumuz.net/images/digersmileyler/virgul.gif istenirse bir çok web sayfasına biçim verebilir. Bu nedenlehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 buradahttp://www.forumuz.net/images/digersmileyler/virgul.gif başlıca biçimlendirme kodlarını ele alaca ız. Ayrıntılar içinhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 http://www.forumuz.net/images/digersmileyler/virgul.gif H1http://www.forumuz.net/images/digersmileyler/virgul.gif http://www.forumuz.net/images/digersmileyler/nokta.gif. http://www.forumuz.net/images/digersmileyler/virgul.gif H5 http://www.forumuz.net/images/digersmileyler/virgul.gif P http://www.forumuz.net/images/digersmileyler/virgul.gif i http://www.forumuz.net/images/digersmileyler/virgul.gif B http://www.forumuz.net/images/digersmileyler/virgul.gif OL http://www.forumuz.net/images/digersmileyler/virgul.gif TD http://www.forumuz.net/images/digersmileyler/virgul.gif A http://www.forumuz.net/images/digersmileyler/virgul.gif div
gibi damgalarla seçilen yerleri
<STYLE TYPE="text/css">
http://www.forumuz.net/images/digersmileyler/nokta.gif.
http://www.forumuz.net/images/digersmileyler/nokta.gif.
</STYLE>
içinde biçimlendirebiliriz. Bu kodlar web dökümanının
<HEAD>
http://www.forumuz.net/images/digersmileyler/nokta.gif.
http://www.forumuz.net/images/digersmileyler/nokta.gif.
</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>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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 rengininhttp://www.forumuz.net/images/digersmileyler/virgul.gif font tipininhttp://www.forumuz.net/images/digersmileyler/virgul.gif büyüklü ünün vb görünümlerinin ziyaretten öncehttp://www.forumuz.net/images/digersmileyler/virgul.gif ziyaretten sonrahttp://www.forumuz.net/images/digersmileyler/virgul.gif 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>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif.http://www.forumuz.net/images/digersmileyler/virgul.gifH5http://www.forumuz.net/images/digersmileyler/virgul.gif Phttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"> http://www.forumuz.net/images/digersmileyler/nokta.gif. </p>
arasında kalan metin "soru" adıyla adlandırılan class'a aittir. Dolayısıylahttp://www.forumuz.net/images/digersmileyler/virgul.gif .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ı">http://www.forumuz.net/images/digersmileyler/nokta.gif.</SPAN>
damgası içerisine alıp hepsine bir class adı verebiliriz.
<span class="cevap">
TK- Matematikhttp://www.forumuz.net/images/digersmileyler/virgul.gif herkesehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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ındahttp://www.forumuz.net/images/digersmileyler/virgul.gif matematikçi araştırmacıdır. Önüne gelen bir konunun özünü derinlemesine ö renmedenhttp://www.forumuz.net/images/digersmileyler/virgul.gif o konuda konuşamaz. Bu aradahttp://www.forumuz.net/images/digersmileyler/virgul.gif ayrıcahttp://www.forumuz.net/images/digersmileyler/virgul.gif do u kültürü ile batı kültürü arasındaki önemli bir ayrıma de inmek gerekir. Do u kültüründehttp://www.forumuz.net/images/digersmileyler/virgul.gif otoriteye inanmak esastır. Otoritenin düşüncelerihttp://www.forumuz.net/images/digersmileyler/virgul.gif ö retilerihttp://www.forumuz.net/images/digersmileyler/virgul.gif yargılarıhttp://www.forumuz.net/images/digersmileyler/virgul.gif buyrukları kesindir. Üstünde tartışılamaz; ona ancak biad edilir. Ortaça kilisesinin egemenli i de böyle kuruldu. Amahttp://www.forumuz.net/images/digersmileyler/virgul.gif Rönesanstan sonrahttp://www.forumuz.net/images/digersmileyler/virgul.gif avrupada insan yeniden düşünmeyehttp://www.forumuz.net/images/digersmileyler/virgul.gif do ruyu yanlışı sorgulamaya başladı. Do udakiler inançtahttp://www.forumuz.net/images/digersmileyler/virgul.gif kültürde bunu başaramadılar. Bu gün e itimli kişilerimiz bilehttp://www.forumuz.net/images/digersmileyler/virgul.gif bir konuyu asıl kayna ından araştırmak yerinehttp://www.forumuz.net/images/digersmileyler/virgul.gif "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. Ö renmeyihttp://www.forumuz.net/images/digersmileyler/virgul.gif düşünmeyihttp://www.forumuz.net/images/digersmileyler/virgul.gif sorgulamayı ö retmeninhttp://www.forumuz.net/images/digersmileyler/virgul.gif bunu kültürümüzün bir parçası haline getirmenin en iyi aracı matematik ö retimidir. Çünkühttp://www.forumuz.net/images/digersmileyler/virgul.gif matematik bir şeye inanmanızı istemezhttp://www.forumuz.net/images/digersmileyler/virgul.gif onu sorgularhttp://www.forumuz.net/images/digersmileyler/virgul.gif ispat eder.
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifH3 { 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"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif.http://www.forumuz.net/images/digersmileyler/virgul.gifH5http://www.forumuz.net/images/digersmileyler/virgul.gif Phttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"> http://www.forumuz.net/images/digersmileyler/nokta.gif. </p>
arasında kalan metin "quest" adıyla adlandırılan id sınıfına aittir. Dolayısıylahttp://www.forumuz.net/images/digersmileyler/virgul.gif #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ı">http://www.forumuz.net/images/digersmileyler/nokta.gif.</SPAN>
damgası içerisine alıp hepsine bir id-adı verebiliriz.
<span id="ans">
TK- Son 30 yılda Türkiye'de çok para kazanmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kazanmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif mutlulu un tek yolu de ildir; hatta bazan hiç de ildir. Sanatla u raşmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif bilimle u raşmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif bir şey üretmekhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 inhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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ıhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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ınhttp://www.forumuz.net/images/digersmileyler/virgul.gif kendinizi bir orduyu yöneten bir komutan gibi hissetmeyiniz. Amahttp://www.forumuz.net/images/digersmileyler/virgul.gif web sayfalarınıza kesinlikle hükmedebileceksiniz.
Bunun için yapmanız gereken tek şeyhttp://www.forumuz.net/images/digersmileyler/virgul.gif bir stil CSS dosyası yaratmaktır. CSS dosyalarına istedi iniz adları verebilirsinizhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kihttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kodlarhttp://www.forumuz.net/images/digersmileyler/virgul.gif web dökümanının <HEAD> http://www.forumuz.net/images/digersmileyler/nokta.gif. </HEAD> bölümü içine yazılmalıdır. E erhttp://www.forumuz.net/images/digersmileyler/virgul.gif CSS dosyası ile web dökümanı aynı dizinde de illersehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 olarakhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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öylecehttp://www.forumuz.net/images/digersmileyler/virgul.gif birbirine benzer web dökümanları aynı CSS dosyasıyla biçimlenebilirler. Daha önemlisihttp://www.forumuz.net/images/digersmileyler/virgul.gif web sayfalarınızda yapaca ınız biçem de işiklikleri içinhttp://www.forumuz.net/images/digersmileyler/virgul.gif yalnızca CSS dosyasında ilgili komutları de iştirmek yetecektir.
BODY {
FONT-FAMILY: Verdanahttp://www.forumuz.net/images/digersmileyler/virgul.gif Arialhttp://www.forumuz.net/images/digersmileyler/virgul.gif Helveticahttp://www.forumuz.net/images/digersmileyler/virgul.gif sans-serif;
font-size: 90%;
margin-left: 2%;
margin-right: 2%;
background-color: #F0EBD7;
background-attachment : inherit;
background-image : url(http://www.forumuz.net/images/digersmileyler/nokta.gif/images/zemin3.jpg);
}
BLOCKQUOTE {
font-family : "Times New Roman"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : xx-small;
}
DT{
font-size: 90%;
color: Maroon;
}
H3http://www.forumuz.net/images/digersmileyler/virgul.gifH4http://www.forumuz.net/images/digersmileyler/virgul.gifH5 {
color : Teal;
}
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2 {
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%;
}
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 tipihttp://www.forumuz.net/images/digersmileyler/virgul.gif font rengihttp://www.forumuz.net/images/digersmileyler/virgul.gif zemin rengihttp://www.forumuz.net/images/digersmileyler/virgul.gif link renkleri vb nitelemeleri <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. > içinde yaptı ımızı biliyoruz.
Örnek
<BODY color="blue" bgcolor="#FF0000" > http://www.forumuz.net/images/digersmileyler/nokta.gif. <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. >
nitelemesi bütün web sayfasının zemin rengini kırmızıhttp://www.forumuz.net/images/digersmileyler/virgul.gif harf rengini mavi yapar. Ne var kihttp://www.forumuz.net/images/digersmileyler/virgul.gif bu tür genellemelerhttp://www.forumuz.net/images/digersmileyler/virgul.gif ço unlukla web sayfasının tekdüze olmasına neden olur. Zarif olmaktan uzak bu tür sayfalarınhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 http://www.forumuz.net/images/digersmileyler/nokta.gif. > 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öntemhttp://www.forumuz.net/images/digersmileyler/virgul.gif <BODY http://www.forumuz.net/images/digersmileyler/nokta.gif. > 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ühttp://www.forumuz.net/images/digersmileyler/virgul.gif yüzlerce web sayfamız oldu undahttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 yerehttp://www.forumuz.net/images/digersmileyler/virgul.gif istenirse bütün web sayfasınahttp://www.forumuz.net/images/digersmileyler/virgul.gif istenirse bir çok web sayfasına biçim verebilir. Bu nedenlehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 buradahttp://www.forumuz.net/images/digersmileyler/virgul.gif başlıca biçimlendirme kodlarını ele alaca ız. Ayrıntılar içinhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 http://www.forumuz.net/images/digersmileyler/virgul.gif H1http://www.forumuz.net/images/digersmileyler/virgul.gif http://www.forumuz.net/images/digersmileyler/nokta.gif. http://www.forumuz.net/images/digersmileyler/virgul.gif H5 http://www.forumuz.net/images/digersmileyler/virgul.gif P http://www.forumuz.net/images/digersmileyler/virgul.gif i http://www.forumuz.net/images/digersmileyler/virgul.gif B http://www.forumuz.net/images/digersmileyler/virgul.gif OL http://www.forumuz.net/images/digersmileyler/virgul.gif TD http://www.forumuz.net/images/digersmileyler/virgul.gif A http://www.forumuz.net/images/digersmileyler/virgul.gif div
gibi damgalarla seçilen yerleri
<STYLE TYPE="text/css">
http://www.forumuz.net/images/digersmileyler/nokta.gif.
http://www.forumuz.net/images/digersmileyler/nokta.gif.
</STYLE>
içinde biçimlendirebiliriz. Bu kodlar web dökümanının
<HEAD>
http://www.forumuz.net/images/digersmileyler/nokta.gif.
http://www.forumuz.net/images/digersmileyler/nokta.gif.
</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>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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 rengininhttp://www.forumuz.net/images/digersmileyler/virgul.gif font tipininhttp://www.forumuz.net/images/digersmileyler/virgul.gif büyüklü ünün vb görünümlerinin ziyaretten öncehttp://www.forumuz.net/images/digersmileyler/virgul.gif ziyaretten sonrahttp://www.forumuz.net/images/digersmileyler/virgul.gif 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>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif.http://www.forumuz.net/images/digersmileyler/virgul.gifH5http://www.forumuz.net/images/digersmileyler/virgul.gif Phttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"> http://www.forumuz.net/images/digersmileyler/nokta.gif. </p>
arasında kalan metin "soru" adıyla adlandırılan class'a aittir. Dolayısıylahttp://www.forumuz.net/images/digersmileyler/virgul.gif .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ı">http://www.forumuz.net/images/digersmileyler/nokta.gif.</SPAN>
damgası içerisine alıp hepsine bir class adı verebiliriz.
<span class="cevap">
TK- Matematikhttp://www.forumuz.net/images/digersmileyler/virgul.gif herkesehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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ındahttp://www.forumuz.net/images/digersmileyler/virgul.gif matematikçi araştırmacıdır. Önüne gelen bir konunun özünü derinlemesine ö renmedenhttp://www.forumuz.net/images/digersmileyler/virgul.gif o konuda konuşamaz. Bu aradahttp://www.forumuz.net/images/digersmileyler/virgul.gif ayrıcahttp://www.forumuz.net/images/digersmileyler/virgul.gif do u kültürü ile batı kültürü arasındaki önemli bir ayrıma de inmek gerekir. Do u kültüründehttp://www.forumuz.net/images/digersmileyler/virgul.gif otoriteye inanmak esastır. Otoritenin düşüncelerihttp://www.forumuz.net/images/digersmileyler/virgul.gif ö retilerihttp://www.forumuz.net/images/digersmileyler/virgul.gif yargılarıhttp://www.forumuz.net/images/digersmileyler/virgul.gif buyrukları kesindir. Üstünde tartışılamaz; ona ancak biad edilir. Ortaça kilisesinin egemenli i de böyle kuruldu. Amahttp://www.forumuz.net/images/digersmileyler/virgul.gif Rönesanstan sonrahttp://www.forumuz.net/images/digersmileyler/virgul.gif avrupada insan yeniden düşünmeyehttp://www.forumuz.net/images/digersmileyler/virgul.gif do ruyu yanlışı sorgulamaya başladı. Do udakiler inançtahttp://www.forumuz.net/images/digersmileyler/virgul.gif kültürde bunu başaramadılar. Bu gün e itimli kişilerimiz bilehttp://www.forumuz.net/images/digersmileyler/virgul.gif bir konuyu asıl kayna ından araştırmak yerinehttp://www.forumuz.net/images/digersmileyler/virgul.gif "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. Ö renmeyihttp://www.forumuz.net/images/digersmileyler/virgul.gif düşünmeyihttp://www.forumuz.net/images/digersmileyler/virgul.gif sorgulamayı ö retmeninhttp://www.forumuz.net/images/digersmileyler/virgul.gif bunu kültürümüzün bir parçası haline getirmenin en iyi aracı matematik ö retimidir. Çünkühttp://www.forumuz.net/images/digersmileyler/virgul.gif matematik bir şeye inanmanızı istemezhttp://www.forumuz.net/images/digersmileyler/virgul.gif onu sorgularhttp://www.forumuz.net/images/digersmileyler/virgul.gif ispat eder.
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifH3 { 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"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2http://www.forumuz.net/images/digersmileyler/virgul.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif.http://www.forumuz.net/images/digersmileyler/virgul.gifH5http://www.forumuz.net/images/digersmileyler/virgul.gif Phttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"> http://www.forumuz.net/images/digersmileyler/nokta.gif. </p>
arasında kalan metin "quest" adıyla adlandırılan id sınıfına aittir. Dolayısıylahttp://www.forumuz.net/images/digersmileyler/virgul.gif #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ı">http://www.forumuz.net/images/digersmileyler/nokta.gif.</SPAN>
damgası içerisine alıp hepsine bir id-adı verebiliriz.
<span id="ans">
TK- Son 30 yılda Türkiye'de çok para kazanmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kazanmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif mutlulu un tek yolu de ildir; hatta bazan hiç de ildir. Sanatla u raşmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif bilimle u raşmakhttp://www.forumuz.net/images/digersmileyler/virgul.gif bir şey üretmekhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 inhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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ıhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
http://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gifhttp://www.forumuz.net/images/digersmileyler/nokta.gif
</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ınhttp://www.forumuz.net/images/digersmileyler/virgul.gif kendinizi bir orduyu yöneten bir komutan gibi hissetmeyiniz. Amahttp://www.forumuz.net/images/digersmileyler/virgul.gif web sayfalarınıza kesinlikle hükmedebileceksiniz.
Bunun için yapmanız gereken tek şeyhttp://www.forumuz.net/images/digersmileyler/virgul.gif bir stil CSS dosyası yaratmaktır. CSS dosyalarına istedi iniz adları verebilirsinizhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kihttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 kodlarhttp://www.forumuz.net/images/digersmileyler/virgul.gif web dökümanının <HEAD> http://www.forumuz.net/images/digersmileyler/nokta.gif. </HEAD> bölümü içine yazılmalıdır. E erhttp://www.forumuz.net/images/digersmileyler/virgul.gif CSS dosyası ile web dökümanı aynı dizinde de illersehttp://www.forumuz.net/images/digersmileyler/virgul.gif 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 olarakhttp://www.forumuz.net/images/digersmileyler/virgul.gif 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öylecehttp://www.forumuz.net/images/digersmileyler/virgul.gif birbirine benzer web dökümanları aynı CSS dosyasıyla biçimlenebilirler. Daha önemlisihttp://www.forumuz.net/images/digersmileyler/virgul.gif web sayfalarınızda yapaca ınız biçem de işiklikleri içinhttp://www.forumuz.net/images/digersmileyler/virgul.gif yalnızca CSS dosyasında ilgili komutları de iştirmek yetecektir.
BODY {
FONT-FAMILY: Verdanahttp://www.forumuz.net/images/digersmileyler/virgul.gif Arialhttp://www.forumuz.net/images/digersmileyler/virgul.gif Helveticahttp://www.forumuz.net/images/digersmileyler/virgul.gif sans-serif;
font-size: 90%;
margin-left: 2%;
margin-right: 2%;
background-color: #F0EBD7;
background-attachment : inherit;
background-image : url(http://www.forumuz.net/images/digersmileyler/nokta.gif/images/zemin3.jpg);
}
BLOCKQUOTE {
font-family : "Times New Roman"http://www.forumuz.net/images/digersmileyler/virgul.gif Timeshttp://www.forumuz.net/images/digersmileyler/virgul.gif serif;
font-size : xx-small;
}
DT{
font-size: 90%;
color: Maroon;
}
H3http://www.forumuz.net/images/digersmileyler/virgul.gifH4http://www.forumuz.net/images/digersmileyler/virgul.gifH5 {
color : Teal;
}
H1http://www.forumuz.net/images/digersmileyler/virgul.gifH2 {
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%;
}