แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)

แนะนำให้รู้จักกับ CSS(Cascading Style Sheets) อ. นัฐพงศ์ ส่งเนียม http://www.siam2dev.com xnattapong@hotmail.com ม. ราชภัฏพระนคร

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 อยู่ เช่น • <p style="color:red; font-family:sans-serif">ข้อความ </p> /* แบบ inline style*/ • .mywords {color:darkgreen; font-style:italic} /* แบบ inline class */

แบบนี้ยุ่งยากเพราะเวลาแก้ไขหรือปรับปรุงต้องทำหลายจุดเหมือนเดิมยังวุ่นวายอยู่เวลาต้องการนำ style ไปกำหนดตำแหน่งต่างๆ ใช้ tag <div> และ <span> เช่น<span style"color:green"> ข้อความ </span> • การกำหนดลักษณะแบบนี้ทำได้ด้วย <div>และ<span>อย่างที่กล่าว ความแตกต่างระหว่างสองตัวนี้คือ <div> นั้นจะเว้นบรรทัดว่างก่อนและหลังข้อความ 1 บรรทัดครับซึ่งทั้งสองตัวนี้ใช้ได้กับทั้ง "style=" และ "class="

แบบที่ 2 Document style • เช่น <style>...</style>แบบนี้ต้องกำหนดในส่วนของ <head>...</head>ซึ่งเวลาแก้ไขก็ทำที่นี่จุดเดียวทำให้สะดวกขึ้นมากเช่น <html> <head><title>document Title Here</title> <style TYPE="text/css">  /* จบการซ่อนที่ตรงนี้*/</style> </head> <body><h1>Heading in navy sans-serif text</h1> Other text here. </body> </html>

แบบที่ 3 External style sheet • ลักษณะนี้กำหนด CSS ไว้อีกไฟล์หนึ่งต่างหากแล้วเรียกใช้ด้วย tag <link> ในส่วนของ <head> ของเอกสารเช่นกัน การใช้แบบนี้ทำให้ใช้ร่วมกันได้กับ html หลายไฟล์ แต่จุดเสียของมันก็คือทำให้ browser ต้องโหลดถึงสองไฟล์คือ html หนึ่งกับ CSS อีกหนึ่ง ถ้าไฟล์ CSS คุณเสียหรือโหลดไม่ได้ • Browser บางตัวก็จะไม่แสดงเอกสาร html ไปด้วย เช่นคุณเก็บ CSS ไว้ในไฟล์ชื่อshare.cssเวลาเรียกใช้ก็จะต้องใช้แบบนี้

<html><head><title>Document Title Here</title><link REL="STYLESHEET" HREF="share.css" TYPE="text/css"> </head> <body> Document Body Here </body> </html>

แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)