พื้นฐาน CSS กับ Value

ก่อนนจะอ่านเรื่อง Property มาดูเรื่องนี้กันก่อน เพราะ Property นั้นมันเยอะมาก … value คือค่าของ Property ซึ่งเป็นตัวกำหนดจำนวน หรือค่า ว่าจะให้มากน้อย มีอะไรเป็นเท่าไหร่เช่น จะให้กว้างเท่าไหร่ สูงเท่าไหร่ ค่าสีอะไร ประมาณนี้ โดยมีหน่วยต่างๆ ดังนี้

% – percent ก็ขนาดเป็นเปอร์เซ็นอ่ะ ตัวอย่าง 50%
in – inch ขนาดเป็นนิ้วอ่ะ ตัวอย่าง 2in
cm – เซนติเมตร ตัวอย่าง 1cm
mm – มิลลิเมตร ตัวอย่าง 5mm
em – ขนาดตัวอักษร โดย 1em จะเท่ากับขนาด font ปกติ แต่ถ้าเป็น 2em ก็คือขนาดอักษรใหญ่กว่า font ปกติ 2 เท่า
ex – ความสูงของตัวอักษร
pt – points โดย 1pt เท่ากับ 1/72 นิ้ว
pc – picas โดย 1pt เท่ากับ 12pt
px – พิกเซล ขนาดอิงความละเอียดของจอภาพ

นอกจากนี้ยังมีค่าสีอีก โดยจะมี 2 แบบคือ กำหนดเป็นตัวอักษร กับรหัสสี

1. ตัวอักษร
โดยมี 17 สีมาตรฐาน และเพิ่มเติมอีก 123 สี
17 สีนั้นมี aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, และ yellow
ส่วนอีก 123 ดูได้จาก http://www.w3schools.com/cssref/css_colornames.asp
ตัวอย่าง
color:red;
colorgreen;

2.รหัสสี

ซึ่ง CSS รองรับรูปแบบสีอยู่หลายรูปแบบเหมือนกัน คือ

1. RGB – การผสมระหว่าง 3 สี คือ แดง เขียว น้ำเงิน ในปริมาณที่ต่างกันไป
ตัวอย่าง
color:#FF0000;
color:rgb(255,0,0);

2. RGBA – RGB เหมือนข้างบน แต่เพิ่ม Alpha ความโปร่งแสงเข้ามาด้วย
ตัวอย่าง
color:rgba(255,0,0,0.3);

3. HSL
Hue คือค่าสีหลัก ถูกแทนด้วยองศา 0 ถึง 360 องศา
Saturation คือความอิ่มของสี หรือความสดนั่นแหละ โดยค่าจะถูกแทนด้วย 0 ถึง 100 % โดยถ้าเป็น 0% สีมันก็จะจางๆ จืด ถ้าเป็น 100% สีมันก็จะเข้ม
Lightness คือความสว่างของสี แทนด้วย 0% ถึง 100% ถ้าค่านี้อยู่ที่ 0 ก็จะมืดเป็นสีดำ ถ้าเพิ่มขึ้นเรื่อยๆ จนค่าเป็น 100% สีก็จะสว่าง
ตัวอย่าง
color:hsl(120,100%,50%);

4. HSLA – ก็เหมือน HSL แต่เพิ่ม Alpha ความโปร่งใสเข้ามา
ตัวอย่าง
hsla(120,100%,50%,0.3);

ตัวอย่างการใช้งาน
value จะกำหนดไว้หลัง property เช่น

#menu {
font-family: “Times New Roman”, Georgia, Serif;
width:100%;
height:25px;
color: #F00;
}

ประมาณนี้แล…Zzz

Ref.
http://www.w3schools.com/cssref/css_colornames.asp
http://www.w3schools.com/cssref/css_colors.asp
http://www.w3schools.com/cssref/css_units.asp