Article Image

Wed Jul 11 14:03:07 2018 [12794 views]

By Pongpat Weesommai

คุณสมบัติ CSS ที่ใช้กันบ่อยๆ

หลายๆ คนที่เพิ่งเรียน CSS ไปกับ MeCode ก็คงจะสงสัยว่ามี CSS properties(คุณสมบัติ) อะไรบ้างล่ะ ที่เราใช้กันบ่อยๆ และจำเป็นต้องรู้

ในบทความนี้เราจะมาเรียนรู้ 8 คุณสมบัติ CSS ที่จำเป็นต้องรู้และได้ใช้บ่อยๆ กัน~

1. Color (สี)

คุณสมบัติแรกที่ใช้บ่อยมากๆ ก็คือสี ไม่ว่าจะตกแต่งอะไรการใช้สีเป็นสิ่งสำคัญมากจริงๆ จากที่เราเคยเรียนกันไปแล้วว่าการเปลี่ยนสีตัวอักษรทำได้ตามโค้ดข้างล่างนี้

p {
  color: red;
}

อันนี้คือการเปลี่ยนสีตัวอักษรในย่อหน้าเป็นสีแดงทั้งหมด เราจะเห็นได้ว่าค่าของสีในที่นี้ใช้เป็นชื่อสีเลย แต่จริงๆ แล้วค่าของสีสามารถใช้ ค่า RGB(Red Green Blue) หรือ ค่า HEX(Hexadecimal) หรือ ค่า HSL(Hue Saturation Lightness) ถ้าเป็นคนที่พอได้แตะงานดีไซน์บ้างก็คงคุ้นเคยกับค่าพวกนี้อยู่แล้ว แต่สำหรับคนที่ยังไม่รู้ ทั้งสามค่านี้เป็นโค้ดตัวเลขที่แทนค่าของสี

rgb(255, 0, 0)


#ff0000


hsl(0, 100%, 50%)

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

ค่าแบบที่หนึ่งคือ RGB ซึ่งสังเกตได้ว่าค่าตำแหน่งแรกจะมีค่าที่ 255 ซึ่งแปลว่า R หรือ Red มีค่า 255 ซึ่งเป็นค่าสูงสุดของค่า RGB และอีกสองตำแหน่งมีค่าเป็น 0 หมายความว่าสีนี้เป็นสีแดงสดที่มีสีแดงเต็มๆ แบบไม่มีสีอื่นเจือปน

ค่าแบบที่สองคือ HEX หรือเลขฐานสิบหก ถ้าใครเก่งเลขหรือเคยเรียนโค้ดมาแล้ว จะเข้าใจว่าเลขฐานสิบหกคือตำแหน่ง นึงจะมีได้ถึง 16 ค่า (0 1 2 3 4 5 6 7 8 9 a b c d e f) สังเกตว่าสองตำแหน่งแรกมีค่าเป็น f ซึ่งก็คือค่าสูงสุดของค่า HEX หลักการทำงานของโค้ดนี้ก็เหมือน RGB ตรงที่ว่าสองตำแหน่งแรกเป็นสีแดง ตำแหน่งที่สามและสี่เป็นสีเขียว และตำแหน่งที่ห้าถึงหกเป็นสีน้ำเงิน สีแดงสดเลยมีโค้ดเป็น #ff0000 ก็คือสีแดงมีค่าสูงสุดและสีอื่นเป็น 0

ค่าแบบที่สาม ผู้เขียนไม่เคยใช้ 555+ เลยอธิบายหลักการทำงานของมันลำบากครับ ข้ามไปละกัน

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

ตัวอย่างการใช้คุณสมบัติสี

p {
  color: #4496d2;
}

เปลี่ยนสีทุกตัวอักษรในย่อหน้า

p {
  background-color: #4496d2;
}

เปลี่ยนสีพื้นหลังของย่อหน้า

p {
  border: 1px solid #4496d2;
  /* ถ้ามีกรอบอยู่แล้ว สามารถใช้คุณสมบัติข้างล่างเปลี่ยนสีได้เลย */
  border-color: #4496d2;
}

เปลี่ยนสีกรอบของย่อหน้า

2. Background (พื้นหลัง)

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

body {
  background-image: url("background.jpg");
}

โค้ดด้านบนเป็นการตั้งรูปภาพพื้นหลังให้กับ body ของเว็บ โดยค่าคือ url("background.jpg")

url("...") จะเป็นตัวบอกว่ารูปภาพรูปนี้อยู่ตรงไหน และชื่ออะไร ในกรณีข้างบนไฟล์รูปชื่อ background.jpg (ต้องมีนามสกุลไฟล์ด้วย) และอยู่ที่เดียวกับไฟล์ที่เรียกใช้รูปนี้จึงไม่จำเป็นต้องมีอะไรอยู่ข้างหน้าชื่อไฟล์ ถ้าไว้ในโฟลเดอร์ชื่อ images หน้าตาโค้ดก็จะเป็นประมาณนี้ url("images/background.jpg")

มีอีกสองคุณสมบัติที่ช่วยเรื่องรูปภาพพื้นหลังซึ่งก็คือ background-repeat และ background-position 

background-repeat ใช้เมื่อเวลาขนาดหน้าจอผู้ใช้มีขนาดที่ใหญ่กว่ารูปภาพพื้นหลังเรา จะให้รูปภาพเราแยกร่างเพื่อให้รูปภาพเต็มพื้นหลังหน้าจอ
ถ้าเราไม่กำหนด background-repeat คอมก็จะให้รูปภาพพื้นหลังเราแยกร่างทั้งแนวนอนและแนวตั้งเพื่อให้เต็มพื้นที่ตามรูปข้างล่างนี้

จะเห็นได้ว่ารูปภาพพื้นหลังเราได้ถูกแยกร่างออกมาเพื่อเติมเต็มพื้นหลัง แต่ถ้าเรากำหนด background-repeat ให้แยกร่างแค่แนวนอนตามโค้ดนี้

body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}

ซึ่ง repeat-x คือค่าที่ไว้ให้แยกร่างตามแนวนอน (ถ้าเราอยากได้แนวตั้งอย่างเดียวก็ใช้ repeat-y)

ผลลัพธ์จากการใช้ repeat-x

แล้วถ้าเราไม่อยากให้มันแยกร่างเลยหล่ะ เราก็สามารถใช้ค่า no-repeat ได้

ผลลัพธ์จากการใช้ค่า no-repeat

อีกคุณสมบัตินึงที่ช่วยในเรื่องรูปภาพพื้นหลังก็คือ background-position หรือก็คือจุดที่รูปภาพพื้นหลังเราจะเริ่ม ซึ่งโดยส่วนตัวการที่เราใช้รูปภาพเป็นพื้นหลังเราอยากจะให้จุดโฟกัสภาพอยู่ตรงกลาง เราก็เลยควรตั้งค่านี้เป็นตรงกลางเพื่อให้รูปภาพพื้นหลังสวยงามที่สุด เพราะส่วนใหญ่ภาพถ่ายหลายๆ อันจะมีจุดโฟกัสตรงกลางอยู่แล้ว

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

โค้ดข้างบนก็คือการตั้งรูปภาพเป็นพื้นหลังแบบ ไม่แยกร่าง และเริ่มจากตรงกลางของหน้า แทบจะทุกครั้ง ที่เราใช้รูปถ่ายเป็นรูปพื้นหลัง ก็จะมีโค้ดหน้าตาประมาณนี้ เพราะคงไม่อยากให้รูปถ่ายแยกร่าง และเราควรจะหารูปถ่ายที่ขนาดความกว้างและความสูงมากๆ เพื่อที่จะให้รูปถ่ายของเรากินพื้นที่ข้างหลังทั้งหมดเพื่อความสวยงาม แล้วถ้าเราหารูปถ่ายที่ขนาดความชัดๆ มากๆ ไม่ได้จริงๆ ล่ะ เราก็สามารถใช้คุณสมบัติ background-size ช่วยได้โดยการใช้ค่า cover เป็นการบอกให้คอมขยายภาพเราโดยที่ยังคงสัดส่วนที่ถูกต้องไว้ แต่ขอบๆ ของภาพอาจโดนตัดไปบ้างขึ้นอยู่กับขนาดหน้าจอของผู้ใช้

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

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

3. Width/Height (ความกว้าง/ความสูง)

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

  • px - หน่วยเป็น pixels
  • em - หน่วยๆ นึงซึ่ง 1 em = ขนาดของฟอนต์ปัจจุบัน
  • rem - มีขนาดเท่ากับ em แต่ไม่ปวดหัวกับเรื่อง inheritance (จะมาอธิบายให้ฟังในบทความอื่น)
  • % - เป็นเปอร์เซ็นต์เทียบกับพื้นที่ๆ พ่อแม่ใช้
  • auto - อัตโนมัติ

จากหน่วยทั้งหลายข้างบนอาจจะทำให้หลายๆ คนงงกันเลยทีเดียว แต่เรามาลองดูตัวอย่างเพื่อให้เข้าใจกันง่ายขึ้นดีกว่า

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    div {
      background-color: blue; /*ตั้งสีพื้นหลังเพื่อให้เห็นdiv*/
      height: 300px;
      width: 50%;
    }
  </style>
  <body>
    <div></div>
  </body>
</html>

จากโค้ดข้างบนเราจะเห็นได้ว่าเรามี element div (ย่อมาจาก division ซึ่งใช้เป็นภาชนะให้ elements อื่นซะส่วนใหญ่) และเป็นลูกของ body และกำหนดคุณสมบัติความสูงเป็น 300px และความกว้างเป็น 50% โดยค่าเริ่มต้นของ body จะกินพื้นที่แนวนอนทั้งหน้าจออยู่แล้ว เพราะฉะนั้นตัว div จะมีความสูง 300 พิกเซลและความกว้างที่ 50% ของหน้าจอผู้ใช้

ผลลัพธ์ของโค้ดข้างบน

เราจะเห็นได้ว่าความกว้างของ div คือ 50% ของหน้าจอจริงๆ และความสูงก็ 300 พิกเซล แต่ละหน้าจออาจจะเห็นไม่เหมือนกันขึ้นอยู่กับความคมชัดของหน้าจอผู้อ่าน ถ้าเข้าใจเรื่องพิกเซลก็จะเข้าใจเองว่าทำไมถึงอาจไม่เหมือนกันเมื่อมองด้วยตาเปล่า ในหน่วยของ em และ rem จะมาเจาะลึกให้ในบทความหลังจากนี้นะครับ เพราะค่อนข้างละเอียดพอตัว เริ่มต้นยังไม่จำเป็นต้องใช้ก็ได้เน้อ

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

img {
  width: 100%;
  height: auto;
}

4. Font (ฟอนต์)

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

การเปลี่ยน font-family หรือก็คือการเปลี่ยนฟอนต์ใน Microsoft Word เปรียบได้กับการเปลี่ยนลายมือนั้นเอง เช่นเปลี่ยนไปใช้ Times New Roman หรือ Angsana New ที่หลายๆ คนคงคุ้นเคยกัน ในที่นี้จะพูดถึงการเปลี่ยนฟอนต์ที่มากับในเครื่องอย่างเดียว ถ้าฟอนต์ที่ผู้อ่านโหลดมาเองจะพูดในบทความหลังนะครับ เพราะมันซับซ้อนกว่านี้หน่อย

p {
  font-family: "Angsana New", serif;
}

เวลาตั้ง font-family ควรที่จะใส่มากกว่าหนึ่งฟอนต์เพื่อให้เวลาโหลดฟอนต์ที่เราต้องการอันแรกไม่สำเร็จ ให้ใช้ฟอนต์ที่เป็นฟอนต์ทั่วไปที่ใกล้เคียงกับฟอนต์ที่เราต้องการ  จากตัวอย่างโค้ดข้างบนเราจะเห็นได้ว่า เราเลือกที่จะใช้ฟอนต์ Angsana New และถ้าโหลดฟอนต์ไม่สำเร็จให้ใช้ serif แทนซึ่งเป็นหนึ่งในฟอนต์ทั่วไป สามารถดูฟอนต์ทั่วไปที่ทุกเครื่องรองรับได้ที่นี้

นอกจาก font-family ยังมี font-style font-weight และ font-size ที่ใช้กันบ่อยๆ ซึ่งเกี่ยวข้องกับคุณสมบัติ font

font-style จากที่เคยเห็นในวีดีโอ CSS จะเป็นการทำให้ตัวอักษรปกติหรือเอียง (italic) ก็ได้ตามตัวอย่างโค้ดด้านล่าง

p {
  font-style: italic;
}

font-weight คือการปรับความหนาของตัวอักษร สามารใส่ค่าเป็นคำเช่น normal (ปกติ) หรือ bold (หนา) หรือจะใส่เป็นตัวเลขความหน้าของแต่ละฟอนต์ที่เราใช้ก็ได้เช่น 100 200 300 400 500 600 700 800 900 ยิ่งตัวเลขมีค่าสูงความหนาก็จะยิ่งมีมากขึ้น แต่ก็ต้องดูด้วยว่าฟอนต์ที่เราใช้นั้นสนับสนุนความหนาถึงตัวเลขที่เท่าไหร่

p {
  font-weight: bold;
  /* ใช้เป็นตัวเลขก็ได้ */
  font-weight: 600;
}

font-size คือการปรับขนาดฟอนต์ โดยใช้หน่วยเดียวกับพวกความกว้างความสูง จะใช้เป็น px หรือ em หรือ rem หรือ % ก็ได้

p {
  font-size: 20px;
  /* ใช้เป็นเปอร์เซ็นต์ */
  font-size: 20%;
}

5. Border (กรอบรอบๆ element)

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

p {
  border: 2px solid #4496d2;
}

คุณสมบัติ border จะรับค่าอยู่สามค่าคือ ความหนาของเส้นกรอบ(รับเป็นหน่วยเดียวกับพวกความกว้าง/สูง) สไตล์ของกรอบ และสีของกรอบ ซึ่งจะได้อะไรแบบข้างล่างขึ้นมา

ข้าคือกรอบ!!!

สไตล์ของกรอบทั้งหมดจะมีตามข้างล่างนี้ สามารถเลือกที่จะใช้สไตล์ไหนก็ได้ตามที่ต้องการ

border: 2px dotted #4496d2;

border: 2px dashed #4496d2;

border: 2px solid #4496d2;

border: 2px double #4496d2;

border: 2px groove #4496d2;

border: 2px ridge #4496d2;

border: 2px inset #4496d2;

border: 2px outset #4496d2;

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

p {
  border: 2px solid #4496d2;
  border-width: 2px 8px 2px 8px;
}

กรอบด้านข้างที่หนากว่ากรอบข้างบนและล่าง

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

p {
  border: 2px solid #4496d2;
  border-color: red green blue yellow;
}

กรอบที่สีแต่ละด้านไม่เหมือนกันครัช

หรือถ้าเราอยากได้กรอบแค่ด้านใดด้านนึง ไม่ต้องการทุกด้านก็สามารถทำได้ด้วยการ ใช้คุณสมบัติ border-ด้านที่ต้องการ เช่น border-top border-right border-bottom border-left

p {
  border-left: 4px solid #4496d2;
}

มีแต่กรอบด้านซ้ายอย่างเดียว

6. Margin (พื้นที่ว่างรอบๆ element)

ในการตกแต่ง มีหลายๆ ทีที่เราอยากให้มีช่องว่าง เช่นที่เว้นว่างระหว่างหัวข้อเรื่องและย่อหน้าอะไรงี้ เราสามารถใช้คุณสมบัติ margin ในการทำสิ่งๆ นี้ได้

p {
  margin: 50px;
}
p {
  margin: 50px 50px 50px 50px;
}

โค้ดด้านบนมีค่าเท่ากันทั้งสองโค้ด เราน่าจะคุ้นๆ กันอยู่แล้ว ว่ามันเหมือนคุณสมบัติ border-width และ border-color เลยที่เราสามารถใส่ค่าไปค่าเดียวเพื่อเป็นค่าของทุกด้าน หรือใส่แยกทีละด้านก็ได้หากต้องการให้แต่ละด้านมีค่าไม่เท่ากัน(ซึ่งก็คือการวนตามเข็มนาฬิกาเหมือนกัน) หรือถ้าเราต้องการจะมีพื้นที่ว่างแค่ด้านใดด้านนึง ก็ทำได้เช่นกัน โดยใช้คุณสมบัติ margin-ด้านที่ต้องการ เช่น margin-top margin-right margin-bottom margin-left

h3 {
  margin-top: 10px;
  margin-left: 5px;
}
p {
  margin-top: 20px;
  margin-left: 5px;
}

จากโค้ดด้านบนเราจะได้ผลลัพธ์ตามข้างล่างนี้ครับ

CSS เจ๋งยังไง

ตกแต่งได้แบบไร้ขีดจำกัด


7. Padding (พื้นที่ว่างรอบๆ เนื้อหาของ element)

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

margin

border

padding

เนื้อหา

จากรูปภาพข้างบนน่าจะทำให้หลายๆ คนเข้าใจได้ว่า margin กับ padding ต่างกันยังไงนะครับ วิธีใช้ก็เหมือน margin เลย

p {
  padding: 50px;
}
p {
  padding: 50px 50px 50px 50px;
}

หรือต้องการแค่ด้านใดด้านนึง ก็สามารถทำได้เช่นกัน

p {
  padding-left: 5px;
}

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

8. Float (ลอย)

มาถึงคุณสมบัติสุดท้ายของบทความนี้กันสักทีนะครับ ยาวเหลือเกินฮะบทความนี้ คุณสมบัติ float คือมีไว้ในการให้ element ลอยไปด้านซ้าย หรือด้านขวาของหน้า

div:first-child {
  width: 100px;
  height: 100px;
  background-color: #4496d2;
  float: left;
}
div:last-child {
  width: 100px;
  height: 100px;
  background-color: #f0a920;
  float: right;
}
 

ลอยซ้าย

ลอยขวา


ทิ้งท้าย

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

ขอขอบคุณรูปภาพจาก picjumbo.com from Pexels และ ข้อมูลจาก w3schools

เกี่ยวกับผู้เขียน

Author's Profile Picture
Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom

แสดงความคิดเห็น