HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Màu sắc RGB HEX HSL
Nền CSS
Màu nền Hình nền Bối cảnh Lặp lại Tệp đính kèm nền Tốc ký nền
Đường viền CSS
Biên giới Chiều rộng biên giới Màu viền Các mặt biên giới Tốc ký biên giới Viền tròn
Lề CSS
Lợi nhuận Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Shadow Effects Box Shadow
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Danh sách CSS

❮ Trước Kế tiếp ❯

Danh sách không có thứ tự:

  • Cà phê
  • Trà
  • than cốc
  • Cà phê
  • Trà
  • than cốc

Danh sách có Thứ tự:

  1. Cà phê
  2. Trà
  3. than cốc
  1. Cà phê
  2. Trà
  3. than cốc

Danh sách HTML và Thuộc tính Danh sách CSS

Trong HTML, có hai loại danh sách chính:

  • danh sách không có thứ tự (<ul>) - các mục danh sách được đánh dấu bằng dấu đầu dòng
  • danh sách có thứ tự (<ol>) - các mục danh sách được đánh dấu bằng số hoặc chữ cái

Thuộc tính danh sách CSS cho phép bạn:

  • Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách đã sắp xếp
  • Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách không có thứ tự
  • Đặt một hình ảnh làm điểm đánh dấu mục danh sách
  • Thêm màu nền vào danh sách và liệt kê các mục

Các điểm đánh dấu mục trong danh sách khác nhau

Thuộc list-style-typetính chỉ định loại điểm đánh dấu mục danh sách.

Ví dụ sau đây cho thấy một số điểm đánh dấu mục danh sách có sẵn:

Thí dụ

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Lưu ý: Một số giá trị dành cho danh sách không có thứ tự và một số giá trị dành cho danh sách có thứ tự.

Một hình ảnh làm điểm đánh dấu mục danh sách

Thuộc list-style-imagetính chỉ định một hình ảnh làm điểm đánh dấu mục danh sách:

Thí dụ

ul {
  list-style-image: url('sqpurple.gif');
}

Vị trí các điểm đánh dấu mục trong danh sách

Thuộc list-style-positiontính chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng).

"list-style-position: external;" nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Đầu mỗi dòng của một mục danh sách sẽ được căn chỉnh theo chiều dọc. Đây là mặc định:

  • Cà phê - Thức uống pha chế từ hạt cà phê rang ...
  • Trà
  • than cốc

"list-style-position: inside;" nghĩa là các dấu đầu dòng sẽ nằm bên trong mục danh sách. Vì nó là một phần của mục danh sách, nó sẽ là một phần của văn bản và đẩy văn bản vào đầu:

  • Cà phê - Thức uống pha chế từ hạt cà phê rang ...
  • Trà
  • than cốc

Thí dụ

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Xóa cài đặt mặc định

Thuộc list-style-type:nonetính này cũng có thể được sử dụng để loại bỏ các điểm đánh dấu / dấu đầu dòng. Lưu ý rằng danh sách cũng có lề và phần đệm mặc định. Để xóa phần này, hãy thêm margin:0và padding:0vào <ul> hoặc <ol>:

Thí dụ

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Danh sách - Thuộc tính tốc ký

Tài list-stylesản là tài sản viết tắt. Nó được sử dụng để đặt tất cả các thuộc tính danh sách trong một khai báo:

Thí dụ

ul {
  list-style: square inside url("sqpurple.gif");
}

Khi sử dụng thuộc tính viết tắt, thứ tự của các giá trị thuộc tính là:

  • list-style-type(nếu một hình ảnh kiểu danh sách được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì một lý do nào đó không thể được hiển thị)
  • list-style-position(chỉ định xem các điểm đánh dấu mục danh sách sẽ xuất hiện bên trong hay bên ngoài luồng nội dung)
  • list-style-image(chỉ định một hình ảnh làm điểm đánh dấu mục danh sách)

Nếu thiếu một trong các giá trị thuộc tính ở trên, giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn, nếu có.

Danh sách tạo kiểu với màu sắc

Chúng tôi cũng có thể tạo kiểu cho danh sách bằng màu sắc, để làm cho chúng trông thú vị hơn một chút.

Bất kỳ thứ gì được thêm vào thẻ <ol> hoặc <ul> đều ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến các mục danh sách riêng lẻ:

Thí dụ

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;
}

Kết quả:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Các ví dụ khác


Ví dụ này trình bày cách tạo danh sách có đường viền bên trái màu đỏ.


Ví dụ này trình bày cách tạo danh sách có viền mà không có dấu đầu dòng.


Ví dụ này minh họa tất cả các điểm đánh dấu mục danh sách khác nhau trong CSS.

Kiểm tra bản thân với các bài tập

Bài tập:

Đặt kiểu danh sách cho danh sách không có thứ tự thành "vuông".

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

Tất cả các thuộc tính danh sách CSS

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ Trước Kế tiếp ❯