ค่า value ของ property ใน css

ใน css property ใดๆก็ตาม มักจะมี rule ที่มีค่า (value) ต่างๆกันไปที่จะถูกนำเอาไปใช้ โดยที่จะมีเพียงค่าเดียวเท่านั้นที่จะได้นำไปใช้ ตามบทความก่อนที่ได้กล่าวเอาไว้แล้ว โดยค่าที่สามารถนำมาเป็น value ได้นั้นก็จะมีหลายแบบ ซึ่งอาจจะเป็นเลขคงที่ , ค่า%, URLs, สี และ property บางตัวก็รับได้มากกว่า 1 ค่าด้วย โดยเราจะมากล่าวถึงส่วนพื้นฐานกันในบทนี้

inherit หรือการสืบทอด
คุณสามารถใช้การสืบทอด ค่าจาก property ใดก็ได้ เมื่อคุณต้องการเขียน value ของ property อันใหม่ โดยที่ต้องการให้มีค่า value ที่เหมือนกันกับที่ parent ใช้งานอยู่

predefind values หรือ ค่าที่เป็นไปได้ สำหรับแต่ละ property
โดย css property หลายๆตัว จะมีค่าที่เรากำหนดได้หลายตัว เช่น ใน display property นั้น เราจะสามารถใส่ value ได้เป็น block, inline, list-item หรือ none เท่านั้น และความแตกต่างกับ XHTML ที่ css เวลาที่เราใส่ value นั้นเราไม่จำเป็นต้องครอบด้วย เครื่องหมาย “(quotation mark หรือ ฟันหนู)

border: none;
สิ่งเพิ่มเติมที่ 7.11 CSS property หลายตัวจะใส่ค่าได้เฉพาะที่เป็นไปได้เท่านั้น โดยกรณีนี้ เรากำหนดให้ border มีค่าเป็น none และสังเกตุได้ว่าจะไม่มี เครื่องหมาย ” ครอบเอาไว้

ค่าตายตัวและค่าเป็นอัตราส่วน
CSS property หลายๆตัวจะใส่ค่าตายตัวได้ ซึ่งค่นั้นจะต้องประกอบด้วย ค่าที่เป็นปริมาณ และหน่วยด้วยโดยไม่มีช่องว่างมาคั่นระหว่างค่ากับหน่วย เช่น 3em , 10px เป็นต้น แต่ก็มีการยกเว้นคือ 0 ไม่จำเป็นต้องใส่หน่วย

font-size: 24px;
สิ่งเพิ่มเติมที่ 7.12 ค่าตายตัวที่เราใช้กำหนดขนาดของ font โดยในที่นี้ มีค่า 24 และมีหน่วยเป็น px (pixel) โดยค่าและหน่วยไม่จำเป็นต้องมีช่องว่างคั่น

นอกจากค่าที่ตายตัวที่เห็นนี้แล้วยังมีค่าที่แปรผันได้อีกด้วย? นั่นคือ em โดย em จะเป็นจำนวนเท่าของ ปรกติ เช่น 2em ก็คือ ขนาด2เท่าของ font size นั่นเอง (เมื่อ em ถูกใช้set ค่า จะไปนำเอาค่าของ parent มาคำนวน แล้วกำหนดเข้าไปในจุดที่เรียกใช้ em เท่านั้น) โดย ex เป็นจำนวนเท่าของความสูงของ font ที่เป็น x-height? โดย ตัวหนังสือ x คือความสูงของ font แต่ก็ไม่เป็นแบบนี้ตลอด

Pixels (px) จะแปรผันไปตามขนาดของความละเอียดของหน้าจอ ไม่ใช่หน่วยวัด โดยปรกติของหน้าจอในตอนนี้จะมีขนาดประมาณ 80 pixel ต่อนิ้ว (ปรกติอยู่ที่ 72-96 pixel ต่อนิ้ว) ดังนั้น เรากำหนดว่า 16 pixels ก็หมายความว่า 1/5 ของนิ้ว หรือประมาณ 0.5 เซ็นติเมตรนั่นเอง

แต่ก็ยังมีหน่วยใหญ่ ที่เป็นขนาดที่อธิบายได้ชัดเจน นั่นคือการใช้ หน่วยเป็น นิ้ว inches(in) เซ็นติเมตร centimeters (cm) มิลลิเมตร (mm) จุด points (pt) และ picas(แบบตัวพิมพ์12point) (pc) ซึ่งโดยปรกติแล้วเราจะใช้ค่าเหล่านี้ กับส่วนการแสดงผลที่รู้และกำหนดแน่ชัดเลย (สำหรับ print ด้วย)

ค่าที่เป็น อัตราส่วน % ทำงานเหมือนกันกับ em ที่จะเป็นอัตราส่วนของค่าอื่นอีกที

font-size: 80%;
สิ่งเพิ่มเติมที่ 7.13 ค่าอัตราส่วน % ที่จะสัมพันธ์กับค่าของ parent ในกรณีนี้ ขนาดของ font จะเป็น 80% ของ font ที่ระบุใน parent

ค่าที่เป็นตัวเลขเปล่าๆ
CSS property หลายตัวสามารถรับตัวเลขจากค่า form ได้ โดยที่ไม่มีหน่วยกำกับไว้ เช่น 3?? ซึ่งเป็นค่าปรกติของ line-height และ z-index ก็สามารถใช้ได้ไม่มีปัญหา แต่ว่า property ตัวอื่นๆอีกหลายตัว ไม่รองรับการใส่ตัวเลขเปล่าๆ

URLs
CSS property บางตัวก็รองรับการ input เป็น URL ที่เรียกใช้ file อื่นด้วย โดยในกรณีนี้ จะใช้ url (file.ext) โดยที่ file.ext หรือ path และชื่อพร้อมนามสกุลของไฟล์นั้น? ข้อความจำถ้าใช้ relative ก็คือการที่เป็น relative กับตัวตำแหน่งที่เก็บ CSS เท่านั้นไม่ใช่ relative กับหน้า XHTML ที่เรียกใช้

background: url(bg_flag.jpg);
สิ่งเพิ่มเติมที่ 7.14 การเขียนเพื่อเรียก ไฟล์ที่ชื่อ bg_flag.jpg มาเป็น background

คุณไม่จำเป็นที่จะต้องใช้ ฟันหนู (quotation mark) มาครอบชื่อไฟล์ เพราะว่ามันไม่จำเป็น และจะต้องไม่มีช่องว่างระหว่าง url และเครื่องหมาย (?? แต่ว่าเราใส่ช่องว่างระหว่างเครื่องหมาย ( กับชื่อไฟล์ได้แต่ว่าก็ไม่จำเป็น

สี กับ CSS
มีการกำหนดสีให้กับ CSS ได้หลายแบบ แบบแรกที่ง่ายที่สุด นั่นก็คือการใส่ชื่อสีเข้าไปเลย โดยตามมาตรฐานสีทั้ง 16 สี ที่มีชื่อระบุเอาไว้แล้ว

ตารางสี
สิ่งเพิ่มเติมที่ 7.15 ตารางสีทั้ง 16 ที่มีชื่อกำกับเอาไว้แล้ว โดยเลขที่เป็น ฐาน16 และชื่อสีนั้น ไม่เป็น case-sensitive และก็ไม่สามารถนำไปใช้ใน XHTML ได้ (ใช้ได้ในส่วนของ CSS อย่างเดียว)

นอกจากสีที่มีเหล่านี้แล้วคุณยังผสมสีขึ้นมาได้เองอีก โดยอาศัยการระบุค่าของ สีแดง สีเขียว สีน้ำเงิน (red,green,blue) โดยสามารถใส่เป็นองค์ประกอบของอัตราส่วนของแต่ละสี มีค่าได้ตั้งแต่ 0- 255 หรือใส่เป็นเลขฐาน 16 ก็ได้ ตัวอย่างเช่น เราจะสร้างสีม่วงแก่ โดยจะใช้ สีแดง 35% สีเขียว 0% สีน้ำเงิน 50% เราจะเขียนได้ว่า rgb(35%, 0%, 50%)? ถ้าคุณใช้ค่าตัวเลขก็ต้องใส่ให้เหมือนกันหมด เช่น rgb(89, 0, 127) โดย 89 คือ35% ของ 255 และ 127 คือ 50% ของ 255 นั่นเอง

color: rgb(35%, 0%, 50%);
สิ่งเพิ่มเติมที่ 7.16 การเขียนสีม่วงแก่ ที่เกิดจากการผสมสีทั้งสามสี โดยตำแหน่งแรกคือค่าความเข้มสี สีแดง และต่อมาคือสีเขียว และม่วงตามลำดับ ค่าน้อยคือมีสีนั้นน้อย

color: #59007F
สิ่งเพิ่มเติมที่ 7.17 ค่าสีที่ใช้กันเป็นปรกติทั้งใน XHTML และ CSS โดยที่จะเป็นการบอกค่าสีออกมาเป็นเลขฐาน16 เรียงตามสี แดง เขียว น้ำเงิน (อย่างละ 2 ตัว)

และถ้าต้องการประหยัดตัวอักษรขึ้นอีก ทำได้ด้วยการจับคู่สี ตัวอย่างเช่น สี #ff3344 เราจะย่อได้เหลือเพียงแค่ #f34 เท่านั้น (ใช้ได้กับค่าสีที่ตัวอักษรซ้ำทั้ง3ชุดเท่านั้น)

โปรแกรมจัดการรูปโดยทั่วไป เช่น photoshop และ photoshop element ก็จะมีให้เราเลือกสีโดยจะแสดงค่าสีออกมาเป็นเลขฐาน16ด้วยเช่นกัน

No comments yet.
You must be logged in to post a comment.