แนะนำให้รู้จักกับ CSS (Cascading Style Sheets) Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
Cascading Style Sheets(CSS) Microsoft internet explorer 3.0 และ Netscape 4.0 เป็นต้นมา เป็นวิธีการกำหนดการแสดงผลของสิ่งต่างๆบนเว็บเพจ เช่น การกำหนดลักษณะของ ลักษณะอักษรที่แสดง Heading ได้แก่ ฟอนต์ ขนาดตัวอักษร สีอักษร รวมถึงสีพื้นหลังด้วย ซึ่งคุณคงจะนึกออกว่าถ้าเราจะกำหนดลักษณะข้อความเช่นนี้เราต้องใช้ tag <font> ของ html นั่นเอง ดังนั้นเราจึงสามารถใช้ CSS แทน tag ต่างๆ ดังกล่าวของ html ได้เลย
เรากำหนดอะไรให้เอกสารด้วย CSS ได้บ้าง ลักษณะการแสดงผลของข้อความ การจัดตำแหน่งย่อหน้า(ขอบซ้ายขวาบนล่าง) สีสรรของหน้า ภาพฉากหลัง กรอบ ตาราง การพิมพ์ ลักษณะอื่น ๆที่ html ทำได้แต่ CSS สะดวกกว่า
ประโยชน์ของ CSS CSS มีคุณสมบัติมากกว่า tag ของ html เช่นการกำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของข้อความที่กล่าวมาแล้ว CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผลกับเอกสารทั้งหมด หมายถึงกำหนดครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมดทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวกไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมดได้
การกำหนดลักษณะใน CSS ตำแหน่งของ CSS ในเอกสาร html จะอยู่ตำแหน่ง ใดก็ได้ มีหลายจุดก็ได้แต่ส่วนใหญ่จะกำหนดไว้ที่ต้นเอกสาร ในส่วน <head> ใน tag <style>..</style> หรือกำหนดแบบอื่น
Cascading Style Sheets ประกอบด้วยส่วน ประกอบหลัก 3 ส่วนคือ Property คือคุณสมบัติของลักษณะที่จะกำหนด เช่น ลักษณะของสี ลักษณะของแบบอักษร เป็นต้น Dot ใช้สำหรับแยกระหว่าง property กับค่าหรือลักษณะของ property นั้น ๆ Value คือค่าหรือลักษณะของคุณสมบัติที่เรากำหนดให้แก่ property property และ value หลายอย่างสามารถกำหนดรวมกันไปได้โดยแยกแต่ละส่วนด้วย semi-colon รูปแบบ Property: value
ตัวอย่าง สมมุติเราต้องการกำหนดให้ฟอนต์เป็นสีน้ำเงินและใช้แบบอักษรเป็น sans-serif จะกำหนดได้ดังนี้ color:navy; font-family:sans-serif
รูปแบบ การกำหนดแต่ละลักษณะนั้นควรจะกำหนดชื่อหรือ ที่เรียกว่า selectors ซึ่งเราใช้อ้างถึงเวลาจะเรียกใช้ ลักษณะที่กำหนดไว้นั้น ซึ่งเริ่มด้วย ชื่อ(กำหนดได้เอง)+ วงเล็บปีกกา + ลักษณะที่กำหนด (แยกกันด้วย ";") HTML-TAG {property1:value1; property2:value2; ...}
เช่น เราต้องการกำหนดลักษณะของ <h1> เป็น มีขนาด 12 points ใช้ฟอนต์ sans-serif สามารถกำหนดได้ดังนี้ h1 {font-size: 12pt; font-family:sans-serif}
การกำหนดลักษณะหลาย ๆ อย่างไว้ใน style เดียวกัน สามารถทำได้โดยจัดกลุ่มได้โดยแยกแต่ละชุดด้วย comma เช่น h1 {font-family:sans-serif} h2 {font-family:sans-serif} h3 {font-family:sans-serif} h4 {font-family:sans-serif} รวมกันได้เป็น h1,h2,h3,h4 {font-family:sans-serif}
นอกจากนี้คุณสามารถกำหนดลักษณะเป็นสัดส่วนเฉพาะ ในสไตล์ใดสไตล์หนึ่งได้โดยแยกลักษณะนั้นด้วย ช่องว่าง (space) แทน comma เช่น เราต้องการเน้น ข้อความใน style <h1> โดยให้มีสีเป็นสีเขียวตัวเอนในระหว่าง tag <em>...</em> ก็ทำได้ดังนี้ h1 em {color:green}
ตัวอย่าง h1 em {color:green} เช่นเราพิมพ์ cascading <em>style</em>sheets ผลที่ได้จะเป็น cascading style sheets
กำหนดลักษณะเป็นของคุณเองโดยใช้ classes เราต้องการตัวเอนปกติเราใช้ <i>...</i>เราต้องการตัวหนาใช้ <b>...</b> ใน CSS อนุญาตให้เรากำหนดชื่อลักษณะตามที่ เราต้องการได้ เช่น กำหนด ชื่อลักษณะเป็น Myformat ก็สามารถทำได้โดย เริ่มด้วย "." (จุด) แล้วตามด้วยชื่อ แล้วตามด้วยลักษณะที่ต้องการกำหนด เช่นต้องการ กำหนดให้ Myformat ทำหน้าที่ควบคุมให้แสดง ข้อความสีแดง ก็ทำได้ดังนี้ .Myformat {color=red}
เมื่อนำ Class ไปใช้ก็ทำได้ดังนี้ <p class="Myformat">ข้อความ</p> คุณอาจจะสงสัยว่ากำหนดไปทำไมให้ยุ่งยากยาวกว่า <font color=red>....</font> เสียอีก คำตอบก็คือ ทุกตัวที่กำหนดเป็น Myformat จะเป็นตัวอักษรสีแดงหมด ทั่วทั้งเอกสารที่กำหนดเป็น Myformat จะเหมือนกันลดความยุ่งยาก เวลาจะแก้ไขสีก็แก้จุดเดียวที่กำหนดไว้นั่นเอง จะเห็นว่าไม่ต้องไล่หาแก้ทั่วทั้งเอกสารอย่าง html
ตัวอย่างการนำไปใช้ /* กำหนดให้ข้อความเป็นสีดำ*/ body { color:black; /* ให้สีฉากหลังข้อความเป็นสีขาว*/ background-color:white; /*ใช้ภาพ "sea.gif" เป็นฉากหลัง */ backgroundimage:url(http://samansk.cjb.net/ /images/sea.gif); /* กำหนดใช้ serifed font family */ font-family:serif; } /*จบลักษณะของ body*/ /* ระหว่างเครื่องหมายนี้เป็น comment ครับ browser จะไม่นำไปตีความหมาย*/ /* Unvisited links are blue */ a:link {color:blue} /* Visited links are purple */ a:visited {color:purple} /* Active links are red */ a:active {color:red}
การใช้ CSS ร่วมกับ html ทำได้ 3 ลักษณะ แบบที่ 1 Inline styles เช่น new "style=...." วิธีนี้ ไม่เป็นที่นิยมมากนักเพราะไม่ได้ลดความยุ่งยาก มากนักยังคล้าย html อยู่ เช่น /* แบบ inline style*/ <HTML> <BODY> <p style="color:red; font-family:sans-serif">ข้อความ </p> </BODY> </HTML> /* แบบ inline class */ .mywords {color:darkgreen; font-style:italic}
แบบนี้ยุ่งยากเพราะเวลาแก้ไขหรือปรับปรุงต้องทำหลายจุดเหมือนเดิม ยังวุ่นวายอยู่ เวลาต้องการนำ style ไปกำหนดตำแหน่งต่างๆ ใช้ tag <div> และ <span> เช่น <span style"color:green"> ข้อความ </span> การกำหนดลักษณะแบบนี้ทำได้ด้วย <div>และ<span> อย่างที่กล่าว ความแตกต่างระหว่างสองตัวนี้คือ <div> นั้น จะเว้นบรรทัดว่างก่อนและหลังข้อความ 1 บรรทัดครับ ซึ่งทั้งสองตัวนี้ใช้ได้กับทั้ง "style=" และ "class="
ตัวอย่าง <HTML> <BODY> <Form> เว็บ<SELECT style="FONT-SIZE: 10pt; WIDTH: 170px; BACKGROUND-COLOR: #FFCC66" onchange="window.open(this.options[this.selectedIndex].value,'_blank');selected=true" size=1 name=web1> <OPTION value="" selected>+++Plaese Selected+++</OPTION> <OPTION value=http://www.kapook.com>Kapook</OPTION> <OPTION value=http://www.sanook.com>Sanook</OPTION> <OPTION value=http://www.hunsa.com>Hunsa</OPTION> <OPTION value=http://www.Mornor.com>Mornor</OPTION> </SELECT> ชื่อ <Input Type="text" Name="FirstName" style="FONT-SIZE: 10pt; WIDTH: 170px; BACKGROUND-COLOR: #FF99CC" > </Form> </BODY> </HTML>
แบบที่ 2 Document style เช่น <style>...</style>แบบนี้ต้องกำหนดในส่วนของ <head>...</head>ซึ่งเวลาแก้ไขก็ทำที่นี่จุดเดียวทำให้สะดวกขึ้นมาก เช่น <html> <head> <title>document Title Here</title> <style TYPE="text/css"> <!-- /* ตัวอย่างเดิม- ซ่อนเพื่อไม่ให้ browser ที่ไม่สนับสนุน CSS มีปัญหา*/ h1,h2,h3 {font-family: sans-serif; color: green} /*แบบนี้เวลาแก้ แก้ที่นี่จุดเดียว*/ --> /* จบการซ่อนที่ตรงนี้*/ </style> </head> <body> <h1>Heading in green sans-serif text</h1> Other text here. </body> </html>
แบบที่ 3 External style sheet ลักษณะนี้กำหนด CSS ไว้อีกไฟล์หนึ่งแล้วเรียกใช้ด้วย tag <link> ในส่วนของ <head> ของเอกสาร การใช้แบบนี้ทำให้ใช้ร่วมกันได้กับ html หลายไฟล์ แต่จุดเสียของมันก็คือทำให้ browser ต้องโหลดถึงสองไฟล์คือ html หนึ่งกับ CSS อีกหนึ่ง ถ้าไฟล์ CSS คุณเสียหรือโหลดไม่ได้
ตัวอย่างการเรียกใช้CSSที่เก็บไว้ในไฟล์ share.css ไฟล์ชื่อ share.css (ต่อ) ในส่วน Class ชื่อ a body { margin-bottom: 0px; background-color: #CCFF99; .frame { border: 1px solid #2C2218; } .text1 { font-family: MS Sans Serif; font-size: 12px; color: #FF0000; font-weight: bold; .text2 { color: #0000FF; a:link { color: #FF00FF; font-family: MS Sans Serif; font-size: 12px; font-weight: bold; text-decoration: underline; } a:visited { font-style: normal; a:hover { color: #000000; font-variant: normal; text-decoration: none;
ตัวอย่างการเรียกใช้เก็บไว้ใน share.css ต่อ testCss.html <html> <head> <title>Document Title Here</title> <link REL="STYLESHEET" HREF="share.css" TYPE="text/css"> </head> <body> Welcome to<BR> <span class="text2">my website</span> <span class="text1">NU</span> <a href="#" class="a"> News</a> </body> </html> Output Welcome to my website NU News