CSS

CSS – Kod Yapısı

CSS Kod Yapısı

CSS Kod Yapısı iki temel bileşenden oluşmaktadır. Bunlardan birisi element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da birden daha fazla özelliği bildirdiğimiz ifade bölümüdür.

css-kod-yapisi

 

 

 

 

Seçim genel olarak stil vereceğimiz HTML elementidir. Örneğin h1, p, body gibi veya bizim belirleyeceğimiz class ve ıd şeklindedir. İfadeler ise tüm seçiciler de { özellik:değer; } şeklinde kullanılır.

CSS Kod Yapısı; Seçiciler ve İfadelerin Kullanımı

Seçicilerin ayrımını ve ifadelerin kullanımını ise şu şekilde inceleyebiliriz;

Class ( Sınıf ) Seçicisi

Sınıf seçicisi olan class birden fazla elemanda kullanılabilir. Örnek olarak “baslik” adında bir class oluşturarak başlıklarımızın rengini kırmızı, boyutunu 24 piksel ve hizasını ortalı olarak yapalım;

.baslik {
  color:red;
  font-size:24px;
  text-align:center;
}

Bu oluşturduğumuz class sayesinde HTML dosyamıza yazacağımız tüm başlıklara “baslik” classını vererek başlığımızın stilini belirleyebiliriz.

<h1 class="baslik">Yazımızın Başlığı</h1>
<h2 class="baslik">Yazımızın Başlığı</h2>
<h3 class="baslik">Yazımızın Başlığı</h3>

Id Seçicisi

Id seçicisi ise class seçicisinin tersine tek bir elemanda kullanılabilir. Örnek olarak “wmpaylasim” adında bir ıd oluşturarak yazımızın rengini yeşil, boyutunu 24 piksel ve hizasını sağ olarak yapalım;

#wmpaylasim {
  color:green;
  font-size:24px;
  text-align:right;
}

Bu oluşturduğumuz Id ile birlikte HTML dosyamızda sayfamızın alt bölümünde ( footer ) bulunan wmpaylasim.com bağlantısının stilini belirleyebiliriz. Farklı bir bağlantı veya paragraf gibi diğer öğelere bu stil Id sini daha önceden kullandığımız için kullanamayız.

<a id="wmpaylasim" href="https://wmpaylasim.com">WMPAYLAŞIM</a>

Etiket ( Tag ) Seçicisi

Etiket ( Tag ) seçicisi ise aynı türden olan tüm HTML etiketlerine uygulanır. Örnek olarak sayfamızda bulunan tüm paragraf ( p ) etiketlerinin yazı boyunu 12 piksel, hizasını ortalı olarak yapalım.

p {
  font-size:12px;
  text-align:center;
}

HTML sayfamızda yazacağımız tüm paragraflar yani;

<p>Paragraf ( P ) etiketi içerisinde ki tüm yazılar</p>

boyutu 12 piksel ve hizası ortalı olarak stil alacaktır.

CSS Açıklama Kullanmak

Her programlama dilinde kullandığımız gibi CSS dilinde de açıklama kullanabiliriz. Açıklama kullanmamız bize aradığımız bir kodu daha rahat bir şekilde bulmamıza yardımcı olur. Kullandığımız açıklamalar ise hiç bir şekilde kodlara zarar vermez ve kullanıcı görünümüne etki etmez. Açıklama kullanımını ise /*Açıklama*/ şeklinde kullanabiliriz. Örnek olarak;

/* Başlık ( Rengi Kırmızı, Boyutu 24 piksel ve Ortalı ) Başlangıç */

.baslik {
   color:red;
   font-size:24px;
   text-align:center;
}

/* Başlık Bitiş */

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu