Açıklamalı Genel CSS Uygulama Örnekleri
Genel CSS için Açıklamalı Örnek Uygulamalar :
Örnek 1 :
<html>
<head>
<title>genel css uygulaması</title>
<style type=”text/css”>
<!–
p {
font-size : 10pt;
font-family : Arial;
font-weight : bold;
font-style :italic;
color : #00FF00;
}
–>
</style>
</head>
<body>
<p>Sitil Şablonu Örneği</p>
</body>
</html>
Yukarıdaki örnekte p tagı CSS ile biçimlendirilmiştir. Artık bu sayfada kullanılacak p taglarının tamamı, css dosyasından belirlenen biçimlendirmeleri kullanacaktır. Bu biçimlendirmelerin anlamaları aşağıda açıklanmıştır.
font-size: Yazı büyüklüğünü belirler.
font-family: Yazıda kullanılacak font tipini belirler. (Times New Roman, Arial, Verdana…)
font-weight: Yazının kalınlık durumunu belirler.
bold: Yazının kalın olmasını sağlar.
normal: Yazının normal olmasını sağlar. Hiçbir şey yazılmasa yazı normal olur.
font-style: Yazı sitili. İtalic ile yazının eğik olması sağlanabilir.
color: Yazının rengi buradan belirlenebelir.
Örnek 2 :
<html>
<head>
<title> Örnek CSS Uygulaması </title>
<style type=”text/css”>
<!–
p
{
text-transform : upercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
–>
</style>
<head>
<body>
<p>Stil Sablonları</p>
</body></html>
Örnekte p tagı biçimlendirilmiş ve sayfada Sitil Şablonları yazısına bu biçimlendirme uygulanmıştır. Örnek kodların açıklaması aşağıda verilmiştir.
text-transform : Yazı dönüşümü anlamına gelir. Aşağıda alabileceği değerler verilmiştir.
none : Hiçbir değişiklik yapmadan bırak.
lowercase: Yazının tamamını büyük harfe çevirir.
uppercase: Yazının tamamını küçük harfe çevirir.
capitalize: Sadece ilk harf büyük olacaktır..
text-decoration : Yazıya çizgi çizmek için kullanılır.
underline: Altı çizili yazı anlamına gelir.
overline: Üstü çizili yazı anlamına gelir.
line-through: Yazının üzerinin çizili olması..
none: Yazının hiçbir yerine çizgi çizilmemesi.
text-align: Yazının hizalama özelliğidir. Çok sık kullanılan bir özelliktir.
left: Yazının sola hizalı olması.
center: Yazının ortalı olması.
right: Yazının sağa hizalı olması.
line-height: Yazının normal satırdan satır yüksekliğini belirler. 2px, 5px gibi değerleri alabilir.
text-ident: Yazının sol taraftan ne kadar boşluk ile başlayacağını belirler. 5px, 10px benzeri değerler alabilir.
