What is CSS? CSS (Cascading Style Sheet) ซึ่งเราจะใช้ CSS เพื่อให้แก้ไขคุณสมบัติ ของเว็บเพจ ให้มีหน้าตา สีสันหรือรูปแบบเป็นไปตามที่ต้องการ CSS มีลักษณะคล้ายหน้ากาก สำหรับเปลี่ยนรูปร่างหน้าตาของเว็บเพจให้ มีรูปแบบที่ต่างออกไป เช่น การเปลี่ยนสีสัน การจัดวางข้อความ รูปแบบ ตัวอักษรที่ใช้ ตำแหน่งของรูปภาพ ระยะห่างจากขอบเว็บเพจ ฯลสรุปก็คือ เว็บเพจเดียวกัน หากมีการใช้ CSS ที่ต่างกันของรูปร่างหน้าตาก็จะ มีผลลัพธ์ที่ต่างออกไป
ประวัติและความเป็นมา ของ CSS การแสดงผลของ CSS นั้นขึ้นอยู่กับคนเขียนเว็บ web browser ที่ตอนนั้นคนรู้จัก ยังน้อย และไม่ได้รับความนิยม ปี 2539 ได้ประกาศใช้ CSS1 อย่างเป็นทางการ เสร็จในธันวาคมปีนั้น วันที่ 4 พฤศจิกายน 2540 ได้สร้างออกมาเป็น CSS2 และถูกเผยแพร่ โดย W3C เมื่อ 12 พฤษภาคม 2541 โดย CSS3 ก็เริ่มพัฒนาในปี 2541 และก็ยังพัฒนากันจนถึงปี 2552 ในปี 2548 กลุ่มที่ดูแล CSS ได้ทำการปรับปรุง CSS ให้มีข้อกำหนดที่เจาะจงมากขึ้น ดังนั้น เลยทำให้ มาตรฐานที่ประกาศไปแล้วก็คือ CSS 2.1 และ CSS 3 Selector และ CSS 3 Text ถูกเปลี่ยนจาก Candidate Recommendation กลับไปเป็น Working Draft อีกครั้งหนึ่ง
CSS 3 (CSS Level 3) ยังอยู่ในขั้นตอนการพัฒนาโดย WC3 แต่ในบางคุณสมบัติก็อาจจะกล่าวได้ว่าเป็นมาตรฐานไปแล้ว เพราะบราวเซอร์ชั้นนำ ไม่ว่าจะเป็น IE , Firefox , Safari , Chome หรือ Opera ได้บรรจุคุณสมบัติหลายอย่างของ CSS3 ไว้ใน บราวเซอร์ของตน นั่นหมายความว่า เราสามารถเขียนโค้ด CSS3 แล้วนำไปใช้กับบราวเซอร์รุ่นใหม่ๆได้แล้ว
ประโยชน์ของ CSS3 การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือ เพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและ รวดเร็ว เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์ โหลดได้เร็ว สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้ มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือ ปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร
ประโยชน์ของ CSS3 สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่า จะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือ บน PDA โดยที่เป็นเนื้อหาเดียวกัน ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร 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>
</body> </html> ตัวอย่าง เมื่อเปลี่ยนมาใช้คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น <html><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>
การอ่าน และ การเรียกชื่อ CSS3 Selectors หมวดหมู่ของ CSS3 Selectors ที่มีอยู่ในปัจจุบันนั้น W3C ได้แยกออกจากกัน หลากหลายรูปแบบ และปรับเปลี่ยนโยกย้ายกลุ่มมากไปพอสมควรจาก CSS2.1 การเรียกชื่อหลักๆ ของ Selectors CSS3 ได้แยกแยะหมวดหมู่ของ Selectors ที่ เอาไว้ใช้งานหลักๆ เป็น 4กลุ่ม คือ 1. Group of selectors 2. Simple Selectors 3. Pseudo-elements 4. Combinators
Group of Selectors คือ การรวม Selectorsของ CSSหลายหลายอันเข้ามาอยู่ด้วยกัน โดยใช้ เครื่องหมาย "จุลภาค" หรือเรียกว่า "ลูกน้ำ" หรือ ภาษาอังกฤษ เรียก Comma ( , )เช่น หมายถึง ให้ a และ "อะไรก็ตามที่มี class เท่ากับ "ต้นไม้" และ strong มีตัวหนังสือที่มีค่าสีเท่ากับรหัส RGB 255,255,255 (สีขาว) หรือเป็นการนำเอา ชุดของ Selectorที่มีตั้งแต่ สองชุดขึ้นไปมารวมกัน เพื่อสั่งงานให้ทำงานใน Moduleเดียวกัน
1. Type Selectors Type Selectors คือ ชื่อของ Element ของภาษาที่ CSS นี้สั่งงานอยู่ เช่น ถ้าเป็น Xhtml เราสังเกตเวลาเขียน h1 {font-size: 18px;} h1นั่นก็ คือ type selector ที่บอกว่า "Element ของภาษาที่ CSS นี้สั่งงานอยู่" ก็เพราะว่า ภาษา CSS ไม่ได้มีความสมมารถแค่เพียงจัดหน้าให้กับ HTML อย่างเดียว เท่านั้น บางครั้งเราเขียน CSS เพื่อจัดหน้า SVG หรือ XML
2. Universal Selector Universal Selector หมายความ ได้ว่า "อะไรก็ตาม" ที่เราเห็นเป็นรูปร่างใน Selector คือ เครื่องหมาย "ดอกจัน" ( * )รหัส [U+002A] หลายๆ คนที่เคยใช้เอาไว้ Reset ค่า CSS ให้เป็น 0 เช่น * {padding: 0;} คือ ทุกๆ อย่าง ให้มี padding ทั้ง 4ด้าน เป็น ศูนย์ 2.1 Attribute Selectors Attribute Selectors ของ CSS3ได้แบ่งย่อยออกเป็น 2กลุ่ม กลุ่มแรก คือ การ กล่าวถึง "ค่าของ Attribute“ กันตรงๆ และ กลุ่มที่สอง คือ การกล่าวถึง "ค่า ของ Attribute"เป็นบางส่วน
2.1.1 [attribute] หรือ เวลาเรานำมาเขียนจริง h1[id] {}หรือ a[rel] {color: red;} หมายถึง ให้กระทำ การแสดงผล อะไรก็ตามที่มี Attributeข้างต้น 2.1.2 [attribute="value"] คือ Element ใดๆ ก็ตามที่มี attribute ซึ่ง "มีค่า" เท่ากับที่กล่าวมา เช่น อ่านว่า จงทำ blockqoute ที่มี title เท่ากับ "สมพร" ให้มี สีพื้นหลัง เท่ากับ รหัส rgb 50,50,50และมีค่า โปร่งแสงที่ 0.5
ถ้าเรามี HTMLในลักษณะนี้ เราสามารถเขียน CSSได้ในรูปแบบนี้ อ่านว่า ให้กระทำการ "ใส่ เส้นขอบ ที่มีค่าสี hue = 30, saturation=100%, lightnes=20%"กับ "imgที่มี alt attribute ซึ่งมีคำว่า "ดวงจันทร์" ที่ถูกคั่นจากคำอื่นๆ ด้วยช่องว่าง"
Pseudo-elements ::first-line คือ แถวแรก ::first-letter คือ ตัวแรก ::before คือ ก่อน (x) ::after คือ หลัง (x) ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้คือการจัดการหน้าเอกสารใน รูปแบบ นิตยสารออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับสื่อสิ่งพิมพ์ หรือจัด หน้าให้กับ Printer CSS จึงมี Selectors เหล่านี้ไว้จัดการกับหน้าเอกสาร ให้ลองนึกสภาพว่า เรา กำลังนั่งจัดหน้าหนังสือพิมพ์อยู่
โคล่อน (::) สองอัน กับ โคล่อน (:) อันเดียวมันต่างกันยังไง โคล่อนอันเดียว คือ CSS2 ซึ่งใช้ทั้ง pseudo-classes และ pseudo- elements โคล่อนสองอัน คือ CSS3 และใช้กับ pseudo-elements อย่างเดียว นั่นแสดงว่า ใน CSS3 ถ้าเจอ :foo มันคือ pseudo-classes ถ้าเจอ ::bar มันคือ pseudo-elements
การกำหนดเงาด้วย text-shadow ชื่อ text-shadow ที่ปรากฏใน CSS3 นั้นสามารถใส่เงาได้อย่างเดียว หรือหลายๆเงาก็ได้วิธีการกำหนดเงาให้กับข้อความทำได้ด้วยการ กำหนดค่าให้กับ 4 ส่วน ได้แก่ Horizontal Offset , Vertical Offset , Blur และ Color ความหมาย ก็คือ กำหนดระยะห่างของเงาในแนวนอน ระยะห่างของ เงาในแนวตั้ง ค่าความเบลอของเงา และสีของเงา ตามลำดับ
การกำหนดเงาด้วย text-shadow (ต่อ) <head> <meta charset='UTF-8'> <style> tr:first-child { background-color: blue; color: white; } h2 { text-shadow: 3px 4px 5px #666; } </style></head> </html> จากตัวอย่างโค้ดข้างต้นนั้นเป็นการกำหนดให้เงาทอดไปทางขวา 3px แล้วเลื่อนไป ด้านล่าง 4px โดยมีค่าความเบลอของเงาที่ 5px ส่วนสีที่ใช้คือ #666 a
สำหรับการทำให้ข้อความเป็นรอยจารึกที่มีลักษณะรอยบุ๋มลงไป (engrave) เราสามารถกำหนดค่า โดยมีหลักการ คือ ใช้ตัวอักษรให้มีสีเข้ม กว่าพื้น และกำหนดเงาไว้ด้านล่างให้มีสีอ่อนกว่าตัวอักษร ดังตัวอย่าง ต่อไปนี้ CELL TEST h2 { color: #444; background-color: #999; text-shadow: 0px 1px 0px #e7e7e7; }
และ ถ้าต้องการให้ข้อมูลนุนออกมา (emboss) ให้กำหนดค่า โดยมีหลักการคือใช้ตัวอักษรสีอ่อนกว่าพื้นและกำหนดเงาไว้ด้านล่าง โดยให้มีสีเข้มกว่าพื้น ดังตัวอย่างต่อไปนี้ CELL TEST h2 { color: #ddd; background-color: #444; text-shadow: 0px 2px 1px #111 }
CCS3 Background สามารถระบุ ขนาดของพื้นหลัง ได้ CSS3 ช่วยให้เราสามารถ ใช้ภาพพิ้นหลังที่แตกต่างกันในแต่ละพิ้นที่ โดยสามารถระบุขนาดพิกเซล หรือ ในอัตราร้อยละ ถ้าระบุขนาดเป็นเปอร์เซ็นต์ ขนาดจะสัมพันธ์กับความกว้างและความสูงของ ตัวอักษร Example ขนาด80x60px div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Old Firefox */ background-size:80px 60px; background-repeat:no-repeat; }
CSS3 Transitions ด้วย CSS3 เราสามารถเพิ่มทำภาพเคลื่อนไหวจากรูปแบบหนึ่งไปยังอีก แบบ โดยไม่ต้องใช้ Flash หรือ JavaScripts การทำงาน CSS3 ช่วยให้รูปภาพค่อยๆเปลี่ยนจากรูปแบบหนึ่งไปยังอีก จะทำแบบนี้ต้องระบุ 2 อย่าง 1. ระบุคุณสมบัติ CSS ที่คุณต้องการเพิ่มลักษณะพิเศษ 2. ระบุระยะเวลาของผลกระทบ
CSS3 Transitions (ต่อ) ตัวอย่าง div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } Note : หากไม่ได้ระบุเวลาการเปลื่ยนแปลงจะไม่มีผลกระทบเนื่องจากค่าเริ่มต้นเป็น 0 - div:hover { width:300px; }
สีที่สนับสนุน โดยเบราว์เซอร์ 147 ชื่อสีที่กำหนดไว้ใน HTML และ CSS โดยกำหนดด้วย ค่าฐานสิบหก 17 สีมาตรฐาน ได้แก่ Aqua, สีดำ, สีฟ้า, สีแดงม่วง, สีเทา, สีเทา, สีเขียว, น้ำตาลแดง, น้ำเงิน, สีม่วง, สี แดง, สีเงิน, สีขาว,สีเหลือง,ฯลฯ เช่น ชื่อสี โค้ส สี Blue #0000FF Brown #A52A2A Orange #FFA500 YellowGreen #9ACD32
หน่วยการวัดค่าใน CSS หน่วย ลักษณะ ร้อยละ นิ้ว มิลลิเมตร % In Mm em px ร้อยละ นิ้ว มิลลิเมตร 1em มีค่าเท่ากับขนาดตัวอักษรปัจจุบัน 2em หมายถึง 2 ครั้งขนาดของตัวอักษรในปัจจุบัน เช่น ถ้า element ที่ต้องการแสดงด้วยตัวอักษร 12 จุดแล้ว 2 em ‘จะ เป็น 24 จุด 'em' เป็นหน่วยที่มีประโยชน์มากใน CSS เพราะมันสามารถ ปรับโดยอัตโนมัติ pixel เทียบกับหน้าจอ
เลข 3 คือแบ่งทั้งหมด 3 คอลัมน์ CSS3 Multiple Columns ด้วย CSS3 สามารถสร้างหลายคอลัมน์ เหมือนหนังสือพิมพ์ ระบุจำนวนคอลัมน์ข้อความที่ต้องการจะแบ่ง Example div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis เลข 3 คือแบ่งทั้งหมด 3 คอลัมน์
CSS3 ระบุช่องว่างระหว่างคอลัมน์ สามารถ ระบุช่องว่างระหว่าง คอลัมน์ Example div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } เลข 40 คือความห่างของแต่ละคอลัมน์