İNTERNET PROGRAMCILIĞI I BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5
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
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
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
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
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
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
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
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