Trở thành Lập trình viên PHP

Trong bài hướng tự học CSS dẫn này, bạn sẽ học cách điều chỉnh phần không gian xung quanh một phần tử (Margin) bằng cách sử dụng CSS.

Nói đơn giản là cách xử lý margin trong CSS.

Thuộc tính margin trong CSS là gì?

Thuộc tính marign trong CSS cho phép bạn thiết lập khoảng cách xung quanh đường viền của hộp phần tử (hoặc cạnh của hộp phần tử, nếu nó không có đường viền).

Nếu bạn đã quên thì mời xem lại bài viết về CSS Box Model, hoặc xem lại hình minh họa ở dưới đây:

Lề (Margin) của một phần tử không bị ảnh hưởng bởi màu nền của nó, nó luôn trong suốt.

Tuy nhiên, nếu phần tử mẹ có màu nền, nó sẽ hiển thị qua vùng lề của nó.

1. Thiết lập margin trong CSS

Bạn có thể chỉ định margin cho các cạnh riêng lẻ của một phần tử như trên, phải, dưới và bên trái bằng cách sử dụng các thuộc tính CSS tương ứng:

• margin-top
• margin-right
• margin-bottom
• margin-left

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

HTML:

<h1>Đây là một ví dụ về Margin</h1>
<p>Margin là phần lề của phần tử. Nó giúp chúng giữ khoảng cách với các phần tử khác</p>

Còn đây là CSS:

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
    background: #00ccc5;
}
p {
    margin-left: 75px;
    margin-right: 75px;
    background: #00ccc5;
}

Kết quả khi chạy chương trình, ta được như thế này:

Các thuộc tính margin có thể được chỉ định bằng cách sử dụng các giá trị sau:

• Các loại kích thước: px, em, rem, pt, cm, v.v. (Đọc lại bài viết CSS Font để hiểu rõ hơn về một số loại kích thước trong CSS)
• %: Chỉ định lề tính bằng phần trăm (%) chiều rộng của phần tử chứa nó.
• auto: Trình duyệt tính toán mức lợi nhuận phù hợp để sử dụng.
• inherit: Chỉ định rằng lề phải được kế thừa từ phần tử mẹ.
• Ngoài ra, bạn cũng có thể chỉ định lề âm trên một phần tử, ví dụ: margin: -10px;, margin: -5%;, …

2. Cách viết tắt thuộc tính Margin trong CSS

Thuộc tính margin là một thuộc tính giúp bạn viết tắt các thuộc tính riêng lẻ của lề phần tử:

Nó cũng được sử dụng để thu gọn code hơn.

Thay vì phải viết như thế này:

h1 {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

Thì bạn có thể viết thế này:

h1 {
    margin: 10px 15px 20px 25px;
}

Ngắn gọn hơn rất nhiều đúng không?

Hãy xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:

HTML:

<h1>Margin 4 cạnh đều nhau</h1>
<p>Margin Trái Phải bằng nhau và Trên, Dưới bằng nhau</p>
<div>Margin Trái Phải bằng nhau</div>
<hr />
<p>Ví dụ về viết tắt thuộc tính margin trong CSS</p>

CSS:

h1 {
  margin: 50px; /* Áp dụng cho cả 4 cạnh */
}
p {
  margin: 25px 75px; /* TOP và BOTTOM | LEFT và RIGHT */
}
div {
  margin: 25px 50px 75px; /* TOP | LEFT và RIGHT | BOTTOM */
}
hr {
  margin: 25px 50px 75px 100px; /* TOP | RIGHT | BOTTOM | LEFT */
}
h1, p, div {
  background: #00ccc5;
}

Kết quả ta được như thế này:

Ký hiệu viết tắt này có thể nhận 1, 2, 3 hoặc 4 giá trị được phân tách bằng khoảng trắng.

• Nếu 1 giá trị được chỉ định, nó sẽ được áp dụng cho cả bốn mặt.
• Nếu 2 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng và dưới cùng, và giá trị thứ 2 được áp dụng cho phía bên phải và bên trái của hộp phần tử.
• Nếu 3 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng, giá trị thứ 2 được áp dụng cho phía bên phải và bên trái, và giá trị 3 được áp dụng cho phía dưới.
• Nếu 4 giá trị được chỉ định, chúng sẽ được áp dụng tương ứng cho phía trên, bên phải, dưới cùng và bên trái của hộp phần tử theo thứ tự đã chỉ định.

Bạn nên viết tắt thuộc tính margin, vì nó sẽ giúp bạn tiết kiệm thời gian, tránh nhiều code và làm cho code CSS của bạn dễ theo dõi và duy trì hơn.

Lưu ý: Lề của các phần tử sẽ nằm chồng lên nhau. Do đó, khoảng cách thực tế giữa 2 phần tử có thiết lập margin là bằng margin lớn hơn.

Cách căn giữa phần tử theo chiều ngang với marign auto

Giá trị auto cho thuộc tính margin nói cho trình duyệt web biết hãy tự động tính toán khoảng cách của lề.

Kết quả là trình duyệt sẽ căn phần tử ở giữa, theo chiều ngang.

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

Mình có một thẻ div như sau:

<div class="container">
    <h1>Div được căn giữa</h1>
    <p>Bằng thuộc tính margin: 0 auto;.</p>
</div>

Đây là CSS của nó:

.container {
    width: 300px;
    height: 200px;
    background: #00ccc5;
    margin: 0 auto;
}

Và đây là kết quả nhận được:

Như vậy, qua bài viết này, mình đã giúp bạn tìm hiểu về thuộc tính Margin trong CSS.

Hãy thử làm lại các ví dụ, thay đổi các giá trị để chơi với Margin bạn nhé.

Đến bài này, coi như bạn đã tự học xong về CSS cơ bản rồi đấy.

Cũng đơn giản thôi phải không nào.

Đọc thêm: Border trong CSS

Trong bài hướng dẫn tự học CSS này, bạn sẽ học cách sử dụng CSS để tạo các đường viền (border) xung quanh của một phần tử.

Thuộc tính border là gì?

Thuộc tính border trong CSS cho phép bạn tạo ra đường viền của hộp phần tử.

Các đường viền xuất hiện trực tiếp giữa phần lề (maring) và phần đệm (padding) của một phần tử.

Đường viền (border) có thể là kiểu được xác định trước như:

• Đường viền nét liền
• Đường viết nét đứt
• Đường viền 2 nét
• Hoặc cả hình ảnh
• …

Phần dưới đây bạn sẽ học được cách thiết lập đường viền một cách chi tiết nhất.

Nhưng trước tiên, bạn dần biết

Có các kiểu border nào trong CSS?

Thuộc tính border-style trong CSScho phép thiết lập kiểu đường viền của hộp chẳng hạn như:

• solid
• dotted
• …

Nó là thuộc tính viết tắt để thiết lập kiểu đường cho tất cả bốn cạnh của đường viền.

Ngoài ra, thuộc tính border-style còn có thể có các giá trị sau:

• none
• hidden
• solid
• dashed
• dotted
• double
• inset
• outset
• grove
• ridge

Bây giờ, hãy xem hình minh họa bên dưới đây, nó sẽ cho bạn thấy các kiểu viền khác nhau hiển thị như thế nào:

Các giá trị none và hidden không có đường viền.

Tuy nhiên, có một chút khác biệt giữa hai giá trị này.

Trong trường hợp ô của bảng và đường viền được thu gọn, giá trị none có mức độ ưu tiên thấp nhất, trong khi giá trị hidden có mức độ ưu tiên cao nhất, nếu có bất kỳ đường viền xung đột nào khác được thiết lập.

Các giá trị inset, outset, groove và ridge tạo ra hiệu ứng giống như 3D về cơ bản phụ thuộc vào giá trị border-color.

Điều này thường đạt được bằng cách tạo ra một ‘bóng’ từ hai màu sáng và tối hơn một chút so với màu của đường viền.

Hãy xem ví dụ sau:

HTML:

<p class="none">No border.</p>
<p class="hidden">Hidden border.</p>
<p class="dotted">dotted border.</p>
<p class="dashed">dashed border.</p>
<p class="solid">solid border.</p>
<p class="double">double border.</p>
<p class="inset">inset border.</p>
<p class="outset">outset border.</p>
<p class="groove">groove border.</p>
<p class="ridge">ridge border.</p>

CSS:

p { 
    border-width: 5px;
    border-color: #f2f2f2;
    color: #003999;
    padding: 20px;
    margin: 20px;
    width: 100px;
    float: left;
}
p.none {
    border-style: none;
}
p.hidden {
    border-style: hidden;
}
p.dotted {
    border-style: dotted;
}
p.dashed {
    border-style: dashed;
}
p.solid {
    border-style: solid;
}
p.double {
    border-style: double;
}
p.groove {
    border-style: groove;
}
p.ridge {
    border-style: ridge;
}
p.inset {
    border-style: inset;
}
p.outset {
    border-style: outset;
}

Lưu ý: Bạn phải chỉ định một kiểu đường viền để làm cho đường viền xuất hiện xung quanh một phần tử, vì kiểu đường viền mặc định là không có. Trong khi, chiều rộng hoặc độ dày của đường viền mặc định là medium và màu đường viền mặc định giống với màu văn bản.

Thiết lập chiều rộng của đường viền (border-width)

Thuộc tính border-width chỉ định chiều rộng của đường viền.

Nó là một thuộc tính viết tắt để thiết lập độ dày của tất cả bốn cạnh của đường viền phần tử cùng một lúc.

• Nó có thể chấp nhận 4 giá trị tương ứng với TOP | RIGHT | BOTTOM | LEFT
• 3 giá trị tương ứng với TOP | RIGHT và LEFT | BOTTOM
• 2 giá trị tương ứng với TOP và BOTTOM | RIGHT và LEFT

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

HTML:

<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>

CSS:

p { 
    border-style: solid;
    border-color: #003999;
    padding: 20px;
    margin: 20px;
    width: 200px;
    float: left;
}
p.one {
    border-width: 5px;
}
p.two {
    border-width: 5px 10px;
}
p.three {
    border-width: 5px 10px 15px;
}
p.four {
    border-width: medium 10px thick 15px;
}

Kết quả ta được như sau:

Mẹo: Chiều rộng đường viền có thể được chỉ định bằng cách sử dụng bất kỳ giá trị chiều dài nào, chẳng hạn như px, em, rem, v.v. Ngoài các đơn vị chiều dài, chiều rộng đường viền cũng có thể được chỉ định bằng cách sử dụng một trong ba từ khóa: thin, medium và thick. Nhưng giá trị % thì không được.

Cách thiết lập màu sắc của đường viền (border-color)

Thuộc tính border-color chỉ định màu của đường viền. Đây cũng là một thuộc tính viết tắt để thiết lập màu của tất cả bốn cạnh của đường viền phần tử.

Các quy tắc CSS sau đây thêm một đường viền đặc màu đỏ xung quanh các đoạn văn.

HTML:

<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>

CSS:

p { 
border-width: 10px;
width: 100px;
float: left;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

Kết quả ta được như sau:

Lưu ý: Thuộc tính border-width hoặc border-color trong CSS không hoạt động nếu nó được sử dụng một mình. Sử dụng thuộc tính border-style để thiết lập kiểu đường viền trước tiên.

Cách viết tắt thuộc tính border trong CSS

Thuộc tính border trong CSS là thuộc tính cho phép viết tắt để thiết lập một hoặc nhiều thuộc tính đường viền riêng lẻ là border-width, border-style và border-color trong một dòng code duy nhất.

Hãy xem ví dụ sau để hiểu cách nó hoạt động:

HTML:

<p>Cách viết tắt thuộc tính border</p>

CSS:

p { 
    border: 5px solid #003999;
    background: #fff;
    padding: 20px;
    margin: 20px;
}

Nếu giá trị cho một thuộc tính đường viền riêng lẻ bị bỏ qua hoặc không được chỉ định trong khi viết tắt, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.

Ví dụ: Nếu giá trị cho thuộc tính border-color bị thiếu hoặc không được chỉ định khi thiết lập đường viền, thì thuộc tính color của phần tử sẽ được sử dụng làm giá trị cho màu đường viền.

Trong ví dụ bên dưới, đường viền sẽ là một đường nét liền nét màu đỏ có chiều rộng 5 pixel:

HTML:

<p>Cách viết tắt thuộc tính border</p>

CSS:

p { 
    color: red;
    border: 5px solid;
    background: #fff;
    padding: 20px;
    margin: 20px;
}

Tuy nhiên, trong trường hợp của border-style, việc bỏ qua giá trị sẽ khiến không có đường viền nào hiển thị vì giá trị mặc định cho thuộc tính này là none.

Như trong ví dụ sau sẽ không có đường viền:

HTML:

<p>Không có đường viền vì border-style mặc định là none</p>

CSS:

p { 
border: 5px #003999;
background: yellow;
padding: 20px;
margin: 20px;
}

Như vậy, qua bài viết này, mình đã giúp bạn biết được các thuộc tính trong CSS sử dụng để thiết lập kiểu cho đường viền (border) của phần tử.

Chúc bạn học tốt!

Học tiếp: (Updating…)

Đọc thêm: Padding trong CSS

Trong hướng dẫn tự học CSS này, bạn sẽ học cách điều chỉnh vùng đệm (padding) của một phần tử bằng CSS.

Padding là gì?

Thuộc tính padding trong CSS cho phép bạn thiết lập khoảng cách giữa nội dung của một phần tử và đường viền (border) của nó (hoặc cạnh của hộp phần tử, nếu nó không có border).

Phần đệm (padding) bị ảnh hưởng bởi màu nền (background-color) của phần tử.

Ví dụ: Nếu bạn đặt background cho 1 phần tử thì background này sẽ hiển thị lên cả phần padding.

Cách thiết lập padding

Bạn có thể chỉ định riêng lẻ các phần đệm cho các mặt của một phần tử như:

• top là padding-top
• right là padding-right
• bottom là padding-bottom
• left là padding-left

Hãy thử một ví dụ để hiểu cách nó hoạt động:

HTML:

<h1>Thử thiết lập Padding trong CSS</h1>
<p>Đây là một đoạn văn bản đơn giản</p>

CSS:

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
    background: #00ccc5;
}
p {
    padding-left: 75px;
    padding-right: 75px;
    background: #00ccc5;
}

Các thuộc tính padding có thể được chỉ định bằng cách sử dụng các giá trị sau:

• Các loại kích thước: px, em, rem, pt, cm, v.v.
• %: Chỉ định một khoảng đệm theo phần trăm (%) chiều rộng của phần tử chứa.
• inherit: Chỉ định rằng phần đệm phải được kế thừa từ phần tử mẹ.

Lưu ý: Các giá trị padding thì không được âm

Cách viết tắt để thiết lập padding

Thuộc tính padding là một thuộc tính có thể viết tắt.

Thứ tự của các giá trị sẽ là:

padding: padding-top padding-right padding-bottom padding-left;

Hãy xem ví dụ sau để hiểu cơ bản cách viết tắt padding hoạt động như thế nào:

HTML:

<h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn mô tả.</p>
<div>Đây thì là một thẻ DIV</div>
<pre>Đây là đoạn văn bản được định dạng sẵn</pre>

Còn đây là CSS:

h1, p, div, pre {
    background: #00ccc5;
}
h1 {
    padding: 50px; /* Áp dụng cho tất cả các mặt */
}
p {
    padding: 25px 75px; /* Trên Dưới | Trái Phải */
}
div {
    padding: 25px 50px 75px; /* Trên | Phải Trái | Dưới */
}
pre {
    padding: 25px 50px 75px 100px; /* Trên | Phải | Dưới | Trái */
}

Ký hiệu viết tắt này có thể nhận một, hai, ba hoặc bốn giá trị được phân tách bằng khoảng trắng.

• Nếu có 1 giá trị: Trình duyệt sẽ hiểu là cần đặt padding 4 mặt đều bằng giá trị đó
• Nếu có 2 giá trị: Trình duyệt sẽ thiết lập padding-top và padding-bottom bằng giá trị đầu tiên, padding-right và padding-left bằng giá trị thứ hai.
• Nếu có 3 giá trị: Giá trị đầu tiên là padding-top, giá trị thứ hai là padding-right và padding-left, giá trị thứ ba là padding-botttom.
• Nếu có 4 giá trị: Thì nó áp dụng theo thứ tự lần lượt Top – Right – Bottom – Left

Bạn nên sử dụng cách viết tắt này, nó sẽ giúp bạn tiết kiệm thời gian, code ngắn hơn và dễ theo dõi, duy trì hơn.

Ảnh hưởng của padding và border lên bố cục

Khi tạo bố cục trang web, việc thêm padding hoặc border vào các phần tử đôi khi tạo ra kết quả không mong muốn.

Vì padding và border được tính vào chiều rộng và chiều cao thực tế mà phần tử sẽ chiếm.

Chưa hiểu thì đọc lại bài viết Box Model trong CSS nhé.

Ví dụ: Nếu bạn đặt chiều rộng của phần tử div thành 100% và cũng áp dụng thêm padding hoặc border bên trái / phải trên phần tử đó, thanh cuộn ngang sẽ xuất hiện.

Hãy xem một ví dụ:

HTML:

<div>
    <h1>Đây là một hộp DIV</h1>
</div>

CSS:

div {
    width: 100%;
    padding: 25px;
    background: #00ccc5;
}

Để ngăn padding và border thay đổi chiều rộng và chiều cao hộp của phần tử, bạn có thể sử dụng thuộc tính box-sizing.

Trong ví dụ sau, chiều rộng và chiều cao của hộp div sẽ không thay đổi, tuy nhiên, phần nội dung của nó sẽ giảm tương ứng khi bạn tăng padding hoặc border.

Chỉ lại CSS như sau:

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

Bạn sẽ tìm hiểu chi tiết về tính năng box-sizing trong các bài viết sắp tới.

Như vậy, qua bài viết này, mình đã giúp bạn hiểu về padding trong CSS cũng như cách viết tắt của thuộc tính padding.

Hãy làm lại ví dụ, chơi với nó để thực sự hiểu rõ nó nhé.

Học tiếp: Border trong CSS

Đọc thêm: Kích thước trong CSS

Trong hướng dẫn tự học CSS này bạn sẽ được tìm hiểu cách sử dụng CSS để thiết kích thước chiều rộng (width) và chiều cao (height) cho các phần tử HTML.

Thiết lập kích thước phần tử trong CSS

CSS có một số thuộc tính kích thước, chẳng hạn như:

• width: Chiều rộng
• height: Chiều cao
• max-width: Chiều rộng tối đa
• min-width: Chiều rộng tối thiểu
• max-height: Chiều cao tối đa
• min-height: Chiều cao tối thiểu

Những thuộc tính kích thước trong CSS này cho phép bạn kiểm soát chiều rộng và chiều cao của một phần tử.

Các phần tiếp theo đây mình giúp giúp bạn hiểu rõ cách sử dụng các thuộc tính này để tạo bố cục trang web tốt hơn.

Thiết lập chiều rộng và chiều cao

Thuộc tính width và height xác định chiều rộng và chiều cao của vùng nội dung của một phần tử.

Chiều rộng và chiều cao này không bao gồm phần đệm (padding), đường viền (border) hoặc lề (margin).

Tại sao thì vui lòng xem lại bài Box Model trong CSS để biết cách tính chiều rộng và chiều cao thực tế của phần tử nhé.

Hãy thử ví dụ sau và xem nó thực sự hoạt động như thế nào:

HTML:

<div>Thử thiết lập kích thước phần tử xem nó hoạt động thế nào</div>

CSS:

div {
    width: 300px;
    height: 200px;
    background: #003999;
}

Các quy tắc CSS trên chỉ định chiều rộng cố định là 300px và chiều cao là 200px cho phần tử div.

Thuộc tính chiều rộng và chiều cao có thể nhận các giá trị sau:

• Một trong các loại kích thước px, em, rem, pt, cm, v.v. (Xem bài viết Thuộc tính font trong CSS để hiểu hơn về các loại kích thước)
• %: Chỉ định chiều rộng tính bằng phần trăm (%) chiều rộng của phần tử chứa nó.
• auto: Trình duyệt tự tính toán chiều rộng phù hợp cho phần tử.
• initial: Đặt chiều rộng và chiều cao thành giá trị mặc định của nó, giá trị này là tự động.
• inherit: Chỉ định rằng chiều rộng sẽ được kế thừa từ phần tử cha của nó.

Mẹo: Thông thường khi bạn tạo phần tử khối (block), chẳng hạn như div, p, v.v., trình duyệt sẽ tự động đặt chiều rộng của chúng thành 100% chiều rộng có sẵn và chiều cao vừa đủ để hiển thị tất cả nội dung nó chứa. Bạn nên tránh đặt chiều rộng và chiều cao cố định trừ khi cần thiết (Vì còn phải thiết kế đáp ứng – Responsive nữa)

Chú ý: Bạn đang muốn học để lập trình Website chuyên nghiệp? Thế thì xem ngay khóa học lập trình Full stack tại đây: https://niithanoi.edu.vn/hoc-lap-trinh.html

Thiết lập chiều rộng tối đa và chiều cao tối đa

Bạn có thể sử dụng thuộc tính max-width và max-height để chỉ định chiều rộng và chiều cao tối đa của vùng nội dung.

Chiều rộng và chiều cao tối đa này cũng không bao gồm padding, border, magin.

Một phần tử không được rộng hơn giá trị max-width, ngay cả khi giá trị thuộc tính width được đặt lớn hơn.

Ví dụ: Nếu chiều rộng được đặt thành 300px và chiều rộng tối đa được đặt thành 200px, thì chiều rộng thực tế của phần tử sẽ là 200px. Hãy xem ví dụ:

HTML:

<div>Chiều rộng tối đa của thẻ div này được đặt là 200px. Thế nên cho dù ta có đặt width = 300px thì nó cũng không thể rộng hơn được</div>
<p>Còn thẻ p này thì có chiều rộng tối đa là 1000px cơ.</p>

CSS:

div {
    width: 300px;
    max-width: 200px;
    background: #003999;
}
p {
    float: left;
    max-width: 1000px;
    background: #eee8aa;
}

Lưu ý: Nếu thuộc tính min-width có giá trị lớn hơn giá trị của thuộc tính max-width, trong trường hợp này, giá trị chiều rộng tối thiểu thực tế sẽ là giá trị được áp dụng.

Tương tự như thế, một phần tử đã áp dụng max-height sẽ không bao giờ cao hơn giá trị được chỉ định, ngay cả khi thuộc tính height được đặt thành giá trị lớn hơn.

Ví dụ: Nếu chiều cao được đặt thành 200px và chiều cao tối đa được đặt thành 100px, thì chiều cao thực của phần tử sẽ là 100px.

HTML:

<div>Chiều cao tối đa của thẻ div này được đặt là 30px. Thế nên cho dù ta có đặt height = 200px thì nó cũng không thể cao hơn được</div>
<p>Còn thẻ p này thì có chiều rộng tối đa là 500px cơ.</p>

CSS:

div {
    height: 200px;
    max-height: 30px;
    background: #003999;
}
p {
    max-height: 500px;
    background: #eee8aa;
}

Lưu ý: Nếu giá trị thuộc tính min-height lớn hơn max-height, trong trường hợp này, giá trị chiều cao tối thiểu trên thực tế sẽ là giá trị được áp dụng

Thiết lập chiều rộng tối thiểu và chiều cao tối thiểu trong CSS

Bạn có thể sử dụng thuộc tính min-width và min-height chỉ định chiều rộng và chiều cao tối thiểu của vùng nội dung.

Chiều rộng và chiều cao tối thiểu này không bao gồm padding, border, margin.

Một phần tử không được hẹp hơn giá trị min-width, ngay cả khi giá trị thuộc tính width được đặt thành giá trị nhỏ hơn.

Ví dụ: Nếu width được đặt thành 300px và min-width được đặt thành 400px, thì chiều rộng thực tế của phần tử sẽ là 400px. Hãy xem nó thực sự hoạt động như thế nào:

HTML:

<div>Chiều rộng tối thiểu là 300px nên dù có đặt width = 200px thì nó cũng không thể nhỏ hơn</div>
<p>Thẻ p này min-width là 400px cơ.</p>

CSS:

div {
    width: 200px;
    min-width: 300px;
    background: #003999;
}     
p {
    float: left;
    min-width: 400px;
    background: #eee8aa;
}

Lưu ý: Thuộc tính min-width thường được sử dụng để đảm bảo rằng một phần tử có chiều rộng tối thiểu ngay cả khi nó không có nội dugn. Tuy nhiên, nếu nội dung nó lớn hơn giá trị tối thiểu thì nó vẫn được mở rộng thoải mái.

Tương tự, một phần tử được áp dụng min-height sẽ không bao giờ nhỏ hơn giá trị được chỉ định, ngay cả khi đặt giá trị thuộc tính height nhỏ hơn.

Ví dụ: Nếu height được đặt thành 200px và min-height được đặt thành 300px, thì chiều cao thực của phần tử sẽ là 300px

HTML:

<div>Chiều cao tối thiểu của thẻ div này là 300px vì thế nó không thể nhỏ hơn cho dù có đặt height = 200px</div>
<p>Còn thể p này có chiều cao tối thiểu là 100px.</p> 

CSS:

div {        
    height: 200px;
    min-height: 300px;
    background: #003999;
}
p {
    min-height: 100px;
    background: #eee8aa;
}

Thiết lập khoảng chiều rộng và khoảng chiều cao trong CSS

Thuộc tính min-width và min-height thường được sử dụng kết hợp với thuộc tính max-width và max-height để tạo ra phạm vi chiều rộng và chiều cao cho một phần tử.

Điều này có thể rất hữu ích để tạo ra các bố cục thiết kế linh hoạt

Trong ví dụ sau, chiều rộng tối thiểu của thẻ div sẽ là 300px và nó có thể kéo dài chiều rộng lên đến tối đa 500px.

HTML:

<div></div>

CSS:

div {
    float: left;
    min-width: 300px;
    max-width: 500px;
    height: 100px;
    background: #003999;
}

Bạn thử chạy ví dụ trên xem.

Lúc đầu nó chỉ hiển thị kích thước là 300px. Tuy nhiên, hãy thử thêm vài dòng văn bản vào trong thẻ div để thấy nó hoạt động như thế nào.

Tương tự, bạn có thể xác định khoảng chiều cao cho một phần tử.

Trong ví dụ dưới đây, chiều cao tối thiểu của thẻ div sẽ là 100px và nó có thể cao lên đến tối đa 500px.

HTML:

<div></div>

CSS

div {
    min-height: 100px;
    max-height: 500px;
    background: #003999;
}

Hãy thử ví dụ và thêm nội dung vào thẻ div để xem cách nó hoạt động nhé.

Như vậy, qua bài viết này mình đã hướng dẫn bạn cách thiết lập kích thước trong CSS. Hi vọng bạn hiểu và vận chúng linh hoạt trong lập trình web.

Đọc thêm: Cách CSS Bảng

Trong hướng dẫn tự học CSS này, bạn sẽ tìm hiểu về CSS Box Model. Hiểu làm thế nào các phần tử có thể trình bày trực quan trên trang web.

1. CSS Box Model là gì?

Mỗi phần tử có thể được hiển thị trên một trang web đều được bao quanh bởi một hoặc nhiều hộp hình chữ nhật.

CSS Box Model thường mô tả cách các hộp hình chữ nhật này được thiết lập trên một trang web.

Các hộp này có thể có các thuộc tính khác nhau và có thể tương tác với nhau theo các cách khác nhau, nhưng mỗi hộp đều có:

• Content area: Khu vực nội dung hiển thị (Text, Ảnh, Video…)
• Padding: Các vùng đệm (Khoảng cách trống giữa nội dung và đường viền)
• Border: Đường viền (Đường viền này có hoặc không có độ rộng)
• Margin area: Khu vực lề (Khoảng cách giữa border và các phần tử xung quanh)

Sơ đồ sau đây sẽ minh họa cho bạn thấy các thuộc tính:

• width
• height
• padding
• border
• margin

Đây là tất cả những thứ sẽ xác định một phần tử sẽ chiếm bao nhiêu không gian trên trang web.

Như đã giới thiệu ở trên, Padding là không gian trong suốt giữa nội dung của phần tử và đường viền của nó (hoặc cạnh của hộp, nếu nó không có đường viền).

Trong khi đó, margin là không gian trong suốt xung quanh đường viền, nó giữ khoảng cách từ đường viền đến các phần từ xung quanh khác.

Ngoài ra, nếu một phần tử có màu nền (background), nó sẽ hiển thị cả trên padding (vùng đệm) của nó.

Margin (vùng lề) luôn luôn trong suốt, nó không bị ảnh hưởng bởi màu nền của phần tử, tuy nhiên, nếu có một nền được đặt bên dưới nó thì thì chúng ta sẽ nhìn thấy màu nền đó (ví dụ như màu nền của phần tử cha chẳng hạn).

2. Chiều rộng và Chiều cao thực tế của phần tử trên website

Thông thường khi bạn thiết lập chiều rộng (width) và chiều cao (height) của một phần tử bằng các thuộc tính width và height trong CSS, thực tế bạn chỉ đang thiết lập chiều rộng và chiều cao của vùng nội dung (Content Area) của phần tử đó.

Chiều rộng và chiều cao thực tế của hộp phần tử phụ thuộc vào một số yếu tố khác nữa.

Không gian thực tế mà hộp của một phần tử có thể chiếm trên một trang web được tính như thế này:

2.1. Tổng chiều rộng của phần tử trong CSS bằng:

width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

2.2 Tổng chiều cao của phần tử trong CSS bằng:

height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Lưu ý: Nếu bạn không hiểu kích thước thật mà phần tử chiếm, thì khi CSS bạn chỉ tính toán kích thước width với height thì sẽ sai lệch ngay.

Cụ thể, bạn sẽ được tìm hiểu về từng thuộc tính CSS này một cách chi tiết trong các bài sau.

Bây giờ chúng ta hãy thử ví dụ sau để hiểu CSS Box Model thực sự hoạt động như thế nào:

Trong HTML:

<div>Phần tử DIV này sử dụng để minh họa CSS Box Model trong CSS. Kích thước thực tế của phần tử sẽ bao gồm cả các kích thước: Phần nội dung, Phần đệm, Phần đường viền và Phần lề.</div>
<div>Hãy sử dụng Ctrl + Shift + I và chọn chỉ vào 2 DIV này để thấy không gian thực sự mà phần tử đã chiếm lấy.</div>

Trong CSS:

div {
    width: 200px;
    height: 200px;
    padding: 15px;
    border: 10px solid red;
    margin: 20px;
    float: left;
}

Note: Thuộc tính float: left đơn giản là sử dụng để dồn các phần tử sang bên trái nếu còn đủ không gian.

Khi chạy trên trình duyệt chúng ta nhận được kết quả như thế này:

Sau khi chúng ta nhấn Ctrl + Shift + I và chọn chỉ vào phần tử thì sẽ thấy như thế này:

Kích thước trình duyệt hiển thị (phần nhìn thấy rõ ràng) là 250×250 là:

• Chiều rộng 200px + Phần đệm trái 15px + Phần đệm phải 15px + Đường viền trái 10px + Đường viền phải 10px = 250px
• Chiều cao 200px + Phần đệm trên 15px + Phần đệm dưới 15px + Đường viền trên 10px + Đường viền dưới 10px = 250px

Tuy nhiên, thực sự không gian mà phần tử này chiếm đang là 290 x 290 px (bao gồm cả phần phần màu cam nhạt ngoài cùng)

Như vậy, bài hướng dẫn tự học CSS này mình đã giúp bạn hiểu về CSS Box Model là gì, kích thước thật sự của phần tử khi hiển thị trên website.

Hãy thử thay đổi các thuộc tính để thực sự hiểu cách nó hoạt động, tương tác bạn nhé. Nắm rõ CSS Box Model thực sự rất quan trọng khi HỌC LẬP TRÌNH WEB đấy.

Học tiếp: Thiết lập kích thước trong CSS

Đọc thêm: CSS Table

Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

Vì sao cần tạo kiểu cho bảng với CSS

Trong lập trình web, bạn có thể sẽ cần tạo rất nhiều bảng để lưu trữ, hiển thị thông tin một cách khoa học.

Các bảng (table) thường được sử dụng để hiển thị dữ liệu, chẳng hạn như báo cáo tài chính, thống kê, kế toán…

Nhưng khi bạn tạo một bảng HTML mà không có được CSS hoặc thêm thuộc tính nào, trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào.

Như thế trông sẽ rất tệ.

Thế nên bạn cần phải thực hiện CSS cho bảng để mang lại trả nghiệm tốt hơn.

CSS cung cấp một số thuộc tính cho phép bạn kiểm soát bố cục và cách trình bày các thành phần của bảng. Trong phần sau, bạn sẽ thấy cách sử dụng CSS để tạo các bảng một cách thanh lịch và nhất quán.

CSS Table #1: Thêm đường viền cho bảng

Sử dụng thuộc tính border của CSS là cách tốt nhất để xác định đường viền cho các bảng.

Ví dụ sau sẽ thiết lập đường viền màu đen cho các phần tử <table>, <th> và <td>.

Nếu bạn chưa biết thì:

• <table></table> là cặp thẻ khai báo một bảng
• <tr></tr> là để tạo một hàng trong bảng <table>
• <th></th> là cặp thẻ để xác định các tiêu đề của từng cột
• <td><td> là cặp thẻ xác định nội dung của cùng một hàng (qua từng cột)

Ví dụ, mình có một bảng đơn giản như thế này:

<table>
    <tr>
        <th>ID</th>
        <th>Họ và tên đệm</th>
        <th>Tên</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Nguyễn Minh</td>
        <td>Đức</td>
        <td>nguyenminhduc@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Vũ Kim</td>
        <td>Thoa</td>
        <td>vukimthoa@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Nguyễn Linh</td>
        <td>Trang</td>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Vi Đại</td>
        <td>Doanh</td>
        <td>vidaidoanh@mail.com</td>
    </tr>
</table>

Bây giờ, mình thiết lập đường viền cho bảng bằng CSS như sau:

table, th, td {
    border: 1px solid black;
}

• 1px là độ rộng của đường viền
• solid (nét liền), dashed (gạch ngang), dotted (kiểm chấm) là kiểu nét của đường viền
• black (có thể chọn màu tùy ý) là màu của đường viền

Kết quả được như hình:

Vì theo mặc định, trình duyệt vẽ một đường viền xung quanh bảng, cũng như xung quanh tất cả các ô, với một khoảng trống ở giữa, dẫn đến đường viền kép.

Để thoát khỏi vấn đề đường viền kép này, bạn có thể chỉ cần thu gọn các đường viền ô liền kề và tạo các đường viền đơn.

Nó gọi là Collapsing Border

Collapsing Border

Có hai mô hình riêng biệt để thiết lập đường viền trên các ô của bảng trong CSS:

• separate: Tách biệt
• collapse: Thu gọn

Trong mô hình separate border, nó là mặc định, mỗi ô của bảng có các viền riêng biệt (Vì thế bạn thấy đường viền kép)

Trong khi đó ở mô hình collapsed border, các ô của bảng liền kề có chung một viền.

Bạn có thể thiết lập mô hình viền cho bảng HTML bằng cách sử dụng thuộc tính border-collapse của CSS.

Đoạn code CSS sau đây sẽ thu gọn các viền ô của bảng (thành viền đơn) và áp dụng một viền đen 1px.

Vẫn sử dụng bảng trên bạn nhé

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Kết quả nhận được là:

Lưu ý: Bạn cũng có thể xóa khoảng trắng giữa các viền của ô bảng thông qua đặt giá trị của thuộc tính border-spacing CSS thành 0. Tuy nhiên, nó chỉ xóa khoảng trắng nhưng không hợp nhất các đường viền như khi bạn đặt thu gọn đường viền thành thu gọn.

Vì thế, nếu bạn sử dụng CSS:

table {
    border-spacing: 0;
}
table, th, td {
    border: 1px solid black;
}

Thì kết quả bạn nhận được là:

CSS Table #2: Điều chỉnh không gian bên trong bảng

Theo mặc định, trình duyệt tạo các ô bảng đủ lớn để chứa vừa dữ liệu trong các ô.

Nhưng nhìn nó vẫn rất chật chội.

Mà để tăng tính trải nghiệm thì cần có nhiều khoảng trắng hơn.

Do đó, cần phải thêm không gian giữa nội dung ô của bảng và viền ô.

Để làm việc này, bạn chỉ cần sử dụng thuộc tính padding trong CSS. Hãy thử ví dụ sau và xem nó hoạt động như thế nào:

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 15px;
}

Kết quả nhận được là:

Bạn cũng có thể điều chỉnh khoảng cách giữa các viền của các ô bằng cách sử dụng thuộc tính border-spacing trong CSS, nếu các viền của bảng của bạn đang sử dụng là mô hình separate border (mặc định đó).

Các quy tắc CSS sau áp dụng khoảng cách 10px giữa tất cả các viền trong một bảng:

table {
    border-spacing: 10px;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

Kết quả chúng ta nhận được là:

CSS Table #3: Thiết lập Width và Height cho bảng

Theo mặc định, một bảng sẽ hiển thị chỉ vừa đủ rộng và đủ cao để chứa tất cả nội dung của nó.

Tuy nhiên, bạn cũng có thể đặt chiều rộng và chiều cao của bảng cũng như các ô của bảng một cách rõ ràng bằng cách sử dụng thuộc tính width và height của CSS.

Các quy tắc CSS trong ví dụ sau sẽ thiết lập chiều rộng của bảng thành 100% và chiều cao của các ô tiêu đề bảng thành 40px.

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    text-align: left;
}

Khi chạy trên trình duyệt, kết quả chúng ta dùng được là:

CSS Table #4: Kiểm soát bố cục của bảng

Một bảng tự động mở rộng và teo lại để chứa vừa dữ liệu chứa bên trong nó (Đây là hành vi mặc định)

Khi dữ liệu điền vào bên trong bảng, nó tiếp tục mở rộng miễn là còn có không gian. Tuy nhiên, đôi khi, cần phải thiết lập chiều rộng cố định cho bảng để quản lý bố cục thống nhất.

Bạn có thể làm điều này với sự trợ giúp của thuộc tính table-layout trong CSS.

Thuộc tính này xác định thuật toán được sử dụng để bố trí các ô, hàng và cột của bảng. Thuộc tính này có một trong hai giá trị:

• auto: Sử dụng một thuật toán bố trí bảng tự động. Với thuật toán này, độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung. Đây là giá trị mặc định.

• fixed: Sử dụng thuật toán bố trí bảng cố định. Với thuật toán này, bố cục ngang của bảng không phụ thuộc vào nội dung của các ô. Nó chỉ phụ thuộc vào chiều rộng của bảng, chiều rộng của các cột và đường viền hoặc khoảng cách ô. Bố trí bảng này trình duyệt sẽ thực thi nhanh hơn bảng auto.

Các quy tắc CSS trong ví dụ sau xác định rằng bảng HTML được trình bày bằng thuật toán bố cục fixed và có chiều rộng cố định 300 pixel.

Hãy dùng thử và xem nó hoạt động như thế nào nhé:

HTML:

<table class="auto">
    <caption>Ví dụ 1. Bảng Auto</caption>
    <tr>
        <th>Họ và tên</th>
        <td>Nguyễn Linh Trang</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
</table>
<br>
<table class="fixed">
    <caption>Ví dụ 2. Bảng Fixed</caption>
    <tr>
        <th>Họ và tên</th>
        <td>Vũ Kim Thoa</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>vukimthoa@mail.com</td>
    </tr>
</table>

CSS:

table {
    width: 300px;
    border-collapse: collapse;            
}
table, tr, th, td{
    border: 1px solid #000000;
}
.auto {
    table-layout: auto;
}
.fixed {
    table-layout: fixed;
}
td{
    width: 50%;
}

Kết quả nhận được là:

Mẹo: Bạn có thể tối ưu hóa hiệu suất kết xuất bảng (trong trình duyệt) bằng cách chỉ định giá trị fixed cho thuộc tính table-layout. Giá trị fixed của thuộc tính này làm cho bảng được hiển thị một hàng tại một thời điểm, cung cấp cho người dùng thông tin với tốc độ nhanh hơn.

Note: Nếu không có giá trị fixed của thuộc tính table-layout trên các bảng lớn, người dùng sẽ không thấy bất kỳ phần nào của bảng cho đến khi trình duyệt render xong toàn bộ bảng.

CSS Table #5: Căn chỉnh văn bản bên trong các ô của bảng

Bạn có thể căn chỉnh nội dung văn bản bên trong các ô của bảng theo chiều ngang hoặc chiều dọc.

Căn chỉnh nội dung theo chiều ngang của ô trong bảng

Để căn chỉnh văn bản theo chiều ngang bên trong các ô của bảng, bạn có thể sử dụng thuộc tính text-align giống như cách bạn sử dụng với các phần tử khác.

• Đọc thêm: Cách CSS text

Bạn có thể căn chỉnh văn bản sang trái (left), phải (right), giữa (center) hoặc căn đều (justify).

Các quy tắc kiểu sau sẽ căn trái văn bản bên trong các thành phần <th>. (Sử dụng HTML ở ví dụ 1)

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    text-align: left;
}

Kết quả nhận được như sau:

Lưu ý: Văn bản bên trong các phần tử <td> được căn trái theo mặc định, trong khi văn bản bên trong các phần tử <th> được căn giữa và được hiển thị bằng phông chữ đậm theo mặc định.

Sắp xếp nội dung theo chiều dọc của ô trong bảng

Tương tự, bạn có thể căn chỉnh nội dung theo chiều dọc bên trong các phần tử <th> và <td> thành trên cùng (top), dưới cùng (bottom) hoặc giữa (center) bằng cách sử dụng thuộc tính vertical-align trong CSS.

Căn dọc mặc định là giữa.

Các quy tắc CSS sau sẽ căn chỉnh văn bản theo chiều dọc, xuống dưới cùng bên trong các phần tử <th>.

table {
    width: 100%;        
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #dee2e6;
}
th {
    height: 40px;
    vertical-align: bottom;
}

Kết quả nhận được là:

CSS Table #6: Kiểm soát vị trí chú thích của bảng

Bạn có thể thiết lập vị trí dọc của chú thích bảng bằng thuộc tính caption-side trong CSS.

Chú thích có thể được đặt ở đầu (top) hoặc cuối bảng (bottom). Vị trí mặc định là top.

Trước tiên, bạn thêm chú thích bảng vào trong HTML:

<caption>BẢNG DANH SÁCH HỌC VIÊN</caption>

Sau đó, đây là CSS:

table, td, th {
    border: 1px solid gray;
}
caption {
    caption-side: bottom;
}

Khi chạy trên trình duyệt, ta có bảng sau:

Mẹo: Để căn chỉnh chiều ngang của văn bản chú thích của bảng (ví dụ: căn trái hoặc phải), bạn chỉ cần sử dụng thuộc tính text-align trong CSS, giống như cách bạn làm với văn bản thông thường là được.

CSS Table #7: Xử lý các ô trống trong bảng

Trong các bảng sử dụng mô hình separate border, theo mặc định, bạn cũng có thể kiểm soát việc render các ô không có nội dung hiển thị bằng cách sử dụng thuộc tính empty-cells trong CSS.

Thuộc tính này chấp nhận giá trị show hoặc hide.

Giá trị mặc định là show, hiển thị các ô trống như các ô bình thường.

Nhưng nếu giá trị hide được chỉ định, không có border hoặc background nào được vẽ xung quanh các ô trống.

Hãy thử một ví dụ để hiểu cách nó thực sự hoạt động:

Ta có HTML:

<h2>BẢNG VỚI CÁC Ô TRỐNG</h2>
<table class="empty-show">
    <tr>
        <th>Họ và tên</th>
        <td>Nguyễn Linh Trang</td>
    </tr>
    <tr>
        <th>Email</th>
        <td></td>
    </tr>
</table>
<br>
<h2>BẢNG VỚI CÁC Ô TRỐNG BỊ ẨN</h2>
<table class="empty-hide">
    <tr>
        <th>Họ và tên</th>
        <td>Vũ Kim Thoa</td>
    </tr>
    <tr>
        <th>Email</th>
        <td></td>
    </tr>
</table>

Đây là CSS:

table {
    width: 300px;
    border-collapse: separate;
}
table, th, td{
    border: 1px solid #000000;
}
table.empty-show {
    empty-cells: show;                        
}
table.empty-hide {
    empty-cells: hide;           
}

Và kết quả nhận được là đây:

Mẹo: Đặt giá trị (&nbsp) bên trong một ô của bảng làm cho nó không bị trống. Do đó, ngay cả khi ô đó nhìn thì trống rỗng, giá trị hide sẽ không ẩn đường viền và nền.

CSS Table #8: Tạo bảng sọc như ngựa vằn

Bạn có thể thiết lập màu nền khác nhau cho các hàng xen kẽ là một kỹ thuật phổ biến để cải thiện khả năng đọc của các bảng có lượng dữ liệu lớn.

Kỹ thuật này thường được gọi là: zebra-striping

Bạn chỉ có thể đạt được hiệu ứng này bằng cách sử dụng pesudo-class Selector trong CSS là :nth-child().

• Đọc thêm: 9 Bộ chọn CSS (CSS Selector)

Các quy tắc CSS sau sẽ làm nổi bật mọi hàng lẻ trong thân bảng.

table {
    width: 100%;        
    font-family: arial, sans-serif;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-top: 1px solid #dee2e6;
}
    tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Kết quả nhận được là:

Lưu ý: Các phần tử pesudo-class nth-child() dựa trên vị trí của chúng trong một nhóm anh chị em. Nó có thể lấy một số, một từ khóa chẵn (even) hoặc lẻ (odd) hoặc một biểu thức có dạng xn + y trong đó x và y là các số nguyên (ví dụ: 1n, 2n, 2n + 1, …) làm đối số.

CSS Table #9: Tạo bảng Responsive

Theo mặc định thì bảng không responsive (khả năng tương thích với các loại kích thước màn hình).

Tuy nhiên, để hỗ trợ các thiết bị di động, bạn có thể thêm khả năng responsive cho các bảng của mình bằng cách cho phép cuộn ngang trên màn hình nhỏ.

Để làm điều này, chỉ cần bọc bảng của bạn bằng một phần tử <div> và áp dụng kiểu overflow-x: auto; như hình dưới đây:

HTML:

<div class="responsive-table">
    <table>
        <thead>
            <tr>
                <th>ID</th>
            	<th>Họ và tên đệm</th>
            	<th>Tên</th>
            	<th>Email</th>
                <th>Số điện thoại</th>
                <th>Địa chỉ hiện tại</th>
                <th>Quê quán</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nguyễn Minh</td>
                <td>Đức</td>
                <td>nguyenminhduc@mail.com</td>
              	<td>0989111222</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Thanh Hóa</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Vũ Kim</td>
                <td>Thoa</td>
                <td>vukimthoa@mail.com</td>
                <td>0989222333</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Hà Nội</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Nguyễn Linh</td>
                <td>Trang</td>
                <td>nguyenlinhtrang@mail.com</td>
                <td>0989333444</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Tuyên Quang</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Vi Đại</td>
                <td>Doanh</td>
                <td>vidaidoanh@mail.com</td>
                <td>0989444555</td>
                <td>Tầng 3, 25T2, Nguyễn Thị Thập, Cầu Giấy, Hà Nội</td>
                <td>Tuyên Quang</td>
            </tr>
        </tbody>
    </table>
</div>

Đây là CSS:

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #dee2e6;
    white-space: nowrap; /* Ngăn chặn văn bản xuống dòng */
}
.responsive-table {
    overflow-x: auto;
}

Kết quả nhận được là:

Như vậy, trong bài hướng dẫn tự học CSS này mình đã hướng dẫn bạn cách CSS bảng, cách CSS bảng đẹp thông qua các thuộc tính của CSS.

Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn.

Chú ý: Nếu bạn đang tìm kiếm khóa học Lập trình Web bài bản để trở thành lập trình viên phát triển web thực thụ thì hãy xem qua ngay KHÓA HỌC LẬP TRÌNH FULL STACK tại NIIT – ICT Hà Nội nhé.

Học tiếp: CSS Box Model

Đọc thêm: Cách CSS cho các danh sách

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)

Đâ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: 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 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ự (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 cung cấp một số 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 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 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 list

Theo mặc định, các mục trong danh sách đượ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 danh sách không có thứ tự (Kiểu Unordered list), các mục được đánh dấu 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 cách thức hoạt động của thuộc tính này:

HTML:

<h2>Danh sách không có thứ tự</h2>
<ul>
    <li>Học CSS</li>
    <li>Học SASS</li>
    <li>Học Bootstrap</li>
</ul>
<h2>Danh sách có thứ tự</h2>
<ol>
    <li>Học CSS</li>
    <li>Học SASS</li>
    <li>Học Bootstrap</li>
</ol>

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, các điểm đánh dấu của từng mục danh sách đượ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, các danh sách và đánh dấu sẽ cùng nằm trong hộp hiển thị của nó:

HTML:

<h2>Thay đổi điểm đánh dấu vào trong</h2>
<ol class="trong">
    <li>Học CSS</li>
    <li>Học SASS</li>
    <li>Học Bootstrap</li>
</ol>
<h2>Thay đổi điểm đánh dấu ra ngoài</h2>
<ol class="ngoai">
    <li>Học CSS</li>
    <li>Học SASS</li>
    <li>Học Bootstrap</li>
</ol>

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 đánh dấu danh sách cho tất cả các mục trong danh sách không theo thứ tự.

Note: Bạ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 như thế nào:

HTML:

<h2>Danh sách sử dụng điểm đánh dấu là ảnh</h2>
<ul>
    <li>CSS rất dễ học</li>
    <li>CSS rất thú vị</li>
    <li>CSS tất cần thiết</li>
</ul>

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 đánh dấu đầu dòng. Sau đó, xác định một hình nền no-repeat 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 {
    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 lưu ý, có thuộc tính background-position: 0px 5px; có thể bạn chưa học.

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 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 lẻ 3 thuộc tính định dạng 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 (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 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 có thể hơi thừa thãi.

Một khi đã sử dụng kiểu hình ả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 {
    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 các giá trị là: list-style-type | list-style-position | list-style-image. Sẽ không có vấn đề gì nếu một trong các giá trị trên bị thiếu miễn là các 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 xuất hiện ở đầu trang web.

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 như thế nào:

HTML:

<nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Về NIIT</a></li>
         <li><a href="#">Khóa Học</a></li>
         <li><a href="#">Tutorials</a></li>
         <li><a href="#">Thư viện</a></li>
         <li><a href="#">Liên hệ</a></li>
    </ul>
</nav>

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ớ thay đổi, xóa các thuộc tính để xem chúng thay đổi, 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

Trong bài hướng dẫn tự học CSS này, bạn sẽ học cách viết CSS để tạo kiểu cho các trạng thái khác nhau của một đường link (liên kết).

Tạo kiểu các link với CSS

Link (liên kết) hoặc siêu liên kết là một phần thiết yếu của một trang web.

Nó cho phép khách truy cập điều hướng qua lại các trang trên (và ngoài) web. Do đó, tạo kiểu cho các liên kết đúng cách là một khía cạnh quan trọng của việc xây dựng một trang web thân thiện với người dùng.

Một liên kết có bốn trạng thái khác nhau:

• link
• visited
• active
• hover

Bốn trạng thái của một liên kết có thể được tạo kiểu khác nhau thông qua việc sử dụng các Selector sau đây.

• a:link – Dùng để tạo kiểu cho liên kết thông thường, chưa được click
• a:visited – Dùng để tạo kiểu cho liên kết đã được người dùng truy cập
• a:active – Dùng để tạo kiểu cho các liên kết khi chúng được nhấp vào.
• a:hover – Dùng để tạo kiểu cho các liên kết khi di chuột qua

Bạn có thể chỉ định bất kỳ thuộc tính CSS nào bạn muốn, ví dụ: Màu sắc, phông chữ, nền, đường viền, v.v. cho mỗi bộ chọn này để tùy chỉnh kiểu liên kết, giống như bạn làm với văn bản thông thường.

Đây là một ví dụ

HTML:

<a href="https://niithanoi.edu.vn">Học Lập trình</a>

CSS:

a:link {    /* Link chưa được truy cập */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* Link đã truy cập */
    color: #ff00ff;
}
a:hover {    /* Di chuyển qua link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* Link được kích hoạt */
    color: #00ffff;
}

Thứ tự mà bạn đang đặt kiểu cho các trạng thái liên kết khác nhau rất quan trọng.

Bởi vì những gì được viết ở cuối cùng được ưu tiên hơn các kiểu được định nghĩa trước đó.

Lưu ý: Nói chung, thứ tự của chúng nên như sau: link, :visited, :hover, :active, :focus để có thể hoạt động đúng

Viết CSS tạo kiểu cho các link

Trong tất cả các trình duyệt web chính như Chrome, Firefox, Safari, v.v., các liên kết trên các trang web đều có gạch chân và sử dụng màu liên kết mặc định của trình duyệt, nếu bạn không đặt kiểu riêng cho chúng.

Theo mặc định, các liên kết văn bản sẽ xuất hiện như sau trong hầu hết các trình duyệt:

• Một unvisited link có màu xanh, gạch chân.
• Một visited link có màu tím, gạch chân.
• Một active link có màu đỏ, gạch chân.

Tuy nhiên, không có thay đổi về sự xuất hiện của liên kết trong trường hợp trạng thái di chuột (hover).

Nó vẫn có màu xanh lam, tím hoặc đỏ tùy thuộc vào trạng thái (nghĩa là không được theo dõi, truy cập hoặc hoạt động) mà nó đang ở.

Bây giờ hãy xem cách tùy chỉnh các liên kết bằng cách ghi đè kiểu mặc định của nó.

Thiết lập màu của link

Chỉ cần sử dụng thuộc tính màu sắc trong CSS để xác định màu bạn chọn cho trạng thái khác nhau của liên kết.

Nhưng khi chọn màu, đảm bảo rằng người dùng có thể phân biệt rõ ràng giữa văn bản và liên kết thông thường.

Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:

HTML:

<a href="https://niithanoi.edu.vn">Học Lập trình</a>

CSS:

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Xóa phần gạch chân mặc định khỏi các liên kết

Nếu bạn không thích gạch chân mặc định trên các liên kết, bạn chỉ cần sử dụng thuộc tính tex-decoration trong CSS để loại bỏ nó.

Note: Thực tế thì các trang web hiện đại thường thể hiện các đường link bằng màu sắc, không có gạch chân, khi hover thì sẽ có màu sắc khác.

Ngoài ra, bạn có thể áp dụng kiểu dáng khác trên các liên kết như background color, bottom boder, bold, v.v. để làm cho nó nổi bật hơn văn bản bình thường tốt hơn một chút.

Ví dụ sau đây cho thấy cách xóa hoặc đặt gạch chân cho các trạng thái khác nhau của liên kết.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Tạo liên kết văn bản trông giống như các nút bấm

Bạn cũng có thể làm cho các liên kết văn bản thông thường của bạn trông giống như nút bấm bằng CSS.

Để làm điều này, chúng ta cần sử dụng thêm một số thuộc tính CSS như:
background-color, border, display, padding …

Bạn sẽ tìm hiểu về các tính chất này một cách chi tiết trong các bài viết sắp tới.

Hãy xem ví dụ sau và xem nó thực sự hoạt động như thế nào:

HTML:

<p><a href="#">CSS cho Liên Kết</a></p>

CSS:

a {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #00b3ad;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;
    border-radius: 30px;
}
a:link, a:visited {
    color: white;
    background-color: #003999;
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #003999;
}

Như vậy là bài viết này mình vừa hướng dẫn bạn cách tạo kiểu cho các đường link (Viết CSS cho link).

Hãy luyện tập lại các ví dụ và thay đổi để thực sự thuần thục bạn nhé, học lập trình quan trọng nhất là thực hành đó.

>> Tham khảo ngay KHÓA HỌC LẬP TRÌNH FULL STACK nếu bạn thực sự muốn học lập trình một cách bài bản

Chúc bạn học tốt.

Học tiếp: CSS List

Đọc thêm: CSS Text