Ở bài trước thì chúng ta đã cùng nói về MODEL BOX TRONG CSS cũng như các thuộc tính liên quan của nó đến một phần tử HTML.
Trong bài học ngày hôm nay chúng ta sẽ tìm hiểu về ID và class trong HTML và thuộc tính float trong CSS.
Nội dung
Để đọc hiểu bài này, bạn nên có kiến thức về:
Trong bài này, Kteam sẽ cùng bạn tìm hiểu về:
- ID và Class trong HTML
- Các cú pháp nâng cao hiệu suất code
- Thuộc tính Float trong CSS
- Clearfix class
Các thao tác được thực hành trên project của bài trước, bạn có thể tải xuống project ở cuối bài MODEL BOX TRONG CSS
Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.
ID và Class trong HTML
Giả sử, với project Blog mà chúng ta đang làm trong bài trước, mình cần thêm các thẻ
khác vào trong blog như sau:Hello Kters
Front End Course
Tuy nhiên, do mình đã chỉ định thẻ
HOWKTEAM BLOG trước đó có các thuộc tính riêng tại file style.css như chữ có kích thước 900px, màu xanh lá [green]; nền màu aqu; có viền chấm 2px [dotted] màu đỏ [red],…Điều này dẫn đến việc các thẻđược thêm vào trong file index.html sau này có định dạng thuộc tính tương tự thẻban đầu mà mình không mong muốn.Chính vì vậy Class & Id sinh ra để giải quyết các trường hợp này, giúp xác định cụ thể phần tử mà bạn muốn định dạng. Tuy nhiên, ở khóa LẬP TRÌNH FRONT END CƠ BẢN có thể bạn chưa thấy được nhiều khác biệt của 2 thuộc tính này, mà sẽ tìm hiểu rõ hơn trong các khóa CSS NÂNG CAO.
Thuộc tính ID
Thuộc tính id dùng để đặt tên cho một phần tử trong HTML, mỗi thuộc tính id chỉ chỉ định cho một phần tử duy nhất trong file HTML hiện hành.
Giá trị id được sử dụng trong CSS hoặc JavaScript để chỉ định cụ thể định dạng hoặc thực hiện tác vụ nhất định cho phần tử đó.
Gán thuộc tính id trong HTML:
Sử dụng giá trị id trong CSS:
#id_name{
thuộc tính: giá trị;
}
Trong đó:
- Thuộc tính id có thể sử dụng trên bất kỳ phần tử HTML nào.
- id_name [giá trị id] chứa các ký tự chữ cái, số, gạch [_], nối [-]; có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên id bằng số.
Ví dụ:
Tại file index.html
HOWKTEAM BLOG
Tại file style.css thay h1 bằng giá trị id heading1
#heading1{
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 50px;
}
#heading1{
color: green;
/* Sử dụng tên trong của màu sắc */
color: #0000ff;
/* Sử dụng mã màu hexan */
color: rgb[0, 255, 0];
/* Sử dụng phối màu rgb[] red green blue */
color: rgba[0, 255, 0, 1];
/* Tương tự rgb[] và thêm 1 thông số là độ mờ */
}
#heading1{
border: 4px solid red;
border-style: dotted;
background-color: aqua;
}Sau khi gán id trang blog thay đổi như hình:
- Ngoại trừ thẻcó chứa thuộc tính id heading1 có định dạng riêng, các thẻkhác đều có định dạng mặc định.
Ứng dụng Id trong việc đánh dấu
Thuộc tính id cung cấp cho bạn một ứng dụng khá thú vị, thường hay nhìn thấy ở trang LandingPage hoặc một số web có nội dung khá dài.
Cụ thể, bạn có thể dùng id như một vị trí, sau đó thêm liên kết đi đến vị trí đó
Tạo vị trí đánh dấu theo cách gán id thông thường
Tạo đường dẫn đến vị trí đánh dấu [trong cùng trang HTML]
Tạo đường dẫn đến vị trí đánh dấu [từ trang khác]
#id_name”> nội_dung_gắn_liên_kết
Ứng dụng này sẽ được nói rõ hơn trong quá trình xây dựng website Langding Page của khóa học này.
Thuộc tính class
Thuộc tính class dùng để đặt tên cho các phần tử trong html, mỗi thuộc tính class có thể chỉ định cho nhiều phần tử HTML [cùng hoặc khác loại] để có cùng định dạng.
Giá trị class được sử dụng trong CSS hoặc JavaScript để chỉ định đồng loạt các định dạng chung hoặc thực hiện chung tác vụ cho các phần tử HTML có cùng thuộc tính class.
Gán thuộc tính class trong HTML:
Sử dụng giá trị class trong CSS:
.class_name{
thuộc tính: giá trị;
}
Trong đó:
- Thuộc tính class có thể sử dụng trên bất kỳ phần tử HTML nào.
- class_name [giá trị class] chứa các ký tự chữ cái, số, gạch [_], nối [-]; có phân biệt chữ hoa và chữ thường. Trong giá trị class phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên class bằng số.
Ví dụ:
Tại file index.html thay vì dùng id heading1, mình đổi thành class heading. Và thêm thẻ p cũng có cùng class heading như thẻ h1
HOWKTEAM BLOG
Hello Kters
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, incidunt dolores perferendis sapiente,
quas voluptatem cumque ipsa accusantium ab possimus iusto quo porro esse eius nemo explicabo quasi rerum! Cumque.
Tại file style.css thay giá trị id heading1 bằng giá trị class heading
.heading1{
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 50px;
}
.heading1{
color: green;
/* Sử dụng tên trong của màu sắc */
color: #0000ff;
/* Sử dụng mã màu hexan */
color: rgb[0, 255, 0];
/* Sử dụng phối màu rgb[] red green blue */
color: rgba[0, 255, 0, 1];
/* Tương tự rgb[] và thêm 1 thông số là độ mờ */
}
.heading1{
border: 4px solid red;
border-style: dotted;
background-color: aqua;
}Sau khi gán class trang blog thay đổi như hình:
- Các thẻ có chứa thuộc tính class heading [như h1, p] có cùng kiểu định dạng , các thẻ khác đều có định dạng mặc định.
Sử dụng nhiều class cho một phần tử HTML
Các phần tử HTML có thể có một hoặc nhiều thuộc tính class, các thuộc tính được tách biệt nhau bằng dấu cách.
Ví dụ:
Index.html
HOWKTEAM BLOG
Hello Kters
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, incidunt dolores perferendis sapiente,
quas voluptatem cumque ipsa accusantium ab possimus iusto quo porro esse eius nemo explicabo quasi rerum! Cumque.
Style.css
.center{
text-align: center;
}
.heading{
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 50px;
}
.heading{
color: green;
/* Sử dụng tên trong của màu sắc */
color: #0000ff;
/* Sử dụng mã màu hexan */
color: rgb[0, 255, 0];
/* Sử dụng phối màu rgb[] red green blue */
color: rgba[0, 255, 0, 1];
/* Tương tự rgb[] và thêm 1 thông số là độ mờ */
}
.heading{
border: 4px solid red;
border-style: dotted;
background-color: aqua;
}
Từ kiến thức ở các phần trên, bạn hoàn toàn có thể chạy thử và phân tích kết quả của ví dụ này!
Các cú pháp nâng cao hiệu suất code
Trong quá trình code, việc gõ đủ định dạng của các thẻ khiến bạn khá mất thời gian dù đã được hỗ trợ nhắc lệnh từ Visual Studio Code. Để tối đa hiệu suất code, Kteam gợi ý bạn sử dụng một số cú pháp sau
- Gõ nhanh các cặp thẻ div chứa id
#id_name
Ví dụ: gõ #heading1 cho kết quả
- Gõ nhanh các cặp thẻ div chứa class
.class_name
Ví dụ: gõ .container cho kết quả
- Gõ nhanh các phần tử khác trong HTML với id
phần_tử_HTML#id_name
Ví dụ: gõ h1#heading1 cho kết quả
- Gõ nhanh các phần tử khác trong HTML với class
phần_tử_HTML.id_name
Ví dụ: gõ h1.container cho kết quả
Cú pháp reform trang HTML
Ctrl + A sau đó Ctrl + K cuối cùng là Ctrl + F
Giúp canh chỉnh các thẻ code đã sử dụng trong file HTML giúp bạn dễ dàng quan sát file HTML của bạn.
Chuyển comment thành code
Bạn có thể chuyển code thành comment và ngược lại bằng cách tô đen đoạn code cần chuyển rồi dùng tổ hợp phím:
Ctrl + /
Ta có thể chỉnh sửa một chút tại file index.html giúp bạn ứng dụng các cú pháp nhanh trên:
HOWKTEAM BLOG
Thuộc tính float trong CSS
Nói một cách đơn giản thuộc tính Float xác định rằng một phần tử HTML nên được đặt dọc theo bên trái hay bên phải của vùng chứa của nó, đồng thời nó cho phép các phần tử văn bản và phần tử nội tuyến khác quấn quanh nó.
Phần tử được xóa khỏi luồng thông thường của trang web, mặc dù vẫn còn một phần của luồng [ ngược lại với vị trí hiển thị tuyệt đối]
Cú pháp:
phần_tử_HTML{
float: left [hoặc right ];
/* Mặc định float: none */
}
Ví dụ: Sử dụng thuộc tính float: left [trong trường hợp này content chiếm 75% và avatar chiếm 25% chiều rộng container]
style.css
HOWKTEAM BLOG
Kết quả sau khi sử dụng thuộc tính float như sau:
Clearfix Class
Clearfix class trong HTML
Clearfix class nói ngắn gọn là 1 kĩ thuật giúp cho element không chứa thuộc tính float, không phải chịu ảnh hưởng của các phần tử chứa thuộc tính float gần nó.
Lưu ý: Ở phần này các bạn không nhất thiết phải hiểu quá sâu, chỉ cần biết cách áp dụng là được
Trong ví dụ trên, nếu để ý bạn sẽ thấy nội dung phần Info cũng trôi theo phần avatar dù không gán thuộc tính float: left.
Để giải quyết vấn đề này, chúng ta sẽ sử dụng Clearfix Class:
index.html
HOWKTEAM BLOG
Thuộc tính CSS trong clearfix
Có nhiểu cách tạo thuộc tính CSS cho class clearfix, dưới đây là mình giới thiệu cho các bạn 1 trong số đó.
HOWKTEAM BLOG
Sau khi áp dụng clearfix class, bạn có thể thấy phần info không còn bị ảnh hưởng bởi thuộc tính float của avatar
Bạn có thể tham khảo chi tiết hơn về clearfix class tại:
//www.w3schools.com/css/css_float.asp
Project tham khảo
Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!
Kết luận
Ở bài này chúng ta đã cùng nhau tìm hiểu về cách sử dụng ID và Class trong HTML và cách sử dụng thuộc tính float trong CSS.
Ở bài sau chúng ta sẽ tìm hiểu THUỘC TÍNH POSOTION TRONG CSS và hoàn thiện trang Blog của chúng ta.
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập - Thử thách - Không ngại khó”.
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học ID, class trong HTML và thuộc tính float trong CSS dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.