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

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

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

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) có lẽ là kỹ thuật 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. #1. Căn giữa …

Đọc thêm

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

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