NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 4 tháng 12, 2016

Tự học HTML - Bài 13 - Xử lý danh sách

Trong bài này chúng ta sẽ học các mục sau:
  • Dùng thẻ <ul> để định danh sách không có thứ tự.
  • Dùng thuộc tính CSS list-style-type để xác định kiểu gạch đầu dòng.
  • Dùng thẻ <ol> để định danh sách có thứ tự.
  • Dùng thuộc tính type để định kiểu số thứ tự.
  • Dùng thuộc tính <li> để định phần tử của danh sách.
  • Dùng thẻ <dl> để định danh sách mô tả.
  • Dùng thẻ <dt> để định tên các mục.
  • Dùng thẻ <dd> để định phần mô tả.
  • Danh sách có thể chứa 1 hay nhiều danh sách con.
  • Các mục trong danh sách có thể chứa các thẻ HTML khác.
  • Dùng thuộc tính CSS float: left hoặc display:inline để định 1 danh sách nằm ngang( ví dụ như kiểu danh sách menu của trang web).

Ví dụ về danh sách:
Danh sách có thứ tự:
1.Tèo
2.Tí
3.Tủn

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


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

01 danh sách không có thứ tự bắt đầu bằng thẻ <ul>. Mỗi thành phần trong danh sách bắt đầu với thẻ <li>.
Các mục trong danh sách sẽ bị đánh dấu mặc định bằng các bullets (những chấm đen) :

Ví dụ:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Danh sách không thứ tự – Thay đổi các bullets

Dùng thuộc tính CSS list-style-type để định kiểu của các mục trong danh sách:
Giá trị
Mô tả
disc
Kiểu bullet (default)
circle
Kiểu circle
square
Kiểu square
none
Không đánh dấu

Ví dụ: - Disc

<ul style="list-style-type:disc">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ul>Try it Yourself »

Ví dụ: - Circle

<ul style="list-style-type:circle">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ul>Try it Yourself »

Ví dụ: - Square

<ul style="list-style-type:square">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ul>Try it Yourself »

Ví dụ: - None

<ul style="list-style-type:none">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ul>

Dánh sách có thứ tự

Dùng thẻ <ol>. Mỗi mục con dùng thẻ <li>.
Các mục con trong danh sách theo mặc định được đánh số thứ tự:

Ví dụ:

<ol>
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ol>

Danh sách có thứ tự – Thuộc tính Type

Thuộc tính type của thẻ <ol> xác định loại số thứ tự ở đánh dấu cho mỗi mục con:
Loại
Mô tả
type="1"
Kiểu số (mặc định)
type="A"
Kiểu chữ HOA
type="a"
Kiểu chữ thường
type="I"
Kiểu số La Mã viết HOA (I, II, III,...)
type="i"
Kiểu số La Mã viết thường.

Kiểu số:

<ol type="1">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ol>Try it Yourself »

Kiểu chữ HOA:

<ol type="A">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ol>Try it Yourself »

Kiểu chữ thường:

<ol type="a">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ol>Try it Yourself »

Kiểu số La Mã viết HOA:

<ol type="I">
  
<li>Coffee</li>
  
<li>Tea</li>
  
<li>Milk</li>
</ol>Try it Yourself »

Kiểu số La Mã viết thường:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Danh sách mô tả - Description Lists

01 danh sách mô tả là 1 danh sách các điều khoản và phần mô tả theo từng mục.
Dùng thẻ <dl> để xác định danh sách mô tả, thẻ <dt> dùng để xác định tên các điều khoản, và thẻ <dd> để mô tả mỗi điều khoản:

Ví dụ:

<dl>
  
<dt>Coffee</dt>
  
<dd>- black hot drink</dd>
  
<dt>Milk</dt>
  
<dd>- white cold drink</dd>
</dl>

Danh sách con trong danh sách


Ví dụ:

<ul>
  
<li>Coffee</li>
  
<li>Tea
    
<ul>
      
<li>Black tea</li>
      
<li>Green tea</li>
    
</ul>
  
</li>
  
<li>Milk</li>
</ul>

Danh sách theo hàng ngang

Danh sách có thể được định dạng theo nhiều cách với CSS.
01 trong những cách thông dụng là danh sách theo hàng ngang như kiểu Menu.

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<style>
ul 
{
    list-style-type
: none;
    margin
: 0;
    padding
: 0;
    overflow
: hidden;
    background-color
: #333333;
}

li 
{
    float
: left;
}

li a 
{
    display
: block;
    color
: white;
    text-align
: center;
    padding
: 16px;
    text-decoration
: none;
}

li a:hover 
{
    background-color
: #111111;
}
</style>
</head>
<body>
<ul>
  
<li><a href="#home">Home</a></li>
  
<li><a href="#news">News</a></li>
  
<li><a href="#contact">Contact</a></li>
  
<li><a href="#about">About</a></li>
</ul>
</body>
</html>