Danh sách kiểu dáng css

Với CSS, chúng ta có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được trình bày và bố cục, hình nền hoặc màu nền sẽ được sử dụng,

Nội dung chính Show

CSS External
Màu CSS, Phông chữ, Kích thước
Đường viền CSS
Các loại danh sách (List) trong HTML
Tạo kiểu cho Danh sách (List) bằng CSS
#1. Thay đổi kiểu đánh dấu đầu dòng của danh sách
Danh sách không có thứ tự
Danh sách có thứ tự
#2. Thay đổi vị trí đánh dấu danh sách
Change the markting in in
Thay đổi điểm đánh dấu bên ngoài
#3. Sử dụng hình ảnh để đánh dấu
Sử dụng danh sách đánh dấu là ảnh
#4. Cách viết tắt thuộc tính css cho danh sách
Ví dụ tạo Menu điều hướng sử dụng danh sách

Từ Cascading có nghĩa là một kiểu được áp dụng cho phần tử cha và cũng sẽ áp dụng cho tất cả các phần tử con trong phần tử cha. Vì vậy, nếu bạn đặt màu của nội dung thành "xanh lam", tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong nội dung cũng sẽ có cùng màu (ngoại trừ khi bạn chỉ định một màu khác)

Use CSS

Có thể thêm CSS vào tài liệu HTML bằng 3 cách

Nội tuyến - Sử dụng kiểu thuộc tính bên trong các phần tử HTML
Nội bộ - Sử dụng phần tử HTML Xem kết quả CSS External File định dạng CSS bên ngoài thường được sử dụng nhiều nhất để xác định style định dạng cho nhiều trang HTML trong một trang web. Để sử dụng file CSS liên kết từ bên ngoài, chúng ta sử dụng thẻ để liên kết tới trang định dạng CSS trong cặp thẻ của mỗi trang HTML cần định dạng CSS Ví dụ Dòng tiêu đề heading 1 Dòng văn bản paragraph. View results Định dạng tệp CSS bên ngoài có thể được viết bằng bất kỳ trình soạn thảo văn bản nào. Tệp không chứa bất kỳ mã HTML nào và phải được lưu bằng phần mở rộng .css Tệp CSS trong ví dụ được lưu với tên là "styles. css", thư mục chứa tệp được đặt cùng cấp với tệp HTML, mã như sau body { background-color: powderblue; } h1 { color: green; } p { color: red; } Các trang web có lượng mã nguồn bình thường bằng cách sử dụng rứt tệp CSS liên kết từ bên ngoài, điều này giúp ích cho bạn rất nhiều trong quá trình sửa đổi, bảo trì mã Màu CSS, Phông chữ, Kích thước Chúng ta sẽ tìm hiểu thêm về một số thuộc tính CSS thường sử dụng nhiều Thuộc tính CSS color xác định màu văn bản sẽ được hiển thị Thuộc tính CSS font-family font chữ định dạng sẽ được hiển thị Thuộc tính CSS body { background-color: powderblue; } h1 { color: green; } p { color: red; } 0 xác định kích thước văn bản sẽ được hiển thị Ví dụ View results Đường viền CSS Thuộc tính CSS body { background-color: powderblue; } h1 { color: green; } p { color: red; } 1 được sử dụng để xác định một đường viền xung quanh một phần tử HTML. Và gần như tất cả các phần tử HTML đều có thể áp dụng thuộc tính CSS này 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 danh sách HTML bằng CSS. (Danh sách CSS) Nội dung chính Hiển thị Các loại danh sách (List) trong HTML Tạo kiểu cho Danh sách (List) bằng CSS #1. Thay đổi kiểu đánh dấu đầu dòng của danh sách Danh sách không có thứ tự Danh sách có thứ tự #2. Thay đổi vị trí đánh dấu danh sách Change the markting in in Thay đổi điểm đánh dấu bên ngoài #3. Sử dụng hình ảnh để đánh dấu Sử dụng danh sách đánh dấu là ảnh #4. Cách viết tắt thuộc tính css cho danh sách Ví dụ tạo Menu điều hướng sử dụng danh sách Hướng dẫn viết CSS cho List (Danh sách)Đây là một trong những công việc rất thường xuyên trong quá trình học lập trình, nên hãy học nó thật kỹ, luyện tập thật nhiều để thành thục bạn nhé. Tham khảo. Key learning 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 danh sách 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ự (Danh sách có thứ tự) Một danh sách, trong đó mỗi danh sách được đánh dấu bằng số Danh sách định nghĩa (Danh sách định nghĩa) 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 cung cấp một số biến thuộc tính phổ biến để tạo kiểu và định dạng các danh sách có thứ tự và không thứ tự Các thuộc tính danh sách CSS này thường cho phép bạn Kiểm tra định dạng giám sát hoặc sự xuất hiện của điểm đánh dấu Chỉ định hình ảnh cho dấu chấm thay vì dấu chấm đầu dòng hoặc số Thiết lập khoảng cách giữa các phần đánh dấu và phần văn bản trong danh sách Chỉ việc xem các dấu đánh dấu sẽ xuất hiện bên trong hoặc bên ngoài hộp chứa các danh sách mục Trong phần sau chúng ta sẽ thảo luận về các thuộc tính có thể được sử dụng để tạo kiểu cho danh sách HTML #1. Thay đổi kiểu đánh dấu đầu dòng của danh sách Theo mặc định, các mục trong danh sách sắp xếp được đánh giá bằng chữ Ả Rập (1, 2, 3, 5, v. v. ) -> Kiểu danh sách sắp thứ tự Trong khi trong danh sách không có thứ tự (Unordered list), các mục được đánh dấu bằng dấu tròn () Tuy nhiên, bạn có thể thay đổi các 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. kiểu danh sách Hãy thử ví dụ sau để hiểu cách thức hoạt động 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 { danh sách-kiểu-loại. Quảng trường; . thượng-la-mã; #2. Thay đổi vị trí đánh dấu danh sách Theo mặc định, các dấu đánh dấu của từng mục danh sách được đặt bên ngoài (bên ngoài) hộp hiển thị của chúng Tuy nhiên, bạn cũng có thể xác định vị trí các dấu đánh dấu hoặc dấu đầu dòng bên trong các hộp hiển thị của danh sách mục bằng cách sử dụng thuộc tính list-style-position cùng với giá trị bên trong Trong trường hợp này, các danh sách và các dấu đánh dấu sẽ nằm trong hộp hiển thị của nó HTML Change the markting in in Học CSS Học SASS Học Bootstrap Thay đổi điểm đánh dấu bên ngoài Học CSS Học SASS Học Bootstrap CSS ol. in li { list-style-position. nội bộ; . ngoai li { list-style-position. ngoài; 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 để đánh dấu Bạn cũng có thể đặt hình ảnh để đánh dấu danh sách bằng cách thông qua thuộc tính. danh sách-kiểu-hình ảnh Quy tắc CSS trong ví dụ sau sẽ chỉ định hình ảnh PNG là icon-tick. png làm đánh dấu danh sách cho tất cả các mục trong danh sách không theo thứ tự Ghi chú. Bạn có thể sử dụng bất kỳ hình ảnh nào, đặt trong thư mục cùng cấp với tệp HTM. Tại đây, mình tạo một thư mục ảnh cùng cấp với tệp HTML và lưu / đặt tên là icon-tick. png Vui lòng dùng thử và xem nó hoạt động như thế nào HTML Sử dụng danh sách đánh dấu là ảnh CSS rất dễ học CSS rất thú vị Tất cả CSS cần thiết CSS as after ul li { list-style-image. url("hình ảnh/biểu tượng-tick. png"); }Đôi khi, thuộc tính list-style-image không thể 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 tra giám sá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ó đánh dấu đầu dòng. Sau đó, xác định một hình nền không lặp lại cho thành phần trong danh sách Ví dụ sau hiển thị các điểm đánh dấu hình ảnh bằng nhau trong tất cả các trình duyệt ul { danh sách-kiểu-loại. không ai; . url("hình ảnh/biểu tượng-tick. png"); vị trí nền. 0px 5px; . không lặp lại; . 20px; You save the note, has property background-position. 0px 5px; Nhưng bạn có thể hiểu đơn giản là thuộc tính này xác định lại vị trí của điểm đánh dấu như sau Cách hộp bên trái hiển thị của nó là 0px Cách tiếp cận 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 3 thuộc tính định dạng riêng lẻ cho danh sách ở trên Ngoài cách viết riêng lẻ để tăng khả năng đọc, CSS cung cấp cho chúng ta cách viết tắt cực kỳ ngắn gọn (Người lập trình thà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. Quảng trường; . nội bộ; . url("hình ảnh/biểu tượng-tick. png"); }Chúng ta có thể viết tắt trên một cách sử dụng như thế này ul li { kiểu danh sách. hình vuông bên trong url("hình ảnh/biểu tượng-tick. png"); }Tất nhiên, ở đây có một điểm có thể hơi thừa Một khi đã sử dụng kiểu ảnh để thay thế cho kiểu đánh dấu mặc định thì chúng ta có thể bỏ cái kia đi, ví dụ ul li { kiểu danh sách. url bên trong ("hình ảnh/biểu tượng đánh dấu. png"); }Hoặc như thế này ul li { kiểu danh sách. vuông bên trong; Tuy nhiên, để cả 2 giá trị cũng không sao. CSS sẽ ưu tiên giá trị của kiểu hình ảnh (được viết sau) Ghi chú. Đây cũng là cách đề phòng trường hợp duyệt trình duyệt không tải được ảnh thì vẫn hiển thị giá trị hình vuông Lưu ý. Khi sử dụng cách viết tắt này, thứ tự của các giá trị là. kiểu danh sách. danh sách-kiểu-vị trí. danh sách-kiểu-hình ảnh. Sẽ không có vấn đề gì nếu một trong các giá trị trên bị thiếu miễn phí là các giá trị còn lại theo thứ tự đã được định sẵn Ví dụ tạo Menu điều hướng sử dụng danh sách Danh sách HTML thường được sử dụng để tạo thanh điều hướng ngang hoặc menu thường xuất hiện ở đầu trang web Nhưng vì các danh sách mục là các thành phần khối (khối), vì vậy để hiển thị chúng theo kiểu nội tuyến (nội tuyến), chúng ta cần sử dụng thuộc tính của CSS là hiển thị Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào HTML Nhà Về NIIT Key Learning hướng dẫn Thư viện Liên hệ CSS nội dung { cỡ chữ. 14px; . Arial, sans-serif; . 0; . không ai; . #f2f2f2; . chặn Nội tuyến; . chữ hoa; . khối; . 10px 25px; . #333; . không ai; . di chuột { màu. #ffff; . #003999; Bạn thử làm lại ví dụ trên và chạy nó trên trình duyệt xem. (Nhớ thay đổi, xóa các thuộc tính để xem chúng đã thay đổi, phản ứng như 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