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

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

Danh mục CSS

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

Danh mục CSS

Đánh giá công cụ gợi ý tên miền Instant Domain Search

Nếu như công cụ Lean Domain Search mạnh về tiền tố và hậu tố gắn với tên miền, NameMesh mạnh về ngữ nghĩa thì Instant Domain Search lại nổi bật về tốc độ, kết quả ngay lập tức được hiển thị khi người dùng gõ từng ký tự. Ưu thế về tốc độ này có được nhờ Instant Domain Search tận dụng các Zone file có sẵn và liên tục cập nhật của hàng triệu tên miền cấp cao nhất. Như tác giả Beau chia sẻ, anh sử dụng Zone file của Verisign. Tuy nhiên tốc độ sẽ chẳng mang …

Đọc thêm

Google Hummingbird là gì? Và tại sao nó là một trong những đột phá SEO quan trọng nhất

Ngày phát hành lần đầu của Google Hummingbird (ước tính): 20, tháng 8, năm 2013 Không giống như các cập nhật Panda và Penguin trước đó, vốn được phát hành lần đầu dưới dạng bổ sung (add-on) cho thuật toán Google đã có (existing algorithm), Hummingbird được mô tả là cuộc đại tu toàn diện thuật toán cốt lõi (core algorithm). Trong khi nhiều thành phần đã tồn tại trước đó của thuật toán lõi được cho là vẫn còn nguyên vẹn, Hummingbird là tín hiệu cho thấy cam kết của Google rằng họ có khả năng hiểu biết sâu …

Đọc thêm

Danh mục SEO

Đánh giá lại hiện tượng mù banner trong quảng cáo: Người dùng bỏ ngơ quảng cáo trên Di động và Máy bàn

Tóm tắt: Người dùng đã học được cách ngó lơ nội dung trông giống quảng cáo, ở gần quảng cáo, hoặc xuất hiện ở những vị trí thường chuyên dùng cho quảng cáo. Hiện tượng mù banner quảng cáo (banner blindness) là hành vi của người dùng web đã được biết đến từ lâu rồi: nó mô tả việc người dùng có xu hướng bỏ lơ các thành phần trên trang mà họ coi là quảng cáo (nhận thức này trong thực tế có thể đúng có thể sai, vấn đề ở đây là cảm nhận chủ quan của người …

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

Danh mục CSS

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

Danh mục CSS

Tối ưu font tùy chỉnh với @font-face

@font-face rất hợp nếu bạn muốn tạo phong cách riêng cho trang, mặc dù hiện nay các font tùy chỉnh cho tiếng Việt vẫn hạn chế về tính ứng dụng thực tế, nhưng cũng đã khá hơn nhiều so với cách đây vài năm. Và nhìn chung đối với các văn bản ngắn bạn có rất nhiều lựa chọn. Một nguồn miễn phí đáng tin cậy để tải các font tùy chỉnh hỗ trợ tốt tiếng Việt là Google Fonts. Bạn có thể sử dụng tính năng lọc ở trên cùng (ví dụ theo category) để nhanh chóng tìm ra …

Đọc thêm

Danh mục CSS

Tìm hiểu về font cho web (hướng dẫn từ Mozilla)

Trong phần đầu của bài, chúng ta sẽ khám phá các tính năng cơ bản dành cho việc định kiểu font và văn bản. Càng về sau, bài viết sẽ đi vào chi tiết và nâng cao hơn. Chúng ta sẽ học cách sử dụng font tùy chỉnh (custom fonts) để cho phép bạn khả năng có được sự đa dạng về kiểu dáng của văn bản. Tóm tắt về font-family Thuộc tính font-family được sử dụng để điều chỉnh văn bản trong HTML. Nó có thể lấy một hoặc nhiều tên font-family. Khi hiển thị một trang web, trình …

Đọc thêm

Danh mục CSS

Mẹo với @font-face: định nghĩa font-weight và font-style để giữ CSS của bạn đơn giản hơn

Khi chúng ta sử dụng @font-face để nhúng font vào website, mà bản thân font đó có một số weight (độ đậm nhạt, light, bold,…) và style (nghiêng, italic) khác nhau thì CSS của bạn có thể trông rối nếu bạn không định nghĩa những weight và style này trong khai báo (declarations) của @font-face. Không may là một số hướng dẫn và các dịch vụ nhúng font lại không làm tốt điều này. Khao báo nhiều tên font-family cho cùng một kiểu font sẽ làm CSS của bạn trở nên phức tạp OK, giờ chúng ta sẽ xem vấn …

Đọc thêm

Danh mục CSS