Yazilim Mutfagi Dersleri ( CSS ) Ders 1 – CSS nedir, CSS nasil kullanilir

CSS

Bu dersimizde web sayfalari için sitil ve yerlesimleri CSS ile nasil kontrol edecegimizi ögrenecegiz.

Ders 1

Bu dersleri takip edecek kisinin temel HTML/XHTML bilgilerine sahip oldugunu farzedecegiz.

CSS Nedir

  • CSS’in açilimi Cascading Style Sheet’tir
  • Sitiller(style) HTML nesnelerinin nasil görünecegini tanimlar.
  • Sitil kullanimi HTML 4.0 ile beraber gelmistir.
  • Harici sitil sayfalarinin kullanimi bizim için zaman ve is kazanci demektir.
  • Harici sitil sayfalari CSS dosyalarinda saklanir.

Basit Bir CSS Örnegi

Linkteki Örnekleri inceleyerek CSS hakkinda bir ön fikir edinebilirsiniz.

Örnek (Örneklerdeki Sayfalarin kaynak kodlarini görüntüleyerek incelemenizi tavsiye ederim)

Stiller Hakkinda

  • HTML bir dokumani formatlamaya yönelik etiketler bulundurmazdi.
  • HTML bir dokumanin içerigini tanimlamak ile ilgilenirdi.
    Örnek verecek olursak,
    <h1>Bu bir Basliktir</h1>
    <p>Bu bir paragraftir</p>

<font> tagi ve color(renk) özelligi gibi bilesenler HTML 3.2 ye eklendiginde, html elementleri için bu özellikleri belirtmek web developerlar için bir kabus haline geldi. Büyük ölçekli web sitelerinin gelistirilmesinde fontlarin ve renk bilgilerinin her sayfaya tek tek ekleniyor olmasi uzun ve pahali bir islem olmaya basladi. Bu problemi çözebilmek için World Wide Web Consortium(W3C) CSS yapisini gelistirdi.

HTML 4.0 ile tüm formatlama bilgileri html içinden çikarilarak ayri bir sayfada tanimlanabilir hale geldiler.

Günümüzde tüm tarayicilar CSS’i desteklemektedirler.

.

CSS Kullanimi Zaman Kazandirir

  • Css HTML elementlerinin nasil görünecegini belirler.
  • Stiller .css uzantili ayri bir dosyada saklanirlar.
  • Harici sitil dosyalari, tek bir dosya üzerinde yapilan düzenlemeler ile bir web sitesinde bulunan tüm sayfalarin nasil görünecegini ve nasil yerlesecegini belirler.

Örnek

<html>
<head>
<link rel="stylesheet" type="text/css" href="hariciSitilDosyasi.css"/>
</head>
<body>
<h1>
Bu Bir Basliktir</h1>
<hr />
<p>
Sitil Safasi tarafindan biçimlendirilmis bir yazi</p>
<p>
<a href="http://www.yazilimmutfagi.com" target="_blank">Bu bir linktir</a></p>
</body>
</html>

Css dosyasinin içerigi (hariciSitilDosyasi.css)

body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}

CSS SözDizimi (Syntax)

Bir Css sözcügü iki ana parçadan olusur: Birincisi Seçiciler(selector) ve ikincisi ise Tanimlama Blogudur (declaration block).

CSS yapisi

Seçici olarak adlandirdigimiz kisim sekillendirmek istedigimiz bir html elementidir. Tanimlama Blogu ise bu html elementi için sitil özelliklerinin ayarlandigi kisimdir. En az birproperty(özellik) ve Value(deger) kismindan olusur. Property hangi sitil için deger verecegimizi seçtigimiz kisimdir, her property bir value içermek zorundadir.

CSS Örnegi

CSS tanimlamasi her zaman bir noktali virgülle biter ve bu tanimlamalarin hepsi bir süslü parantez blogu içine alinir.

p {color:black;text-family:Arial;}

Css dosyalarinin daha rahat okunabilmesi ve anlasilabilmesi için her tanimlamadan sonra yeni bir satira geçeriz. Css dosyamizin daha az yer kaplamasi için bazen tüm css kodlarini yan yana yazariz. Bu konuya ilerleyen derslerimizde deginecegiz.

p
{
color:black;
text-family:Arial;
}

CSS Açiklama Satiri

Açiklama satirlari adindanda anlasildigi gibi CSS kodlarimizi açiklamak için kullanilir ve sonradan kod üzerinde bir düzenleme yapacagimiz zaman bize yardimci olurlar. Açiklama satirlari tarayicilar tarafindan göz ardi edilir. Bir CSS açiklama satiri "/*" ile baslar ve "*/" ile biter. Bu ikisinin arasina yazacagimiz hersey tarayici tarafindan açiklama olarak görülür ve herhangi bir isleme tabi tutulmaz.


CSS ID ve Class Seçicileri

Belirli bir tipteki HTML elementi için tanimlanan sitillere ek olarak, CSS id ve class seçicilerini kullanmamizada izin verir.

ID Seçicisi

ID seçicisi tanimladigimiz sitili sadece bir html elementi için geçerli kilar. HTML elementine bir id veririz ve bu id içinde bir sitil tanimlalariz, bu durumda tanimladigimiz sitil sadece bu element için geçerli duruma gelir.

ID seçicisi "#" isareti ile tanimlanir.
Asagidaki örnegimizde id degeri "e1" olan HTML elementi için bir sitil tanimlanmistir

.
#e1
{
color:yellow;
text-align:left;
}

Remark ID seçicisine rakamla baslayan bir isim vermeyin. Bu Mozilla/Firefoxda çalismaz

Class (Sinif) Seçicisi

Class Seçicisi bir grup html elementinin sitil özelliklerini tanimlamak için kullanilir, ID seçicisinden farkli olarak sadece bir element için degil birden çok elemente sitil atamasi yapar, css’de en sik kullanilan seçicidir.

  • Ayni class özelligi atanmis tüm elementler için sitil atamasi yapmanizi saglar.
  • Class Seçici isimlendirmesi “.” ile baslar. Yani seçici isminin önüne “.” isareti koyarak bunun bir class seçicisi oldugunu belirtiriz.

Asagida basit bir class seçicisi tanimlamasi görebilirsiniz.

.center {text-align:center;}

Sadece belirli tipteki HTML elementleri içinde ortak bir class seçicisi tanimlayabilirsiniz. Bu durumda sadece o tipdeki HTML elemenleri bu sitil tanimlamasindan etkilenir.

p.center {text-align:center;}

Birinci Örnekteki Class seçicisi atanmis tüm HTML elementleri için geçerli iken, ikinci tanimlama sadece p (paragraf) tipi HTML elementleri için çalisacaktir.

Remark Class seçicisi için isimlendirmeyi harf ile baslatmayin, bu sadece Internet Explorerda çalisir diger tarayicilarda çalismayacaktir.


Bir HTML Sayfaya CSS Eklemenin 3 Farkli Yolu Vardir

  • Harici CSS dosyasi ile
  • Sayfa içinde dahili olarak
  • Satir içinde (HTML elementlerin style tagini ayarlayarak (Inline)

Harici CSS Dosyasi

Eger sitil tanimlamasi birden fazla sayfa için kullanilacaksa Harici CSS Dosya yapisi en uygun olanidir. Tüm bir web sitesinin görünüsünü tek bir sayfa üzerinde degisiklik yaparak belirleyebilirsiniz. CSS dosyasini kullanmak istedigini sayfalarin head bölümü içinde link etiketi ile CSS dosyasini göstermeniz gerekir.

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

Remark Css Dosyasi herhangi bir HTML elementi içermemelidir.

CSS dosyasi hazirlamak için herhangi bir editor kullanabilirsin. Eger Kodlama için Visual Studio Kullaniyorsaniz, zaten baska bir editore ihtiyaç duymazsiniz, Css dosyaniz .css uzantili olmalidir. Basit bir CSS dosyasi içerigi asagidaki gibi olabilir.

body {background-image:url("resimler/arkaplan.gif");}
p {margin-left:10px;}
hr {color:#CCC;}
font-family:courier new;
font-size:13px;

Remark CSS dosyasinda bir property için value tanimlarken birimler ile value arasinda bosluk birakmayin, bu css tanimlamanizin internet explorer disindaki tarayicilarda çalismamasina sebep olur. Yani margin-left:10px; yerine margin-left:10 px; gibi 10 ile px arasinda bosluk olan bir tanimlama yapmayin.

.

Sayfa Içinde Dahili Olarak Kullanimi

Eger css ile tanimladigimiz sitil özellikleri sadece tek bir sayfada kullanilacaksa, dahili css tanimlamasi yapabiliriz. Sayfanin head etiketi içinde style etiketini kullanarak dahili bir css tanimlamasi yapabiliriz.

<head>
<style type="text/css">
body {background-image:url("resimler/arkaplan.gif");} hr {color:#CCC;}
p {margin:10px;}
</style>
</head>

Satir Içi Kullanim (Inline)

Satir içi kullanimi CSS e ait avantajlarin çogundan faydalanamamiza yol açar, bu yüzden bunu mecbur kalmadiginiz sürece kullanmayiniz.

Satir içi sitil tanimlamasi için ilgili html elementinin style özelligini kullaniriz. Style içinde tüm css tanimlamalari kullanilabilir.

<p style="color:#CCC;margin:10px">Bu Bir Paragraftir.</p>

Çoklu Sitil Kullanimi

Eger ayni seçici için sitil birden fazla CSS içinde tanimlandi ise, geçerli olan sitil su siraya göre isler:

  • Satir Için Tanimlama
  • Dahili Tanimlama
  • Harici Tanimlama

Çoklu kullanimda ayni seçici için tüm sitil tanimlamalari birlestirilir, ayni özelligi ayarlayanlar ise yukaridaki siraya göre geçerli olur. Bir örnek verecek olursak

Harici Css dosyasinda asagidaki tanimlamayi yapmis olalim.

h3
{
text-align:left;
color:blue;
font-size:10px;
}

Dahili Css içinde ise asagidaki tanimlama yapilmis olsun.

h3
{
text-align:right;
font-size:12pt;
}

text-align ve font-size tanimlamalari ikisindede oldugu için dahili tanimlamadaki geçerli olacaktir, color tanimlamasi sadece harici css dosyasinda oldugu için geçerliligini korur. Bu durumda h3 seçicisi için geçerli olan sitil tanimlamasi asagidaki gibi olur.

color:blue;
text-align:right;
font-size:12pt;

Özetleyecek olursak satir içinde tanimlanan bir sitil head etiketi içinde tanimlanani ezer, head içinde tanimlanan ise harici bir css tanimlamasini ezer

Remark Burada dikkat etmemiz gereken bir durumda sudur: Eger harici css dosyasi için tanimladigimiz baglanti head etiketi içinde tanimladigimiz sitilden sonra yapildi ise harici dosyadaki tanimlama bu sefer head etiketi içindeki tanimlamayi ezecektir.

.

Tags:

3 thoughts on “Yazilim Mutfagi Dersleri ( CSS ) Ders 1 – CSS nedir, CSS nasil kullanilir

Bir cevap yazın

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