List trong CSS || Danh sách trong CSS || ul và li trong CSS list trong css

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	5
Dung lượng	210,33 KB

Nội dung

http://vietjack.com/css/index.jsp Copyright © vietjack.com List CSS Trình bày hay liệt kê danh sách có kèm theo bullet dạng đánh số giúp phần văn bạn dễ đọc tạo cảm giác thân thiện Để tạo style riêng cho phần list, bạn sử dụng thuộc tính CSS Có thuộc tính CSS • Thuộc tính list-style-type cho phép bạn kiểm sốt hình dạng hay bề Marker (giống Bullet) chẳng hạn dạng hình tròn, hình vng, hay dạng số, • Thuộc tính list-style-position xác định marker nên xuất bên hay bên luồng hiển thị nội dung • Thuộc tính list-style-image: sử dụng hình ảnh để làm marker thay cho bullet số • Thuộc tính list-style: sử dụng thuộc tính này, bạn khai báo lần mà xác định tất thuộc tính • Thuộc tính marker-offset xác định khoảng cách marker phần text danh sách Phần trình bày cách sử dụng thuộc tính để tạo style cho danh sách CSS Thuộc tính list-style-type CSS Để điều khiển hình dạng (hình tròn, hình vng, …) bullet trường hợp danh sách chưa qua xếp style ký tự số (số La Mã, số tự nhiên, …) trường hợp danh sách xếp, bạn sử dụng thuộc tính list-style-type CSS Dưới giá trị sử dụng cho dạng danh sách chưa qua xếp: Giá trị Miêu tả none Không hiển thị http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com disc (default) Một dấu chấm tròn circle Một vòng tròn trống square Một hình vng Dưới giá trị sử dụng cho dạng danh sách qua xếp: Giá trị Miêu tả Ví dụ decimal Số tự nhiên 1,2,3,4,5 decimal-leading-zero Dạng số, 01 01, 02, 03, 04, 05 lower-alpha Dạng chữ thường a, b, c, d, e upper-alpha Dạng chữ hoa A, B, C, D, E lower-roman Dạng số La Mã thường i, ii, iii, iv, v upper-roman Dạng số La Mã hoa I, II, III, IV, V lower-greek Dạng chữ Hy Lạp thường alpha, beta, gamma Ví dụ sau minh họa cách sử dụng thuộc tính list-style-type giá trị thuộc tính CSS

Java
Android
C++

Java
Android
C++

Java
Android
C++

Java
Android
C++

Android
C++
Java

Kết là: Thuộc tính list-style-position CSS Để xác định xem marker nên hiển thị bên hay bên luồng hiển thị nội dung, bạn sử dụng thuộc tính list-style-position CSS Thuộc tính nhận giá trị: none, inside outside Ví dụ sau minh họa cách sử dụng thuộc tính list-style-position CSS:

Java
Android
C++

Java
Android
C++

Java
Android
C++

Java
Android
C++

Kết là: Thuộc tính list-style-image CSS Nếu bạn muốn tạo điểm nhấn cho phần danh sách bạn tạo, bạn sử dụng hình ảnh đẹp để sử dụng thay cho marker đơn điệu có sẵn Để thực điều này, bạn sử dụng thuộc tính list-style-image CSS Cú pháp thuộc tính tương tự thuộc tính background-image, đây, bạn cần xác định URL tới nơi bạn lưu giữ hình ảnh Lưu ý rằng, khơng tìm thấy hình ảnh, bullet mặc định sử dụng Ví dụ sau minh họa cách sử dụng thuộc tính list-style-image CSS

Java
Android
C++

Java
Android
C++

Kết là: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com Thuộc tính list-style CSS Sử dụng thuộc tính list-style, bạn xác định tất style cho danh sách (toàn thuộc tính trên) khái báo Style Rule Thứ tự giá trị thuộc tính tùy ý Ví dụ sau minh họa cách sử dụng thuộc tính list-style CSS: square;">

C++

alpha;">

Java

Java< /li>
Android< /li>
C++< /li> < /ul>
- Java< /li>
- Android< /li>
- C++< /li> ...
- Java< /li>
- Android< /li>
- C++< /li> < /ul>
  1. Java< /li>
  2. Android< /li>
  3. C++< /li>
  1. Java< /li> ... thuộc tính list- style-image CSS
    - Java< /li>
    - Android< /li>
    - C++< /li> < /ul>

Ngày đăng: 02/12/2017, 15:02