İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6
Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler: Color: Metnin rengini belirler. Letter-spacing: Karakterler arası boşluğu belirler. Text-align: Metnin yataydaki konumunu belirler. Left (sol), right (sağ), center (ortalı), justify (iki yana yaslı) değerlerini alır. Text-decoration: Metni şekillendirmek için kullanılır. None (hiçbiri), underline (altı çizgili), overline (üstü çizgili), line-through (ortası çizgili), blink (yanıp sönen) Text-indent: Metnin başlangıç noktasına olan uzaklığını belirler. Text-transform: Metnin harf büyüklüklerini ayarlamak için kullanılır. None (hiçbiri), capitalize (ilk harfler büyük), uppercase (tümü büyük), lowercase (tümü küçük) Word-spacing: Kelimeler arası boşluğu ayarlamak için kullanılır. CSS Text Özellikleri 2
Font ile ilgili özellikleri ayarlamak ve biçimlendirmek için kullanılır. Serif: Karakter sonu küçük çıkıntılardan oluşur. Times New Roman, Georgia gibi Sans-Serif: Karakter çizgi sonlarında çıkıntılar yoktur. Arial, Verdana gibi Monospace: Tüm karakterler eşit yer kaplar. Courier New, Lucida Console Özellikleri ve aldıkları değerler: Font-family: Fontun tipini belirler. Verdana, Arial,… Font-size: Fontun büyüklüğünü belirler. Font-style: Fontun stilini belirlemek için kullanılır. Normal, italic, oblique değerlerini alır. Font variant Normal, small-caps değerlerini alır. Font-weight: Fontun ağırlığını (kalınlığını) belirlemek için kullanılır. Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 değerlerini alır. CSS Font Özellikleri 3
Nesneleri (paragraf, resim,…) çerçeveleyecek kenarları biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler: Border-color: Dört kenarın rengini belirlemek için kullanılır. Border-style: Dört kenarın biçimini belirlemek için kullanılır. None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset değerlerini alır. Border-width: Dört kenarın genişliğini belirlemek için kullanılır. Thin (ince), medium (orta), thick (kalın) değerlerini alır. Border-bottom-color: Alt kenarın rengini belirler. Border-bottom-style: Alt kenarın biçimini belirler. Border-bottom-width: Alt kenarın genişliğini belirler. Border-left-color: Sol kenarın rengini belirler. Border-left-style: Sol kenarın biçimini belirler. Border-left-width: Sol kenarın genişliğini belirler. CSS Kenar Özellikleri 4
Border-right-color: Sağ kenarın rengini belirler. Border-right-style: Sağ kenarın biçimini belirler. Border-right-width: Sağ kenarın genişliğini belirler. Border-top-color: Üst kenarın rengini belirler. Border-top-style: Üst kenarın biçimini belirler. Border-top-width: Üst kenarın genişliğini belirler. CSS Kenar Özellikleri 5
Özellikleri ve aldıkları değerler: Margin-bottom: Elemanın aşağı olan uzaklığını belirler. Margin-left: Elemanın sola olan uzaklığını belirler. Margin-right: Elemanın sağa olan uzaklığını belirler. Margin-top: Elemanın üste olan uzaklığını belirler. Nesneler Arası Uzaklıkları Ayarlama 6
Özellikleri ve aldıkları değerler: Bottom: Alt boşluğu belirler. Clip: Elemanı istenilen boyutlara kırpmak için kullanılır. Left: Sol boşluğu belirler. Overflow: İçerik sınırlarının taştığı zaman ne olacağını belirler. Auto, hidden, scroll, visible değerlerini alır. Position: Bir nesnenin konumunu belirler. Absolute: Dahil olduğu blok içerisinde mutlak konumlanmayı tanımlar. Sırasıyla nesnenin sol, yukarı, sağ, aşağı olan uzaklığını belirler. Fixed: Tarayıcı penceresini baz alarak mutlak konumlanmayı tanımlar. Relative: Normal konumlanmasını baz alarak bu konumdan sonra mutlak konumlanmayı belirler. Örneğin, left:30 tanımlaması soldan 30 piksel daha uzaktan konumlanacağını gösterir. Static: Nesnenin normal düzen akışına dahil olup herhangi bir pozisyonlanma etkisine dahil olmadığını gösterir. Nesneleri Konumlandırma 7
Right: Sağ boşluğu belirler. Top: Üst boşluğu belirler. Z-index: z ekseninde sıra numarası için kullanılır. Nesneleri Konumlandırma 8