Stil Şablonu (CSS) Özellikleri
ZEMİN ÖZELLİKLERİ
Zemin Rengi: “background-color” özelliği ögelerin (etiketlerin) zeminine renk vermek için kullanılır.
|
1 |
h1 { background-color:#3070E7; } |
Zemin Resmi: “background-image” özelliği ögelere zemin resmi eklemek için kullanılır.
|
1 |
body { background-image:url( ‘zemin.jpg’); } |
Zemin Tekrarı: “background-repeat” özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır.
- background-repeat:repeat; Görselin hem yatay olarak hem de dikey olarak tekrar etmesi
- background-repeat:no-repeat; Görselin hiçbir şekilde tekrar etmemesi
- background-repeat:repeat-x; Görselin yatay olarak tekrar etmesi
- background-repeat:repeat-y; Görsel dikey olarak tekrar etmesi
|
1 2 |
body { background-image:url( ‘zemin.jpg’); background-repeat : repeat; } |
Zemin Resmi Pozisyonu: “background-position” özelliği görselin sayfadaki pozisyonunu belirler.
|
1 2 3 4 |
body { background-image:url( ‘zemin.jpg’); background-repeat: no-repeat; background-position: center center; } |
|
1 2 3 |
Body { background:url(‘logo.gif’) no-repeat center center; } Body { background: url(‘logo.gif’) no-repeat 60% 75%;} Body { background: url(‘logo.gif’) no-repeat 100px 200px; } |
Zemin Resmi İliştirme: “background-attachment” özelliği zemine yerleştirilen görselin kaydırma çubuğu ile birlikte hareket edip etmeyeceğinin kontrolünü sağlar.
Görselin kaydırma çubukları ile birlikte hareket etmesi isteniyorsa değer olarak “scroll” kullanırız. Görselin kaydırma çubukları ile birlikte hareket etmemesi, sabit kalması isteniyorsa değer olarak “fixed” kullanılır.
|
1 2 3 4 |
body { background-image:url( ‘zemin.jpg’); background-repeat: no-repeat; background-attachment: fixed; } |
FONT ÖZELLİKLERİ
Font Stili: “font-style” özelliği, metni eğik (italik), az eğik veya normal yapmak için kullanılır. İtalic, oblique, normal gibi değerleri alır.
|
1 |
p { font-style: italic; } |
Font Kalınlığı: “font-weight” özelliği, fontun kalınlık, incelik değerini belirlemeye yarar. Bold, Bolder, Lighter gibi değerleri alır.
|
1 |
p { font-weight: bold; } |
Satırlar Arası Mesafe: “line-height” özelliği, metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.
|
1 |
p { line-height: 15px; } |
Font: Kısaltma işlemini yaparken aşağıdaki söz dizimi kullanılır:
font: font-style font-weight font-size/line-height font-family
|
1 |
p { font: bold 12px/15px verdana, sans-serif; } |
METİN ÖZELLİKLERİ
Color: metne renk vermek için kullanılır.
|
1 |
p { color: black; } |
Metin Hizalama: “text-align” özelliği, metinleri hizalama için kullanılır. Left, right, center, justify gibi değerleri alır.
|
1 |
h1 { text-align: center; } |
Metin Dekorasyonu: “text-decoration” özelliği, genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi(overline), altını çizmeyi(underline), üzerini çizmeyi(line-through) ve onlara yanıp sönme(blink) efekti vermeyi sağlar.
|
1 |
a { text-decoration: none; } |
Metin Dönüşümü: “text-transform” özelliği, bir metindeki karakterleri büyük(uppercase) veya küçük(lowercase) harfe çevirebilir ya da metindeki kelimelerin ilk harflerini(capitalize) büyütebilir.
|
1 |
.buyuk { text-transform: uppercase; } |
Metin Girintileme: “text-indent” özelliği, paragraf başı yaparken cümlenin ne kadar içten başlayacağını ayarlamak için kullanılır.
|
1 |
p { text-indent: 50px; } |
Satırlar Arası Mesafe: “line-height” metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.
|
1 |
p { line-height: 12px; } |
Harfler Arası Mesafe: “letter-spacing” özelliği, metin içinde yer alan karakterlerin arasındaki boşluğu ayarlamak için kullanılır.
|
1 |
p { letter-spacing: 5px; } |
Kelimeler Arası Mesafe: “word-space” özelliği, metin içinde yer alan kelimelerin arasındaki mesafeyi (boşluğu) ayarlamak için kullanılır.
|
1 |
p { word-spacing: 12px; } |
Metin İçindeki Resmin Dikey Konumu: “vertical-align” özelliği, bir ögenin dikey olarak hizalaması için kullanılır. Sub, süper, top, text-top, middle, bottom, text-bottom gibi değerler alır.
|
1 |
img { vertical-align: middle; } |
KUTU MODELİ ÖZELLİKLERİ
Kutu modeli 3 ana ögeden oluşur;
- Margin: kenar dışı boşluğu
- Border: kenar kalınlığı
- Padding: kenar içi boşluğu
Kenar Dışı Boşluğu: kutunun diğer ögelerle arasındaki mesafeyi belirleyen ‘margin’ ögesinin alt elemanları şunlardır;
- margin-top (üst kenar dışı boşluğu)
- margin-right (sağ kenar dışı boşluğu)
- margin-bottom (alt kenar dışı boşluğu)
- margin-left (sol kenar dışı boşluğu)
- margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.)
|
1 2 3 4 5 |
body { margin-top: 10px; margin-right: 5px; margin-bottom: 20px; margin-left: 15px; } |
|
1 |
body { margin:10px 5px 20px 15px;} |
Kenar Çizgisi Biçimi: “border-style” kenar çizgisinin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler.
|
1 2 3 4 5 |
.border_1 { border-top-style: solid; border-bottom-style: solid; border-left-style: double; border-right-style: double } |
|
1 |
.border_1 { border-style: solid double solid double;} |
Kenar Çizgisi Kalınlığı: “border-width” özelliği kenar çizgisinin genişliğini (kalınlığını) ayarlamak için kullanılır. Thin(ince), medium(orta), thick(kalın) gibi değerler alır.
|
1 2 3 4 5 6 |
.border_1 { border-style: solid; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 2px; border-right-width: 2px } |
|
1 2 |
.border_1 { border-style:solid; border-width: 1px 2px; } |
Kenar Çizgisi Rengi: “border-color” özelliği kenar çizgisine renk vermek için kullanılır.
|
1 2 3 4 5 6 7 |
.border_1 { border-style: solid; border-witdh: 5px; border-top-color: #F60; border-bottom-color: #F60; border-left-color: #060; border-right-color: #060 } |
|
1 2 3 |
.border_1 { border-style:solid; border-width: 5px; border-color: #F60 #060 } |
Kenar Özelliği: “border” özelliği kenar çizgisinin biçemi, rengi ve kalınlığını tek seferde biçimlendirmek için kullanılır.
|
1 |
.border_1 { border:1px solid #F60 } |
Kenar İçi Boşluğu: kenar çizgileri ile içerik arasındaki mesafeyi ayarlamaya yarayan ‘padding’ ögesinin alt elemanları şunlardır;
- padding-top (üst kenar içi boşluğu)
- padding-right (sağ kenar içi boşluğu)
- padding-bottom (alt kenar içi boşluğu)
- padding-left (sol kenar içi boşluğu)
- padding (kenar içi boşlukları) (Kısaltma amaçlı kullanılır.)
|
1 2 3 4 5 |
body { padding-top: 10px; padding-right: 5px; padding-bottom: 20px; padding-left: 15px; } |
|
1 |
body {padding:10px 5px 20px 15px;} |
Float, Clear ve Display Özelliği
Float: Nesneler float özelliğini kullanarak; sağa (float:right) ve sola (float:left) kaydırılabilir.
Clear: Float özelliğinin etkisinden kurtulmak, yani kaydırma işine son vermek için kullanılır. Dört farklı değer alabilir. Bunlar;
- None: Değişiklik yapma.
- Right: Sağa kaydırma işine son ver
- Left: Sola kaydırma işine son ver.
- Both: Her iki yönde de kaydırma işine son ver.
Web sayfasındaki nesnelerin akışı, o elemanın seviye (level) türüne göre değişir.
Blok-level elemanlar: Blok şeklinde işlenirler. Sayfadaki normal akışları yukarıdan aşağı şekilde alt alta sıralanırlar. Tipik özellikleri, yeni bir satır başlangıcı yapmalarıdır. Örnek: div,h3, p, li…
Inline-level elemanlar: Inline-level elemanlar aynı satırda işlenirler. Sayfadaki akışları soldan sağa doğrudur. Yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span…
Display: Bu elemanların başlangıç değerleri display özelliği ile değiştirilir.
|
1 2 |
li { display:inline;} span { display:block;} |
TABLO ÖZELLİKLERİ
Tablo Kenar Çizgileri: “border” özelliğini, tabloyu oluşturan <table>, <td> ve <th> etiketlerine uygulayarak, kenar çizgilerinin biçimi, genişliği ve rengi ayarlanır.
|
1 |
table td { border:1px solid #CCC; } |
Kapsayıcı Kenar Çizgisi : “border-collapse” özelliği ile hücre kenarlıkları kaldırılabilir.
|
1 |
table { border-collapse: collapse; } |
Tablo Genişliği ve Yüksekliği: Tablo genişliği için “width” ve tablo yüksekliği için “height” özellikleri kullanılır.
|
1 2 |
table { width: 100%; } td { height: 40px; } |
Tabloda Metin Hizalama: “text-align” özelliğini, yatay hizalama için “vertical-align” özelliğini, dikey hizalama için kullanılır.
|
1 |
td { text-align: center; vertical-align: middle; } |
Kenar Çizgisi İçi Mesafesi : “padding” özelliğini kullanarak her hücrenin kenar çizgisi ile içerik arasındaki mesafe kontrol edebilir.
|
1 |
td { padding: 10px; } |
Tablo Hücre Rengi: Tablodaki hücrelere zemin (background) rengi verme işini “background-color” özelliği uygulanarak gerçekleştirilir.
|
1 |
td { background-color: #9F3; color: #CCC } |
POZİSYON ÖZELLİKLERİ
Statik Konumlandırma: HTML içindeki tüm ögeler varsayılan olarak statik olarak konumlandırılmıştır. Yani ögeler sayfanın normal akışına göre (soldan sağa-yukarıdan aşağıya) konumlandırılır. Ögeler sayfaya sabittir. Kaydırma çubuğu ile birlikte aşağı yukarı hareket ederler.
Sabit Konumlandırma: Sabit veya diğer adıyla tutturulmuş konumlandırma (fixed positioning) özelliği elemanı sayfada sabitler ve kaydırma çubuğu aşağı yukarı hareket ettirildiğinde eleman sabit kalır.
|
1 |
.sabitle { position:fixed; top:30px; right:5px; } |
Göreceli Konumlandırma: Göreceli veya diğer adıyla bağıl konumlandırma, normal konumlamalara bağlı olarak konumlandırma sağlar.
|
1 |
.goreceli_konum { position:relative; left:-20px; } |
Sabit Konumlandırma: Bu tür konumlandırma da ögeler verilen konum özelliklerine (yatay’da right, left; dikey’de top, bottom) göre sayfada istenilen yere konumlandırılır.
|
1 |
.mutlak_konum { position:absolute; left:100px; top:150px; } |
Örtüşen Ögeler: Normal akış dışında konumlandırılan ögeler bazen üst üste gelebilir. Bu durumlarda hangi ögenin üstte hangisinin altta olacağını belirlemek için “z-index” özelliği kullanılır. z-index değeri en yüksek olan öge en üstte yer alır, z-index değeri en küçük olan öge ise en altta yer alır.
|
1 |
p { position:absolute; right:10px; top:5px; z-index:1;} |
LİSTE ÖZELLİKLERİ
Sıralı Listelere Stil Verme: Sıralı listeler için “list-style-type” özelliğine aşağıdaki değerlerden verilerek madde iminin biçimi değiştirilir.
- decimal: Normal numaralandırma
- decimal-leading-zero: Sayının önüne sıfır alarak artar. (01, 02, 03, vb.)
- lower-alpha: Küçük harflerden oluşan alfabe (a, b, c, d, e, vb.)
- lower-latin: Küçük harflerden oluşan Latin alfabesi (a, b, c, d, e, vb.)
- lower-roman: Küçük Harflerden oluşan Roman alfabesi (i, ii, iii, iv, v, vb.)
- upper-alpha: Büyük harflerden oluşan alfabe (A, B, C, D, E, vb.)
- upper-latin: Büyük harflerden oluşan Latin Alfabesi (A, B, C, D, E, vb.)
- upper-roman: Büyük harflerden oluşan Roman alfabesi (I, II, III, IV, V, vb.)
|
1 |
ul { list-style-type: lower-alpha; } |
Sırasız Listelere Stil Verme: Sırasız listeler için “list-style-type” özelliğine aşağıdaki değerlerden verilerek madde iminin biçimi değiştirilir.
- none: Madde imini kaldırır.
- disc: Madde başlarında siyah yuvarlak madde imi oluşturur.
- circle: Madde başlarında siyah yuvarlak içi boş madde imi oluşturur.
- square: Madde başlarında siyah kare madde imi oluşturur.
|
1 |
ul { list-style-type: circle; } |
Madde İmi Olarak Resim Belirleme: “list-style-image” özelliği ile istenen herhangi bir görsel (tercihen gif, png) boyutları uygun olmak şartıyla madde imi olarak kullanılabilir
|
1 |
ul { list-style-image:url("maddeimi.png"); } |
Ekler :
- Sunu dosyasını indirmek için tıklayınız..
Dosya: StilSablonuOzellikleri.pptxİndirme: 534, Boyut: 983.7 KB, Eklenme Tarihi: 26 Kas. 2017
