CSS Kullanımı

Ekim 28 2009No Commented

Categorized Under: WEB TASARIMI, YAZILAR

CSS uzun haliyle Cascading Style Sheets web sitelerinde tasarımın ön plana çıkmasıyla önem kazandı.Kolay kullanım kod düzeni ve sayfaların yenlenme süresini kısaltmasıyla web siteleri için vazgeçilmezhale geldi satır içi sayfa içi ve sayfalar arası kullanımıyla çok büyük avantajlar sağladı.Bizde bu dersimizde CSS’in bazı kullanım şekillerini inceleyecğiz ilk olarak satır içi kullanımını inceleyelim bir örnek verelim.

ornek.html
<html>
<head>
</head>
<body>
<table style=”width: 200px” align=”center”>
<tr>
<td style=”color:red; font-size:large;”>Kırmızı</td>
<td style=”color:blue; font-size:small;”>Mavi</td>
</tr>
</body>
</html>
Sayfa İçi CSS
Şimdide yukarıda yaptığımız işlemi bir kere yaparak <td> tagları içerisinde çağırarak daha düzenli daha az kod yazılan css kullanım şeklini görelim.
<html>
<meta http-equiv=”Content-Language” content=”tr”>
<style type=”text/css”>
.kirmizi{
color:red;
font-size:small;
}
</style>
</head>
<body>
<table style=”width: 200px” align=”center”>
<tr>
<td>www.yazilim-arsivi.net
</td>
</tr>
<tr>
<td>www.halitozdemir.com
</td>
</tr>
<tr>
<td>www.microsoft.com
</td>
</tr>
</body>
</html>
Sayfalar Arası CSS
Öncelikle bir css dosyası oluşturuyoruz.
ornek.css
td{
color:red;
font-size:small;
}
<html>
<head>
<meta http-equiv=”Content-Lnaguage” content=”tr”>
<link rel=”stylesheet” type=”text/css” href=”ornek.css”>
</head>
<body>
<table style=”width: 200px” align=”center”>
<tr>
<td>www.yazilim-arsivi.net</td>
</tr>
<tr>
<td>www.halitozdemir.com</td>
</tr>
</table>
</body>
</html>
Bu şekilde bir tek css dosyasını tüm sayfalarda kullanabilirsiniz

ornek.html

<html>

<head>

</head>

<body>

<table style=”width: 200px” align=”center”>

<tr>

<td style=”color:red; font-size:large;”>Kırmızı</td>

<td style=”color:blue; font-size:small;”>Mavi</td>

</tr>

</body>

</html>

Sayfa İçi CSS

Şimdide yukarıda yaptığımız işlemi bir kere yaparak <td> tagları içerisinde çağırarak daha düzenli daha az kod yazılan css kullanım şeklini görelim.

<html>

<meta http-equiv=”Content-Language” content=”tr”>

<style type=”text/css”>

.kirmizi{

color:red;

font-size:small;

}

</style>

</head>

<body>

<table style=”width: 200px” align=”center”>

<tr>

<td class=”kirmizi”>www.yazilim-arsivi.net

</td>

</tr>

<tr>

<td class=”kirmizi”>www.halitozdemir.com

</td>

</tr>

<tr>

<td class=”kirmizi”>www.microsoft.com

</td>

</tr>

</body>

</html>

Sayfalar Arası CSS

Öncelikle bir css dosyası oluşturuyoruz.

ornek.css

td{

color:red;

font-size:small;

}

<html>

<head>

<meta http-equiv=”Content-Lnaguage” content=”tr”>

<link rel=”stylesheet” type=”text/css” href=”ornek.css”>

</head>

<body>

<table style=”width: 200px” align=”center”>

<tr>

<td>www.yazilim-arsivi.net</td>

</tr>

<tr>

<td>www.halitozdemir.com</td>

</tr>

</table>

</body>

</html>

Bu şekilde bir tek css dosyasını tüm sayfalarda kullanabilirsiniz

Yorum yapın