CSS (Stil) Dosyaları
Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:Belge içinde:
HTML Kodu
<style type="text/css" rel="stylesheet">
<!--
(Stiller burada belirtilir)
-->
</style>
HTML Kodu
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />
Stil Belirlemek
Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:
CSS Kodu
.stilim {
font: 12pt Tahoma, Verdana;
color: #FF0000;
}
td.stilim {
width: 100px;
font: 10pt Tahoma, Verdana;
color: #000000;
}
CSS Kodu
body {
background-color: #EFEFEF;
font: 8pt Tahoma, Verdana;
color: #000000;
}
td {
font: 10pt Tahoma, Verdana;
color: #FF0000;
}
Arkaplan ile İlgili Özellikler
Özellik | Açıklama |
---|---|
background-color: renk; | Arkaplan rengini belirleriz. |
background-image: url('dosya'); | Arkaplan resmi belirleriz. |
background-repeat: tekrar; | Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder. |
background: renk url('dosya') tekrar; | Yukarıdaki css kodlarını tek bir komutta kullandık. |
Yazı ile İlgili Özellikler
Özellik | Açıklama |
---|---|
font: boyut, yazıtipleri; | Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur. |
color: renk; | Yazı rengini belirleriz. |
font-weight: bold; | Kalın yazmak. |
font-style: italic; | Sağa yatık yazmak. |
text-align: hiza; | Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar. |
Boyut ile İlgili Özellikler
Özellik | Açıklama |
---|---|
width: deger; | Genişliği belirtiriz. |
height: deger; | Yüksekliği belirtiriz. |
Kenar ile İlgili Özellikler
Özellik | Açıklama |
---|---|
border: boyut; | Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır. |
border: boyut renk durum; | Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir. |
Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:
HTML Kodu
<style type="text/css" rel="stylesheet">
<!--
.ornek {
font: 10pt Tahoma, Verdana, Arial;
color: #0000C0;
}
-->
</style>
<div class="ornek">
Bu belirlediğimiz stille bir yazı...
</div>
</textarea></div><br>
<div class="code1">HTML Görünümü<br> <div class="code3">
<style type="text/css" rel="stylesheet">
<!--
.ornek {
font: 10pt Tahoma, Verdana, Arial;
color: #0000C0;
}
-->
</style>
<div class="ornek">
Bu belirlediğimiz stille bir yazı...
</div>
0 Comments
Yorum Gönder