CSS kullanımının ikinci şekli olan yerel şablon; uygulamak istediğiniz tagin içinde bir attribute gibi kullanmaktır. Bu herhangi bir tag olabilir. Mesela satırbaşı yapan P taginde kullanalım. Alttaki kodu body bölümüne yazınız.
<P style="background-color: red; text-decoration : line-through; font-family : Comic Sans MS; font-size: 40pt; color: blue">Tag içinde Style kullanımı </P>
Örneği Görüntülemek için Tıklayın
Çıkan örneğin aynısını ilk öğrendiğimiz birinci yönteme göre yazacak olursak.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<STYLE type="text/css">
.yontem1 {background-color: red; text-decoration : line-through; font-family : Comic Sans MS; font-size: 40pt; color: blue}
</STYLE>
</HEAD>
<BODY>
<P class="yontem1"> Tag içinde Style kullanımı </P>
</BODY>
</HTML>
Sanırım iki yöntemde anlaşıldı. Dediğim gibi her iki yöntemle de yapılabiliyor, tek farkları ilk yöntemde yani head bölümünde bir tag olarak kulandığınız zaman tüm sayfayı etkiliyebiliyorsunuz. İkinci yöntemde ise sadece kullandığınız tagi kapatana kadar.
Şimdide üçüncü yöntem olan bağlantılı şablona geçelim, bu yöntemde tüm Style kodu başka bir dosyaya kaydediliyor ve bu dosya bir resim dosyası gibi sayfada çağırılıyor. Bu yöntemin en büyük faydası sitenizdeki tüm sayfaları tek bir dosyada oynama yaparak değiştirebilmeniz. Şimdi yukarıdaki örnekteki kodu üçüncü yönteme göre uyarlıyalım.
.yontem3 {background-color: red; text-decoration : line-through; font-family : Comic Sans MS; font-size: 40pt; color: blue}
Evet hiçbir köşeli parantez ve tag yok çünkü bu bir HTML kodu değil. Bu kodu boş bir not defterine yazıp dosyayı .css soyadıyla kaydedin, mesela deneme.css Şimdide bu dosyayı sayfamızda çağıracak tagi ve kullanılma biçimini görelim. Dosyayı çağıran tag Head bölümüne yazılıyor.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<LINK href="deneme.css" rel=stylesheet type=text/css>
</HEAD>
<BODY>
<P class="yontem3"> Bağlantılı Şablon Tekniğiyle Style kullanımı </P>
</BODY>
</HTML>
Gördüğünüz gibi deneme.css dosyasını sayfamıza çağırdık. Böylece yazdığımız tüm Style kodlarını sanki sayfaya yazmışız gibi kullanabiliriz. Aslında üç yönteminde kendine göre çok kullanışlı olduğu alanlar var. Bizede bunların, yaptığımız işe göre en kullanışlısını seçmek kalıyor. Size bir tüyo, Link ve kaydırma çubuğu renklendirmesini bağlantılı şablon tekniği ile yani ayrı bir dosyaya kaydederek kullanın. Böylece tek bir dosyada yapacağınız oynama ile tüm sitenizi değiştirebilirsiniz. Kaydırma çubuğu dedimde onun kodunu henüz yazmamışız.
BODY { SCROLLBAR-FACE-COLOR: black; scrollbar-highlight-color: white; SCROLLBAR-SHADOW-COLOR: white; scrollbar-3dlight-color: white; SCROLLBAR-ARROW-COLOR: ffffff; SCROLLBAR-TRACK-COLOR: white}
Kodu ister birinci yöntemdeki gibi head bölümünde STYLE tagi açarak, istersenizde üçüncü yöntemdeki gibi sayfanızda çağırmak kaydıyla, ayrı bir .css dosyasına kaydederek kullanabilirsiniz. Gördüğünüz gibi kodda birçok renk belirteci var, bunları açıklamaya gerek yok. Siz white ve black renklerinin yerine istediğiniz rengi yazarak istediğiniz şekle sokabilirsiniz.
- CSS-P (Cascading Style Sheet Positioning) Giriş -
Diyelimki sayfanızı çok güzel bir şekilde tasarladınız ama bazı unsurların biraz sağa, sola, yukarıya veya aşağıya çekmek istiyorsunuz. Burada imdadımıza CSS-P (Cascading Style Sheet - Positioning) yetişiyor. CSS-P ile herhangi bir unsuru piksel piksel oynatabiliyoruz. Yine CSS-P `de, CSS gibi 3 şekilde kullanılabiliyor. CSS-P `de kullanılabilecek etiketleri inceliyecek olursak.
position : Nesnenin nasıl konumlanacağını belirler. İki değer alır. Bunlardan absolute, katmanın yerini kesin olarak belirler. relative, katmanın yerini göreli(diğer öğelere göre değişebilen) olarak belirler. static ise, katmanın yerinin sabit olarak belirler.
top, Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.
left, Katmanın sol kısımdan kaç piksel sağda olması gerektiğini belirler.
width, Katmanın genişliğinin kaç piksel olacağını belirler.
height, Katmanın boyunun kaç piksel olacağını belirler.
clip, Katmanın görünmesi istenen bölgeyi içeren kutucuk.
overflow, Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. İki değer alır. scroll, kaydırma çubukları ekler, auto ise kaydırma çubuklarını otomatik olarak belirler.
visibility, Katmanın görünür veya gizli kalacağını bildirir. Alacağı değerler Explorer`da görünür yapmak için visible ve gizli yapmak için hidden; Netscape`de ise görünür yapmak için show ve gizli yapmak için hide `dir.
z-index, Katmanın sayfa üzerindeki sıra sayısını belirtir.
Şimdi basit bir örnek yapalım ve bir unsuru mesela normalde sola yanaşık olarak duran bir tabloyu biraz sağa ve aşağıya çekelim.
<table style="position: relative; left: 10; top: 10" border="2" bordercolor="black" cellspacing="5">
<tr> <td> 10 piksel sağa ve <BR>aşağıya kaydırıyoruz.</td></tr>
</table>
10 piksel sağa ve
aşağıya kaydırıyoruz. |
Position etiketinde relative değerini kullanmamın nedeni yazdığım yazıların 10 piksel sağında ve aşağısında olmasını istememdir. Eğer absolute kullansaydım sayfanın en yukarısından 10 piksel sağda ve aşağıda yani logonun üzerinde olacaktı. Tüm sayfalarda kullandığım, yukarıdaki Tasarım Kursu logosu da, katmanların üstüste gelmesi mantığıyla çalışmaktadır.
Burada karıştılabilecek şey ise, Left ve Top etiketlerinin aslında katmanı, verdiğimiz değer kadar gerçekten bulunduğu yerden sağa veya aşağı hareket ettirmek değil, verdiğimiz değer kadar sol ve yukarı kenardan uzaklaştırmaktır. Tanımını hatırlarsanız "Katmanın sol veya yukarı kısımdan kaç piksel sağda veya aşağıda olması gerektiğini belirlemektir." Özetle top, left etiketlerinin görevi, katmanı sağa ve aşağıya verdiğimiz değer kadar hareket ettirmek değil, verdiğimiz değer kadar yatay ve dikey koordinatlara getirmektir.
Şimdi artık hem CSS hem de CSS-P tekniklerinin kullanıldığı örneklere geçebiliriz. Aşağıdaki yazı efektine ne dersiniz. Bir deneyin çok işinize yarayabilecek zahmetsiz kısa bir teknik.
<HTML>
<HEAD>
<STYLE type="text/css">
.sabit {background-color: red; font-family : verdana; font-size: 65pt; color: white; font-weight: Bold; position: relative; top: 0}
.asagi {background-color: red; font-family : verdana; font-size: 65pt; color: white; font-weight: Bold; position: relative; top: 55}
</STYLE>
</HEAD>
<BODY>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<SPAN class="sabit"> S </SPAN>
<SPAN class="asagi"> T </SPAN>
<SPAN class="sabit"> Y </SPAN>
<SPAN class="asagi"> L </SPAN>
<SPAN class="sabit"> E </SPAN>
</BODY>
</HTML>
Örneği Görüntülemek için Tıklayın
Örnekte sabit harfler için .sabit seçicisini, aşağı çekeceğimiz harfler içinde .asagi seçicisini oluşturduk. Sonra bu seçicileri oluşturduğumuz Span katmanlarında class= attribute `unu kullanarak çağırdık. Harfleri aşağı çekmek için kullandığımız şey sadece top: `a verdiğimiz değer. position:`a relative değerini vermemizin nedeni ise konumlandırmayı diğer unsurlara göre yapmak istememizdir.
CSS tekniklerinin aslında en güzel yönlerinden biri katmanları birbirinin üzerine veya katmanları unsurların üzerine getiriyor olması. Bence bunlar üzerinde biraz çalışın çok güzel şeyler çıkartabilirsiniz, sonuçta iki browserda da hatta eski sürümlerinde bile çalışıyor. Mesela bu teknikle yapılabilecek çok güzel bir örnek.
<p>
<div align="center" style="color: 444444; margin-top: 0; margin-left: 0; font-size : 50px; font-family: verdana"><b>GÖLGELEME</b></div>
<div align="center" style="color: dddddd; margin-top: -56; margin-left: 9; font-size : 50px; font-family: verdana"><b>GÖLGELEME</b></div>
GÖLGELEME
GÖLGELEME
Sayfanın üstündeki TASARIM KURSU logosu da bu teknikle yapılmıştır. Bu sayede yüklenmesi uzun süren büyük resim dosyalarına gerek kalmadan logolar yapabliyorsunuz, üstelik iki browserda da sorunsuz çalışıyor. Bence çok güzel bir etki veriyor. Siz değerlerle oynayarak, ışığın açısını değiştiriyormuş etkisi verebilirsiniz.
Bir sonraki sayfada JavaScript ile CSS ve CSS-P efektleri...
