Tech & Tips
hover css การดักเหตุการณ์วางเมาส์ที่ Elements
hover คือ คำสั่งในภาษา CSS ใช้ในกรณีที่ต้องการดักจับเหตุการณ์ ผู้ใช้งานวางเมาส์ไว้บน Elements ต่าง ๆ
ภาพรวมของ hover css
1. ใช้คำสั่ง hover ต่อท้าย div id หรือ class ที่ต้องการ เช่น #box:hover, .box:hover
2. สามารถใช้คำสั่ง hover ได้กับ Elements ชนิดต่าง ๆ เช่น div, link, text เป็นต้น
3. สามารถเขียนคำสั่งต่าง ๆ ที่ต้องการในเหตุการณ์ hover ได้
CSS Box Model
CSS Box Model คือการเขียนเว็ปไซต์ในรูปแบบของ Content Box โดยมี CSS เป็นตัวควบคุมรูปแบบและโครงสร้าง ซึ่งจะทำให้เว็ปไซต์ของเรามีความยืดหยุ่นสูง หากพูดกันง่ายๆก็คือ การใช้คำสั่ง div ร่วมกับ CSS นั่นเอง แต่ในการเขียน CSS Box Model นั้นต้องมีการ Reset CSS เพื่อให้ค่าของ Browser แต่ละตัวเริ่มต้นที่จุดเดียวกันก่อน เพื่อความสะดวกในการเขียน CSS ให้รองรับกับทุก Browser
จากรูปจะเห็นว่า Box Model จะประกอบด้วย 4 ส่วน คือ
content โดยถ้าเรากำหนด width กับ height ใน CSS จะมีผลกับส่วน content นี้
padding จะเป็นส่วนที่กำหนดความห่างระหว่าง content กับ border โดยถ้าเรากำหนด background-color ไว้ padding เองก็จะได้รับผลด้วยเช่นกัน
border จะเป็นการกำหนดเส้นขอบให้ box model
margin จะเป็นส่วนที่กำหนดความห่างระหว่าง box model กับ element อื่นๆ
Text Align CSS การจัดตำแหน่งตัวอักษร
การจัดตำแหน่งของตัวอักษร หรือประโยคด้วยภาษา CSS นั้นจะใช้คำสั่ง text-align ในการจัดตำแหน่งตามที่ต้องการ เช่น ซ้าย, ขวา หรือตรงกลาง
ภาพรวมของคำสั่ง text-align
1. ใช้คำสั่ง text-align:<VALUE> ในการกำหนดตำแหน่งของตัวอักษร หรือประโยค
2. ระบุค่า left สำหรับกำหนดให้ตัวอักษร หรือประโยคชิดตำแหน่งทางซ้าย
3. ระบุค่า center สำหรับกำหนดให้ตัวอักษร หรือประโยคชิดตำแหน่งตรงกลาง
4. ระบุค่า right สำหรับกำหนดให้ตัวอักษร หรือประโยคชิดตำแหน่งทางขวา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น