VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

List trong CSS


Căn lề trong CSS
Thuộc tính padding trong CSS

Trình bày hay liệt kê một danh sách có kèm theo các bullet hoặc dưới dạng đánh số giúp phần văn bản của bạn dễ đọc và tạo cảm giác thân thiện hơn. Để tạo style riêng cho phần list, bạn có thể sử dụng các thuộc tính trong CSS.

Có 5 thuộc tính trong CSS

  • Thuộc tính list-style-type cho phép bạn kiểm soát hình dạng hay bề ngoài của Marker (giống như Bullet) chẳng hạn ở dạng hình tròn, hình vuông, hay dạng số, ...

  • Thuộc tính list-style-position xác định rằng marker nên xuất hiện bên trong hay bên ngoài luồng hiển thị nội dung.

  • Thuộc tính list-style-image: sử dụng một hình ảnh để làm marker thay cho các bullet hoặc số.

  • Thuộc tính list-style: sử dụng thuộc tính này, bạn có thể khai báo một lần mà vẫn có thể xác định được tất cả các thuộc tính trên.

  • Thuộc tính marker-offset xác định khoảng cách giữa một marker và phần text trong danh sách.

Phần tiếp theo trình bày cách sử dụng các thuộc tính trên để tạo style cho danh sách trong CSS.


Nội dung chính

  • Thuộc tính list-style-type trong CSS
  • Thuộc tính list-style-position trong CSS
  • Thuộc tính list-style-image trong CSS
  • Thuộc tính list-style trong CSS
  • Thuộc tính marker-offset trong CSS
  • Tạo màu cho List trong CSS

Thuộc tính list-style-type trong CSS

Để điều khiển hình dạng (hình tròn, hình vuông, …) của bullet trong trường hợp một danh sách không có thứ tự và style của các ký tự số (số La Mã, số tự nhiên, …) trong trường hợp danh sách đã được sắp xếp, bạn sử dụng thuộc tính list-style-type trong CSS.

Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách không có thứ tự:

Giá trị Mô tả
none Không hiển thị
disc (default) Một dấu chấm tròn
circle Một vòng tròn trống
square Một hình vuông

Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách đã qua sắp xếp:

Giá trị Mô tả Ví dụ
decimal Số tự nhiên 1,2,3,4,5
decimal-leading-zero Dạng số, bắt đầu từ 01 01, 02, 03, 04, 05
lower-alpha Dạng chữ cái thường a, b, c, d, e
upper-alpha Dạng chữ cái 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 và các giá trị của thuộc tính này trong CSS.


<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <ul style="list-style-type:circle;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ul style="list-style-type:square;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ol style="list-style-type:decimal;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
  
  <ol style="list-style-type:lower-alpha;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
  
  <ol style="list-style-type:lower-roman;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
</body>
</html>

Kết quả:



Thuộc tính list-style-position trong CSS

Để xác định xem marker nên hiển thị ở bên trong hay bên ngoài luồng hiển thị nội dung, bạn sử dụng thuộc tính list-style-position trong CSS.

Thuộc tính này có thể nhận giá trị: none, inside hoặc outside.

Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-position trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <ul style="list-style-type:circle; list-style-position:outside;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ul style="list-style-type:square;list-style-position:inside;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ol style="list-style-type:decimal;list-style-position:outside;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
  
  <ol style="list-style-type:lower-alpha;list-style-position:inside;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
</body>
   
</html>

Kết quả:


Thuộc tính list-style-image trong CSS

Nếu bạn muốn tạo điểm nhấn cho phần danh sách bạn đang tạo, bạn có thể sử dụng một hình ảnh đẹp nào đó để sử dụng thay cho các marker đơn điệu có sẵn. Để thực hiện điều này, bạn sử dụng thuộc tính list-style-image trong CSS.

Cú pháp của thuộc tính này tương tự như thuộc tính background-image, tại đâ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, nếu không tìm thấy hình ảnh, thì các bullet mặc định sẽ được sử dụng.

Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-image trong CSS


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <ul>
	 <li style="list-style-image: url(/images/css/java_icon.png);">Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ol>
	 <li style="list-style-image: url(/images/css/java_icon.png);">Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
</body>
   
</html>

Kết quả:



Thuộc tính list-style trong CSS

Sử dụng thuộc tính list-style, bạn có thể xác định tất cả style cho danh sách (toàn bộ các thuộc tính ở trên) chỉ trong một khái báo Style Rule. Thứ tự của giá trị các thuộc tính này có thể là tùy ý.

Ví dụ sau minh họa cách sử dụng thuộc tính list-style trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <ul style="list-style: inside square;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ol style="list-style: outside upper-alpha;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
</body>
   
</html> 

Kết quả:


Thuộc tính marker-offset trong CSS

Nếu bạn cảm thấy khoảng cách mặc định giữa marker và phần nội dung hiển thị là dài hơn hoặc ngắn hơn bạn mong muốn, và bạn muốn thiết lập lại, bạn nên sử dụng thuộc tính marker-offset. Giá trị của thuộc tính này ở dưới dạng độ dài (đơn vị px, pt, cm, …).

Ghi chú: IE 6 và Netscape 7 không hỗ trợ thuộc tính này.

Ví dụ sau minh họa cách sử dụng thuộc tính marker-offset trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <ul style="list-style: inside square; marker-offset:2em;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ul>
  
  <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
	 <li>Java</li>
	 <li>Python</li>
	 <li>C++</li>
  </ol>
</body>
   
</html>

Kết quả:


Tạo màu cho List trong CSS

Với các thuộc tính đã học từ các chương trước, bạn có thể sử dụng kết hợp chúng với nhau để tạo một danh sách đẹp và lộng lẫy hơn bằng cách thêm màu nền chẳng hạn.

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính background-color và thuộc tính padding trong CSS (bạn sẽ học thuộc tính padding trong chương tiếp theo).


ol {
    background: #ff9999;
    padding: 20px;
}ul {
    background: #3399ff;
    padding: 20px;
}ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}ul li {
    background: #cce5ff;
    margin: 5px;
}

Căn lề trong CSS
Thuộc tính padding trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml