Web Teknolojileri Hafta 3 1. İçerik  Cascading Style Sheets - CSS 2.

... konulu sunumlar: "Web Teknolojileri Hafta 3 1. İçerik  Cascading Style Sheets - CSS 2."— Sunum transkripti:

1 Web Teknolojileri Hafta 3 1

2 İçerik  Cascading Style Sheets - CSS 2

3 CSS  Web sayfalarında html etiketlerinin kısıtlı imkanlarını daha da geliştirmek, sayfa tasarımlarını daha etkili hale getirmek ve kolay tasarlanabilir, esnek yapmak amacıyla stil şablonları kullanılmaktadır.  Stil şablonlarını tek bir etiket üzerinde tanımlanabilece ğ i gibi, tüm sayfada geçerli olacak şekilde tasarlanabilir veya stil dosyaları ile istenilen sayfada stil şablonları kullanılabilir. 3

4 Stil Şablonları Stil şablonları tanımlandıkları yere göre üç farklı şekilde kullanılabilirler.  Yerel Stil tanımlamaları (Satır İ çi Stiller)  Global Stil tanımlamaları (Gömülü Stiller)  Ba ğ lantılı Stil tanımlamaları (Harici Stil Dosyaları) 4

5 Yerel Stil Tanımlamaları  Yerel Stil tanımlamaları (Satır İ çi Stiller): Stil tanımlamaları sayfa içerisinde etiket içerisinde style özelli ğ inde tanımlanırlar. Bu stil tanımları sadece tanımlandı ğ ı yerde geçerlidir. 5 Stilsiz paragraf Stil verilmiş paragraf

6 Global Stil Tanımlamaları  Sayfa içerisinde geçerli olacak Stil tanımlamaları için kullanılır. Sayfanın head kısmında ile etiketleri arasında tanımlanır.  Etiketlere tanımlanan stiller sayfa içerisinde kullanılan aynı etiketlerin tümüne aynı şekilde etki ederler. 6

7 Global Stil Tanımlamaları 7 Örnekler p{ font-size:18pt; color:#C4A9A9 } Stil etki eden ilk paragraf stil etki etmeyen metin Stil etki eden ikinci paragraf

8 Bağlantılı Stil tanımlamaları  Sayfa içerisinde geçerli olacak Stil tanımlamaları.css uzantılı dosyalara kaydedilerek sayfanın head kısmında etiketi içerisinde ça ğ rılır.  Tanımlanan css dosyaları web sitesi içerisinde istenilen web sayfalarında kullanılabilir.  Link etiketinin kullanımı: 8

9 Bağlantılı Stil tanımlamaları 9 li{ font-size:18pt; color:#4F3977; } Örnekler Stiller Yerel Global Ba ğ lantılı

10 Stil tanımlama  Stil tanımlaması yapılırken önce seçici tanımlanır.  "{" sembolünden sonra seçici üzerine etki edecek stilin özelli ğ i ":" sembolünden sonra de ğ eri belirlenir.  Birden fazla özellik kullanılaca ğ ı zaman "; " kullanılır.  Tanımlama bitti ğ inde " } " kapatılır.  Stil tanımlamasında kullanılacak seçici olarak etiketler kullanılabilir. 10

11 Stil tanımlama seçici{ özellik1:deger1; özellik2:deger2; ….. } p{ font-size:18pt; color:#C4A9A9; } 11

12 ID Stil tanımlaması  Sayfa içerisindeki bir ö ğ eye ID özelli ğ ini kullanarak stil tanımlamak için seçici isminden önce "#" sembolü kullanılır. stilden etkilenmeyen metin stilden etkilenen metin #idili{ font-size:18pt; color:#48098C; } 12

13 CLASS Stil tanımlaması  Sayfa içerisindeki bir ö ğ eye CLASS özelli ğ ini kullanarak stil tanımlamak için seçici isminden önce "." sembolü kullanılır. stilden etkilenmeyen metin stilden etkilenen metin.sinifli { font-size:8pt; color:#06641D; } 13

14 Stil Hiyerarşisi  Stil tanımlamaları yapılırken bir ö ğ eyi etkileyen birden fazla stil tanımlaması olabilir.  Bir ö ğ e içerisinde önce ö ğ e içerisinde tanımlanmış stil özellikleri geçerli olacaktır. E ğ er ö ğ e içerisinde stil tanımlaması bulunmuyorsa ö ğ enin içerisinde bulundu ğ u bölümün stil tanımlaması varsa bu stil özellikleri geçerli olacaktır. 14

15 Stil Hiyerarşisi Stiller Yerel Global Ba ğ lantılı 15

16 Sık Kullanılan Stil Özellikleri  Arka Plan Stil Özellikleri: Stil tanımlanacak etiketlerin arkaplan özellikleri belirlemek amacıyla kullanılırlar. background-color: arkaplan rengini belirlemek amacıyla kullanılır. background-image: arkaplanda bulunması istenen resmin belirlenmesi için kullanılır. 16

17 Sık Kullanılan Stil Özellikleri  Arka Plan Stil Özellikleri: body {background-color:#D9F7D1; }.arkaplan { background-color:#F0CECF; }.resimArkaplan {background-image:url(arkaplan.png); } Arka planı renklendirilmiş paragraf Arkaplanda resim olan div 17

18 Sık Kullanılan Stil Özellikleri  Font Stil Özellikleri: Sayfada yer alacak olan yazıların font ayarlanı gerçekleştirmek amacıyla kullanılan stil özellikleridir. font-family: Yazı fontunun tipini belirlemek amacıyla kullanılır. (Arial, Verdana gibi) font-size: Yazı fontunun büyüklü ğ ünü belirler. (px ile piksel, pt ile punto olarak büyüklük belirlenebilir.) color: Yazı rengini belirlemek için kullanılır. 18

19 Sık Kullanılan Stil Özellikleri  Font Stil Özellikleri: 19 body {background-color:#D9F7D1; font-family:Cambria; font-size:14px; color:#48098C; }.arkaplan { background-color:#F0CECF; font-family:Cambria; font-size:12px; color:#790AF3; }.resimArkaplan { background-image:url(arkaplan.png); font-family:Cambria; font-size:10px; color:#600305; } İ çerik yazısı Arka planı renklendirilmiş paragraf Arkaplanda resim olan div

20 Sık Kullanılan Stil Özellikleri  Metin konumlandırma: text-align: Metinlerin bulundukları etiket içerisinde konumunu belirlemek amacıyla kullanılan özelliktir. left: Yazının sola hizalanmasını sa ğ lar. center : Yazının ortays hizalanmasını sa ğ lar. right : Yazının sa ğ a hizalanmasını sa ğ lar. Justfy: Yazının iki yana hizalanmasını sa ğ lar. 20

21 Sık Kullanılan Stil Özellikleri  Font Stil Özellikleri: 21 body { ….text-align:left;}.arkaplan { …… text-align:center;}.resimArkaplan { …… text-align:right; } İ çerik yazısı Arka planı renklendirilmiş paragraf Arkaplanda resim olan div

22 Sık Kullanılan Stil Özellikleri  Yükseklik ve Genişlik belirleme: width: etiketin genişlik de ğ erini belirlemek için kullanılır. height: etiketin yükseklik de ğ erini belirlemek için kullanılır. İ çerisinde bulunan de ğ ere göre yüzdelik olarak belirlenebilir. (50%, 20% gibi) Piksel de ğ eri olarak belirlenebilir. (20, 50 gibi) 22

23 Sık Kullanılan Stil Özellikleri  Font Stil Özellikleri: 23 body { ….text-align:left;}.arkaplan { …… text-align:center; width:20%; height:50px;}.resimArkaplan { …… text-align:right; width:15%; height:40px;} İ çerik yazısı Arka planı renklendirilmiş paragraf Arkaplanda resim olan div

24 SPAN etiketi  Web sayfalarını düzenlemek amacıyla kullanılan ö ğ elerden biri de span elemanıdır.  Span elemanı kullanılarak web sayfasının belirli parçalara bölünmesi ve bu parçaların içerisine içeriklerin eklenerek gösterilmesi sa ğ lanır.  Span etiketi satır içi temelli bir elemandır. İ çerisine eklenen de ğ erlerin büyüklü ğ ü kadar genişli ğ e sahip olabilir.  Span elemanları ardarda eklendi ğ inde yanyana gösterilirler.  Span elemanları stiller kullanarak düzenlenebilir. 24

25 SPAN etiketi Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri span{ background-color:#4F3977; color:#ECDEDE; font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:12px; } 25

26 DIV etiketi  Web sayfalarını düzenlemek amacıyla kullanılan ö ğ elerden biri de div elemanıdır.  Div elemanı kullanılarak web sayfasının belirli parçalara bölünmesi ve bu parçaların içerisine içeriklerin eklenerek gösterilmesi sa ğ lanır.  Div etiketi blok temelli bir elemandır. İ çerisine eklenen de ğ erleri bir blok içerisinde gösterir.  Div elemanlarını yanyana gösterebilmek için float elemanı kullanmak gerekmektedir.  Div elemanları stiller kullanarak düzenlenebilir. 26

27 DIV etiketi Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri 27

28 DIV etiketi Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri div{ background-color:#7961A4; color:#ECDEDE; font-family:"Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif; font-size:12px; } 28

29 DIV etiketi Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri div{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:12px; } div.t{ background-color:#4F3977; color:#ECDEDE; } div.c{ background-color:#C4A9A9; color:#410506; } 29

30 DIV etiketi ile yerleşim  Web sayfamızda artarda div etiketleri kullanıldı ğ ında altalta gösterilecektir. 30.bolumler{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:12px; background-color:#C4A9A9; color:#410506; width:15%; }.dersler{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:10px; background-color:#4F3977; color:#ECDEDE; width:20% }

31 DIV etiketi ile yerleşim 31 Bilgisayar Mühendisli ğ i Bilişim Sistemleri Mühendisli ğ i Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri

32 DIV etiketi ile yerleşim  Web sayfamızda artarda div etiketleri kullanıldı ğ ında e ğ er yanyana gösterilmek isteniyorsa float özelli ğ i left (solda) veya right (sa ğ da) seçilir.  Float özelli ğ inin sıfırlanması için clear özelli ğ i left veya right seçilir. Her ikisinin sıfırlanması için bu özellik both olarak seçilir. 32

33 DIV etiketi ile yerleşim 33.bolumler{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:12px; background-color:#C4A9A9; color:#410506; width:15%; float:left; }.dersler{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:10px; background-color:#4F3977; color:#ECDEDE; width:20%; float:left; }

34 DIV etiketi ile yerleşim 34 Bilgisayar Mühendisli ğ i Bilişim Sistemleri Mühendisli ğ i Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri

35 DIV etiketi ile yerleşim 35.bolumleri{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:12px; background-color:#C4A9A9; color:#410506; width:40%; float:left; }.dersleri{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:10px; background-color:#4F3977; color:#ECDEDE; width:60%; float:left; }

36 DIV etiketi ile yerleşim 36.universite{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:14px; background-color:#7961A4; color:#410506; width:100%; text-align:center; }.bolum{ font-family:"Gill Sans", Helvetica, Arial, sans-serif; font-size:14px; background-color:#D2EBE7; color:#410506; width:100%; text-align:center; }.sifirla{ clear:both; }

37 DIV etiketi ile yerleşim 37 Sakarya Üniversitesi Bilgisayar Mühendisli ğ i Bilişim Sistemleri Mühendisli ğ i Programlamaya Giriş Veri Yapıları Web Teknolojileri Veritabanı Yönetim Sistemleri Bilgisayar ve Bilişim Bilimleri Fakültesi

38 Örnek: 38

39 Örnek: 39

40 Örnek:.ust{ background-color:#48098C; color:#F1E4E4; height:100px; }.orta{ background-color:#EADFF7; color:#48098C; height:450px; padding:3%; } 40.ortaustsol { background-color:#FFFFFF; color:#48098C; width:63%; height:200px; float:left; }.ortabosluk { width:3%; height:200px; float:left; }

41 Örnek:.ortaustsag { background-color:#FFFFFF; color:#48098C; width:30%; height:200px; float:left; }.ortaorta{ width:100%; height:30px; } 41.ortaaltsag { background-color:#FFFFFF; color:#48098C; width:30%; height:200px; float:left; }.ortaaltorta { background-color:#FFFFFF; color:#48098C; width:30%; height:200px; float:left; }

42 Örnek:.ortaaltsol { background-color:#FFFFFF; color:#48098C; width:30%; height:200px; float:left; }.alt{ background-color:#48098C; color:#F1E4E4; height:50px; }.sifirla{clear:both;} 42

43 Örnek: 43

44 Örnek: Üye Ol | Üye Girişi| English +90 295 255 5454 sabis@sakarya.edu.tr Sakarya Üniversitesi Bilgisayar ve Bilişim Bilimleri Fakültesi Sertifika Programları Site İ çi Arama Anasayfa Hakkımızda Kurslar İ letişim 44

45 Örnek:.ust { background-color:#48098C; height:100px; width:94%; color:#EADFF7; padding-left:3%; padding-right:3%; font-family:"Gill Sans"; font-size:10px;}.ustust { text-align:right; width:100%;}.ustsol{ background-color:#48098C; width:20%; color:#EADFF7; float:left; text-align:left} 45.ustorta { background-color:#48098C; height:20pt; width:60%; color:#EADFF7; float:left; text-align:center;}.ustsag { background-color:#48098C; height:20pt; width:20%; color:#EADFF7; float:right; text-align:right;}.ustalt{ background-color:#790AF3; color:#EADFF7; width:100%; height:25px;}

46 Örnek:.menu { font-size: 14px; width: 80px; text-align: center; border-right: 1px solid #D9F7D1;}.bos { clear:both; } 46