Mục lục bài viết
Mẹo về List-style-type vs list-style-image Mới Nhất
Cập Nhật: 2021-12-13 05:15:04,Bạn Cần biết về List-style-type vs list-style-image. Quý quý khách trọn vẹn có thể lại Thảo luận ở cuối bài để Admin được tương hỗ.
1- HTML Lists
Tóm lược đại ý quan trọng trong bài
- 1- HTML Lists
- 2- CSS list-style-type
- 3- CSS list-style-image
- 4- CSS list-style-position
- 5- CSS margin, padding
- HTML Lists
Trong HTML có hai loại list (List) đó là Unordered Lists (Danh sách không tồn tại thứ tự) và Ordered Lists (Danh sách có thứ tự).
- Unordered Lists – Sử dụng những “hình tượng hình viên đạn” (bullets) để dánh dấu cho những mục (item) trong list.
- Ordered Lists – Sử dụng những số lượng (Số thường thì, hoặc số La mã), hoặc bộ sưu tập tự (Letter) để ghi lại cho những mục trong list.
Các thuộc tính (property) CSS List được cho phép bạn thiết lập những điều sau:
- Cho phép chọn kiểu ::marker sẽ tiến hành nhìn thấy trên một Unordered List.
- Cho phép chọn kiểu ::marker sẽ tiến hành nhìn thấy trên một Ordered List.
- Sử dụng một ảnh (Image) như một ::marker cho một Unordered List.
- Thiết lập vị trí của ::marker.
2- CSS list-style-type
Thuộc tính (property) CSS list-style-type được sử dụng cho thẻ (Unordered List)
để thiết lập mẫu mã cho những mục (item) của list.
CSS list-style-type trọn vẹn có thể nhận một trong những giá trị:
- disc
- circle
- square
- none
ul-list-style-type-example.html
list-style-type: dist (Default)
- HTML
- CSS
- Javascript
list-style-type: circle
- HTML
- CSS
- Javascript
list-style-type: square
- HTML
- CSS
- Javascript
list-style-type: none
- HTML
- CSS
- Javascript
CSS list-style-type cũng trọn vẹn có thể được vận dụng cho (Ordered List)
, những giá trị của nó trọn vẹn có thể là:
- none
- disc
- circle
- square
- armenian
- decimal
- cjk-ideographic
- decimal-leading-zero
- georgian
- hebrew
- hiragana
- hiragana-iroha
- katakana
- katakana-iroha
- lower-alpha
- lower-greek
- lower-latin
- lower-roman
- upper-alpha
- upper-greek
- upper-latin
- upper-roman
list-style-type-example.html
table
border-collapse: collapse;
border: 1px solid black;
width:100%;
td
border: 1px solid black;
padding: 5px;
vertical-align: top;
white-space: nowrap;
list-style-type: none
| |
list-style-type-example.js
var types= [
“none”,
“disc”,
“circle”,
“square”,
“armenian”,
“decimal”,
“cjk-ideographic”,
“decimal-leading-zero”,
“georgian”,
“hebrew”,
“hiragana”,
“hiragana-iroha”,
“katakana”,
“katakana-iroha “,
“lower-alpha”,
“lower-greek”,
“lower-latin”,
“lower-roman”,
“upper-alpha”,
“upper-greek”,
“upper-latin”,
“upper-roman”];
function initRadios()
var radioContainer = document.getElementById(“radio-container”);
for(var i = 0; i< types.length; i++)
var radioElement = document.createElement("input");
radioElement.type = "radio";
radioElement.name = "type";
radioElement.value = types[i];
var spanElement = document.createElement("span");
spanElement.innerHTML = types[i];
spanElement.style.marginRight = "5px";
var brElement = document.createElement("br");
radioElement.addEventListener("click", function(sự kiện)
var infoElement = document.getElementById("my-info");
infoElement.innerHTML = " list-style-type: " + sự kiện.target.value + " ";
var listElement = document.getElementById("my-list");
listElement.style.listStyleType = sự kiện.target.value;
);
radioContainer.appendChild(radioElement);
radioContainer.appendChild(spanElement);
radioContainer.appendChild(brElement);
3- CSS list-style-image
Thuộc tính (property) CSS list-style-image được sử dụng cho thẻ để hiển thị hình ảnh thay thế cho những ::marker.
Chú ý: list-style-image được ưu tiên hơn so với list-style-type. Nếu hình ảnh được phục vụ nhu yếu bởi list-style-image không tồn tại hoặc không thể hiển thị list-style-type sẽ tiến hành sử dụng.
- HTML
- CSS
- Javascript
4- CSS list-style-position
Thuộc tính (property) CSS list-style-position được sử dụng cho thẻ ,
để thiết lập vị trí của những ::marker.
Các giá trị trọn vẹn có thể của CSS list-style-position:
- outside
- inside
- initial
- inherit
list-style-position
Mô tả
outside
Các ::marker sẽ nằm ngoài những mục (item) của list.
inside
Các ::marker sẽ nằm trong những mục (item) của list.
list-style-position-example.html
list-style-position: outside (Default)
- Coffee – A brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant - Tea – An aromatic beverage commonly prepared by pouring hot
or boiling water over cured leaves of the Camellia sinensis,
an evergreen shrub (bush) native to Asia
list-style-position: inside
- Coffee – A brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant - Tea – An aromatic beverage commonly prepared by pouring hot
or boiling water over cured leaves of the Camellia sinensis,
an evergreen shrub (bush) native to Asia
5- CSS margin, padding
Hình ảnh tại đây đã cho toàn bộ chúng ta biết cấu trúc của HTML List, và bạn cũng trọn vẹn có thể sử dụng CSS để thay đổi margin/padding của nó.
Ví dụ tùy biến margin/padding của HTML List:
margin-padding-example.css
ul
background: #3399ff;
padding: 20px;
ul li
background: #cce5ff;
margin: 5px;
ol
background: #ff9999;
padding: 20px;
ol li
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
margin-padding-example.html
ul padding: 20px; ul li margin: 5px
- HTML
- CSS
- Javascript
ol padding: 20px; ol li margin-left: 35px; padding: 5px;
- HTML
- CSS
- Javascript
Video full hướng dẫn Chia Sẻ Link Cập nhật List-style-type vs list-style-image ?
– Một số từ khóa tìm kiếm nhiều : ” Review List-style-type vs list-style-image tiên tiến và phát triển nhất , Chia Sẻ Link Tải List-style-type vs list-style-image “.
Hỏi đáp vướng mắc về List-style-type vs list-style-image
Bạn trọn vẹn có thể để lại phản hồi nếu gặp yếu tố chưa hiểu nha.
#Liststyletype #liststyleimage
Bình luận gần đây