รูปภาพจาก http://blog.designingstudios.com/
CSS (Cascading Style Sheets) เป็นภาษาที่ถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งหน้า Web ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง และอื่นๆ ได้อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <div>,<span> เป็นต้น
ประโยชน์ของ CSS
1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่ง Web site ทำให้ code ภายใน หน้า HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขทำได้ง่ายและรวดเร็ว2. เมื่อ code ภายในไฟล์ HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับหน้า HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทุกไฟล์
4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser
5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน
6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่ง Web page นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับ HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี
ตัวอย่างการทำงาน
test.css File
.text-style{font-size: 10px;color: blue;font-weight: normal;}
.text-style{font-size: 10px;color: blue;font-weight: normal;}
test.html File
<html>
<head><link href="test.css" rel="test" type="text/css"></head>
<body>
<span class="text-style">Hello Blue</span>
</body>
</html>
<html>
<head><link href="test.css" rel="test" type="text/css"></head>
<body>
<span class="text-style">Hello Blue</span>
</body>
</html>
จากตัวอย่างด้านบนจะเห็นว่าเราสามารถอ้างอิงชื่อ class โดยการกำหนดชื่อ class ที่ attribute class ของ tag html ได้เลย ถ้าเป็น id ในไฟล์ CSS จะเป็น #test{...} และในไฟล์ html จะอ้างถึงโดย <span id="test">...</span> เป็นต้น บทความนี้ก็เพียงแค่แนะนำว่า CSS คืออะไร ทำความรู้จักกับ CSS ,รู้ประโยชน์ของ CSS และตัวอย่างการใช้งานนิดหน่อย จะมีเสริมเรื่อง CSS ในบทความหน้าครับผม สวัสดีครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น