การกำหนดลักษณะเส้นขอบ
สามารถกำหนดให้กับแท็ก
HTML
ใดๆ ก็ได้ตามต้องการ โดยคุณสมบัติเส้นขอบจะเป็นดังนี้
border-style:
ใช้กำหนดลักษณะของเส้น
มีค่าที่เป็นไปได้คือ none (ไม่แสดงเส้นขอบ), hidden (ไม่แสดงเส้นขอบ), dotted, dashed, solid,
double, groove, ridge, inset และ outset
border01.htm
<p
style="border-style:dotted">A dotted border</p>
<p
style="border-style:dashed">A dashed border</p>
<p
style="border-style:solid">A solid border</p>
<p
style="border-style:double">A double border</p>
<p style="border-style:groove">A
groove border</p>
<p
style="border-style:ridge">A ridge border</p>
<p
style="border-style:inset">An inset border</p>
<p
style="border-style:outset">An outset border</p>
<p style="border-style:solid
dotted">solid dotted - border</p>
<p style="border-style:dotted dashed
double">dotted dashed double - border</p>
<p style="border-style:solid dotted
dashed double">solid dotted dashed double - border</p>
การใช้ border-style
สามารถกำหนดค่าได้ 4 ลักษณะ คือ
1. กำหนดค่าเดียว ให้ผลลัพธ์ 4 ด้านตามค่าที่กำหนด
2. กำหนด 2 ค่า
ให้ผลลัพธ์บน-ล่างที่ค่าที่
1
ซ้าย-ขวาที่ค่าที่ 2
3. กำหนด 3 ค่า
ให้ผลลัพธ์บนที่ค่าที่ 1 ซ้าย-ขวาที่ค่าที่ 2 ล่างที่ค่าที่ 3
4. กำหนด 4 ค่า
ให้ผลลัพธ์บนที่ค่าที่ 1 ขวาค่าที่ 2 ล่างค่าที่
3
และซ้ายค่าที่ 4
border-top-style,
border-bottom-style, border-left-style และ border-right-style:
ใช้กำหนดเส้นขอบเจาะจงเฉพาะด้านใดด้านหนึ่ง
ค่าที่เป็นไปได้ใช้ชุดเดียวกับคุณสมบัติ border-style
border-color:
ใช้กำหนดค่าสีให้เส้นขอบ
ค่าที่เป็นไปได้ คือ 1 - 4 ค่า
border02.htm
<p style="border-style:solid;
border-color:blue">One-colored border!</p>
<p style="border-style:solid;
border-corlor:#ff0000 #0000ff">Two-colored border!</p>
<p style="border-style:solid;
border-color:#ff0000 #00ff00 #0000ff">Three-colored border!</p>
<p style="border-style:solid; border-color:#ff0000
#00ff00 #0000ff rgb(250,0,250)">Four-colored border!</p>
การใช้งานคุณสมบัติ
border-color
ไม่สามารถใช้งานโดดๆ ได้ ต้องกำหนดคุณสมบัติ border-style
ก่อนใช้ border-color
border-top-color,
border-bottom-color, border-left-color, border-right-color:
ใช้กำหนดค่าสีของขอบแบบเจาะจงเฉพาะด้านใดด้านหนึ่ง
border-width:
ใช้กำหนดความหนาของเส้นขอบ
ค่าที่เป็นไปได้คือ thin (บาง),
medium (กลาง),
thick (หนา) หรือระบุค่าเจาะจง เช่น 1mm, 1px, 1pt เป็นต้น
border03.htm
<html><head>
<style type="text/css">
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">Some text</p>
<p class="two">Sime text</p>
<p class="three">Some text</p>
<p class="four">Some text</p>
</body></html>
การใช้งาน border-width
ไม่สามารถใช้งานโดดๆ ได้ ต้องกำหนดคุณสมบัติของ border-style
ก่อนใช้ border-width
border-top-width,
border-bottom-width, border-left-width และ border-right-width;
กำหนดความหนาของเส้นขอบแบบเจาะจงเฉพาะด้านใดด้านหนึ่ง
ใช้ค่าเป็นไปได้ชุดเดียวกับ border-width
border-top, border-bottom,
border-left และ border-right;
กำหนดคุณสมบัติรวมของขอบด้านใดด้านหนึ่ง
เช่น
p {border-bottom: medium solid #ff0000} ตัวอย่างนี้ แสดงการกำหนดคุณสมบัติ width
, style และ color
เฉพาะขอบล่าง
border:
กำหนดคุณสมบัติรวมของทุกด้าน
เช่น
p {border: medium double rbg(250, 0, 255)} ตัวอย่างนี้แสดงคุณสมบัติ width, style และ color ทั้งสี่ด้าน
margin:
ใช้เว้นระยะระหว่างเส้นขอบ
ค่าที่กำหนดได้ดังนี้
ค่า
|
ความหมาย
|
auto
|
ให้บราวเซอร์ตั้งค่าที่เหมาะสมให้
|
length
|
กำหนดตัวเลขเจาะจง
เช่น 10px,
2in, 3pc
|
%
|
กำหนดเป็นค่าเปอร์เซ็นต์เทียบกับความกว้างของเอกสาร
หรือเทียบกับความสูงของเอกสาร
|
border04.htm
<html><head>
<style type="text/css">
p.margin { margin:2cm 4cm 2cm 4cm; border-style:solid}
p
{border-style:solid}
</style>
</head><body>
<p> This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified
margins</p>
<p> This is a paragraph with no specified margins</p>
</body></html>
margin-top, margin-bottom,
margin-left และ margin-right:
ใช้กำหนดระยะห่างของขอบแบบเจาะจงเฉพาะด้านใดด้านหนึ่ง
ค่าที่กำหนดได้ชุดเดียวกับคุณสมบัติ margin
padding:
ใช้กำหนดระยะระหว่างเนื้อหากับขอบ
ค่าที่กำหนดได้มีดังนี้
ค่า
|
ความหมาย
|
length
|
กำหนดตัวเลขเจาะจง
เช่น 10px,
2in, 3pc
|
%
|
กำหนดค่าเป็นเปอร์เซ็นต์เทียบกับความกว้างของเอกสารกับความสูงของเอกสาร
|
border05.html
<html><head>
<style type="text/css">
p.padding {padding:2cm 4cm 2cm 4cm; border-style:solid}
p {border-style:solid}
</style>
</head><body>
<p>This is a paragraph with no specified paddings</p>
<p class="padding">This is a paragraph with specified
paddings</p>
<p>This is a paragraph with no specified paddings</p>
</body></html>
padding-top, padding-bottom,
padding-left และ padding-right:
ใช้กำหนดระยะห่างของเนื้อหากับขอบแบบเจาะจงเฉพาะด้านใดด้านหนึ่ง
ค่าที่กำหนดใช้ชุดเดียวกับคุณสมบัติของ padding
ไม่มีความคิดเห็น:
แสดงความคิดเห็น