Thẻ <div> là gì ?

• Viết tắt của Division : khối
• Là một thẻ chứa nhiều thẻ khác bên trong và phân chia tài liệu HTML thành các phần khác nhau. Vì thế thẻ div cũng được sử dụng để trình bày bố cục cho trang web.

Ví dụ:

See the Pen
Demo Div 1 by Cuong Tien (@cuongtien)
on CodePen.

CSS (Cascading Style Sheets ): là mã bạn sử dụng để tạo kiểu cho trang web của mình

• • Cách sử dụng CSS:
    • Inline CSS: áp dụng cho một phần tử HTML.
    • Internal CSS: áp dụng cho một trang HTML   
    • External CSS: áp dụng cho nhiều trang HTML
      • Với External CSS bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tập tin.
  • Ví dụ:
    • Inline CSS

See the Pen
Demo Inline CSS by Cuong Tien (@cuongtien)
on CodePen.

• • • Internal CSS

See the Pen
Demo Internal CSS by Cuong Tien (@cuongtien)
on CodePen.

• • • External CSS

See the Pen
Demo External CSS by Cuong Tien (@cuongtien)
on CodePen.

Các vùng chọn CSS thông dụng

Vùng chọn dựa vào tên thẻ

Ví dụ : Định dạng thẻ h1 thì vùng chọn sẽ là h1 như sau:

h1 {
    background: red;
    color: blue;
}

Đây là kiểu định dạng đơn giản, nhưng được khuyên không nên sử dụng nhiều bởi dĩ nhiên khi bạn định dạng như trên thì tất cả các thẻ h1 trong trang web sẽ chuyển thành định dạng như vậy. Ví dụ trong trang web có 100 thẻ h1 thì tất cả 100 thẻ đó đều cùng 1 màu sắc như trên.

Vùng chọn dựa vào id

Khi nhắc đến id nghĩa là chỉ có duy nhất mà không có trùng lặp. Nếu bạn cố tình cho nhiều tên id giống nhau thì code vẫn chạy bình thường nhưng khi đến lập trình bên phía server thì sẽ bị lỗi. Vì vậy không nên dùng nhiều tên id giống nhau. Sử dụng id bạn sẽ định dạng được các thẻ theo ý riêng của mình.

Ví dụ: Định dạng thẻ h1 dựa vào id=”nenvang” thì đoạn code của thẻ h1 sẽ như sau:

<h1 id="nenvang"> Học lập trình web </h1>

Code định dạng css như sau:

#nenvang {
    background: yellow;
    color: blue;
}

<h2 class="nenxanh"> Học css căn bản </h2>

.nenxanh {
    background: blue;
    color: red;
}

Vùng chọn phân cấp

Ở 3 vùng chọn trên khá là đơn giản và dễ hiểu nhưng đến cùng chọn này thì mức độ phức tạp sẽ cao hơn. Vùng chọn phân cấp tức là bạn cần định dạng 1 thẻ mà thẻ đó nằm trong 1 thẻ khác hay trong 1 id, class khác và id, class đó lại nằm trong 1 id, class khác nữa.

A B
Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó.

Ví dụ : Định dạng tất cả thẻ h3 nằm trong thẻ div có id=”nenmaudo” thì code HTML như sau:

<div id="nenmaudo">
     <div class="content">
	 <h3>Học CSS Cơ Bản</h3>
     </div>
</div>

Code định dạng css như sau:

#nenmaudo h3 {
    background: red;
    color: white;
}

A > B
Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong thẻ nào khác.

Ví dụ: Định dạng thẻ h3 nằm trong thẻ div có class=”content” thì code HTML như sau:

<div id="nenmaudo">
    <div class="content"> 
         <h3>Học CSS Cơ Bản</h3>
    </div> 
</div>

Code định dạng css như sau:

#nenmaudo>.content>h3 { 
background: red; 
color: white; 
}

Vùng chọn tất cả

Nghe tên vùng chọn thôi bạn cũng đã hiểu được ý nghĩa của nó rồi đúng không? Vùng chọn tất cả được sử dụng bằng dấu * nghĩa là tất cả các thẻ trong trang HTML sẽ chịu tác động cùng nhau. Có nhiều bạn nhầm lẫn vùng chọn này với vùng chọn theo tên body. Vì vậy bạn cần phân biệt 2 vùng chọn này hoàn toàn khác nhau nhé. Vùng chọn theo tên thẻ body chưa chắc đã tác động lên hết các thẻ HTML còn vùng chọn * thì chắc chắn sẽ tác động lên tất cả các thẻ HTML trong trang web.

Ví dụ : Định dạng màu nền cho toàn trang web là màu xanh và màu của tất cả chữ là màu trắng.

* {
    background: blue;
    color: white;
}

Sự khác nhau giữa <div id=”tên thẻ”></div> và <div class=”tên thẻ”></div>

Ví dụ so sánh sự khác nhau của Class và ID:

See the Pen
SS ID & CLASS by Cuong Tien (@cuongtien)
on CodePen.

Bài Tập

Bài 1:

Bài 2:

Tài liệu: DOWNLOAD

Bài 3:

Bai 3.1:

Bài 4:

Bài 5:

Tài nguyên: [download-attachment id=”480″ title=”Download TN Bai 5″]

index.html

style.css

Bài 6:

Tài nguyên:

[download-attachment id=”482″ title=”Download TN Bai 6″]

link google meet: meet.google.com/dwe-uygu-emj

Link tải Bài Tập tham khảo:

De thi : https://drive.google.com/file/d/17eQrQVQWiDJVN87__UOMdRDpGnZaLaTp/view?usp=sharing

Vi Du Font, box-shadow, hover

Bai Tap Tham Khao

Bai Cuoi Mon Tham Khao

Link Tham Khao HTML