Reset CSS trong thiết kế web là gì vậy?

Vài lời của người dịch: tôi bắt đầu chú ý đến file reset.css khi tham khảo một số nhóm hội về front-end trên FB. Rồi thì khi thấy sự khác biệt của các trình duyệt về cách render nội dung qua phần kiểm tra đa trình duyệt (cross browser testing / nhiều nơi dịch là kiểm tra chéo trình duyệt), tôi nghĩ là mình sẽ phải tìm hiểu sâu hơn về chủ đề này. Mục đích chính của file reset.css là tạo ra được định kiểu thống nhất trên càng nhiều trình duyệt khác nhau càng tốt, tính cả phiên …

Đọc thêm

Các thuộc tính con trỏ chuột (cursor) trong CSS

Thuộc tính trỏ chuột quyết định cách hiển thị của con trỏ khi nó di qua một thành phần nào đó. Thực sự thì đến bài này tôi mới biết là có nhiều hiệu ứng trỏ chuột đến vậy trong CSS. Bạn muốn biết ngay không, thế thì dưới đây là tên của các thuộc tính đó, bạn cứ di chuột qua từng từ để thấy con trỏ chuột thay đổi như thế nào nhé. Tất nhiên, hiệu ứng con trỏ chuột chỉ thấy rõ trên máy bàn: autoaliascrosshaircol-resizedefaulte-resizehelpmoven-resizene-resizenw-resizenot-allowedno-droppointerprogressrow-resizes-resizese-resizesw-resizetextw-resizewait Code mẫu: Từng hiệu ứng con trỏ chuột có các ứng …

Đọc thêm

Một ví dụ về bảng biểu ECharts ưa thích của tôi

Bảng biểu tạo bằng thư viện JS ECharts rất đẹp mắt, bản thân nó cũng có tính năng responsive rồi. Tuy nhiên chúng ta cần chỉnh sửa các cài đặt sao cho phù hợp. Mục đích là để tạo bố cục hợp lý, thuận mắt trên cả giao diện di động lẫn máy bàn. Việc tích hợp này là rất quan trọng để tận dụng được hình thức nổi bật của ECharts. Sự thực vấn đề thường nằm ở giao diện di động, vì màn hình lớn đồ thị thường không gặp vấn đề cản trở nào, nhưng với màn …

Đọc thêm

Sự khác biệt giữa inline, block và inline-block là gì?

Khi chúng ta viết HTML và CSS thì mấy thuật ngữ như block, inline và inline-block có thể gây bối rối, nhưng chúng lại rất quan trọng nếu bạn muốn căn chỉnh bố cục trang! Lơ tơ mơ về mấy thứ căn bản này sẽ làm chúng ta cảm thấy cực kỳ vất vả khi muốn các vị trí trên trang đặt đúng nơi mình muốn. Hoặc ngay cả khi đặt được đúng vị trí rồi, có thể bạn vẫn lăn tăn không ổn, vì không hiểu rõ mình vừa làm điều gì. Bên dưới đây chúng ta sẽ xem …

Đọc thêm

Căn giữa Form trong CSS

Mấy hôm trước khi tôi viết bài về căn giữa văn bản trong CSS, định tích hợp luôn phần này vào, vì input và button thường cũng gồm văn bản luôn, không hiếm trường hợp phải căn giữa, đặc biệt trên các giao diện dành riêng cho tìm kiếm, hoặc search bar chiếm vị trí quan trọng trên website. Tuy nhiên nghĩ lại thì tách ra hợp lý hơn, điều đầu tiên là vì form dù bao gồm chữ, nhưng nó khác nhiều các thẻ bao chữ khác như a, p, h, ul li, ol li. Cụ thể form có …

Đọc thêm

Làm chủ thuộc tính Width trong CSS

Width là một trong các thuộc tính quan trọng nhất trong CSS, nó chỉ đến chiều rộng của phần tử. Bất cứ thiết kế nào hiện nay cho web, đều đặc biệt quan tâm đến responsive, khả năng thích ứng với nhiều kích thước thiết bị của người dùng cuối, và cái này về bản chất là điều chỉnh width chung của giao diện và các phần tử liên quan sao cho phù hợp. Có ba thuộc tính mà ta sẽ thường dùng, đó là: auto: chiều rộng của thẻ được thiết lập tự động; giá trị cố định: chiều …

Đọc thêm

Căn giữa văn bản (text) trong CSS

Căn giữa văn bản (text) có lẽ là phần căn giữa cơ bản nhất, và cũng dễ làm hơn cả (có vẻ không phải thực sự là nó dễ hơn cái khác, khả năng cao hơn là vì chúng ta phải thao tác với văn bản nhiều mà thôi). Hôm nay tôi và các bạn sẽ đi vào thực hành căn văn bản trong nhiều hình thức khác nhau, để xem cụ thể thì chúng sẽ như thế nào, dù chúng ta đều biết rằng câu lệnh cơ bản để làm điều đó là text-align: center. Căn giữa văn bản …

Đọc thêm

Thuộc tính z-index trong CSS – lý thuyết và thực hành

Thuộc tính z-index dùng để chỉ thị thứ bậc của các lớp thẻ trong HTML. Nói một cách đơn giản, nếu các thẻ là các trang giấy thì số thứ tự của trang chính là chỉ số z-index, làm cho trang này ở trước trang kia. z-index luôn đi kèm với thuộc tính position. Trong ví dụ minh họa ở trên, tôi có nói về các trang sách, nó không hoàn toàn đúng hẳn, vì ở sách, trang nào có số lớn thì nằm dưới, nhưng với z-index, thẻ HTML nào có trị số lớn thì nằm lên trên – …

Đọc thêm

Về thuộc tính display trong CSS

Trong các thuộc tính cơ bản về CSS, các thuộc tính liên quan đến vị trí, không gian như căn giữa phần tử là tôi lớ ngớ nhất. Mà cái này lại rất quan trọng trong thiết kế nên phải sửa chữa ngay thôi. Và thuộc tính display trong CSS liên quan rất nhiều đến việc căn giữa, dạo gần đây nó bổ sung thêm vài giá trị mới rất tiện lợi. Định nghĩa và cách sử dụng Thuộc tính display chỉ định hành vi hiển thị (kiểu kết xuất hộp / rendering box) của một phần tử. Trong HTML, …

Đọc thêm

Căn giữa theo chiều ngang trong CSS: hướng dẫn toàn diện

Căn giữa các phần tử trong CSS có lẽ là một trong các vấn đề mà người thiết kế giao diện hay phàn nàn nhất. Tại sao nó lại khó khăn như vậy? Tôi nghĩ vấn đề không phải là nó quá khó thực hiện, mà là vì có rất nhiều cách khác nhau để làm điều đó- phụ thuộc vào tình huống cụ thể, cái khó ở đây là không biết đi theo hướng nào. Vì thế chúng ta sẽ làm các phân loại và hy vọng việc lựa chọn sẽ dễ dàng hơn. Nào chúng ta cùng bắt …

Đọc thêm