สอนตกแต่งหน้าเว็บให้สวยงามด้วย CSS

หลังจากที่เราได้ลองสร้างเว็บเพจแรกไปแล้วในบทเรียนการสร้างเว็บไซต์ วันนี้เรามาตกแต่งเว็บเพจของเราให้สวยขึ้นด้วย CSS กันดีกว่า

ทำไมต้องมี CSS?

          ก่อนหน้านี้ เรารู้แล้วว่า HTML คือโครงสร้างของเนื้อหาในเว็บเพจ หรือพูดง่ายๆ ก็คือ HTML เอาไว้บอกว่าในหน้าเว็บนั้นมีเนื้อหาอะไรบ้าง โดยทั่วไปแล้ว web browsers จะมีการกำหนด “สไตล์” ให้กับเนื้อหาเหล่านี้เอาไว้อยู่แล้ว แต่มันอาจจะไม่ค่อยสวยเท่าไรนัก

          ในการปรับเปลี่ยน “สไตล์” ให้กับเนื้อหา เราจะใช้สิ่งที่เรียกว่า “CSS (Cascading Style Sheets)” เข้ามาช่วย ไม่ว่าจะเป็นการจัดตำแหน่งของเนื้อหา ปรับขนาดของตัวอักษร หรือเปลี่ยนสีพื้นหลัง สิ่งเหล่านี้ ล้วนทำผ่าน CSS ทั้งสิ้น หรือพูดง่ายๆ ก็คือ CSS มีไว้บอก web browsers ว่าเนื้อหาต่างๆ ควรแสดงผลออกมาอย่างไร

CSS Rule

          อย่าลืมว่าเนื้อหาต่างๆ ในหน้าเว็บนั้นถูกสร้างมาจาก “HTML Elements” การจะตกแต่งสไตล์ให้กับเนื้อหา ก็คือการใส่สไตล์ให้กับ HTML Elements นั่นเอง วิธีการก็คือ เราจะต้องสร้าง “กฎเกณฑ์” หรือสิ่งที่เรียกว่า “CSS Rule” ขึ้นมา ซึ่ง CSS Rule นี้เอง ที่จะเป็นตัวบอกว่า HTML Elements ไหนที่เราอยากจะปรับ และอยากปรับให้เป็นแบบไหน โดยมันจะแบ่งออกเป็น 4 ส่วน ด้วยกัน ดังนี้

• Selectorคือส่วนที่เอาไว้ระบุ HTML Element ที่เราต้องการจะปรับสไตล์ สมมติว่า เราอยากจะเปลี่ยนสไตล์ของ h1 ให้เรากำหนด Selector ให้เป็น h1
• Curly Bracketsเราสามารถกำหนดสไตล์หลายๆ ด้าน ได้ใน CSS Rule เดียว การกำหนดสไตล์เหล่านี้จะเรียกว่า “CSS Declarations” ซึ่งเราจะต้องครอบมันทั้งหมดด้วยปีกกา
• Propertyเป็นการระบุว่าเราอยากปรับลักษณะอะไร สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ก็จะได้ว่า “text-align” คือ Property
• Valueเป็นการระบุว่าเราอยากปรับลักษณะนั้นให้เป็นแบบไหน สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ให้เป็น “กึ่งกลาง” เราจะได้ว่า “center” คือ Value

Selector แบบ Class และ Id

          จากตัวอย่างก่อนหน้านี้ เราได้กำหนดให้ Selector เป็น h1 ซึ่งเราจะเรียกการเขียน Selector แบบนี้ว่า “Tag Selector” คือ มันจะส่งผลไปยังทุกๆ HTML Elements ที่เป็น h1 เลย ในบางครั้ง การเขียน Selector แบบนี้ อาจดูกว้างเกินไป ให้เราแก้โดยการเขียน Selector แบบ Class หรือ Id แทน

Class

          การเขียน Selector แบบนี้ จะเป็นการระบุ HTML Elements โดยอาศัย Attribute ที่มีชื่อว่า “class” สมมติเราต้องการกำหนดสไตล์ให้กับ 4 หัวข้อ นี้

1 2 3 4 5

<h1>หัวข้อสีแดง</h1> <h1>หัวข้อสีแดง</h1> <h1>หัวข้อสีน้ำเงิน</h1> <h1>หัวข้อสีน้ำเงิน</h1>

          จะเห็นว่าทั้ง 4 หัวข้อ ต่างก็เป็น h1 ถ้าเราใช้ Tag Selector มันก็จะส่งผลเหมือนกันทั้งหมด ให้เราเปลี่ยนมาใช้ Class Selector แทน ก่อนอื่น ให้เราใส่ Attribute “class” เพิ่มเข้าไปที่ h1 ก่อน โดยตั้งชื่อให้ตรงกับลักษณะของมัน

1 2 3 4 5

<h1 class="red-text">หัวข้อสีแดง</h1> <h1 class="red-text">หัวข้อสีแดง</h1> <h1 class="blue-text">หัวข้อสีน้ำเงิน</h1> <h1 class="blue-text">หัวข้อสีน้ำเงิน</h1>

          จากนั้น ให้เราเขียน CSS Rule ขึ้นมา ในส่วนของ Selector ให้เราใส่ชื่อ Class แทนการใส่ h1 โดยเราจะต้องใส่เครื่องหมาย “.” เอาไว้ข้างหน้าชื่อ Class ด้วย เพื่อเป็นการบอก web browsers ให้รู้ว่านี่คือชื่อ Class นะ ลองดูตัวอย่างนี้

1 2 3 4 5 6

.red-text {     color: red; } .blue-text {     color: blue; }

          เพียงเท่านี้ หัวข้อทั้ง 4 ก็จะมีสีแดง และสีน้ำเงิน ตรงตามที่เราต้องการแล้วล่ะ

ID

          สมมติเราอยากให้เฉพาะหัวข้อที่เป็นสโลแกนมีสีแดง เราจะเขียน Selector อย่างไร?

1 2 3 4

<h1>สโลแกน</h1> <h1>หัวข้อ</h1> <h1>หัวข้อ</h1> <h1>หัวข้อ</h1>

แน่นอนว่าเราไม่สามารถใช้ Tag Selector ได้ เพราะมันจะมีผลกับทุกๆ หัวข้อเลย ให้เราใส่ Attribute ที่มีชื่อว่า “id” เข้าไปที่สโลแกนของเรา แบบนี้

1 2 3 4

<h1 id="slogan">สโลแกน</h1> <h1>หัวข้อ</h1> <h1>หัวข้อ</h1> <h1>หัวข้อ</h1>

          จากนั้น ให้เราเขียน CSS Rule ขึ้นมา ในส่วนของ Selector ให้เราใส่ชื่อ Id ลงไป โดยเราจะต้องใส่เครื่องหมาย “#” เอาไว้ข้างหน้าชื่อ Id ด้วย เพื่อเป็นการบอก web browsers ให้รู้ว่านี่คือชื่อ Id นะ ลองดูตัวอย่างนี้

1 2 3

#slogan {     color: red; }

          เพียงเท่านี้ หัวข้อที่เป็นสโลแกนก็จะเปลี่ยนเป็นสีแดง ในขณะที่หัวข้ออื่นๆ ยังคงเหมือนเดิม

          อย่างไรก็ตาม เราไม่สามารถตั้งชื่อของ id ให้ซ้ำกันได้ หรือพูดง่ายๆ ก็คือ id จะใช้กับ HTML Element ที่มีแค่จุดเดียวในหน้านั้นๆ ซึ่งต่างจาก class ที่เอาไว้ระบุกลุ่มของ HTML Elements ที่มีลักษณะคล้ายกัน

วิธีการนำ CSS ไปใช้จริง

          การนำ CSS ไปใช้จริงมีอยู่ 3 รูปแบบด้วยกัน ดังนี้

Internal

          เป็นการเขียน CSS Rules เอาไว้ที่ตัวเว็บเพจเลย โดยจะใส่ไว้ในส่วน head ของเว็บเพจ แล้วครอบด้วย Tag “style” อีกที ลองดูตัวอย่างนี้

1 2 3 4 5 6 7

<head>     <style>         h1 {             color: red;         }     </style> </head>

• ข้อดีเหมาะกับการใส่สไตล์ที่ใช้เฉพาะเว็บเพจนี้เท่านั้น
• ข้อเสียนำสไตล์เหล่านี้ไปใช้กับหน้าอื่นๆ ไม่ได้

External

          เป็นการเขียน CSS Rules แยกไว้อีกไฟล์หนึ่ง แล้วค่อยเรียกไฟล์นั้นมาใช้กับเว็บเพจอีกที วิธีการก็คือ ให้เราสร้างไฟล์ขึ้นมาแล้วตั้งชื่อโดยใช้นามสกุลเป็น “.css” เช่น “style.css” เป็นต้น จากนั้นให้เราใส่ CSS Rules ลงไปในไฟล์นี้

1 2 3

h1 {     color: red; }

          ทีนี้เราจะต้องทำการ link ไฟล์ “style.css” ดังกล่าว เข้ากับเว็บเพจของเรา ให้เราสร้าง Tag “link” ขึ้นมา แล้วใส่ไว้ในส่วน head ลองดูตัวอย่างนี้

1	<link rel="stylesheet" type="text/css" href="style.css">

          หากสังเกตที่ Tag “link” จะพบว่าเราต้องระบุที่อยู่ของไฟล์ “style.css” ให้ถูกต้อง โดยใช้ Attribute “href”

• ข้อดีสามารถนำไปใช้กับหลายๆ เว็บเพจได้
• ข้อเสียต้องโหลดไฟล์ CSS เพิ่มเข้ามา

Inline

          เป็นการเขียน CSS Declarations เอาไว้ที่ตัว HTML Element ที่ต้องการจะใส่สไตล์เลย วิธีการก็คือ เราจะต้องใช้ Attribute “style” เข้ามาช่วย ลองดูตัวอย่างต่อไปนี้

1	<h1 style="color: red;">หัวข้อ</h1>

• ข้อดีมีผลเหนือการใส่สไตล์ด้วยวิธีอื่นๆ เพราะเป็นการใส่สไตล์เอาไว้ที่ตัว HTML Element เลย
• ข้อเสียไม่สามารถนำสไตล์ไปใช้กับ HTML Elements อื่นๆ ต่อได้

Priority ของสไตล์

         การดูว่าสไตล์ไหน ที่จะเอามา apply ให้กับ HTML Elements ต่างๆ web browsers จะไล่ดูไปทีละระดับ ดังนี้

• Inlineหากมีการใส่สไตล์แบบ Inline สไตล์ในส่วนนี้จะถูกนำมา apply
• Internalหากไม่มีการใส่สไตล์แบบ Inline เลย มันจะไปดูสไตล์แบบ Internal ถ้ามี สไตล์ในส่วนนี้จะถูกนำมา apply
• Externalหากไม่มีการใส่สไตล์แบบ Internal เลย มันจะไปดูสไตล์แบบ External ถ้ามี สไตล์ในส่วนนี้จะถูกนำมา apply
• Browser defaultหากไม่มีการใส่สไตล์แบบ External เลย สไตล์ default จาก web browser เอง จะถูกนำมา apply

Workshop – ตกแต่งหน้าเว็บให้สวยงามด้วย CSS

          สมมติว่าโค้ด HTML ของเราเป็นแบบนี้

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>CSS Tutorials by Siam HTML</title>     </head>     <body>         <h1>CSS Tutorials</h1>         <p>             Free web tutorials at             <a href="http://www.siamhtml.com">SiamHTML.com</a>         </p>     </body> </html>

          เมื่อลองพรีวิวดู จะเห็นว่าหน้าตามันค่อนข้างจะเรียบง่ายไปหน่อย เรามาเริ่มตกแต่งหน้าตาให้มันสวยงามยิ่งขึ้นกันดีกว่า

body

         เริ่มจาก HTML Element ที่มีชื่อว่า “body” กันก่อนครับ เนื่องจาก body เป็น HTML Elements ที่อยู่ด้านนอกสุดที่จะแสดงผลออกมา การปรับแต่ง body ก็คือ การปรับหน้าเว็บทั้งหน้าเลยนั่นเอง ให้เราลองเปลี่ยนสไตล์ของ body ตามนี้

• เปลี่ยน “สีพื้นหลัง” ของ body จากเดิม “สีขาว ” มาเป็น “สีดำ”
• เปลี่ยน “สีตัวอักษร” ของ body จากเดิม “สีขาว” มาเป็น “สีส้ม”

          จากโจทย์ด้านบน ให้เราเขียน CSS Rule แบบนี้

1 2 3 4

body {     background-color: #000;     color: #eb8c4a; }

          เมื่อลองพรีวิวดู จะเห็นว่าสีพื้นหลังของ body กลายมาเป็นสีดำแล้ว รวมไปถึงสีตัวอักษรที่กลายมาเป็นสีส้ม ส่วนสี Link ยังคงเป็นสีน้ำเงินตามเดิม โจทย์ต่อไปคือ

• กำหนด “แบบตัวอักษร” ของ body ให้เป็น “Arial”
• กำหนด “ขนาดตัวอักษร” ของ body ให้เป็น “24px”

          จากโจทย์ที่เพิ่มเข้ามา CSS Rule จะเปลี่ยนเป็นแบบนี้

1 2 3 4 5 6

body {     background-color: #000;     color: #eb8c4a;     font-family: Arial;     font-size: 24px; }

          เมื่อลองพรีวิวดู จะเห็นว่าแบบตัวอักษรของ body เปลี่ยนมาเป็น Arial แล้ว และยังตัวใหญ่ขึ้นเป็น 24px อีกด้วย โจทย์ต่อไปก็คือ

• กำหนด “การจัดตำแหน่งตัวอักษร” ของ body จากเดิม “ชิดซ้าย” มาเป็น “กึ่งกลาง”

          จากโจทย์ที่เพิ่มเข้ามา CSS Rule จะเปลี่ยนเป็นแบบนี้

1 2 3 4 5 6 7

body {     background-color: #000;     color: #eb8c4a;     font-family: Arial;     font-size: 24px;     text-align: center; }

          เมื่อลองพรีวิวดู เนื้อหาทั้งหมดก็จะเปลี่ยนมาอยู่กึ่งกลางของ body

h1

         หลังจากที่เราปรับสไตล์ที่ body ไปเยอะแล้ว เราลองมาดูที่ h1 กันบ้างครับ โจทย์ต่อไปก็คือ

• เปลี่ยน “สีตัวอักษร” ของ h1 จากเดิม “สีส้ม” มาเป็น “สีเหลือง”

          สำหรับโจทย์นี้ ให้เราเขียน CSS Rule เพิ่มเข้าไป แบบนี้

1 2 3

h1 {     color: #ffcc57; }

          เมื่อลองพรีวิวดู สีตัวอักษรของ h1 ได้เปลี่ยนจากสีส้มมาเป็นสีเหลืองแล้ว

a

         จากการพรีวิวล่าสุด เราจะเห็นว่าสีของ Link ยังคงเป็นสีน้ำเงินอยู่ ซึ่งมันอาจจะดูไม่ค่อยชัดเท่าไรเมื่อสีพื้นหลังเป็นสีดำ โจทย์ต่อไปก็คือ

• เปลี่ยน “สีตัวอักษร” ของ a จากเดิม “สีน้ำเงิน” มาเป็น “สีฟ้า”
• เปลี่ยน “น้ำหนักตัวอักษร” ของ a จากเดิม “ตัวปกติ” มาเป็น “ตัวหนา”

          สำหรับโจทย์นี้ ให้เราเขียน CSS Rule เพิ่มเข้าไป แบบนี้

1 2 3 4

a {     color: #00ACEE;     font-weight: bold; }

          เมื่อลองพรีวิวดู สีตัวอักษรของ a ได้เปลี่ยนจากสีน้ำเงินมาเป็นสีฟ้าแล้ว และยังเป็นตัวหนาอีกด้วย

สุดยอด! เราเขียน CSS เป็นแล้ว

          มาถึงตรงนี้ เราสามารถตกแต่งหน้าเว็บของเราให้สวยงามด้วย CSS ได้แล้ว ถึงแม้ว่าเรื่องของ CSS จะยังมีให้เรียนรู้อีกมาก ไม่ว่าจะเป็นการเขียน Selectors ในระดับที่สูงขึ้น การสร้าง Layouts รวมไปถึงการทำ Animation แต่เนื้อหาที่เราได้เรียนรู้ไปในวันนี้ ถือเป็นพื้นฐานสำคัญที่จะช่วยให้เราเข้าใจในเรื่องต่อๆ ไปได้ง่ายขึ้น แล้วพบกันใหม่