Danh sách trong CSS

Các đặc tính để tạo danh sách trong HTML và CSS Trong HTML có 2 kiểu danh sách chính: Không theo thứ tự (<ul>) liệt kê hạng mục bằng các kí tự đầu dòng Theo thứ tự (<ol> liệt kê hạng mục bằng số hoặc chữ cái Đặc tính danh sách trong CSS cho phép [ [ ...]

Bảng trong CSS

Đường viền cho bảng trong CSS Để tạo đường viền cho bảng trong CSS, dùng đặc tính border. Ví dụ dưới đây cho biết dùng viền đen cho các phần tử <table>, <th> và <td>. table, th, td { border: 1px solid black; } Lưu ý là trong ví dụ trên bảng có đường viền [ [ ...]

display trong CSS

Đặc tính display là đặc tính CSS quan trọng nhất để kiểm soát layout cho trang web. Đặc tính display Đặc tính display cho biết một phần tử có hiển thị hay không và hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị hiển thị mặc định phụ thuộc vào kiểu phần tử. Giá trị [ [ ...]

Max-width, độ rộng tối đa của phần tử trong CSS

Đặc tính width và max: width xác định độ rộng của phần tử. Như đã được đề cập trước đó, phần tử khối luôn chiếm hết chiều rộng có thể (kéo từ bên trái sang bên phải). Việc thiết lập độ rộng bằng đặc tính width cho phần tử khối sẽ ngăn nó kéo dài [ [ ...]

Vị trí của phần tử trong CSS

Đặc tính position xác định phương pháp đặt vị trí cho một phần tử (static – tĩnh, relative – tương đối, fixed – cố định, absolute – tuyệt đối hoặc sticky – dán chặt). Đặc tính position trong CSS Đặc tính position được dùng để xác định phương pháp đặt vị trí cho phần tử [ [ ...]

Overflow trong CSS

Đặc tính CSS overflow xác định nội dung sẽ hiển thị ra sao khi nó quá lớn so với khung định sẵn. CSS Overflow Đặc tính overflow cho biết liệu có cắt nội dung hay thêm thanh cuộn vào nội dung của phần tử khi nó quá lớn so với khu vực được định trước. [ [ ...]

Thuộc tính FLOAT và CLEAR trong CSS

Thuộc tính Float sử dụng để chuyển một phần tử sang góc trái hoặc phải của không gian bao quanh nó, rất cần thiết trong việc định dạng bố cục trang. Theo mặc định, tất cả các phần tử HTML là không float. Thuộc tính Float có thể có một trong các giá trị sau: left: Cố định phần [ [ ...]

Thuộc tính Display (inline-block) trong CSS

Có thể nhận thấy rằng, một số thẻ HTML như <div>, <p>, <ul> luôn bắt đầu bằng một dòng mới và có độ dài dòng trải dài 100% trang web, trong khi các thẻ HTML khác như <span>, <img> hoặc <a> thì thường được đặt nối tiếp nhau trên cùng một dòng. Tại sao lại có sự khác biệt như vậy? [ [ ...]

Thuộc tính Display (inline-block) trong CSS

Có thể nhận thấy rằng, một số thẻ HTML như <div>, <p>, <ul> luôn bắt đầu bằng một dòng mới và có độ dài dòng trải dài 100% trang web, trong khi các thẻ HTML khác như <span>, <img> hoặc <a> thì thường được đặt nối tiếp nhau trên cùng một dòng. Tại sao lại có sự khác biệt như vậy? [ [ ...]

Căn chỉnh – Align trong CSS

Align là sự thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh (align) một phần tử như margin, padding, text-align, position, float… Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh. Ở bài viết này, Quantrimang.com [ [ ...]

Combinator trong CSS

Combinator (tổ hợp) thể hiện mối quan hệ giữa các selector, cho phép kết hợp các selector lại với nhau dưới dạng các chuỗi ký tự. Trong CSS, có 4 combinator quen thuộc như sau: Descendant combinator (space): Select những phần tử là con cháu của một phần tử khác. Child combinator (>): Select những phần tử là [ [ ...]

Pseudo-Class trong CSS

Pseudo-Class trong CSS được sử dụng để thêm các hiệu ứng đặc biệt tới một số Selector mà không cần sử dụng đến JavaScript hoặc bất cứ ngôn ngữ Script nào. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào, định dạng đường dẫn khi [ [ ...]

Thuộc tính Opacity/Transparency trong CSS

Thuộc tính opacity xác định độ mờ, độ trong suốt của một phần tử. Độ trong suốt của hình ảnh Thuộc tính opacity có thể lấy giá trị từ 0.0 – 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều. Chú ý: Phiên bản Internet Explorer 8 trở về trước sử dụng filter:alpha(opacity=x). x có thể mang [ [ ...]

Thanh điều hướng – Navigation Bar trong CSS

Thanh điều hướng – Navigation Bar hay còn gọi là thanh menu, được dùng để điều hướng các mục chính của một website, ví dụ như trên Quantrimang.com có một số điều hướng như “Trang chủ”, “Làng công nghệ”, “Công nghệ”, “Lập trình”… Navigation Bar thường được đặt ở đầu trang web hoặc sau header, giúp website [ [ ...]

Sử dụng Dropdown trong CSS

Hiệu ứng Dropdown được sử dụng chủ yếu với các thanh menu điều hướng như một giải pháp không thể thiếu trong thiết kế trang web, đăc biệt là các website có số lượng chỉ mục nhiều, không thể sắp xếp toàn bộ trên giao diện. Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu [ [ ...]

Thư viện hình ảnh trong CSS

SS có thể được sử dụng để tạo những bộ sưu tập giúp bạn quản lý hình ảnh trong website của mình. Chúng được tạo như sau: Ví dụ 1: <!DOCTYPE html> <html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } [ [ ...]

Image Sprite trong CSS

Hình ảnh Sprite là gì? Hình ảnh Sprite là một tập hợp các hình ảnh trang trí như icon hay button nằm trong một file hình duy nhất, sau đó dùng thuộc tính background của CSS để hiện ra đúng vị trí cần thiết. Các trang web có nhiều hình ảnh thường mất nhiều thời gian [ [ ...]

Bộ chọn thuộc tính – Attribute Selector trong CSS

Attribute selector là gì? Attribute selector là cách chọn các phần tử bạn muốn định kiểu (style) trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó. Attribute selector có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc ID vào trong thẻ [ [ ...]

Form – Biểu mẫu trong CSS

Form – biểu mẫu là một phần không thể thiếu trong bất kì loại website nào. Ở bài viết này, Quantrimang.com sẽ hướng dẫn bạn cách xây dựng phần giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể được làm khá đẹp mắt với CSS, dạng như này: Định dạng [ [ ...]

Counter – Bộ đếm trong CSS

Counter – Bộ đếm trong CSS được dùng để đánh số đối tượng nhằm biểu thị hệ thống phân cấp thông tin trên website, giúp hiển thị thông tin một cách rõ ràng và dễ hiểu cho người đọc. Đây là một tính năng khá hữu ích, nhưng chưa được nhiều người biết đến của CSS. [ [ ...]