CSS Kenar
CSS kenar özellikleri ile HTML dosyanızdaki elementler çevresinde boşluklar bırakıp organize edebilirsiniz
Örnekler
Örnek 1
<html>
<head>
<style type="text/css">
p {font-family:arial; }
p.bir {margin:2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>Bu bir paragraf</p>
<p class="bir">Bu bir paragraf</p>
<p>Bu bir paragraf</p>
</body>
</html>
Örnek 2
<html>
<head>
<style type="text/css">
p {font-family:arial; }
p.bir {margin-top:4cm}
</style>
</head>
<body>
<p>Bu bir paragraf</p>
<p class="bir">Bu ust bosluklu bir paragraf</p>
</body>
</html>
Örnek 3
<html>
<head>
<style type="text/css">
p {font-family:arial; }
p.bir {margin-bottom:4cm}
</style>
</head>
<body>
<p>Bu bir paragraf</p>
<p class="bir">Bu alt bosluklu bir paragraf</p>
<p>Bu bir paragraf</p>
</body>
</html>
Örnek 4
<html>
<head>
<style type="text/css">
p {font-family:sans-serif; }
p.bir {margin-left:2cm}
</style>
</head>
<body>
<p>Bu bir paragraf</p>
<p class="bir">Bu sol bosluklu bir paragraf</p>
<p>Bu bir paragraf</p>
</body>
</html>
Örnek 5
<html>
<head>
<style type="text/css">
p {font-family:sans-serif; }
p.bir {margin-left:25%}
</style>
</head>
<body>
<p>Bu bir paragraf</p>
<p class="bir">Bu sol bosluklu bir paragraf</p>
<p>Bu bir paragraf</p>
</body>
</html>
Örnek 6
<html>
<head>
<style type="text/css">
p {font-family:sans-serif; }
p.bir {margin-left:25%}
p.iki {text-align:right;margin-right:8cm; }
</style>
</head>
<body>
<p class="bir">Bu sol bosluklu bir paragraf</p>
<p class="iki">Bu hem sol hem de sag bosluklu bir paragraf</p>
</body>
</html>
Sonraki ders için tıklayınız...