CSS ย่อมาจาก Cascading Style Sheet ซึ่งเป็นภาษาที่ใช้จัดการรูปแบบเอกสารของ HTML ให้เว็บไซต์มี รูปร่าง หน้าตาสวยงาม สีสัน รูปแบบ ขนาด เส้น และอื่นๆอีกมากมาย
CSS และ HTML
เว็บไซต์ต่างๆที่ออนไลน์อยู่บนโลกอินเตอร์เน็ตนั้น มีพื้นฐานมาจากภาษา HTML ทั้งนั้น แต่ถ้าหากเราต้องการความสวยความงามให้เว็บเพจ และสามารถปรับแต่งแก้ไขรูปแบบการแสดงผลให้ใช้งานได้ทุกอุปกรณ์ละก็ หนีไม่พ้น CSS แน่นอน ยังไงก็ต้องใช้ CSS อยู่แล้ว
จุดเด่น
- ทำแสงและเงา
- เปลี่ยนภาพพื้นหลังหรือตัวอักษรตามขนาดหน้าจอ
- สามารถทำให้รูปสีเหลี่ยมกลายเป็นมุนมนได้
- สามารถกำหนดความโปร่งแสง(Opacity) โดยสามารถแสดงภาพเป็นจางๆ หรือแบบทึบ ปรับได้ตามต้องการ
- สามารถสร้างอนิเมชั่นต่างๆได้
- และอื่นๆ อีกมากมาย
เปรียบเทียบเว็บเพจที่ใช้สไตล์กับไม่ใช้สไตล์
ก่อนใช้
หลังใช้
ลงมือเขียน CSS สักที
ผมจะไม่เขียน CSS ร่วมกับ HTML นะครับ ขอแยกคนละไฟล์เลยละกัน ง่ายต่อการปรับปรุงแก้ไข
ตัวอย่าง
* {
box-sizing: border-box;
}
body {
font-size: 16px;
}
h1 {
color: red;
}
p {
font-size: 16px;
}
div {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
กำหนดแท็ก h1 มีอักษรสีแดง
กำหนดให้แท็ก p มีขนาดตัวอักษร 16 พิกเซล