Share tips.

tips.html

Cascading Style Sheets : CSS คืออะไร

CSS ถูกนำมาใช้ตั้งแต่ปี 1997 เป็นมาตราฐานของ W3C ที่กำหนดขึ้นมา เพื่อใช้ในจัดรูปแบบหน้าเว็บเพจ (Web page) โดยเฉพาะ และจะเข้ามาช่วยเพิ่มขีดความสามารถให้กับภาษา HTML ที่เราใช้งานกันอยู่ในปัจจุบัน

มาตรฐานของ CSS
  • มาตรฐานที่ 1 หรือ Cascading Style Sheets Level 1 : CSS1 คือมาตรฐานแรกที่ใช้จัดรูปแบบของเว็บเพจ ได้แก่ คุณสมบัติ(Properties) พื้นฐาน เช่น Font, Color, Margin และ Padding เป็นต้น
  • มาตรฐานที่ 2 หรือ Cascading Style Sheets Level 2 : CSS2 คือการนำมาตรฐานที่ 1 มาเพิ่มขีดความสามารถในด้านการจัดตำแหน่งด้วย Float และ Position เป็นต้น
  • มาตรฐานที่ 3 หรือ Cascading Style Sheets Level 3 : CSS3 คือมาตราฐานใหม่ที่เริ่มใช้ตั้งแต่ปี 2006 ซึ่งทำให้สามารถพัฒนาเว็บเพจได้รวดเร็วมากขึ้นและที่สำคัญบราวเซอร์(Browser)ในปัจจุบันก็รองรับมาตราฐานนี้ด้วย

รูปแบบการกำหนด CSS กับ Web page
  • Selector คือ แท็ก HTML,  id และ class ที่ต้องการกำหนด style sheets
  • Declaration ใช้สำหรับระบุบค่าให้กับ Selector มี 2 ส่วนคือ
    1. Property คือ คุณสมบัติหรือรูปแบบทึ่ต้องการกำหนดให้กับ Selector
    2. Value คือ ค่าที่กำหนดให้กับ Property

รูปแบบ  Selector { Property1: Value1; Property2: Value2....Propertyn: Valuen; }
ตัวอย่าง
h1 { background: #000000; border: #0FE10E; color: #FF0000; font-size: 36px; font-weight: bold; }

รหัส Code Color

การประกาศแบบ id และ class

คือการกำหนดค่าของ id และ class เป็น Selector เพื่อให้แท็ก HTML นำ style sheet นี้ไปใช้แสดงผล

/* Syntex HTML id(#) */
#test { color: #FFFF00; background: #000000; }

/* Syntex HTML class(.) */
.test { color: #FF0000; background: #000000; }

ตัวอย่างการนำ CSS ไปใช้งาน
style.css
#test { color: #FFFF00; background: #000000; }
.test  { color: #FF0000; background: #000000; }
example.html
<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>      
<div id="test">Text id Color</div>
<div class="test">Text class Color</div>
<div class="test">Text class Color</div>
</body>
</html>
ผลลัพธ์
Text id Color
Text class Color
Text class Color

แบบ id จะมีใน Selector ได้เพียง 1ค่าเท่านั้น ส่วนแบบ class จะมีใน Selector ได้กี่ตัวก็ได้

ในปัจจุบันนิยมแยกไฟล์นามสกุล .css ไว้ต่างหาก เพื่อให้ง่ายต่อการแก้ไขและดูเป็นสัดส่วนหรือ  OOP

8 ตุลาคม 2554 13:43:00