CSS(Cascade Style Sheet)

Css Html'de stil yaratmanızı sağlayan Html'ye eklenen script dilidir.

Css Html'de stil yaratmanızı sağlayan Html'ye eklenen script dilidir.

Css'nin Yararları


Css'nin en önemli yararı yaptığınız değişiklikleri diğer başka elemenlar için uygulayabilmenizdir.Örneğin bir yazıyı kırmızı ve 10 pt büyüklüğünde yaptınız. Eğer başka bir yazıyıda aynı şeyi yapmak istiyorsanız stil kullanmanız işi kolaylaştırır. Bir nesne üzerinde yaptığınız her türlü değişikliğin toplamına stil denir. Stillerin bazı yararları aşağıda listelenmiştir.

- Bir stil bir çok elamana uygulanabilir.
- Aynı elemana farklı stiller verilebilir.
- Bir stil değiştirildiğinde ondan etkilenen elemanlarda değişir.
- Aynı stil farklı sayfalarda kullanılabilir.
- Stiller arasında ilişki kurarak birbirlerine göre hareket etmesini sağlayabilirsiniz(Örneğin paragrafınız ciddi yazı stiliyse linkinizi mavi eğlenceli yazı stiliye linkinizin kırmızı olmasını sağlayabilirsiniz)

Css'i Kullanma


Stillerinizi iki türlü hazırlayabilirsiniz. Birincisi stillerinizi kullandığınız sayfaya gömmek(yani sayfada kullanmak). Diğeri ise ayrı bir sayafaya stillerinizi yazıp stilleri kullanmak istediğiniz sayfalardan stil sayfasına link yapmak(yani stil sayfasını çağırmak).Stilleri ayrı bir sayfaya koymak daha yaralıdır. Böylece aynı stilleri bir çok sayfada kullanabilirsiniz.
Aynı sayfada stil kullanmak için head tagı arasında style tagı kullanılır.Style tagı arasına stillerinizi yazarsınız.

&lthtml>
&lthead>
&ltstyle>
Stiller buraya
</style>
</head>
&ltbody>
Sayfa burada
</body>
</html>



Stilleri ayrı bir sayfaya yazıpta kullanabilirsiniz.Stileri yazdığınız dosyaya bir isim verip sonunu .css ile saklarsınız(örneğin stiller.css).Buradaki stilleri kullanmak istediğiniz zaman head tagı arasına link tagı ile css dosyasını çağırırsınız. Aşağıda stiller.css dosyasındaki stilleri kullanmak için çağıran örnek görülüyor.
&lthtml>
&lthead>
&ltlink href="stiller.css" type="text/css" rel="StyleSheet">
</head>
&ltbody>
Sayfa burada ve stiller kullanılabilir.
</body>
</html>



Css'i Yapısı


Css'de stil hazırmak için çeşitli yollar vardır. En basit yolu HTML'de kullanılan tagların özelliğini değiştirerek stil hazırlamadır.Aslında her tagın standart özellikleri(Default) yani stilleri vardır. Örneğin link koyduğunuzda default stil gereği mavi ve altı çizili olur. Siz stil ile tagın özelliğini değiştirebilirsiniz.Aşağında h3 başlığı kırmızı yapılıyor.

&lthtml>
&lthead>
&ltstyle>
h3{
color:red;
}
</style>
</head>
&ltbody>
&lth3&gtBu başlık kırmızı olur</h3>
</body>
</html>



Yukarıdaki örnekte h3{color:red} yapısının hepsine birden rule denir. {} 'ten önce yazılan yazıya(burada h3) Selector(Seçici) denir.{} içindeki yazıların hepsine birden declaration(bildirim,deklarasyon)denir. Bildirim ikiye ayrılır.color property(özellik) red value(değer).O halde genel css yapısı aşağıdaki gibidir.


Bütün Yapı(RULE)
Selector Bölümü{
Declaration Bölümü
}
Declaration ise
Property1 : Value1 ;
Property2 : Value2 ;
Yani
İSİM{
İSİM: İSİM;
İSİM2:İSİM2;
}




Çocuk(Child) ve Ana(Parent) taglar

Bazı taglar diğer tagları kaplarlar. Örneğin html tagı diğer bütün tagları kaplar. Body tagı Html tagının cocuğu, Html body tagının anasıdır. Yine p tagı body tagının cocuğudur body p tagını anasıdır. Taglarda böyle bir yapı mevcuttur.

Cascade(Çağlayan) yapısı


CSS açılımı Cascading Style Sheet'tir. Yani Çağlayan Stil Sayfaları. Cascade yapısı çok önemlidir. Örneğin body'deki(body tagı) her yazının rengini kırmızı yapılsın.Sonra bir paragrafın yazısı(p tagı) mavi yazılsın. Body boyunca yazılan yazılar kırmızı olurlar ancak p tagı ile başlayıp kapananlar p tagının istediği renk yani mavi olurlar. Eğer p tagı renk hakkında bir şey söylemezse body tagının rengi geçerli olur.

Class veya id kullanımı

Bir çok tag için aynı stili kullanabilirsiniz. Örneğin p ve a tagı ile kullanılan yazıların kırmızı olamasını istiyorsanız iki yolla yapabilirsiniz Bunlardan ilki aşağıdadır:
a,p{
color:red;
}


aralarına virgül koyarak ,stediğiniz kadar tag koyabilirsiniz. İkinci yöntemde class ve id kullanmaktır.Aşağıda class kullanan örnek görünüyor.
&lthtml>
&lthead>
&ltstyle>
.kırmızı{
color:red;
}
</style>
</head>
&ltbody>
&ltp class="kırmızı"&gtBu başlık kırmızı olur</p>
&lta class="kırmızı" href="bilmemne.html"&gtBilmem ne</a>
</body>
</html>



Örnekte görüldüğü gibi .kırmızı ile bir class tanımlıyoruz. Classımızın adı kırmızı oldu.Sonra hang tagla birlikte kullanıyorsak oraya class="class ismi" yazıyoruz. HTML'de bir çok tagın class ve id özellikleri vardır. id kullanımıda class'a benzer.Sadece .kırmızıda . yerine # işareti ve tagın yanında class="kırmızı" yerine id="kırmızı" yazmaktır.

Stillerin birbirine göre durumu


Bir tagın kullanıldığı yere göre değişik bir stil kullanmasını sağlayabiliriz.Örneğin bir link yazısı sayfada p tagının içindeyken kırmızı div tagı içindeyken yeşil görünmesini nasıl sağlarız.İlk yol her iki durum için ayrı class yapmaktır aşağıda bu görülüyor.
&lthtml>
&lthead>
&ltstyle>
.kırmızı{
color:red;
}
.yesil{
color:green;
}
</style>
</head>
&ltbody>
&ltp>
&lta class="kırmızı" href="bilmemne.html"&gtKırmızı olacak</a>
</p>
&ltdiv>
&lta class="yesil" href="bilmemne.html"&gtYeşil Olacak</a>
</div>
</body>
</html>



Yukarıdaki örnekte p tagının içindeki linki class="kırmızı" ile kırmızı yapıyoruz div tagı içindeki linki class="yesil" ile yeşil yapıyoruz.Bunun değişik yöntemi aşağıdadır.
&lthtml>
&lthead>
&ltstyle>
a{
color:red;
}
div a{
color:green;
}
</style>
</head>
&ltbody>
&lta href="bilmemne.html"&gtKırmızı olacak</a>
&ltdiv>
&lta href="bilmemne.html"&gtYeşil Olacak</a>
</div>
</body>
</html>



Yukarıda yapılan şudur. a{ color:red} ile normal kullanımında a tagı her zaman kırmızı olacaktır. Ancak Div a{color:green} ile belirtildiği gibi eğer a tagı div tagının içinde ise o zaman rengi yeşil olacaktır.Böylece her tagı kullandığımızda class belirtmekten kurtulmuş olduk. Böylece durumuna göre renk değiştiren bir link tagı yapmış olduk.

Child(çocuk) ve parent(Ana)


HTML'de taglar arasındaki hiyerarşiyi css'deki seelectorlar(seçiçiler) için kurabilirsiniz.Örneğin .ana > .cocuk derseniz .cocuk class'ı ana class'ının ******dur.Aşağıda örnekte p tagı div tagının ****** oluyor
Div > p{
color:red;
}



Pseudo Class'lar ve Pseudo Elemntler


Pseudo ingilizcede sahte,yapma anlamına geliyor.Yani buradaki class'lar ve elementler sahtedir.Pseudo'lar taglarla yapılamayan şeyleri
yaparlar.Pseudo'ların başına : işareti konuyor.

:hover , :link , :visited , :active , :focus

Bir yazının üzerine fare ile gittiğinizde bazı özelliklerin değişmesi için kullanılır. Örneğin bir linkin rengini değiştirebilirsiniz. Aşağıdaki örnekte mavi olan link üzerine gelindiğinde linkin rengini kırmızı yapıyoruz.Ziyaret edilen linkin rengini koyumavi yapıyoruz.:link normal link rengi, :hover fare ile gelindiğinde olacak olan renk, :visited bir link ziyaret edilince değişen renk.:focus bir eleman aktif olduğunda bazı özellikleri değiştirmek için kullanılır.
&lthtml>
&lthead>
&ltstyle>
a:link{
color:blue;
}
a:hover{
color:red;
}
a:visited{
color:darkblue;
}

&ltstyle>
&ltbody>
&lta href="">üzerine fare ile gelindiğinde kırmızı olur.</a>
</body>
</html>




Gerekli Dosyalar

add.css

basic.css

code.css