CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), HTML’e (Hyper Text Markup Language) (zengin metin işaretleme diline) ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir doküman biçimlendirme dili ve web teknolojisidir.

İnternet sayfaları için genel şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak da sayfaların, alanların, arka planların, formların, butonların, input’ların (girişlerin), resimlerin, videoların, seslerin ve dokümanlar gibi dosyaların, metinlerin, tuvallerin vs. gerek stillerini (renk, yazı tipi, boyut vs.), gerek konumlarını, gerekse de özelliklerini değiştirmek için de kullanılabilir. CSS’in en önemli özelliği kullanımındaki esnekliktir. Genellikle bir web sayfası içerisinde birbiriyle uyumlu birkaç renk, birkaç yazı tipi, birkaç taslak vs. stiller kullanılır. Kullanılan bu stilleri her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir defa tanımlayıp bütün web sayfalarında ortak olarak kullanabiliriz. Bu sayede sayfaların hafızadaki boyutunu hatırı sayılır bir oranda küçülecek, değişik HTML sayfalarında kullanılmasını da sağlayacak, aynı sayfanın değişik aygıtlara göre formatlandırılmasını da kolaylaştıracak olup, sunumla yapıyı ayırarak değişiklik yapılmasını da kolaylaştıracaktır. 

CSS kuralları üç parçadan oluşur. Her CSS kuralı bir seçici ve bir tanımlama bölümüne sahiptir. Tanımlama bölümü de bir özellik ve bir değerden meydana gelir.

seçici { özellik:değer }


Bir CSS  kuralında seçici olarak bir HTML ögesinin ismi, kimliği veya sınıfı kullanılabilir.

body, div, p, a, span vs.


CSS kurallarında özellik olarak ise sadece belirli tanımlı maddeler kullanılabilir. Değer olarak ise her özelliğin alabileceği kendi değerleri vardır. Tanımlama bölümünde birden fazla özellik giriliyorsa aralarına ; (noktalı virgül) koyulmalıdır. Sadece tek bir değer girilecek olur ise sonuna ; (noktalı virgül) koyulmayabilir ancak değerin sonuna ; (noktalı virgül) eklemenin hiçbir sakıncası yoktur.

body{ background-color:black; }
div{ font-size:10px; font-color:blue; }

Aynı değerleri vereceğimiz iki seçiciyi aralarına , (virgül) koyarak tek seferde tanımlayabiliriz

body, div, p, a, span { font-size:12pt; font-color:black; }


CSS kodları HTML’in sayfa içeriğinde head veya body tag’ları (etiketleri) içerisine yazılabilir. CSS kodlarının, HTML dosyasına eklenmesi ise dört farklı şekilde yapılabilir.


HTML dosyası harici CSS dosyasına / dosyalarına referans verebilir.

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

HTML dosyası tag (etiket) içi CSS içerebilir.

<div style="color:red;">...</div>

HTML dosyası satır içi CSS içerebilir.

<style>

div{ color:red; }

</style>

Javascript dili kullanılarak HTML dosyasına CSS eklenebilir.

<script type="text/javascript" language="javascript">

var islem = document.createElement("style");

islem.type = "text/css";

islem.innerHTML = "div { color:red; }";

document.body.appendChild(islem);

</script>

Yorum Gönder

Daha yeni Daha eski