HTML CSS phần 1
Hướng dẫn cơ bản cho những người mới bắt đầu học html CSS
Xin chào mọi người!,
Hôm nay mình xin chia sẻ một số kiếm thức và một số vấn đề thường gặp phải của những bạn mới học HTML và CSS.
1, Sử dụng ID và Class:
Khi viết HTML các sử dụng ID và class một cách bừa bãi. Một số bạn sử dụng thì toàn ID và một số bạn lại sử dụng toàn Class tuy là nó vẫn hoạt động nhưng về mặt ý và SEO thì không được tốt. Trong một trang web chỉ các khối lớn ta sẽ dùng ID để bao khối đó (ID là duy nhất nó không trùng với ID khác). và bên trong cặp thẻ ID đó ta sẽ dùng các class. nếu thuộc tính các khối con có tính tương đồng ta sẽ sử dụng chung một class.
<div id = "hoc_code">
<div id = "header">
</div>
<div id = "content" class = "content">
<div class = "content_left">
Content Left
</div>
<div class ="content_right">
</div
</div>
<div id = "footer">
</div
</div>
2, Responsive trong từng màn hình.
Khi làm responsive cho từng màn hình thì thường có các khoảng màn hình 320px, 480px, 768px, 992px... và khi bạn viết CSS thứ tự từ trên xuống thì bạn viết responsive từ màn hình to đến màn hình con. Nếu bạn viết ngược lại thì css màn hình con sẽ không nhận.
#hoc_code .content_left{
background:red
}
@media (max-width: @992px) {
#hoc_code .content_left{
background:#ffffff
}
}
@media (max-width: @768px) {
#hoc_code .content_left{
background:#000000
}
}
@media (max-width: @480px) {
#hoc_code .content_left{
background:#fff000
}
}
Qua đây tôi có một ví dụ, các bạn xem khối Content Left sẽ có màu green hay màu trắng(#ffffff) hay màu đen(#000000) ?
.content_left{
background:green;
}
#content .content_left{
background:#000000;
}
.content .content_left{
background:#ffffff;
}
