CSS (Cascading Style Sheets)Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar
Css Özellikleri:
Html sayfasındaki nesnelerin görüntüsünü belirler
Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir
HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.
<h1>Başlık yazısı</h1>
<p>Paragraf yazısı</p>
Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.
Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
CSS Örnek KodlarCss ile tekrarlanmayan arka plan resmi yapmak için öncelikle arka plana bir resim atamak gerekir. Bunu background-image : url(resmim); kodu ile yaparız.
Daha sonra bu resmin tekrarlanmasını önlemek için background-repeat:no-repeat komutunu vermek gerekir.
En son olarak resmi ortalamak için background-position : center komutunu vereceğiz
Şu kodda olduğu gibi :
BODY
{
BACKGROUND-IMAGE : URL(./bayrak.gif);
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-POSITION : CENTER;
}
Web sitesindee kaydırma çubuklarını (Scroll bar) renklendirmek.Web sayfanızın Head Head bölümene aşağıdaki kodu yazınız..
<style>
<!–
solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px
solid; BORDER-TOP: #1F9FFF 0px
solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt; FONT-WEIGHT: bold}body
{ scrollbar-face-color:#CCCCCC;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#CCCCCC;
; font-size: xx-small; border-top-width: thin}
–>
</style>
Renk Değiştiren CSS Kodu
<html><head>
<style>
<!--
a{color:#000069;text-decoration:none;font:bold}
a:hover{color:#FF0000}
-->
</style>
<!--
yukarıdaki css style şablon ile renk değişimi sağlanmaktadır
kullanmak istediğiniz sayfaya bu tag taşıyarak veya
css sayfası olarak kaydedip style'ı oradan çağırarak
bu scripti kullanabilirsiniz
ksabitk
http://www.saab.tr.cx & ksabitk@hotmail.com
-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Renk Değiştiren Link</title>
</head><body>
<a href="#"><font size="5">Bu link renk değiştiriyor</font></a><font size="5"></font><p>
<a href="#"><font color="#BB9951" size="5">Bu link renk değiştirmez</font></a></p>
<a href="#"><font size="5">Bu link renk değiştiriyor</font></a><font size="5"></font><p>
<a href="#"><font color="#996699" size="5">Bu link renk değiştirmez</font></a></p>
<blockquote>
<p><a href="http://www.saab.tr.cc">www.saab.tr.cc</a><br>
<a href="mailto:ksabitk@hotmail.com">ksabitk@hotmail.com</a></p>
</blockquote>
</body></html>
