Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

İNTERNET PROGRAMCILIĞI I BTP 207 Ders 5. CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri.

Benzer bir sunumlar


... konulu sunumlar: "İNTERNET PROGRAMCILIĞI I BTP 207 Ders 5. CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri."— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI I BTP 207 Ders 5

2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden oluşur:  HTML Nesnesi (Etiketi): Biçimin etkili olacağı HTML elemanı  Özellik: HTML nesnesinin biçimlendirilmesi istenen özelliği  Aldığı Değer: Özelliğinin alacağı değer Kullanımı: HTML Nesnesi { Özellik1 : Değer1; Özellik2 : Değer2; Özellik3 : Değer3; …} Stil Oluşturmak/CSS 2

3  Özellikler sayısal değer alırken aşağıdaki birimler kullanılır. Nokta pt Piksel px Santimetre cm Milimetre mm İnç in Yüzde oran % Referans* em Referans birim o anda kullanılan aktif büyüklüğe eşittir. Örneğin, 1 em = 1 font büyüklüğüdür. Fontun büyüklüğü = 12 ise 1 em = 12 olacaktır. CSS 3

4 CSS yapıları HTML içerisinde farklı şekillerde kullanılabilir: A. Etiketlerin style özelliği kullanılarak. UYGULAMA : 1.Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2.Tarayıcının metin boyutu büyüklüğünü değiştirip, hangi yazıların değiştiğini gözlemleyiniz. Stil Yapılarını HTML Sayfa İçerisinde Kullanmak 4

5 B. etiketleri arasında etiketi kullanılarak. UYGULAMA : 1.Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. 2.Tarayıcının metin boyutu büyüklüğünü değiştirip, hangi yazıların değiştiğini gözlemleyiniz. Stil Yapılarını HTML Sayfa İçerisinde Kullanmak 5

6 C. CSS kodlarının ayrı bir dosya halinde “.css” uzantılı olarak kaydedilerek daha sonra bu dosyanın HTML belgesi içerisinden etiketi ile çağrılmasıyla. UYGULAMA : 1.Aşağıdaki CSS kodlarını stil_def.css olarak kaydediniz. 2.Aşağıdaki HTML kodlarını uygulama.htm olarak stil_def.css dosyası ile aynı klasöre kaydedip, tarayıcıda görüntüleyiniz. Stil Yapılarını HTML Sayfa İçerisinde Kullanmak 6

7  Eğer, özelliğin aldığı değer birden fazla ise bu değerler çift tırnak arasına alınarak yazılır. {text-decoration: “underline line-through”}  Birden fazla HTML elemanına ait ortak bir özellik grubu oluşturmak için elemanlar arasına virgül konulur. H1,H2,H3{color: green}  Aynı HTML elemanına birden fazla özellik atamak için sınıf (class) ayıracı kullanılır. Örneğin, aşağıda aynı p elemanı için üç farklı etiket tanımlanmıştır. p.orta {text-align:center} p.sag{text-align:right} p.sol{text-align:left} Bu etiketlerin kullanımı ise aşağıdaki gibidir. Bu paragraf ortalıdır. CSS Yapıları 7

8  Herhangi bir nesneye ait olmayan genel amaçlı stil tanımlamaları yapılabilir. Bu tanımlama nokta işareti ile başlar. Örneğin,.orta{text-align:center} Bu stilin kullanımı ise aşağıdaki gibidir. Bu başlık ortalıdır. Bu paragraf ortalıdır.  HTML nesnelerinin bazı özelliklerine stil kazandırmak için genel amaçlı stil tanımlayıcıları kullanılabilir. Bu tanımlayıcılar # karakteri ile başlar. Bu stil tanımlamasını destekleyen etiketlerle kullanılır. Kullanımında, etiketlerin id özelliğine # ile tanımlanan stil adı atanır. Örneğin, #onemli{ text-decoration:underline; color:red} şeklinde tanımlanan stil, aşağıdaki şekilde kullanılır. Sınav Duyurusu UYGULAMA: Stil yapılarının kullanımı CSS Yapıları 8

9 Arkaplana ait biçimlendirmeler için kullanılır. Özellikleri ve aldıkları değerler:  Background-color: Arka plan rengini belirler.  Background-image: Arka plan resmini belirler.  Background-position: Arka plan resminin konumunu belirler. İkili değerden oluşur. İlk değer x ekseninde, ikinci değer ise y eksenindeki konumunu verir.  Top left, top center, top right  Center left, center center, center right  Bottom left, bottom center, bottom right  x-% y-%  x-pos y-pos  Background-repeat: Resmin arka planı doldurup doldurmayacağını belirler.  Repeat: Resmin arka planı her iki doğrultuda dolduracağını belirler.  Repeat-x: Resmin arka planı x-ekseni boyunca dolduracağını belirler.  Repeat-y: Resmin arka planı y-ekseni boyunca dolduracağını belirler.  No-repeat: : Resmin arka planı doldurmayacağını belirler. CSS Arkaplan Özellikleri 9


"İNTERNET PROGRAMCILIĞI I BTP 207 Ders 5. CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri." indir ppt

Benzer bir sunumlar


Google Reklamları