- \n
- CSS’in a\u00e7ilimi Cascading Style Sheet’tir<\/li>\n
- Sitiller(style) HTML nesnelerinin nasil g\u00f6r\u00fcnecegini tanimlar.<\/li>\n
- Sitil kullanimi HTML 4.0 ile beraber gelmistir.<\/li>\n
- Harici sitil sayfalarinin kullanimi bizim i\u00e7in zaman ve is kazanci demektir.<\/li>\n
- Harici sitil sayfalari CSS dosyalarinda saklanir.<\/li>\n<\/ul>\n
Basit Bir CSS \u00d6rnegi<\/h4>\n
\nLinkteki \u00d6rnekleri inceleyerek CSS hakkinda bir \u00f6n fikir edinebilirsiniz.<\/p>\n
\u00d6rnek<\/a> (\u00d6rneklerdeki Sayfalarin kaynak kodlarini g\u00f6r\u00fcnt\u00fcleyerek incelemenizi tavsiye ederim)<\/p>\n
Stiller Hakkinda<\/h4>\n
- \n
- HTML bir dokumani formatlamaya y\u00f6nelik etiketler bulundurmazdi.<\/li>\n
- HTML bir dokumanin i\u00e7erigini tanimlamak ile ilgilenirdi.
\u00d6rnek verecek olursak,
\n<h1>Bu bir Basliktir<\/h1>
\n<p>Bu bir paragraftir<\/p>\n<\/div><\/code>\n<\/li>\n<\/ul>\n \n<font> tagi ve color(renk) \u00f6zelligi gibi bilesenler HTML 3.2 ye eklendiginde, html elementleri i\u00e7in bu \u00f6zellikleri belirtmek web developerlar i\u00e7in bir kabus haline geldi. B\u00fcy\u00fck \u00f6l\u00e7ekli web sitelerinin gelistirilmesinde fontlarin ve renk bilgilerinin her sayfaya tek tek ekleniyor olmasi uzun ve pahali bir islem olmaya basladi. Bu problemi \u00e7\u00f6zebilmek i\u00e7in World Wide Web Consortium(W3C) CSS yapisini gelistirdi.<\/p>\n
\n HTML 4.0 ile t\u00fcm formatlama bilgileri html i\u00e7inden \u00e7ikarilarak ayri bir sayfada tanimlanabilir hale geldiler.<\/p>\n
\n G\u00fcn\u00fcm\u00fczde t\u00fcm tarayicilar CSS’i desteklemektedirler.<\/p>\n .<\/a>\n
CSS Kullanimi Zaman Kazandirir<\/h4>\n
- Css HTML elementlerinin nasil g\u00f6r\u00fcnecegini belirler.<\/li>\n
- Stiller .css uzantili ayri bir dosyada saklanirlar.<\/li>\n
- Harici sitil dosyalari, tek bir dosya \u00fczerinde yapilan d\u00fczenlemeler ile bir web sitesinde bulunan t\u00fcm sayfalarin nasil g\u00f6r\u00fcnecegini ve nasil yerlesecegini belirler.<\/li>\n<\/ul>\n
\u00d6rnek<\/h4>\n
\n\n<html>
\n<head>
\n<link rel="stylesheet" type="text\/css" href="hariciSitilDosyasi.css"\/>
\n<\/head>
\n<body>
\n<h1>
\nBu Bir Basliktir<\/h1>
\n<hr \/>
\n<p>
\nSitil Safasi tarafindan bi\u00e7imlendirilmis bir yazi<\/p>
\n<p>
\n<a href="http:\/\/www.yazilimmutfagi.com" target="_blank">Bu bir linktir<\/a><\/p>
\n<\/body>
\n<\/html><\/div><\/code>
\nCss dosyasinin i\u00e7erigi (hariciSitilDosyasi.css)<\/h4>\n
body {background-color:tan;}
\n h1 {color:maroon;font-size:20pt;}
\n hr {color:navy;}
\n p {font-size:11pt;margin-left:15px;}
\n a:link {color:green;}
\n a:visited {color:yellow;}
\n a:hover {color:black;}
\n a:active {color:blue;}\n <\/div>\n<\/code>\n
\nCSS S\u00f6zDizimi (Syntax)<\/h3>\n
Bir Css s\u00f6zc\u00fcg\u00fc iki ana par\u00e7adan olusur: Birincisi Se\u00e7iciler(selector) ve ikincisi ise Tanimlama Blogudur (declaration block).<\/p>\n
![\"CSS](\"http:\/\/www.yazilimmutfagi.com\/yuklenendosyalar\/ders\/css\/images\/D1\/resim1.jpeg\")
<\/p>\nSe\u00e7ici olarak adlandirdigimiz kisim sekillendirmek istedigimiz bir html elementidir. Tanimlama Blogu ise bu html elementi i\u00e7in sitil \u00f6zelliklerinin ayarlandigi kisimdir. En az birproperty(\u00f6zellik) ve Value(deger) kismindan olusur. Property hangi sitil i\u00e7in deger verecegimizi se\u00e7tigimiz kisimdir, her property bir value i\u00e7ermek zorundadir.<\/p>\n
CSS \u00d6rnegi<\/h4>\n
CSS tanimlamasi her zaman bir noktali virg\u00fclle biter ve bu tanimlamalarin hepsi bir s\u00fcsl\u00fc parantez blogu i\u00e7ine alinir.<\/p>\n
\n\np {color:black;text-family:Arial;}\n<\/div>\n<\/code>\n\n Css dosyalarinin daha rahat okunabilmesi ve anlasilabilmesi i\u00e7in her tanimlamadan sonra yeni bir satira ge\u00e7eriz. Css dosyamizin daha az yer kaplamasi i\u00e7in bazen t\u00fcm css kodlarini yan yana yazariz. Bu konuya ilerleyen derslerimizde deginecegiz.<\/p>\n\n
\n\n p
\n {
\n color:black;
\n text-family:Arial;
\n }\n <\/div>\n<\/code>\n\n<\/p>\nCSS A\u00e7iklama Satiri<\/h4>\n
A\u00e7iklama satirlari adindanda anlasildigi gibi CSS kodlarimizi a\u00e7iklamak i\u00e7in kullanilir ve sonradan kod \u00fczerinde bir d\u00fczenleme yapacagimiz zaman bize yardimci olurlar. A\u00e7iklama satirlari tarayicilar tarafindan g\u00f6z ardi edilir. Bir CSS a\u00e7iklama satiri
"\/*"<\/code> ile baslar ve"*\/"<\/code> ile biter. Bu ikisinin arasina yazacagimiz hersey tarayici tarafindan a\u00e7iklama olarak g\u00f6r\u00fcl\u00fcr ve herhangi bir isleme tabi tutulmaz.<\/p>\n
\nCSS ID ve Class Se\u00e7icileri<\/h4>\n
Belirli bir tipteki HTML elementi i\u00e7in tanimlanan sitillere ek olarak, CSS id ve class se\u00e7icilerini kullanmamizada izin verir.<\/p>\n
ID Se\u00e7icisi<\/h4>\n
\n ID se\u00e7icisi tanimladigimiz sitili sadece bir html elementi i\u00e7in ge\u00e7erli kilar. HTML elementine bir id veririz ve bu id i\u00e7inde bir sitil tanimlalariz, bu durumda tanimladigimiz sitil sadece bu element i\u00e7in ge\u00e7erli duruma gelir.<\/p>\n
\n ID se\u00e7icisi
"#"<\/code> isareti ile tanimlanir.
\n Asagidaki \u00f6rnegimizde id degeri "e1" olan HTML elementi i\u00e7in bir sitil tanimlanmistir
\n <\/p>\n .<\/a>\n\n\n\n #e1
\n {
\n color:yellow;
\n text-align:left;
\n }\n<\/div>\n<\/code>\n![\"Remark\"](\"http:\/\/www.yazilimmutfagi.com\/yuklenendosyalar\/ders\/css\/images\/alert.png\")
\nID se\u00e7icisine rakamla baslayan bir isim vermeyin. Bu Mozilla\/Firefoxda \u00e7alismaz\n<\/p>\n\nClass (Sinif) Se\u00e7icisi<\/h4>\n
\n Class Se\u00e7icisi bir grup html elementinin sitil \u00f6zelliklerini tanimlamak i\u00e7in kullanilir, ID se\u00e7icisinden farkli olarak sadece bir element i\u00e7in degil birden \u00e7ok elemente sitil atamasi yapar, css’de en sik kullanilan se\u00e7icidir.\n<\/p>\n
- \n
- Ayni class \u00f6zelligi atanmis t\u00fcm elementler i\u00e7in sitil atamasi yapmanizi saglar.<\/li>\n
- \nClass Se\u00e7ici isimlendirmesi “.” ile baslar. Yani se\u00e7ici isminin \u00f6n\u00fcne “.” isareti koyarak bunun bir class se\u00e7icisi oldugunu belirtiriz.\n<\/li>\n<\/ul>\n
Asagida basit bir class se\u00e7icisi tanimlamasi g\u00f6rebilirsiniz.<\/p> \n
\n\n.center {text-align:center;}<\/div>\n<\/code>\nSadece belirli tipteki HTML elementleri i\u00e7inde ortak bir class se\u00e7icisi tanimlayabilirsiniz. Bu durumda sadece o tipdeki HTML elemenleri bu sitil tanimlamasindan etkilenir. <\/p>\n
\n\np.center {text-align:center;}\n<\/div>\n<\/code>\nBirinci \u00d6rnekteki Class se\u00e7icisi atanmis t\u00fcm HTML elementleri i\u00e7in ge\u00e7erli iken, ikinci tanimlama sadece p (paragraf) tipi HTML elementleri i\u00e7in \u00e7alisacaktir. <\/p>\n
\nClass se\u00e7icisi i\u00e7in isimlendirmeyi harf ile baslatmayin, bu sadece Internet Explorerda \u00e7alisir diger tarayicilarda \u00e7alismayacaktir.\n<\/p>\n
\nBir HTML Sayfaya CSS Eklemenin 3 Farkli Yolu Vardir<\/h4>\n
- \n
- Harici CSS dosyasi ile<\/li>\n
- Sayfa i\u00e7inde dahili olarak<\/li>\n
- Satir i\u00e7inde (HTML elementlerin style tagini ayarlayarak (Inline)<\/li>\n<\/ul>\n
Harici CSS Dosyasi<\/h4>\n
\nEger sitil tanimlamasi birden fazla sayfa i\u00e7in kullanilacaksa Harici CSS Dosya<\/strong> yapisi en uygun olanidir. T\u00fcm bir web sitesinin g\u00f6r\u00fcn\u00fcs\u00fcn\u00fc tek bir sayfa \u00fczerinde degisiklik yaparak belirleyebilirsiniz. CSS dosyasini kullanmak istedigini sayfalarin head b\u00f6l\u00fcm\u00fc i\u00e7inde \nlink\n etiketi ile CSS dosyasini g\u00f6stermeniz gerekir.<\/p>\n\n
\n\n<head>
\n <link rel="stylesheet" type="text\/css" href="css_dosyasi.css" \/>
\n<\/head>\n<\/div>\n<\/code>\n\n\nCss Dosyasi herhangi bir HTML elementi i\u00e7ermemelidir.\n<\/p>\nCSS dosyasi hazirlamak i\u00e7in herhangi bir editor kullanabilirsin. Eger Kodlama i\u00e7in Visual Studio Kullaniyorsaniz, zaten baska bir editore ihtiya\u00e7 duymazsiniz, Css dosyaniz .css uzantili olmalidir. Basit bir CSS dosyasi i\u00e7erigi asagidaki gibi olabilir.<\/p>\n
\n\nbody {background-image:url("resimler\/arkaplan.gif");}
\np {margin-left:10px;}
\nhr {color:#CCC;}
\nfont-family:courier new;
\nfont-size:13px;\n<\/div>\n<\/code>\n\nCSS dosyasinda bir property i\u00e7in value tanimlarken birimler ile value arasinda bosluk birakmayin, bu css tanimlamanizin internet explorer disindaki tarayicilarda \u00e7alismamasina sebep olur. Yani margin-left:10px; yerine margin-left:10 px; gibi 10 ile px arasinda bosluk olan bir tanimlama yapmayin.\n<\/p>\n.<\/a>\nSayfa I\u00e7inde Dahili Olarak Kullanimi<\/h4>\n
Eger css ile tanimladigimiz sitil \u00f6zellikleri sadece tek bir sayfada kullanilacaksa, dahili css tanimlamasi yapabiliriz. Sayfanin head etiketi i\u00e7inde style etiketini kullanarak dahili bir css tanimlamasi yapabiliriz.<\/p>\n
\n\n<head>
\n<style type="text\/css">
\nbody {background-image:url("resimler\/arkaplan.gif");}\nhr {color:#CCC;}
\np {margin:10px;}
\n<\/style>
\n<\/head> <\/div><\/code>\nSatir I\u00e7i Kullanim (Inline)<\/h4>\n
\nSatir i\u00e7i kullanimi CSS e ait avantajlarin \u00e7ogundan faydalanamamiza<\/strong><\/em> yol a\u00e7ar, bu y\u00fczden bunu mecbur kalmadiginiz s\u00fcrece kullanmayiniz. <\/p>\n
Satir i\u00e7i sitil tanimlamasi i\u00e7in ilgili html elementinin style \u00f6zelligini kullaniriz. Style i\u00e7inde t\u00fcm css tanimlamalari kullanilabilir.<\/p>\n
\n\n<p style="color:#CCC;margin:10px">Bu Bir Paragraftir.<\/p>\n<\/div>\n<\/code>\n
\n\u00c7oklu Sitil Kullanimi<\/h3>\n
Eger ayni se\u00e7ici i\u00e7in sitil birden fazla CSS i\u00e7inde tanimlandi ise, ge\u00e7erli olan sitil su siraya g\u00f6re isler:\n<\/p>\n
- \n
- Satir I\u00e7in Tanimlama<\/li>\n
- Dahili Tanimlama<\/li>\n
- Harici Tanimlama<\/li>\n<\/ul>\n
\u00c7oklu kullanimda ayni se\u00e7ici i\u00e7in t\u00fcm sitil tanimlamalari birlestirilir, ayni \u00f6zelligi ayarlayanlar ise yukaridaki siraya g\u00f6re ge\u00e7erli olur. Bir \u00f6rnek verecek olursak<\/p>\n
Harici Css dosyasinda asagidaki tanimlamayi yapmis olalim.<\/p>\n
\nh3
\n {
\n text-align:left;
\n color:blue;
\n font-size:10px;
\n} <\/div>\n<\/code>\nDahili Css i\u00e7inde ise asagidaki tanimlama yapilmis olsun.<\/p>\n
\nh3
\n {
\n text-align:right;
\n font-size:12pt;
\n}<\/div>\n<\/code>\ntext-align ve font-size tanimlamalari ikisindede oldugu i\u00e7in dahili tanimlamadaki ge\u00e7erli olacaktir, color tanimlamasi sadece harici css dosyasinda oldugu i\u00e7in ge\u00e7erliligini korur. Bu durumda h3 se\u00e7icisi i\u00e7in ge\u00e7erli olan sitil tanimlamasi asagidaki gibi olur.<\/p>\n
\ncolor:blue;
\n text-align:right;
\nfont-size:12pt; <\/div>\n<\/code>\n\u00d6zetleyecek olursak satir i\u00e7inde tanimlanan bir sitil head etiketi i\u00e7inde tanimlanani ezer, head i\u00e7inde tanimlanan ise harici bir css tanimlamasini ezer<\/p>\n
\n\nBurada dikkat etmemiz gereken bir durumda sudur: Eger harici css dosyasi i\u00e7in tanimladigimiz baglanti head etiketi i\u00e7inde tanimladigimiz sitilden sonra yapildi ise harici dosyadaki tanimlama bu sefer head etiketi i\u00e7indeki tanimlamayi ezecektir.<\/i><\/p>\n.<\/a>\n
\n