Templates by BIGtheme NET

CSS คืออะไร



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  เอง

<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 ดูสะอาดตา อ่านง่ายขึ้น

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

คุณอาจสนใจเรื่องนี้

Blog คืออะไร

คิดว่าในปัจจุบัน คนส่วนใหญ่น่าจะรู้จัก Blog กันอยู่แล้ว แต่สำหรับมือใหม่ ถ้ายังไม่รู้จัก ก็มารู้จักกันในบทความนี้เลยค่ะ Blog (มาจากศัพท์คำว่า Weblog)   เป็นเว็บไซต์รูปแบบหนึ่ง ที่มีระบบจัดการให้เราสามารถเขียนเรื่องต่างๆ ไม่ว่าจะเป็นเรื่องราวส่วนตัว ข่าว หรือบทความเฉพาะด้านต่างๆ ...

1 ความคิดเห็น

Leave a Reply

Your email address will not be published. Required fields are marked *