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
- Cách sử dụng 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; }
Nhìn vào cú pháp bạn sẽ thấy : Để định dạng vùng theo id thì sử dụng cú pháp #nameID trong đó nameID là tên id bạn đặt trong thẻ cần định dạng và trước tên id sẽ là dấu #, khi chạy chương trình thì chỉ có các thẻ h1 có id=”nenvang” mới chịu tác động còn các thẻ h1 khác sẽ không chịu tác động. Đây là một cách được sử dụng rất nhiều hiện nay.
Vùng chọn dựa vào class
Vùng chọn dựa vào class khá giống với vùng chọn id chỉ khác đó là tên class có thể nhiều tên giống nhau và thay vì sử dụng dấu # trước tên class thì chúng ta sẽ sử dụng dấu chấm. Ngay sau dấu chấm sẽ là tên class
Ví dụ: Định dạng thẻ h2 dựa vào class=”nenxanh” thì đoạn code của thẻ h2 sẽ như sau:
<h2 class="nenxanh"> Học css căn bản </h2>
Code định dạng css như sau:
.nenxanh { background: blue; color: red; }
Như vậy chỉ có các thẻ h2 mà có class =”nenxanh” mới chịu tác động css. Đây cũng là selector phổ biến trong các trang web hiện nay mà bạn cần biết.
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
Link Tham Khao HTML