Stil Şablonu (CSS) Temelleri

by H. ÇELİK · Published 25 Kasım 2017 · Updated 25 Kasım 2017

stil

CSS YAPISI

CSS’nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde “Özellik” ve “Değer” olarak iki kısma ayrılır.

secici

Seçici olarak tüm Html etiketleri, kimlik ve sınıf seçiciler kullanılır.
Bildirim bloğu { } süslü parantezler içine yazılır. Bildirimler arası ; noktalı virgül, özellik ve değer arasında : iki nokta üst üste kullanılır.
Özellik; stil özniteliğidir, Değer ise özniteliğe verilen değerdir.

Sınıf (Class) Seçici

Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir.

<html>
  <head>   
    <style type="text/css">
        .onemli { 
             color:#F00;
             font-weight:bold; 
             }
    </style>
  </head>
  <body>
      <p class="onemli" > Okulumuzdan İl Birinciliği </p>
      <h1 class="onemli " > Okulumuzdan İl Birinciliği </h1>
  </body>
</html>

<html>

<head>

.onemli {

color:#F00;

font-weight:bold;

}

</style>

</head>

<body>

<p class="onemli" > Okulumuzdan İl Birinciliği </p>

<h1 class="onemli " > Okulumuzdan İl Birinciliği </h1>

</body>

</html>

Kimlik (Id) Seçici

Sınıf seçicilerini birden fazla ögeye atayarak kullanabiliyorken; ID seçiciler yalnız bir ögeye atanır ve bir kez kullanılırlar.

<html>
  <head>   
    <style type="text/css">
       #haberbaslik { 
             text-align:center;
             color:blue;
             }
    </style>
  </head>
  <body>
      <p id="haberbaslik" >Bilişim Teknolojileri Alanı </p>
      <p > Bu paragraf stilimizden etkilenmez.</p>
  </body>
</html>

<html>

<head>

#haberbaslik {

text-align:center;

color:blue;

}

</style>

</head>

<body>

<p id="haberbaslik" >Bilişim Teknolojileri Alanı </p>

<p > Bu paragraf stilimizden etkilenmez.</p>

</body>

</html>

Etiket (Tag) Seçici

Etiket seçicileri aynı türden tüm ögelere, istenilen stili uygulamak için kullanılır.

Örneğin sayfadaki tüm karakterlerin boyutunun 20px olmasını için;

Body {  font-size:20px;  }

1	Body { font-size:20px; }

Örneğin sayfadaki bütün paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamak için;

p {  font-family: Arial; font-size: 16px; font-weight:bold;  }

1	p { font-family: Arial; font-size: 16px; font-weight:bold; }

CSS KULLANIM ALANLARI

Yerel Css

Yerel CSS, html belgesinin <body> bölümüne yazılır ve bir defaya mahsus olmak üzere sadece yazıldığı yerde etkili olur. Style parametresi ile özellikler yazılır.

Genel Css

Genel CSS, html belgesinin <head> bölümüne yazılır ve mevcut html dosyasının tamamı üzerinde etkili olur.

<style type="text/css">
   <!-- h3 {font-size:14pt; color:purple;}  -->
</style>

</style>

Bağlantılı (Harici) Css

Harici CSS, Global stil şablonu olarak da adlandırılır.

Hazırlanmakta olan sitenin aynı özelliklerde olmasının istenmesi durumunda kullanılır ve sitedeki tüm sayfalara etki eder.

Harici CSS de kodlar ayrı bir dosyaya yazılıp uzantısı .css olacak şekilde kaydedilir. Daha sonra html dosyası içerisinde yer alan <head> etiketleri arasına;

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

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

şeklinde yazılarak çağrılır.

CSS BİRİMLERİ

Uzunluk Birimleri

Göreceli uzunluk birimleri;

px: Ekran çözünürlüğüne göre değişen, ekranda bulunan noktalardan (piksel) bir tanesinin yüksekliğidir.
ex: Hangi yazı tipi seçilmişse o yazı tipindeki “küçük x” harfinin yüksekliğidir.
em: Varsayılan yazı büyüklüğünde (font-size) ve yazı ailesinde (font-family) yer alan “M” harfinin genişliğini baz alır.

Tüm tarayıcıların varsayılan yazı büyüklüğü (body etiketinde tanımlı) 16px’dir. 16px, 1em’e eşittir.

Kesin uzunluk birimleri;

in: inç’i (inch) ifade etmektedir,1 inç=2,54 cm’dir.
cm: Santimetreyi ifade etmektedir.
mm: Milimetreyi ifade etmektedir.
- Örnek: margin-left:10 mm (sol iç kenar boşluğu,10 mm)
pt: Point. (punto), standart baskı birimidir. (1pt = 1/72 inç)
- Örnek: font-size:14 pt
pc: Pika. Bir inçin 1/6’sına eşit olan baskı ölçü birimi. 1pc = 12 pt’dir.

Yüzde Birimleri

Yüzde (%) uzunluk birimi, göreceli bir birimdir. Yani body elemanında varsayılan yazı büyüklüğüne (font-size) bağlı büyüme-küçülme gösterir.

Örneğin body { font-size: 100%; } şeklinde bir kullanım, varsayılan tarayıcı yazı büyüklüğünün (16px) tamamını kullanacağı anlamına gelir, değişim olmayacaktır.

Fakat şu stil uygulanırsa; body { font-size: 62.5%; } normal yazı büyüklüğünün yüzde 62,5’ini kullandığı görülür. O da 12 px’lik bir değere karşılık gelmektedir. Sayfanın her yerinde aksi belirtilmedikçe bu değer geçerli olacaktır.

Renk Birimleri

RGB kodu Red (kırmızı), Green (yeşil) ve Blue (mavi) olmak üzere 3 rengi esas alan kodlama sistemidir.

Bu sisteme göre tüm renkler bu üç temel rengin karışımından oluşur.

Kırmızı renk için;

color: red;    			/* Renk adı ile belirlenmesi */ 
color: #F00    			/* Kısa RGB Kodu ile  */ 
color: #FF0000;   		/* Uzun RGB Kodu ile */ 
color: rgb(255, 0, 0);  	/* Tam Sayı Değer ile */ 
color: rgb(100%, 0%, 0%); 	/* Yüzde Değer ile */

color: red; /* Renk adı ile belirlenmesi */

color: #F00 /* Kısa RGB Kodu ile */

color: #FF0000; /* Uzun RGB Kodu ile */

color: rgb(255, 0, 0); /* Tam Sayı Değer ile */

color: rgb(100%, 0%, 0%); /* Yüzde Değer ile */

Ekler :

Sunu dosyasını indirmek için tıklayınız..

Dosya: StilSablonuTemelleri.pptx

İndirme: 977, Boyut: 1.3 MB, Eklenme Tarihi: 25 Kas. 2017

Stil Şablonu (CSS) Temelleri

You may also like...

Karşılaştırma İfadeleri

Ses Kartı

Ethernet Kartı