BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5
Stil Oluşturmak/CSS 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ğin alacağı değer Kullanımı: HTML Nesnesi { Özellik1 : Değer1; Özellik2 : Değer2; Özellik3 : Değer3; }
CSS 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.
Stil Yapılarını HTML Sayfa İçerisinde Kullanmak 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 5 B. <head> etiketleri arasında <style> 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 6 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 : 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.
CSS Yapıları 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. <p class= orta > Bu paragraf ortalıdır. </p>
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ı CSS Yapıları 8
CSS Arkaplan Özellikleri 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.