VaTaN

► "Mahzenden Göklere" ◄

CSS Dersleri 2


h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}

Bu dosyamızı stil.css olarak kaydedelim.
Şimdi de html dosyamıza gelelim. Html dosyamızın kodları da şu şekilde olmalıdır.
<html>
<head>
<title>Css</title>
<link rel=”stylesheet” type=”text/css” href=”stil.css”> </head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>

Html dosyasının kodları arasında geçen <link rel=”stylesheet” type=”text/css” href=”stil.css”> kodu stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu istediğimiz diğer html dosyalarına da eklediğimizde orada da kullanabiliriz.
Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan 🙂

Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız. Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu kavrama ve anında uygulamanız daha kolay olacak. Şimdi Css’in etkidiği Html etiketlerini hangi özelliklerini değiştirdiğini görelim.

3.1. Font Özellikleri

Adı üzerinde Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Nasıl kullanıldığına hemen bir bakalım.
<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!–
p
{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : #00FFFF;
}
–>
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>

Alt özellikleri tanıyalım.

font-size : Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto(pt) değerini verebilirsiniz.

font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.

font-weight : Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar.
normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.

font-style : Fontun yatık olup olmamasını sağlar.
italic : Yazının sağa doğru yatık olmasını sağlar.
normal : Fontu normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.

color : Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.

3.2 Text Özellikleri

Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz.
Örnek ile açıklayalım.
<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!–
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
–>
</style>
<body>
<p>Web Teknikleri</p>

Mart 15, 2007 - Posted by | Web Master Kaynakları

Henüz yorum yapılmamış.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s

%d blogcu bunu beğendi: