CSS Sözdizimi Kuralları
Sözdizimi kuralları
Bir CSS sözdizimi üç parçadan oluşur. Nesne, özellik ve değer.
nesne {özellik: değer}
Nesne genelde HTML komut yada elementi olur. Özellik ise bu komut ya da elementlerin değiştirmek istediğiniz niteliğidir. Değer ise uygulayacağınız değişikliktir. Özellik ve değer parantez içerisinde bulunur.
body {color: black}
Not: Eğer değiştirmek istediğiniz değer iki kelime ise onları tırnak içine alın.
p {font-family: ?sans serif?}
Not: Eğer bir seferde birden fazla özellik değiştirmek istiyorsanız, bir özellik bittikten sonra araya noktalı virgül koyarak bir diğer özelliğe geçebilirsiniz.
p {text-align:center;color:red}
Bu stil tanımını daha anlaşılır hale getirmek için özellikler arasında boşluk bırakabilirsiniz.
p
{ text-align: center;
color: black;
font-family: arial}
Gruplama
Css?in kullanıcıya sağladığı en önemli kolaylıklardan bir tanesi bir stili birden çok nesneye tanımlayabiliyor olmamız. Mesela elimizde birden çok başlık var ve bu başlıkların hepsinin görünüşlerinin aynı olmasını istiyoruz. Eğer Css?den haberimiz olmasaydı her <h1> komutu ile birlikte bir çok nitelik tanımlamamız gerekecekti. Fakat Css sayesinde tüm başlıkları bir iki satırda istediğimiz şekle sokmak mümkün. Tek yapmamız gereken önce nesne olarak başlıkları belirlemek (aralarında virgül olacak şekilde) ve sonrada dilediğimiz özellik ve değerleri tanımlamak.
h1,h2,h3,h4,h5,h6
{color: green}
Sınıflandırılmış Nesne:
Elimizde 4 başlık ve 3 paragraf olduğunu düşünelim. Bu başlıklardan 3?ü aynı niteliklere sahip fakat birinci başlık daha farklı gözüksün isteyelim. Peki bunu Css ile yapmanın yolu nedir?
Tek yapmamız gereken şey farklı stiller kullanmak istediğimiz nesnelere sınıflandırma yapmak. Örneğin ilk başlık farklı olsun istiyoruz. Diğer tüm başlıklar sola dayalı dururken ilk başlık sayfanın ortasında olsun. Öncelikle HTML kodunda başlığa bir nitelik eklememiz gerek;
<h1 class?orta?>Bu bir baslik</h1>
Ben bu örnek için orta gibi bir sınıf isimi seçtim ama siz istediğiniz herhangi bir kelimeyi seçebilirsiniz (Türkçe karakter olmamasına dikkat edin).
Css dosyasında ise;
h1.class {text-align: center}
Diğer başlıkların h1,h2 ve h3 komutları ile yazıldığını varsayalım
h1,h2,h3 {text-align: left}
işte bu kadar : D
Örnek:
Bu örnekte üç farklı paragraftan ve 1?i diğerlerinden farklı 4 başlıktan oluşan bir HTML dosyası hazırlayacağız. Bunun için bir adet HTML sayfası (mavi renkli komutlar) ve bir adette Css sayfası (kırmızı renkli komutlar) hazırlayacağız. Css dosyasını bu örnekte deneme.css olarak isimlendirdim ve html dosyası içinde o şekilde tanımladım. Eğer css dosyanızın ismini değiştirirseniz html dosyası içinde de değiştirmeyi unutmayın.
<html>
<body>
<head><link rel="stylesheet" type="text/css" href="deneme.css"/>
</head>
<h1 class="center">CSS Deneme</h1>
<h1> 1. Paragraf </h1>
<p class="center">Bu bir paragraf</p><br>
<h2> 2. Paragraf </h2>
<p class="left">Bu bir paragraf</p><br>
<h3> 3. Paragraf </h3>
<p class="right">Bu bir paragraf</p><br>
</html>
</body>
body {background-color: tan}
h1.center {text-align: center; color:maroon; font-size:20pt; font-family: arial}
h1,h2,h3 {color:maroon; font-size:20pt; font-family: arial}
p.right {text-align: right; color: black; font-family: arial}
p.center {text-align: center; color: black; font-family: arial}
p.left {text-align: left; color: black; font-family: arial}
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com