Tạo kiểu, Viết CSS cho List – Trở thành Lập trình viên PHP

Trong bài viết hướng dẫn tự học CSS này, bạn sẽ khám phá cách tạo kiểu, định dạng những list HTML bằng CSS. ( CSS List )

Trong bài viết hướng dẫn tự học CSS này, bạn sẽ tìm hiểu cách tạo kiểu, định dạng các danh sách HTML bằng CSS. (CSS List)

Hướng dẫn viết CSS cho List (Danh sách)
Đây là một trong những việc làm rất tiếp tục trong quy trình học lập trình, nên hãy học nó thật kỹ, rèn luyện thật nhiều để thành thục bạn nhé .

Tham Khảo: Khóa học Lập trình Full stack (Dành cho người mới bắt đầu)

Các loại danh sách (List) trong HTML

Có ba loại list khác nhau trong HTML :

• Danh sách không theo thứ tự (Unordered List) – Một danh sách, trong đó mọi mục trong danh sách được đánh dấu bằng dấu chấm đầu dòng.
• Danh sách theo thứ tự (Ordered List) – Một danh sách, trong đó mỗi mục danh sách được đánh dấu bằng số.
• Danh sách định nghĩa (Definition List) – Một danh sách các mục, với một mô tả của từng mục.

Tạo kiểu cho Danh sách (List) bằng CSS

CSS phân phối 1 số ít thuộc tính thông dụng để tạo kiểu và định dạng những list có thứ tự và không thứ tự .
Các thuộc tính list CSS này thường được cho phép bạn :

• Kiểm soát hình dạng hoặc sự xuất hiện của điểm đánh dấu.
• Chỉ định hình ảnh cho điểm đánh dấu thay vì dấu chấm đầu dòng hoặc số.
• Thiết lập khoảng cách giữa phần đánh dấu và phần văn bản trong danh sách.
• Chỉ định xem điểm đánh dấu sẽ xuất hiện bên trong hoặc bên ngoài hộp chứa các mục danh sách.

Trong phần sau tất cả chúng ta sẽ tranh luận về những thuộc tính hoàn toàn có thể được sử dụng để tạo kiểu cho list HTML.

#1. Thay đổi kiểu đánh dấu đầu dòng của list

Theo mặc định, những mục trong list được sắp xếp được đánh số bằng chữ số Ả Rập ( 1, 2, 3, 5, v.v. ) -> Kiểu ordered list
Trong khi trong list không có thứ tự ( Kiểu Unordered list ), những mục được ghi lại bằng chấm tròn ( • ) .

Tuy nhiên, bạn có thể thay đổi loại điểm đánh dấu danh sách mặc định này thành bất kỳ loại nào khác, chẳng hạn như chữ số La Mã, chữ cái la tinh, hình tròn, hình vuông, v.v. bằng cách sử dụng thuộc tính: list-style-type

Hãy thử ví dụ sau để hiểu phương pháp hoạt động giải trí của thuộc tính này :
HTML :

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

    
Học CSS
    
Học SASS
    
Học Bootstrap

Danh sách có thứ tự

    
Học CSS
    
Học SASS
    
Học Bootstrap

CSS :

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

#2. Thay đổi vị trí của điểm đánh dấu danh sách

Theo mặc định, những điểm ghi lại của từng mục list được đặt bên ngoài ( outside ) hộp hiển thị của chúng .

Tuy nhiên, bạn cũng có thể định vị các điểm đánh dấu hoặc dấu đầu dòng bên trong các hộp hiển thị của mục danh sách bằng cách sử dụng thuộc tính list-style-position cùng với giá trị inside.

Trong trường hợp này, những list và lưu lại sẽ cùng nằm trong hộp hiển thị của nó :
HTML :

Thay đổi điểm đánh dấu vào trong

    
Học CSS
    
Học SASS
    
Học Bootstrap

Thay đổi điểm đánh dấu ra ngoài

    
Học CSS
    
Học SASS
    
Học Bootstrap

CSS :

ol.trong li {
    list-style-position: inside;
}
ol.ngoai li {
    list-style-position: outside;
}

Bạn thử chạy ví dụ này trên trình duyệt xem. Kết quả như thế nào ?

#3. Sử dụng hình ảnh để làm điểm đánh dấu

Bạn cũng có thể đặt hình ảnh để làm điểm đánh dấu danh sách bằng cách thông qua thuộc tính: list-style-image

Quy tắc CSS trong ví dụ sau sẽ chỉ định hình ảnh PNG là ‘ icon-tick.png ’ làm điểm lưu lại list cho tổng thể những mục trong list không theo thứ tự .
Note : Bạn hoàn toàn có thể sử dụng hình ảnh bất kể, đặt trong thư mục cùng cấp với file HTM. Ở đây, mình tạo một thư mục images cùng cấp với file HTML và lưu / đặt tên là icon-tick.png
Hãy dùng thử và xem nó hoạt động giải trí như thế nào :
HTML :

Danh sách sử dụng điểm đánh dấu là ảnh

    
CSS rất dễ học
    
CSS rất thú vị
    
CSS tất cần thiết

CSS như sau :

ul li {
    list-style-image: url("images/icon-tick.png");
}

Đôi khi, thuộc tính list-style-image có thể không tạo ra két quả như dự kiến. Ngoài ra, bạn có thể sử dụng giải pháp sau đây để kiểm soát tốt hơn việc định vị các điểm đánh dấu hình ảnh.

Để giải quyết vấn đề, bạn cũng có thể đặt hình ảnh đánh dấu thông qua thuộc tính CSS background-image.

Đầu tiên, thiết lập list-style-type không có dấu lưu lại đầu dòng. Sau đó, xác lập một hình nền no-repeat cho thành phần trong list .
Ví dụ sau hiển thị những điểm ghi lại hình ảnh bằng nhau trong toàn bộ những trình duyệt :

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/icon-tick.png");
    background-position: 0px 5px;
    background-repeat: no-repeat;
    padding-left: 20px;
}

Bạn quan tâm, có thuộc tính background-position : 0 px 5 px ; hoàn toàn có thể bạn chưa học .
Nhưng bạn hoàn toàn có thể hiểu đơn thuần là thuộc tính này xác lập lại ví trí của điểm ghi lại như sau :

• Cách cạnh trái hộp hiển thị của nó là 0px
• Cách cạnh trên hộp hiển thị của nó là 5px

#4. Cách viết tắt thuộc tính css cho danh sách

Như bạn đã biết cách viết riêng không liên quan gì đến nhau 3 thuộc tính định dạng cho list ở trên .
Ngoài cách viết riêng không liên quan gì đến nhau để tăng năng lực đọc, CSS cung ứng cho tất cả chúng ta cách viết tắt cực kỳ ngắn gọn ( Các lập trình viên web chuyên nghiệp rất thích điều này )
Ví dụ, thay vì phải viết dài dòng như thế này :

ul li {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: url("images/icon-tick.png");
}

Chúng ta hoàn toàn có thể viết tắt trên một dùng như thế này :

ul li {
    list-style: square inside url("images/icon-tick.png");
}

Dĩ nhiên, ở đây có một điểm hoàn toàn có thể hơi thừa thãi .
Một khi đã sử dụng kiểu hình ảnh để sửa chữa thay thế cho kiểu lưu lại mặc định thì tất cả chúng ta hoàn toàn có thể bỏ cái kia đi, ví dụ :

ul li {
    list-style: inside url("images/icon-tick.png");
}

Hoặc như thế này :

ul li {
    list-style: square inside;
}

Tuy nhiên, để cả 2 giá trị cũng không sao. CSS sẽ ưu tiên giá trị kiểu hình ảnh ( được ghi sau ) .
Note : Đây cũng là cách đề phòng trường hợp trình duyệt không load được ảnh thì vẫn sẽ hiển thị giá trị square .
Lưu ý : Khi sử dụng cách viết tắt này, thứ tự của những giá trị là : list-style-type | list-style-position | list-style-image. Sẽ không có yếu tố gì nếu một trong những giá trị trên bị thiếu miễn là những giá trị còn lại theo thứ tự được chỉ định .

Ví dụ tạo Menu điều hướng sử dụng list

Danh sách HTML thường được sử dụng để tạo thanh điều hướng ngang hoặc menu thường Open ở đầu website .

Nhưng vì các mục danh sách là các thành phần block (khối), vì vậy để hiển thị chúng theo kiểu inline (nội tuyến), chúng ta cần sử dụng thuộc của CSS là display.

Hãy thử một ví dụ để xem nó thực sự hoạt động giải trí như thế nào :
HTML :

CSS :

body{
    font-size: 14px;
    font-family: Arial,sans-serif;
}
ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
    text-transform: uppercase;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #003999;
}

Bạn thử làm lại ví dụ trên và chạy nó trên trình duyệt xem. ( Nhớ biến hóa, xóa những thuộc tính để xem chúng đổi khác, phản ứng như thế nào bạn nhé )

Như vậy, qua bài viết này, mình đã giúp bạn học cách định dạng, viết css cho các danh sách, cũng như cách đơn giản để tạo ra một menu với các thẻ ul, li.

Chúc bạn học lập trình web tốt .

Học tiếp: CSS Bảng

Đọc thêm: CSS Link

Source: https://final-blade.com
Category: Kiến thức Internet