CSS Nedir

CSS Nedir? Cssin alm ile sze balayalm. Cascading Style Sheets.
Biz ksaca konularmz dahilinde Stil ablon olarak bahsedeceiz. Gelelim Stil ablonun varolu amacna. Sizinde bildiiniz zere Html yazm ekli olarak etiket trnde bir yazm dili. Bu yzden pek fazla zelliklere sahip deil. Bu sahip olamad zellikler nedeniyle sayfann dizaynnda bize tam esneklik veremiyor. Css bu amala retilmi bir dil. Kullanm kolayl ve kullanll ile Htmle eklenmesinden itibaren ou web tasarmcsnn gzdesi oldu. nk her trl sayfa dizaynn bize brakarak mthi bir esneklik salyor. Ayrca ileriki konularmzda bahsedeceimiz zere balantl stil ablonlar aracl ile de birden ok sayfaya etkiyebiliyor. Bu da bize sitenin grnmn deitirmek istediimizde elimizdeki onlarca belki de yzlerce sayfann kodlarn deitirmeden sadece css dosyasnn deitirerek bu imkan salyor. Stil ablonun tarayclara eklenmesinden sonra iki versiyonu kt. Bunlar Css 1 ve Css 2. Ayrca baz konularda MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayclar ayn kodlar kabul etmiyorlar. Biz derslerimizde her iki taraycda da etkin olan veya etkin olmayp dizayn bozmayan (A:hover gibi) Stil ablon zelliklerini greceiz. imdi derslerin ieriinde neler var onlar grelim : 1. Stil ablon eitleri : Cssin en ok beenilen yn istendiinde sadece bir eye etkimesi, istendiinde tm sayfaya etkimesi, istendiinde site iindeki tm html dosyalarna etkimesidir. Bunlar ksaca Stil ablonun kullanm eitleridir. 2. Html etiketleri ile Css : Bu dersimizde Htmldeki font,background gibi eitli zelliklerin Stil ablon tarafndan nasl belirlenebileceini greceiz. 3. Seiciler (Selectors) : Kimi zaman Html etiketlerinden fontu hepimiz kullanrz. rnein bir sayfa ierisinde font etiketine birden ok grnm eklemek isteriz. Bu durumda seiciler imdadmza yetiir. Bu dersimizde de seicilerin nasl kullanldn ve yazm kurallarn renceiz. 4. Genel kullanm ekilleri : Bu dersimizde ise A (link) etiketinin eitli kullanm biimleri ile birlikte bir Stil ablonun nasl kullanrsak iimize daha fazla yarayacan greceiz. Siz buradaki kullanm tarzna gre Cssi kullanrken kendinize nasl bir yn izleyeceinize karar vereceksiniz. CSS eitleri Cssin (Stil ablonu) 3 farkl kullanm alan vardr. Bunlar ; Yerel, yani sayfada sadece bir kez: Yerel stil ablonlar bir html etiketi iin zel olarak kullanlrlar. Global, yani tm sayfa iin: Global stil ablonlar sayfadaki tm html etiketlerinin belirlenen zellikte olmas istendiinde kullanlrlar.
Balantl, yani birden ok sayfa iin: Balantl stil ablonlar birok sayfada ayn biimde olmas istendiinde kullanlrlar. 2.1 Yerel Stil ablonu Balangta belirttiimiz gibi Yerel Stil ablonlar, uygulanacak etiketi sadece bir kez bulunduu yerde (yerel) etkiler. imdi bir rnek verelim. <html> <head> <title>Css</title> </head> <body> <h2>Web Teknikleri</h2><br> <h2 style="font-size:20pt; color:blue">Web Teknikleri</h2> </body> </html> Bu rneimizi css.htm adyla kaydedip tarayc yardmyla atmzda iki tane Web Teknikleri yazsyla karlacaz. Fakat bunlarn yazm tarz farkl olacak. nk biz ikinci <h2> etiketimize etkimek zere bir stil ablon ekledik.
2.2 Global Stil ablonu Global Stil ablonlar bir nceki rnekte yaptmz <h2> etiketinin tm sayfada ayn zellikte olmas istendiinde kullanlr. Bunu iin Stil ablon zellikleri sayfann balangcnda (<head></head> etiketleri arasnda) tanmlanmaldr. rnek ile biraz daha ayrntl inceleyelim. <html> <head> <title>Css</title> <style type="text/css"> <!-h2 {font-size:20pt; color:blue} --> </style> </head> <body> <h2>Web Teknikleri</h2> </body> </html> Burada ne yapm olduk? Sayfa ierisinde kullanacamz tm <h2> etiketlerinin zelliklerini sabitlemi olduk. Yani sayfa ierisinde nerede kullanrsanz kullann <h2> etiketinin stil zellikleri hep ayn olacaktr. Yazm kurallarna biraz deinirsek, Stil ablon tanmlamalar <head> </head> etiketleri arasnda <style type="text/css"> ile balayp </style> ile bitmelidir.  etiketi ile son bulur. 2.3 Balantl Stil ablon Global stil ablonu ise sitemiz ierisindeki tm sayfalarda ayn stil zelliklerini kullanmak istediimizde kullanrz. Her zaman olduu gibi stillerimizi yukarda rneklerini verdiimiz ekilde hazrlarz. Fakat bunu html dosyamzn ierisinde deil de bo bir sayfaya yazarz. Sonra onu kaydederken css uzantl bir ekilde kaydederiz. Ardndan da html dosyamzn ierisine yine <head> </head> etiketleri arasna <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> eklinde ekleriz. imdi hemen bir rnek verelim. h1 {font-size:13pt; color:green} h2 {font:20pt; color:blue} h3 {font-size:15pt; color:red} Bu dosyamz stil.css olarak kaydedelim. imdi de html dosyamza gelelim. Html dosyamzn kodlar da u ekilde olmaldr. <html> <head> <title>Css</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <h1>Web Teknikleri</h2> <h2>Web Teknikleri</h2> <h3>Web Teknikleri</h2> </body> </html> Html dosyasnn kodlar arasnda geen <link rel="stylesheet" type="text/css" href="stil.css"> kodu stil.css dosyasndaki stil zelliklerini kullanmamz salar. Bu kodu istediimiz dier html dosyalarna da eklediimizde orada da kullanabiliriz.
Bylelikle her sayfada stil zellikleri tanmlamam, balangta tanmladmz stil zelliklerini kullanarak hem koddan tasarruf etmi oluruz hem de paradan :) HTML etiketleri ile CSS Biz bundan sonraki tm Stil ablon rneklerimizde Global Stil ablonu kullanacaz. Bu yzden Css ile Html dosyalarmz beraber olacak bylece de konuyu kavrama ve annda uygulamanz daha kolay olacak. imdi Cssin etkidii Html etiketlerini hangi zelliklerini deitirdiini grelim. 3.1. Font zellikleri Ad zerinde Font zelliklerini deitirmeye yarayan bir stil ablon zelliidir. Nasl kullanldna hemen bir bakalm. <html> <body> <head> <title>Css</title> <style type="text/css"> <!-p { font-size : 12pt; font-family : Arial; font-weight : bold; font-style : italic; color : #00FFFF; } --> </style> <body> <p>Web Teknikleri</p> </body> </html>
Alt zellikleri tanyalm. font-size : Font bykln belirtir. sterseniz aadaki gibi standart deerleri seersiniz; xx-large (en byk ) x-large (biraz byk) large (byk) medium (orta) small (kk) x-small (biraz kk) xx-small (en kk) isterseniz direkt olarak punto (pt) deerini verebilirsiniz.
font-family : Font tipini belirler. Arial, Courier, Verdana gibi font isimlerini alabilir.
font-weight : Fontun kalnl incelik durumunu belirler. bold : Fontu kaln yapar. normal : Fontun normal halde olmasn salar. Bu zellik yazlmadnda normal zellik alnr.
font-style : Fontun yatk olup olmamasn salar. italic : Yaznn saa doru yatk olmasn salar. normal : Fontu normal halde olmasn salar. Bu zellik yazlmadnda normal zellik alnr.
color : Fontun rengini belirler. Blue, red,green gibi renklerin ingilizce karlklarn alabilir. 3.2 Text zellikleri Text zellii ile de font zelliinin sahip olmad baz zellikleri etiketimize ekleriz. rnek ile aklayalm. <html> <body> <head> <title>Css</title> <style type="text/css"> <!-p{ text-transform : lowercase; text-decoration : underline; text-align : left; line-height : 20px; text-indent : 15px; } --> </style> <body> <p>Web Teknikleri</p> </body> </html>
Alt zellikleri tanyalm. text-transform : lowercase : Yaznn tmnn kk harf olmasn salar. uppercase : Yaznn tmnn byk harf olmasn salar. capitalize : Yaznn istenilen ekilde kalmasn salar. text-decoration : underline : Yaznn altnn izili olmasn salar. overline : Yaznn stnn izili olmasnn salar. line-through : Yaznn stnn izili olmasn salar. none : Yaznn herhangi bir yerine izgi ekilmemesini salar. text-align: left: Yaznn sola bitiik olmasn salar. center : Yaznn ortada olmasnn salar. right : Yaznn saa bitiik olmasn salar. line-height :Yaznn normal satrdan izgi yksekliini belirler. 3px, 5px gibi deerler alr.
text-ident : Yaznn soldan ne kadar bolukla ieriden balayacan belirler. 5px, 10px gibi deerler alr.
3.3 Background zellikleri Background ile html sayfamzn arkafonlarnn zelliklerini deitirmemizi salar. <html> <body> <head> <title>Css</title> <style type="text/css"> <!-p{ background-color :#00ff00; background-image : url ("resim_adi.gif"); background-position : center; background-repeat : repeat-y; } --> </style> <body> <p>Web Teknikleri</p> </body> </html>
background-color : Arka fonun rengini belirler. Csste renkleri blue, red gibi tanmlayabileceimiz gibi Html kodunu vererek de tanmlayabiliriz. background-image : Arka fonu bir resim dosyas yapmak iin kullanlr. url etiketinin iine resim dosyasnn yolu ve ismi tam olarak yazlmaldr. background-position : left : Arka fondaki resmin sadece sol tarafta olmasn salar. center : Arka fondaki resmin sadece sol tarafta olmasn salar. right : Arka fondaki resmin sadece sol tarafta olmasn salar. background-repeat : Arkafondaki resmin tekrarlanmas istendiinde kullanlr. repeat : Tm ynlerde tekrar edilmesini salar. repeat-x : X (yatay) ynnde tekrar edilmesini salar. repeat-y : Y (dikey) ynnde tekrar edilmesini salar. no-repeat : Resmin tekrar edilmeyerek bir kere gsterilmesini salar.
3.4 List zellikleri Bu Css zellii <ul> ve <li> html etiketleri ile oluturduumuz listelerin zelliklerini belirlemek iin kullanlr. <html> <body> <head> <title>Css</title> <style type="text/css"> <!-li { list-style-type : circle;
list-style-position : inside; list-style : decimal; list-style-image : url ("resim.gif"); } --> </style> <body> <ul> <li>Web Teknikleri <li>Html <li>Javascript <li>Css <li>Web Grafik </ul> </body> </html>
list-style-type : disk : Liste biiminin disk (ii dolu yuvarlak) eklinde olmasn salar. circle : Liste biiminin ember eklinde olmasn salar. square : Liste biiminin kare olmasn salar. decimal : Liste biiminin rakamlardan olumasn salar. lower-roman : Liste biiminin i,ii,iii, gibi roma rakamlarnn kk harfi olmasn salar. upper-roman: Liste biiminin I,II,II gibi roma rakamlarnn byk harfi olmasn salar. lower-alpha : Liste biiminin a,b,c eklinde olmasn salar. upper-alpha: Liste biiminin A,B,C eklinde olmasn salar. none : Listenin imgesiz olmasn salar. list-style-position : inside : Listenin ikinci satrnn en soldan balamasn salar. Outside : Listenin ikinci satrnn ilk satr ile ayn yerden balamasn salar. list-style-image : Liste biiminin resim olmasn salar.
3.5 Position zellii Htmlde kullandmz Layer (katman) etiketlerinin html zerindeki yerletirme ilemi iin kullanlr. Hemen bir rnek ile grelim. <html> <head> <title>Css</title> <style type="text/css"> <!-div { position:absolute; top:20px; left:10px; width:200px; height:200px; clip:auto; overflow:scroll; z-index:auto; visibility:visible; } -->
</style> <body> <div> Web Teknikleri<br> Html<br> Javascript<br> Css<br> Grafik<br> </div> <p> Web Teknikleri </body> </html>
position : absolute : Katmann yerinin kesin olarak belirlenmek istendiinde kullanlr. relative : Katmann yerinin greli(dier elere gre deiebilen) olarak belirlenmek istendiinde kullanlr. static : Katmann yerinin sabit olarak belirlenmek istendiinde kullanlr. top : Katmann st ksmdan ka piksel aada olmas gerektiini belirler. left : Katmann sol ksmdan ka piksel aada olmas gerektiini belirler. width : Katmann geniliinin ka piksel olacan belirler. height : Katmann boyunun ka piksel olacan belirler. clip : Katmann grnmesi istenen blgeyi ieren kutucuk. overflow : Katmann belirtilen ykseklik ve genilie smayan ksmna ne olacan belirler. auto : Otomatik olarak belirlenir. scroll : Kaydrma ubuklar ekler. visibility : Katmann grnebilirlik ayar yapar visible : Grnr hale getirir. hidden : Gizler. z-index : Katmann sayfa zerindeki sra says. Seiciler (Selectors) Csste seiciler en ok kullanlan elerdendir. rnein <h1> etiketine Css yardmyla belli bir ablon yklediniz. Ama sayfanzda kullanacanz <h1> etiketlerinin tmnn ayn ekilde olmasn istemiyorsunuz. Bu durumda bize seiciler yardmc olur. ki eit seici greceiz. Bunlar : Id Selector (Id seicisi) Class Selector (Snf Seicisi)
4.1 Class Selector (Snf Seicisi) Bu seiciyi sayfanzdaki <h1> gibi etiketlerin tmnn ayn olmasn istemediiniz durumlarda kullanrz. Bylelikle genel baz zellikleri koruyarak farkl zellikleri zelletirebilirsiniz. Snf seicisinin iki tr vardr. lk nce birinci eklini grelim. Hemen bir rnekle bu seiciyi tanyalm.
<html> <head> <title>Css</title> <style type="text/css"> <!h1.mavi {color:blue} h1.kirmizi {color:red} --> </style> </head> <body> <h1 class=mavi>Mavi snf seicisi ile </h1><br> <h1 class=kirmizi>Krmz snf seicisi ile </h1> </body> </html> Burada snf seicisini sadece <h1> iin tanmladk. Snf seicisinin ikinci tr de genel bir snf seicisi tanmlamaktr. Bunu da bir rnekle grelim. <html> <head> <title>Css</title> <style type="text/css"> <!.mavi {color:blue} .kirmizi {color:red} --> </style> </head> <body> <h3 class=mavi>Mavi snf seicisi ile </h1><br> <h4 class=kirmizi>Krmz snf seicisi ile </h1> </body> </html>
4.2 Id Selector (Id Seicisi) Id Selectorlerini tanmlayc adlarnn nndeki # iaretinden tanrz. Html belgesinde kendi tanmlayc adlarna gnderme yaparak herhangi bir Html etiketine stil vermekte kullanlrlar. Bu etiketler spandan tutunda paragraf(p)a kadar olabilir. Bir rnekle aklayalm. <html> <head> <title>Css</title> <style type="text/css">  #mavi { background:blue; color:white; } #yesil { background:green; color:white; } --> </style> </head> <body>
<span id=mavi>Bu yaznn arkafon rengi mavi font rengi beyaz</span><br><br> <span id=yesil>Bu yaznn arkafon rengi yeil font rengi beyaz</span> </body> </html> Genel kullanm Cssi Html zerinde kullanmak iin 3 yntem (yerel-global-balantl) olduunu daha nce belirtmitik. imdi ise komple bir css dosyasn Html zerinde nasl kullanacamz grelim. Fakat ncelikle Htmldeki <a> etiketinin dier etiketlerden farkl olarak bir kullanm tarz bulunmakta. lk nce ona deinelim. A etiketinin Css ile kullanm Bildiiniz zere <a> etiketi Htmle ok byk bir zellik katan link etiketidir. Bu etiket ile dier bir web sayfasna veya bir mail adresine gnderme yapabiliriz. Bu etiketin belli durumlarda ald deiik deerler vardr. Yani link tklandnda etiket artk visited (ziyaret edilmi) pozisyonuna geecektir. Biz Css yardmyla <a> etiketinin ald posizyonlara istediimiz biimi verebiliriz. imdi <a> etiketinin ald pozisyonlar grelim : lk poziyon linke herhangi bir tklama olmadndadr. Bu deer linkin sayfada grlecek ilk halidir. Visited : Bu pozisyon link tklandndan sonra etiketin ald deerdir. Active : Bu pozisyon linkin aktif olduu durumdur. Yani imle linkin tkland andaki durumdur. Hover : Bu pozisyon Linkin zerine gelindii durumdur. Yani linkin zerine gelindiinde nasl bir biimde olmas isteniyorsa stil o ekilde verilir. imdi <a> etiketi iin bir stil dosyas yapalm. <html> <head> <title>Css</title> <style type="text/css"> <!A.normal { background-color:white; color:blue; } A.ziyaret:visited { background-color:white; color:maroon; font-weight:normal; } A.aktif:active { background-color:white; color:red; font-weight:normal; } A.degisken:hover { background-color:blue; color:white; font-weight:bold; } --> </style> </head> <body> <a href="#" class="normal">Linkin normal durumu</a><br> <a href="#" class="ziyaret">Linki tklayn ve deitiini grn</a><br>
<a href="#" class="aktif">Linkin aktif durumu</a><br> <a href="#" class="degisken">Linkin zerine geldiinde stil deiecek</a><br> </body> </html> imdi <a> etiketinin zel durumunu da grdkten sonra esasl bir css kullanma tekniini grelim. Bu rneimizde <div>, <table>, <span>, <h1>...<h6>, <p>, <a> gibi Html etiketlerini kullanrken nasl bir yntem izlememiz gerektiini greceiz. lk ncelikle stillerimiz hem balantl hem global hem de yerel kullanacaz. Bunu belirteyim. Bylelikle sizde nasl bir yol izlemenize karar verin. imdi balantl css dosyamz hazrlayalm. Hatrlayacanz zere bu dosyann uzants css olmal. Bu css dosyasn Html dosyamzn ierisinde aracaz. Aadaki kodlar stil.css adyla kaydedelim. A {font-style : normal; color : navy; font-family : Times New Roman ! important; text-decoration : none; } A:Visited {font-family : Times New Roman ! important; font-style : italic; color : olive; } A:Active { font-family : Times New Roman; color : red;} A:Hover {text-decoration : underline; font-family : Times New Roman ! important; font-weight : bold; font-style : normal; color : maroon;} BODY { background: white url("fon.gif"); background-repeat: repeat-y; background-position: left; } p#sol {position : relative; visibility : visible; left : 30pt; width : 450pt; font-family:"Verdana,Arial,Helvetica" ! important; font:15pt;} Aadaki kodlar da css.html adyla kaydedelim. (Dikkat ! html uzantl kaydedin ) <html> <head> <title>Css</title> <style type="text/css"> <!-.onemli {font-weight:bold;} h4 {color:blue; position : relative; visibility : visible; left : 25pt; font-size:large; .solic { color:brown; font-family:"Verdana,Arial,Helvetica"; position : relative; visibility : visible; left : 20pt; font-weight:bold; } li { list-style-type : circle; list-style-position : inside; list-style : decimal;} ; --> </style>
<link rel=stylesheet href="stil.css" type="text/css"> </head> <body> <table width="500" align="center"> <tr><td>  <h4>Bilgisayar;<a name="bsl"> </a></h4>   <p id="sol"> Ald komutlar uyarnca, veri ileyerek problem zen otomatik elektronik aygtlarn ortak ad. Bu tr aygtlar, alma ilkeleri,donanm tasarmlar ve uygulama alanlar bakmndan rneksel, saysal ve karma bilgisayarlar olarak <font class="onemli">e</font> ayrlr.</p> <p id="sol"> <ul> <li><a href="css.html#orneksel">rneksel (analog) bilgisayarlar</a> <li><a href="css.html#sayisal">Saysal bilgisayarlar</a> <li><a href="css.html#karma">Karma bilgisayarlar</a> </ul> </p> <p class="solic"> rneksel (analog) bilgisayarlar<a name="orneksel"> </a></p> <p id="sol">Asal konum ya da gerilim gibi deiken nicelikleri temsil eden veriler zerinde ilem yapar ve zlmesi istenen matematiksel problemin fiziksel bir rneini olutururlar. Sradan diferensiyel denklemleri zebilen rneksel bilgisayarlar, sistem mhendisliinde, zellikle baz sre ve donatmlarn gerek zamanl benzetim modellerinin oluturulmasna ok elverilidirler. Bu bilgisayarlarn bir baka yaygn kullanm alan da elektrik datm sistemi gibi ebekelerin analizidir.<br> <a href="css.html#bsl">Baa Dn</a> </p> <p class="solic">Saysal bilgisayarlar,<a name="sayisal"> </a></p> <p id="sol">eitli retim srelerine, takm tezgahlarna , karmak laboratuvar ve hastane aygtlarna kumanda etmekte kullanlrlar. Ayn zellikten, uaklarn ve uzay aralarnn karmak iletiim sistemlerinin otomatizasyonunda da yararlanlr. Saysal bilgisayarlar ayrca, eitimde yardmc olarak (rn. temel dil ve matematik becerilerinin kazandrlmasnda) , bilimsel aratrmalarda ise verilerin analizi ve matematiksel modellerin gelitirilmesi amacyla kullanlr. <br> <a href="css.html#bsl">Baa Dn</a> </p> <p class="solic">Karma bilgisayarlar,<a name="karma"> </a></p> <p id="sol">rneksel ve saysal bilgisayarlarn zelliklerine ve yararlarn birletirirler; rneksel bilgisayarlara oranla daha fazla kesinlik, saysal bilgisayarlara oranla daha fazla deneteleme salarlar. <br><a href="css.html#bsl">Baa Dn</a> </p> </td> </tr> </table> </body> </html> Burada birka konuya aklk getirelim. Baz stil zelliklerinin sonunda grdnz !important ifadesi ile ziyareti kendi bilgisayarndaki tarayc zelliklerini deitirmi olsa dahi bu deerleri kullanmamasnn bizim belirttiimiz deerleri kullanmasn sylemi oluyoruz. Font zelliklerinde ou zaman birden ok font ismi kullandk. Bunun nedeni eer ziyaretinin makinasnda ilk font yoksa ikincisi o da yoksa nc font kullanlr. ayet o fontta yoksa taraycnn kendi banko fontu kullanlr. Bylelikle bizde deiik ziyareti makinalarnda sayfamzn nasl grnebileceini ncelikle kontrol altna alm oluruz.

CSS Nedir

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Nedir

Uploaded by

Copyright:

Available Formats

CSS Nedir? Cssin alm ile sze balayalm. Cascading Style Sheets.

You might also like