การเขียน css ใน HTML







 
CSS คือภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML คำว่า CSS ย่อมาจาก Cascading Style Sheets (อาจเรียกว่า สไตล์ชีท หรือซีเอสเอส ก็ได้) เป็นภาษาที่มีรูปแบบการเขียน (Syntax) ที่เฉพาะ ซึ่งกำหนดมาตรฐานโดยองค์กร W3C (World Wide Web Consortium) 
เมื่อเราทราบแล้วว่าการเขียน CSS สามารถทำให้เว็บเพจของเราดูสวยงามขึ้น ขั้นตอนต่อไปคือวิธีการเขียน CSS ใน HTML , รูปแบบคำสั่ง CSS , และการนำไปประยุกต์ใช้ในส่วนต่างๆบนหน้าเว็บเพจ  

การเขียน CSS ใน HTML (Insert a Style Sheet) 

เราสามารถเขียนคำสั่ง CSS กับเอกสาร HTML ได้ 3 รูปแบบ ได้แก่ เขียน CSS ภายในแท็ก(Inline Styles) , เขียน CSS ภายในเอกสาร HTML (Internal Style Sheet) , และเขียน CSS ภายนอกเอกสาร HTML (External Style Sheet) โดยมีรายละเอียดดังนี้ 
1. เขียน CSS ภายในแท็ก (TAG) HTML (หรืออินไลน์:inline styles) เป็นการแทรกคำสั่ง CSS ลงในส่วนของแท็กนั้นๆ โดยทำหน้าที่เป็นเสมือนแอททริบิวท์(Attribute) ของแท็กนั้นๆ มีรูปแบบคือ style = " คำสั่ง CSS "  
 

ตัวอย่าง
                    <p> This is normal text. </p>
                    <p style="text-decoration:underline;font-color:red;">
                           This is inline styles.
                    </p>

ผลลัพธ์
                     
This is normal text.
                     
This is inline styles.
  
  
จากตัวอย่างจะเห็นได้ว่าคำสั่งทั้งหมดจะอยู่ในแอททริบิวท์ style ในที่นี้ผู้เขียนจะยกตัวอย่างแท็ก <P> เอาไว้ให้เห็นความแตกต่างระหว่างแท็กที่ไม่มีแอททริบิวท์ style กับแท็กที่มีคำสั่งนี้ จะเห็นว่าขอบเขตของคำสั่งจะสิ้นสุดอยู่ในเพียงแท็กนี้แท็กเดียวเท่านั้น 
inline styles ไม่เป็นที่นิยมใช้เนื่องจากเมื่อเราเขียน CSS ไว้ในเอกสาน HTML กำหนดไว้ทั่วเอกสาร แต่เมื่อถึงคราวที่ต้องแก้ไขจะเป็นการลำบากต่อนักพัฒนาเองต่อการที่จะค้นหาว่าแอททริบิวท์ style ที่เราเคยกำหนดไว้อยู่ตรงจุดใดในเอกสาร HTML   
อย่างไรก็ตามผู้เขียนก็ยังคงใช้วิธีการแทรก CSS แบบ inline นี้อยู่บ้างเมื่อมีโอกาส แต่เพื่อความเป็นระเบียบต่อการแก้ไขเอกสารของเราผู้เขียนจึงขอแนะนำให้พยายามเลือกใช้อีก 2 วิธีที่เหลือ นั่นคือ การเขียน CSS ภายในเอกสาร HTML (แทรกไว้ในส่วนของ Header) และการเขียน CSS ไว้นอกเอกสาร HTML (โดยการสร้างไว้อีกไฟล์ นามสกุล .css จากนั้นเชื่อมโยงด้วยคำสั่ง LINK ใน HTML) 

2. เขียน CSS ภายในเอกสาร HTML (Internal Style Sheet)  เป็นการเขียนคำสั่ง CSS ไว้ในตำแหน่งเดียว แต่ควบคุมได้ทั้งเอกสาร มักนิยมเขียนไว้ในส่วนของ <HEAD> .. </HEAD> โดยมีรูปแบบ คือ <style tyle="text/css"> คำสั่ง CSS </style> 

ตัวอย่าง 

                  <html>
                       <head>
                           <style type="text/css">
                               p{
                                 color:blue;
                                 }
                               span{
                                 color:red;
                                 text-decoration:underline; 
                                 }
                            </style>

                       </head>
                       <body>
                                    <p>
                                             This is some text for example.
                                    </p>
                                    <p>
                                             This is <span>some text</span> for example.
                                    </p>                                 
                       </body>
                  </html>
 
ผลลัพธ์ 

                     This is some text for example.

                     This is some text for example.

 
 
จากตัวอย่าง ผู้เขียนได้กำหนดแท็ก <P> โดยภายในมีข้อความว่า "This is some text for example" แต่จะแตกต่างกันเล็กน้อยในอีเลเมนต์(Element) ที่สองที่มีแท็ก <SPAN> ซ้อนอยู่ภายใน HTML Code ดังตัวอย่างนี้หากประมวลผลโดยปราศจากคำสั่ง CSS ในส่วน HEAD แล้วก็จะแสดงเพียงข้อความคำว่า "This is some text for example" ธรรมดาเพียงสองบรรทัดเท่านั้น ในตัวอย่างนี้ผู้เขียนเพียงต้องการสื่อให้เห็นว่า CSS มีประโยชน์หลักๆคือเพื่อความสวยงาม ช่วยเพิ่มความน่าสนใจให้กับเอกสาร HTML ของเรา  
สำหรับคำสั่ง CSS ทั้งหมดจะเขียนไว้ในกรอบ <STYLE TYPE="TEXT/CSS"> .. </STYLE> ดังที่กล่าวไว้แล้วก่อนหน้านี้ โปรดสังเกตุว่าคำสั่ง p{color:blue;ที่กำหนดให้แท็ก <P>..</P> ในเอกสารเป็นสีน้ำเงินนี้กำหนดเพียงครั้งเดียวแต่สามารถเปลี่ยนให้ข้อความที่อยู่ในแท็ก <p> ทั้งเอกสารได้ทั้งหมด เช่นเดียวกันกับบล็อกคำสั่งถัดมาที่กำหนดให้ข้อความที่อยู่ใน <span>. .</span> เป็นสีแดงและขีดเส้นใต้   
วิธีการเขียน CSS Internal style  นี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียว แต่เมื่อต้องการใช้คำสั่ง CSS สไตล์เดิมมากกว่าหนึ่งครั้ง ควรเปลี่ยนมาใช้รูปแบบ External Style ซึ่งถือเป็นที่นิยมมากที่สุด
 
3. เขียน CSS ภายนอกเอกสาร HTML (External Style Sheet) วิธีการนี้กระทำได้ด้วยการสร้างไฟล์เอกสาร CSS ไว้อีกหนึ่งไฟล์ที่มีนามสกุล .css ภายในเขียนคำสั่ง CSS ไว้ทั้งหมด เมื่อต้องการให้สไตล์นี้มีผลกับไฟล์เอกสาร HTML ใดๆ สามารถเชื่อมโยงมายังไฟล์นั้นๆได้ทันที ด้วยคำสั่ง
      <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="ตำแหน่งไฟล์.css">
 
ตัวอย่างเช่น เราสร้างไฟล์เอกสารไว้สองไฟล์ไว้ในโฟลเดอร์(Folder)เดียวกัน ได้แก่ไฟล์   css-test.html และไฟล์  style.css ดังภาพ  
ภายในเอกสาร css-test.html เป็น HTML Code ที่ยกมาจากตัวอย่างในข้อที่ 2 หากแต่เพียงแตกต่างกันที่คำสั่ง <style>..</style> ที่เปลี่ยนเป็นคำสั่ง <link> แทน

 css-test.html

                  <html>
                       <head>
                          <link rel="stylesheet" type="text/css" href="style.css" >
                       </head>
                       <body>
                                    <p>
                                             This is some text for example.
                                    </p>
                                    <p>
                                             This is <span>some text</span> for example.
                                    </p>                                 
                       </body>
                  </html>
  
ถึงจุดนี้หากเรายังไม่ได้สร้างไฟล์ style.css จะพบว่าผลลัพธ์เป็นเช่นเคย คือจะแสดงข้อความ "This is some text for example" ธรรมดาเท่านั้น ในขั้นตอนต่อไปคือการสร้างไฟล์ที่มีนามสกุล .css 
 
 style.css


p{
    color:blue;
 }
span{
    color:red;
    text-decoration:underline; 
}
   
เมื่อแสดงผลลัพธ์ของไฟล์ css-test.html อีกครั้งจะพบว่าปรากฎข้อความเช่นเดิมสองบรรทัด พร้อมรูปแบบข้อความที่เปลี่ยนไปเช่นเดียวกันกับตัวอย่างก่อนนี้ ดังภาพ
 
เมื่อทราบถึงวิธีการเขียน css ควบคู่กันไปกับไฟล์ html แล้ว หลายท่านอาจเกิดคำถามว่า คำสั่ง css เขียนอย่างไรบ้าง? หรือมีคำสั่งอะไรบ้าง ซึ่งผู้เขียนก็ตอบเลยว่าจำไม่ได้เหมือนกัน (^^') แต่สิ่งที่จำเป็นคือเราต้องพยายามจดจำคำสั่งที่ใช้บ่อยๆ อย่างเช่นที่เราจำเป็นต้องจำแท็กต่างๆใน HTML หรือคำสั่งต่างๆในภาษาอื่นๆ ให้ทราบเพียงว่าแท็กใดทำอะไรได้บ้างเท่านั้น เพราะฉะนั้นผู้เขียนจึงขอสรุปคำสั่งที่ใช้บ่อยสำหรับจัดการข้อความ เลเอาท์(Layout) เส้นกรอบ ระยะห่าง พื้นหลัง ฯลฯ ในฉบับของผู้เขียนเอง แต่จะไม่ลงลึกมากนัก เนื่องจาก CSS เป็นภาษาที่หากศึกษาให้ละเอียดแล้วก็จะละเอียดมากจริงๆ สำหรับที่นี้ เราต้องการเพียงแค่จะทำอย่างไรให้เว็บเพจของเราแต่ละหน้าสวยขึ้นในแบบฉบับของเราเท่านั้น

สรุปคำสั่ง CSS 

คำสั่งของ CSS ประกอบด้วย selector, property และ value โดยมีโครงสร้างคำสั่งคือ  selectorpropertyvalue} ดังภาพ 
selector คือแท็กที่อยู่ใน HTML เช่น <p> , <i> , <u> ฯลฯ หรืออาจเป็น id หรือ class ต่างๆที่อยู่ใน HTML ได้ ดังตัวอย่าง
ตัวอย่าง 
     <html>
                       <head>
                          <style type="text/css">
                             
#test{
                                           color:red;
                                           font-weight:bold;
                                      }
                          </style>

                       </head>
                       <body>
                                    <p id="test"> This is some text for  example.</p>
                                    <p>This is some text for  example</p>
                       </body>
                  </html>
  
 ผลลัพธ์ 

This is some text for  example.

This is some text for  example.
 
จากตัวอย่าง selector ของเราคือ #test หมายถึงกำหนดให้แท็กใดที่มีแอททริบิวท์ id="test" เท่านั้นที่มีผลกับคำสั่ง CSS นี้ เห็นได้ว่าแท็ก <p> อีกแท็กไม่มีผลต่อคำสั่ง css นี้เลย เนื่องจากไม่ได้ถูกกำหนดให้มี id="test" นั่นเอง สำหรับ selector ที่เป็น class ก็ยังคงใช้ในทำนองเดียวกัน หากแต่เปลี่ยนจากเครื่องหมาย ' # ' เป็นเครื่องหมาย ' . ' แทน เช่น

            .testclass{color:green;background-color:red;} 
 

ต่อไปนี้คือคำสั่ง CSS ที่ถูกใช้เป็นประจำสำหรับนักออกแบบ และ/หรือ พัฒนาเว็บไซต์

คำสั่งจัดการข้อความ (font)
คำสั่งที่เกี่ยวกับข้อความ ได้แก่ ขนาดข้อควาาม(font-size) ฟอนต์ของข้อความ(font-family) ความหนาของข้อความ(font-weight) และสีของข้อความ(color) เป็นต้น

ตัวอย่าง 

font-size: 14px; /* ข้อความขนาด 14 pixel อาจกำหนดเป็นหน่วย pt หรือ % ก็ได้ */

font-family:Arial; /* ชนิดฟอนต์ของข้อความ เช่น serif , Times New Roman ฯลฯ */

font-weight:bold; /* ข้อความขนาด 14 pixel */

color:red; /* สีของข้อความ */

  /* สำหรับคำสั่งที่จัดอยู่ใน font set เดียวกัน อาจเขียนคำสั่งในครั้งเดียว เช่น */
font:italic bold 30px Georgia, serif;


คำสั่งจัดการพื้นหลัง (background)
สำหรับพื้นหลังมี 2 ลักษณะคือ พื้นหลังที่เป็นสี(background-color) และพื้นหลังที่เป็นรูปภาพ(background-image) ซึ่งสามารถใช้ทั้งสองแบบพร้อมกันได้ เช่น
                background:red url('img/bg.png'); 
หรืออาจจะเขียนแยกกันอย่างใดอย่างหนึ่ง เช่น background-color:red; หรือ background-image:url('img/bg.png'); 
ตัวอย่าง
 

<html><head><style type="text/css">
body{
background-color:LightCyan;
background-image:
url('http://108like.com/img/108like.png');
}

</style>
</head>
<body>
          Test Background
</body>
</html>

 
  
ผลลัพธ์
 

 
จากตัวอย่างผู้เขียนได้ใช้คำสั่ง css ให้แสดง background แบบสี(color)และแบบรูปภาพ(image) ซึ่งจะสังเกตุได้ว่าภาพที่แสดงแทนที่จะแสดงแค่ภาพเดียวแต่กลับแสดงซ้ำกันเป็นจำนวนมาก จึงจำเป็นต้องเพิ่มคำสั่งควบคุม background-image นี้ด้วยคำสั่ง(property) ที่มีชื่อว่า background-repeat โดยสามารถกำหนดให้รีพีทได้ทั้งในแกน x (แนวนอน)  และแกน y(แนวตั้ง) หรือกำหนดไม่ให้รีพีทเลยก็ได้ 

 คำสั่ง background-repeat

background-repeat:repeat-x; /* repeat ในแนวนอน(แกน X) */
background-repeat:repeat-y; /* repeat ในแนวตั้ง(แกน  y) */
background-repeat:no-repeat/* ไม่ repeat แสดงเพียงภาพเดียว */

/* background property สามารถเขียนในบรรทัดเดียวได้เช่นกัน เช่น */
background:red url('img/bg.png') no-repeat;
 


คำสั่งจัดการเส้นขอบ(border) และระยะห่าง(margin,padding)
เส้นขอบและระยะห่างเป็นอีกคำสั่งที่ถูกหยิบขึ้นมาใช้บ่อย เว็บโปรแกรมเมอร์จะไม่นิยมใช้ HTML ในการกำหนดเส้นขอบหรือระยะห่าง เพราะจะทำให้ยากต่อการแก้ไขนั่นเอง ดังนั้นเราจำเป็นต้องจดจำไว้ด้วยเช่นกัน เพื่อให้ง่ายต่อการออกแบบและพัฒนาเว็บไซต์ต่อไป

ตัวอย่างคำสั่งจัดการเส้นขอบ(border) และระยะห่าง(margin,padding)
 

<p style="border:1px red solid;width:200px;">
Border solid style 
</p>

<p style="border:1px red dotted;width:200px;margin:10px;">
Border dotted style  &amp; margin 10 pixel
</p>

<p style="border:1px red dashed;width:200px;padding:10px;">
Border dashed style  &amp; padding 10 pixel
</p>
 
ผลลัพธ์ 

 
  
ในตัวอย่างนี้ผู้เขียนได้รวบรวมทั้งคำสั่งที่เกี่ยวกับเส้นขอบและคำสั่งที่เกี่ยวกับระยะห่างไว้ด้วยกัน เนื่องจากในทางปฏิบัติแล้วคำสั่งทั้งสองประเภทมักจะใช้ร่วมกัน และโปรดสังเกตุว่า property  ทั้ง border ,padding และ margin ก็สามารถใส่ value ได้มากกว่า 1 value เช่นกัน  
สำหรับ border มีหลาย property value ได้แก่ border-width , border-style ,border-color เป็นต้น นอกจากนี้ยังสามารถกำหนดเฉพาะเส้นขอบด้านซ้าย ขวา บน ล่าง เช่น border-left:1px red solid; หมายถึงให้เส้นขอบด้านซ้ายมีสีแดงขนาด 1 px ชนิด solid เป็นต้น 
อย่างที่กล่าวไว้ว่าโดยทั่วไปแล้วเมื่อเรากำหนดเส้นขอบแล้วมักจะกำหนดระยะห่างให้เกิดความสวยงาม จากตัวอย่างผู้เขียนกำหนดให้ทั้ง 3 กล่องมีขนาด 200px เท่ากันหมด แต่เมื่อเพิ่มคำสั่ง margin และ padding เข้าไปจะเห็นว่าระยะห่างเปลี่ยนไปในทันนี้ 

               กล่องแรก มีมีความกว้าง(width) ขนาด 200 พิกเซล
               กล่องที่สอง ความกว้างเท่ากัน แต่ระยะห่างภายนอก(margin)รอบๆด้าน 10 พิกเซล
               กล่องที่สาม ไม่ได้กำหนดระยะห่างภายนอก แต่กำหนดระยะห่างภายใน(padding)แทน จึงมีผลทำให้กล่องที่สามนี้มีขนาดใหญ่ขึ้น 

สำหรับ margin และ padding ก็เช่นเดียวกัน เราสามารถเขียนคำสั่ง css เลือกกำหนดเฉพาะระยะห่าง ซ้าย ขวา บน ล่าง ได้เช่นกัน ในที่นี้ไม่ได้ยกตัวอย่างแล้ว แต่เชื่อว่าหลายท่านคงเดาได้ว่าต้องเขียนอย่างไร ที่ควรจดจำให้แม่นยำคือ padding คือระยะห่างภายใน และ margin คือระยะห่างภายนอก เท่านั้นเอง

ส่งท้าย CSS & HTML พื้นฐาน 

ในบทนี้ผู้เขียนได้สรุปภาพรวมของ CSS เพื่อเป็นพื้นฐานในการนำไปใช้ต่อไปในอนาคต โดยเฉพาะการออกแบบเว็บไซต์ด้วยตนเองที่นอกจากจะต้องอาศัยความรู้ด้าน HTML แล้ว ยังต้องอาศัยความรู้พื้นฐานของ CSS ด้วย ในขั้นตอนแรกจึงได้ยกตัวอย่างให้ดูก่อนว่า CSS สามารถนำมาใช้กับ HTML ได้อย่างไร และต่อมาจึงได้สรุปคำสั่งที่ใช้บ่อยใน CSS ที่ถึงแม้จะพยายามสรุปแล้วแต่ก็ยิ่งยืดยาวขึ้นเรื่อยๆ 
อย่างไรก็ตามการอธิบายและสรุปคำสั่ง CSS นี้เป็นเพียงส่วนหนึ่งของบทเรียน ยังมีส่วนอื่นๆที่ยังไม่ได้กล่าวถึงอยู่มาก อย่างเช่น CSS3 และ HTML5 ที่ไม่เคยได้กล่าวถึงเลย แต่เชื่อว่าหากท่านเข้าใจถึงพื้นฐานของทั้งสองภาษานี้ ท่านก็จะสามารถพัฒนาต่อยอดด้วยตนเองได้อย่างเป็นแน่แท้ ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความที่สรุปอย่างยืดยาวนี้จะเป็นประโยชน์ต่อผู้ที่กำลังศึกษาวิธีการออกแบบและพัฒนาเว็บไซต์ได้ไม่มากก็น้อย ในบทหน้ามาพบกันใหม่กับการประยุกต์ใช้ CSS&HTML Workshop แบบ step by step แต่จะเป็นเรื่องใดนั้น อดทนรออีกสักนิด ,108Like Computer&ICT , Web Development.
 

  
  
   

 
MrPandaman


( Last update on 2014-02-25 )

ตรงนี้ถ้าเราชนะ
ไปที่ไหนเราก็ชนะ

 Artticle |  Email |  Facebook

604 : 907