Transcription of T.C. CELAL BAYAR ÜNİVERSİTESİ - daltinkurt.com
1 CELAL BAYAR N VERS TES TURGUTLU MESLEK Y KSEKOKULU B LG SAYAR TEKNOLOJ S VE PROGRAMLAMA CSS DERS NOTU Seval ZBALCI MAN SA 2003 2 :. NDEK LER NDEK LER .. 2 CSS (ST L ABLON) .. 3 ST L ABLON E TLER .. 3 Yerel Stil ablonu .. 3 Global Stil 4 Ba lant l Stil ablon .. 5 HTML ET KETLER LE CSS .. 5 Font zellikleri .. 5 Text zellikleri .. 7 Background zellikleri .. 8 List 9 Position zelli i .. 10 SE C LER (SELECTORS) .. 12 Class Selector (S n f Se icisi) .. 12 id selector ( d se icisi) .. 13 CSS GENEL KULLANIM EK LLER .. 14 A Etiketinin CSS le Kullan m .. 14 Ba lant l CSS Dosyalar n n Haz rlanmas .. 16 YARARLANILAN KAYNAKLAR .. 19 Seval ZBALCI - Internet Programlama Ders Notu - CB Turgutlu MYO .: 3 CSS (ST L ABLON) CSS (Cascading Style Sheets) di er deyimiyle Stil ablon HTML yaz m ekli olarak etiket t r nde bir yaz m dilidir.
2 Sahip oldu u zelliklerin k s tl olmas nedeniyle sayfan n dizayn nda bize tam esneklik veremese de b y k kolayl klar sa lamaktad r. Kullan m kolayl ve kullan l l ile HTML e eklenmesinden itibaren o u web tasar mc s n n g zdesi olmu tur. Her t rl sayfa dizayn nda m thi bir esneklik sa lamaktad r. Ayr ca ba lant l stil ablonlar arac l ile de birden ok sayfaya etkiyebilir. Bu da bize sitenin g r n m n de i tirmek istedi imizde elimizdeki onlarca belki de y zlerce sayfan n kodlar n de i tirmeden sadece css dosyas n n de i tirerek bu imkan sa lar. Stil ablon un taray c lara eklenmesinden sonra iki versiyonu km t r. Bunlar: CSS 1 CSS 2 Dersimizde MSIE (Internet Explorer) ve NN (Netscape Navigator) taray c lar nda, her ikisinde de etkin olan veya etkin olmay p dizayn bozmayan (A:hover gibi) Stil ablon zellikleri zerinde durulacakt r.
3 ST L ABLON E TLER Css in (Stil ablon) 3 farkl kullan m alan vard r. Bu alanlar; 1. Yerel, yani sayfada sadece bir kez, Yerel stil ablonlar bir html etiketi i in zel olarak kullan l rlar. 2. Global, yani t m sayfa i in, Global stil ablonlar sayfadaki t m html etiketlerinin belirlenen zellikte olmas istendi inde kullan l rlar. 3. Ba lant l , yani birden ok sayfa i in, Ba lant l stil ablonlar bir ok sayfada ayn bi imde olmas istendi inde kullan l rlar. Yerel Stil ablonu Yerel Stil ablonlar, uygulanacak etiketi sadece bir kez bulundu u yerde (yerel) etkiler. 4 :. rnek: <html> <head> <title>Css</title> </head> <body> <h2>CSS Kullan m </h2> <br> <h2 style=font-size:20pt; color:blue>CSS Kullan m </h2> </body> </html> Bu rne i ad yla kaydedip taray c yard m yla a t m zda iki tane CSS Kullan m yaz s yla kar la r z.
4 Bunlar n her ikisinin de etiketleri H2 olmas na ra men yaz m tarz farkl olacakt r. nk ikinci etiketimize etki etmek zere bir stil ablon eklenmi tir. Global Stil ablonu Global Stil ablonlar bir nceki rnekte yapt m z h2 etiketinin t m sayfada ayn zellikte olmas istendi inde kullan l r. Bunu i in Stil ablon zellikleri sayfan n ba lang c nda (<head> </head> etiketleri aras nda) tan mlan r. rnek: <html> <head> <title>Css</title> <style type="text/css"> <!-- h2 {font-size:20pt; color:blue} --> </style> </head> <body> <h2>Web Teknikleri</h2> </body> </html> Yukar daki rnekte sayfa i erisinde kullanaca m z t m h2 etiketlerinin zellikleri sabitlenmi tir. Yani sayfa i erisinde nerede kullan rsan z kullan n h2 etiketinin stil zellikleri hep ayn kullan lacakt r.
5 Stil ablon tan mlamalar <head> </head> etiketleri aras nda <style type="text/css"> ile ba lay p </style> ile bitmelidir. <!-- Etiketi ile CSS den anlamayan taray c lar n bu k sm ge mesini sa l yoruz. Bu saklama i lemi --> etiketi ile son bulmaktad r. Seval ZBALCI - Internet Programlama Ders Notu - CB Turgutlu MYO .: 5Ba lant l Stil ablon Global stil ablonu, sitemiz i erisindeki t m sayfalarda ayn stil zelliklerini kullanmak istedi imizde kullan r z. Uygularken, stillerimizi yukar da rneklerini verdi imiz ekilde haz rlar z. Fakat bu stil listesini html dosyam z n i erisinde de il de bo bir sayfaya yazar z ve css uzant l bir ekilde kaydederiz. Ard ndan da html dosyam z n i erisine yine <head> </head> etiketleri aras na <link rel="stylesheet" type="text/css" href=" "> eklinde ekleriz.
6 H1 {font-size:13pt; color:green} h2 {font:20pt; color:blue} h3 {font-size:15pt; color:red} Yukar da verilen rnekteki dosyay olarak kaydededip, html dosyam za ge elim. Html dosyam z n kodlar : rnek: <html> <head> <title>Css</title> <link rel="stylesheet" type="text/css" href=" "> </head> <body> <h1>Web Teknikleri</h2> <h2>Web Teknikleri</h2> <h3>Web Teknikleri</h2> </body> </html> HTML dosyas n n kodlar aras nda ge en <link rel="stylesheet" type="text/css" href=" "> kodu dosyas ndaki stil zelliklerini kullanmam z sa lar. Ayn stilleri kullanmak istedi imiz di er html dosyalar na bu sat r eklememiz yeterlidir. B ylelikle her sayfada tek tek stil zellikleri tan mlamam , ba lang ta tan mlad m z stil zelliklerini kullanarak koddan tasarruf etmi oluruz.
7 HTML ET KETLER LE CSS Font zellikleri Font zelliklerini de i tirmeye yarayan bir stil ablon zelli idir. rnek: <html> <body> <head> <title>Css</title> <style type="text/css"> <! 6 :.p {font-size : 12pt;font-family : Arial;font-weight : bold;font-style : italic;color : #00 FFFF;} --> </style> <body> <p>Web Teknikleri</p> </body> </html> font-size : Font b y kl Kullan mdaki standart de erler tercih edilebilece i gibi direkt olarak punto (pt) de eri de verilebilir. Standart de erler: xx-large (en b y k ) x-large (biraz b y k) large (b y k) medium (orta) small (k k) x-small (biraz k k) xx-small (en k k) Alt zellikler: font-family : Font tipini belirler. Arial, Courier, Verdana gibi font isimlerini alabilir. font-weight : Fontun kal nl incelik durumunu belirler.
8 Bold : Fontu kal n yapar. normal : Fontun normal halde olmas n sa lar. Bu zellik yaz lmad nda normal zellik al n r. font-style : Fontun yat k olup olmamas n sa lar. italic : Yaz n n sa a do ru yat k olmas n sa lar. color : Fontun rengini belirler. Blue, red,green gibi renklerin ingilizce kar l klar n alabilir. Seval ZBALCI - Internet Programlama Ders Notu - CB Turgutlu MYO .: 7 Text zellikleri Text zelli i ile de font zelli inin sahip olmad baz zellikleri etiketimize ekleriz. rnek : <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 tan yal m.
9 Text-transform : lowercase : Yaz n n t m n n k k harf olmas n sa lar. uppercase : Yaz n n t m n n b y k harf olmas n sa lar. capitalize : Yaz n n istenilen ekilde kalmas n sa lar. text-decoration : underline : Yaz n n alt n n izili olmas n sa lar. overline : Yaz n n st n n izili olmas n n sa lar. line-through : Yaz n n st n n izili olmas n sa lar. none : Yaz n n herhangi bir yerine izgi ekilmemesini sa lar. 8 :. text-align: left: Yaz n n sola biti ik olmas n sa lar. center : Yaz n n ortada olmas n n sa lar. right : Yaz n n sa a biti ik olmas n sa lar. line-height :Yaz n n normal sat rdan izgi y ksekli ini belirler. 3px, 5px gibi de erler al r. text-ident : Yaz n n soldan ne kadar bo lukla i eriden ba layaca n belirler.
10 5px, 10px gibi de erler al r. Background zellikleri Background ile html sayfam z n arkafonlar n n zelliklerini de i tirmemizi sa lar. <html> <body> <head> <title>Css</title> <style type="text/css"> <! p { background-color :#00ff00; background-image : url (" "); background-position : center; background-repeat : repeat-y; } --> </style> <body> <p>Web Teknikleri</p> </body> </html> background-color : Arka fonun rengini belirler. Css te renkleri blue, red gibi tan mlayabilece imiz gibi Html kodunu vererekte tan mlayabiliriz. Seval ZBALCI - Internet Programlama Ders Notu - CB Turgutlu MYO .: 9 background-image : Arka fonu bir resim dosyas yapmak i in kullan l r. url etiketinin i ine resim dosyas n n yolu ve ismi tam olarak yaz lmal d r.
