HTML’de CSS Stil Dosyaları

5 Ocak 2015 - 330 Okunma
HTML’de CSS Stil Dosyaları
Hazır stil şablonları oluşturduğumuz HTML sayfalarının daha estetik görünmesi için kullanılır. Stil bilgilerini HTML sayfamızın içinde veya bir link yardımıyla sayfamızda kullanabiliriz. Eğer Stil dosyamızı bir link yardımıyla HTML‘e eklemek istiyorsak; olarak belirtiriz. Farkındaysanız stil dosyamızın sonu .css ile bitiyor. Stil dosyaları ayrı olarak kullanılıyorsa .css olarak kayıt edilir. Stil (CSS) kodlarını girmek Stil belirlemek […]

Hazır stil şablonları oluşturduğumuz HTML sayfalarının daha estetik görünmesi için kullanılır. Stil bilgilerini HTML sayfamızın içinde veya bir link yardımıyla sayfamızda kullanabiliriz.

<style type="text/css" rel="stylesheet">
<!--
      (Stiller burada verilir)
-->
   </style>

Eğer Stil dosyamızı bir link yardımıyla HTML‘e eklemek istiyorsak;

 <link href="stil.css" type="text/css" rel="stylesheet" />

olarak belirtiriz. Farkındaysanız stil dosyamızın sonu .css ile bitiyor. Stil dosyaları ayrı olarak kullanılıyorsa .css olarak kayıt edilir.

Stil (CSS) kodlarını girmek

Stil belirlemek için formatımız basit olarak .stil_ismi { stiltanımlamaları:stil; } şeklindedir. Still class’ını class=”stil_ismi” olarak HTML kodlarımız içinde belirtiriz. Örneğin;

 <a href="http://ilkteknoloji.com" class="stil_ismi" >Tıklayın</a>

Class’ın nasıl html içinde gösterileceğini de böylece gördük.

stil_ismi tanımından önce kullandığımız nokta ilgili stilin o isimli tüm class tanımlamaları için geçerli olduğunu anlatır. Yukarıda bu class’ı table ‘ a da yazsak, body’e de yazsak aynı stili alırız. Başına HTML kodu koyduğumuzdaysa ilgili class sadece o nesneye özel olur. Bunu örneklerle pekiştirelim;

   .fontrenk {
      font: 12px Tahoma, Verdana;
      color: #ccc;
   }

   table.fontrenk2 {
      font: 10px Tahoma, Verdana;
      color: red;
   }

Stillerimizi belirledik şimdi bunu html de kullanalım;

<a href="http://ilkteknoloji.com" class="fontrenk" >Tıklayın</a>
<!-- Stil dosyası bu link e etki eder --> 
<a href="http://ilkteknoloji.com" class="fontrenk2" >Tıklayın</a>
<!-- Stil dosyası bu link e etki etmez. Çünkü fontrenk2 table nesnesine özelleştirilmiştir. -->

Dikkat etmişseniz stil dosyalarını yazarken  ozellik: deger;  şeklinde yazıyoruz. Bu CSS’in genel yapısıdır. Şimdi çok kullanılan Stil özelliklerinin listesini aşağıdan inceleyelim.

Özellik Açıklama
background-color: renk; Arkaplan rengini belirleriz. renk yerine hex kodunu yazmalıyız.
background-image: url(‘dosya’); Arkaplan resmi belirleriz. dosya yazan yere resmin url si yazılır
background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceğini belirtir. 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.
font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur. Örneğin font:2px, Arial;
color: renk; Yazı rengi belirtilir
font-weight: bold; Kalın yazı
font-style: italic; Sağa yatık yazı
text-align: hiza; Metinleri hizalamak için kulllanılır. left sola, right sağa, center ortalanmış, justify iki yana hizalar.
width: deger; Boyutlandırmada Genişliği belirler
height: deger; Boyutlandırmada Yüksekliği belirler.
border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır.
border: boyut durum renk; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili, dashed = kısa çizgili) belirler. Örneğin border:1px solid #ccc;

HTML’i anlatırken CSS’e Giriş düzeyinde bir dersin daha sonuna geldik. Yukarıda gördüğümüz gibi herhangi bir koda class=”stil_ismi” özelliği eklersek ve css kodlarımızı sayfamızın uygun şekilde eklersek, ilgili nesne veya nesnelerle ilgili düzenlemeler gerçekleştirmiş oluruz.

En basit anlatımla CSS’in nasıl çalışacağını öğrendik. Bu başlangıç düzeyinde bir dersti. Daha fazla kafa karıştırmadan bu konuyu burda bitirmek giriş dersi için oldukça yerinde olacaktır. Şimdilik Sağlıcakla Kalın.

ITC | İlkteknoloji