- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
- คุณสมมบัติของ CSS เราจะสามารถเพิ่มเงาข้อความและองค์ประกอบได้ โดยสามารถเพิ่มเงาให้กับ text (ข้อความ) หรือ box (กล่องข้อความ) ได้
รูปแบบโค้ด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> div { width: xpx; height: xpx; padding: xpx; background-color: color_name; box-shadow: xpx xpx; } </style> </head> <body> <div>This is element with a box-shadow</div> </body> </html>
- อธิบายโค้ด
- - xpx ตัวเลข x คือ ตัวเลขที่สามารถกำหนดได้ว่าจะใส่เลขอะไรก็ได้
- color_name คือ ชื่อสีที่ต้องการในกล่องข้อความ
- - xpx ตัวเลข x คือ ตัวเลขที่สามารถกำหนดได้ว่าจะใส่เลขอะไรก็ได้
- แบบที่ 1
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: red; box-shadow: 10px 10px; } </style> </head> <body> <div>This is element with a box-shadow</div> </body> </html>
- ผลลัพธ์แบบที่ 1
- แบบที่ 2
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px grey; } </style> </head> <body> <div>This is element with a box-shadow</div> </body> </html>
- ผลลัพธ์แบบที่ 2
- แบบที่ 3
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: green; box-shadow: 10px 10px 5px red; } </style> </head> <body> <div>This is a div element with a box-shadow</div> </body> </html>
- ผลลัพธ์แบบที่ 3
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------