Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout (bố cục) của trang. Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau: 1.vnexpress.net2.dantri.vn3.www.google.com4.www.freehost.page Bạn dễ dàng thấy tên miền www.freehost.page bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu: …

Đọc thêm

  Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Nó có tác dụng tạo bóng cho hộp (xem thêm mô hình hộp trong CSS). Ví dụ: Kết quả:   Khi sử dụng box-shadow có một số lưu ý sau: Bóng là một hộp có kích thước tương tự hộp ban đầu; Màu sắc mặc định của bóng là đen (mã màu: #000000); box-shadow: 20px 10px; quy định độ dịch chuyển của bóng so với vị trí gốc, theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px); Bạn có …

Đọc thêm

Trong khi thao tác CSS, bộ chọn (selector) là cái được viết ra đầu tiên. Nó là đối tượng mà chúng ta muốn tác động, tiếp theo mới viết các khai báo, trong khai báo có thuộc tính và giá trị (xem thêm cú pháp của CSS). Đễ cho dễ tưởng tượng hơn, giả dụ bạn là thợ sơn chuyên nghiệp, khách hàng alo cho bạn, anh ta muốn sơn ngôi nhà có màu xanh, và các viền cửa màu nâu. OK, chuyện đó chẳng khó gì với bạn, thế nhưng nếu khách hàng không cho biết địa chỉ cụ …

Đọc thêm

Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin). Sở dĩ bình thường bạn chẳng thấy cái hộp nào là bởi theo mặc định các giá trị trên được quy định là 0. Chỉ khi bạn gán một giá trị cụ thể cho nó, các đối tượng này mới hiện nguyên dạng. Giả dụ như dòng chữ này, bạn sẽ không thấy gì cả. Nhưng dòng này nó có đường viền, có đệm Và dưới đây là hình ảnh mô phỏng cho mô hình hộp trong …

Đọc thêm

Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web có nhiều điều hướng – cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích. Hôm nay tôi và bạn sẽ cùng thực hành tạo menu xổ, tiếng Anh là dropdown menu, chúng ta sẽ code hoàn toàn bằng CSS chứ không cần Javascript, ngoài ra cũng chú ý để viết code sao cho đơn giản nhất có thể được mà vẫn tạo ra hiệu quả tương tự. #1. Tạo mã HTML cho menu …

Đọc thêm

Thuộc tính display trong css quy định cách hiển thị của một thẻ trong tương quan với các thẻ, đối tượng khác xung quanh, có 3 cách hiển thị chính: inline: nghĩa là hiển thị trên cùng một dòng, chúng ta có thể kể tên các thẻ trong HTML là inline, bao gồm: thẻ b, thẻ i, thẻ a, thẻ span… block: hiển thị theo khối tách riêng nhau. Một số thẻ HTML là block như thẻ h1 đến h6, thẻ p, thẻ div… none: không hiển thị thẻ đó. Đoạn code của nó trong HTML mặc dù vẫn còn …

Đọc thêm

Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không thành thạo position là thiệt thòi lớn, vì ít nhất menu xổ, popup xuất hiện khi hover, hoặc menu cố định đều cần đến position. Chúng ta bắt đầu với nghĩa tiếng Việt của position, nó có nghĩa là vị trí. Dưới đây là các giá trị của nó… Định vị static Đây là giá trị mặc định của các thẻ, theo đó chúng sẽ được sắp xếp theo thứ tự …

Đọc thêm