Cascading Style Sheets, Yığmalı Stil Kağıtları(Yığmalı Stil Şablonları) olarak isimlendirilir. Sayfalarda kullanılan yazı tipi, rengi, boyutu, paragraf biçemi, linkler v.b. gibi özellikleri her satırda yazmak yerine, topluca bir defada tanımlama işlemidir.
CSS, sayfanın dizaynında tam esneklik vermesi amacıyla üretilmiş bir dildir. Kullanım kolaylığı sebebiyle Html’e eklenmesinden dolayı çoğu web tasarımcısının gözdesi olmuştur. Her türlü sayfa dizaynını kullanıcıya bırakarak bir esneklik sağlar.
Ayrıca bağlantılı stil şablonları(external style sheets) aracılığı ile de birden çok sayfayı etkiyebilir. Bu yöntemle kullanıcı web sitesinin görünümünü değiştirmek istediğinde onlarca sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu eylemini gerçekleştirir.
CSS Çeşitleri
Css’in üç farklı kullanım alanı vardır:
- In-Line Style Sheet(Satır İçinde Stil): Sadece tanımlanan HTML etiketi için özel olarak kullanılırlar.
- Embedded Style Sheet(HTML’in İçine Gömülmüş Stil): Sayfadaki tüm HTML etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
- External Linked Style Sheet(Bağlanmış Stil, Ayrı Bir Dosyada Harici Stil): Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde HTML sayfası içersine çağrılırlar.
In-Line Style Sheet(Satır İçinde Stil)
Yukarıda belirtildiği gibi Satır İçinde Stiller(Yerel Stil Şablonları), uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Örneğin;
<title>Css Uygulamaları</title>
</head>
<body topmargin="50" leftmargin="50">
<h1>In-Line Style Sheet(Satır İçinde Stiller)</h1><br>
<h1 style="font-size:20pt; color:blue">
In-Line Style Sheet(Satır İçinde Stiller)</h1>
<h3 style="letter-spacing:36pt">BİÇEMLER</h3>
<p style="text-align:justify; text-indent:20pt" align="left">
Cascading Style Sheets, Yığmalı Stil Kağıtları(Stil Şablonları) olarak isimlendirilir.
Sayfalarda kullanılan yazı tipi, rengi, boyutu, paragraf biçemi, linkler v.b. gibi
özellikleri her satırda yazmak yerine, topluca bir defada tanımlama işlemidir.</p>
<font style="font:14pt comic sans ms" font color="red">
CSS, sayfanın dizaynında tam esneklik vermesi amacıyla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html'e eklenmesinden dolayı çoğu web tasarımcısının gözdesi olmuştur. Her türlü sayfa dizaynını kullanıcıya bırakarak bir esneklik sağlar. </font>
<br>
<center>
<a href="http://bilmuh.ege.edu.tr/~kacan/index.html" style="text-decoration:none">HTML Dersleri</a>
</center>
</body> </html>
Bu örneğimizi denemestil.htm adıyla kaydedip tarayıcı yardımıyla açıldığında iki tane In-Line Style Sheet(Satır İçinde Stiller) yazısıyla karşılaşılır. Fakat bunların yazım tarzı farklı olacaktır, çünkü ikinci <h1> tag’ını etkilemek üzere bir stil kağıdı oluşturuldu. Diğer biçemlerin görünümü ile ilgili görünüm Şekil-26’daki gibidir.
Şekil 26-In-Line Style Sheet Görünümü
Embedded Style Sheet(HTML’in İçine Gömülmüş Stil)
Embedded Stil Şablonları bir önceki örnekte yapılan <h1> tag’ının tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunun için Stil Şablon özellikleri sayfanın başlangıcında <head></head> etiketleri arasında tanımlanmalıdır.
<style type=”text/css”>..... tanımlamasıyla bunun bir stil şablonu olduğu ve </style> ile şablonun sona erdiği belirtilir. <!-- etiketi ile Css’i tanımayan tarayıcıların bu kısmı geçmesi sağlanır. Bu saklama işlemi --> etiketi ile son bulur.
Örneğin:
<html> <head> <title>Css</title> <style type="text/css"> <!-- h1 {font-size:20pt; color:blue} --> </style> </head> <body> <h1> Embedded Style Sheet(HTML’in İçine Gömülmüş Stil) </h1> <a href="http://bilmuh.ege.edu.tr/~kacan/index.html" style="text-decoration:underline”><h1>HTML Dersleri</h1></a> </body> </html> |
Şekil 27-Embedded Style Sheet Görünümü
External Linked Style Sheet(Bağlanmış Stil, Ayrı Bir Dosyada Harici Stil)
Harici stil şablonu ise hazırlanan web sitesinin içerisindeki tüm sayfalarda aynı biçem özelliklerinin kullanılması istendiği durumlarda kullanılır.
Not Defteri text editöründe yeni bir sayfa açılarak, bağlantılı olacağı sayfalara aktarılması istenilen biçemler yazılır. Hazırlanan dosya .css uzantısı ile kaydedilir. Ardından html dosyasının içerisine <head>... </head> tag’ları arasına aşağıdaki
<link rel="stylesheet" type="text/css" href="dosyaismi.css">
satır eklenir.
Örneğin:
body {
font:small verdana, arial,helvatica,sans serif, comic sans;
color:black;
background-color:#bbddff;
}
A:link{color:#0000ff}
A:link{active:#666666}
A:link{visited:#ff00000}
H1 {
font:bold large comic sans ms;
color:red;
}
H2 {
font:bold large comic sans ms;
color:maroon;
}
H3 {
font:bold medium comic sans ms;
color:blue;
}
P {
font-color:black;
font-size:12 pt;
font-family:bookman old style;
text-indent:1 cm;
text-align:justify;
}
UL {
font:small verdana;
color:blue;
}
OL {
font:Large helvatica;
color:red;
}
LI {
font:Bold Large tahoma ;
color:red;
}
DL {
font:small arial;
color:green;
}
DI {
font:small helvetica;
color:aqua;
}
DD {
font:small times new roman;
color:BLACK;
}
Bu dosya örneğin stil.css olarak ve daha sonra hangi web sayfasında kullanılacak ise o sayfanın bulunduğu klasöre kaydedilir. İstenilen Html dosyası içinden de,
<head>
<link rel="stylesheet" type="text/css"
href="stil.css">
</head>
tag’ları arasına yazılarak link verilir.
Html dosyasının kodları arasında geçen kodu stil.css dosyasındaki stil özelliklerinin kullanmasını sağlayacaktır. Bu kod istenilen diğer html dosyalarına da kullanıcı tarafından eklenebilir.
Hiç yorum yok:
Yorum Gönder