#1 Basic HTML & CSS: อยากหัดเขียนเว็บไซต์ จากคนที่ไม่เคยเขียนต้องเริ่มยังไง ? (Part 2)
ใน Part 1 เราได้อธิบาย HTML และลงมือเขียนไปบ้างแล้วใน Part 2 เราจะมาอธิบายเพิ่มเติมในส่วนของ CSS กันครับว่ามันคืออะไร และเราจะทำให้เว็บของเราสวยขึ้นได้ยังไง
ภาษา Css คืออะไร ?
ก่อนหน้านี้เราใช้ HTML ในการสร้างโครงเว็บไซต์ไปแล้ว แต่ทำไมมันไม่สวยเหมือนเว็บไซต์อื่นๆ เลยดังนั้น CSS นั้นจะมาช่วยเราสร้างความสวยงามของเว็บไซต์
CSS Syntax จะมีลักษณะดังนี้ จะประกอบไปด้วย 3 ส่วน
- Selector : จะเป็น HTML element(Tag), class attribute และ id attribute
- Property : มีหลาย Property เช่น color, font-size
- Value : คือค่าของ Property นั้นๆ
ตัวอย่าง การเขียน Selector ทั้ง 3 แบบ
/* Selector: type html element */
h1 {
color: blue;
font-size: 12px;
}/* Selector: type class attribute */
.titleClass {
color: blue;
font-size: 12px;
}/* Selector: type id attribute */
#titleId {
color: blue;
font-size: 12px;
}
สำหรับใน Blog นี้ของเราจะยกตัวอย่าง Property บางตัวที่เราจะใช้ตบแต่งเว็บไซต์ ของเรา ส่วน Property อื่นๆ ที่ใช้งานบ่อยๆ ผมจะมาเขียนใน Blog ถัดๆ ไปนะครับ
ตัวอย่าง Property คร่าวๆ ดังนี้ครับ
วิธีการเรียกใช้งาน CSS มีด้วยกัน 3 วิธีได้แก่
- Inline: เป็นวิธีการประกาศ style attribute ใน html element เลย
- Internal: เป็นวิธีการประกาศ <style> elementใน <head> เลย
- External: เป็นวิธีการประกาศ <link> เพื่อ Import File Css มาไว้ใน <head>
Note: ส่วนใหญ่คนจะนิยมเขียนแบบ External มากกว่าเพราะต้องการ Separate ระหว่างภาษา HTML และ CSS ออกจากกัน
ตัวอย่าง Inline
ตัวอย่าง Internal
ตัวอย่าง External
เด่วเราจะใช้ Css Property ด้านบน และวิธีการเรียกใช้งานแบบ Internal ในการตบแต่งเว็บไซต์ที่เราได้สร้างไว้ให้ดูดีขึ้น ลองดูกันครับ
สรุป
เนื้อหาที่สอนไปทั้งหมด ผมต้องการให้เพื่อนๆ ทุกคนได้คุ้นเคยกับภาษา Html และ Css โดยผมอยากให้เพื่อนๆ ได้ลองนำไปเขียนดูเล่นๆ เพื่อให้เกิดความเคยชินนะครับ ถ้าใครมีคำถามหรือว่าติดตรงไหน สามารถทักเข้ามาใน Facebook Dolab ได้เลยครับ เด่วใน Blog ต่อๆ ไปผมมาลง Detail ในส่วนของ Css ให้มากขึ้นครับ ว่าต้องเขียน Css ยังไงให้เหมือนจัดวางใน Power Point
Follow me.
- Facebook : https://www.facebook.com/dolabFounder/
- Medium : https://medium.com/dolab
