1.

ความหมายของซีเอสเอส
ตอบ ซีเอสเอส (cascading style sheet : CSS) เป็นภาษาสไตล์ชีต ที่ใช้สำหรับการจัดรูปแบบการ แสดงผล หรือ ตกแต่ง
เอกสารเอชทีเอ็มแอล เพื่อให้เอกสารเอชทีเอ็มแอลมีความสวยงามมากยิ่งขึ้น เช่น การกำหนดรูปแบบตัวอักษร ขนาด สีสัน
เส้นขอบ พื้นหลัง ระยะห่าง รวมไปถึงการจัดวางโครงสร้าง ของเว็บไซต์ เพื่อให้เว็บไซต์ที่พัฒนานั้นมีความน่าสนใจ ภาษาซี
เอสเอสสามารถควบคุมลักษณะการ แสดงผลของอิลิเมนต์ได้ง่าย สะดวกต่อการแก้ไขหน้าเอกสาร ในการกำหนด
คุณลักษณะต่าง ๆ ผู้พัฒนา สามารถดึงชื่อของอิลิเมนต์ (element) ในภาษาเอชทีเอ็มแอลขึ้นมาเพื่อกำหนดค่ได้ตาม
ต้องการ

2. ประโยชน 3 ของภาษาซีเอสเอส
ตอบ 1. ง่ายต่อการจัดรูปแบบการแสดงผล ผู้พัฒนาสามารถใช้ภาษาซีเอสเอสในการตกแต่ง และ จัดรูปแบบโครงสร้าง
ของเอกสารเอชทีเอ็มแอล สามารถเพิ่มเติม หรือ แก้ไขรูปแบบการแสดงผลได้ง่าย มีการแบ่งรหัสต้นฉบับ (source code)
ออกเป็ นสัดส่วนทำให้เข้าใจได้ง่าย
2. ลดการใช้ภาษาเอชทีเอ็มแอล เนื่องจากผู้พัฒนาสามารถตกแต่ง และ จัดรูปแบบการ แสดงผลได้โดยใช้ภาษาชีเอสเอส
ซึ่งภาษาเอชทีเอ็มแอลจะถูกใช้ในการวางโครงสร้าง และจัดการเนื้อหา เท่านั้น ทำให้ลดการใช้งานภาษาเอชทีเอ็มแอลลง
3. รหัสต้นฉบับมีจำนวนลดลง ภาษาซีเอสเอสสามารถกำหนดคุณสมบัติเป็ นแบบชุดคำสั่ง เดียว และให้เอกสารเอขทีเอ็ม
แอลดึงเอาไปใช้งานได้หลายครั้ง หรือใช้งานคุณสมบัติร่วมกันได้ โดยไม่ ต้องประกาศหรือ กำหนดค่าใหม่ ทำให้จำนวน
ของรหัสต้นฉบับลดลง
4. ไฟล์เอกสารมีขนาดเล็กลง เมื่อจำนวนรหัสต้นฉบับลดลงจะทำให้เว็บไซต์ที่พัฒนา หรือ เว็บเพจ ที่ได้มีขนาดไฟล์
เอกสารเล็กลง ไม่เปลืองพื้นที่ในการจัดเก็บเอกสาร และ สามารถรับส่งข้อมูล ผ่านเครือข่ายอินเทอร์เน็ตได้รวดเร็วมากยิ่ง
ขึ้น
5. ประมวลผลได้เร็วขึ้น เมื่อไฟล์เว็บไซต์ หรือ ขนาดของไฟล์เอกสารเว็บมีขนาดเล็ก มีการ ใช้รหัสคำสั่งรหัสต้นฉบับน้อย
ลง ทำให้การตีความของเว็บเบราว์เซอร์สามารถประมวลผล และ แสดง ผลได้เร็วยิ่งขึ้น
6. แก้ไขได้ง่าย ผู้พัฒนาสามารถปรับเปลี่ยนรูปแบบการแสดงผลของเว็บไซต์ได้ง่าย เช่น สีสัน พื้นหลัง การแสดงผล รูป
แบบโครงสร้าง เป็ นต้น โดยไม่ต้องยุ่งเกี่ยวกับเอกสารเอชทีเอ็มแอล สามารถจัดกลุ่มชุดคำสั่งทำให้รหัสต้นฉบับเป็ น
ระเบียบมากยิ่งขึ้น และ ผู้พัฒนาสามารถสร้างเทมเพลท จัดโครงสร้าง (a yout) หรือ รูปแบบการแสดงผลที่แตกต่างกัน
ทำให้ปรับเปลี่ยนการแสดงผลได้ง่าย
7. สามารถกำหนดรูปแบบการแสดงผลให้เหมาะสมกับสื่อหลากหลายชนิด เช่น โทรศัพท์มือถือ สื่อสิ่งพิมพ์ หรือ หน้าจอ
คอมพิวเตอร์ขนาดต่าง ๆ เป็นต้น
8. ทำให้เว็บไซค์เป็ นมาตรฐาน เนื่องจากภาษาซีเอสเอส ถูกประกาศใช้งานเป็ นมาตรฐานใน ระดับสากล จากองค์กร W3C
(world wide web consotrium) ทำให้ทั่วโลกมีรูปแบบการใช้งาน เหมือนกัน
9. เว็บเบราว์เซอร์หลายตัวรองรับ จากความเป็ นมาตรฐานของเอกสารเอชทีเอ็มแอล และ ภาษาซีเอสเอส ทำให้ทุก ๆ เว็บ
เบราว์เซอร์รองรับการแสดงผล โดยไม่ขึ้นกับอุปกรณ์ หรือ ระบบปฏิบัติการ
3. ไวยากรณ์ของภาษาซีเอสเอส
ตอบ ไวยากรณ์เป็ นรูปแบบการเขียนภาษาซีเอสเอส มีความสำคัญต่อการกำหนดค่า หรือ คุณสมบัติ ตามที่ผู้พัฒนา
ต้องการ ซึ่งผู้พัฒนาจะต้องกำหนดคุณสมบัติ และ เรียกใช้งานให้ถูกต้อง โครงสร้างของ ไวยากรณ์ภาษาซีเอสเอสประกอบ
ไปด้วย 3 ส่วนหลัก

1.ซีเล็กเตอร์ (selector) หรือ ตัวเลือก เป็นส่วนที่ใช้สำหรับกำหนดชื่ออ้างอิงในการ กำหนดค่า เพื่อให้มีผลต่อการแสดงผล

ในเอกสารเอขทีเอ็มแอล ซึ่งซีเล็กเตอร์ หรือ ตัวเลือกนี้ อาจเป็ นแท็ก (tag) ของภาษาเอชทีเอ็มแอล อิลิเมนต์ (element หรือ
ชื่อของ selector ที่กำหนดขึ้นมาเอง
2.คุณสมบัติ (properties) บางครังเรียกว่า พร็อบเพอร์ตี (properties) เป็นชื่อคุณสมบัติ ที่ผู้พัฒนาต้องการกำหนด
คุณลักษณะ หรือ จัดรูปแบบการแสดงผลให้กับซีเล็กเตอร์ ซึ่งจะต้องอยู่ใน ระหว่างเครื่องหมายปี กกา ! : ที่ระบุขอบเขต
ของซีเล็กเตอร์ ซึ่งแต่ละซีเล็กเตอร์สามารถกำหนดค่า คุณสมบัติได้หลายรูปแบบ เช่น เช่น color
3. ค่าคุณสมบัติ (value) เป็นค่าที่กำหนดให้กับแต่ละพร็อบเพอร์ตี้ เพื่อเป็ นการระบุ รูปแบบของคุณสมบัติที่ผู้พัฒนา
ต้องการ เช่น colorred; เป็นระบุค่าคุณสมบัติให้กับพร็อบเพอร์ตี้ col or เพื่อกำหนดสีของตัวอักษรให้แป็นสีแดง ซึ่งจะมี
เครื่องหมายโคล่อน ;)

4.การใช้งานภาษาซีเอสเอส
ตอบ การใช้งานซีเอสเอสแบบ External Style นี้ผู้ พัฒนาต้องสร้างไฟล์เอกสารซีเอสเอสขึ้นมา เพื่อเป็ นไฟล์เอกสารหลัก
ให้เอกสารเอชทีเอ็มแอลสามารถดึงคุณสมบัติที่กำหนดไว้ไปใช้ในการ จัดรูปแบบการแสดงผลในหน้าเว็บเพจนั้น มีวิธีการ
เรียกใช้งานไฟล์เอกสารซีเอสเอส 2 วิธี ดังนี้
3.1 แบบ linking Style เป็นการเรียกใช้เอกสารซีเอสเอสจากภายนอกที่นิยมใน ปัจจุบัน โดยใช้แท็กคำสั่ง <link rel=
"stylesheet" type="text/css" href="css-name.css"> การ เชื่อมโยงจะใช้ชื่อของไฟล์เอกสารซีเอสเอสในการอ้างอิง
3.2 แบบ Import Style เป็นรูปแบบการใช้งานเอกสารซีเอสเอสจากภายนอก ในกรณี ที่มีการประกาศแท็ก <style> ใน
หน้าเว็บเพจนั้นอยู่แล้ว การเชื่อมโยงจะใช้รูปคำสั่ง <style type = "type/css"> @import ur("ชื่อไฟล์เอกสาร.css") ;
/style> แทรกคำสั่งไว้ในในส่วนหัว (head section) ของเอกสารเอชทีเอ็มแอลเท่านั้น

5.ซีเล็กเตอร์
ตอบ ซีเล็กเตอร์ (selector) หรือ ตัวเลือก เป็นตัวบ่งชี้ หรือ ส่วนที่ใช้สำหรับการอ้างอิงในการ กำหนดค่าคุณสมบัติ โดย
สามารถกำหนดคุณสมบัติให้ซีเล็กเตอร์ เพื่อให้เอกสารเอชทีเอ็มแอลใช้อ้างอิง ในการกำหนดรูปแบบ หรือ จัดการ
โครงสร้างของเอกสารเอชทีเอ็มแอล ซีเล็กเตอร์เป็ นส่วนที่มีความสำคัญในการเขียนภาษาซีเอสเอส เพื่อให้เอกสารเอชที
เอ็มแอล สามารถกำหนดค่าคุณสมบัติให้กับอิลิเมนต์ต่าง ๆ ได้อย่างถูกวิธี ผู้พัฒนาต้องทำความเข้าใจ และรู้ วิธีการใช้งาน
อย่างถูกต้อง เหมาะสมในแต่ละกรณี เนื่องจากการกำหนดค่าให้กับอิลิเมนต์ในเอกสาร เอชทีเอ็มแอล สามารถกำหนดค่ได้
หลายรูปแบบ ซึ่งแต่ละรูปแบบมีรูปแบบการใช้งาน ข้อดี ข้อเสีย

6.การระบุค่าคุณสมบัติในเอกสารซีเอสเอส
ตอบ 1. คีย์เวิร์ด (keyword) เป็นการกำหนดค่าคุณสมบัติให้กับพร็อบเพอร์ตี้ ในรูปแบบตัวอักษร หรือ คำคีย์เวิร์ดที่ถูก
กำหนดเอาไว้แล้ว
2. เปอร์เซ็นต์ (percentage) เป็นการกำหนดค่าระดับ โดยใช้ตัวเลขตั้งแต่ 0-100 ตามแต่ ละคุณสมบัติที่ผู้พัฒนาต้องการ
ต้องมีเครื่องหมายเปอร์เซ็นต์ (%) ต่อท้ายค่าระดับด้วยเสมอ ซึ่งจะเป็ น ค่าระดับแบบอัตราส่วน (relative length) เช่น
width:80% ; width :100%;
3. ค่าระดับ (length) เป็นการระบุค่าที่เป็ นตัวเลข ทั้งจำนวนเต็ม (integer) ซึ่งเป็ นตัวเลข โดด ๆ อาจมีเครื่องหมาย "+ "
หรือ " -" ที่บ่งบอกถึงค่าระดับตามหน่วยวัดของตัวเลขนั้น ๆ หรือ อาจ ระบุค่าเป็ นตัวเลขจำนวนนับ (number) เป็นเลข 0
หรือ เลขทศนิยม อาจจะมีเครื่องหมาย "+" หรือ

7.การใส่หมายเหตุ
ตอบ การใส่หมายเหตุ ในเอกสารซีเอสเอสการใส่ข้อความอธิบายคำสั่ง (comment) เพื่อปิดการแสดงผลของคำสั่ง หรือ
ข้อความ จะใช้เครื่องหมาย /"* เพื่อเปิ ดการใส่หมายเหตุ และ เครื่องหมาย */ เพื่อระบุจุดสิ้นสุด ขอบเขตของหมายเหตุ
ตัวอย่างเช่น * f font-family: arial; font-size: 10pt; ] ข้อความหรือคำสั่งนี้จะไม่ถูกนำเอาไปประมวลผล body f
background-color: pin k; 1 เป็นการกำหนดสีพื้นหลังของเว็บเป็ นสีชมพู */ p f color: green; background-color: pink;
J #head f font-size: 20pt; color: orange; ]

8.การจัดรูปเเบบตัวอักษร
ตอบ การจัดรูปแบบตัวอักษร รูปแบบตัวอักษร (font) สำหรับเว็บไซต์ สามารถกำหนดรูปแบบการแสดงผล โดยใช้พร็อบ
เพอร์ตี้ หรือ คุณสมบัติของภาษาซีเอสเอส ซึ่งจะต้องมีการประกาศซีเล็กเตอร์ และ เลือกกำหนด คุณสมบัติตามที่ผู้พัฒนา
ต้องการ การกำหนดรูปแบบการแสดงผลให้กับชีเล็กเตอร์มีรูปแบบการใช้งาน ดังตัวอย่าง selector f properties:value;
properties:value; J เช่น ต้องการกำหนดคุณสมบัติให้กับแท็กคำสั่ง <h 1> ผู้พัฒนาสามารถดึงชื่อของแท็ก h1 เพื่อ
กำหนดเป็ นซีเล็กเตอร์ แล้วกำหนดค่าคุณสมบัติให้กับซีเล็กเตอร์ตามต้องการ

9.การกำหนดรูปเเบบการเเสดงผลของข้อความ
ตอบ การตกแต่งรูปแบบการแสดงผลของข้อความ ผู้พัฒนาสามารถตกแต่งข้อความ หรือ กำหนดรูปแบบการแสดงผลของ
ข้อความ เช่น สี ตัวอักษร สีพื้นหลัง ระยะบรรทัด ระยะตัวอักษร เป็ นต้น โดยใช้คุณสมบัติของซีเอสเอส

10.การจัดตำเเหน่งข้อความ
ตอบ การจัดตำแหน่งของข้อความ เช่น การจัดกลุ่มข้อความให้ชิดทางด้านซ้าย ชิดทางด้านขวา หรือ จัดกึ่งกลางหน้า
เว็บเพจ ผู้พัฒนาสามารถใช้คุณสมบัติของภาษาชีเอสเอสได้
ตัวอย่างการจัดตำแหน่งข้อความ <h1 style="text-align:right; color:red;"> การจัด Text align Right </h1> <h2
style="text-align:center; color:green;"> การจัด Text align Center </h2> <h3 style="text-align:left; color:blue;">
การจัดตำแหน่ง Text align Left </h3> <p style="line-height: 15px; color:#000; text-alignright;"> อุทยานแห่งชาติ
น้ำตกพลิ้ว มีพื้นที่ ครอบคลุมท้องที่อำเภอเมือง อำเภอแหลมสิงห์ อำเภอขลุง และอำเภอมะขาม จังหวัดจันทบุรี ประกอบ
ด้วยป่ าที่สมบูรณ์ เทือกเขาสูงสลับชับซ้อนเป็ นแหล่งต้นน้ำลำธารหลายสาย .. </p>

11.การจัดการพื้นหลัง
ตอบ การกำหนดพื้นหลังมีส่วนที่ช่วยเสริมให้เนื้อหามีความชัดเจน เพิ่มความเด่นมากให้กับเว็บไซต์ มากยิ่งขึ้น ทำให้
เนื้อหาสะดุดสายตาอ่านได้ง่าย ภาษาซีเอสเอสสามารถกำหนดพื้นหลังได้หลายรูปแบบ เช่น กำหนดรูปภาพเป็ นพื้นหลัง
ของเว็บไซต์ หรือ ใช้สีเป็ นพื้นหลัง เป็นต้น การกำหนดรูปแบบพื้นหลัง จะใช้คุณสมบัติของภาษาซีเอสเอส
การกำหนดค่าสีเป็ นพื้นหลัง หากต้องการกำหนดค่าได้ทั้งเว็บเพจจะต้องประกาศใช้ body เป็น ชีเล็กเตอร์เพื่อกำหนด
คุณสมบัติ ส่วนอิลิเมนต์อื่น ๆ มีรูปแบบการกำหนดค่าที่คล้ายคลึงกัน เช่น แท็ก <h1> หรือ แท็ก <P> เป็นต้น การกำหนด
ค่าโดยเจาะจงเฉพาะแท็กจะต้องใช้ภาษาซีเอสเอสแบบ

12.รู้จักกับ CSS Box Model

ตอบ อิลิเมนต์ในภาษาเอชทีเอ็มแอล เมื่อถูกกำหนดค่าคุณสมบัติโดยใช้ภาษาซีเอสเอส การ จัดรูปแบบจะถูกมองให้อยู่ใน
รูปแบบของกล่องข้อความ (box mode) เช่น การใช้งานแท็กคำสั่ง <p>..</p>,<h1>..</h1>, <divz..</div> หรือ
<span>../span> เป็นต้น ซึ่งกล่องข้อความ ประกอบไปด้วยด้านทั้งหมด 4 ด้าน คือ ด้านบน (top) ด้านขวา (right) ด้าน
ล่าง (bottom) และ ด้านซ้าย (left) ผู้พัฒนาสามารถกำหนดคุณลักษณะของแท็ก หรือ กล่องข้อความนั้น ๆ ได้ โดยใช้
ภาษาซีเอสเอส เช่น การกำหนดระยะเส้นขอบ (margin) คุณลักษณะของเส้นขอบ (border) ระยะห่าง ระหว่างเส้นขอบกับ
เนื้อหา ( padding) ภายในกล่องข้อความ จะถูกมองว่าเป็ นเนื้อหา (content) ซึ่ง อาจจะประกอบไปด้วย ข้อความ รูปภาพ
สื่อมัลติมีเดีย หรือ รายละเอียด ที่กล่องข้อความของแท็ก คำสั่งครอบไว้

13.การกำหนดความกว้างความสูง
ตอบ การกำหนดความกว้างความสูง การกำหนดขนาดความกว้าง ความสูง ความกว้างมากที่สุด ความกว้างน้อยที่สุด
ความสูงมาก ที่สุด และ ความสูงน้อยที่สุด ให้กับอิลิเมนต์ หรือ แท็กที่ต้องการ สามารกำหนดค่าคุณสมบัติเป็นค่า ระดับ
ตามหน่วยวัดที่ใช้ในการอ้างอิง หรือ อาจระบุเป็ น เปอร์เซ็น (% โดยคำนวณจากขนาดความกว้าง ของหน้าจอเว็บ
เบราว์เซอร์ คุณสมบัติสำหรับกำหนดขนาดของอิลิเมนต์
คุณสมบัติ (properties) ค่าที่กำหนด (value) float left | right | none height auto | length | % width auto | length | %
max-width none | length | % min-width none | length | % max-height none | length | % min-height none | length
| % ความหมาย

14.การจัดการเส้นขอบ
ตอบ การจัดการเส้นขอบ เส้นขอบ (border) เป็นส่วนที่ระบุขอบเขตของอิลิเมนต์ หรือ แท็กในภาษาเอชทีเอ็มแอล ที่ แสดง
ผลอยู่ในรูปแบบของกล่องข้อความ ผู้พัฒนาสามารถกำหนดลักษณะของเส้นขอบได้ผ่าน คุณสมบัติของภาษาซีเอสเอส
คุณสมบัติ (properties) ค่าที่กำหนด (value) border border-width border-style border-color Color none | hidden |
dotted dashed | solid | double groove | ridge | inset | outset thin | medium | thick | length Length border-color
border-style

15.การกำหนดจุดเริ่มต้นของอิลิเมนต์
ตอบ ระยะจุดเริมต้นในการวาดเส้นขอบของอิลิเมนต์ ผู้พัฒนาสามารถกำหนดจุดเริมต้นของอิลิ เมนต์ได้ เพื่อกำหนด
ระยะห่างระหว่างอิลิเมนต์ หรือ ระยะห่างจากจุดเริ่มต้นของอิลิเมนต์นั้น ๆ ได้ ซึ่ง สามารถกำหนดเฉพาะด้านที่ต้องการได้
ผ่านคุณสมบัติดังต่อไปนี้ margin-top : length ; กำหนดระยะห่างจากจุดเริ่มต้นของเส้นขอบด้านบน margin-rihgt :
length ; กำหนดระยะห่างจากจุดเริ่มต้นของเส้นขอบด้านขวา margin-bottom : length ; กำหนดระยะห่างจากจุดเริ่มต้น
ของเส้นขอบด้านล่าง margin-left : length ; กำหนดระยะห่างจากจุดเริ่มต้นของเส้นขอบด้านซ้าย margin : length
length length length ; เป็นการกำหนดระยะห่างทั้ง 4 ด้านอย่างย่อ

16.การกำหนดระยะห่างระหว่างตัวอักษรกับเส้นขอบ
ตอบ การกำหนดระยะห่างระหว่างตัวอักษรกับเส้นขอบ ในกรณีที่ข้อความชิดกับเส้นขอบเกินไป อาจทำให้อ่านเนื้อหาได้
ยาก และ การแสดงผลไม่ สวยงาม ผู้พัฒนาสามารถกำหนดระยะห่างระหว่างเส้นขอบกับเนื้อหาได้ โดยใช้คุณสมบัติ
padding ซึ่ง สามารถระบุค่าเฉพาะด้านที่ต้องการ มีลักษณะการใช้งาน ดังนี้ padding-top: length ; กำหนดระยะห่าง
ระหว่างเส้นขอบด้านบน padding-right: length ; กำหนดระยะห่างระหว่างเส้นขอบด้านขวา padding-bottom: length ;
กำหนดระยะห่างระหว่างเส้นขอบด้านล่าง padding-left: length ; กำหนดระยะห่างระหว่างเส้นขอบด้านซ้าย

17.การจัดตำเเหน่ง
ตอบ ภาษาซีเอสเอสสามารถจัดตำแหน่งให้กับอิลิเมนต์ทางแนวนอนโดยใช้คุณสมบัติ float ซึ่ง สามารถช่วยจัดตำแหน่ง
ของอิลิเมนต์ในตำแหน่งต่าง ๆ ที่ต้องการได้ เหมาะสำหรับการจัดโครงสร้าง ของเอกสารเอชทีเอ็มแอล การจัดตำแหน่งของ
รูปภาพ ข้อความ หรือ แท็กคำสั่ง เป็ นต้น มีรูปแบบการ ใช้งาน

18.การยกเลิกการจัดตำเเหน่ง
ตอบ การจัดตำแหน่งให้กับอิลิเมนต์ด้วยคุณสมบัติ float จะมีผลต่ออิลิเมนต์ถัดไป ซึ่งอาจจะทำให้ข้อความ หรือ ภาพ
กราฟิกเลื่อนขึ้นมาอยู่ข้างอิลิเมนต์อื่น ๆ ทั้งที่เนื้อหาไม่ได้เกี่ยวข้องกัน ทำให้การ แสดงผลหน้าเว็บไซต์ไม่สวยงาม มีรูป
แบบการใช้งานดังนี้ clear: left | right | both ; คุณสมบัติ clear ไว้สำหรับยกเลิกการจัดตำแหน่งของอิลิเมนต์ หากต้องการ
ยกเลิกการจัด ตำแหน่งทางด้านซ้ายจะต้องใช้คำสั่ง clear: left; ส่วน clear:right; หมายถึง การยกเลิกการกำหนด
ตำแหน่งทางด้านขวา และ clear:both; หมายถึง การยกเลิกการกำหนดตำแหน่งทั้งสองด้าน

19.การจัดการเนื้อหาที่เกินขอบเขตอิลิเมนต์
ตอบ การกำหนดความกว้าง ความสูง ให้กับอิลิเมนต์ หากเนื้อหามากจนลันขอบเขตของอิลิเมนต์ จะ ทำให้การแสดงผล
หน้าเว็บเพจไม่สวยงาม ผู้พัฒนาอาจแก้ปัญหาโดยการเพิ่มความกว้าง หรือ ความสูง ให้กับอิลิเมนต์ แต่หากจัดวาง
โครงสร้างที่กำหนดความกว้าง ความสูง ไว้เรียบร้อยแล้ว ผู้พัฒนาสามารถ จัดการกับเนื้อหาส่วนที่เกินขอบเขตอิลิเมนต์ได้
โดยใช้คุณสมบัติ overflow เช่น ต้องการจัดการเนื้อหา ที่เกิดขอบเขตของอิลิเมนต์เฉพาะแนวแกน x จะต้องใช้คุณสมบัติ
overlow-x และ ใช้คุณสมบัติ overflow-y เมื่อต้องการจัดการเฉพาะแนวแกน Y ซึ่งมีรูปแบบการใช้งาน ดังนี้ overflow:
visible hidden I scroll I auto ; จัดเนื้อหาทั้งแนวแกน x และ y overflow-x: visible | hidden | scroll | auto ; จัดเนื้อหา
ทั้งแนวแกน x overflow-y: visible | hidden | scroll | auto ; จัดเนื้อหาทั้งแนวแกน โดยค่าที่ระบุ overflow:visible; เป็นค่า
ปกติเหมือนกันกับไม่ได้มีการกำหนด overflow: hidden; เป็นการซ่อนเนื้อหาที่เกินขอบเขตของอิลิเมนต์ไม่ไห้แสดงผล
overflow:scroll; เว็บ เบราว์เซอร์จะแสดง scroll bar เพื่อให้สามารถเลื่อนดูเนื้อหาที่เกินได้ และ overflow:auto; เป็นการ
กำหนดให้แสดงผล scroll bar เฉพาะเนื้อหาที่เกินขอบเขตของอิลิเมนต์เท่านั้น