สอนเขียนเว็บบทที่ 2 CSS ภาค 1

• Facebook
• Twitter
• Line

ในบทความนี้หลังจากเราเรียนรู้เกี่ยวกับพื้นฐานของ html แล้ว css ก็เป็นส่วนสำคัญสำหรับเว็บสมัยนี้ที่เราต้องเรียนรู้โดยเราจะสอนพื้นฐานของ css ต่อเพื่อให้คุณสามารถทำหน้าเว็บไซต์ให้สวยงามเหมือนเว็บปัจจุบันที่เขาทำกันครับ

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheets แล้วมันคืออะไรล่ะ ? มันกำเนิดมาเพื่อแก้ไขปัญหาของการแสดงผลใน html อีกทีครับแต่ก่อนมันไม่มีภาษานี้มันทำให้เราไม่สามารถแก้ไข สี รูปแบบ layout ต่างๆของ html ได้ เราอาจจะแก้ไขบาง tag ได้จาก attribute ของมันแต่มันตอบสนองไม่พอสำหรับการทำเว็บให้สวยครับ

แต่ก่อนในการวางโครงสร้างเว็บนั้นเขาใช้ tag table ซึ่งจากที่เราเรียนรู้ไปแล้วในบท html นั้นการจะสร้าง table มาหนึ่งอันเราต้องซ้อน tag table ไปอีกหลายชั้นยกตัวอย่างสมมติว่าผมต้องการสร้างเว็บให้มีส่วน header content sidebar footer หน้าตาเป็นแบบด้านล่างครับ

ถ้าเป็นสมัยก่อนเราใช้ table หน้าตา code จะเป็นอย่างนี้ครับ

  
  


  

    

      
ส่วนบน
    
    

      
ส่วนเนื้อหา
    
    

      
ส่วนล่าง
    
  

ผลลัพท์หน้าตาเป็นแบบนี้ครับ

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

  
  

  

    
ส่วนบน
    
ส่วนเนื้อหา
    
ส่วนล่าง
  

ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ

อย่าเพิ่งตกใจกับ code นะครับใจเย็นๆผมจะค่อยๆอธิบาย ตรงจุดนี้ผมแค่อยากจะเปรียบเทียบให้เห็นภาพก่อนว่า ทำไมเราจึงต้องเรียนรู้ ตรงนี้ต่างหากเป็นใจความสำคัญเพราะเราจะเห็นแล้วว่าการจัดการ การแสดงผล มันทำได้ตรงจุดมากกว่าการใช้ table tag เพียงอย่างเดียวข้อดีคือ

• เขียน code น้อยกว่า
• จัดการ การแสดงผลได้ตรงกับที่เราอยากได้มากกว่า
• แยก code ออกมาเป็นส่วนๆได้ไม่ต้องยุ่งเกี่ยวกันครับ

หากคุณสังเกตุดีๆจะเห็นว่าการใช้ table tag ในการจัดโครงสร้าง ( ต่อไปในบทความจะขอเรียกว่า layout ) จะทำได้ยากกว่าจะยุ่งยากกว่าการจะสร้างกล่องขึ้นมา 1 อันคุณต้องเขียน code ถึง 3 tag ในการซ้อนกันครับดู code ด้านล่างเพื่อเปรียบเทียบกัน

// html table layout

  

     
ส่วนเนื้อหา
  

// layout 
ส่วนเนื้อหา

เนี้ยแหละครับที่ผมบอกคุณว่าทำไมโลกถึงพัฒนาอีกภาษามาจัดการการแสดงผลเพราะมันง่ายขึ้น สะดวกขึ้น จัดการง่ายขึ้นครับ

รูปแบบภาษา ( syntax )

ต่อมาเรามาเรียนรู้ว่าการเขียน เนี้ยมันต้องเขียนอะไรยังไง นะครับโดยหลักๆ การเขียน รูปแบบจะเป็นแบบนี้ครับ

// แบบนี้คือเขียนใส่ใน tag นั้นๆเลย ไม่นิยมทำแบบนี้
test

// แบบนี้สำหรับการเขียนในไฟล์เขียนในระหว่าง style tag ส่วนใหญ่มักจะใส่อยู่ระหว่าง head tag 
tag/class/id ที่เราอยากเปลี่ยนค่า {
    ค่าที่อยากจะเปลี่ยน: ค่าใหม่;
}

เรามาดูการเขียนแบบแรกก่อน เราสามารถเริ่มเขียน โดยการใส่ attribute ว่า “style” ใน tag ต่างๆของ html ได้เลย โดยเราเรียกการเขียนแบบนี้ว่า inline ไปดูตัวอย่างกันครับ

ตัวอักษรสีแดงและขนาดตัวอักษร 24 pixel
 

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

ต่อมามาดูอีกแบบว่าเวลาเราเขียนนั้นเราจะเขียนใน style tag ยังไง อย่างแรกให้คุณสร้าง style tag อยู่ภายใต้ head tag นะครับตัวอย่างอยู่ข้างล่างครับ

  
  <--------- ใส่ตรงนี้

โดยเราต้องเขียน code อยู่ภายใต้ style tag ครับ ณ ตอนนี้ให้เราเข้าใจแบบนี้ก่อน โดย code ด้านล่างจะเป็นการเปรียบเทียบว่าถ้าเราจะเริ่มเขียน หน้าตามันจะเป็นแบบนี้แต่ในส่วนภายใต้ style เราจะไม่ได้เขียนแบบนั้นจริงๆนะครับ

  
  

  
oxygenyoyo.com

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

p {
  background: red;
}

และเวลาเราจะทำการเรียกใช้ไฟล์ เราต้องใช้ link tag ครับตามด้านล่างเลย

	
	
	


	
ทดสอบการเปลี่ยนสีพื้นหลังโดยการเรียกใช้ไฟล์แยก

หากคุณจำไม่ได้ว่า link tag ต้องเขียนยังไงให้คุณเขียนว่า link แล้วกด tab ใน vscode ได้เลยครับ ในบทความคุณสามารถแก้ไขที่ไฟล์ style.css ได้เลยนะครับหรือจะทำตามในบทความก็ทำได้เช่นเดียวกัน แล้วทำไมต้องตั้งชื่อว่า style.css ? เพราะว่าเป็นชื่อสากลครับ จริงๆจะตั้งชื่อว่าอะไรก็ได้ครับ

Ex: 1. การเขียน style แบบนี้เรียกว่าอะไร

ตัวใหญ่

Ex: 2. หากเราต้องเขียน css ในไฟล์ html เราจะเขียนภายใต้ tag ชื่อว่าอะไร ?

Ex: 3. หากเราต้องการแยกไฟล์ css เพื่อเขียนแต่ css เราจะเรียกไฟล์ css เข้ามาใช้งานกับไฟล์ html ด้วย tag ชื่อว่าอะไร ?

ต่อไปเรามาเริ่มลองหยิบ tag กันเลยดีกว่าจากตัวอย่าง code ด้านบนเราจะลองมาเปลี่ยนแปลงค่าของ p tag กันดูครับครับ โดยเราจะมาเริ่มลองเปลี่ยนแบบง่ายๆกันก่อนเราจะเปลี่ยน สี ตัวอักษรทั้งหมดที่อยู่ภายใต้ p tag อันนี้นะครับหน้าตาการเขียนจะเป็นแบบนี้ครับ

  
  

  
oxygenyoyo.com สอนการเขียน css

จาก code ด้านบนรูปแบบจะเป็นแบบนี้ครับ

• ส่วนที่เราอยากเปลี่ยนแปลงค่าคือ tag ที่ชื่อว่า p
• แล้วตามด้วย ปีกกาเปิด
• เสร็จแล้วค่าที่เราอยากเปลี่ยนแปลงคือ color
• ตามด้วย โคลอน ( : )
• แล้วค่าใหม่ที่เราต้องการเปลี่ยนแปลงคือ red ( สีแดง )
• เสร็จแล้วตามด้วยปีกกาปิด

ผลลัพท์ของ code ด้านบนคือ

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

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

สิ่งที่เราต้องการเปลี่ยนแปลงค่าครั้งนี้คือ tag p เหมือนเดิมและค่าที่จะเปลี่ยนแปลงตอนนี้มีค่าใหม่ที่เราไม่รู้จักคือขนาดของตัวอักษร ซึ่งมันคือ font-size นั่นเองครับเอาล่ะมาลองกันดู

  
  

  
oxygenyoyo.com สอนการเขียน css

จากโจทย์เราได้เรียนรู้อะไรบ้าง ? เราได้รู้ว่าการเปลี่ยนแปลงค่าสามารถทำได้มากกว่าหนึ่งและการเขียนรูปแบบจะเป็นทีละบรรทัดโดยทุกบรรทัดจะต้องมี semi-colon ในการปิดท้ายเพื่อบอกให้ computer รู้ว่าอันนี้จบการเปลี่ยนค่าของสิ่งนี้แล้ว และเราสามารถแปลงเปลี่ยนค่าใหม่ในบรรทัดต่อไปได้

ต่อไปถ้าโจทย์ให้เราแก้ไขสถานการณ์ที่มี tag p สองอันโดย tag p อันแรกนั้นเป็นสีแดง และ tag p อันที่สองให้เป็นสีเทา ( #c4c4c4 ) โดยทั้งคู่มีขนาดตัวอักษรเป็น 24px โดย code เริ่มต้นจะเป็นแบบนี้ครับ

  
  
  


  
oxygenyoyo.com สอนการเขียน css
  
oxygenyoyo.com สอนการเขียน html

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

  
  

  
oxygenyoyo.com สอนการเขียน css
  
oxygenyoyo.com สอนการเขียน html

ผลลัพธ์ที่เราจะได้คือ

ซึ่งผลลัพธ์ที่เราได้นั้นไม่ถูกต้อง เพราะจากโจทย์เขาต้องการให้ tag p ตัวที่สองนั้นเป็นสีเทา ( #c4c4c4 ) ณ ตอนนี้ความรู้ของเราคือเราทำได้เท่านี้ คราวนี้แก้ไขยังไงให้เราสามารถเลือกได้ว่า อยากจะให้ tag นั้นเปลี่ยนค่าสีแค่คนเดียว หรือให้ tag บางกลุ่มบางอันมีการเปลี่ยนแปลงค่าตามที่เราอยากได้ เอาล่ะ ! ผมจะพาไปคุณไปรู้จักสิ่งใหม่ๆ ที่เราจะใช้กันต่อไปอีกยาวนั่นก็คือ class และ id ครับไปอ่านกันต่อเลย

Class และ ID

อย่างแรกที่คุณต้องรู้ก่อนเลยนั่นก็คือ ทุกๆ tag ใน html เราสามารถใส่ attribute ว่า class หรือ id ได้ ตัวอย่างเช่น

ทดสอบสีน้ำตาล
ทดสอบสีแดง
ทดสอบการใส่ทั้ง class และ id

เราจะสามารถตั้งชื่อของ id หรือ class ได้แบบตามใจเราและจะสังเกตุว่ามันใส่ได้หมดเลยแล้วมันใช้งานแตกต่างกันอย่างไร ? คำตอบก็คือสำหรับ id นั้นย่อมาจาก identify หรือเป็นสิ่งที่ระบุเจาะจงสำหรับ tag นั้นๆ เราจะใช้บอกว่า tag นี้จะมีแค่ 1 เดียวที่ชื่อ id นี้เช่น ถ้าสมมติมี id ว่า ‘a’ ในหน้าเพจนั้นที่ถูกโหลดจะไม่มีตัวไหนอีกแล้วที่จะมี attribute id ว่า ‘a’ ครับ ส่วนใหญ่แล้วการใส่ attribute id นั้นเราจะใช้กับ javascript นะครับถามว่าใน css มีใช้ไหมก็มีบางแต่ไม่เยอะถ้าไม่จำเป็นจริงๆก็ใช้ class ดีกว่าครับ การใช้งานเราจะหยิบ tag ด้วย id โดยใช้ #[ชื่อของ id] นั้นๆไปดูตัวอย่างกันครับ

ทดสอบ id ชื่อ aaa
แสดงที่อยู่

ส่วน class จะสามารถใช้ร่วมกันได้ ให้นึกว่าเหมือนการ ตั้งชื่อกลุ่ม แล้วกันว่าถ้าเป็นชื่อกลุ่มนี้เราจะให้มันมีค่าอะไรบ้าง สามารถใช้หลายๆ ชื่อ class รวมกันได้ครับ โดยการหยิบ class นั้นเราจะหยิบด้วยการใช้ จุด (.) นำแล้วตามด้วยชื่อ class นั้นๆครับไปดูตัวอย่างกัน

ทดสอบการใส่ class มากกว่า 1

จากตัวอย่าง code ข้างบนนั้นเรามีการกำหนดว่าชื่อว่า big-text (โดยส่วนใหญ่แล้วเราจะตั้งชื่อแล้วแยกด้วย ขีดกลาง ถามว่าจำเป็นไหม เรียกว่าเป็นหลักสากลที่เขาทำกันดีกว่าครับ ) กับ red-text โดยเราอยากให้ tag p นั้นมีทั้งขนาดตัวอักษรและมีสีตัวอักษรสีแดง เราจึงเอา class มาใช้ทั้งสองอัน นั่นก็คือ big-text red-text class จะถูกแบ่งด้วยเว้นวรรคนะครับ

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

  
  

  
oxygenyoyo.com สอนการเขียน css
  
oxygenyoyo.com สอนการเขียน html

คำถามก็คือทำไมเราต้องตั้งชื่อ class ‘big-text’ ด้วยเราสามารถหยิบ tag p ตรงๆได้เลย ถูกครับสำหรับโจทย์นี้คุณสามารถทำแบบนั้นได้ แต่ที่ผมตั้งชื่อ class big-text มานั้นเพื่อในอนาคตสมมติว่าในหน้านั้นเรามี tag p เพิ่มมาอีกถ้าเราตั้งไว้ว่าเราจะ หยิบ tag p แล้วมีค่าตัวอักษรเป็น 24px แปลว่า tag p ทุกอันในหน้าจอ จะถูกปรับเป็นตัวอักษรใหญ่หมดซึ่งเราคงไม่ได้ต้องการแบบนั้นครับ

Ex: 4. ถ้าเราจะหยิบ tag ด้วยชื่อ class เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?

Ex: 5. ถ้าเราจะหยิบ tag ด้วยชื่อ id เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?

ค่าความสำคัญ หรือ ค่าพลัง

โดยปกติแล้ว code จะถูกอ่านจาก บนลงล่าง แต่ถ้าหากคุณเรียนรู้เกี่ยวค่าของความสำคัญหรือค่าพลังนั้น การอ่านจากบนลงล่างนั้นจะไม่มีผลเลย

คราวนี้หลังจากเราเรียนรู้เรื่องการเขียนแบบ inline css หรือแม้แต่การเขียนแยกไปอยู่ในส่วน style เรื่อง class และ id คราวนี้มันจะมีคำถามว่าแล้วถ้าเราเขียนผสมๆกันแล้วค่าไหนจะถูกใช้หรือไม่ถูกใช้กันแน่ ยกตัวอย่าง code ด้านล่าง

  
  

	
oxygenyoyo.com สอนเขียน css

จากตัวอย่างข้างบนนั้นเราทุกอย่างที่เราเรียนรู้เลย แล้วผลลัพธ์เป็นแบบนี้ครับ

ผลลัพธ์นั้นเป็น สีเขียว นั่นก็เพราะว่าค่าความสำคัญหรือค่าพลังจาก inline โดยค่าความสำคัญหรือค่าพลังนั้นแจกแจงได้แบบนี้ครับ

• ค่า inline หรือที่ใส่เป็น attribute style มีค่า 1000
• ค่า id เวลาที่เราใช้งาน #[ชื่อ id] อย่างนี้มีค่า 100
• ค่า class ที่เราใช้งาน .[ชื่อ class] อย่างนี้มีค่า 10
• สุดท้ายเวลาที่เราหยิบ tag html ทั่วๆไปเช่น p แบบนี้มีค่า 1

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

ทำไมเราต้องเรียนรู้เรื่องนี้ ?

เพราะเราจะรู้ว่าหากเราต้องการแก้ไขงานคนอื่นหรือการหยิบใช้ framework ( อันนี้คุณยังไม่ต้องรู้จักตอนนี้นะครับ แค่จำไว้ก่อนสำหรับคำว่า framework ) เราจะสามารถแก้ไขโดย code เราจะไม่กระทบต่อ code ของคนเก่าที่ทำงานครับ

จริงมีวิธีเขียนแบบที่ค่าพลังมันจะชนะเสมอคือการใส่คำว่า !important ถ้าเราใส่แบบนี้ code ชุดนั้นจะถูกเรียกใช้งานทันทีวิธีเขียนคือ

.red-text {
   color: red !important;
}

แต่ ไม่แนะนำให้ใช้ไม่ว่ากรณีใดๆ เพราะว่าการเขียนแบบนี้จะทำให้คนมาทำงานต่อลำบากมาก เพราะไม่รู้ว่ามันวาง code นี้ไว้ที่ไหนอย่างไร หากสนใจอ่านต่อได้ที่นี่ครับ https://www.designil.com/css-specificity-and-hack/

เฉลยการบ้าน

1. inline
2. style tag
3. link tag
4. ใช้ . ( dot )
5. ใช้ #

สรุปก่อนจบ

ในบทความนี้คุณได้เรียนรู้วิธีการเขียนและการหยิบ tag ต่างๆใน html โดยผมอยากให้คุณทดสอบการหยิบ tag ต่างๆหรือถ้าสงสัยอะไรสามารถ comment ด้านล่างได้เลยครับ โดยเมื่อคุณคุ้นเคยกับการเขียนแบบนี้ ในบทต่อไปเราจะไปเรียนรู้ว่าเวลาทำเว็บจริงๆแล้วต้องคิดยังไง ออกแบบยังไงให้เราสามารถเขียนกับ html ให้ออกมาเหมือนในรูป หรือเว็บอื่นๆครับ

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

กลับไปหน้าสารบัญ

https://oxygenyoyo.com/2021/01/18/index-getting-started-code-website/

• Facebook
• Twitter
• Line