Bài tập - Sử dụng khái niệm CSS

  • 7 phút

Bạn muốn bắt đầu tạo kiểu cho trang web sơ yếu lý lịch của mình. Bạn bắt đầu bằng cách chọn phông chữ và thiết lập kích thước cho các yếu tố khác nhau mà bạn sử dụng trên trang.

Mô-đun này sử vscode.dev - phiên bản dựa trên web của Visual Studio Code CodeSwing. Các công cụ này giúp hợp lý hóa quá trình phát triển. Không có cài đặt địa phương là cần thiết để hoàn thành các bài tập sau đó.

Tạo dự án

Bạn bắt đầu bằng cách tạo một thư mục, thiết lập công cụ của bạn, và tạo ra một "swing" bằng cách sử dụng CodeSwing trong vscode.dev. Một swing sẽ tự động hiển thị các kết quả của mã của bạn vscode.dev. Việc sử dụng Microsoft Visual Studio Code với CodeSwing cho phép bạn nhanh chóng sửa đổi với bản xem trước các bản cập nhật diễn ra trong thời gian thực.

  1. Tạo một thư mục trên màn hình nền có tên sơ yếu.
  2. Mở vscode.dev.
  3. Chọn Mở Thư mục.
  4. Dẫn hướng đến thư sơ bạn đã tạo trước đó và chọn Chọn Thư.
  5. Khi được nhắc để cho phép site xem tệp, hãy chọn xem tệp.
  6. Chọn nút Tiện ích mở rộng.

    ảnh chụp màn hình của nút tiện ích bổ sung Visual Studio.

  7. Trong hộp văn mở rộng tìm kiếm trong Marketplace, nhập CodeSwing.
  8. Chọn cài đặt để cài CodeSwing.
  9. Mở Command Palette bằng cách chọn Ctrl+Shift+P hoặc Cmd-Shift-P trên máy Mac.
  10. Nhập CodeSwing trong Bảng màu Lệnh và chọn CodeSwing : Swing mới trong thư mục.
  11. Chọn Chọn Thư để sử dụng thư mục hiện tại (là thư mục bạn đã tạo trong bước trước đó).
  12. Chọn Cơ bản: HTML/CSS/JavaScript.
  13. Nếu được nhắc lưu để tiếp tục, hãy chọn Lưu thay đổi.
  14. Chọn x bên cạnh script.js bên trong vscode.dev để đóng tệp JavaScript vì bạn không sử dụng tệp này trong bài tập.

Visual Studio Code tạo hai phần cạnh nhau. Bên trái sẽ là trình soạn thảo của bạn, nơi bạn có thể nhập HTML và CSS của bạn. Quyền hoạt động giống như một trình duyệt, hiển thị kết quả mã của bạn.

Tạo HTML

Bạn sử dụng HTML hiện có để cho phép chúng tôi chỉ tập trung vào CSS. HTML bao gồm phần tử link để tham chiếu tệp CSS.

  • Sao chép HTML sau vào cửa sổ có tiêu đề 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>

Đặt loại và kích thước phông chữ

Theo mặc định, hầu hết các trình duyệt đều sử dụng phông chữ serif như Times New Roman. Bạn muốn đặt trang mặc định thành phông chữ phổ biến hơn. Ngoài ra, bạn muốn đặt kích cỡ phông chữ cho trang và các tiêu đề khác nhau.

  1. Bên trong tệp có tiêu đề style.css, hãy thêm CSS sau đây để đặt họ phông chữ verdana với các tùy chọn dự phòng và cỡ phông thành 12 điểm ảnh trên thành phần html:

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

    Bạn đang sử dụng yếu tố html cập nhật phông chữ gốc và chỉnh cỡ. Với yếu tố cho html phép bạn sử dụng rem kích thước.

  2. Lưu ý rằng trang sẽ tự động cập nhật các thay đổi.

  3. Thêm mã CSS sau đây vào cuối style.css đặt kích cỡ cho bản h1 đến h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem được dựa trên kích thước gốc, là 14 điểm ảnh. Ví dụ, CSS này đặt kích thước h1 thành 22,4 pixel.

  4. Trang được tự động cập nhật trong vscode.dev.

  5. Để cửa sổ mở như bạn sẽ sử dụng nó trong bài tập tiếp theo.

Kết quả và các bước tiếp theo

Ảnh chụp màn hình sau đây là kết quả của CSS bạn đã áp dụng trong bài tập này. Nếu bạn muốn thử nghiệm với các phông chữ và kích cỡ khác nhau, bạn có thể sửa đổi CSS như bạn muốn.

ảnh chụp màn hình của trang cuối cùng như được kết xuất trong trình duyệt.