Hướng dẫn css ul li - css ul li

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- HTML Lists

Trong HTML có hai loại danh sách (List) đó là Unordered Lists (Danh sách không có thứ tự) và Ordered Lists (Danh sách có thứ tự). HTML có hai loại danh sách (List) đó là Unordered Lists (Danh sách không có thứ tự) và Ordered Lists (Danh sách có thứ tự).

• Unordered Lists - Sử dụng các "biểu tượng hình viên đạn" (bullets) để dánh dấu cho các mục (item) trong danh sách. - Sử dụng các "biểu tượng hình viên đạn" (bullets) để dánh dấu cho các mục (item) trong danh sách.
• Ordered Lists - Sử dụng các con số (Số thông thường, hoặc số La mã), hoặc các mẫu tự (Letter) để đánh dấu cho các mục trong danh sách. - Sử dụng các con số (Số thông thường, hoặc số La mã), hoặc các mẫu tự (Letter) để đánh dấu cho các mục trong danh sách.

Các thuộc tính (property) CSS List cho phép bạn thiết lập các điều sau: CSS List cho phép bạn thiết lập các điều sau:

• Cho phép chọn kiểu ::marker sẽ được nhìn thấy trên một Unordered List.::marker sẽ được nhìn thấy trên một Unordered List.
• Cho phép chọn kiểu ::marker sẽ được nhìn thấy trên một Ordered List.::marker sẽ được 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.::marker cho một Unordered List.
• Thiết lập vị trí của ::marker.::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 kiểu dáng cho các mục (item) của danh sách. CSS list-style-type được sử dụng cho thẻ

(Unordered List) để thiết lập kiểu dáng cho các mục (item) của danh sách.

CSS list-style-type có thể nhận một trong các giá trị: có thể nhận một trong các 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 có thể được áp dụng cho (Ordered List), các giá trị của nó có thể là: cũng có thể được áp dụng cho

(Ordered List), các giá trị của nó có thể là:
• none
• CSS list-style-type cũng có thể được áp dụng cho (Ordered List), các giá trị của nó có thể là:
• disc
• square
• none
• CSS list-style-type cũng có thể được áp dụng cho (Ordered List), các giá trị của nó có thể là:
• cjk-ideographic
• decimal-leading-zero
• disc
• circle
• armenian
• hiragana-iroha
• decimal
• katakana-iroha
• lower-alpha
• lower-greek
• lower-latin
• lower-roman
• upper-alpha
• upper-greek
• upper-latin
• upper-roman

list-style-type-example.html

   
      
      
      
      
   
   
      

         

            

            

               
list-style-type: none
               

                  
HTML
                  
CSS
                  
Javascript
               
            
         

      
   

georgian

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(event)  {
         var infoElement = document.getElementById("my-info");
         infoElement.innerHTML = "{ list-style-type: " + event.target.value + " }";
         var listElement = document.getElementById("my-list");
         listElement.style.listStyleType = event.target.value;
      });
      radioContainer.appendChild(radioElement);
      radioContainer.appendChild(spanElement);
      radioContainer.appendChild(brElement);
  }
}

hebrew

hiraganaCSS list-style-image được sử dụng cho thẻ

để hiển thị hình ảnh thay thế cho các ::marker.

katakanalist-style-image được ưu tiên hơn so với list-style-type. Nếu hình ảnh được cung cấp bởi list-style-image không tồn tại hoặc không thể hiển thị list-style-type sẽ được 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 các ::marker. CSS list-style-position được sử dụng cho thẻ

,
để thiết lập vị trí của các ::marker.

Các giá trị có thể của CSS list-style-position: CSS list-style-position:

• outside
• inside
• initial
• inherit

list-style-position	Mô tả
outside	inside::marker sẽ nằm ngoài các mục (item) của danh sách.
inside	initial::marker sẽ nằm trong các mục (item) của danh sách.

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
    

inherit

Mô tảHTML List, và bạn có thể sử dụng CSS để thay đổi margin/padding của nó.

Các ::marker sẽ nằm ngoài các mục (item) của danh sách. 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