table จัดรูปแบบของตารางด้วยคำสั่ง css CSS

table จัดรูปแบบของตารางด้วยคำสั่ง css

CSS

จากหัวข้อ HTML มีการสอนเรื่องการสร้างตารางกันมาแล้ว ในบทนี้จะใช้ CSS ควบคุมการแสดงผลของตารางที่สร้างขึ้นมา 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ควบคุมการแสดงผลของตาราง
    ตัวอย่างจะเป็นการแสดงคำสั่ง layout ซึ่งใช้ในการกำหนดขนาดของตารางให้เปลี่ยนแปลงตามเนื้อหา หรือไม่เปลี่ยนแปลงตามเนื้อหา

    2.คำสั่งแสดงผลช่องว่างของตาราง
    การเขียนตารางโดยใช้คำสั่ง table จะไม่แสดงผลช่องว่างที่ไม่มีค่า ซึ่งถ้าเราต้องการให้แสดงผลก็ต้องใส่ค่าว่าง ( ) แต่ในหัวข้อนี้จะกำหนดให้แสดงช่องว่างทุกช่อง โดยไม่ต้องใส่ค่าว่างอีกต่อไป แสดงผลใน Firefox เท่านั้น

    3.ควบคุมการแสดงเส้นของตาราง
    ตัวอย่างจะเป็นคำสั่งที่ใช้ควบคุมการแสดงผลของเส้นตาราง คำสั่ง border-collapse: separate แสดงผลใน Firefox เท่านั้น 

เปลี่ยนสัญลักษณ์หน้า list CSS

เปลี่ยนสัญลักษณ์หน้า list

CSS

ในบทเรียน HTML จะมีเรื่องการเขียน list อยู่ซี่งเครื่องหมายที่อยู่หน้า list นั้นสามารถเปลี่ยนได้โดยใช้คำสั่ง CSS 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.เปลี่ยนสัญลักษณ์หน้า list แบบไม่มีการเรียงลำดับ
    list แบบไม่มีลำดับ สัญลักษณ์จะเป็นรูปซึ่งสามารถเปลี่ยนเป็น วงกลมแบบทึบ วงกลมแบบโปร่ง ส่ีเหลี่ยม หรือไม่ต้องการให้แสดงก็ได้

    2.เปลี่ยนสัญลักษณ์หน้า list แบบมีการเรียงลำดับ
    ตัวอย่างเปลี่ยนสัญลักษณ์หน้า list แบบมีลำดับ 

    3.สัญลักษณ์ทั้งหมด
    ในตัวอย่างแสดงสัญลักษณ์ของ list ทั้งหมด สัญลักษณ์ตั้งแต่ lower-greek จะแสดงในเฉพาะ firefox เท่านั้น ถ้าใช้ Internet Explorer จะเห็นเป็นวงกลมปรกติ

    4.ใช้รูปภาพเป็นสัญลักษณ์
    สามารถใช้รูปภาพเป็นสัญลักษณ์ของ list ได้ ดังตัวอย่างที่แสดง 

    5.กำหนดตำแหน่งให้กับสํญลักษณ์
    ตัวอย่างเป็นการกำหนดตำแหน่งให้กับสัญลักษณ์ ซึ่งกำหนดได้ 2 ตำแหน่งคือ 1.inside , 2.outside

    6.รวมคำสั่งที่ใช้กับ list
    ตัวอย่างแสดงการรวมคำสั่งที่ใช้กับ list 

padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา CSS

padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา

CSS

    padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง 

    หลายคนคงสงสัยว่าแล้วมันต่างจาก margin ยังไง ก็ดูที่รูปด้านล่าง จะแสดงให้เห็นว่า margin และ padding ต่างกันยังไง 



ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ตัวอย่างการใช้งาน padding
    ในตัวอย่างแสดงการใช้งาน padding ซึ่งจะใช้คำสั่ง padding เพื่อบอกระยะห่างระหว่างตารางและเนื้อหา เช่นเดียวกับการกำหนดระยะใน margin สามารถใช้หน่วย cm , px หรือบอกเป็น % ก็ได้

    2.กำหนดระยะห่างด้านบน
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านบนของวัตถุ

    3.กำหนดระยะห่างด้านขวา
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านขวาของวัตถุ 

    4.กำหนดระยะห่างด้านล่าง
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านล่างของวัตถุ 

    5.กำหนดระยะห่างด้านซ้าย
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ

Margin กำหนดระยะห่างระหว่างวัตถุ CSS

Margin กำหนดระยะห่างระหว่างวัตถุ

CSS

margin เป็นการกำหนดระยะห่างระหว่างวัตถุเช่น กำหนดให้ข้อความห่างจาก ตาราง 1 cm , กำหนดระยะห่างระหว่างข้อความด้วยกัน , ระหว่างรูปกับตัวอักษร

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ตัวอย่างการใช้งาน margin
    ในตัวอย่างเป็นการกำหนดระยะห่างระหว่าง p tag และขอบด้านข้างของ browser เราใช้คำสั่ง p.margin {margin: 2cm 4cm 3cm 4cm} ในบทที่แล้วคงจำได้ว่าเราเรียงลำดับระยะห่างดังนี้ p.margin {margin: บน ขวา ล่าง ซ้าย} ซึ่งหน่วยที่ใช้ในการบอกระยะสามารถใช้หน่วย cm , px หรือ สามารถบอกเป็น % ก็ได้

    2.กำหนดระยะห่างด้านบน
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านบนของวัตถุ

    3.กำหนดระยะห่างด้านขวา
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านขวาของวัตถุ จะเห็นได้ว่าเมื่อตัวอักษรแสดงผลถึงระยะห่างทางขวา 30% แล้วจะขึ้นบรรทัดใหม่ทันที

    4.กำหนดระยะห่างด้านล่าง
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านล่างของวัตถุ ไม่รวมระยะระหว่างขอบของวัตถุกับขอบของ browser 

    5.กำหนดระยะห่างด้านซ้าย
    ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ

คำสั่งที่เกี่ยวกับเส้นขอบ CSS

คำสั่งที่เกี่ยวกับเส้นขอบ

CSS

ในบทความนี้จะเป็นเรื่องของการเขียนเส้นขอบให้กับวัตถุ เช่นการเขียนเส้นคั่นระหว่างบทความ หรือเขียนเส้นขอบให้กับเนื้อหาเพื่อเน้นความสำคัญ 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.คำสั่งกำหนดชนิดของขอบ
    จากตัวอย่างจะเป็นคำสั่งที่ใช้กำหนดชนิดของเส้นขอบ เช่น เส้นประ เส้นจุด หรือเส้น2เส้นซ้อนกัน 

    2.คำสั่งกำหนดขนาดของขอบ
    หัวข้อที่แล้วเป็นการสร้างเส้นขอบชนิดต่าง ในหัวข้อนี้จะเป็นการกำหนดขนาดให้กับเส้นขอบ 

    3.คำสั่งกำหนดสีของขอบ
    ตัวอย่างจะเป็นการกำหนดสีเส้นขอบ ซึ่งการระบุสีก็เหมือนกับที่ระบุใน HTML 

    4.คำสั่งกำหนดด้านที่ต้องการให้แสดงผล
    สามารถกำหนดด้านที่ต้องการให้แสดงผลได้ เช่นแสดงผลในด้านซ้ายเท่านั้น หรือแสดงผลในด้านบนเท่านั้น

    5.คำสั่งกำหนดด้านที่ต้องการแสดงผลด้วยรูปแบบของเส้นขอบที่ต่างกัน
    สามารถกำหนดด้านที่เราต้องการแสดงผล และกำหนดรูปแบบของเส้นที่ต้องการแสดงผลได้ด้วย 

    6.คำสั่งกำหนดขนาดของด้านต่างๆ
    สามารถกำหนดขนาดของเส้นขอบในด้านต่างๆได้ ดังตัวอย่าง

    7.คำสั่งกำหนดสีของด้านต่างๆ
    สามารถกำหนดสีให้กับเส้นขอบในด้านต่างๆได้ ดังตัวอย่าง

    8.คำสั่งกำหนดสีของด้านต่างๆ แบบที่2
    เป็นอีกตัวอย่างของการกำหนดสีให้กับเส้นขอบ ซึ่งเราไม่ได้ใช้คำสั่งบอกว่าขอบซ้ายหรือขวา แต่เราจะใช้ค่ากำหนดเอา สามารถกำหนดค่าได้ไม่เกิน 4 ค่า เป็นค่าของขอบแต่ล่ะขอบ รายละเอียดของการกำหนดค่าอ่านได้ด้านล่าง

    9.คำสั่งแบบรวม
    ในตัวอย่างเป็นคำสั่งที่ใช้สั่งรวมๆ ใช้สั่งได้ทั้งสี รูปแบบของเส้นขอบ และขนาด

การกำหนดค่าของเส้นขอบเช่น รูปแบบเส้นที่แสดงผล , ความหนาของขอบ , สีของขอบ 

    1.กำหนดค่าของขอบเพียงค่าเดียว จะแสดงผลโดยนำไปใช้กับเส้นขอบทุกด้าน 

    2.กำหนดค่าของขอบ 2 ค่า จะแสดงผลโดย ค่าแรกจะใช้กับ ขอบบน และล่าง ค่าที่สอง จะใช้กับขอบซ้าย และขวา 

    3.กำหนดค่าของขอบ 3 ค่า จะแสดงผลโดยค่าที่ 1 ใชกับขอบบน ค่าที่ 2 ใชกับขอบซ้าย และขวา ค่าที่ 3 ใช้กับขอบล่าง 

    4.กำหนดค่าของขอบ 4 ค่า จะแสดงผลโดยค่าที่ 1 ใชกับขอบบน ค่าที่ 2 ใชกับขอบขวา ค่าที่ 3 ใช้กับขอบล่าง ค่าที่ 4 ใช้กับขอบซ้าย 

คำสั่งจัดการฟอนต์ (font) CSS

คำสั่งจัดการฟอนต์ (font)

CSS

    ในบทที่แล้วเป็นการควบคุมการแสดงผลของข้อความเราจะใช้คำสั่ง text เป็นส่วนใหญ่แต่ในบทนี้เราจะลงรายละเอียดถึงตัวอักษรกันทีเดียว 

    คำสั่งที่ใช้กับตัวอักษรนั้น มีความสำคัญมากในการทำเว็บไซต์ เราคงเคยเห็นหลายเว็บไซต์ที่มีการแสดงผลตัวอักษรเล็กเกินไป หรือแสดงเป็นตัวอักษรที่อ่านไม่รู้เรื่อง(ภาษาต่างดาว) ปัญหานี้สามารถแก้ไขได้ด้วยคำสั่ง CSS เพราะทำให้เราสามารถกำหนดขนาดตัวอักษร และชนิดของตัวอักษรได้ 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.คำสั่งกำหนดชนิดตัวอักษร
    ในตัวอย่างเป็นคำสั่งที่กำหนดชนิดของตัวอักษร (font) เป็นคำสั่งที่ใช้กันมาก เพราะทำให้เรากำหนดชนิดของ font ได้ ซึ่ง font ที่เรากำหนดนั้นจะต้องเป็น font ที่มีอยู่ในเครื่องของผู้ใช้งานด้วย มิฉนั้นก็จะไม่แสดงผล 

    2.คำสั่งกำหนดขนาดให้กับตัวอักษร
    การกำหนดขนาดของ font ไม่ควรกำหนดให้เล็กเกินไป เพราะจะทำให้เกิดความลำบากในการอ่านได้ 

    3.คำสั่งกำหนดรูปแบบให้กับตัวอักษร
    กำหนดรูปแบบให้ตัวอักษรเช่น ตัวเอียง ตัวหนา 

    4.รวมคำสั่งที่ใช้กับตัวอักษร
    การรวมคำสั่งของฟอนต์ในการประกาศครั้งเดียว 

คำสั่งที่ใช้กับข้อความ (text) CSS

คำสั่งที่ใช้กับข้อความ (text)

CSS

ข้อความเป็นสิ่งที่เราใช้มากสุดในการทำเว็บเพจ ซึ่ง CSS ก็มีคำสั่งมากมายที่ใช้ในการควบคุมการแสดงผลของข้อความ ในบทนี้จะเป็นคำสั่งที่ใช้ในการแสดงข้อความทั้งหมด 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ใส่สีให้ข้อความ
    ในหัวข้อนี้จะเป็นการใส่สีให้กับข้อความ โดยเราจะกำหนดสีให้กับวัตถุของเราเช่น <H1> 

    2.การใส่สีพื้นหลังให้ข้อความ
    ในตัวอย่างจะเป็นการเน้นกลุ่มคำด้วยการใส่สีพื้นหลัง ซึ่งจะทำให้คำนั้นเด่นขึ้นมา เหมือนกับการที่เราใช้สีเมจิกเน้นคำที่อยู่ในหนังสือนั่นเอง
     จะเห็นได้ว่าเราใช้คำสั่ง <span> </span> ซึ่งคำสั่งนี้ก็เหมือนกับกำหนดให้กลุ่มอักษรที่อยู่ในวัตถุที่ชื่อว่า span เพื่อเราจะได้กำหนดขอบเขตของคำสั่ง CSS 

    3.การเว้นช่องว่างระหว่างตัวอักษร
    ตัวอย่างเป็นคำสั่งที่ใช้ในการเว้นช่องว่างระหว่างตัวอักษร หรือที่เราเรียกว่าช่องไฟนั่นเอง 

    4.การเว้นช่องว่างระหว่างบรรทัด
    คำสั่งนี้ใช้ในการกำหนดความสูงระหว่างบรรทัด ซึ่งจะมีผลมากในการแสดงผลเพราะถ้าเราเว้นระยะระหว่างบรรทัด มากไป หรือน้อยไป ก็ส่งผลต่อการอ่านทำให้อ่านข้อความได้ยากขึ้น 

    5.การจัดตำแหน่งข้อความ
    เราจัดตำแหน่งข้อความเพื่อประโยชน์ในการแสดงผลเช่น การแสดงผลจำนวนเงินเรามักจะแสดงผลให้ชิดขวา , การแสดงผลข้อความเรามักแสดงผลชิดซ้าย 

    6.จัดรูปแบบข้อความ
    ในตัวอย่างจะเป็นคำสั่งที่ใช้ในการขีดเส้นฆ่าตัวข้อความ ขีดเส้นใต้ หรือใช้จัดการกับ link 

    7.จัดรูปแบบข้อความที่เป็น link
    ตัวอักษรที่เป็น link นั้นเราใช้คำสั่งในการจัดรูปแบบเหมือนข้อความทั่วไป แต่ selector นั้นเป็นคำสั่งเฉพาะ ซึ่งมีทั้งหมด 4 ตัว 

    1. a:link เป็นรูปแบบปรกติของข้อความที่เป็น link 
    2. a:hover เป็นรูปแบบของข้อความเมื่อมีเมาส์อยู่ด้านบน 
    3. a:active เป็นรูปแบบของข้อความเมื่อเราคลิกที่ข้อความ
    4. a:visit เป็นรูปแบบของข้อความที่เป็น link ที่เราเปิดดูแล้ว

    8.คำสั่งจัดการย่อหน้า
    เป็นคำสั่งที่ใช้บอกระยะย่อหน้าของข้อความ ซึ่งเราอาจใช้หน่วยเป็น cm ก็ได้

    9.คำสั่งจัดตัวอักษร พิมพ์ใหญ่ พิมพ์เล็ก
    เป็นคำสั่งที่เราไม่ค่อยได้ใช้เท่าไหร่ใช้ในการจัดรูปแบบตัวอักษรภาษาอังกฤษ ให้เป็นตัวพิมพ์ใหญ่ พิมพ์เล็ก 

    10.คำสั่งใช้ในการจัดเรียงตัวอักษร
    เป็นคำสั่งที่ใช้ในการจัดเรียงตัวอักษร จากซ้ายไปขวา หรือ จากขวาไปซ้าย จะมีผลกับตัวเลข สัญลักษณ์ต่างๆ ไม่มีผลกับตัวอักษร ในบทนี้เราจะใช้คำสั่ง div ซึ่งก็เป็นคำสั่งคล้ายกับ span เพียงแต่ว่า div จะเว้นบรรทัดระหว่าง div ส่วน span จะไม่เว้นแต่จะแสดงผลต่อไปเลย

    11.คำสั่งควบคุมระยะการเว้นวรรค
    เป็นคำสั่งที่ใช้ควบคุมระยะห่างของการเว้นวรรค ใช้ได้กับภาษาอังกฤษเท่านั้น

    12.คำสั่งควบคุมการขึ้นบรรทัดใหม่
    ตามปรกติถ้าข้อความของเรานั้นมีความยาว browser ก็จะทำการตัดบรรทัดให้เราเองแต่ถ้าเราใช้คำสั่ง no wrap เป็นการบอกให้ browser ไม่ต้องตัดบรรทัดให้เรา ให้แสดงผลตามยาวออกไป จนกว่าจะเจอคำสั่ง <br> จึงขึ้นบรรทัดใหม่ 

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

เนื้อหาในบทนี้อ้างอิงจากเว็บไซต์ www.w3schools.com

คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ CSS

คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ

CSS

    การใส่พื้นหลังโดยใช้คำสั่ง CSS นั้นเราสามารถใส่พื้นหลังได้กับวัตถุใดก็ได้เช่น ใส่พื้นหลังให้กับหัวข้อ , ใส่พื้นหลังให้กับตาราง , ใส่พื้นหลังให้กับย่อหน้า และยังสามารถกำหนดขนาด และรายละเอียดการแสดงผลได้อีกด้วย โดยคำสั่งทั้งหมดเราจะพูดกันในบทนี้

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ใส่พื้นหลังที่เป็นสี
    เราสามารถใส่พื้นหลังให้กับวัตถุในหน้าเว็บเพจของเราได้ ดังตัวอย่างเราใส่พื้นหลังให้กับ <body> , <h1> , <p> โดยการกำหนดสีก็ใช้แบบเดียวกับภาษา HTML

    2.ใส่พื้นหลังที่เป็นรูปภาพ
    ในตัวอย่างจะเป็นการใส่พื้นหลังที่เป็นรูปภาพ 

    3.คำสั่งให้แสดงพื้นหลังซ้ำในแนวตั้งเท่านั้น
    ตามปรกติการแสดงรูปพื้นหลังจะแสดงซ้ำๆกันจนเต็มหน้าเว็บเพจ ดังตัวอย่างที่ 2 อยู่แล้วแต่ในหัวข้อนี้จะให้แสดงซ้ำเฉพาะในแนวตั้งเท่านั้น 

    4.คำสั่งให้แสดงพื้นหลังซ้ำในแนวนอนเท่านั้น
    ตัวอย่างนี้จะเป็นคำสั่งที่ใช้แสดงพื้นหลังซ้ำเฉพาะแนวนอนเท่านั้น 

    5.คำสั่งให้แสดงพื้นหลังเพียงครั้งเดียว
    คำสั่งนี้จะเป็นการบังคับให้มีการแสดงรูปพื้นหลังเพียงครั้งเดียวเท่านั้น 

    6.คำสั่งกำหนดตำแหน่งของพื้นหลัง
    ในหัวข้อที่ 5 เรากำหนดให้แสดงพื้นหลังเพียงครั้งเดียว โดยตำแหน่งที่แสดงนั้นเป็นตำแหน่งซ้ายบนของเว็บเพจ ซึ่งในหัวข้อนี้จะระบุตำแหน่งให้กับพื้นหลังของเรา โดยใช้คำสั้ง background-position: ในตัวอย่างเราจะให้จัดเข้ากึ่งกลางของหน้า background-position: center ความจริงแล้วเราอาจจัดให้อยู่ตำแหน่งอื่นได้อีกเช่น 

     background-position: left เป็นตำแหน่งด้านซ้ายของหน้า 
     background-position: right top เป็นตำแหน่งด้านขวาบนของหน้า 
     background-position: center bottom เป็นตำแหน่งกึ่งกลางด้านล่างของหน้า 

    7.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็นเปอร์เซ็นต์
    ในหัวข้อที่แล้วเป็นการกำหนดตำแหน่งแบบคร่าวๆ ในหัวข้อนี้เราจะบอกตำแหน่งของพื้นหลังเป็น % โดยจะให้รายละเอียดได้มากว่าในหัวข้อที่แล้ว เราจะใช้คำสั่งbackground-position: X% Y% โดยจะมีค่า 2 ค่าให้เราใส่คือ 

     ค่า X เป็นตำแหน่งในแนวนอน
     ค่า Y เป็นตำแหน่งในแนวตั้ง

    โดย ค่า X = 0% , Y = 0% จะอยู่ที่มุมซ้ายบนของเว็บเพจ 

    8.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็น px (pixel)
    กำหนดพื้นหลังแบบ pixel จะใช้คำสั่ง background-position: Xpx Ypx โดยค่าที่เราจะต้องใส่มี 2 ค่าคือ 

     ค่า X เป็นระยะห่างจากขอบด้านซ้ายของพื้นหลัง
     ค่า Y เป็นระยะห่างจากขอบด้านบนของพื้นหลัง

    โดย ค่า X = 0px , Y = 0px จะอยู่ที่มุมซ้ายบนของเว็บเพจ 

    9.คำสั่งให้พื้นหลังอยู่กับที่
    โดยทั่วไปเมื่อเราเลื่อนหน้าเว็บเพจเพื่ออ่านเนื้อหา พื้นหลังก็จะเลื่อนตามด้วย แต่คำสั่งนี้จะทำให้พื้นหลังอยู่กับที่เคลื่อนที่เฉพาะเนื้อหาเท่านั้น 

    10.การใช้หลายๆคุณสมบัติโดยคำสั่งเดียว
    เราสามารถกำหนดหลายๆคุณสมบัติของพื้นหลังไว้ในคำสั่ง background: เพียงคำสั่งเดียว จะสังเกตุได้ว่า browser จะแสดงพื้นหลังที่เป็นภาพไว้บนพื้นหลังที่เป็นสีเสมอ 

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

การใช้งาน CSS

CSS

ในบทที่แล้วเราได้รู้แล้วว่าการเขียน CSS นั้นเขียนอย่างไร ในบทนี้จะเป็นการนำ CSS ไปใช้ การใช้งาน CSS จะแบ่งได้ 2 แบบคือ

คลิกที่หัวข้อเพื่อดูตัวอย่าง

1. การเขียน CSS ในเอกสาร HTML ของเราเลย

การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าเราต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML

<head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>

เราจะเขียน CSS ในส่วนของ <HEAD> จะเห็นได้ว่ามีการใช้ Comment HTML <!-- --> อยู่ด้วย เราใส่เพื่อป้องการผู้ใช้งาน browser ตัวเก่า ที่ยังไม่รู้จัก CSS จะแสดงผล Code CSS ของเรา ซึ่งเราจะใส่หรือไม่ก็ได้ 

อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง 

<p style = " color: blue ; margin-left: 20px "> ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px </p>

คำเตือน เมื่อมีหน่วยใน value ของเราเช่น margin-left: 20px หน่วยคือ px (pixel) จะต้องเขียนให้ค่าและหน่วยติดกันเสมอ ถ้าเว้นวรรคจะทำให้การแสดงผลผิดพลาดได้ 

2.การเขียน CSS แยกเป็นอีก 1 ไฟล์

การเขียนแบบนี้เป็นที่นิยมมากเพราะถ้าเราต้องการแก้หน้าตาเว็บเพจของเราก็แก้ไฟล์ CSS แค่ไฟล์เดียวก็สามารถทำให้หน้าเว็บเพจของเราเปลี่ยนไปได้หมด ซึ่งการใช้งานก็ให้เราเขียน Code ที่หน้า HTML ดังนี้ 

ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก 

<head> <link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" > </head>

ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก 

ตัวอย่างไฟล์ CSS 

hr {color: sienna} p {margin-left: 20px}

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

ทุกท่านอาจมีคำถามเกิดขึ้นว่า ถ้าเราใช้ทั้ง 2 แบบ จะเป็นอย่างไร คำตอบคือ browser จะแสดงผลโดยให้คำสั่ง CSS ที่อยู่ในหน้าเว็บเป็นคำสั่งที่ใช้แสดงผลหลัก เนื่องจากว่า browser จะโหลดไฟล์ CSS มาก่อน และเมื่อมีคำสั่งที่อยู่ใน เอกสาร HTML ซ้ำกับที่โหลดมา ก็จะยึดตัวที่อยู่ในเอกสาร HTML เป็นตัวหลัก ดังตัวอย่าง 

คำสั่ง CSS ที่โหลดเข้ามา 

h3  { color: red; text-align: left; font-size: 8pt }

คำสั่ง CSS ที่อยู่ในเอกสาร HTML 

h3  { text-align: right; font-size: 20pt }

คำสั่ง CSS ที่แสดงผล 

color: red; text-align: right; font-size: 20pt

บทนี้ก็จบลงเพียงเท่านี้ บทต่อไปจะเป็นคำสั่งที่ใช้งาน CSS กันจริงๆ ซักทีหลังจากที่เราศึกษาพื้นฐาน CSS มาหลายบทแล้ว