CSS Dış Hatlar
CSS dış hatlar nitelikleri ile bir elementin sınırının dışına bir hat daha koyabilir ve özelliklerini ayarlayabilirsiniz.
Örnekler
Örnek 1
<html>
<head>
<style type="text/css">
p.bir {border-style:solid;border-color:red;border-width:thin;
outline-style:dotted;outline-color:green;outline-width:thick; }
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 2
<html>
<head>
<style type="text/css">
p {border-style:solid;border-color:red;border-width:thin; }
p.bir {outline-style:dotted;}
p.iki {outline-style:dashed; }
p.uc {outline-style:solid; }
p.dort {outline-style:double; }
p.bes {outline-style:groove; }
p.alti {outline-style:ridge; }
p.yedi {outline-style:inset; }
p.sekiz {outline-style:outset; }
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
<p class="iki">bu bir paragraf</p>
<p class="uc">bu bir paragraf</p>
<p class="dort">bu bir paragraf</p>
<p class="bes">bu bir paragraf</p>
<p class="alti">bu bir paragraf</p>
<p class="yedi">bu bir paragraf</p>
<p class="sekiz">bu bir paragraf</p>
</body>
</html>
Örnek 3
<html>
<head>
<style type="text/css">
p {border-style:solid;border-color:red;border-width:thin; }
p.bir {outline-width:medium;outline-color:green;outline-style:solid;}
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 4
<html>
<head>
<style type="text/css">
p {border-style:solid;border-color:red;border-width:thin; }
p.bir {outline-width:thick;outline-style:solid;}
p.iki {outline-width:thin;outline-style:solid;}
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
<p class="iki">bu bir paragraf</p>
</body>
</html>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com