แบบฝึกหัด - ใช้แนวคิด CSS

  • 7 นาที

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

โมดูลนี้ใช้ vscode.dev - Visual Studio Code เวอร์ชันบนเว็บและ CodeSwing เครื่องมือเหล่านี้ช่วยปรับปรุงกระบวนการพัฒนาให้มีประสิทธิภาพขึ้น ไม่จําเป็นต้องติดตั้งภายในเครื่องเพื่อทําแบบฝึกหัดต่อไปนี้ให้เสร็จสมบูรณ์

สร้างโครงการ

คุณเริ่มต้นด้วยการสร้างโฟลเดอร์ ตั้งค่าเครื่องมือของคุณ และสร้าง "การสวิง" โดยใช้ CodeSwing ใน vscode.dev การสวิงจะแสดงผลลัพธ์ของโค้ดของคุณใน vscode.dev โดยอัตโนมัติ การใช้ Microsoft Visual Studio Code กับ CodeSwing ช่วยให้คุณสามารถทําการแก้ไขได้อย่างรวดเร็วด้วยการแสดงตัวอย่างของการอัปเดตที่เกิดขึ้นในแบบเรียลไทม์

  1. สร้างโฟลเดอร์บนเดสก์ท็อปของคุณที่มีชื่อว่า ดําเนินการต่อ
  2. เปิด vscode.dev
  3. เลือก เปิดโฟลเดอร์
  4. นําทางไปยังโฟลเดอร์ประวัติย่อของ ที่คุณสร้างไว้ก่อนหน้านี้ และเลือก เลือกโฟลเดอร์
  5. เมื่อได้รับพร้อมท์แจ้งให้ อนุญาตให้ไซต์ดูแฟ้มให้เลือก ดูแฟ้ม
  6. เลือกปุ่ม ส่วนขยาย

    ปุ่ม สกรีนช็อตของส่วนขยาย Visual Studio

  7. ในกล่องข้อความ Search Extensions ใน Marketplace พิมพ์ CodeSwing
  8. เลือก ติดตั้ง เพื่อติดตั้ง CodeSwing
  9. เปิด Command Palette โดยการเลือก Ctrl+Shift+P หรือ Cmd-Shift-P บน Mac
  10. พิมพ์ CodeSwing ใน Command Palette และเลือก CodeSwing: การสวิงใหม่ในไดเรกทอรี
  11. เลือก เลือกโฟลเดอร์ เพื่อใช้ไดเรกทอรีปัจจุบัน (ซึ่งเป็นไดเรกทอรีที่คุณสร้างขึ้นในขั้นตอนก่อนหน้า)
  12. เลือก พื้นฐาน: HTML/CSS/JavaScript
  13. ถ้าได้รับพร้อมท์ให้ บันทึกการเปลี่ยนแปลงเพื่อดําเนินต่อให้เลือก บันทึกการเปลี่ยนแปลง
  14. เลือก x ถัดจาก script.js ภายใน vscode.dev เพื่อปิดไฟล์ JavaScript เนื่องจากคุณไม่ได้ใช้ไฟล์นี้ในระหว่างการออกกําลังกาย

Visual Studio Code สร้างสองส่วนเคียงข้างกัน ด้านซ้ายจะเป็นผู้แก้ไขของคุณที่คุณสามารถป้อน HTML และ CSS ของคุณ ด้านขวาทํางานเหมือนเบราว์เซอร์ที่แสดงผลลัพธ์ของโค้ดของคุณ

สร้าง HTML

คุณใช้ HTML ที่มีอยู่เพื่อให้เราสามารถมุ่งเน้นไปที่ CSS เพียงอย่างเดียว HTML ประกอบด้วยองค์ประกอบ link เพื่ออ้างอิงไฟล์ CSS

  • คัดลอก HTML ต่อไปนี้ลงในหน้าต่างที่ชื่อว่า index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

ตั้งค่าประเภทและขนาดแบบอักษร

โดยค่าเริ่มต้น เบราว์เซอร์ส่วนใหญ่ใช้แบบอักษร serif เช่น Times New Roman คุณต้องการตั้งค่าเริ่มต้นของหน้าเป็นแบบอักษรที่ได้รับความนิยมมากขึ้น นอกจากนี้ คุณต้องการตั้งค่าขนาดของฟอนต์สําหรับหน้าและส่วนหัวต่าง ๆ

  1. ภายในไฟล์ที่ชื่อว่า style.cssเพิ่ม CSS ต่อไปนี้เพื่อตั้งค่าตระกูลแบบอักษรเป็น Verdana พร้อมตัวเลือกที่ใช้แสดงแทน และขนาดฟอนต์เป็น 12 พิกเซลบนองค์ประกอบ html:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    คุณกําลังใช้องค์ประกอบ html เพื่ออัปเดตแบบอักษรรากและการปรับขนาด ด้วยองค์ประกอบช่วยให้คุณ html ใช้ rem ขนาดได้

  2. โปรดสังเกตว่าหน้าอัปเดตด้วยการเปลี่ยนแปลงโดยอัตโนมัติ

  3. เพิ่มรหัส CSS ต่อไปนี้ลงในส่วนท้ายของ style.css เพื่อตั้งค่าขนาดสําหรับ h1 ผ่าน h4

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem จะขึ้นอยู่กับขนาดรากซึ่งเท่ากับ 14 พิกเซล ตัวอย่างเช่น CSS นี้กําหนดขนาด h1 เป็น 22.4 พิกเซล

  4. หน้านี้ได้รับการอัปเดตโดยอัตโนมัติใน vscode.dev

  5. เปิดหน้าต่างทิ้งไว้ขณะที่คุณจะใช้ในแบบฝึกหัดถัดไป

ผลลัพธ์และขั้นตอนถัดไป

สกรีนช็อตต่อไปนี้คือผลลัพธ์ของ CSS ที่คุณใช้ในแบบฝึกหัดนี้ หากคุณต้องการทดลองกับฟอนต์และขนาดต่างๆ คุณสามารถแก้ไข CSS ได้ตามที่คุณต้องการ

สกรีนช็อตของหน้าสุดท้ายตามที่แสดงในเบราว์เซอร์