Serdar Demir

Css giriş;

Css web sayfalrımıza stil eklemek için kullandığımız bir kodlamadır. Sitemizin biçimlendirmesini kolay bir şekilde yapmamızı sağlar örneğin binlerce sayfalık bir siteyi tek bir css kodu ile biçimlendirebiliriz.

<h1><font color=”blue”>www.serdardemir.net</font></h1> sitemizde bir çok başlık oldugunu düşünürsek her başlığa bu özelliği kazandırmak için bu değişikliği yapmak zorundayız. Oysa css kullanarak

h1 {color:blue} yazmamız bütün başlıkları mavi yapmamızı sağlar J

harici css dosyasının kullanımı;

p{color:red};

a{ color:blue };

css kodlarımızı .css uzantılı bir dosyaya kaydederiz.

Daha sonra bu kodu gereken sayfalarımıza uygularız.

<link rel=”stylesheet” href=”ornek.css”/> bu yöntemin en büyük avantajı bir kere yazılan kodun tüm sayfalara eklenebilmesidir.(tekrar yüklenmemesi bize hız kazandıracaktır)

@import metodu ile css eklemek

<style type=”text/css”>@import “ornek.css”; </style>

Sınıf seçiciler;

Sitemizde aynı elemanlara farklı özellikler verme ihtiyaçı duyduğumuzda kullanırız

<style type=”text/css”>

p.sagahizala{text-align:right;}

p.ortala{text-align:center;  }

</style>

<p class=”sagahizala”>serdardemir dasda dadsda</p>
<p class=”ortala”>bu yazı ortalacak</p>

Eğer css tanımlarken .sagahizala veya .ortala yamış olsaydık bu classı bütün seçicilerde kullanabiliriz

<h1 class=”sagahizala”>serdardemir dasda dadsda</h1>
<p class=”ortala”>bu yazı ortalacak</p>

Çocuk seçiciler

Bu durumu daha ayrıntılı bir ayrım yapmak istediğimizde kullanabilirir örneğin h1 kontrolünün strong olanlarına bir css uygulamak istediğmizde çocuk seçiciyi kullanırız. Eğer araya ekstra bir özellik girerse başlık css ten etkilenmez.

<style type=”text/css”>
h1>strong{color:red
}
</style>

<h1>bu kısıma <strong>Çocuk Seçici</strong> uygulanacaktır</h1>
<h1>bu<em>koddaki<strong>bu kısım</strong></em>uygulama dısıdır</h1>