07/09/2018, 23:16

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;
}

 

Bài liên quan

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

Điệp Bắp viết 23:16 ngày 07/09/2018

Cách function minmax() hoạt động trong CSS (phần 1)

Một tính năng hữu ích cực kỳ hữu ích được giới thiệu với Đặc điểm bố cục CSS của CSS là chức năng minmax (). Chức năng này mở ra cho chúng ta khả năng viết CSS mạnh mẽ và gọn gàng hơn bằng cách cho phép chúng ta thiết lập, như một giá trị cho đường lưới, một chức năng bao gồm cả giá trị tối thiểu ...

Tạ Quốc Bảo viết 15:27 ngày 12/08/2018

HTML Collective - Phần 1

I. Giới thiệu và hướng dẫn cài đặt HTML Collective là một package hỗ trợ cho Laravel xây dựng lên các Form HTML, để cài đặt pakage này trên Laravel, chúng ta sử dụng câu lệnh sau (dành cho những bạn sử dụng composer) : composer require "laravelcollective/html":"^5.3.0" Sau khi composer thực ...

Trịnh Tiến Mạnh viết 15:01 ngày 12/08/2018

Responsive table với CSS - Phần 1

Table là 1 thành phần thường xuyên xuất hiện và không thể thiếu khi xây dựng các trang HTML/CSS để hiển thị nội dung dưới dạng bảng. Tuy nhiên, vấn đề xử lý để table hiển thị nội dung đầy đủ và rõ ràng cho các thiết bị mobile là 1 vấn đề khá nan giải, vì các thiết bị mobile có kích thước màn hình ...

Hoàng Hải Đăng viết 14:07 ngày 12/08/2018

Tìm hiểu về CSS Modules (phần 1)

Nếu bạn muốn xác định một điểm bước ngoặt trong sự phát triển gần đây về tư duy CSS, có thể bạn muốn chọn Christopher Chedeau của "CSS trong JS" nói chuyện từ NationJS trong tháng Mười Một, năm 2014. Đó là một bước ngoặt mà thiết lập một loạt các suy nghĩ khác nhau theo hình xoắn ốc đi theo các ...

Hoàng Hải Đăng viết 13:31 ngày 12/08/2018
+3