CSS nedir? Ne işe yarar?
CSS (ingilizce açılımı Cascading Style Sheets olan türkçeye çevrildiğin de ise Yığılmalı Stil Kağıtları) bizi HTML'in kalıplaşmış olan stil etiketlerinden bir bakıma kurtarıyor.
CSS şu ise yarar:
Bir çok cümlemiz var. Ama bunlardan bir kaçı büyük bir kaçı da küçük olmalı. Saatlerce <font size=""> <font face=""> <font color=""> ile uğraşmaktansa CSS ile işimizi kolayca halledebiliriz..
CSS kod kümesi sayfamızın <head> </head> etiketleri arasına yazılır. HTML etiketlerinden biraz farklıdır.
Css - 1
Bu kullanımda mause'la yazının üzerine geldiğimizde yazının arka plan renginin değiştirilmesi gösterilmiştir.
a -> sayfa ilk açıldığında görünmesini istediğimiz yazı şekli ayarlanır.
{
color=red; -> yazının rengi
font-family:verdana; -> yazı stili
text-decoration:none; ->normal görünümlü yazı
}
a:hover.p ->a parametresine hover özelliği verilir.
{
background:pink; ->Fare belirlenen yazını üzerine geldiğinde arka plan pembe olur.
}
<a class="p" href="#">ownzstyle.tr.gg</a> ->Hover özelliği class="p" kodu ile yazıya uygulanır.
<html>
<head>
<style>
a
{
color=red;
font-family:verdana;
text-decoration:none;
}
a:hover.p
{
background:pink;
}
a:hover.g
{
background:green;
}
a:hover.pr
{
background:purple;
}
</style>
</head>
<body>
<center>
<a class="p" href="#">FATMA YILDIZ</a><br>
<a class="g" href="#">DEU - İMYO</a><br>
<a class="pr" href="#">İZMİR</a><br>
</body>
</html> |
Css - 2
Mause'la yazının üzerine geldiğimizde yazının görünümünün değişmesini sağlar.
a:hover.ust{text-decoration:overline} ->üstü çizili
a:hover.line{text-decoration:line-through} ->ortası çizili
a:hover.under{text-decoration:underline} ->altı çizili
a:hover.no{text-decoration:none} ->değişiklik yok
a:hover.buyukharf{text-transform:uppercase} ->hepsi büyük harf
a:hover.kucukharf{text-transform:lowercase} ->hepsi küçük harf
a:hover.basharf{text-transform:capitalize} ->baş harfi büyük
<html>
<head>
<style>
a
{
color:purple;
font-family:verdana;
text-decoration:none;
}
a:hover.ust{text-decoration:overline}
a:hover.line{text-decoration:line-through}
a:hover.under{text-decoration:underline}
a:hover.no{text-decoration:none}
a:hover.buyukharf{text-transform:uppercase}
a:hover.kucukharf{text-transform:lowercase}
a:hover.basharf{text-transform:capitalize}
</style>
</head>
<body bgcolor="pink">
<h1><center>
<a class="ust" href="#">Kanarya</a><br>
<a class="line" href="#">KEDİ</a><br>
<a class="under" href="#">köpek</a><br>
<a class="no" href="#">kaplan</a><br>
<a class="buyukharf" href="#">Geyik</a><br>
<a class="kucukharf" href="#">ASLAN</a><br>
<a class="basharf" href="#">tavşan</a><br>
</body>
</html>
|
CSS Kullanımları
Uygulama 1
Mause'la yazının üzerine geldiğimizde yazının renginin değiştirilmesi ve altı çizili olması gösterilmiştir.
<html>
<head>
<style>
a
{
color=red;
font-size:30px;
font-family:comic sans ms;
text-decoration:none;
}
a:hover
{
color=blue;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="#">İZMİR</a>
</body>
</html>
|
Uygulama 2
<a href="#" style="font-size=20px; color=red">fatma</a><br> ->yazıya stil özelliği tek bir satırda verilebilir.
<html>
<body>
<a href="#" style="font-size=20px; color=red">fatma</a><br>
<a href="#" style="font-size=30px; color=pink">yıldız</a><br>
<a href="#" style="font-size=40px; color=green">deu-imyo</a><br>
</body>
</html>
|
Uygulama 3
<link rel="stylesheet" type="text/css" href="allstar.css"> -> yazıya stil özelliği allstar.css belgesinden çağırılarak verilir.Allstar.css belgesini biz oluşturuyoruz.İstediğimiz görünüm özelliklerini belirtiyoruz.
<html>
<head>
<link rel="stylesheet" type="text/css" href="allstar.css">
</head>
<body>
<a href="#" class="p">fatma</a><br>
<a href="#" class="b">yıldız</a>
</body>
</html>
|
allstar.css
a
{
color=pink;
font-size:50px;
font-family:comic sans ms;
text-decoration:none;
}
a:hover.p
{
color=purple;
text-decoration:underline;
}
a:hover.b
{
color=black;
text-decoration:underline;
}
|
|
