CSS Sınırları
HTML dosyanızdaki bileşenler arasında sınır/çerçeve özelliklerini değiştirmenizi sağlar
Örnekler
Örnek 1
<html>
<head>
<style type="text/css">
p {border:medium double blue;}
</style>
</head>
<body>
<p>bu bir paragraf</p>
</body>
</html>
Örnek 2
<html>
<head>
<style type="text/css">
p {border-style:solid double;}
p.bir {border-style:double solid;}
p.iki {border-style:groove double; }
p.uc {border-style:solid double groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<p class="bir">bu bir paragraf</p>
<p class="iki">bu bir paragraf</p>
<p class="uc">bu bir paragraf</p>
</body>
</html>
Örnek 3
<html>
<head>
<style type="text/css">
p {border-top:medium solid green;}
</style>
</head>
<body>
<p>bu bir paragraf</p>
</body>
</html>
Örnek 4
<html>
<head>
<style type="text/css">
p {border-bottom:medium solid green;}
</style>
</head>
<body>
<p>bu bir paragraf</p>
</body>
</html>
Örnek 5
<html>
<head>
<style type="text/css">
p {border-left:medium solid green;}
</style>
</head>
<body>
<p>bu bir paragraf</p>
</body>
</html>
Örnek 6
<html>
<head>
<style type="text/css">
p {border-right:medium solid green;}
</style>
</head>
<body>
<p>bu bir paragraf</p>
</body>
</html>
Örnek 7
<html>
<head>
<style type="text/css">
p {border-style:dashed;}
p.bir {border-style:dotted; }
p.iki {border-style:solid; }
p.uc {border-style:double; }
p.dort {border-style:ridge; }
p.bes {border-style:inset; }
p.alti {border-style:outset; }
p.yedi {border-style:groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 8
<html>
<head>
<style type="text/css">
p {border-top-style:dashed;}
p.bir {border-top-style:dotted; }
p.iki {border-top-style:solid; }
p.uc {border-top-style:double; }
p.dort {border-top-style:ridge; }
p.bes {border-top-style:inset; }
p.alti {border-top-style:outset; }
p.yedi {border-top-style:groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 9
<html>
<head>
<style type="text/css">
p {border-bottom-style:dashed;}
p.bir {border-bottom-style:dotted; }
p.iki {border-bottom-style:solid; }
p.uc {border-bottom-style:double; }
p.dort {border-bottom-style:ridge; }
p.bes {border-bottom-style:inset; }
p.alti {border-bottom-style:outset; }
p.yedi {border-bottom-style:groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 10
<html>
<head>
<style type="text/css">
p {border-left-style:dashed;}
p.bir {border-left-style:dotted; }
p.iki {border-left-style:solid; }
p.uc {border-left-style:double; }
p.dort {border-left-style:ridge; }
p.bes {border-left-style:inset; }
p.alti {border-left-style:outset; }
p.yedi {border-left-style:groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 11
<html>
<head>
<style type="text/css">
p {border-right-style:dashed;}
p.bir {border-right-style:dotted; }
p.iki {border-right-style:solid; }
p.uc {border-right-style:double; }
p.dort {border-right-style:ridge; }
p.bes {border-right-style:inset; }
p.alti {border-right-style:outset; }
p.yedi {border-right-style:groove; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 12
<html>
<head>
<style type="text/css">
p {border-style:solid;border-width:5px; }
p.bir {border-style:solid;border-width:thick; }
p.iki {border-style:solid;border-width:5px 10px; }
p.uc {border-style:solid;border-width:5px 10px 1px; }
p.dort {border-style:solid;border-width:5px 10px 1px medium; }
</style>
</head>
<body>
<p>bu bir paragraf</p>
<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>
</body>
</html>
Örnek 13
<html>
<head>
<style type="text/css">
p {border-style:solid;border-top-width:15px; }
p.bir {border-style:solid;border-top-width:thin; }
</style>
</head>
<body>
<p>"border-top-width" niteligi tek basina calismaz.
"border-style" niteligi ile birlikte kullanilabilir</p>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 14
<html>
<head>
<style type="text/css">
p {border-style:solid;border-bottom-width:15px; }
p.bir {border-style:solid;border-bottom-width:thin; }
</style>
</head>
<body>
<p>"border-bottom-width" niteligi tek basina calismaz.
"border-style" niteligi ile birlikte kullanilabilir</p>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 15
<html>
<head>
<style type="text/css">
p {border-style:solid;border-left-width:15px; }
p.bir {border-style:solid;border-left-width:thin; }
</style>
</head>
<body>
<p>"border-bottom-width" niteligi tek basina calismaz.
"border-style" niteligi ile birlikte kullanilabilir</p>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 16
<html>
<head>
<style type="text/css">
p {border-style:solid;border-right-width:15px; }
p.bir {border-style:solid;border-right-width:thin; }
</style>
</head>
<body>
<p>"border-bottom-width" niteligi tek basina calismaz.
"border-style" niteligi ile birlikte kullanilabilir</p>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 17
<html>
<head>
<style type="text/css">
p.bir {border-style:solid;border-top-color:blue; }
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 18
<html>
<head>
<style type="text/css">
p.bir {border-style:solid;border-bottom-color:blue; }
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 19
<html>
<head>
<style type="text/css">
p.bir {border-style:solid;border-left-color:red; }
</style>
</head>
<body>
<p class="bir">bu bir paragraf</p>
</body>
</html>
Örnek 20
<html>
<head>
<style type="text/css">
p.bir {border-style:solid;border-color:red; }
p.iki {border-style:solid;border-top-color:blue;border-bottom-color:blue }
p.uc {border-style:solid;border-left-color:green;
border-right-color:green;border-top-color:blue;border-bottom-color:red }
p.dort {border-style:solid;border-left-color:green;
border-right-color:yellow;border-top-color:blue;border-bottom-color:red }
</style>
</head>
<body>
<p class="bir">tek renkli paragraf</p>
<p class="iki">iki renkli paragraf</p>
<p class="uc">uc renkli paragraf</p>
<p class="dort">dort renkli paragraf</p>
</body>
</html>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com