แบบฝึกหัด - จัดรูปแบบ HTML ของคุณด้วย CSS

  • 10 นาที

Cascading Style Sheets (CSS) ช่วยให้คุณระบุลักษณะที่หน้าของคุณควรมีลักษณะเป็นอย่างไร แนวคิดพื้นฐานคือการกําหนดสไตล์ที่ควรใช้สําหรับองค์ประกอบที่คุณใช้ภายในหน้า HTML ของคุณ ในขณะที่องค์ประกอบ HTML กําหนดเนื้อหาของคุณ สไตล์ CSS จะกําหนดลักษณะของเนื้อหานี้

ตัวอย่างเช่น คุณสามารถใช้มุมมน หรือให้พื้นหลังไล่ระดับสีกับองค์ประกอบ หรือคุณสามารถใช้ CSS เพื่อระบุลักษณะที่แสดงและการตอบสนองของไฮเปอร์ลิงก์เมื่อคุณโต้ตอบกับองค์ประกอบได้ คุณยังสามารถทําเค้าโครงหน้าที่มีความซับซ้อนและเอฟเฟ็กต์ภาพเคลื่อนไหวได้

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

ในแบบฝึกหัดนี้ คุณใช้สไตล์ CSS กับองค์ประกอบหน้า HTML และเพิ่มโค้ด CSS เพื่อกําหนดธีมสว่างและสีเข้มของคุณ จากนั้น คุณตรวจสอบผลลัพธ์ในเครื่องมือสําหรับนักพัฒนาเบราว์เซอร์ของคุณ

CSS ภายนอก

ในหน่วยก่อนหน้าเกี่ยวกับ HTML คุณเชื่อมโยงไปยังไฟล์ CSS ภายนอกจาก HTML

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

ประโยชน์อย่างหนึ่งของ CSS ภายนอกคือ หน้า HTML หลายหน้าสามารถเชื่อมโยงไปยังไฟล์ CSS เดียวกันได้ ถ้าคุณเปลี่ยนแปลง CSS การจัดรูปแบบของคุณจะได้รับการอัปเดตสําหรับแต่ละหน้า เมื่อคุณใช้ไฟล์ HTML สําหรับเนื้อหาหน้าของคุณ ไฟล์ CSS สําหรับการจัดรูปแบบและไฟล์ JavaScript สําหรับการโต้ตอบ เรียกว่า การแยกข้อกังวล

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

กฎ CSS

กฎ CSS คือวิธีที่คุณใช้สไตล์กับองค์ประกอบ HTML กฎ CSS มีตัวเลือก ซึ่งใช้เพื่อแสดงองค์ประกอบ (หรือองค์ประกอบ) ที่ควรใช้สไตล์

ใน Visual Studio Code เปิดไฟล์ main.css และป้อนข้อมูลต่อไปนี้:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

ส่วนย่อยของโค้ดนี้ประกอบด้วยกฎสองข้อ แต่ละกฎมี:

  • ตัวเลือก body และ ul คือตัวเลือกของกฎสองข้อ และใช้เพื่อเลือกองค์ประกอบที่นําสไตล์ไปใช้
  • วงเล็บปีกกาเปิด ({)
  • รายการของรูปแบบ ประกาศ ที่กําหนดว่าองค์ประกอบที่เลือกควรมีลักษณะเป็นอย่างไร
  • วงเล็บปีกกาปิด (})

ตัวอย่างเช่น ตัวเลือก ul จะเลือกองค์ประกอบ HTML <ul> ในหน้าเพื่อใช้ลักษณะ การประกาศจะถูก font-family: helveticaและ กําหนดลักษณะที่ควรเป็น ชื่อคุณสมบัติ คือ font-familyและ ค่า คือ helvetica

ตามที่คุณเห็นถัดไป คุณสามารถกําหนดชื่อแบบกําหนดเองของคุณสําหรับองค์ประกอบได้

ตัวเลือก

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

  1. คัดลอกโค้ดต่อไปนี้และเพิ่มลงในไฟล์ CSS ของคุณ วางไว้หลังวงเล็บปีกกาปิดสําหรับตัวเลือก ul ที่คุณเพิ่มก่อนหน้านี้

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    โค้ดก่อนหน้าประกอบด้วยกฎ CSS สามกฎ โดยมีกฎสองข้อสุดท้ายที่ใช้แอตทริบิวต์แบบกําหนดเองเพื่อเลือกองค์ประกอบ: .list และ #msg

    • .list คือตัวเลือกคลาส แต่ละองค์ประกอบ HTML ที่ประกอบด้วยชุดแอตทริบิวต์ class เป็น list จะรับลักษณะที่กําหนดไว้ภายในตัวเลือกนี้

    • #msg เป็นตัวเลือก ID องค์ประกอบ HTML ที่มีแอตทริบิวต์ id ที่ตั้งค่าเป็น msg จะรับลักษณะที่กําหนดไว้ภายในตัวเลือกนี้

    ชื่อที่คุณใช้สําหรับตัวเลือกของคุณสามารถเลือกได้ตามอําเภอใจ ตราบใดที่พวกเขาตรงกับที่คุณได้กําหนดไว้ใน HTML

  2. บันทึกงานของคุณโดยการเลือก Control+S บน Windows หรือคําสั่ง + S บน macOS

ดูในเบราว์เซอร์

  1. เมื่อต้องการแสดงตัวอย่างโดยใช้ Visual Studio Code ให้คลิกขวาที่ไฟล์ index.html ใน Explorer จากนั้นเลือก เปิดในเบราว์เซอร์เริ่มต้น

    สําคัญ

    แม้ว่าคุณเพิ่งแก้ไขไฟล์ main.css เพื่อแสดงตัวอย่างการเปลี่ยนแปลง คุณควรเลือกไฟล์ index.html

    เว็บเพจเปิดขึ้นในเบราว์เซอร์เริ่มต้นของคุณ

    สกรีนช็อตของเว็บไซต์ที่ใช้สไตล์ฟอนต์

ลักษณะแบบอักษรที่คุณคาดว่าจะเห็นคือรูปแบบใด เป็นเรื่องน่าสนใจที่สไตล์ที่นําไปใช้กับ <body> สืบทอดกันในองค์ประกอบ <h1> เราไม่ได้กําหนดสิ่งใดสําหรับ <h1>แต่ได้รับแบบอักษรที่กําหนดไว้ใน <body> กลไกการรับช่วงนี้จากองค์ประกอบหลักไปยังลูกหลานของพวกเขาเป็นหนึ่งในด้านสําคัญของ CSS อย่างไรก็ตาม องค์ประกอบ <li> มีแบบอักษรที่แตกต่างกัน สไตล์สําหรับองค์ประกอบ <li> จะแทนที่ชุดลักษณะสําหรับ <body> เนื่องจากองค์ประกอบ <li> เป็นโหนดสืบทอดขององค์ประกอบ <ul> ซึ่งคุณได้กําหนดลักษณะไว้

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

เมื่อต้องการโหลดแท็บใหม่ กด F5ซึ่งเป็นแป้นพิมพ์ลัดการรีเฟรช หรือกด Ctrl + R บน Windows หรือ Linux และ Command+R บน Mac

เพิ่มธีมสีอ่อน

ถัดไป เพิ่มการสนับสนุนสําหรับธีมสีสําหรับเว็บไซต์ของคุณ เริ่มต้นโดยการกําหนดธีมสีอ่อนโดยใช้รหัสสี hex

  1. ในไฟล์ CSS ของคุณ (main.css) ให้เพิ่มโค้ดต่อไปนี้ที่ส่วนท้ายของไฟล์

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    ในตัวอย่างนี้ #000000 ระบุสีดําสําหรับสีฟอนต์ และ #00FF00 จะระบุสีเขียวสําหรับสีพื้นหลัง

  2. ในไฟล์ HTML ของคุณ (index.html) ให้อัปเดตองค์ประกอบ <body> ด้วยชื่อคลาส light-theme ตอนนี้ตัวเลือกคลาสสําหรับธีมสีอ่อนจะใช้สไตล์ได้อย่างถูกต้อง

    <body class="light-theme">

ดูในเบราว์เซอร์

  • เมื่อต้องการแสดงตัวอย่างโดยใช้ Visual Studio Code ให้คลิกขวาที่ index.htmlจากนั้นเลือก เปิดใน เบราว์เซอร์เริ่มต้น หรือโหลดแท็บก่อนหน้าอีกครั้งโดยการกด F5

    โปรดสังเกตว่าธีมสีอ่อนใช้พื้นหลังสีเขียวปรากฏขึ้น

    สกรีนช็อตของเว็บไซต์ที่ใช้ธีมสีอ่อน

ดู CSS ที่ใช้

  1. ในมุมมองเบราว์เซอร์ ให้เปิด เครื่องมือสําหรับนักพัฒนา

    คลิกขวาที่หน้าและเลือก ตรวจสอบหรือเลือกทางลัด F12 หรือ Ctrl + Shift + I

  2. เลือกแท็บ องค์ประกอบ และเลือกแท็บ สไตล์ ภายในแท็บ องค์ประกอบ (ควรเลือกอยู่แล้วตามค่าเริ่มต้น)

  3. วางเมาส์เหนือองค์ประกอบ HTML ต่าง ๆ และเมื่อคุณเลือกองค์ประกอบบางอย่าง ให้สังเกตว่าเครื่องมือนักพัฒนาแสดงลักษณะใดในแท็บ สไตล์

  4. เลือกองค์ประกอบ <body> โปรดทราบว่ามีการใช้ light-theme

  5. เลือกองค์ประกอบ <ul> รายการที่ไม่เรียงลําดับ โปรดทราบว่าสไตล์แบบกําหนดเอง font-family: helvetica;ซึ่งจะแทนที่สไตล์สําหรับองค์ประกอบ <body>

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

เมื่อต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการดูสไตล์ CSS ในเครื่องมือสําหรับนักพัฒนา ให้ดูที่บทความ เริ่มต้นใช้งานการดูและการเปลี่ยน CSS

เพิ่มธีมสีเข้ม

สําหรับธีมสีเข้ม คุณจะต้องตั้งค่าโครงสร้างพื้นฐานในการเตรียมการสําหรับหน่วยถัดไป ซึ่งคุณจะเปิดใช้งานการสลับธีมบนเว็บเพจ

หากต้องการเพิ่มการสนับสนุนสําหรับธีมสีเข้มให้กับ CSS ของคุณ ให้ทําตามขั้นตอนต่อไปนี้

  1. ในไฟล์ CSS ของคุณ (main.css) ให้เพิ่มค่าคงที่บางอย่างไปยังรูทของหน้าที่จุดเริ่มต้นของไฟล์

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    ตัวเลือก :root แสดงองค์ประกอบ <html> ในหน้า HTML สําหรับงานประเภทนี้ แนวทางปฏิบัติที่ดีที่สุดคือการกําหนดชุดของตัวแปร CSS ส่วนกลางในกฎ CSS ด้วยตัวเลือก :root ในตัวอย่างนี้ คุณได้กําหนดตัวแปรสีสามตัวแปร ในตอนนี้ คุณสามารถใช้ตัวแปรเหล่านี้ในกฎ CSS อื่นได้

  2. ในตอนท้ายของไฟล์ CSS ให้แทนที่กฎ light-theme ด้วยรหัสต่อไปนี้เพื่ออัปเดตและเพิ่มตัวเลือก dark-theme

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    ในโค้ดก่อนหน้า คุณได้กําหนดตัวแปรใหม่สองตัว bg และ fontColorซึ่งระบุสีพื้นหลังและสีฟอนต์ ตัวแปรเหล่านี้ใช้คําสําคัญ var เพื่อตั้งค่าคุณสมบัติเป็นตัวแปรที่ระบุไว้ก่อนหน้านี้ในตัวเลือก :root ของคุณ

  3. ถัดไป ในไฟล์ CSS ของคุณ ให้แทนที่ตัวเลือก body ปัจจุบันด้วยโค้ดต่อไปนี้

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

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

  4. ในไฟล์ CSS ของคุณ ให้ลบกฎด้วยตัวเลือก #msg และ ul เพื่อให้ระบบสืบทอดแบบอักษรเดียวกันจาก <body>ด้วย

  5. อย่าลืมบันทึกไฟล์ของคุณโดยการเลือก Control+S หรือ Command+S

    ตอนนี้ไฟล์ CSS ของคุณ (main.css) ควรมีลักษณะดังตัวอย่างนี้:

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. หากต้องการดูธีมสีเข้ม ให้เปิดไฟล์ index.html และแก้ไขธีมเริ่มต้นด้วยตนเองในแอตทริบิวต์ <body> ระดับชั้นเป็นธีมสีเข้ม (dark-theme) บันทึกไฟล์และโหลดหน้าในเบราว์เซอร์ใหม่

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

  7. แก้ไขแอตทริบิวต์คลาส <body> เพื่อสลับค่าเริ่มต้นกลับไปเป็นธีมสีอ่อน

ในหน่วยถัดไป คุณใช้ JavaScript เพื่อโต้ตอบและสนับสนุนการสลับธีม

ใช้ GitHub Copilot เพื่อเพิ่มธีม

คุณสามารถใช้ GitHub Copilot ใน IDE ของคุณเพื่อสร้าง CSS เพื่อเพิ่มธีมใหม่ คุณสามารถกําหนดพร้อมท์เพื่อระบุคุณสมบัติเพื่อกําหนดลักษณะสําหรับองค์ประกอบ HTML ตามความต้องการของคุณ

ข้อความต่อไปนี้แสดงตัวอย่างพร้อมท์สําหรับ Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot ขับเคลื่อนโดย AI ดังนั้นจึงเป็นไปได้เรื่องประหลาดใจและข้อผิดพลาด สําหรับข้อมูลเพิ่มเติม โปรดดู คําถามที่ถามบ่อยของ Copilot

เรียนรู้เพิ่มเติมเกี่ยวกับ GitHub Copilot ใน Visual Studio Code