TỰ HỌC CSS CẤP TỐC

1. Giới thiệu về CSS:
   • CSS là công nghệ thứ 2  trong 3 công nghệ phổ biến lập trình web (HTML, CSS, Javascript), được viết tắt của từ Cascading Style Sheets, là 1 bảng định dạng cho các thẻ của HTML. Các định dạng có thể sẽ là: chỉnh vị trí, chiều rộng, độ cao, màu sắc,  font chữ, màu nền, hình nền, bố cục (layout) cho đến hiệu ứng chuyển động (animation) và tính tương thích trên màn hình điện thoại (Responsive) ...
   • Những sức mạnh cốt lõi của CSS: tạo hiệu ứng đổ bóng 3D, hiệu ứng hover khi di chuột, cho phép giao diện tự động co giãn, biến đổi mượt mà trên đa nền tảng (PC, tablet, điện thoại) ...
2. Vị trí đặt CSS trong HTML:
   • Inline CSS: Viết trực tiếp trong phần thẻ mở của các phần tử (element) HTML (chỉ dùng khi cần can thiệp nhanh)
     

     <tag style="css"> ... </tag>

   • Internal CSS: Viết trong thẻ <style> ở phần <head> của trang web
     

     <head>
     ...
     <style> css </style>
     </head>

   • External CSS (Khuyên dùng): Tạo một file .css độc lập và liên kết vào HTML thông qua thẻ <link>. Cách này giúp quản lý mã nguồn sạch sẻ và tái sử dụng code tối đa.
     

     <link href="style.css"/>

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 1

1. Cú pháp:
   • Cú pháp chuẩn của inline css:  
     style=“property:  value;”
   • Cú pháp inline css mở rộng:   
     style=“property:  value; property:  value; …”
   • Lưu ý:
     Giữa 2 thuộc tính bắt buộc phải có dấu chấm phẩm (;) để ngăn cách, còn thuộc tính cuối cùng thì không bắt buộc 
     
     
     
     
2. Ưu và nhược điểm:
   • Ưu điểm:
     • Nhanh
     • Chỉ có tác dụng cho 1 thẻ duy nhất
     • Thích hợp để thử nghiệm tức thì (test hoặc debug)
   • Nhược điểm:
     • Không tái sử dụng được
     • Khó bảo trì và quản lý vì style bị trộn lẫn với HTML
       
       
3. Thực hành:
   • Tạo thư mục Bai-02, bên trong tạo file index.html
   • Trong file index.html, tạo cấu trúc html (!)
   • Đổi tiêu đề trang web thành “Bài 02: CSS nội tuyến” và ngôn ngữ tiếng Việt
   • Tạo tiêu đề h1 “Chào mừng bạn đến với CSS” có màu đỏ, cỡ chữ 50px (color: red; font-size: 50px)
   • Tạo đường gạch ngang.
   • Tạo đoạn văn p “Đây là đoạn văn màu xanh dương” có màu xanh dương, cỡ chữ 30px.
   • Tạo đoạn văn p “Đây là đoạn văn màu xanh lá” có màu xanh lá, cỡ chữ 20px.
   • Xong, xem kết quả
     

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 2

• Ở bài trước css nội tuyến (inline CSS), để nhúng CSS vào HTML, chúng ta đã dùng thuộc tính style viết vào từng thẻ của HTML.
• Còn ở bài này CSS nội bộ (Internal CSS), hơi phức tạp hơn một chút, chúng ta áp dụng cú pháp như sau:

1. Cú pháp:
   • Đặt thẻ <style> vào trong thẻ khối <head> của trang web để khai báo bắt đầu sử dụng internal CSS
   • Xác định bộ chọn (selector), chúng ta sẽ được học chi tiết ở chương sau. Bây giờ chúng ta tạm sử dụng như sau: muốn chọn thẻ nào thì viết tên thẻ đó rồi mở ngoặc nhọn, đóng ngoặc nhọn ngay phía sau, được gọi là khối khai báo (declaration block)
   • Để định kiểu cho bộ chọn, chúng ta viết thuộc tính, dấu hai chấm (:), giá trị, dấu chấm phẩy (;) bên trong dấu ngoặc nhọn, được gọi là 1 khai báo (declaration)
   • Lưu ý:
     • Dấu chấm phẩy (;) sau mỗi khai báo là bắt buộc
     • Mỗi khai báo là 1 dòng, không nên viết dồn nhiều khai báo lên cùng 1 dòng
       
       
       
       
2. Ưu và nhược điểm:
   • Ưu điểm:
     • Dễ triển khai, chỉ cần viết thẻ <style> trong thẻ khối <head>
     • Áp dụng cho hàng loạt thẻ giống nhau
   • Nhược điểm:
     • Làm file HTML dài và nặng
     • Chỉ dùng cho 1 trang, Nếu website có nhiều trang phải viết lại
3. Thực hành:
   • Bài thực hành 1:
     • Hãy copy lại thư mục bài-02 rồi đổi tên thành bài-03a
     • Hãy mở file index.html, đổi tên trang web, đổi ngôn ngữ
     • Hãy sửa file này theo kiểu internal CSS đã học ở trên, 2 thẻ p cho cùng 1 khai báo
     • Xong, xem kết quả
   • Bài thực hành 2:
     • Tạo thư mục bài-03B, bên trong tạo file index.html
     • Dùng thẻ <ul>, <li> tạo 2 câu trắc nghiệm sau: (có dùng entities – bài 13 khóa học html)
       Câu 1: Internal CSS được đặt ở đâu?
        A. Trong thuộc tính style của thẻ HTML
        B. Trong thẻ <style> ở phần <head>
        C. Trong file .css riêng
        D. Trong thẻ <script>
         
        Câu 2: Điểm yếu lớn nhất của Internal CSS là gì?
        A. Không hỗ trợ animation
        B. Không tái sử dụng được cho nhiều trang
        C. Không hỗ trợ màu sắc
        D. Chỉ hoạt động trên Chrome  
     • Hãy dùng internal css định kiểu màu sắc, cỡ chữ cho các thẻ <ul>, <li> theo ý của bạn.
     • Xong, xem kết quả.
       
       
       

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 3

1. Cú pháp:
   • Đặt tên file style.css, các bạn có thể đặt tên tùy ý, tuy nhiên để cho tiện, chúng ta cứ thống nhất với tên này nhé.
   • Dùng thẻ  <link> có các thuộc tính rel và href <link rel="stylesheet" href="style.css"> , viết vào trong thẻ khối <head> để kết nối với file css. Trong đó có :
     • Thuộc tính rel, viết tắt của từ relationship, nghĩa là mối quan hệ. Nó được gán bằng  stylesheet, nghĩa là bảng định kiểu, để báo cho trình duyệt biết rằng file được liên kết là css.
     • Thuộc tính href, viết tắt của từ hypertext reference, nghĩa là tham chiếu siêu văn bản. nó được gán bằng đường dẫn tới file css.  
   • Các bộ chọn (selector) và khối khai báo (declaration block) tương tự cách 2 internal css.
   • Lưu ý:
     • Bên trong file css chỉ toàn là các bộ chọn và các khối khai báo bên trong bộ trọn. . không dùng bất cứ thẻ hay thuộc tính nào như của inline css hoặc internal css bên trong file style.css.
     • Không được có lệnh hay ký tự lạ bên ngoài các khối khai báo.
       
2. Ưu và nhược điểm:
   • Ưu điểm:
     • Đây là cách được khuyên dùng nhất trong 3 cách nhúng CSS vào HTML
     • Tách biệt rõ ràng giữa cấu trúc html và giao diện css. Code trở nên sạch sẽ, dễ đọc, dễ bảo trì hơn
     • Tái sử dụng được trên nhiều trang
   • Nhược điểm:
     • Phải tải thêm 1 file, có thể phức tạp với dự án nhỏ
     • Phụ thuộc vào URL. Nếu đổi cấu trúc hoặc tên file, phải cập nhật lại đường dẫn trong thẻ <link>
3. Thực hành:
   • Bài thực hành 1:
     • Tạo thư mục bài-04a
     • Tạo file index.html, đổi tiêu đề và ngôn ngữ
     • Tạo tiêu đề h1 “THỰC HÀNH 3 CÁCH NHÚNG CSS”
     • Tạo tiêu đề h2 “Đây là tiêu đề dùng Inline CSS”, dùng kiểu inline css để đổi màu đỏ và font size 40px
     • Tạo tiêu đề h3 “Đây là tiêu đề 1 dùng Internal CSS”, tạo tiếp tiêu đề h3 “Đây là tiêu đề 2 dùng Internal CSS”, dùng kiểu internal css để đổi màu xanh dương và font size 30px
     • Tạo đoạn văn p “Đây là đoạn văn 1 dùng external CSS”, tạo tiếp đoạn văn p “Đây là đoạn văn 2 dùng external CSS”, dùng kiểu external css để đổi màu xanh lá và font size 20px
     • Xong, xem kết quả
       
       
       
   • Bài thực hành 2:
     • Tạo thư mục bài-04b
     • Tạo file index.html, đổi tiêu đề và ngôn ngữ
     • Tạo thư mục images, rồi tìm 3 hình món ăn yêu thích, lưu vào thư mục này
     • Tạo tiêu đề h1 “DANH SÁCH MÓN ĂN YÊU THÍCH”
     • Dùng emmet tạo thẻ <ul> có 3 thẻ <li>
     • Trong mỗi thẻ <li> có tiêu đề h2 tên của món ăn, có hình ảnh img của món ăn
     • Dùng cách 1 cho tiêu đề h1
     • Dùng cách 2 cho tiêu đề h2
     • Dùng cách 3 cho img với khai báo width: 300px
     • Xong, xem kết quả
       

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 4

Trước khi qua chương mới, chúng ta sẽ ôn lại toàn bộ chương 1 để nắm thật chắc những kiến thức nền tảng cốt lõi nhé.

1. Cú pháp cơ bản của CSS (Selector, Property, Value):
   • Cú pháp cơ bản của CSS bao gồm: bộ chọn selector và khối khai báo declaration block, bên trong khối khai báo là các cặp thuộc tính property được gán bằng giá trị value.
   • Do CSS dùng nhiều loại đơn vị khác nhau nên phải viết chính xác và không được bỏ đơn vị như trong thuộc tính width và height của thẻ img trong html (bài 11.3 khóa học html).
     
     
2. Thứ tự ưu tiên của 3 cách nhúng CSS:
   • Nếu 1 phần tử element được đinh kiểu bởi cả 3 cách nhúng css tương tự nhau, có cùng kiểu khai báo thì trình duyệt sẽ ưu tiên cho cách 1 inline css và sẽ ghi đè lên 2 cách còn lại.
   • Nếu 1 phần tử element được đinh kiểu bởi cách 2 và cách 3 thì trình duyệt sẽ ưu tiên cho cách nào được viết sau và sẽ ghi đè lên cách còn lại
3. Lựa chọn phù hợp cho 3 cách nhúng CSS?
   • Khi bạn cần định kiểu riêng cho 1 hoặc 1 vài phần tử đặc biệt thì nên chọn cách 1.
   • Khi bạn muốn áp dụng cho nhiều phần tử giống nhau thì nên chọn cách 2.
   • Khi bạn muốn áp dụng cho nhiều phần tử giống nhau mà muốn tái sử dụng trên nhiều trang hoặc nhiều dự án khác thì dùng cách 3.
4. Bình luận Comment trong CSS:
   • Chức năng bình luận cũng rất quan trọng, thường dùng để ghi chú hoặc vô hiệu hóa 1 hoặc vài dòng lệnh.
   • Các bạn nên tập thói quen ghi chú lại chức năng của khối lệnh để sau này đọc lại sẽ hiểu ngay mà không cần phải dò từng lệnh. Rất tiện cho việc bảo trì và nâng cấp về sau.
   • Trong CSS bình luận thường chỉ áp dụng cho cách 2 & 3.
   • Dùng phím nóng Ctrl-/ hoặc /* ...bình luận... */
5. Cách viết tắt emmet trong CSS:
   •  Để viết tắt cho css, bạn phải viết trong khối khai báo như sau:
     • Về màu sắc: c:red  =>  color: red;
     • Về cỡ chữ: fz50  =>  font-size: 50px;
6. Thực hành:
   • Tạo thư mục bài-05 & file index.html
   • Tạo tiêu đề h1 “TỔNG KẾT CHƯƠNG 1”
   • Tạo nội dung p 10 từ bất kỳ bằng lorem
   • Tạo nội dung p 2 dòng bất kỳ bằng lorem
   • Áp dụng cả 3 cách cho thẻ h1 và p với phần khai báo dùng emmet như sau :
     • Cách 1: chữ màu đỏ, cỡ chữ 40px
     • Cách 2: chữ màu xanh lá, cỡ chữ 30px
     • Cách 3: chữ màu xanh dương, cỡ chữ 20px
   • Dùng bình luận ghi chú cách 2 & 3
   • Tuần tự thay đổi ưu tiên cho cách 1 đến cách 3 để thấy sự khác biệt

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 5

Chúng ta học thêm về thẻ khối div và thẻ span của html. Đây là những thẻ được dùng rất nhiều trong thực tế.

1. Thẻ khối div và thẻ span
   1. Thẻ khối div:
      • Thẻ khối <div> được viết tắt của division, có nghĩa là phân chia, là 1 thẻ khối không ngữ nghĩa, thường dùng để phân chia website thành các khối, bên trong có nhiều thẻ. Mục đích là để bố cục trang web, dễ quản lý và bảo trì.
      • Ví dụ:
        

         <!-- Đây là khối menu -->
             <div>
                 <a href="">Trang chủ |</a>
                 <a href="">Giới thiệu |</a>
                 <a href="">Sản phẩm |</a>
                 <a href="">Liên hệ |</a>
             </div>

   2. Thẻ span:
      • Thẻ <span> được viết từ từ span, có nghĩa là 1 khoảng nhỏ, ngược với thẻ div thường dùng cho các khối lớn, thẻ span thường dùng cho các chi tiết nhỏ như nhóm 1 vài từ đặc biệt trong 1 đoạn văn.
      • Ví dụ:
        

        <p>Xin giới thiệu, tôi tên là <span style=”color: blue”>Nguyễn Văn A</span>, sinh năm 2000</p>

2. Bộ chọn thẻ (tag selector):
   • Để chọn được các thẻ giống nhau, ở phần bộ chọn , các bạn chỉ cần viết tên thẻ là xong, chúng ta đã được thực hành qua những bài trước.
   • Cú pháp:
      tên-thẻ {
          khối khai báo;
      }
3. Bộ chọn lớp (class selector):
   • Bộ chọn thẻ có 1 khuyết điểm là khi đã chọn là chọn tất cả các thẻ giống nhau, khi bạn muốn chỉ tác động đến 1 vài thẻ trong tập thẻ giống nhau là không thể. Do đó bộ chọn lớp (class selector) sinh ra là để giải quyết vấn đề này.
   • Class là 1 thuộc tính trong thẻ. Cách viết như sau:
      <tag class=”class_name” >… nội dung …</tag>
   • Trong đó, class_name là tên bạn đặt tùy ý, nhưng mình khuyên bạn nên đặt theo chức năng hoặc nhiệm vụ của các thẻ đó đang làm.
   • Cú pháp:
      .class_name{
            khối khai báo;
      }
4. Bộ chọn định danh (id selector) :
   • Thuộc tính id được viết như sau:
      <tag id=”id_name” >… nội dung …</tag>
   • Tương tự như bộ chọn lớp, nhưng bộ chọn định danh chỉ khác là: tên là duy nhất, không được trùng trên toàn bộ trang web.
   • Cú pháp:
      #id_name {
           khối khai báo
      }
5. Bộ chọn tổng quát (universal selector)
   • Công dụng: dùng để chọn tất cả các phần tử trong toàn bộ trang web
   • Cú pháp:
      * {
           khối khai báo
      }
6. Thực hành: 
   1. Bài thực hành 1:
      • Tạo thư mục bài-06a và file index.html
      • Tạo thẻ h1 “DANH SÁCH HỌC SINH”
      • Tạo thẻ h2 “Lớp 10A1”
      • Dùng emmet ol, li tạo danh sách 5 học sinh bất kỳ
      • Nguyên Văn A, Trần Thị B, Võ Văn C, Lê Thị D, Hoàng Văn E
      • Tạo thẻ hr
      • Dùng emmet tạo 4 thẻ p có nội dung tuần tự như sau:
      • Tổng số: 6; - Vắng mặt: 1; - Lớp trưởng: lấy ở ds hs; - Lớp phó: lấy ở ds hs
      • Dùng khối div bao 4 thẻ p, có class=”thong-tin”, ghi chú “khối thông tin”
      • Dùng khối div bao khối ol, hr, div con, có class=”noi-dung”, ghi chú “khối nội dung”
      • Dùng khối div bao h1, h2, có class=”tieu-de”, ghi chú “khối tiêu đề”
      • Dùng 3 thẻ span bao số 1, tên lớp trưởng, tên lớp phó
      • Tạo file style.css và thẻ link để định kiểu
      • Trong file style.css, dùng bộ chọn tổng quát và thuộc tính font-family, gán bằng font Segoe UI hoặc Arial
      • Dùng bộ chọn lớp “tieu-de” định màu cam
      • Dùng bộ chọn lớp “noi-dung” định màu xanh dương
      • Dùng bộ chọn lớp “thong-tin” định màu xanh lá
      • Xong, xem kết quả
        
        
        
   2. Bài thực hành 2:
      • Copy lại bài-06a, đổi tên thành bài-06b
      • Mở file index.html
      • Trong thẻ h1, thêm thuộc tính id=”tieude-chinh”, dùng bộ chọn định danh định lại màu đỏ
      • Thêm id=”vang-mat” vào thẻ span bao số 1, dùng bộ chọn định danh định lại màu đỏ
      • Thêm 2 class=”vip” vào 2 thẻ li tên lớp trưởng và lớp phó
      • Thêm 2 class=”vip” vào 2 thẻ p tên lớp trưởng và lớp phó
      • Dùng bộ chọn lớp, định lại màu nâu.
      • Xong, xem kết quả
        

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 6

Trong CSS, ngoài việc chọn bằng thẻ, class hay id, đôi khi bạn cần chọn phần tử dựa trên mối quan hệ với phần tử khác. Do đó Bộ chọn kết hợp (combinator selector) được sinh ra là để giải quyết vấn đề này, và nó cũng được chia làm 4 loại sau: chọn hậu duệ, chọn con trực tiếp, chọn anh em liền kề và chọn anh em tổng quát.

1. Bộ chọn kết hợp hậu duệ (Descendant Selector) 
   • Công dụng: chọn tất cả phần tử nào đó nằm trong phần tử cha
   • Cú pháp:
      selector1 dấu cách selector2
2. Bộ chọn kết hợp con trực tiếp (Child Selector) 
   • Công dụng: chỉ chọn những phần tử là con cấp 1 của phần tử cha
   • Cú pháp:
      selector1 > selector2
3. Bộ chọn kết hợp anh em liền kề (Adjacent Sibling Selector) 
   • Công dụng:  Chọn 1 phần tử nào đó cùng cấp liền kề với phần tử anh em
   • Cú pháp:
      selector1 + selector2
4. Bộ chọn kết hợp anh em tổng quát (General Sibling Selector) 
   • Công dụng: chọn tất cả những phần tử nào đó cùng cấp với phần tử anh em
   • Cú pháp:
      selector1 ~ selector 2
5. Thực hành
   1. Bài thực hành 1:
      • Tạo bài-07a và file index.html
      • Copy cấu trúc sau vào file index.html
        

        <h1>DANH SÁCH SẢN PHẨM</h1>
            <div class="ds-sanpham">
              <div class="sanpham">
                <h2>Sản phẩm A</h2>
                <p class="gia">100.000đ</p>
                <p class="mota">Mô tả sản phẩm A</p>
              </div>
        
              <hr />
        
              <div class="sanpham-noibat">
                <h2>Sản phẩm B (Nổi bật)</h2>
                <p class="gia">200.000đ</p>
                <p class="mota">Mô tả sản phẩm B <span class="nong">(Hot!)</span></p>
              </div>
        
              <hr />
        
              <div class="sanpham">
                <h2>Sản phẩm C</h2>
                <p class="gia">150.000đ</p>
                <p class="mota">Mô tả sản phẩm C</p>
              </div>
            </div>
        

      • Tô màu xanh dương và cỡ chữ 40px cho tất cả .gia nằm trong .ds-sanpham
      • Tô màu đỏ và cỡ chữ 40px cho .gia là con trực tiếp của .sanpham-noibat
      • Tô màu đỏ cho .nong là con trực tiếp của . mota
      • Tô màu cam cho .mota là anh em liền kề của .gia
      • Xong , xem kết quả
        
        
        
   2. Bài thực hành 2:
      • Tạo bài-07b và file index.html
      • Copy cấu trúc sau vào file index.html
        

        <nav class="menu">
            <ul>
                <li><a href="#">Trang chủ</a></li>
                <li class="active"><a href="#">Sản phẩm</a></li>
                <li><a href="#">Dịch vụ</a></li>
                <li><a href="#">Liên hệ</a></li>
            </ul>
        </nav>
        
        <div class="sub-menu">
            <ul>
                <li class="sp1"><a href="#">Sản phẩm 1</a></li>
                <li><a href="#">Sản phẩm 2</a></li>
                <li><a href="#">Sản phẩm 3</a></li>
            </ul>
        </div>
        
        <div class="content">
            <h1>Chào mừng đến với trang web</h1>
            <p>Đây là nội dung chính...</p>
        </div>
        

      • Tô màu xanh lá cho tất cả thẻ a là con trực tiếp của thẻ li trong .menu.
      • Tô màu cam cho thẻ a là con trực tiếp của .active trong .menu.
      • Tô màu đỏ cho thẻ a trong .sub-menu.
      • Tô màu nâu cho 2 thẻ a sản phẩm 2 và 3 là con của li, là anh em với li có class là sp1
      • Đặt id “tieude-chinh” cho h1, chọn id và đổi thành màu xanh dương
      • Xong xem kết quả
        

🎞️ Xem video hướng dẫn chi tiết:

 ⬆ Về đầu Bài 7

1. Bộ chọn có thuộc tính (presence selector):
   • Trong 1 thẻ thường có nhiều thuộc tính. VD: thẻ a có thuộc tính href, thẻ img có thuộc tính src…v.v. Chúng ta sẽ lợi dụng những thuộc tính này để chọn phần tử cần tác động dễ dàng và chính xác hơn
   • Cú pháp:
      [attribute]
      Luôn dùng dấu ngoặc vuông cho thuộc tính
   • Ví dụ:
     (HTML): <a href="https://google.com">Google | </a>
     (CSS): [href] { color: green;}
2. Bộ chọn giá trị chính xác (exact value selector):
   • Cú pháp:
      [attribute =”value”]
   • Ví dụ:
     (HTML): <a href="https://google.com">Google | </a>
     (CSS): [href="https://google.com"] {color: salmon;}
3. Bộ chọn chứa chuỗi (Contains Selector) :
   • Cú pháp:
       [attribute*=”value”]
   • Ví dụ:
     (HTML): <a href="https://youtube.com">YouTube | </a>
     (CSS): [href*="youtube"] {color: brown;}
4. Bộ chọn chứa từ (Space Separated Selector):
   • Cú pháp:
      [attribute~=”value”]
   • Ví dụ:
     (HTML): <a href="https://thichvocvach.io.vn" title="Thích Vọc Vạch"
     (CSS): [title~="Vọc"] { color: purple; }
5. Bộ chọn giá trị bắt đầu (Starts With Selector):
   • Cú pháp:
      [attribute^=”value”]
   • Ví dụ:
     (HTML): <p title="Đoạn văn bản 1">Lorem ipsum, dolor sit amet.</p>
     (CSS): [title^="Đoạn"] { color: blue; }
6. Bộ chọn giá trị kết thúc (Ends With Selector):
   • Cú pháp:
      [attribute$=”value”]
   • Ví dụ:
     (HTML): <p title="Đoạn văn bản 2">Lorem ipsum dolor sit amet.</p>
     (CSS): [title$="2"] { color: red; }
7. Bộ chọn giá trị bắt đầu và gạch nối (Hyphen Selector):
   • Cú pháp:
      [attribute|=”value”]
   • Ví dụ:
     (HTML): <p lang="en-US">American English</p>
     (CSS): [lang|="en"]{ color: yellow; }
8. Thực hành
   • Tạo bài-08 và file index.html
   • Copy cấu trúc sau vào file index.html
      <nav>
          <ul>
              <li><a href="#" data-type="home">🏠 Trang chủ</a></li>
              <li><a href="#" data-type="products">📦 Sản phẩm</a></li>
              <li><a href="#" data-type="services">🛠️ Dịch vụ</a></li>
              <li><a href="#" data-type="contact">📞 Liên hệ</a></li>
              <li><a href="#" data-status="new">🔥 Mới</a></li>
              <li><a href="#" data-status="sale">⚡ Giảm giá</a></li>
          </ul>
      </nav>
   • Tô màu xanh lá cho các link có data-type.
   • Tô nền đỏ cho các link có data-status="new".
   • Tô nền nâu cho các link có data-status chứa từ "sale".
   • Tô màu cam cho các link có data-type bắt đầu bằng "ser"
   • Xong, Xem kết quả
     

 ⬆ Về đầu Bài 8

 ⬆ Về đầu Bài 9

 ⬆ Về đầu Bài 10

 ⬆ Về đầu Bài 11