Xây dựng 1 trang HTML định dạng phong cách bằng CSS | Series HTML & CSS căn bản | Bài 9

Mở file my-page-2.html bằng phần mềm Notepad (trên Windows) hay TextEdit (trên MacOS). Song song đó, bạn cũng mở file my-page-2.html bằng trình duyệt web (hoccode.org khuyến khích bạn dùng Chrome) để xem nội dung ban đầu của trang lúc chưa được định dạng bằng CSS.

• Chọn File -> New Window (hoặc ấn tổ hợp Ctr + Shift + N)
• Chọn File -> Save as
  • Ô Encoding: UTF-8
  • Đặt tên file là my-page-2-styles.css và lưu chung thư mục với file my-page-2.html.

• Chọn File -> New
• Chọn File -> Save
  • Ô Plain Text Encoding: Unicode (UTF-8)
  • Đặt tên file là my-page-2-styles.css và lưu chung thư mục với file my-page-2.html.

Thẻ <link/> là thẻ được dùng để kết nối với một tập tin (CSS, media, ảnh…) bên ngoài trang HTML. Tra cứu thêm về thẻ <link/> tại đây.

Trong trường hợp bạn muốn dùng phần tử thẻ <link/> để chèn External CSS, thuộc tính của thẻ <link/> sẽ bao gồm:

• rel="stylesheet" (bắt buộc)
• type="text/css" (không bắt buộc)
• src="..." (bắt buộc, giá trị thuộc tính là đường dẫn đến file chứa code CSS)

HTML

      <div class="content-wrapper top-heading">
        <h1 class="text-center">Điện thoại Apple Iphone 12 Pro Max</h1>
        <div class="text-center">Chi tiết về thông số kỹ thuật và đánh giá ban đầu của Iphone 12 Pro Max
   </div>
    </div>
    <nav id="main-nav">
        <ul class="main-nav-list">
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part1">Thông số kỹ thuật</a>
            </li>
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part2">Đánh giá ban đầu</a>
            </li>
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part3">Danh sách các cửa hàng</a>
            </li>
        </ul>
    </nav>

External CSS

Các Rule CSS được dùng để định dạng cho nhiều phần tử, hoặc những phần tử mà mình cho rằng có thể sử dụng cho 1 trang HTML khác có nội dung tương tự

Các trình duyệt web thường gán thuộc tính CSS thụt lề trái cho phần tử thẻ <ul></ul>, do đó mình tạo class main-nav-list và gắn nó với CSS Rule chứa các định dạng ngăn không cho thụt lề trái cũng như canh lề giữa cho text bên trong (text-align)

Để định dạng cho các phần tử thẻ <li></li> này, mình đã tạo classmain-nav-item và gắn nó với CSS Rule chứa các định dạng:

• Chuyển kiểu hiển thị của phần tử về dạng khối có thể nằm chung hàng với text (display: inline-block)
• Tạo khoảng trống bên trên phần tử (padding-top)
• Tạo khoảng trống bên dưới phần tử (padding-bottom)
• Tạo khoảng trống bên trái phần tử (padding-left)
• Tạo khoảng trống bên phải phần tử (padding-right)

Internal CSS

Ở khu vực này mình chưa cần dùng đến Internal CSS

Inline CSS

Ở khu vực này mình chưa cần dùng đến Inline CSS

HTML

Nhờ vào các Rule CSS đã tạo sẵn ở bước 1 có selector là .content-wrapper  và .text-center, mình có thể sử dụng nó làm giá trị thuộc tính class cho một số phần tử  HTML khác mà mình muốn định dạng ở khu vực nội dung này. Đây chính là một trong những thủ thuật giúp lập trình viên có thể rút ngắn các dòng code, giúp code đẹp và dễ chỉnh sửa hơn.

   <section class="part1">
        <div class="content-wrapper">
            <h2 id="part1" class="section-title text-center">Thông số kỹ thuật</h2>
            <div class="clear-both">
                <div class="part1-left">
                    <p><img style="width: 100%; max-width: 350px; height: auto;" alt="Iphone 12 Pro Max"
                            src="./my-page-2_files/iphone-12-pro-max-xanh-duong-new-600x600-600x600.jpg"></p>
                </div>
                <div class="part1-right">
                    <table>
                        <tbody>
                            <tr>
                                <td>Màn hình:</td>
                                <td>OLED, 6.7", Super Retina XDR</td>
                            </tr>
                            <tr>
                                <td>Hệ điều hành:</td>
                                <td>iOS 14</td>
                            </tr>
                            <tr>
                                <td>Camera sau:</td>
                                <td>3 camera 12 MP</td>
                            </tr>
                            <tr>
                                <td>Camera trước:</td>
                                <td>12 MP</td>
                            </tr>
                            <tr>
                                <td>CPU:</td>
                                <td><a href="https://en.wikipedia.org/wiki/Apple_A14">Apple A14 Bionic 6 nhân</a></td>
                            </tr>
                            <tr>
                                <td>RAM:</td>
                                <td>6 GB</td>
                            </tr>
                            <tr>
                                <td>Lựa chọn bộ nhớ trong:</td>
                                <td>128GB / 256GB / 512GB</td>
                            </tr>
                            <tr>
                                <td>Khe SIM:</td>
                                <td>1 Nano SIM & 1 eSIM, Hỗ trợ 5G</td>
                            </tr>
                            <tr>
                                <td>Dung lượng pin:</td>
                                <td>3687 mAh, có sạc nhanh</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <section class="part2">
        <div class="content-wrapper">
            <h3 id="part2" class="section-title text-center">Đánh giá ban đầu</h3>
            <div class="clear-both">
                <div class="part2-left">
                    <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;"
                            alt="Màn hình của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_019.jpg"></p>
                </div>
                <div class="part2-right">
                    <h4>Màn hình luôn là điểm nhấn của dòng Pro Max</h4>
                    <p>Với màn hình lớn kết hợp cùng chất lượng hiển thị được cải tiến, Iphone 12 Pro Max đem lại cho
                        người dùng trải nghiệm thuộc hàng đỉnh cao. Bên cạnh công nghệ OLED và Super Retina XDR giúp màu
                        sắc của các điểm ảnh trở nên trung thực và sắc nét, việc trang bị thêm tần số quét 120Hz giúp
                        các thao tác kéo thả trở nên mượt mà hơn bao giờ hết, cũng như nâng cao chất lượng trải nghiệm
                        khi xem các video, phim hay chơi các tựa game. Ngoài ra, so với phiên bản tiền nhiệm Iphone 11
                        Pro Max, tai thỏ trên màn hình của Iphone 12 Pro Max được thu nhỏ hơn đáng kể, giúp người dùng
                        có thêm không gian để hiển thị các chi tiết UI hay nội dung.</p>
                </div>
            </div>
            <div class="clear-both">
                <div class="part2-right">
                    <h4>Thời lượng pin đảm bảo tốt cho giải trí và công việc</h4>
                    <p>Với kích thước màn hình lớn hơn so với Iphone 12, dĩ nhiên chiếc Iphone 12 Pro Max sẽ được trang
                        bị pin có dung lượng nhiều hơn, lên đến 3687 mAh, có sạc nhanh. Kết quả thử nghiệm trên trang
                        GSMANERA cho thấy chiến Iphone 12 Pro Max có thể xem video liên tục trong vòng 15 tiếng 17 phút,
                        lướt web liên tục trong vòng 14 tiếng 13 phút, thực hiện cuộc gọi 3GB liên tục trong 20 tiếng 54
                        phút.</p>
                </div>
                <div class="part2-left">
                    <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;"
                            alt="Thời lượng Pin của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_309.jpg"></p>
                </div>
            </div>
        </div>
    </section>
    <section class="part3">
        <div class="content-wrapper">
            <h3 id="part3" class="section-title text-center">Danh sách các cửa hàng</h3>
            <p>Hiện tại, các bạn có thể mua chiếc điện thoại Iphone 12 Pro Max trên các hệ thống cửa hàng trong danh
                sách sau đây:</p>
            <ul>
                <li>Thế giới Di Động (thegioididong.com)</li>
                <li>Di động Việt (didongviet.vn)</li>
                <li>Cellphone S (cellphones.com)</li>
                <li>FPT Shop (fptshop.com.vn)</li>
            </ul>
        </div>
    </section>

External CSS

Các Rule CSS  thường được dùng để định dạng cho nhiều phần tử, hoặc những phần tử mà mình cho rằng có thể sử dụng cho 1 trang HTML khác có nội dung tương tự

...
<h2 id="part1" class="section-title text-center">Thông số kỹ thuật</h2>
...
<h3 id="part2" class="section-title text-center">Đánh giá ban đầu</h3>
...
<h3 id="part3" class="section-title text-center">Danh sách các cửa hàng</h3>
...

trong đó thuộc tính CSS font-size sẽ giúp định dạng lại cỡ chữ cho 3 phần tử này

Mình tạo CSS Rule này và class clear-both bao lấy những phần tử con bên trong, không cho những phần tử khác bên ngoài nhảy vào chung hàng. (Xem lại và đối chiếu với HTML bên trên)

• width dùng để thay đổi chiều rộng của phần tử
• float: left dùng để định dạng phần tử dạng khối (block) có thể nằm chung hàng với 1 phần tử khác
• text-align dùng để canh lề cho text

• background-color dùng để định dạng màu nền
• padding-top:  dùng để tạo khoảng trống bên trên phần tử
• padding-bottom:  dùng để tạo khoảng trống bên dưới phần tử