Enjoyday แนะนำการสร้างเว็บไซต์ สอนการใช้งาน CMS และเรื่องราวต่างๆ ที่เจ้าของบล็อกสนใจนั่นแหละ
CSS คืออะไร
by enjoyday.net
CSS (ย่อมาจาก Cascading Style Sheet)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML หรือ XHTML หรือ XML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ
จริงๆ แล้วเราสามารถตกแต่งเอกสาร HTML ด้วยภาษา HTML เอง ซึ่งบางครั้งอาจสะดวกและแสดงผลได้เร็วกว่าการใช้ CSS เสียอีก แต่การใช้ CSS ช่วยในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารก็ทำได้ง่ายและรวดเร็ว
นอกจากนี้เราสามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร
CSS กับ HTML / XHTML นั้นทำหน้าที่คนละอย่างกัน โดย HTML /XHTML จะทำหน้าที่ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการแสดงผล ส่วน CSS จะทำหน้าที่ในการตกแต่งเอกสารให้สวยงาม
(เหมือนกับการแยกกันระหว่างส่วน Design กับ Coding)
ตัวอย่าง เอกสาร HTML กรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML เอง
<body>
<h1><font color=”red” face=”Arial”>วิธีดูแลรักษาสุขภาพ</font></h1>
<p><font color=”black” face=”Arial”><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</b></font></p>
<h1><font color=”red” face=”Arial”>วิธีกินผลไม้ที่ถูกต้อง</font></h1>
<p><font color=”black” face=”Arial”><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</b></font></p>
</body>
</html>
ตัวอย่าง เอกสาร HTML เมื่อเปลี่ยนมาใช้คำสั่ง style sheet ช่วยจัดรูปแบบการแสดงผลแทน จะช่วยลด code HTML ทำให้ code ดูสะอาดตา อ่านง่ายขึ้น
<body>
<head>
<style type=”text/css”>
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial; font-weight:bold }
</style>
</head>
<body>
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
</body>
</html>
สนใจบทเรียนออนไลน์สอน CSS คลิกอ่านได้ที่นี่ค่ะ
by enjoyday.net
1 ความคิดเห็น
Pingback: แนะนำเรื่อง CSS « TRI-EVALUATION