Yazar: merhaba arkadaşlar.
bu yazımda sizlere css türlerini ve bu türlerin özelliklerinden bahsedeceğim.
css türleri başlıklı yazımı okuduğunuzda css ile bir adım daha öteye adım atmış olacaksınız.
css hakkında genel bilgi edinmek isterseniz, css’ye giriş başlıklı yazıma gözatmanızda fayda olacaktır.
web tasarım yaparken stiller önemlidir. stil dili olarakda css hepinizin seveceği bir dil olacaktır.
css türleri üçe ayrılmaktadır: yerel sitil şablonu, genel stil şablonu ve bağlantılı stil şablonu.
şimdi bu stil şablonlarını tek tek inceleyelim.
yerel stil şablonu
yerel stil şablonu: bir web sayfasında nerede etkili olması isteniyorsa orada kullanılmaktadır.
yazacağınız her html kodu için ayrı ayrı stil şablonları tanımlama yaparsınız.
bir örnek yaparak size daha net ifade edebilirim.
:örnek 1
<html>
<head>
<title> css yerel stil şablonu </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
</head>
<body>
<h1> css yerel şablonu </h1>
<h1 style=”font-size:20pt; color:blue”> css yerel stil şablonu </h1>
</body>
</html>
ikitane <h1> etiketini kullandık, bunlardan biri normal biri ise css stili tanımlayarak kullandık.
sayfayı css.html olarak kaytedin ve görüntüleyin. aradaki farkı sizlerde göreceksiniz.
genel stil şablonu
genel stil şablonu: bu css türü ise, yazıldığı sayfanın tümüne etki etmektedir.
<head> etiketi içerisinde tanımlanırlar ve yazmış olduğunuz sayfaya tümüyle etki etmektedir.
<head> etiketi içerisinde <style type=”text/css”>
şekilde yazılırlar ve </style> etiketi kullanılarak kapatılırlar.
örnek 2
<html>
<head>
<title> css genel stil şablonu </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
<style type=”text/css”>
<!–
h1 {font-size:20pt; color:blue}
–>
</style>
</head>
<body>
<h1> css genel stil şablonu </h1>
</body>
</html>
evet burada ise css2.html şeklinde dosyayı görüntülediğimizde <h1> etiketinin stil şablonu özelliğine sahip olduğunu göreceksiniz.
bu tanımlama ile sayfada kaçtane <h1> etiketi varsa aynı stil özelliklerine sahip olacaktır.
bağlantılı stil şablonu
işte geldik benim en çok sevdiğim özelliğine. eminim bu özelliği sizlerde seveceksiniz ve çalışmalarınızda kullanacaksınız.
peki ben neden seviyorum bu türü hemen sizlere açıklayayım.
bağlantılı stil şablonunda tüm css kodlarını tek bir dosyaya yazarsınız ve tüm sayfalarınıza tekbir satırlık kod ekleyerek bu harici dosyayı çağırabilirsiniz.
siz söyleyin kim sevmez böyle bir özelliği?
bu türü kullanabilmek için ikitane dosya oluşturmak gerekecektir, dosyamızın birinde css kodları yer alacak, bir diğerinde ise html kodları yer alacaktır.
bir örnek yaparak daha iyi anlatabilirim sanırım.
örnek 3
öncelikle css dosyamızın kodlarını yazalım.
h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
css dosyamızı kayıtedelim.
şimdi ise html dosyamız için gerekli kodları yazalım.
<html>
<head>
<title> css bağlantılı stil şablonu </title>
<meta name=”content-type” content=”text/html charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”stil.css”>
</head>
<body>
<h1> css bağlantılı stil şablonu </h1>
<h2> css bağlantılı stil şablonu </h2>
<h3> css bağlantılı stil şablonu </h3>
</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 koddan tasarruf etmiş oluruz.
evet arkadaşlar css türlerini elimden geldiyince sizlere anlatmaya çalıştım. umarım bu yazım sizlere faydalı olmuştur.
sorularınızı yazımın altına yorum olarak iletebilirsiniz.
iyi bloglamalar herkese.
Bir önceki yazımız olan css'ye giriş başlıklı makalemizde css hakkında, css kullanımı ve css nedir hakkında bilgiler verilmektedir.