*******Css Dersleri*******

tarafından Admin Ptsi Ara. 01, 2008 1:16 am

Selamun Aleykum arkadaşlar elimden geldiğince size Css öğreteceğim dersleri dikkatlli takip edin.

Css Nedir?

HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.

Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browserın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

tarafından Admin Ptsi Ara. 01, 2008 1:17 am

CSSye Giriş

CSS (Cascading Style Sheets ) web tasarımcılarının işini oldukça kolaylaştırmaktadır. CSS HTMLden ayrı yeni bir dil değil, HTMLin önemli bir parçasıdır. CSS ile web sayfasındaki araçların görünümleri genelleştirilir.

HTML derslerinde style="..." parametresini görmüştük. Bu parametre ile tanımlanan kodun özelliklerini değiştirmiştik. CSS style özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de Internet Explorer 4.0 browserlar ve daha gelişmiş olanları CSSyi destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.

HTML derslerinde geçen ama üzerinde pek durmadığımız style parametresi üzerinde açıklama yapmam gerekiyor. style parametresi <p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir:

<p style="text-align:left; font-size:12pt; color:red">...</p>

Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan <p> koduna style parametresi atanmıştır. Böylece paragrafın sola yaslanmasını, 12pt (point:nokta ) font büyüklüğündeki harflerden oluşmasını, harflerin renginin kırmızı olmasını sağlıyoruz. style parametresinde birden fazla özellik tanımlanacaksa, örnekte olduğu gibi her özellikler arasına ";" işareti konur.

Nesne Özelliklerini Genelleştirme
Sayfa tasarımında CSSden yararlanacaksak style="..." parametresini kullanmamız şart değil,sayfa özelliklerini <style>...</style> kodları arasında da tanımlayabiliriz.<style>...</style> kodları <head>...<head> bölümünde; bir fonksiyonmuşcasına yer alır. (Fonksiyonları JavaScript ve VBScript derslerinde ayrıntılı olarak göreceğiz.

CSS kullanımını anlatabilmek için aşağıdaki iki örneği inceleyelim. İlk örnekte style="..." parametresi kullanılıyor. İkincisinde ise <style>...</style> kodları kullanılmaktadır.

Kod Alanı:

<html>
<head>
<title>Style parametresi ile...</title>
</head>
<body>
<h1 style="font-size:18pt; color:blue; text-align:left">AĞIR ROMAN</h1>
<p style="font-size:12pt; color:crimson; text-align:justify">Güneş buluttan sıyrılırken Koleranın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
<h4 style="font-size:8pt; color:black; text-align:right">Metin Kaçan</h1>
</body>
</html>

Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:

Kod Alanı:

<html>
<head>
<title>Style kodu ile...</title>
<style>

</style>
</head>
<body>
<h1>AĞIR ROMAN</h1>

<p>Güneş buluttan sıyrılırken Koleranın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>

<h4>Metin Kaçan</h1>

</body>
</html>

Şimdi geldik "Naptık?" köşesine. İlk uygulamada <p>, <h1> ve <h4> kodlarını style="..." parametresi ile bu kodlara bazı özellikler atandı. Örneğin <p>...</p> arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması sağlandı. İkinci uygulamada ise her koda style="..." parametresi atamak yerine, tüm stil özellikleri kodların başında ;<head>...</head> bölümünde, <style>...</style> kodları arasında kod kod tanımlanmıştır. Bu iki uygulama ile aynı sonuca ulaşıyoruz. İlk uygulamanın daha kısa sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada <p> kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini değiştirmek istediğimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleştirmesi ile azalacaktır.

CSSnin yapısı; uygulamamızdan da görüleceği üzere, şöyledir: KOD {ÖZELLİK: değer}. Eğer koda birden fazla özellik atayacaksak, tıpkı style="..." parametresinde olduğu gibi stil özellikleri arasına ";" işareti konur: KOD {ÖZELLİK1: değer1; ÖZELLİK2: değer2; ÖZELLİK3: değer3} gibi. Stil özelliklerini yanyana yazabileceğiniz gibi, uygulamada olduğu gibi altalta da yazabilirsiniz:

KOD
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}
Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz:

KOD1, KOD2, KOD3, KOD4, KOD5
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}
CSSyi Dış Dosya ile Tanımlama
CSS araçlarını HTML kodlarına atamanın bir başka yolu daha vardır: CSS özelliklerini .css uzantılı bir dosyaya yazmak ve web sayfasından bu dosyayla bağlantı kurmak. Herhangi bir metin editöründe oluşturduğumuz; <style>...</style> kodları arasına yazdığımız CSS özelliklerini içeren, bir dosyayı .css kök ismi ile kaydedin. Web sayfamızın <head>...</head> kısmına aşağıdaki kodlarla .css uzantılı dosyanızla bağlantı kurun; mesela dosyanın ismi diaz.css olsun:

<link rel="stylesheet"
type="text/css"
href="diaz.css">
Daha önce style parametresi ve style kodları ile yaptığımız AĞIR ROMAN isimli sayfayı, bu sefer yeni öğrendiğimiz dış dosya yöntemiyle yapalım. (Yine aynı sayfayı yapacağız. ) Tabi önce .css isimli dosyayı oluşturacağız. Aşağıdaki sayfayı tarz.css ismiyle kaydettim:

Kod Alanı:

p
{
font-size:12pt;
color:crimson;
text-align:justify
}
h1
{
font-size:18pt;
color:blue;
text-align:left
}
h4
{
font-size:8pt;
color:black;
text-align:right
}

Bu sayfayı "tarz.css" ismiyle kaydettikten sonra, web sayfasını şöyle oluştururum:

Kod Alanı:

<html>
<head>
<title>Dış dosya yolu ile...</title>
<link rel="stylesheet" type="text/css" href="tarz.css">
</head>
<body>
<h1>AĞIR ROMAN</h1>
<p>Güneş buluttan sıyrılırken Koleranın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
<h4>Metin Kaçan</h4>
</body>
</html>

Özellikle aynı formatta çok fazla sayfa içeren siteler için dış dosya yöntemini kullanmanızı tavsiye ederim. Böylece her sayfa için aynı kodları yazıp durmanız gerekmez. Ayrıca sayfaların formatını değiştirmek istediğinizde ".css" uzantılı dosyanızı değiştirmeniz yeterli olacaktır. CSSnin yapısını böylece tanımış olduk, diğer sayfalarda ayrıntıları öğreneceğiz. Görüşmek üzere

tarafından Admin Ptsi Ara. 01, 2008 1:18 am

Metin Biçimi

HTML kodlarına atanan parametreler, metin formatı konusunda çok yetersiz kalmaktadır. En basiti metni iki yana yaslayamıyorduk. HTML derslerinden hatırlanacağı üzere, align="..." parametresi ile metni sağa (right ), sola (left ) ve merkeze (center ) yaslamak mümkün. Ancak göze hoş gelen iki yana yaslama biçimini bu parametreyle gerçekleştiremiyorduk.

Metin Hizalama
CSSde metni yaslamak için text-align özelliğinden yararlanıyoruz. Bu özelliğe verebileceğimiz değerler:left (sol ), right (sağ ), center (orta ) ve justify (iki yana yasla ). Aşağıdaki uygulamamıza bakalım:

Kod Alanı:

<html>
<head>
<title>Text-align özelliği</title>
<style>

</style>
</head>
<body>
<br> <h4>Ankara, Kasım 1996</h4><br>
<h1>Anadoluda Bronz Çağı Kentleri</h1>
<p>Kentler, endüstri toplumunda olduğu gibi endüstri öncesi toplumlarda da tarih boyunca en devingen öğe oldu, toplum yaşantısında belirgin izler bıraktı. Anadoluda kent ve kentleşme tarihi üzerinde yapılmış çeşitli araştırmaların sonuçlarını bir araya getirip bunlardan yeni sentezler üretti. Anadolu kentlerinde mekânsal yapı değişimi ile bu yapıyı belirleyen sosyo-ekonomik süreçler arasındaki nedensellik ilişkilerinin irdelendiği bu kitap, araştırmacılar, özellikle kent plancıları için önemli bir kaynak.</p>
<h3>Sevgi Aktüre</h3>
</body>
</html>

Uygulamamızda yer alan <p>, <h1>, <h3> ve <h4> kodların hepsi align="..." parametresini destekleyen kodlardır. Bu parametreyi desteklemeyen <code>, <address> gibi kodlar pek tabi ki text-align özelliğini de desteklemezler. Hangi kodların hangi parametreleri desteklediğini HTML Kodları sayfasından öğrenebilirsiniz.

Metinler ve Çizgiler
Metin formatı için kullandığımız bir başka özellik: text-decoration. Bu özelliğin aldığı değerler şunlardır:

overline Yazıların üstünün çizili olmasını sağlar.
text-decoration: overline
line-through Yazıların üzerinin çizili olmasını sağlar.
text-decoration: line-through
underline Yazıların altının çizili olmasını sağlar.
text-decoration: underline
none Yazıların çizgisiz olmasını sağlar.
text-decoration: none

Bu özelliği web tasarımcıları daha çok hiperlinkler için kullanırlar. Bildiğiniz gibi <a href="..."> kod ve parametresiyle oluşturduğumuz hiperlinkler, mavi renkli altı çizili yazılardır. Eğer hiperlinklerin altı çizili olmasını istemiyorsak CSS dosyamızda şu özelliği kullanırız:text-decoration: none. Aşağıdaki hiperlink çeşitlerine bakalım:

Kod Alanı:

<html>
<head>
<title>Text-align özelliği</title>
</head>
<body>
<br>

<a href="derscss1.html" style="text-decoration:overline">Metin Formatı</a><br>

<a href="derscss2.html" style="text-decoration:line-through">Font Formatı</a><br>

<a href="derscss3.html" style="text-decoration:underline">Arkaplan Formatı</a><br>

<a href="derscss4.html" style="text-decoration:none">Tablo Formatı</a><br>

<a href="derscss5.html">Sınıflandırma</a><br>

</body>
</html>

Tabi text-decoration özelliğini başka bir menüde de kullanabiliriz. Örneğin başlık yapmaya yarayan <h1>...<h6> kodlarına bu özelliği atayarak, altı çizili alt başlıklar oluşturabiliriz.

Metin Renkleri
Metnin renk özelliklerini tanımlamak için color aracından yararlanırız. Bu özelliğin aldığı değerler İngilizce renk ismi olarak tanımlanabileceği gibi, hekzadesimal (onaltılık sistem ) rgb kodları veya ondalık rgb kodları halinde de tanımlanabilir.

Kod Alanı:

h1
{
color:crimson;
}
h2
{
color:#8b008b;
}
h3
{
color:rgb(139,0,139 )
}
h4
{
color:rgb(54%,0%,54% )
}

Satır Arası Yükseklik
Metnin hizalamayı, metnin çizgi formatını ayarlamayı ve metnin rengini belirlemeyi öğrendik. Metnin satırları arasıdaki mesafeyi belirlemek şimdiki konumuz. Bunun için line-height özelliğini kullanıyoruz. Eğer metnin line-height özelliğine normal değerini verirsek, satır arası yükseklik varsayılan değerini alır. Tabi biz bu özellik üzerinde şu değerlerle oynayabiliriz.

sayı Satır arası yüksekliğini verilen sayıya göre belirler.
line-height: 1.5
birim Satır arası yüksekliğini px, cm gibi girilen birimlere göre belirler.
line-height: 10mm veya line-height: 15px
yüzde Satır arası yüksekliği yüzde oranı cinsininden belirler.
line-height: 150%

Sayfayı fazla uzatıp, okuyucuyu sıkmamak için uygulama yapmıyorum, sizler <p> koduna bu özellikleri atayarak istediğiniz satır aralığında paragraflar oluşturabilirsiniz. Başka kodlarla da denemeniz faydalı olacaktır. Ayrıca Özelleştirme konusunu anlattığım sayfada bu özellikleri kullanacağım birkaç örnek bulunacak, onlara da bakabilirsiniz.

Harfler Arası Boşluk
Metin formatı için öğreneceğimiz diğer bir özellik: harfler arasındaki mesafeyi ayarlamak. Bunun için letter-spacing aracından yararlanacağız. (NOT:NN browserını kullananlar bu özelliği göremez. ) Bu özelliğe vereceğimiz değerler cm, mm gibi veya px (piksel ) gibi birimlerle tanımlanmalı. Vereceğimiz değer negatif olursa, harfler arasındaki boşluk normalden daha az olur. Değer pozitif olursa; anlaşılacağı üzere, harfler arasındaki mesafe normale göre daha fazla olur. Matematiği süper olan okuyucularımız, bu değerin sıfır olması halinde nasıl sonuç alınacağını hemen anlamıştır: Birşey değişmez

Kod Alanı:

<html>
<head>
<title>Harfler arası mesafeyi ayarlamak...</title>
<style>

</style>
</head>
<body>
<br>
<h1>Büyük Altay!</h1><br>
<h2>Büyük Altay!</h2><br>
<h3>Büyük Altay!</h3><br>
<h4>Büyük Altay!</h4><br>
</body>
</html>

IE kullanan okuyucularımız bu uygulamayla letter-spacing özelliğini daha iyi kavramışlardır. Uygulamada 5mm yazılan yere 0.5cm de yazabilirdik pekalâ. İngiliz matematiğinde ondalık sayıların "." ile, Türk matematiğinde ise "," ile ayrıldığını unutmayalım.

Satırbaşı Boşluğu
Sayfa uzuyor ama biz halâ metin formatını bitiremiyoruz. Bir başka özellik de satır başı tanımlamak. HTML derslerinde öğrendiğimiz <p> kodu ile satır başı yapmaksızın, üst ve alt satırları boş bırakılan paragraflar elde ediyorduk. Aslında bu format standartlaştı ama eski format; yani satırbaşı bırakma geleneğini de bir çırpıda silemeyiz. Satır başı bırakabilmek için text-indent özelliğinden yararlanıyoruz. Bir önceki özellik de olduğu gibi, bu özelliğe de cm, px gibi birimlerle tanımlanmış değerler verebiliyoruz ve yine negatif değerler atanabiliyor. Eğer değer pozitifse, bildiğimiz anlamda satır başı bırakılmış oluyor, eğer negatif ise paragrafın ilk satırı diğer satırların solunda kalıyor. Diğer özelliğin aksine, bu özelliği NN 4.0 ve daha üstü browserlar da destekliyor; desteklemeyenleri ayrıca belirtiyorum zaten.

Kod Alanı:

<html>
<head>
<title>Satır başı bırakma</title>
<style>

</style>
</head>
<body>
<br>
<p>İşte o günden sonra, biz eşek milleti, konuşmasını, söyleşmesini unutmuşuz; her duygumuzu, her düşüncemizi, anırtıyla anlatmaya başlamışız. O eski kuşaktan eşek, tehlike kuyruk altına girinceye dek, kendini avutup, kandırmamış olsaydı, bizler de konuşmasını bilecektik.</p>
<em>Ah Biz Eşekler, Aziz Nesin</em>
</body>
</html>

Büyük Harf, Küçük Harf
Diğer özelliğimiz: text-transform. Bu özelliğe değerler vererek metnin büyük harflerle yazılı olmasını (uppercase ), küçük harflerle yazılı olmasını (lowercase ) veya sözcüklerin ilk harflerinin büyük olmasını (capitalize ) sağlayabiliyoruz. Uygulamamız ile neler dediğimi daha iyi anlayacaksınız:

Kod Alanı:

<html>
<head>
<title>Büyük harf, küçük harf sorunsalı,</title>
<style>

</style>
</head>
<body>
<br>
<h2>BüYüK AlTaY!</h2><br>
<h3>BüYüK AlTaY!</h3><br>
<h4>BüYüK AlTaY!</h4><br>
</body>
</html>

Metin formatı için kullanacağımız son özellik: vertical-align (düşey-hizalama ). Bu özellikle araçların düşey olarak nasıl hizalanacağını belirleriz. HTML derslerinde <img> komutunu anlattığımız sayfada, resim nesnesinin yazıya göre nasıl hizalanacağını align="..." parametresiyle göstermiştik. Bu sefer hizalamayı CSS özellikleriyle yapıyoruz. vertical-align özelliğinin aldığı değerler şunlardır:

baseline Nesne ana elemanın taban hattına yerleşir.
vertical-align: baseline
sub Nesne alt simgeymiş gibi hizalanır.
vertical-align: sub
super Nesne üst simgeymiş gibi hizalanır.
vertical-align: super
top Nesne satırdaki en yüksek elemanın yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: top
text-top Nesne metnin yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: text-top
middle Nesne ana elemanı ortalayacak şekilde hizalanır.
vertical-align: middle
bottom Nesne satırdaki en aşağıdaki elemanın seviyesini taban hattı alacak şekilde hizalanır.
vertical-align: bottom
text-bottom Nesne metnin tabanını taban hattı alacak şekilde hizalanır.
vertical-align: text-bottom
yüzde oranı Nesne satır hattına göre yüzde oranı ile hizalanır; negatif değerler geçerlidir.
vertical-align: 5%

HTML derslerinde nesne hizalamayı iyi öğrenenler, anlatılanları rahatlıkla anlamışlardır. Bu özellik NN 4.0 ve üzeri browserlarda sadece <img> kodu için geçerlidir. Bu sayfalık bu kadar, diğer sayfada görüşürüz.

tarafından Admin Ptsi Ara. 01, 2008 1:18 am

Font Biçimi

Bir önceki sayfada metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki dersimizde ise yazı fontlarının özellikleri ile oynayacağız.

Font Türü
Önce font seçmeyi öğrenelim. HTML derslerinde <font> kodu ve face="..." parametresi ile yazı fontunu belirliyorduk. CSSde ise bu işi font-family özelliği ile yaparız:

Kod Alanı:

h1
{
font-family:Arial
}
h2
{
font-family:Courier
}
h3
{
font-family:Comic Sans MS
}
h4
{
font-family:Verdana
}

Font Büyüklüğü
HTML derslerinde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..." parametresini kullanıyorduk. CSSde ise font-size özelliğine değerler veririz. Verilen değer yüzde oranı (%şeklinde olabilir veya pt (point ) birimi cinsinden olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller (yürürlükteki değerden bir küçük ), larger (yürürlükteki değerden bir büyük ) gibi değerler de kullanabiliyoruz:

Kod Alanı:

h1
{
font-size:xxlarge
}
h2
{
font-size:160%
}
h3
{
font-size:larger
}
h4
{
font-size:10pt
}

Font Eğikliği
Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde ) olmasını istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz:

Kod Alanı:

h1
{
font-style:normal
}
h2
{
font-style:italic
}
h3
{
font-style:oblique
}

Büyük Harf, Küçük Harf
Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF; boyutça büyük değil ) font-variant: small-caps özellik ve değerini kullanırız. Eğer bunu istemiyorsak normal değerini veririz:

Kod Alanı:

h1
{
font-variant:small-caps
}
p
{
font-variant:normal
}

Font Kalınlığı
Eğer fontlarımızın kalın (bold ) olmasını istiyorsak, font-weight özelliğinden yararlanırız. Bunun için font-weight özelliğine normal, bold (kalın ), bolder (yürürlükteki kalınlıktan bir değer daha kalın ), lighter (yürürlükteki kalınlıktan bir değer ince ) gibi standart değerler verebiliriz. Veya 100, 200,...,800,900 gibi sayısal değerler de verebiliriz. 400 sayısal değeri, normal font değerini verir. 700 sayısal değeri ise kalın (bold ) font değerini verecektir.

Kod Alanı:

h1
{
font-size:14pt;
font-weight:900
}
h2
{
font-size:14pt;
font-weight:bold
}
h3
{
font-size:14pt;
font-weight:500
}
h4
{
font-size:14pt;
font-weight:normal
}
h5
{
font-size:14pt;
font-weight:lighter
}
h6
{
font-size:14pt;
font-weight:200
}

Font Özelliklerini Tek Kodla Tanımlama
Font formatı sayfamızda öğreneceğimiz son özellik: font. Bu özellik fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç standart tip değer alıyor:

font: (font-style değeri ) (font-weight değeri )
font: (font-style değeri ) (font-variant değeri ) (font-weight değeri ) (font-size değeri ) (font-family değeri )
font: (font-style değeri ) (font-variant değeri ) (font-weight değeri ) (font-size değeri )/(line-height değeri ) (font-family değeri )
Not: line-height özelliğini metin formatı sayfasında görmüştük.

Kod Alanı:

code
{
font: italic bolder
}
p, h3, td, pre
{
font: italic normal bold 12px arial
}
blockquote, sub, sup, strong
{
font: oblique small-caps 900 10px/12px courier
}

Font formatı sayfamız da bu kadar. Bu sayfada özelliklerin CSS formatında nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTMLde işlediğimiz konuyla paralel gidildiği için, okuyucuların yazılanları kolaylıkla anladığını düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiğim yazım şekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde çeşitli kodların özellikleri üzerinde oynayabilirsiniz. Bundan sonraki sayfada arkaplan formatı üzerinde duracağız.

Css Dersleri

Css Dersleri

Geri: Css Dersleri

Geri: Css Dersleri

Geri: Css Dersleri

*******Css Dersleri*******

*******Css Dersleri*******

Geri: *******Css Dersleri*******

Geri: *******Css Dersleri*******

Geri: *******Css Dersleri*******

Css Dersleri

Css Dersleri

Geri: Css Dersleri

Geri: Css Dersleri

Geri: Css Dersleri