ตารางวิชา

CSS ตู้วิชา

• หนังสือเกี่ยวกับ CSS
• CSS คำนำเข้า
• รายละเอียดการใช้ CSS ภาษาพื้นฐาน
• รายละเอียดการใช้ CSS ภาษาสูง
• เลือกเซลเฟล็กซ์ CSS
• เลือกเซลเฟล็กซ์ id CSS
• เลือกเซลเฟล็กซ์ รูปแบบ CSS
• การสร้าง CSS
• ระหว่างเอาปื้น CSS
• ระหว่างข้อความ CSS
• ระหว่างแบบอักษร CSS
• ระหว่างรายการ CSS

CSS โมเดลกล่อง

• สรุป CSS Box Model
• CSS Padding
• CSS Border
• CSS Margin
• CSS Margin Collapsing

CSS การจัดตำแหน่ง

• สรุป CSS Positioning
• CSS Positioning Relative
• CSS Positioning Absolute
• CSS Floating

CSS ตัวเลือก

• CSS Element Selector
• CSS Selector Grouping
• รายละเอียด CSS Class Selector
• รายละเอียด CSS ID Selector
• รายละเอียด CSS Attribute Selector
• CSS Descendant Selector
• CSS Child Element Selector
• CSS Adjacent Sibling Selector

คอร์สเลือก

คำแนะนำคอร์ส:

• CodeW3C.com Treasure Box

border ขององค์ประกอบเป็นเส้นหนึ่งหรือหลายเส้นที่ล้อมรอบเนื้อหาและขอบเขตในตัวอักษร

border-style 属性

CSS Border

ใน HTML พวกเราใช้ตารางเพื่อสร้างขอบขอบรอบข้อความ แต่ด้วยการใช้ทรัพยากรของเส้นขอบ CSS พวกเราสามารถสร้างขอบขอบที่มีประสิทธิภาพที่สูง และสามารถนำไปใช้กับองค์ประกอบทุกชนิด

ขอบขอบขององค์ประกอบคือขอบขอบที่อยู่ด้านในขอบเขตขององค์ประกอบ ขอบขอบขององค์ประกอบเป็นเส้นหนึ่งหรือหลายเส้นที่ล้อมรอบเนื้อหาและขอบเขตในตัวอักษร

ขอบขอบมีสามด้าน: ความกว้าง รูปแบบ และสี ในบทความที่มาต่อไป เราจะเล่าให้คุณเรียงลำดับสามด้านนี้ให้ละเอียด

ขอบขอบกับสี背影

CSS ระบุว่าเส้นขอบเขียนขึ้นบนสี背影ขององค์ประกอบ นี่มีความสำคัญเพราะบางเส้นขอบเป็น 'แตก' (เช่น ขอบขอบจุดหรือขอบขอบจมาย) สี背影ขององค์ประกอบควรปรากฏขึ้นระหว่างส่วนที่ที่เห็นของเส้นขอบ

CSS2 ระบุว่าสี背影เพียงเพื่อขอบของพื้นที่ในตัวอักษร ไม่ใช่ขอบของเส้นขอบ หลังจากนั้น CSS2.1 ได้แก้ไขมัน: สี背影ขององค์ประกอบเป็นสี背影ของเนื้อหา พื้นที่ในตัวอักษร และพื้นที่ของเส้นขอบ ส่วนใหญ่ทั้งหมดของเบราเซอร์ตามตาม CSS2.1 อย่างไร แต่บางเบราเซอร์เก่าแก่อาจมีการแสดงที่ต่างกัน

รูปแบบของขอบขอบ

รูปแบบเป็นหนึ่งในประการที่สำคัญที่สุดของขอบขอบ ไม่ได้เพราะรูปแบบควบคุมการแสดงของขอบขอบ (แน่นอนว่ารูปแบบยืดหย่องการแสดงของขอบขอบ) แต่เพราะหากไม่มีรูปแบบ จะไม่มีขอบขอบใดๆ

CSS border-style 属性กำหนด 10 รูปแบบที่ไม่ใช้มาจากค่าที่มีมาแล้ว รวมถึง none

ตัวอย่างเช่น คุณสามารถกำหนดขอบของภาพให้เป็น outset ทำให้มันดูเหมือนปุ่มที่ปรับดัดได้:

a:link img {border-style: outset;}

กำหนดหลายรูปแบบ

คุณสามารถกำหนดหลายรูปแบบสำหรับขอบขอบ ตัวอย่างเช่น:

p.aside {border-style: solid dotted dashed double;}

กฎที่มีขึ้นมานี้กำหนดสี่รูปแบบขอบของประโยคที่มีชื่อคลาสว่า aside: ขอบขอบแบบสีเข้ม ขอบขอบแบบจุด ขอบขอบแบบจมาย และขอบขอบแบบสองสาย

เราเห็นว่าค่าที่นี่มีลำดับ top-right-bottom-left และเมื่อเจอการกำหนดหลายค่าเพื่อกำหนดเนื้อหาข้างในเรียงลำดับเช่นนี้

กำหนดรูปแบบข้างเดียว

หากคุณต้องการกำหนดรูปแบบของเส้นขอบของมุมของกล่ององค์ประกอบ แทนที่จะกำหนดรูปแบบของเส้นขอบของทั้ง 4 ขอบ คุณสามารถใช้ทรัพยากรของรูปแบบขอบข้างเดียวด้านต่อไปนี้:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

ดังนั้นทั้งสองวิธีนี้เท่ากัน:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

จำเป็นต้องระวัง:ถ้าคุณต้องการใช้วิธีที่สอง คุณจำเป็นต้องจัดการคุณสมบัติของขอบเดียวด้วยคุณสมบัติสั้น มีความหมายว่าถ้าคุณจัดการคุณสมบัติของขอบเดียวก่อน border-style ค่าของคุณสมบัติสั้นจะทับค่าของคุณสมบัติขอบเดียว

ความกว้างของเขตของชาย

คุณสามารถ คุณสมบัติ border-widthกำหนดความกว้างของเขตของชาย

มีสองวิธีในการกำหนดความกว้างของเขตของชาย คือ คุณสามารถกำหนดค่าความยาว เช่น 2px หรือ 0.1em หรือใช้หนึ่งในสามคำที่เป็นรหัสเฉพาะ ซึ่งคือ thin 、medium (ค่าปริยาย) และ thick。

หมายเหตุ：CSS ไม่ได้กำหนดความกว้างของ 3 คำที่เป็นรหัสเฉพาะ ดังนั้นตัวแทนผู้ใช้ที่เรียกใช้อาจตั้งค่า thin 、medium (ค่าปริยาย) และ thick ให้เท่ากับ 5px、3px และ 2px ในขณะที่ตัวแทนผู้ใช้อื่น อาจตั้งค่าให้เท่ากับ 3px、2px และ 1px。

ดังนั้น สามารถตั้งค่าความกว้างของเขตของชายได้เช่นนี้:

p {border-style: solid; border-width: 5px;}

หรือ:

p {border-style: solid; border-width: thick;}

กำหนดความกว้างของขอบเดียว

คุณสามารถตั้งค่าเขตของชายขององค์ประกอบตามลำดับ top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

ตัวอย่างที่มีอยู่ข้างต้นนี้ก็สามารถเขียนลงได้แบบที่นี้ (รูปแบบเขียนนี้เรียกว่าค่าที่คัดลอก）：

p {border-style: solid; border-width: 15px 5px;}

คุณยังสามารถตั้งค่าความกว้างของเขตของชายทุกขอบด้วยคุณสมบัติด้านล่างนี้:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

ดังนั้น กฎที่มีอยู่ข้างต้นนี้เท่ากับตัวอย่างที่มีอยู่ข้างต้นนี้:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

ไม่มีเขตของชาย

ในตัวอย่างที่ผ่านมาคุณได้เห็นแล้ว ถ้าคุณต้องการแสดงเขตของชายของตัวแทน คุณจำเป็นต้องตั้งค่ารูปแบบชาย อย่างเช่น solid หรือ outset。

แล้วหากคุณตั้งค่า border-style ให้เป็น none จะเกิดอะไรขึ้นมา:

p {border-style: none; border-width: 50px;}

ถึงแม้ว่าความกว้างของเขตขอบจะเป็น 50px แต่รูปแบบของเขตขอบกำหนดเป็น none ในกรณีนี้ ไม่เพียงแค่รูปแบบของเขตขอบจะหายไป ความกว้างของเขตขอบก็จะถูกตั้งเป็น 0 ทำไมเขตขอบจะหายไป?

นี่เพราะถ้ารูปแบบของเขตขอบเป็น none คือเขตขอบไม่มีอยู่อย่างแท้จริง จึงไม่มีความกว้างของเขตขอบ ดังนั้นความกว้างของเขตขอบจะถูกตั้งเป็น 0 ไม่ว่าคุณได้กำหนดเป็นอะไร

จำนวนนี้มีความสำคัญมาก จริงๆแล้ว ลืมประกาศรูปแบบของเขตขอบเป็นความผิดพลาดที่มักเกิดขึ้น ตามกฎต่อไปนี้ ทุกองค์กรณ์ h1 จะไม่มีเขตขอบ ไม่ว่าจะมีความกว้าง 20 pixel หรือไม่

h1 {border-width: 20px;}

เพราะค่าปริมาณต้นแบบของ border-style คือ none ถ้าไม่มีการประกาศรูปแบบ มันจะเท่ากับ border-style: noneดังนั้น ถ้าคุณต้องการให้เขตขอบปรากฏขึ้น คุณจะต้องประกาศรูปแบบของเขตขอบ

สีของเขตขอบ

การตั้งค่าสีของเขตขอบเป็นไปด้ง่ายมาก ใน CSS มันใช้ตัวเลขเพียงแค่ border-color 属性มันสามารถรับค่าสีสูงสุด 4 ค่า

คุณสามารถใช้ค่าสีทุกชนิด เช่น สีชื่อ หรือค่าสีสิบหกหลัก หรือค่า RGB

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

ถ้าค่าสีมีตัวเลขน้อยกว่า 4 ตัว การคัดลอกค่าจะมีผล ตัวอย่างเช่น กฎที่ต่อไปนี้ประกาศว่าเขตขอบของย่อหน้าที่มีสีฟ้าด้านบนและด้านล่าง และสีแดงด้านขวาและด้านซ้าย

p {
  border-style: solid;
  border-color: blue red;
  }

หมายเหตุ：สีขอบปริมาณปกติคือสีของเอกสารตัวเอง ถ้าไม่มีการประกาศสีของเขตขอบ มันจะเหมือนกับสีของข้อความขององค์กรณ์ ด้านนอกนี้ ถ้าองค์กรณ์ไม่มีข้อความใดๆ ตัวอย่างเช่นตารางที่มีรูปภาพเท่านั้น สีขอบของตารางนี้จะเหมือนกับสีของข้อความขององค์กรณ์พ่อ (เพราะ color สามารถถ่ายทอดได้) องค์กรณ์พ่อนี้อาจเป็น body หรือ div หรือ table อื่นๆ

กำหนดสีของเขตขอบเดียวข้าง

มีคุณสมบัติสีของเขตขอบเดียวข้างบางอย่าง หลักการของมันเหมือนกับรูปแบบและความกว้างเดียวข้าง

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

เพื่อกำหนดเขตขอบที่เป็นสีดำสำหรับองค์กรณ์ h1 และเขตขอบด้านขวาเป็นสีแดง คุณสามารถกำหนดดังนี้:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

เขตขอบที่มีความเห็นโดยสาร

เราได้พูดถึงแล้วว่า ถ้าเขตขอบไม่มีรูปแบบ มันจะไม่มีความกว้าง แต่บางกรณีคุณอาจต้องการสร้างเขตขอบที่ไม่มีความเห็น

CSS2 ได้นำเข้าค่าสีของเขตขอบที่เรียกว่า transparent ค่านี้ใช้สร้างเขตขอบที่มีความกว้างแต่ไม่มีความเห็น เช่นในตัวอย่างด้านล่างนี้：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

เราได้กำหนดรูปแบบดังนี้สำหรับลิงก์ด้านบน

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

ลองทดลองด้วยตัวเอง

ในทางเดียวกัน โดยใช้ transparent การใช้ขอบเหมือนการใช้เปลือกด้านในอีกด้าน มีประโยชน์เพิ่มเติมอีกอย่างคือ สามารถทำให้มันเห็นได้เมื่อคุณต้องการ ขอบที่โปร่งใสนี้เหมือนเปลือกด้านในเพราะสีพื้นหลังขององค์ประกอบจะขยายเข้าไปในพื้นที่ขอบ (หากมีสีพื้นหลังที่เห็นได้)

ความสำคัญก่อน IE7 ซึ่ง IE/WIN ไม่มีการสนับสนุน transparent ในรุ่นเก่า ในรุ่นเก่า IE จะตั้งค่าสีขอบตามค่า color ขององค์ประกอบ

ตัวอย่างนี้แสดงวิธีการตั้งความกว้างของเส้นขอบบน

เครื่องมือ

คู่มือ CSS

ตัวอย่าง CSS

ประเมิน CSS

ตัวอย่าง CSS

สายการสนับสนุน