css-logo
Web Tasarım

CSS Nedir? CSS Kodlarını Ekleme Yöntemleri Nelerdir?

CSS; Cascading Style Sheets, HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. Bu teknoloji tasarımcıyı fazladan kod yazmaktan ve zaman kaybından kurtarır.

CSS Kodlarının Yapısı

CSS kodyapısı seçim ve ifade bölümlerinden oluşmaktadır.

Seçim kısmı genel olarak stilini belirleyeceğimiz HTML elementidir. Bu etiketler x,y ,h1, a, body, p gibi etiketler olabilir.

İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında yer almaktadır.

CSS ifadesi her zaman noktalı virgül (;) ile biter. İfadeler bir süslü parantez içinde yer almaktadır.

h { color: blue; text-align: left}

Yukarıdaki aynı kodları bölersek şu şekilde yazılmalıdır:

h { color: blue; 

 text-align: left }

Diğer programlama dillerinde olduğu gibi HTML’de de bazen kullanıcıların görmeyeceği ancak bizim için referans olacak açıklamalar yazmak gerekebilir. Bu durum için CSS de /* açıklama */ kullanılmaktadır

h { /*başlık stilim*/ 

color: blue; text-align: left 

 }

3 çeşit css ekleme yöntemi vardır:

1.Satır içi CSS

Satır içi CSS, sadece istenilen satıra lokal olarak uygulanır. Küçük müdahalelerde tercih edilir.

<body>

<p style =”font-family=”verdana”>SATIR İÇİ CSS ÖRNEĞİ</p>

</body>

2.Sayfa içi CSS

Sayfa içi CSS, sayfamızdaki oluşturulan etiket odaklı çalışır. Yani örnekte “a” etiketine bazı özellikler tanımlanmıştır. Artık sayfadaki her “a” etiketini gördüğü yerde bunu uygular. 

<head>

<style type=”text/css”>

a{

font-family:Georgia, “Times New Roman”, Times, serif;

font-size:24px;

background-color:#FC0;

}

</style>

</head>

3.Harici Bir Sayfada CSS

Harici CSS de tıpkı yeni bir sayfa oluşturur gibi CSS sayfası oluşturulur. En çok tercih edilen yöntemdir. Oluşturulan sayfaya özellikler tanımlanıp kaydedilir. İstendiğinde hangi etikete ihtiyaç duyuluyorsa o etiket çağırılır.

baslik{

font-family:Arial, Helvetica, sans-serif;

font-size:20px;

background-color:#F63;

font-style:italic;

}

paragraf{

font-family:Arial, Helvetica, sans-serif;

font-size:15px;

background-color:#0F0;

}

metin{

font-family:”Times New Roman”, Times, serif;

font-size:15px;

background-color:#CCC;

font-style:italic;

}

 

Şimdi Paylaş

Bir cevap yazın

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

Göster
Kapat