İ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.

... konulu sunumlar: "İ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."— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6

2 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

3 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

4 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

5  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

6 Ö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

7 Ö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

8  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