Anasayfa / Web Tasarım / Css / CSS’e Giriş (Ders 1)

CSS’e Giriş (Ders 1)

CSS(Cascading Style Sheets) HTML sayfaları içine gömülebilen bir dildir. CSS dilinin ana amacı belirtilen etiketlerinin görünümünde (stilinde) değişiklikler yapmaktır. Bu dilde yazılan kodlar bir web sayfasının görünümünde büyük değişiklikler yapabilmektedir. Buna rağmen sayfamızı statik web  sayfası olmaktan kurtaramıyor. (Statik web sayfası hakkında bilgi için tıklayınız.)

Css kodlarımızı yazmaya başlamadan önce onları nereye yazacağımıza bir bakalım. CSS kodları 4 farklı şekilde sayfamıza eklenebilir. Kod örnekleri “deneme” id’sine sahip olan div için uygulanacaktır.

1 – <style> Etiketi İle Sayfaya Gömülü

HTML kodlarımızdan olan <head> etiketi içerisine yazılan <style>…</style> etiketleri arasına yazılır. Sadece yazıldığı sayfa için geçerlidir.

<head>
   <style>
      CSS KODLARI BURAYA YAZILIR
   </style>
</head

2 – Satır İçi (In line)

CSS uygulayacağımız etiketin içerisine yazılır. Bunun için etiketin style=”” özelliği kullanılır, çift tırnak arasına CSS kodları yazılır. Sadece yazıldığı etiket için geçerlidir.

<div style="CSS KODLARI BURAYA YAZILIR"></div>

3 – Bir CSS Dosyasını Kaynak Göstermek

Bu yöntem her sayfaya ayrı ayrı kod yazmaktan daha kolay olduğu genellikle tercih edilir. Ayrıca güncelleme işlerinizde her sayfadaki kodları değiştirmektense sadece kaynak dosyasındaki kodları değiştirmemiz gerekeceğinden işlerimiz kolaylaşacaktır. Burada belirteceğimiz kaynak dosyası .css uzantısına sahip olmak zorundadır.

<head>
   <link rel="stylesheet" type="text/css" href="DOSYA KONUMU">
</head>

4 – @import Yöntemi

3 numaralı yöntem ile neredeyse aynıdır. Sadece HTML sayfasına eklenme şekilleri farklıdır.

<head>
   <style>
      @import "Dosya KONUMU"
   </style>
</head>

<div>…</div> Ve <span>…</span> Etiketleri

<div> ve <span> etiketleri bir html etiketidir. Html/CSS ortaklığında yazılan yazılarda css kodlarının etki edeceği kısımlar oluşturmak için kullanılır. Bunlardan <div> etiketi blok, <span> etiketi satır içi etikettir. Alabileceği özellikler başlıca class=”” ve id=”” dir. Bu özellikler aynı işleri yapmaktadır. Ancak bir css kodu class türünde belirtilmişse etiket içinde de class=”” şeklinde, id türünde belirtilmişse id=”” şeklinde çağrılmalıdır. (Sonraki yazımızda detaylı anlatılacaktır.)

Bir sonraki yazımızda görüşmek üzere

Hakkında Furkan Yağmur

Check Also

web-gemisi

CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

Nitelik Seçicileri Html etiketlerinin istenen parametresinin istenen değere sahip olduğu durumlarda css kodlarının devreye girmesini …

Bir cevap yazın

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