Kurallar ve Sitil Dosyaları. HTML, XHTML ve CSS CSS (Cascading Style Sheets) CSS nedir?

Transkript

1 Kurallar ve Sitil Dosyaları Sitil dosyalarını hazırlamak için iki yol kullanılabilir. El ile bir metin editöründe yazılabilir Özel bir web geliştirme yazılımı kullanılabilir. HTML, XHTML ve CSS CSS (Cascading Style Sheets) h1 { color: green } Yukarıdaki satır basit bir CSS kuralı olup sadece tek bir kuralı içermektedir. Bir kural bir ya da daha fazla elemanın biçimsel görünüşü hakkındaki bir ifadedir. CSS nedir? Üst üste geçebilen sitil dosyasının kısaltmasıdır. Bir sitil dosyası, HTML dosyalarının kullanıcıya hangi biçimde gösterileceğini söyleyen biçimsel bir kılavuzdur. CSS ise bu biçimsel kılavuzu oluşturmaya yarayan basit bir dildir. Sitil dosyası, HTML dokümanına uygulanacak bir ya da daha fazla CSS kuralı içeren dosyaya verilen isimdir. Örnek olarak verilen kural, h1 başlığının rengini yeşil olarak değiştirmektedir. 1

2 Bir kuralın yapısı Bir kuralın diyagramı Bir kural iki parçadan oluşmaktadır: Seçici (Selector): Soldaki { den önceki kısımdır. HTML dosyası ile sitil dosyasını bağlamakta kullanılır. Tanımlama (Decleration): { } arasındaki kısımdır. Hangi biçimsel etkilerin kullanılacağını gösteren kısımdır. Tanımlamanın yapısı Tanımlama (Decleration) kısmı da iki parçadan oluşmaktadır. Özellik (Property): İki noktadan önceki kısımdır. Bir elemanın sahip olduğu özelliği belirtir. Değer (Value): İki noktadan sonraki kısımdır. Özelliğin hangi değeri alması gerektiğini belirtir. Seçici ve Kuralların Gruplanması CSS dosyaların hazırlanmasında, dosyanın kısa olması genel amaçtır. Dosya ne kadar kısa olursa, yazar o kadar çabuk ve kolay bir şekilde dosya üzerinde eliyle değişiklik yapabilir. Ayrıca dosyanın kısa olması daha hızlı yüklenmesini sağlamaktadır. CSS dosyanın kısaltılması için bazı mekanizmalar içermektedir. 2

3 Aşağıdaki kuralları inceleyelim. h1 { font-style: italic } h2 { font-style: italic } h3 { font-style: italic } Üç kuralda font tipini italik yapmaktadır. Yani tanımlamaları aynıdır. Dolayısıyla seçiciler arasında (,) kullanılarak gruplama yapılabilir. h1,h2,h3 { font-style: italic } Her tanımlama, {, } braketleri arasında yazılmalıdır. Aynı kural içindeki tanımlamalar ; ile ayrılmalıdır. Zorunluluk olmasa bile son tanımlamada da ; kullanılmalıdır. Sitil dosyasını HTML dokümanına bağlamak Örnek olarak şu kurallar verilsin. h1 { color: green } h1 { text-align: center } Her iki kuralda aynı seçici ile ilgili özellikleri değiştirdikleri için tek bir braket içine alınabilirler. h1 { color: green; text-align: center; } Bir sitil dosyasının, HTML dokümanına etki edebilmesi içim, öncelikle o dosyaya bağlanması gerekmektedir. Bu bağlanma işlemini gerçekleştirebilmek için dört yol bulunmaktadır. 3

4 Tarayıcılar ve CSS <style> tagını kullanarak sadece o HTML dokümanında geçerli olacak sitil dosyasını kullanmak. Her bir taga ayrı ayrı style özelliğini kullanarak sitil vermek. <link> tagını kullanarak dış bir sitil dosyasına notasyonunu kullanarak sitil dosyasına bağlamak. CSS dosyalarının istenilen şekilde çalışabilmesi için internet tarayıcınızın CSS desteği bulunması gerekmektedir. Microsoft Internet Explorer (IE), Firefox (FF), Opera (O), Safari (S), ve Konqueror (K) tarayıcılara CSS dosyalarını desteklemektedirler. <style> elemanı ile bağlama HTML dosyasının en üstünde <style> tagını kullaranak CSS kurallarını tanımlayabilirsiniz. Buna inline (satır içi) CSS kullanımı da denmektedir. <stye> tagı <html> tagından sonra <body> tagından önce yazılmalıdır. Bkz. Style.html Yapılar ve kalıtım Style.html dosyasının ağaç yapısı aşağıdaki şekilde verilmiştir. Kalıtım ile CSS tarafından tanımlanan özellikler ağacın alt dallarına kadar ulaşmaktadır. 4

5 Tüm sayfayı italik yapmak istediğimizde ise bunu aşağıdaki gibi gerçekleştirebiliriz. <style type="text/css"> h1, h2, p, li { font-style: italic } </style> Ancak her dosya örnekteki gibi basit olmayacağı için bu işlemi yapmanın daha kolay yolu: <style type="text/css"> body { font-style: italic } </style> <style type="text/css"> h1 { font-style-normal } body { font-style: italic } </style> sırasıyla yazılmış olsaydı ne olacaktır? Kalıtımın üstüne yazma Kalıtımda en üstte tanımlanan sitilin aşağıdaki tüm elemanlara uygulanacağı gösterilmiştir. Bazı durumlarda ise kimi elemanın farklı bir biçime sahip olması gerekebilir. Böyle bir durum için kalıtımın üzerine yazılması gerekmektedir. <style type="text/css"> body { font-style: italic } h1 { font-style-normal } </style> CSS bir programlama dili değildir. Programlama dillerinde satırlar sırayla okunur ve en son satırda belirtilen değerler geçerli sayılır. Ancak CSS de durum farklıdır. Satır sırası önem arz etmez. HTML ağacındaki sıra önemlidir. 5

6 Kalıtım olarak geçmeyen özellikler Genel olarak çoğu özellik kalıtım ile alt elemanlara taşınmaktadır. Öte yandan bazı özellikler kalıtımı desteklememektedirler. Örnek olarak background özelliği kalıtımı desteklemez. Bkz. kaldestek.html CSS in genel görevleri Arkaplan resmi ve renklerinin seçimi CSS in temel görevlerindendir. Ayrıca fontların ve marginlerin (boşlukların) ayarlanması da CSS tarafından kolaylıkla yapılabilmektedir. Fontların Ayarlanması Dosya incelendiğinde, arkaplan resminin sayfanın arkasını bir duvar kağıdı olarak kapladığı görülmektedir. Resim bulunamadığı zaman arka planı beyaz göstermek için değer atanmıştır. <body> elemanının rengi siyah olarak ayarlanmıştır. Bkz. Fonts.html 6

7 Kenar boşluklarının (Margins) ayarlanması Margin.html dosyasını açın. <style> tagı ekleyin ve içine aşağıdakileri yazın. blockquote { margin-top: 1em; margin-right: 0em; } margin-bottom: 1em; margin-left: 0em; font-style: italic; Satır aralığını ayarlamak için ise padding özelliği kullanılmaktadır. Background özelliğinden sonra aşağıdaki kodu ekleyin. padding: 0.5em; Linklerin Ayarlanması Yukarıda verilen ifade daha kısa bir şekilde aşağıdaki gibi yazılabilir. blockquote { margin: 1em 0em 1em 0em; } font-style: italic; Koyu bir arkaplan vermek için ise background: #DDD; ifadesini sona ekleyin. Kullanıcıların linkleri daha kolay şekilde görebilmesi için linklerin farklı biçimlerde sunulması gerekmektedir. Çoğu tarayıcı linklerin altını çizmektedir. Bkz links.html dosyası 7

8 Dosyaya <style> tagı ekleyin. a:link { text-decoration: underline } a:visited { text-decoration: none } CSS kurallarını ekleyin. Bu kurallar tek kural olarak aşağıdaki gibi yazılabilir. Ayrıca üstüne gelindiğinde arkaplanı değiştirmek için ayrı bir kural da eklenmiştir. a:link, a:visited { text-decoration: none } a:hover { background: black } Örnek olarak aşağıdaki dosyayı inceleyelim. <html> <style> h1 { font-size: 2em } </style> <body> <h1>movies</h1> </body> </html> em birimi Kenar boşlukları örneğinde em ünitesi kullanılmıştır. em ünitesi ile ölçeklenebilir sitil dosyaları yazılabilmektedir. CSS, em uzunlukları ölçmekte kullanılmaktadır. Font büyüklüklerini belirtmek için em birimi kullanıldığında, em birimi ana elemanın font büyüklüğünü göstermektedir. Örnekte, h1 elemanının font büyüklüğü 2 em olarak gösterildiğine ve h1 in ana elemanı body olduğuna göre h1 in font büyüklüğü body elemanının font büyüklüğünün iki katına çıkarılmıştır. Böylece font büyüklüğü doğrudan piksel olarak verilmesi yerine fontların katlarışeklinde verilmesi uygun olacaktır. 8

9 padding em birimi ile ayarlandığında, aralık div elemanındaki fontların büyüklüklerine göre otomatik olarak ayarlanmaktadır. Böylece kullanıcının ekranındaki aralık büyüklüğün ne kadar olduğunu düşünmeye gerek kalmamaktadır. em biriminin kullanışlılığını göstermek için yukarıdaki sayfa örneği verilmiştir. Örnek sayfanın tüm tasarımı em birimi kullanılarak geliştirilmiştir. Öncelikle aralığı (padding) inceleyelim. Aralık elemanı diğer elemanlardan ayırmakta kullanılan boşluktur. Sayfanın sağındaki menünün padding değeri DIV.menu { padding: 1.5em } olarak ayarlanmıştır. Bir diğer ayarlamada marginlerde yapılmıştır. DIV.menu { margin: 1.5em } 9

10 CSS Seçicileri (Selectors) Sayfa yerleşimi için genellikle tablolar kullanılmaktadır. Ancak tablolarla yapılmış bir sayfası değiştirmek oldukça zaman alıcıdır. CSS in sunduğu float özelliği ile elemanların sayfaya yerleşimini kolay bir şekilde değiştirmek mümkündür. DIV.menu { float: left; width: 15em; } CSS 2.1 dört seçici tasarımı sunmaktadır. Her biri elemanların bazı görünüşleri üzerine kurulmuştur. Elemanın tipi Elemanın özellikleri Elemanın kullanıldığı içerik Eleman hakkındaki dış bilgi Tip Seçicileri En basit seçici tipidir. Bir HTML dosyası içindeki her bir elemana uygulanacak biçimi seçebilirsiniz. Örnek olarak h1 { color: red } h1, h2, h3 { color: red } Seçiciler harf duyarlı değildirler. 10

11 Özellik Seçicileri Özelliklerin seçiminde class ve id özellikleri kullanılmaktadır. Örnek olarak Shekaspare deki Polonius rolünü oynayan bir aktörün repliği yazılacaktır. Bu yapabilmek için Polonius un okuduğu replikleri class olarak tanımlamak gereklidir. class özelliği Class özelliği, aynı class ismini taşıyan bir grup elemana aynı biçim değerlerini uygulamakta kullanılmaktadır. Bir diğer deyişle, class özelliği ile elemanlar sınıflandırılmaktadırlar. Tarayıcı sınıflandırılmış elemanların hepsine aynı görsel özellikleri uygulamaktadır. <body> tagının arasındaki tüm elemanlar class özelliğini içerebilirler. class isimleri tek kelimeden oluşmalıdır. class isimleri harf duyarlıdır. İçinde class özelliği bulunan seçicilere class seçicisi denmektedir.. başlamaktadırlar. Bkz. classsel.html 11

12 id özelliği id özelliğide class özelliğine benzer seçilde çalışır. Aralarındaki en önemli fark ise, id özelliğinin değerinin sayfa boyunca tek olması gerekliliğidir. <body> tagı arasındaki her elemanın bir id özelliği bulunabilir ancak her bir id nin farklı olması gerekir. id seçicisi örneği <html> <title>id özelliği kullanımı</title> <style type="text/css"> #xyz34 { text-decoration: underline } </style> <body> <p id=xyz34>underlined text</p> </body> </html> Style özelliği ile bağlanma id özelliğini göstermek üzere # kullanılır. Genelde CSS ile çalışırken tüm sitil işlemleri <sytle> tagları arasında yazılmaktadır. Ancak kimi zaman web tasarımcısı her bir elemana ayrı ayrı sitil vermek isteyebilmektedir. Bkz. Styleattr.html 12

13 Seçici tiplerini bir araya getirmek Şimdiye kadar üç farklı seçiciden bahsedilmiştir. Tip seçicisi id seçicisi class seçicisi Seçiciler bir araya getirilerek daha karmaşık şeciciler elde edilebilmektedir. <h1>burası <em>çok</em> önemli</h1> Yukarıdaki gibi bir ifadeniz olsun. Çok kelimesini vurgulamak istiyorsunuz ancak hem <h1> hem de <em> tagları kırmızı olduğu için bu mümkün değildir. Ancak sizin <em> kullanmanız gerekiyor. Bu durumda h1 em { color: blue } Kuralı, h1 içindeki em leri mavi yapacaktır. Basit Bağlamsal Seçiciler Bağlamsal seçiciler, uygulanacakları genel durumu dikkate alan seçicilerdir. Örneğin aşağıdaki CSS kuralları verilmiş olsun. h1 { color: red } em { color: red } Bu kurallar problemsiz çalışacaklardır. Pseudo-Class lar ve Pseudo-Elemanlar CSS te sitiller tagler ve özellikler üzerine kurulmuştur. Bu durum genellikle işe yaramaktadır. Ancak bazı genel tasarım efektlerine ulaşmak için yeterli değildir. Pseudo-class ve pseudo eleman denilen yapılan bu boşluğu doldurmak için planlanmışlardır. 13

14 Anchor pseudo class ları HTML de link göstermek için kullanılan tek eleman anchor yani <a> tagıdır. XML ile yazılan dokumanlarda ise farklı link elemanları mevcuttur. Anchor pseudo class ı kullanıcıya linkin durumu ile ilgili bilgi vermekte kullanılır. Bir tarayıcı genellikle linkleri normal yazıdan farklı göstermektedir. Gezilmeyen link farklı bir renkteyken, gezilen link farklı bir renkle gösterilmektedir. Seçici, tip seçicisi ve pseudo-class seçicisinin birleşiminden oluşmuştur. Bayrak karakteri : olarak değişmiştir. a:link { color: red } a:visited { color: blue } İlk karakter ve ilk satır pseudo-elemanları Web tasarımcısının kullanıcının bir sayfaya girip girmediğini bilmesi mümkün değildir, bunu ancak tarayıcı bilmektedir. Ancak linklerin durumları ile bilgi vermek için renkleri kullanmak mümkündür. Pseudo eleman olarak kullanılabilecek elemanların iki tanesi İlk karakter İlk satır Bkz pseudoele.html 14

15 DIV ve SPAN DIV (Bölüm) ve SPAN (Metin aralığı) tagları sitil dosyalarını desteklemek üzere HTML e sonradan eklenmişlerdir. Genellikle class özelliği ile birlikte kullanılmaktadırlar. class özelliğini kullanarak yeni HTML elemanları yaratılabilmektedir. DIV.POEM { font-family: cursive } <DIV class=poem> Güller kırmızıdır, <BR> Menekşeler mavi, <BR> Şiir yazıyorsanız eğer, <BR> DIV tagı sizin içindir. </DIV> Bkz. Poemdiv.html ve poemspan.html İleri Özellik Seçiciler DIV ve SPAN elemanlarını kullanarak, yeni HTML elemanları yaratılabilmektedir. DIV blok seviyesinde bir elemandır. SPAN ise satır içinde kullanılmaktadır. Örneğin, bir şairseniz, HTML taglarında şiiriniz için özel bir tag bulamazsınız. Ancak kendinize özel bir şiir tagı oluşturabilirsiniz. class ve id özelliklerinin kullanımı kolaydır ancak kimi zaman bu elemanları dosyaya eklemek mümkün olmamaktadır. Örneğin, sitil dosyasının üzerinde değiştirme yetkiniz yoksa, mevcut özellikler ve içerik kullanılarak seçiciler yazılması gerekebilir. 15

16 Mevcut bir değere göre seçim CSS 2.1 üç farklı tip ileri özellik seçicisi sunmaktadır. Mevcut bir özelliğe göre seçim Mevcut bir değere göre seçim Mevcut bir özelliğin içindeki tek bir değere göre seçim [align="left"] { text-align: left } Bu kural hizalaması sol tarafa olan tüm elemanlara etki edecektir. Mevcut bir özelliğe göre seçim [compact] { font-weight: bolder } table[border] { border: thin solid } table[border] td { border: medium ridge } İlk kural tüm compact özelliği bulunan elemanlara etki edecektir. İkinci kural table tagının içindeki tüm border özelliklerine etki edecektir. Üçüncü kural table tagının içindeki sütunların border özelliklerine etki edecektir. Bir elemanın diline göre seçim Genellikle sayfalar bir dil kullanılarak yazılırlar. Bkz. Lang.html 16

17 İleri Bağlamsal Seçiciler Bir elemanın bağlamı, dokuman içinde elemanın ataları ve o elemandan önce gelen tüm elemanlardır. Üç tip bağlamsal seçici vardır Basit Bağlamsal Seçici Çocuk (Child) Bağlamsal Seçici Kardeş (Sibling) Bağlamsal Seçici Kardeş Bağlamsal Seçiciler Kimi zaman bir elemanın sitilini ne ataları ne de ebeveynleri değil, kendinden önce gelen elemanlar belirler. Buna örnek olarak paragraf bittikten sonra yeni bir paragraf başlarken paragraflar arasındaki mesafeyi artırmak için p + p { text-indent: 2em } Çocuk Bağlamsal Seçiciler Ana elemanı farklı bir seçici içeren kimi elemanlar için kullanılmaktadırlar. Örneğin, DIV.chapter DIV.warning > p { text-indent: 0 } Bu kural ana elemanı DIV.chapter ve DIV.warning olan tüm p elemanları için geçerli olacaktır. İleri Pseudo-class lar Daha önce anlatılan, link ve visited pseudo-class larından farklı 4 tane daha class vardır. Active Hover Focus First-child 17

18 Active pseudo-class ı Eleman aktive edilmiş ancak henüz yaptığı işlem sonuçlanmamış ise bu class işe yarar. Örneğin, bir linke tıklandığında işlem başlamış ancak henüz sonuç dönmemişse bunu göstermek için active pseudo-class ı kullanılır. a:active { color: white; background: black } Focus pseudo-class ı Input ve Textarea gibi elemanlar klavyeden giriş alırlarken, hangi elemana bilgi göndereceğini belirlemek için elemanı seçer. Bu durumda focus psuedo-class ı işe yarar. :focus { outline: solid medium black } Hover pseudo-class ı Mouse ya da benzeri bir işaretçi cihazı bir elemanın üzerindeyse, bu pseude class işe yarar. Örneğin, bir linkin üzerinde beklerken arkaplanın sarı olmasını istersek a:link:hover, a:visited:hover { background: yellow } First-child pseudo-class ı DIV.bio > p:first-child { font-weight: bold } Bu kural bio elemanının ilk p çocuğunu seçmekte kullanılır. 18

19 Any Seçicisi Tüm elemanları seçmekte kullanılır. body * p { font: medium "gill sans", sans-serif } Body elemanının soyundan gelen tüm p elemanlarını seçmek için kullanılır. #id :first-child :link :visited :active :hover id si id olan elemanları seçer. Ana elemanın altındaki tüm ilk çocukları seçer. Henüz gezilmemiş tüm linkleri seçer. Gezilmiş tüm linkleri seçer. Kullanıcı tarafından aktive edilen ancak işlemi henüz bitmeyen elemanları seçer. Mouse un üzerinde beklediği elemanı seçer. Seçicilerin Özeti İfade * E F E F > E F + E.class Seçilenler Tüm elemanları seçer. E tipindeki tüm elemanları seçer. F nin soyundan gelen tüm elemanları seçer. F elemanının çocuğu olan tüm E elemanlarını seçer. F elemanının hemen arkasından gelen E elemanlarını seçer..class isimli tüm elemanları seçer. :focus :lang(c) [att] [att= val ] [att~= val ] x,y Klavye girişine hazır olan elemanları seçer. C dilinde içeriği olan elemanları seçer Att özelliğine sahip tüm elemanları seçer. Att özelliğinin değeri val olan tüm elemanları seçer. Att özelliğinin değeri val kelimesini içeren elemanları seçer. Gruplama, x veya y tipindeki elemanları seçer 19

20 E:first-letter E:first-line E:before E:after E blok elemanının ilk karakterini seçer. E blok elemanının ilk satırını seçer. E elemanın başına eklenmiş metini seçer. E elemanından sonuna eklenmiş metni seçer. Font Ailelerinin (Family) Sınıflandırılması Serif mi Sans Serif mi? Oransal boşluk mu sabit boşluk mu? El yazısına benziyor mu? Dekoratif mi yoksa düz yazı için mi? Fontlar Serif ya da San Serif Tip (Type): Kelimeleri oluşturmakta kullanılan harfler ve diğer karakterlere tip denilmektedir. Yüz (Face): Aynı karakteristiği içeren tüm font tiplerine yüz denir. Köşelerinde küçük çıkıntıları olan harflere serif denmektedir. Çıkıntıları olmayan harflere ise San Serif denilmektedir. 20

21 Oransal ya da sabit boşluk Oransal boşluk kullanan yazıtiplerinde, harfler gerektiği kadar yer kaplamaktadırlar. Sabit boşluklu yazıtiplerinde ise harflere sabit bir genişlik verilmiştir. Dekoratif mi düz yazı mı? Kimi fontlar nadiren düz yazı yazmakta kullanılırlar. Bu fontlar dekoratif amaçlıdır. El yazısına benzer mi? El yazısına benzer bir yazıtipine cursive adı verilir. Bu tip karakterler genellikle sağa yatık daha yuvarlak hatlara sahiptirler. Bu temel faktörler göz önüne alındığında CSS beş adet font ailesi belirlemiştir. sans-serif serif monospace cursive fantasy 21

22 font-family özelliği Bu özellik dokümanınızda kullanacağınız font ailesini bildirmenizde kullanılır. İsmi: font-family Değeri: [ <specific-family>,]* [ <specific-family> <generic-family> ] İlk: Tarayıcı spesifik Uygulandığı elemanlar: Yer değiştirilmiş elemanlar hariç tüm elemanlar Kalıtım: yes Yüzdesi: N/A Font Metrikleri Fontlar genellikle point adı verilen büyüklükle ölçülürler. Uzunluk birimleri body { font-family: Times } body { font-family: Garamond, Times } body { font-family: "new century schoolbook", serif } body { font-family: Garamond, Times, "New Century Schooolbook", serif } CSS üç tip birim kabul etmektedir. Mutlak Birim: point, mm, cm, pc, in gibi mutlak birimler. Nispi Birim: em ve ex birimleri Pixel Birimi: 22

23 font-size özelliği Fontun büyüklüğünü belirtmekte kullanılır. İsmi: font-size Değeri: <length> <percentage> <absolute-size> <relative-size> İlk değer: medium Uygulandığı elemanları: tüm elemanları Kalıtım: Evet Yüzdelik: Ana elemanın font büyüklüğüne göre Percentage Değeri Em birimlerini kullanmaya eş değerdir. Ana elemanının fontunun büyüklüğünün yüzdeleri olarak ayarlama yapar. h1 { font-size: 120% } Lenght değeri Uzunluk birimleri kısmında anlatılan tüm birimler kullanılabilir. body { font-size: 12pt } pre { font-size: 0.4mm } h1.chapter { font-size: 16px } h1 { font-size: 1.2em } Absolute-Size Değeri xx-small x-small small medium large x-large xx-large h1 { font-size: xx-small } 23

24 Relative-Size Değeri Belirtilen büyüklüklere göre daha büyüğü ya da daha küçüğünü elde etmek için kullanılır. h1, h2, h3 { font-style: italic } p { font-style: oblique } h1 em { font-style: oblique } body { font-size: medium } h2 { font-size: larger } p { font-size: smaller } font-style özelliği Eğri ya da italik yazıtipi ayarlamanızı sağlamaktadır. İsmi: font-style Değeri: normal italic oblique İlk Değeri: normal Uygulandığı elemanlar: Tüm elemanlar Kalıtım: Evet Yüzdelik: N/A font-variant özelliği İsim: font-variant Değer: normal small-caps İlk Değer: normal Uygulanan elemanlar: Tüm elemanlar Kalıtım: Evet Yüzdelik: N/A h3 { font-variant: small-caps } 24

25 p { font-weight: normal } h1 { font-weight: 700 } strong ( font-weight: bolder } font-weight özelliği Fontun kalınlığını ayarlamakta kullanılmaktadır. İsim:font-weight Değer:normal bold bolder lighter İlk Değer:normal Uygulandığı elemanlar: Tüm elemanlar Kalıtım: Evet Yüzdelik:N/A font özelliği Font özelliği tek satırda önceki slaytlarda anlatılan özelliklerin ayarlanmasını sağlamaktadır. İsim:font Değer:[[ <font-style> <font-variant> <fontweight> ]? <font-size> [/ <line-height> ]? <fontfamily> ] caption icon menu message-box small-caption status-bar İlk değer: Her bir özellik için ayrı Uygulandığı elemanlar: tüm elemanlar Kalıtım: Evet Yüzdelik:<font-size> ve <line-height> 25

26 text-decoration özelliği h1 { font: 1.3em sans-serif } = h1 { font-style: normal; font-weight: normal; font-variant: normal; font-size: 1.3em; line-height: normal; font-family: sans-serif; } Altı çizili, üstü çizili, göz kırpma gibi efektler için kullanılır. İsim: text-decoration Değer: none [underline overline line-through blink] İlk Değer: none Uygulanacak elemanlar: tüm elemanlar Kalıtım: Hayır Yüzdelik: N/A p { font: italic bold normal 12pt/14pt Times, serif } p { font: italic 12pt/14pt bodoni, bembo, serif } p { font: normal small-caps 120%/120% fantasy } p { font: x-large/100% "new century schoolbook", serif } p { font: message-box } a:link, a:visited, a:active { text-decoration: underline } 26

27 text-transform özelliği İsim: text-transform Değer: capitalize uppercase lowercase none İlk Değer: none Uygulandığı elemanlar: tüm elemanlar Kalıtım: Evet Yüzdelik: N/A Temel CSS Nesneleri Kutu (Box) modeli Display özelliği List-style-type özelliği List-Style-Position özelliği List-Style-Image özelliği List-Style özelliği Üretilmiş yazılar, sayıcılar White-Space (beyaz boşluk) özelliği h1 { text-transform: uppercase } h1 { text-transform: capitalize } 27