Σε αυτό το τέταρτο μέρος της εισαγωγής στα CSS θα δούμε όλες τις ιδιότητες και επιλόγές για τα περιγράμματα που μπορούμε να χρησιμοποιήσουμε με τα CSS.
Ιδιότητες Περιγράμματος του CSS
Οι ιδιότητες περιγράμματος (border properties) του CSS ορίζουν τα περιγράμματα γύρω από ένα στοιχείο. Παρακάτω θα δούμε παραδείγματα για όλες τις επιλογές που μπορεί να έχουμε δημιουργόντας borders με CSS.
Ορισμός του Στυλ των Τεσσάρων Περιγραμμάτων
<html>
<head>
<style>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p> The "border-style" property is not recognized by Netscape
4. </p>
<p> Netscape 6 supports all border styles. </p>
<p> Internet Explorer 5.5 supports all border styles. Internet Explorer 4.0 - 5.0 does not support the "dotted" and
"dashed" values </p>
<p class="dotted"> A dotted border </p>
<br>
<p class="dashed"> A dashed border </p>
<br>
<p class="solid"> A solid border </p>
<br>
<p class="double"> A double border </p>
<br>
<p class="groove"> A groove border </p>
<br>
<p class="ridge"> A ridge border </p>
<br>
<p class="inset"> An inset border </p>
<br>
<p class="outset"> An outset border </p>
</body>
</html>
Ορισμός Διαφορετικού Περιγράμματος σε κάθε Πλευρά Στοιχείου
<html>
<head>
<style>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p>
<b> Note: </b> Netscape 4 does not support the "border-style"
property. Use the "border" property to set the borders in
Netscape. </p>
<p class="soliddouble"> Some text </p>
<br>
<p class="doublesolid"> Some text </p>
<br>
<p class="groovedouble"> Some text </p>
<br>
<p cla ss="three"> Some text </p>
</body>
</html>
Ορισμός του Χρώματος των Τεσσάρων Περιγραμμάτων
<html>
<head>
<style>
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
rgb(250, 0, 255)
}
</style>
</head>
<body>
<p class="one"><b> Note: </b> The "border-color" property is not recognized in Internet Explorer if it is used alone.
Use the
"border-style" property to set the borders first in Internet Explorer. </p>
<p class="two"> Some text </p>
<p class="three"><b> Note: </b>
Netscape 4 does not support the "border-color" property. Use the "border" property to set the
borders and colors in Netscape.</p>
<p class="four"> Some text </p>
</body>
</html>
Ορισμός του Πλάτους του Κάτω Περιγράμματος
<html>
<head>
<style>
p
{
border-style: solid;
border-bottom-width: 15px
}
</style>
</head>
<body>
<p> The "border-bottom-width" property is not recognized in Internet Explorer if it is used alone.
Use the "border-style" property to set the borders first with Internet Explorer. </p>
</body>
</html>
Ορισμός του Πλάτους του Αριστερού Περιγράμματος
<html>
<head>
<style>
p
{
border-style: solid;
border-left-width: 15px
}
</style>
</head>
<body>
<p> The "border-left-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style"
property to set the borders first in Internet Explorer. </p>
</body>
</html>
Ορισμός του Πλάτους του Δεξιού Περιγράμματος
<html>
<head>
<style>
p
{
border-style: solid;
border-right-width: 15px
}
</style>
</head>
<body>
<p> The "border-right-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style"
property to set the borders first in Internet Explorer. </p>
</body>
</html>
Ορισμός του Πλάτους του Πάνω Περιγράμματος
<html>
<head>
<style>
p
{
border-style: solid;
border-top-width: 15px
}
</style>
</head>
<body>
<p> The "border-top-width" property is not recognized in Internet Explorer if it is used alone.
Use the "border-style" property to set the borders first in Internet Explorer. </p>
</body>
</html>
Όλες οι Ιδιότητες του Κάτω Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p
{
border-bottom: medium solid #ff0000
}
</style>
</head>
<body>
<p><b> Note: </b> Netscape 4 does not support the "border-bottom" property.
Use the "border-bottom-width" property to set the width of the bottom border with Netscape. </p>
</body>
</html>
Όλες οι Ιδιότητες του Αριστερού Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p
{
border-left: medium solid #ff0000
}
</style>
</head>
<body>
<p><b> Note: </b> Netscape 4 does not support the "border-left" property. Use the "border-left-width" property to
set the width of the left border in Netscape. </p>
</body>
</html>
Όλες οι Ιδιότητες του Δεξιού Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p
{
border-right: medium solid #ff0000
}
</style>
</head>
<body>
<p><b> Note: </b> Netscape 4 does not support the "border-right" property. Use the "border-right-width" property to
set the width of the right border in Netscape. </p>
</body>
</html>
Όλες οι Ιδιότητες του Πάνω Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p
{
border-top: medium solid #ff0000
}
</style>
</head>
<body>
<p><b> Note: </b> Netscape 4 does not support the "border-top" property. Use the "border-top-width" property to
set the width of the top border in Netscape. </p>
</body>
</html>
Όλα τα Πλάτη των Ιδιοτήτων Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-style: solid;
border-width: 5px 10px
}
p.three
{
border-style: solid;
border-width: 5px 10px 1px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px medium
}
</style>
</head>
<body>
<p class="one"> The "border-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style"
property to set the borders first in Internet Explorer. </p>
<p class="two"> Some text </p>
<p class="three"> Some text </p>
<p class="four"> Some text </p>
</body>
</html>
Όλες οι Ιδιότητες Περιγράμματος σε μια Δήλωση
<html>
<head>
<style>
p
{
border: medium double rgb(250, 0, 255)
}
</style>
</head>
<body>
<p> Some text </p>
</body>
</html>
Trackbacks - Pingbacks