Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
İNTERNET PROGRAMCILIĞI I
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5
2
CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları
Stil Oluşturmak/CSS 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; …} Entropy can be changed from one base to another
3
CSS Ö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. Entropy can be changed from one base to another
4
Stil Yapılarını HTML Sayfa İçerisinde Kullanmak
CSS yapıları HTML içerisinde farklı şekillerde kullanılabilir: A. Etiketlerin style özelliği kullanılarak. UYGULAMA : Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. Tarayıcının metin boyutu büyüklüğünü değiştirip, hangi yazıların değiştiğini gözlemleyiniz. Entropy can be changed from one base to another
5
Stil Yapılarını HTML Sayfa İçerisinde Kullanmak
B. <head> etiketleri arasında <style> etiketi kullanılarak. UYGULAMA : Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz. Tarayıcının metin boyutu büyüklüğünü değiştirip, hangi yazıların değiştiğini gözlemleyiniz. Entropy can be changed from one base to another
6
Stil Yapılarını HTML Sayfa İçerisinde Kullanmak
C. CSS kodlarının ayrı bir dosya halinde “.css” uzantılı olarak kaydedilerek daha sonra bu dosyanın HTML belgesi içerisinden <link> etiketi ile çağrılmasıyla. UYGULAMA : Aşağıdaki CSS kodlarını stil_def.css olarak kaydediniz. 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. Entropy can be changed from one base to another
7
CSS Yapıları 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. <p class=“orta”> Bu paragraf ortalıdır. </p> Entropy can be changed from one base to another
8
CSS Yapıları 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. <H3 class=“orta”> Bu başlık ortalıdır. </H3> <p class=“orta”> Bu paragraf ortalıdır. </p> 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. <p id=“onemli”> Sınav Duyurusu </p> UYGULAMA: Stil yapılarının kullanımı Entropy can be changed from one base to another
9
CSS Arkaplan Özellikleri
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. Entropy can be changed from one base to another
Benzer bir sunumlar
