STİL ŞABLONLARI / C S S. Web Tasarımı ve Programlama

Transkript

1 STİL ŞABLONLARI / C S S Web Tasarımı ve Programlama

2 STİL ŞABLONLARI / CSS Tanım ve Genel Bilgi CSS (Cascading Style Sheets), web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web Sayfasının Yapısal Birimleri İçerik Biçimlendirme Dinamik HTML kodlarıyla sayfa asıl içeriğini oluşturan birimlerin bulunduğu kısımdır. Bu kısım genelde metinlerden oluşsa da, resim, animasyon ve video gibi elemanları da içerir. 2

3 STİL ŞABLONLARI / CSS Tanım ve Genel Bilgi CSS (Cascading Style Sheets), web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir İçerik Biçimlendirme Dinamik Web Sayfasının Yapısal Birimleri İçerik kısmının kullanıcıya nasıl görüntüleneceğinin ayarlandığı kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve kullanışlı sayfalar sunmak için gerekli elemanları içerir. 3

4 STİL ŞABLONLARI / CSS Tanım ve Genel Bilgi CSS (Cascading Style Sheets), web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web Sayfasının Yapısal Birimleri İçerik Biçimlendirme Dinamik Javascript vb. programlama kodları ile yapılan dinamik işlemleri içerir. Etkileşimli sayfalar oluşturmak için kullanılır. 4

5 STİL ŞABLONLARI / CSS Tanım ve Genel Bilgi CSS; Biçimlendirme kısmının yönetimini kolaylaştırır. İçerik kısmı ile biçimlendirme kısmının ayrılmasını sağlar. Örneğin; sayfası olan bir siteyi tek CSS dokümanı yardımı ile biçimlendirebiliriz. Web sayfalarına esneklik, programcıya hız kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa olmazlardandır. 5

6 CSS NİN AVANTAJLARI Görünüm Avantajları HTML ye göre birçok stil özelliğine sahiptir. HTML de bu elemana(h1) font stili, zemin rengi gibi çeşitli özellikler verebiliriz. Ancak bu özellikleri atamak için ayrı HTML elemanları kullanmak zorundayız!!! (<strong>, <u>) 6

7 CSS NİN AVANTAJLARI Görünüm Avantajları HTML ye göre birçok stil özelliğine sahiptir. HTML de bu elemana(h1) font stili, zemin rengi gibi çeşitli özellikler verebiliriz. Ancak bu özellikleri atamak için ayrı HTML elemanları kullanmak zorundayız!!! (<strong>, <u>) CSS de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri de atayabiliriz. (kenarlık, rollover vb.) 7

8 CSS NİN AVANTAJLARI Kullanım Kolaylığı HTML de her etikete ilave özellikler eklemek için başka bir etiket / özellik eklemek gerekir. CSS de ise tüm düzenlemeler, ilgili stil tanımı altından bir defada yapılabilir. Tek bir CSS dosyası ile sitenin tamamını yönetmek çok büyük kolaylıktır. Sadece bir dosyada değişiklik yaparak tüm sitemizin arayüzünü yönetebiliriz. 8

9 CSS NİN AVANTAJLARI Tasarım Tutarlılığı Tek CSS dosyası ile tüm sitenin yönetimi sayesinde site içi tutarlılık sağlanacaktır. Site içinde ilk sayfadan son sayfaya kadar tutarlılık korunarak ziyaretçiye düzenli bir içerik sunulacak ve sitenin kendine has özellikleri ziyaretçiye benimsetilmiş olacaktır. Sayfalar hızlı yüklenecektir, çünkü aynı elemanlar diğer sayfalarda tekrar yüklenmeyecektir. Bu da ziyaretçiye zaman kazandıracaktır. 9

10 CSS NİN AVANTAJLARI Daha Küçük Dosya Boyutları CSS yardımı ile kodlanmış bir sayfada klasik HTML kodlamasına göre %50 ye varan performans ve hız artışı olduğu belirlenmiştir. CSS, HTML de kullanılan görünüm özelliklerini (iskeleti oluşturan tablolar, resimler, yazıtipleri, renkler, genişlikler, yükseklikler vb.) azaltacağı için dokümanların boyutu da ciddi oranda azalacaktır. 10

11 CSS NİN AVANTAJLARI Uyumluluk Farklı platformlardan erişilebilirlik kolaylaşmaktadır. Web sayfalarının arama motorları tarafından anlaşılırlığı da artmaktadır. 11

12 CSS Yİ WEB SAYFALARINA EKLEMEK Kod/Etiket İçinde Ekleme (in-line) Direkt olarak HTML etiketinin içine style özelliği kullanılarak uygulanır. Yerel CSS Kullanımı olarak da tanımlanır. <div style="color:red">deneme yazımız</div> Tüm CSS komutlarını kodların içine direkt uygulamak!!! önerilen bir kodlama şekli değildir!!! 12

13 CSS Yİ WEB SAYFALARINA EKLEMEK <style> Etiketi Kullanarak Ekleme CSS kodları, <head> kısmında <style>.</style> etiketleri arasında yazılır. Genel CSS Kullanımı olarak da tanımlanır. HTML kod ile CSS birbirinden ayrıştırılmıştır. 13

14 CSS Yİ WEB SAYFALARINA EKLEMEK Harici CSS Dosyası Kullanarak Ekleme CSS kodları,.css uzantılı bir dosyaya kaydedilir. Daha sonra bu dosya, istenen web sayfaları içinden çağrılır. 14

15 CSS Yİ WEB SAYFALARINA EKLEMEK Harici CSS Dosyası Kullanarak Ekleme CSS kodları,.css uzantılı bir dosyaya kaydedilir. Bu yöntemin en büyük avantajı bir kere yazılan kodun, istenen tüm sayfalara eklenebilmesidir. Daha sonra bu dosya, istenen web sayfaları içinden çağrılır. Bu sayede harici eklenen CSS kodu bir kere yüklendikten sonra diğer sayfalarda tekrar yüklenmeyerek hız kazandıracaktır. 15

16 CSS NİN YAPISI Seçici / selector Bildirim Bloğu / declaration block Özellik / property Değer / value 16

17 CSS NİN YAPISI Seçici Tüm HTML etiketleri, seçici olarak kullanılabilir. İsmini de buradan alır; seçilen HTML etiketi anlamındadır. HTML etiketlerinin dışında ID (kimlik) ve Class (sınıf) seçicileri de kullanılabilir / tanımlanabilir. 17

18 CSS NİN YAPISI Bildirim Bloğu Bildirim bloğu { ile açılır ve } ile kapatılır. Bildirimler arasında ; (noktalı virgül) kullanılır. Özellik ve değerler birbirinden : ile ayrılır. 18

19 CSS NİN YAPISI Bildirim Bloğu Değiştirilmek istenen stil özniteliği (color, font-size vb.) Stil özniteliklerine verilen değer (red, 14px vb.) 19

20 CSS BİRİMLERİ Göreceli Uzunluklar em: Elemanın yazıtipinin yüksekliğidir. Örneğin; font-size değeri 14 px olarak atanmış ise 1em=14piksel demektir., ex: Hangi yazı tipi seçilmişse o yazıtipindeki küçük x harfinin yüksekliğidir. px: Ekran çözünürlüğüne göre değişen, ekranda bulunan noktalardan (piksel) bir tanesinin yüksekliğidir. 20

21 CSS BİRİMLERİ Kesin Uzunluklar in / inç(inch) 1 inç=2,54 cm dir. cm / santimetre (örn: margin: 2cm) mm / milimetre (örn: margin-left:10mm) pt / point(punto) : Standart baskı birimi 1pt = 1/72 inç (örn: font-size:14pt) pc / pika 1/6 inç, 1pc = 12 pt (örn: font-size:2pc) 21

22 CSS BİRİMLERİ 22

23 CSS BİRİMLERİ Yüzde Değerleri Göreceli değerlerdir. Uygulandığı nesnenin boyutuna bağlı olarak değişkenlik gösterir. body {font-size: 100%; } Varsayılan tarayıcı yazı büyüklüğünün (16px) tamamının kullanılacağı anlamına gelir, değişim olmayacaktır. 23

24 CSS BİRİMLERİ Renk Değerleri İsimle RGB değeri verilerek tanımlanabilir. RGB tanımlaması da 4 çeşittir. 24

25 CSS BİRİMLERİ Renk Değerleri / renk isimleri 25

26 CSS BİRİMLERİ Renk Değerleri / rgb kodları #RRGGBB : Sırasıyla kırmızı-yeşil-mavi renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal değerlerdir. (color:#ff0000; /*kırmızı*/) #RGB: RRGGBB yönteminin kısaltmasıdır. Aynı değerleri taşıyan grup değerler birleştirilir. (color:f00; /*kırmızı*/) CSS kodlaması içinde açıklama satırı eklemek için /* */ karakterleri kullanılır. 26

27 CSS BİRİMLERİ Renk Değerleri / rgb kodları rgb(r,g,b): RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. h1 {color: rgb(255,0,0); /*kırmızı*/} rgb(r%,g%,b%): RGB renklerinin %0 ile %100 arasında bir tanımı vardır. h1 {color: rgb(100%,0%,0%); /*kırmızı*/} 27

28 SEÇİCİLER Sınıf Seçici / class selector Farklı HTML elemanlarına aynı özellikleri uygulamak için kullanılır. Birden fazla kullanılabilir. Sınıf seçici olarak belirlediğimiz ismin önüne. (nokta) konulmalıdır. Sınıf seçici, istenen HTML elemanının class özniteliğine atanarak stil uygulanmış olur. 28

29 SEÇİCİLER Sınıf Seçici / class selector Sınıf seçiciler; farklı elemanlara / birden çok defa uygulanabilmeleri nedeniyle çoğul seçici olarak da adlandırılır. 29

30 SEÇİCİLER Sınıf Seçici / class selector 30

31 SEÇİCİLER Sınıf Seçici / class selector 31

32 SEÇİCİLER ID Seçici / id selector Sadece bir HTML elemanına atanırlar ve bir kez kullanılırlar. Sadece bir kez kullanılabilirler; bu nedenle tekil seçici olarak da adlandırılırlar. ID seçici olarak belirlediğimiz ismin önüne # (diyez) konulmalıdır. ID seçici, istenen HTML elemanının id özniteliğine atanarak stil uygulanmış olur. 32

33 SEÇİCİLER ID Seçici / id selector 33

34 SEÇİCİLER ID Seçici / id selector ID seçici sayfada birden çok yerde kullanıldığında tarayıcılar hata mesajı vermez. Ancak bu elemanlar DOM(Belge Nesne Modeli) betikleri içinde birkaç yerde kullanılırsa hata meydana gelecektir. 34

35 SEÇİCİLER Etiket Seçici / tag selector Aynı türden tüm elemanlara (etiketlere), istenilen stilin uygulanması için kullanılır. 35

36 SEÇİCİLER Etiket Seçici / tag selector Aynı türden tüm elemanlara (etiketlere), istenilen stilin uygulanması için kullanılır. 36

37 SEÇİCİLER Hatırlatma Sınıf ve ID Seçiciler, BÜYÜK-küçük harfe karşı duyarlıdırlar. 37

38 CSS ÖZELLİKLERİ Zemin Özellikleri Yazıtipi Özellikleri Metin Özellikleri Kutu Modeli Özellikleri Tablo Özellikleri Pozisyon Özellikleri Liste Özellikleri 38

39 CSS / ZEMİN ÖZELLİKLERİ background-color Elemanların / etiketlerin zeminine renk vermek için kullanılır. h1 {background-color:#3070e7;} h1 etiketi için zemin rengi #3070E7 olacaktır. 39

40 CSS / ZEMİN ÖZELLİKLERİ div etiketi kutu modeli (model-box) denilen özel bloklar oluştururken kullanılmaktadır. 40

41 CSS / ZEMİN ÖZELLİKLERİ background-image Elemanlara / etiketlere zemin resmi eklemek için kullanılır. body { background-image: url( zemin.jpg ); } zemin resmi olarak kök klasör içinde bulunan zemin.jpg atanacaktır. 41

42 CSS / ZEMİN ÖZELLİKLERİ 42

43 CSS / ZEMİN ÖZELLİKLERİ background-repeat Zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. CSS Tanımlaması background-repeat:repeat; Görselin Tekrar Durumu Hem yatayda hem de dikeyde tekrar eder. Görsel, bu parametre yazılmasa da varsayılan olarak tekrar edecektir. background-repeat:no-repeat; Hiçbir yönde tekrar etmez. background-repeat:repeat-x; background-repeat:repeat-y; Yatay yönde tekrar eder. Dikey yönde tekrar eder. 43

44 CSS / ZEMİN ÖZELLİKLERİ repeat no-repeat repeat-y repeat-x 44

45 CSS / ZEMİN ÖZELLİKLERİ background-position Zemine eklenen görselin sayfadaki konumunu belirlemek için kullanılır. background-position: background-position: top left Üst-Sol top right Üst-Sağ center left Orta-Sol center right Orta-Sağ bottom left Alt-Sol bottom right Alt-Sağ top center Üst-Orta x% y% % center center Orta-Orta xpos ypos Piksel bottom center Alt-Orta 45

46 CSS / ZEMİN ÖZELLİKLERİ xpos ypos parametreleri kullanılarak konum tanımlaması yapılmıştır. 46

47 CSS / ZEMİN ÖZELLİKLERİ background-attachment Zemine eklenen eklenen resmin sayfa ile kaymasını(scroll) veya sabit(fixed) kalmasını sağlar. body {background-attachment:scroll;} zemin resmi, sayfa ile birlikte kayacaktır. body {background-attachment:fixed;} zemin resmi, sayfa kaysa da ekranda sabit konumda kalacaktır. 47

48 CSS / YAZITİPİ ÖZELLİKLERİ Yazıtipi (font) özellikleri, karakterlerin tip ve biçimlerinin nasıl olacağını belirler. Metinleri oluşturan karakterlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır. font-family font-size font-weight font-style line-height font 48

49 CSS / YAZITİPİ ÖZELLİKLERİ font-family Yazıtipi ailesini tanımlamak için kullanılır. Birden fazla yazıtipi ailesi ismi tanımlanabilir, her font ailesi ismi virgülle ayrılır. p { font-family: Verdana, Geneva, sans-serif; } tarayıcı ilk önce Verdana yazı tipinin tarayıcı tarafından desteklendiğine bakacaktır. Desteklenmediği takdirde sırayla diğerlerini deneyecektir. p { font-family: Georgia, Times New Roman, serif; } font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır. 49

50 CSS / YAZITİPİ ÖZELLİKLERİ 50

51 CSS / YAZITİPİ ÖZELLİKLERİ font-size Yazı karakterlerinin boyutunu tanımlamak için kullanılır. Boyut; piksel (px), yüzde(%), em birimi üzerinden tanımlanabilir. 51

53 CSS / YAZITİPİ ÖZELLİKLERİ font-size font-size: font-size: xx-small ekstra ekstra küçük xx-large ekstra ekstra büyük x-small ekstra küçük smaller ana elm.dan küçük small küçük larger ana elm.dan büyük medium normal (varsayılan) length sabit değer (px, em ) large büyük % ana elemana göre % x-large ekstra büyük İnherit ana elemanla aynı 53

54 CSS / YAZITİPİ ÖZELLİKLERİ font-weight Yazıtipinin kalınlık-incelik durumunu tanımlamak için kullanılır. 100(ince)-900(kalın) arasında bir değer alabildiği gibi kalın(bold), çok kalın(bolder) ve normal değerlerini de alır. p { font-weight: bold; } p etiketi içinde yer alan yazının tamamının kalın yazılması sağlanmıştır. 54

55 CSS / YAZITİPİ ÖZELLİKLERİ font-style Yazıtipinin eğik (italic) az eğik (oblique) normal tanımlanması için kullanılır. 55

57 CSS / YAZITİPİ ÖZELLİKLERİ line-height Metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır. color Renk tanımlaması için kullanılır. 57

58 CSS / YAZITİPİ ÖZELLİKLERİ font Tüm yazıtipi özelliklerini bir defada tanımlamak için kullanılır. { font: font-style font-weight font-size/line-height font-family; } 58

59 CSS / METİN ÖZELLİKLERİ Metne ait biçimlendirme (renk, hizalama, font büyüklüğü, harfler / kelimeler arası boşluk, ) özelliklerinin tanıtımı için kullanılır. color text-align text-decoration text-transform text-indent letter-spacing word-spacing vertical-align 59

60 CSS / METİN ÖZELLİKLERİ color Metne renk vermek için kullanılır. h1 { color: #FF0000; } h1 etiketi içinde yer alan yazının rengini değiştirir. p { color: black; } p etiketi içinde yer alan yazının rengi siyah olarak biçimlendirilir. p { color: rgb(255, 0, 0); } p etiketi içinde yer alan yazının rengi RGB (255,0,0) şeklinde kodlanır. 60

61 CSS / METİN ÖZELLİKLERİ text-align Metni hizalamak için kullanılır. text-align: h1 { text-align: left; } h1 etiketi içinde yer alan yazı, sola hizalı olacaktır. left; center; right; justify; Metni sola hizalar. Metni ortaya hizalar. Metni sağa hizalar. Metni iki yana hizalar. 61

62 CSS / METİN ÖZELLİKLERİ 62

63 CSS / METİN ÖZELLİKLERİ text-decoration Genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi ve onlara yanıp sönme (blink) efekti vermeyi sağlar. a { text-decoration: none; } Bağlantı (link) etiketi içinde yer alan metindeki altçizgiyi kaldırır. h1 { text-decoration: line-through; } h1 etiketi içinde yer alan metnin üzerine(ortasına) bir çizgi çekilmesini sağlar. 63

64 CSS / METİN ÖZELLİKLERİ text-decoration text-decoration: none; Metin etrafında çizgi olmamasını sağlar. AOSBilişim underline; Metni, altı çizili yapar. AOSBilişim overline; Metnin üst tarafını çizili yapar. AOSBilişim line-through; Metnin üzerini (ortasını) çizili yapar.. AOSBilişim blink; Metnin yanıp sönmesini sağlar. 64

66 CSS / METİN ÖZELLİKLERİ text-transform Metin içindeki karakterlerin BÜYÜK / küçük / Sadece İlk Harfleri Büyük olacak şekle dönüştürülmesi için kullanılır. Metin içindeki harflerin tamamının büyük şekle dönüştürülmesini saplayacak buyuk isimli sınıf seçici tanımlanmıştır. text-transform:.buyuk { text-transform: uppercase; } uppercase; lowercase; capitalize; Tüm harfler büyük harfe dönüştürülür. Tüm harfler büyük harfe dönüştürülür. Tüm kelimelerin sadece ilk harfleri büyük harfe dönüştürülür. 66

68 CSS / METİN ÖZELLİKLERİ text-indent Paragraf başı yaparken cümlenin ne kadar içten başlayacağını ayarlamak için kullanılır. p { text-indent: 50px; } p etiketi içinde tanımlanan her paragraf, 50 px içeriden başlatılacaktır. 68

70 CSS / METİN ÖZELLİKLERİ text-shadow Metne gölge efekti vermek için kullanılır. Gölgenin, karakterlerin sağ kısmına olan uzaklığı Gölgenin, karakterlerin alt kısmına olan uzaklığı p { text-shadow: 2px 2px #000000; } p etiketi içinde tanımlanan metne siyah renkli gölge efekti verilecektir. 70

72 CSS / METİN ÖZELLİKLERİ letter-spacing Metin içinde yer alan karakterlerin arasındaki boşluğu ayarlamak için kullanılır. Negatif değerler de tanımlanabilir. p { letter-spacing: 5px; } p etiketi içinde tanımlanan metinde bulunan her karakterin arasında 5 px değerinde bir boşluk bırakılacaktır. 72

74 CSS / METİN ÖZELLİKLERİ word-spacing Metin içinde yer alan kelimelerin arasındaki boşluğu ayarlamak için kullanılır. p { word-spacing: 12px; } p etiketi içinde tanımlanan metinde bulunan her kelimenin arasında 12 px değerinde bir boşluk bırakılacaktır. 74

76 CSS / METİN ÖZELLİKLERİ vertical-align Sayfa içindeki bir öğenin dikey olarak hizalamasını ayarlamak için kullanılır. img { vertical-align: top; } metin, resme göre üstten başlayacaktır. vertical-align: vertical-align: baseline Orta middle Orta (öğeye göre) sub Alt simge bottom Alt (öğeye göre) super Üst Simge text-bottom Alt (metne göre) top Yukarı (öğeye göre) px piksel text-top Yukarı (metne göre) % % 76

78 CSS / METİN ÖZELLİKLERİ text-top / top text-bottom / bottom middle 78

79 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Tablosuz tasarımların asıl elemanı olan <div> etiketi, kutu modeli (box model) oluştururken de asıl etiket konumundadır. <div> etiketleri sayesinde, istenen kutu modellemeleri pratik bir şekilde gerçekleştirilebilir. 79

80 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kutu modeli şu üç ana ögeden oluşur; margin / kenar dışı boşluğu border / kenar kalınlığı padding / kenar içi boşluğu 80

81 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar Dışı Boşluğu / margin Border ile sınırları belirlenmiş olan kutunun diğer ögelerle arasındaki mesafeyi belirler. margin ögesinin alt elemanları: Kenar Dışı Boşluğu / margin margin-top margin-right margin-bottom margin-left margin Üst kenar dışı boşluğu Sağ kenar dışı boşluğu Alt kenar dışı boşluğu Sol kenar dışı boşluğu Kenar dışı boşlukları / kısaltma amaçlı kullanılır. 81

82 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar Dışı Boşluğu / margin body { margin-top: 80px; } Sayfanın üst kenar dışı boşluğu 80 px olarak tanımlanmıştır. margin-top: 10px; margin-right: 5px; margin-bottom: 20px; margin-left: 15px; Kısaltılmış Hali margin: 10px 5px 20px 15px; 82

83 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-top 83

84 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-top 84

85 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-right 85

86 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-right 86

87 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-bottom 87

88 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-bottom 88

89 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-left 89

90 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin-left 90

91 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin 91

92 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ margin 92

93 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar Çizgisi / border Kenar çizgisinin biçimi, rengi ve kalınlığı ayarlanır. Tanımlanan özellikler; tüm kenarlara veya ayrı ayrı her kenara uygulanabilir. Kenar Çizgisi / border border-style border-width border-color Border Kenar çizgisi biçimi Kenar çizgisi genişliği (kalınlığı) Kenar çizgisi rengi Kenar çizgisi özellikleri / kısaltma amaçlı kullanılır. 93

94 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar Çizgisi / border Kenar Çizgisi / border border-style Kenar çizgisi biçimi border-width Kenar çizgisi genişliği (kalınlığı) border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width border-bottom-width border-left-width Üst kenar çizgisi biçimi Sağ kenar çizgisi biçimi Alt kenar çizgisi biçimi Sol kenar çizgisi biçimi Üst kenar çizgisi genişliği Sağ kenar çizgisi genişliği Alt kenar çizgisi genişliği Sol kenar çizgisi genişliği 94

95 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar Çizgisi / border Kenar Çizgisi / border border-color Kenar çizgisi rengi border Kenar çizgisi border-top-color Üst kenar çizgisi rengi border-right-color Sağ kenar çizgisi rengi border-bottom-color Alt kenar çizgisi rengi border-left-color Sol kenar çizgisi rengi (Kısaltma amaçlı kullanılır.) 95

96 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-style Kenar çizgisinin biçimini(noktalı, kesik-kesik, düz, çift, vb.) tanımlamak için kullanılır. Herhangi bir değer yazılmadığı zaman varsayılan olarak none değeri geçerlidir. 96

97 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-style 97

98 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-style 98

99 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-style border-top-style: solid; border-right-style: double; border-bottom-style: dashed; border-left-style: dotted; Kısaltılmış Hali border-style: solid double dashed dotted; üst (top) sağ (right) alt (bottom) sol (left) 99

100 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-width Kenar çizgisinin genişliğini (kalınlığını) ayarlamak için kullanılır. Genişlik için, piksel (px) olarak değer verilebilir veya aşağıdaki değerler kullanılabilir: thin / ince medium / orta thick / kalın 100

101 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-width 101

102 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-width 102

103 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-width border-top-width: 3px; border-right-width: 4px; border-bottom-width: 1px; border-left-width: 2px; Kısaltılmış Hali border-width: 3px 4px 1px 2px; üst (top) sağ (right) alt (bottom) sol (left) 103

104 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-width border-width: 3px 4px 1px; üst sağ ve sol alt border-width: 3px 4px; üst ve alt sağ ve sol border-width: 3px; Tüm kenarlıklar 104

105 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-color Kenar çizgisinin rengini tanımlamak için kullanılır. 105

106 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-color Kenar çizgisinin rengini tanımlamak için kullanılır. 106

107 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-color border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: gray; Kısaltılmış Hali border-width: red blue green gray; üst (top) sağ (right) alt (bottom) sol (left) 107

108 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border-color border-color: red blue green; üst sağ ve sol alt border-color: red blue; üst ve alt sağ ve sol border-color: red; Tüm kenarlıklar 108

109 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ border Kenar çizgisinin biçimi, rengi ve kalınlığını bir defada biçimlendirmek için border özelliği kullanılmalıdır. border: 3px solid red; kalınlık biçim renk 109

110 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar İçi Boşluğu / padding Border ile sınırları belirlenmiş olan kutunun içerikle arasındaki mesafeyi belirler. padding ögesinin alt elemanları: Kenar Dışı Boşluğu / padding padding-top padding-right padding-bottom padding-left padding Üst kenar içi boşluğu Sağ kenar içi boşluğu Alt kenar içi boşluğu Sol kenar içi boşluğu Kenar içi boşlukları / kısaltma amaçlı kullanılır. 110

111 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Kenar İçi Boşluğu / padding Tüm padding ölçülendirmelerinde; %, px veya em birimleri kullanılabilir. margin padding 111

112 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ padding 112

113 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ padding 113

114 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama width Elemanların genişliğini tanımlamak için kullanılır. 114

115 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama width Elemanların genişliğini tanımlamak için kullanılır. 115

116 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama height Elemanların yüksekliğini tanımlamak için kullanılır. 116

117 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama height Elemanların yüksekliğini tanımlamak için kullanılır. 117

118 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama min-width minimum genişlik min-height minimum yükseklik 118

119 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama min-width minimum genişlik min-height minimum yükseklik 119

120 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama max-width maksimum genişlik max-height maksimum yükseklik 120

121 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Genişlik-Yükseklik Tanımlama max-width maksimum genişlik max-height maksimum yükseklik 121

122 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri Kutu elemanlarının görünümüne etki eden (taşma, kırpma, görünürlük) özellikleri tanımlamak için kullanılır. overflow / taşma clip / kırpma visibility / görünürlük 122

123 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri overflow Sınırlarını belirlediğimiz kutu elemanının içeriğinin sınırları aşması durumunda nasıl davranacağını tanımlamak için kullanılır. overflow: inherit visible hidden scroll auto Bir önceki elemanın değerlerini alır. Kutu dışına taşan alanları gösterir. Kutu dışına taşan alanları gizler Kutu dışına taşan kısma kaydırma çubuğu ile erişilir. scroll ile aynı etkiyi yapar. 123

124 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri overflow 124

125 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri overflow overflow: hidden; overflow: visible; overflow: scroll; overflow: auto; 125

126 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri clip Nesne içeriğinin belli bir bölümünün gösterilmesini sağlar. Başlangıç değerinin auto atanmış olması, herhangi bir kırpmanın olmayacağını gösterir. clip: rect ( 50px 100px 150px 200px); üst (top) sağ (right) alt (bottom) sol (left) 126

127 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri clip 127

128 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri clip clip: rect ( 90px 240px 180px 190px); sol sağ üst alt 128

129 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri visibility Nesnelerin görünürlük durumunu tanımlamak için kullanılır. visibility: visible hidden Nesnenin görünmesi sağlanır. Nesnenin görünmemesi sağlanır. Ancak sayfa içindeki yeri korunur. 129

130 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri visibility 130

131 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ Görsel Sonuç Özellikleri visibility 131

132 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear float, bir elemanı normal akışın dışına çıkarmak için kullanılan bir yöntemdir. Birbiri ardına sıralanmış elemanlara float uygulandığında elemanlar eğer yeterli alan varsa yan yana dizilirler. Float, dinamik göreceli konumlandırma gibidir ve bu amaçla kullanılabilir. 132

133 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear Clear özelliği; float uygulanmış elemandan sonraki elemanlara float etkisinin durdurulması için kullanılır. clear: none left right both float işlemi devam eder. float:left işlemi sonlandırılır. float:right işlemi sonlandırılır. Her iki yöndeki float işlemi sonlandırılır. float ve clear, tablosuz tasarımın en önemli öğelerindendir. 133

134 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear Kutulara float uygulanmamıştır Kutu 1 ve Kutu 2 ye float uygulanmıştır float:left; float:right; 134

135 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear 135

140 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear kutu1 kutu2 kutu3 140

142 CSS / KUTU MODELİ (DIV) ÖZELLİKLERİ float / clear kutu1 kutu2 kutu3 142

143 CSS / KONUMLANDIRMA ÖZELLİKLERİ HTML elemanlarının sayfa içindeki konumunu belirlemek için kullanılan özelliklerdir. Özellikle; öğelerin üst üste çakıştığı durumlarda hangisinin üste hangisinin alta geleceğini belirletmek için kullanılırlar. static / statik fixed / sabit relative / göreceli absolute / mutlak olmak üzere 4 farklı uygulama şekli vardır. 143

144 CSS / KONUMLANDIRMA ÖZELLİKLERİ Statik Konumlandırma / static HTML içindeki tüm öğeler varsayılan olarak statik şekilde konumlandırılmıştır. Öğeler, sayfanın normal akışına göre (soldan sağayukarıdan aşağıya) konumlandırılır. Öğeler sayfaya sabittir. Kaydırma çubuğu ile birlikte aşağı yukarı hareket ederler. 144

145 CSS / KONUMLANDIRMA ÖZELLİKLERİ Statik Konumlandırma / static 145

146 CSS / KONUMLANDIRMA ÖZELLİKLERİ Statik Konumlandırma / static 146

147 CSS / KONUMLANDIRMA ÖZELLİKLERİ Sabit Konumlandırma / fixed Elemanın sayfada sabitlenmesini sağlar. Eleman, kaydırma çubuğu aşağı yukarı hareket ettirildiğinde sabit kalır..sabitle { position: fixed; } Sabitle sınıfına bağlı olarak tanımlanan nesnenin konumu sabit (hareketsiz/değişmez) olarak tanımlandı 147

148 CSS / KONUMLANDIRMA ÖZELLİKLERİ Sabit Konumlandırma / fixed 148

149 CSS / KONUMLANDIRMA ÖZELLİKLERİ Sabit Konumlandırma / fixed 149

150 CSS / KONUMLANDIRMA ÖZELLİKLERİ Göreceli Konumlandırma / relative Normal konumlandırmalar referans alınarak konumlandırma sağlar..goreceli { position: relative; left: 20px; top: 20px;} göreceli isimli sınıf seçicinin kullanıldığı her öğe; normal konumlandırılma noktasına göre soldan ve üstten 20 piksel daha ötede konumlanacaktır. 150

151 CSS / KONUMLANDIRMA ÖZELLİKLERİ Göreceli Konumlandırma / relative 151

152 CSS / KONUMLANDIRMA ÖZELLİKLERİ Göreceli Konumlandırma / relative 152

153 CSS / KONUMLANDIRMA ÖZELLİKLERİ Mutlak Konumlandırma / absolute Öğeler, sayfa içinde programcı tarafından tanımlanan (yatay/sağ-sol; dikey/üst-alt) konum özelliklerine göre konumlandırılır..mutlak{ position: absolute; left: 20px; top: 20px;} mutlak isimli sınıf seçicinin kullanıldığı her öğe; soldan ve üstten 20px ötede konumlanacaktır. 153

154 CSS / KONUMLANDIRMA ÖZELLİKLERİ Mutlak Konumlandırma / absolute 154

155 CSS / KONUMLANDIRMA ÖZELLİKLERİ Mutlak Konumlandırma / absolute 155

156 CSS / KONUMLANDIRMA ÖZELLİKLERİ Örtüşen Öğeler / z-index Üstüste gelen öğelerin yerleşim sırasını (üst/alt) tanımlamak için kullanılır. z-index değeri; yüksek olan öğe üstte küçük olan öge altta yer alır. z-index: 1; /*Öğe üstte kalacaktır.*/ z-index:-1; /*Öğe altta kalacaktır.*/ 156

157 CSS / KONUMLANDIRMA ÖZELLİKLERİ Örtüşen Öğeler / z-index 157

161 CSS / LİSTELEME ÖZELLİKLERİ Sıralı (ordered) ve sırasız (unordered) listelere ait biçim-tür-konum tanımlamalarını yapmak için kullanılan özelliklerdir. list-style-type / liste imi türü list-style-image / liste imi resmi list-style-position / liste imi konumu list-style / liste biçimi olmak üzere 4 farklı tanımlama yapılabilir. 161

162 CSS / LİSTELEME ÖZELLİKLERİ list-style-type Sıralı ve sırasız listeler için; liste işaretinin türünü belirler. list-style-type / SIRALI LİSTELER decimal decimal-leading-zero lower-alpha lower-latin lower-roman upper-alpha upper-latin upper-roman Klasik numaralandırma (1, 2, 3, ) Rakam önüne 0 ekleme (01, 02, 03, ) Küçük harfler/alfabe (a, b, c, ) Küçük harfler/latin Alfabesi (a, b, c, ) Küçük harfler/roman Alfabesi (i, ii, iii, ) Büyük harfler/alfabe (A, B, C, ) Büyük harfler/latin Alfabesi (A, B, C, ) Büyük harfler/roman Alfabesi (I, II, III, ) 162

163 CSS / LİSTELEME ÖZELLİKLERİ list-style-type list-style-type / SIRASIZ LİSTELER none Liste imi yok disc Siyah-yuvarlak liste imi circle Siyah-içi boş-yuvarlak şeklinde liste imi square Siyah-kare liste imi.ul {list-style-type: lower-alpha;} ul etiketli listelerde; liste imi olarak a, b, c, sıralaması kullanılacaktır..ul {list-style-type: circle;} ul etiketli listelerde; liste imi olarak siyah-içi boş-yuvarlak şekil kullanılacaktır. 163

164 CSS / LİSTELEME ÖZELLİKLERİ list-style-type 164

168 CSS / LİSTELEME ÖZELLİKLERİ list-style-image İstenen bir görselin liste imi olarak tanımlanmasını sağlar..ul {list-style-image: url(liste.png);} ul etiketli listelerde; liste imi olarak liste.png dosyası kullanılacaktır. 168

169 CSS / LİSTELEME ÖZELLİKLERİ list-style-image 169

170 CSS / LİSTELEME ÖZELLİKLERİ list-style-position Listenin başlangıç konumunu (iç / dış) tanımlamak için kullanılır. inside / iç outside / dış olmak üzere 2 farklı konum tanımlaması yapılabilir. 170

171 CSS / LİSTELEME ÖZELLİKLERİ list-style-position 171

172 CSS / LİSTELEME ÖZELLİKLERİ list-style Listelere ait tür, konum ve im resminin tek satırda tanımlanması için kullanılan kısayoldur..ul {list-style: disc outside;} ul etiketli listelerde; liste imi olarak disc simgesi kullanılacak, konumu metnin dışında olacaktır. 172

173 CSS / LİSTELEME ÖZELLİKLERİ list-style 173

174 CSS / TABLO ÖZELLİKLERİ Tablo oluştururken kullanılan etiketlere; genişlik / width, yükseklik / height, renk / color, arkaplan / background, kenarlık / border, vb. özellikler uygulanarak görsel açıdan çok daha şık ve okunaklı tablolar elde edilebilir. 174

175 CSS / TABLO ÖZELLİKLERİ Genişlik / Yükseklik (width / height) Tablo veya tablo elemanlarının genişlik ve yükseklik değerlerini ayarlamak için kullanılır. table {width: 80%;} Tablo genişliği; sayfa boyutunun %80 ine uygun şekilde ayarlanacaktır. td {height: 80px;} Tablo içi hücre yüksekliği; 80px olarak ayarlanacaktır. 175

176 CSS / TABLO ÖZELLİKLERİ Tablo içi Metin Hizalama Yatay hizalama text-align Dikey hizalama vertical-align özellikleri kullanılır. td {text-align: right;} Hücre içindeki metinler; yatayda sağa hizalı yazılacaktır. td {vertical-align: bottom;} Hücre içindeki metinler; dikeyde alta hizalı yazılacaktır. 176

177 CSS / TABLO ÖZELLİKLERİ Tablo Hücre Rengi Arkaplan rengi background-color Metin rengi color özellikleri kullanılır. td {background-color: blue;} Hücre arkaplan rengi mavi olarak ayarlanacaktır. table {color: white;} Tablo içindeki metinler; beyaz renkli olarak görüntülenecektir. 177

178 CSS / TABLO ÖZELLİKLERİ Kenar Çizgisi (border) Tabloyu oluşturan <table>, <td> ve <th> etiketlerine uygulanarak; kenar çizgilerinin biçimi, genişliği ve rengi ayarlanabilir. table td {border: 2px solid red;} Tablo içindeki hücrelere ait kenarlık; 2px genişliğinde kırmızı-düz çizgi şeklinde biçimlendirilecektir. 178

179 CSS / TABLO ÖZELLİKLERİ Hücre Kenar Boşluğu (border-collapse) Tablo hücrelerinin etrafındaki kenarlık ile olan mesafenin azaltılması veya açılması için kullanılır. separate birkaç piksellik mesafe konur collapse hücreler arası mesafe kalkar, tek kenarlık görünür. table {border-collapse: collapse;} varsayılan görünüm (separate) collapse uygulanmış görünüm 179

180 CSS / TABLO ÖZELLİKLERİ Hücre Kenar Boşluğu (border-collapse) 180

181 CSS / TABLO ÖZELLİKLERİ Hücre Dışı Boşluğu (border-spacing) Tablo hücrelerinin arasındaki boşluğu ayarlamak için kullanılır. border-collapse:separate özelliği ile birlikte kullanılır. Eğer tek değer verilirse; bu tüm kenarlar için geçerlidir. İki değer atanırsa; ilki yatayda, ikincisi de dikeyde boşluk vermek için tanımlanmıştır. table { border-collapse: separate; border-spacing: 2px 4px; } 181

182 CSS / TABLO ÖZELLİKLERİ Hücre Dışı Boşluğu (border-spacing) 182

183 CSS / TABLO ÖZELLİKLERİ Boş Hücre Ayarı (empty-cells) Tabloya bazı özellik değerleri (örn. kenarlık) atandığında; boş olan hücreler bu özelliği görmez. Bu durumu düzeltmek için genellikle boş olan hücreler için boşluk karakteri( ) konur. empty-cells özelliği ile içeriği boş olan hücrelerin durumu tanımlanır. show göster table.hucregoster hide gizle { tanımlamaları yapılabilir. emtpy-cells: show; } 183

184 CSS / TABLO ÖZELLİKLERİ Boş Hücre Ayarı (empty-cells) 184

185 CSS / MENÜ İŞLEMLERİ Kullanıcı erişimini kolaylaştıran menüler; CSS ile esnek, hızlı yüklenen çabuk düzenlenebilen şekilde hazırlanmaktadır. Bu bölüm içinde; Dikey / Yatay Dikey / Yatay Açılır Sekmeli Resimli menü uygulamaları gerçekleştirilecektir. 185

186 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Menü elemanları alt alta sıralanmıştır. Listeleme etiketlerine stil uygulanarak farklı çeşitlemeler yapılabilir. Uygulama Adımları Menü başlıkları kararlaştırılmalı ve liste etiketleriyle tanımlanmalıdır. Liste stilleri tanımlanmalıdır Bağlantı (link) stilleri, varsayılan ve seçili (hover) durumu için tanımlanmalıdır 186

187 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Menü başlıkları kararlaştırılmalı ve liste etiketleriyle tanımlanmalıdır. 187

188 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Her liste elemanının (menü başlığının) başındaki madde imini kaldırmak için sınıf seçici tanımlanır. 188

189 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Her liste elemanının (menü başlığının) başındaki madde imini kaldırmak için sınıf seçici tanımlanır. 189

190 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı a (link) etiketini kullanan öğeler için sınıf seçici tanımlanır. Liste elemanlarının blok kutusu içinde sıralanması için block özelliği uygulanmalıdır. 190

191 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Kenar içi boşluk değeri (padding) ayarlanarak metnin kenarlara olan uzaklığı artırılır. 191

192 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Menü elemanlarının üzerine fare ile gelindiğinde biçiminin değişmesi için (rollover efekti) a:hover etiketine stil uygulanır. 192

193 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı Menü elemanlarının arasındaki mesafe (margin) arttırılır. 193

194 CSS / MENÜ İŞLEMLERİ Dikey Menü Yapımı 194

195 CSS / MENÜ İŞLEMLERİ Yatay Menü Yapımı Menü başlıklarının yatay şekilde sıralanması için liste etiketine display:inline özellik ve değeri uygulanmalıdır. 195

196 CSS / MENÜ İŞLEMLERİ Yatay Menü Yapımı Menü elemanlarının altındaki link çizgisi kaldırılıp iç kenar boşlukları (padding) ayarlanır. 196

197 CSS / MENÜ İŞLEMLERİ Yatay Menü Yapımı Menü elemanları için zemin ve yazı rengi ile yazı stili tanımlanır. 197

198 CSS / MENÜ İŞLEMLERİ Yatay Menü Yapımı Menü elemanları için a:hover etiketine uygulanacak stil tanımlanır. 198

199 CSS / MENÜ İŞLEMLERİ Yatay Menü Yapımı 199

200 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Menü elemanları ve düzeyleri kararlaştırılır. Ana Sayfa Hakkımızda Tarihçe Çalışanlar Hizmetler Grafik Tasarım Web Programlama Danışmanlık Referanslar İletişim 200

201 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Menü elemanları madde imsiz şekilde tanımlanır. Altında alt menü öğesi olan başlıklar kapatılmamalıdır!!! 201

202 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Alt menü üst menüye bağlı olarak (göreceli) açılacağı için konumlandırma da ona göre tanımlanmalıdır. 202

203 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Alt menü elemanları mutlak (absolute) şekilde konumlandırılacağı için ona göre tanımlanır. Kenarlıkların üstüste gelmesi için 179px genişlik tanımlandı. Alt menünün sürekli görünmemesi için display:none tanımlaması yapıldı. 203

204 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Menü elemanlarının biçimsel özellikleri tanımlanır. 204

205 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Menü elemanları için a:hover etiketine uygulanacak stil tanımlanır. 205

206 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı Üst menünün üzerine gelindiğinde alt menü elemanlarının blok şeklinde görünmesi için gerekli stil tanımlaması yapılır. 206

207 CSS / MENÜ İŞLEMLERİ Dikey Açılır Menü Yapımı 207

208 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Menü elemanları madde imsiz şekilde tanımlanır. Altında alt menü öğesi olan başlıklar kapatılmamalıdır!!! 208

209 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Üst menü elemanlarının yanyana sıralanması için float:left tanımlaması yapılır. 209

210 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Alt menü elemanları için stil tanımlaması yapılır. Üst menü satır yüksekliği 20px olursa; üst-alt kenar boşlukları 2px ve kenar çizgisi 1px tanımlanırsa toplam yükseklik 26px olacaktır. Alt menü başlangıcı da kenarlıkların üstüste gelmesi istenirse üst kısımdan 25px aşağıda olmalıdır. 210

211 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Menü elemanlarının biçimsel özellikleri tanımlanır. 211

212 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Menü elemanları için a:hover etiketine uygulanacak stil tanımlanır. 212

213 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı Üst menünün üzerine gelindiğinde alt menü elemanlarının blok şeklinde görünmesi için gerekli stil tanımlaması yapılır. 213

214 CSS / MENÜ İŞLEMLERİ Yatay Açılır Menü Yapımı 214

215 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Sekmeli menüler; kullanıcıya hızlı geçiş imkânı veren ve kullanılan alandan tasarruf sağlayan bir tasarıma sahiptirler. 215

216 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Dikkat edilmesi gereken en önemli nokta; zeminde kendini tekrarlayacak görselin menü içine doğru şekilde yerleştirilmesidir. Bunun için resmi parçalara bölmek esneklik ve hız kazandıracaktır. sol kısım sol.png sağ kısım sag.png bütün 216

217 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Menü elemanları madde imsiz şekilde tanımlanır. 217

218 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Menü elemanları ve sekmenin sağ kısmına ait stil tanımlaması yapılır. 218

219 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Menü elemanları ve sekmenin sol kısmına ait stil tanımlaması yapılır. 219

220 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı Menü elemanları için a:hover etiketine uygulanacak stil tanımlanır. 220

221 CSS / MENÜ İŞLEMLERİ Sekmeli (Tab) Menü Yapımı 221

222 CSS / MENÜ İŞLEMLERİ Resimli Menü Yapımı Resim tabanlı menüler sayesinde; sayfalar daha hızlı yüklenmektedir. Ayrıca menüyü oluşturan görseller toplu şekilde tek resim halinde bulunurlar. Temel mantık, Alt resmin görülebilir alanının konumlandırılmasıdır. 222

223 CSS / MENÜ İŞLEMLERİ Resimli Menü Yapımı resim1 resim2 resim2 deki Blog yazısı, zemin resmi yapılacaksa (aktif menü seçeneği olarak öne çıkarılacaksa) sıfır noktasına nasıl kaydırabiliriz? sorusu yanıtlanmalıdır. 120 px sola (-) ve 40 px yukarı (-) şeklinde konumlandırılmalıdır. 223

224 CSS / MENÜ İŞLEMLERİ Resimli Menü Yapımı Başlangıç pozisyonu olarak, zemin resminin 0,0 konumundan itibaren 160 px genişliğinde 40 px yüksekliğinde olan kısmını alındı. Bu nedenle; resmin sadece Ana Sayfa kısmı diğer liste elemanlarına da zemin resmi oldu. 224

225 CSS / MENÜ İŞLEMLERİ Resimli Menü Yapımı Zemin resmi; dikeydeki pozisyonu (y) değiştirilmeden, yatayda (x) adım adım -160px kaydırılmalıdır. 225

226 CSS / MENÜ İŞLEMLERİ Resimli Menü Yapımı Fare ile menünün üzerine gelindiğinde zemin resminin hangi kısımlarının gözükeceği ayarlanır. Yataydaki pozisyon aynen geçerlidir; dikeyde ise 50 px yukarı (-50px) kaydırılmalıdır. 226

227 Şimdilik bu kadar web tasarımı ve programlamayla ilgili bir sonraki yayın JAVASCRIPT 227

228 İ L E T İ Ş İ M hakanbabac.net iletisim@hakanbabac.net 228