ตกแต่งด้วย CSS


ตกแต่งด้วย CSS

  • CSS ย่อมาจากคำว่า Cascading Style Sheets โดยทั่วไปก็จะเรียก CSS หรือ Style Sheets
  • CSS ทำหน้าที่บอกถึงรูปลักษณ์การแสดงผลของ HTML Element
  • CSS สามารถกำหนดการแสดงผลของ HTML ได้หลายๆ หน้า โดยใช้ CSS เพียงไฟล์เดียว
  • CSS ใส่ใน HTML ได้ 3 วิธีด้วยกัน คือ
    • Inline โดยใช้ Attribute style ใน HTML Element
    • Internal โดยใช้ Element <style> ในส่วนของ <head>
    • External โดยใช้ไฟล์ CSS แล้วลิงก์ไฟล์เข้ามาใน HTML วิธีนี้เป็นวิธีที่นิยมมากที่สุด

Inline CSS

Inline CSS ใช้ในการตกแต่ง HTML Element นั้นๆ เพียงอันเดียว

โดยกำหนดค่าใน Attribute style ของ Element นั้นๆ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Internal CSS

Internal CSS ใช้ในการตกแต่งหน้าเว็บนั้นๆ เพียงหน้าเดียว

โดยกำหนดค่าใน Element <style> ในส่วนของ <head>

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


External CSS

External CSS สามารถใช้ตกแต่งหน้าเว็บได้หลายๆ หน้า

ด้วยการแก้ External CSS เพียงไฟล์เดียว สามารถทำให้หน้าเว็บทั้งเว็บไซต์ซึ่งอาจมีหลายร้อยหลายพันหน้าเปลี่ยนได้

โดยลิงก์ไฟล์ CSS เข้ามาใน HTML ในส่วนของ <head>

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

External CSS สามารถเขียนด้วยโปรแกรมอะไรก็ได้ ซึ่งใช้ภาษา CSS ในการเขียน ไม่ใช่ HTML และบันทึกเป็นไฟล์นามสกุล .css

นี่คือโค้ดภายในไฟล์ styles.css

ตัวอย่าง


                        
                    


ตัวอักษร (Font)

property color ใช้ในการกำหนดสีตัวอักษร

property font-family ใช้ในการกำหนดประเภทตัวอักษร

property font-size ใช้ในการกำหนดขนาดตัวอักษร

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


กรอบ (Border)

property border ใช้ในการกำหนดค่ากรอบ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ช่องว่างภายในกรอบ (Padding)

property padding ใช้ในการกำหนดขนาดช่องว่างระหว่างกรอบและข้อความภายใน

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ระยะห่าง (Margin)

property margin ใช้ในการกำหนดระยะห่างภายนอกกรอบ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


กำหนด Attribute id

กำหนด id ให้กับ Element ได้ด้วยการใช้ Attribute id

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


กำหนด Attribute class

กำหนด class ให้กับ Element ได้ด้วยการใช้ Attribute class

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


การอ้างอิงไฟล์ External CSS

สามารถอ้างอิงได้ทั้งภายในเว็บไซต์ตัวเอง หรือจะเว็บไซต์คนอื่นก็ได้

ตัวอย่างนี้ใช้ URL เต็มเพื่อลิงก์ไปหา CSS เว็บไซต์อื่น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ตัวอย่างนี้ใช้ลิงก์ไปหา CSS ในเว็บไซต์ตัวเอง

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

ตัวอย่างนี้ใช้ลิงก์ไปหา CSS ในเว็บไซต์ตัวเองที่อยู่ในโฟวเดอร์เดียวกัน

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


บทสรุป

  • ใช้ Attribute style เพื่อเขียน Inline CSS
  • ใช้ <style> เพื่อเขียน Internal CSS
  • ใช้ <link> เพื่อเขียน Internal CSS
  • ใช้ <head> เพื่อเก็บ Element <style> และ <link>
  • property color ใช้กำหนดสีตัวอักษร
  • property font-family ใช้กำหนดประเภทตัวอักษร
  • property font-size ใช้กำหนดขนาดตัวอักษร
  • property border ใช้กำหนดกรอบ
  • property padding ใช้กำหนดช่องว่างภายในกรอบ
  • property margin ใช้กำหนดระยะห่างภายนอกกรอบ