Video: #8 Thẻ ảnh trong HTML 2025
Danh sách được tạo kiểu với các tờ kiểu xếp tầng (CSS) mạnh mẽ hơn nhiều so với các danh sách theo kiểu định dạng HTML danh sách chuẩn. Với CSS, bạn có thể dễ dàng lựa chọn loại danh sách cho cả danh sách được đánh số và đống, đặt vị trí các viên đạn tương đối với nội dung trong danh sách và thậm chí chọn sử dụng đồ hoạ của riêng bạn cho hình ảnh đạn.
list-style-type: Đối với các danh sách được sắp xếp, thiết lập kiểu danh sách thành thập phân, lower-roman, upper-roman, lower-alpha, upper-alpha, hoặc none. Khi tạo danh sách không có thứ tự, hãy chọn loại đĩa, vòng tròn hoặc loại hình vuông. Hình minh hoạ cho thấy các ví dụ của từng loại danh sách này.
li {list-style-type: circle;}
list-style-image: Để sử dụng hình ảnh tùy chỉnh của riêng bạn dưới dạng viên đạn, nhập vị trí và tên tập tin của hình ảnh mong muốn như là một thuộc tính cho thẻ danh sách không có thứ tự. Bạn cũng có thể loại bỏ phần bullet trong kiểu danh sách bằng cách sử dụng giá trị thuộc tính none.
ul {list-style-image: url (images / mybullet.gif);}
Để tạo một danh sách có đồ hoạ khác nhau cho mỗi mục trong danh sách, hãy tạo các kiểu tùy chỉnh cho mỗi mục trong danh sách và sau đó thêm
. redarrow {list-style-image: url (redarrow. gif);}. Các trang web
- Vào trang web đó
- list-style-position: Với thuộc tính vị trí, bạn có thể định vị vị trí tương đương đạn (bullet relative) nội dung bên trong mỗi mục trong danh sách. Vị trí có thể được đặt bên trong hoặc bên ngoài văn bản. Như được minh họa dưới đây, khi đặt bên trong, văn bản kết thúc bên dưới bullet dọc theo lề trái, và khi đặt bên ngoài, viên đạn nằm bên ngoài bất kỳ văn bản được bọc, như một lề treo.
Với thuộc tính mở rộng, bạn có thể thay đổi cách con trỏ hiển thị trong các trường hợp khác nhau, tạo các ngắt trang và thêm các bộ lọc hiệu ứng đặc biệt để một số yếu tố trên trang.
Thật không may, kể từ khi ra đời, rất ít trong số đó được hỗ trợ bởi các trình duyệt phổ biến nhất. Nếu bạn muốn sử dụng bất kỳ thuộc tính nào trong số các thuộc tính này, thử nghiệm chúng trong nhiều trình duyệt như bạn có thể trên cả nền tảng máy Mac và máy tính để đảm bảo rằng chúng hoạt động và / hoặc không thành công theo cách chấp nhận được.
page-break-before / -after: Thuộc tính này bắt buộc một trang bị hỏng khi in một trang, trước hoặc sau khi đối tượng được tạo kiểu với thuộc tính này. Chọn các giá trị trái, phải, luôn luôn hoặc tự động cho trước và / hoặc sau đối tượng theo kiểu được mong muốn, như sau:
# sidebar3 {page-break-before: always; page-break-after: left;}
con trỏ: Bạn có thể chỉ định một con trỏ khác để xuất hiện khi một khách truy cập mouses trên một đối tượng được theo kiểu với thuộc tính này.Chọn từ crosshair, text, wait, default, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, và auto.
Ngoài ra còn có 15 tùy chọn con trỏ CSS3 mới, tất cả đều hoạt động trong phiên bản mới nhất của Firefox, Chrome, Safari, Opera và IE9 +: none, menu ngữ cảnh, cell, vertical-text, alias, copy, no- thả, không cho phép, thay đổi kích thước, thay đổi kích thước, thay đổi kích cỡ, thay đổi kích cỡ, thay đổi kích cỡ, thay đổi kích cỡ hàng, và tất cả các cuộn. Để xem ví dụ về các con trỏ chuột đang hoạt động, hãy truy cập Sitepoint.
bộ lọc: #helpmenu {cursor: help;}
: Bạn có thể chọn từ một số bộ lọc hiệu ứng đặc biệt, bao gồm Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH (lật ngang), FlipV (lật thẳng đứng), Glow, Xám, đảo ngược, ánh sáng, mặt nạ, RevealTrans, bóng, sóng và Xray. Hầu hết các bộ lọc yêu cầu đầu vào số như bộ lọc mặt nạ, phải chứa giá trị thập lục phân của màu cho mặt nạ, như trong bộ lọc: Mask (Color = # ffcc33);.
#details {filter: invert;}
Mặc dù các bộ lọc này có thể thực hiện một số điều mát mẻ và không bình thường, trong thời gian dài nhất họ không làm việc trong bất kỳ trình duyệt nào khác ngoài IE. Để xem một ví dụ về một vài trong số các bộ lọc này, hãy mở liên kết sau trong một trình duyệt IE: Xentrik. Rất may, nhiều bộ lọc này đã được cải tạo lại dưới dạng các kiểu CSS3 mới có hỗ trợ trình duyệt tốt hơn.
