Lv.1 CSS รู้จักป่ะ

CSS ย่อมาจาก Cascading Style Sheet ซึ่งเป็นภาษาที่ใช้จัดการรูปแบบเอกสารของ HTML ให้เว็บไซต์มี รูปร่าง หน้าตาสวยงาม สีสัน รูปแบบ ขนาด เส้น และอื่นๆอีกมากมาย

CSS และ HTML

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

จุดเด่น

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

เปรียบเทียบเว็บเพจที่ใช้สไตล์กับไม่ใช้สไตล์

ก่อนใช้

Not use CSS
Not use CSS

หลังใช้

Use CSS
Use CSS

ลงมือเขียน 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 พิกเซล

Top