Css nedir?

#1 15-01-2008, 12:18

Cssl nedir? Sitillerin kullanım amaçları Css nedir?

Html sayfa düzenlemesi konusunda tasarımcılar için yeterli gelmediğinden yeni arayışlar başlamıştır. Bu aslında htmlin bir kusuru olmamakla beraber tasarımcılar sayfa tasarımı konusunda daha fazla denetim istediklerinden yeni oluşumlar başladı.
Css tasarımcıların kendi sitillerini oluşturmasını sağlamak için geliştirilen html ekidir. Bu sayede tasarımcılar kenidi sitillerini websayfalarına ekleyebileceklerdir.
Css ( Style Sheet ) kullanılarak html taglarının özellikleri rahatlıkla değiştirilebilir. İstenilen tagın etki ettiği alanın özelliklerini ayarlayabiliriz. Mesela <H1> tagının zemin rengini değiştirebilir veya ona bir çerçeve ekleyebiliriz. Bunun gibi tüm taglar için eklemeler yapabiliriz.
Mesela aşağıdaki kod ile zemin rengi sarı ve 1 pixel genişliğinde mavi çerçevesi olan bir <H3> tagı tanımlıyoruz.
Kod:

Kod:

<H3 STYLE="background-color:yellow; border-width:1; border-color:blue; border-style:solid;"> H3 tagına sitil uygulanması</H3>

Bu işlemin sonucu ise : H3 tagına sitil uygulanması

Yine <B> tagının font büyüklüğünü değiştirmek istersek;
Kod:

Kod:

Normal fontla yazılmış yazı içerisine <B> B tagı uygulandı.</B> Şimdi ise B tagına kendi sitilimizi uygulayarak <B STYLE="font-size:18;">font büyüklüğünü</B>

değiştirdik.

Bu örneğimizin sonucu ise :
Normal fontla yazılmış yazı içerisine B tagı uygulandı. Şimdi ise B tagına kendi sitilimizi uygulayarak font büyüklüğünü değiştirdik.

yukarıdaki gibi olacaktır.
Sitil uygulamalarını Internet Explorer 3.x ve yukarısı, Netscape 4.x ve yukarısı ve Opera ise 3.5 ve yukarısında desteklemeye başlamışlardır. Siller hakkında bilgi için gidebilirsiniz.

Browserler genel olarak CSS 1.0 tanımlamasını kullanabilselerde bazı özellikleri desteklemezler ve yine bununla birlikte kendi özel sitillerini de tanımlamışlardır. Bu yazıda bulunan örnekleri görebilmeniz için sitil uygulamalarını destekleyen bir browser kullanmanız gerekmektedir. Bu yazı yazıda CSS 1.0 incelenerek gerekli bilgiler verilecektir.

Stil sayfaları herhangi bir yazı editörü ile yazılabilmektedir. Yinede yardımcı programlar geliştirilmiştir. Güzel ve ücretsiz olan TopStyle Lite programını bradsoft.com dan edinebilirsiniz. Yine bu programın daha gelişmiş ve ücretli sürümünüde buradan edinebilirsiniz.

Web tasarım rehberi - Anasayfa

#2 15-01-2008, 12:20

Sitilerin websayfasına eklenmesi

Sitilleri html gibi düz yazı olarak hazırlıyoruz. Hazırladığımız sitillerin websayfasına yerleştirmek için birkaç yöntem bulunmaktadır. Bu yöntemlerin farklı özellikleri ve faydaları bulunmaktadır. Bu yöntemler şunlardır :

Sitilin uygulanması gereken yerde satır içerisinde sitilin tanımlanması.
Sayfa içerisinde <HEAD> tagı içerisine sitillerin yerleştirilmesi.
Harici bir sitil dosyasının kullanılması.

Satır içi sitil kullanımı

Bir elemana ( tag ) sitil uygulamak için o tagın STYLE özelliğini kullanabililiriz. Bu yöntemle istenilen herhangi bir yerdeki istenilen elemana herhangi bir sitil özelliğini uygulayabiliriz.
Örnek vermek gerekirse bir paragrafın zemin rengini siyah ve önplan rengini beyaz yapmak istersek:

Kod:

 Kod:
 <P STYLE="color:white; background-color:black"> Bu paragrafın zemin rengi siyah olarak oluşturuldu. Önplan rengi ise beyaz yapıldı. Bu işlemler için satır için sitil kullanma yöntemi kullanıldı. P tagının STYLE özelliği ile istenilen etki oluşturuldu. </P>

Bu örneğimizin sonucu aşağıdaki gibi olacaktır. Bu paragrafın zemin rengi siyah olarak oluşturuldu. Önplan rengi ise beyaz yapıldı. Bu işlemler için satır için sitil kullanma yöntemi kullanıldı. P tagının STYLE özelliği ile istenilen etki oluşturuldu.

Satır içi kullanımıyla istediğimiz elamanın sitilini öncelikli olarak değiştirebiliyoruz. Fakat bu şekilde kullanımda eksi taraf bu sitili değiştirmek istediğimizde sayfa kodları açılmalı ve değiştirilecek bölüm aranıp yeni sitillerin eklenmesi gerekmesidir. Büyük bir sitede bu işlem uzun zaman ve emek gerektirecektir. Satır içi kullanıma başka bir örnek vererek bu konuyu bitirelim.

Kod:

 Kod:
 <DIV STYLE="margin:20; color: blue; background-color:yellow; border-color: gray; border-style:inset; border-width:10; font-size:18; font-family:verdana;"> Satır içi sitil uygulaması için yeni bir örnek. Birçok özellik DIV tagı içerisinde değitirilmiştir. Html ile bu özelliklerin tamamı değitirilemeyecektir. </DIV>

Bu örneğimizin sonucu aşağıdadır : Satır içi sitil uygulaması için yeni bir örnek. Birçok özellik DIV tagı içerisinde değitirilmiştir. Html ile bu özelliklerin tamamı değitirilemeyecektir.

#3 15-01-2008, 12:24

HEAD tagı içerisine sitillerin yerleştirilmesi

Hazırladığımız sitilleri <HEAD> tagı içerisine yerleştirebiliriz. Bu daha kullanışlı bir yöntemdir. Burada önemli olan sitilleri nasıl tanımlayacağımız ve taglara nasıl uygulayacağımızdır. Aşağıdaki yöntemlerle sitilleri taglara uygulayabiliriz.

Eleman ID sinin kullanılması.
Sınıfların kullanılması.
Taglara sitillerin uygulanması.
Anlamsal sitillerin oluşturulması.

Öncelikle HEAD tagı içerisinde sitillerin nasıl uygulanacağını görelim. Bunun için <STYLE> tagını kullanıyoruz. Kullanım şekli :

Kod:

<HEAD> <STYLE> </STYLE> </HEAD>

tagları kullanılacak sitillerin sitilleri desteklemeyen browserlerden gizlemek için kullanılmaktadır.
Kullanılacak sitiller bölümüne kendi sitillerimizi yazıyoruz. Aşağıdaki örneği inceleyiniz :

Kod:

 <HTML> <HEAD> <TITLE> Sitillerin kullanımları </TITLE> <STYLE> BODY { background-color : black; color : white; font-size:14; font-type:verdana; margin : 20; } DIV { background-color : yellow; color: blue; font-size:14; } B { color: red; } H1 { border-color: red; border-width:1; border-style:solid; } </STYLE> </HEAD> <BODY> <H1> Sitil uygulamaları</H1>

Bu bölümde sitillerin HEAD tagı içerisinde kullanılmasını inceliyoruz. Bunun için <B> STYLE tagını </B> kullanıyoruz.

Kod:

<P> <DIV> Böylece daha kolay olarak sitilleri sayfalarımıza uygulayabiliyoruz. </DIV> <P>Sitillerin bu şekilde uygulanmaları tasarımcıların işlerini daha kolaylaştırıyor. </BODY> </HTML>

Eleman ID sinin kullanılması

Sitil uygulanacak belirli bir eleman varsa bu tagın ID si kullanılarak istenilen sitilleri belirlenebilir. ID tüm html tagları için kullanılan bir özelliktir ve sadece o taga ait olan bir kimlik verilmesini sağlar. Bir sayfa içerisinde aynı ID olarak tanımlanan bir isim başka bir tag için kullanılamaz.

Bir tag içerisinde ID şu şekilde kullanılır.

Kod:

<TAG ID="bir_isim"> tagın içeriği </TAG>

Burada TAG yerine IDsini belirteceğimiz herhangi bir tagı yerleştirebiliriz. bir_isim yerinede ID olarak kullanacağımız bir isim yerleştireceğiz. Bu isim başka bir tag için ID olarak kullanılamaz.
Bir sitil tanımlamasında veya herhangi bir script dili ile bir program yazıldığında ( mesela javascript ile ) ID kullanılarak istediğimiz tag üzerinde işlemler yapabiliriz. Şimdi bir örnek üzerinde ID belirterek sitillerin kullanımını görelim.

Kod:

 <HTML> <HEAD> <TITLE> Sitillerin kullanımları </TITLE> <STYLE> #anabolum { background-color : black; color : white; font-size:14; font-type:verdana; margin : 20; } #aciklama { background-color : yellow; color: blue; font-size:14; } B { color: red; } H1 { border-color: red; border-width:1; border-style:solid; } </STYLE> </HEAD> <BODY> <DIV ID="anabolum"> <H1> Sitil uygulamaları</H1> Bu bölümde sitillerin HEAD tagı içerisinde kullanılmasını inceliyoruz. Bunun için <B> STYLE tagını </B> kullanıyoruz. <P> <DIV ID="aciklama"> Böylece daha kolay olarak sitilleri sayfalarımıza uygulayabiliyoruz. </DIV> <P>Sitillerin bu şekilde uygulanmaları tasarımcıların işlerini daha kolaylaştırıyor. </DIV> </BODY> </HTML>

Sitil tanımlaması yapılırken ID önüne # diyez işareti getirilmelidir. Eleman IDsi genel olarak dHTML programlarında kullanılmaktadır. Böylece istenilen elemanın özelliği JavaScript içerisinden rahatlıkla değiştirilebilmektedir.

Benzer Konular
Konu	Konu Açanlar	Forum	Cevaplar	Güncel Mesajlar
Vps nedir? reseller nedir? host nedir?	_okan_	Webmaster Sözlügü	3	04-08-2008 12:51
açılış sayfası nedir?sayaç nedir?intro nedir?	kadınca	Webmaster Sözlügü	0	19-02-2008 11:15
Gsm Nedir?wap Nedir?gprs Nedir?efr Nedir?bluetooth Wıreless Technology Nedir?	kadınca	Webmaster Sözlügü	0	19-02-2008 05:07
hit nedir,tekil hit nedir, çoğul hit nedir,trafik nedir	kadınca	Webmaster Sözlügü	0	19-02-2008 02:45
Anchor / Çapa Nedir,RSS Nedir,SERP Nedir webmasterların bilmesi gereken bazı kavramlar	kadınca	Webmaster Genel Konular	0	06-02-2008 07:13

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder