เข้าสู่ระบบ | สมัครสมาชิก
100Y DESiGN

WEBSITE GRAPHIC DESIGN

css คืออะไร จำเป็นแค่ไหนกับการทำเว็บไซต์ลองมาดูกัน css อีกหนึ่งภาษาคำสั่งที่มีความจำเป็นอย่างมากในการทำเว็บไซต์ในยุคนี้ เพื่อเว็บไซต์ดีไซน์ที่มีประสิทธิภาพมากยิ่งขึ้น
เขียนโดย 100Y Design | 14 กันยายน 2554 เวลา 17:36:32 น. | ผู้เข้าชม 3315 ครั้ง


อธิบายง่ายๆ เลยไม่ต้องมาทฤษฏีมาก CSS (Cascading Style Sheet) คือคำสั่งที่ใช้ร่วมกับ html เพื่อควบคุม การแสดงผลของเว็บไซต์ ประโยชน์เพื่อให้เว็บไซต์ทำงานได้เร็วขึ้นและเป็นผลดีกับการทำ SEO การใช้ CSS ควบคุมหน้าตาเว็บไซต์ เช่น การกำหนดสี Background, กำหนดสีตัวอักษร, กำหนดขนาดต่างๆ รูป หรือตัวอักษร, ปรับแต่ง จัดตำแหน่งองค์ประกอบในหน้าเว็บไซต์

ประโยชน์ของ CSS

1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว

2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว

3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร

4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser

5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน

6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี

ตัวอย่าง กรณีที่จัดรูปแบบการแสดงผลด้วยภาษา 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>

ตัวอย่าง เมื่อเปลี่ยนมาใช้ คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^

<html>
<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>

แล้วเดียวค่อยมาศึกษาลึก หรืออยากรู้อะไรก็ถามมาแล้วกัน
 

บทความ แนะนำ

Comment สำหรับสมาชิก 100Y Design.com เท่านั้น
กรอกรหัส =>
คำถามที่ต้องการคำตอบ แสดงความคิดเห็นธรรมดา
ไม่สามารถส่งข้อความได้ กรุณา เข้าสู่ระบบ หรือ สมัครสมาชิก
หมายเหตุ ระบบ Comment สำหรับสมาชิก จะทำให้ทีมงานของทางเว็บไซต์ทราบทันที่เมื่อมีสมาชิกฝากข้อความ หรือตั้งคำถามที่ต้องการคำตอบ ทางทีมงานจะพยายามหาคำตอบเพื่อที่มาตอบคำถามให้เร็วที่สุด
Comment สำหรับสมาชิก Facebook