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.

<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.

DAHA FAZLA İÇERİK

Örümcek Robot Sneak Monster Örümcek Robot Sneak Monster

5 Ocak 2015, Pazartesi

iPhone’lara Türkçe Siri iPhone’lara Türkçe Siri

3 Ocak 2015, Cumartesi

SİZDE YORUM YAPIN

Samsung Gear S2 Fiyatı ve Özellikleri

Samsung Gear S2 Fiyatı ve Özellikleri 28 Kasım 2015, Cumartesi

Samsung Galaxy S6 Edge Plus İnceleme

Samsung Galaxy S6 Edge Plus İnceleme 15 Ağustos 2015, Cumartesi

Android Öğreniyorum Android Dersleri

Android Öğreniyorum Android Dersleri 5 Mayıs 2016, Perşembe