Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Transkript

1 Dimension, Font, Generated Content, BACKGROUND Özellik Açıklama Değerler IE F N W3C color background background-attachment Bir öğedeki yazıların renklerini tanımlamakta kullanılır Bir yöndeki tüm art alan tanımlarının hepsini atamak için kullanılan kısaltma Bir art alan resmi değişmez mi yoksa sayfayla birlikte kayar mı olduğunu belirtir renk-hex renk-adı renk-rgb background-color background-image background-repeat background-attachment background-position scroll fixed background-color Bir öğenin art alan rengini atar renk-rgb renk-hex renk-adi transparent background-image background-position background-repeat Bir resmi art alan resmi olarak belirler Art alan resminin başlangıç noktasını tanımlar Art alan resminin nasıl yineleneceğini belirtir url(url) top left top center top right center left center center center right bottom left bottom center bottom right x y xpos ypos repeat repeat-x repeat-y no-repeat burada backgroundun resim özelligini kullanıyoruz... 1

2 burada ise yazının arkaplanına renklendirme özelligini kullanıyoruz BORDER CSS border özelliği bir öğenin sınırına ilişkin stil ve renk tanımlamada kullanılır. HTML içinde yazıların çevresine sınır koymak tablolarla yapılır. Fakat CSS border özelliği güzel etkileriyle yazıların çevresini sınırlama olanağı oluşturur ve her öğeye uyarlanabilir. Özellik Açıklama Değerler IE F N W3C border border-bottom Bir tanımda her dört yöndeki sınırları belirlemeye yarayan kısaltılmış bir özelliktir. Bir tanımda alt sınırın tüm özelliklerini bir arada tanımlamaya yarayan kısaltılmış tanımdır. sınır-eni sınır-stili sınır-rengi sınır-alt-eni sınır-stili sınır-rengi border-bottom-color Alt sınırın rengini belirler sınır-rengi border-bottom-style Alt sınırın stilini tanımlar sınır-stili border-bottom-width Alt sınırın enini tanımlar thin medium thick border-color border-left Dört sınır için renk belirten değerlerdir. Tek ya da dört renge kadar tanım yapılabilir. sol sınır için tüm değerleri tanımlamaya yarayan bir kısaltmadır renk sol-sınır-eni sınır-stili sınır-rengi border-left-color Sol sınırın rengini tanımlar sınır-rengi border-left-style Sol sınırın stilini tanımlar sınır-stili border-left-width Sol sınırın enini tanımlar thin medium thick border-right Sağ sınır için tüm değerlerin tanımlanabildiği bir kısaltmadır. sağ-sınır-eni sınır-stili sınır-rengi border-right-color Sağ sınırın rengini tanımlar sınır-rengi border-right-style Sağ sınırın stilini tanımlar sınır-stil

3 border-right-width Sağ sınırın enini tanımlar thin medium thick border-style border-top Dört sınırın stillerini tanımlar. birden dörde kadar stil tanımı yapılabilir. Üst sınırın tüm özelliklerini tanımlamak için kullanılan bir kısaltmadır. hidden dotted dashed solid double groove ridge inset outset üst-sınır-eni sınır-stili sınır-rengi border-top-color Üst sınırın rengini tanımlar sınır-rengi border-top-style Üst sınırın stilini tanımlar sınır-stili border-top-width Üst sınırın enini tanımlar thin medium thick border-width Bir tanımdaki dört sınırın özelliklerinin belirtildiği kısaltılmış özelliktir. Birden dörde kadar tüm değerler yazılabilir thin medium thick <html> <head> <style type="text/css"> p.one border-width: 5px 3

4 p.two border-width: thick p.three border-width: 5px 10px p.four border-width: 5px 10px 1px p.five border-width: 5px 10px 1px medium </style> </head> <body> <p class="one">some text</p> <p class="two">some text</p> <p class="three">some text</p> <p class="four">some text</p> <p class="five">some text</p> </body> </html> Burda ise borderın istedigimiz bir kenarını kalın yapabiliyoruz <html> <head> 4

5 <style type="text/css"> p.one border-color: #0000ff p.two border-color: #ff0000 #0000ff p.three border-color: #ff0000 #00ff00 #0000ff p.four border-color: #ff0000 #00ff00 #0000ff rgb(250,,255) </style> </head> <body> <p class="one">one-colored border!</p> <p class="two">two-colored border!</p> <p class="three">three-colored border!</p> <p class="four">four-colored border!</p> </body> </html> Burda ise borderımızın herangi bi kısmına istedigimiz renkleri verebiliyoruz 5

6 Burda borderımaza çeşitli şekiller verebiliyoruz... CLASSİFİCATİON Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir. Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir. Bir başka öğe içinde resmin yerede görüneceğini tanımlar, bir öğeyi normal yerine göreceli olarak nereye yerleştirileceğini belirtir. Bir öğenin mutlak yerini tanımlar ve bir öğenin görülebilirliğinin nasıl kontrol edileceğini belirtir. Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir. Özellik Açıklama Değerler IE F N W3C clear Nir öğenin, başka kayan öğelere izin verilmeyen yanlarını tanımlar. left right both cursor Görüntülenecek İmleç (cursor) tipini tanımlar. url-adresi auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

7 display float position visibility Bir öğe eğer görüntülenirse nasıl olduğunu tanımlar Bir resim y ada yazının diğer bir öğe içinde nasıl yer alacağını tanımlar Bir öğeyi statik, göreceli, mutlak ve değişmez yerleştirmek için kullanılır. Bir öğenin görüntülenecek mi yoksa gizlenecek mi olduğunu belirtir. inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption left right static relative absolute fixed visible hidden collapse DİMENSİON Bir öğenin yükseklik ve enini ayarlamakta kullanılır. Bu özellik iki satır arasındaki aralığı da değiştirebilmenizi sağlar. Özellik Açıklama Değerler IE F N W3C height line-height max-height max-width min-height min-width Bir öğenin yüksekliğini ayarlar auto Satırlar arasındaki açıklığı belirler Bir öğenin yüksekliğinin en çok ne olacağını belirtir Bir öğenin eninin en çok ne olacağını belirtir. Bir öğenin yüksekliğinin en az ne olacağını belirtir. Bir öğenin eninin en az ne olacağını belirtir normal sayı width Bir öğenin enini belirler auto

8 Font CSS Yazı-tipi özelliği, yazının yazı-tipi ailesini, koyuluğunu, boyunu ve stilini değiştirmemize olanak verir. Not: CSS1'de yazı-tipleri "yazı-tipi" adıyla tanımlanır. Eğer bir taracıyı belirtilen yazı-tipini desteklemiyorsa, varsayılan yazı-tipini kullanır Tarayıcı bir yazı-tipini ya yerel olduğu ya da WEB'den indirildiği için tanır. Eğer aynı özellikleri olan iki yazı-tipi varsa tarayıcı birini tümüyle dikkate almaz. Bir öğede, içindeki her karakterde tarayıcı yazı-tipinin tüm özelliklerini uygular. Yazı-tipinin tüm özellikleri yazı-tipi-ailesi ile kullanılır. Yazı-tipi özelliklerinin bu yazı ailesi kurallarına uygunluğu belirlenir. Uyumlu olan özellikler öğede uygulanır. yazı-tipi ailesi içinde yazı-tipi yoksa, yazı-tipi kümesindeki alternatif yazı-tipi ve bunun yazı-tipi-ailesi kullanılır. Bulanan yazı-tipi geçerli ama ilgili karakter için grafik gösterim yoksa, bu durumda alternatif yazı-tipi kullanılır. Eğer yazı-tipi tümüyle yoksa tarayıcı varsayılan yazı-tipini kullanır. Her özelliğin aranıp bulunması kuralları aşağıdaki gibidir: Yazı-tipi stili (font-style) ilk denenen olur. Eğik (italic) yazı için yazı-tipinde (italic) ya da (oblique) sözcükleri varsa geçerlidir. Eğer doğru tanım bulunamazsa yazı-tipi stili hatalı olur. Daha sonra yazı-tipi- değiştirma (font-variant) denenir. "normal" "küçük-büyük harfler" (small-caps"; tanımının aranmasını gerektirir. Aranan bulunursa tüm küçük harfler küçük büyük harflere çevrilir. yazı-ağırlığı (font-weight) daha sonra aranan özelliktir. Bu özellik hiç hataya düşmez. yazı-tipi-boyu (font-size) tarayıcı bağımlı sınırlamalara bağlı bir değerdir. Örneğin değiştirilebilen yazı-tip boyu tarayıcının kayıtlarındaki en yakın yazı-tipi boyuna yuvarlanarak görüntülenir Özellik Açıklama Değerler IE F N W3C font font-family Bir yazı tipinin tüm tanımlarını bir komutta yazabilmek için kullanılan kısaltmadır. Öncelikli yapılmış yazı-tipi ailesi adları ve/ya da bir öğe için aile adı yazı-tipi stili başka yazı-tipi biçimi yazı-tipi koyuluğu yazı-tipi boyu/satır yüksekliği yazı-tipi ailesi caption icon menu message-box small-caption status-bar aile adı soysal aile

9 font-size yazı-tipi boyutunu belirtir xx-small x-small small medium large x-large xx-large smaller larger font-size-adjust font-stretch Bir ögenin görünen değerinin ilk seçilen yazı-tipi için x- height olmasına denir Seçilmiş yazı-tipi ailesini daraltır ya da genişletir sayı font-style yazı-tipi stilini atar normal italic oblique font-variant font-weight Yazının küçültülmüş büyük harflerle ya da normal yazıtipi ile görüntülenmesi için kullanılır Yazı-tipi için koyuluk ataması yapar normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal small-caps normal bold bolder lighter

10 bu kısımda yazımızın stilini belirliyoruz ve yazının hangi boyutlarda olabilcegini kalınlıgını yada italicmı olcagını buradan ayarlayabiliyoruz... GENERATED CONTENT LİST AND MARKER Liste özelliği listenin madde işaretini değiştirmeye, ya da bir resmi bu işaret yerine kullanmaya yarar. Liste özelliği listenin madde işaretini değiştirmeye, ya da bir resmi bu işaret yerine kullanmaya yarar. Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir. Özellik Açıklama Değerler IE F N W3C list-style Bir tanımda liste özelliğinin tüm değerlerini belirlemeye yarayan kısaltılmış işlemdir. liste-stil-tipi liste-stil-yeri liste-stil-resmi 10

11 list-style-image Liste madde işareti olarak resim kullanıldığını gösterir url list-style-position Madde işaretinin yerini belirtir inside outside list-style-type Madde işaretinin tipini belirtir disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha marker-offset auto <html> <head> <style type="text/css"> ul.disc list-style-type: disc ul.circle list-style-type: circle ul.square list-style-type: square ul. list-style-type: </style> </head> 11

12 <body> <ul class="disc"> </ul> <ul class="circle"> </ul> <ul class="square"> </ul> <ul class=""> </ul> </body> </html> Bu arada css ile bir listeme yapılıyor ve listeme yapılırken madde liste işaretleri disc,circle,square ve bi işaret kullanılmadan listeleme yapılabiliyor... <head> <html> 12

13 <style type="text/css"> ol.decimal list-style-type: decimal ol.lroman list-style-type: lower-roman ol.uroman list-style-type: upper-roman ol.lalpha list-style-type: lower-alpha ol.ualpha list-style-type: upper-alpha </style> </head> <body> <ol class="decimal"> </ol> <ol class="lroman"> </ol> <ol class="uroman"> </ol> <ol class="lalpha"> </ol> <ol class="ualpha"> </ol> </body> </html> Burada ise listeleme yaparken madde işareti olarak karakterlerden yararlanıyoruz... 13

14 burda ise listeleme yaparken liste işareti olarak resimlerden faydalanıyoruz... MARGİN Kenar özelliği, öğelerin çevresindeki boşluğu tanımlar. İçeriği üst üste bindirmek için eksi değerler tanımlama olanağı vardır. Üst, sağ, alt ve sol kenar boşlukları ayrı özelliklerle tanımlanarak birbirlerinden bağımsız değiştirilebilir. Kısaltılmış bir kenar boşluğu özelliği hepsini topluca tanımlamakta da kullanılabilir. Not: Netscape ve IE "body" tanımına varsayılan değer olarak 8px kenar boşluğu atar. Opera bu atamayı yapmaz, ama Opera da varsayılan değer olarak 8px dolgu kullanır. Buna göre tüm sayfa için kenar boşluğu tanımlamak isterseniz ve operada da düzgün olması için dolgu (padding) tanımı da yapmanız gerekecektir. Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir. Özellik Açıklama Değerler IE F N W3C margin margin-bottom Kenar tanımlarının tümünün bir arada yapıldığı kısaltılmış özelliktir. Bir öğe için alt kenar boşluğunu tanımlar üst-kenar-boşluğu sağ-kenar-boşluğu alt-kenar-boşluğu sol-kenar-boşluğu auto margin-left Sol kenar boşluğunu belirtir auto margin-right Sağ kenar boşluğunu belirtir auto margin-top Üst kenar boşluğunu tanımlar auto

15 15