เรียนรู้การใช้ CSS ด้วยตัวเอง

html-css

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

ภาพตัวอย่าง HTML / CSS / Result

html5 css sample
html5 css sample

HTML FILE

  • คำสั่ง <link rel =”stylesheet” href=”mycss.css”/> ใช้สำหรับเรียกใช้เครื่องมือ CSS เพื่อตกแต่งภาพ
  • Tag body กำหนดให้ background เป็นสีออกฟ้าเขียว (Aquamarine) ดูจากไฟล์ CSS?
  • Tag h1 กำหนดให้ตัวอักษรสีส้ม และจัดตัวอักษรให้อยู่ตรงกลาง

CSS FILE

css syntax
css syntax

 

  • CSS Syntac คือรูปแบบของคำสั่ง CSS
  • Selector เลือกจาก Tag ของ HTML เช่น h1, body เป็นต้น
  • Declaration สำหรับกำหนดค่าต่างๆ ของ selector จากตัวอย่าง h1 ให้ตัวอักษรมีสีน้ำเงิน และขนาดของตัวอักษรเท่ากับ 12 พิกเซล
  • ฟรี ตัวอย่าง CSS พร้อม HTML : Download

สรุปการใช้งาน HTML5 ร่วมกับ CSS

  • ต้องบอก HTML ว่า เราจะใช้ CSS ตัวไหน ตัวอย่างเช่น <link rel =”stylesheet” href=”mycss.css”/> มีการเรียกใช้ไฟล์ mycss.css
  • ในส่วนของ CSS เขียนว่า จะให้ tag HTML ไหน แสดงอย่างเช่น สีอะไร ตัวอักษรขนาดไหน เป็นต้น

ตัวอย่างนี้เป็นเพียงตัวอย่างพื้นฐานที่อยากให้เพื่อนๆ ได้ทำความเข้าใจก่อน ก่อนที่จะเข้าไปเรียนรู้ในระดับสูงต่อไป

 

Avatar
About Mr. ONE - Admin 1532 Articles
ทำงานด้านไอทีโดยเฉพาะ ชอบเทคโนโลยีเป็นชีวิตจิตใจ ชอบขีดๆ เขียนๆ โดยเฉพาะเขียนข้อมูลเกี่ยวกับการใช้คอมพิวเตอร์ โปรแกรม มีประสบการณ์การเขียนหนังสือคอมพิวเตอร์ เขียนแบบเรียนระบบสารสนเทศทางด้านโรงแรม

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.