Cách Sử Dụng Border, Padding, Margin Trong CSS, Hướng Dẫn Tạo 1 ...

1;Cách sử dụng đường viền (border) trong CSS

Đường viền là yếu tố gây nổi bật khá quan trọng – nó tạo ranh giới với những phần còn lại của trang web

Ba thuộc tính quan trọng của đường viền đó là:

• Kích thước đường viền.

• Màu sắc của đường viền.

• Kiểu đường viền.

Kích thước đường viền

Về quy định kích thước bạn có thể dùng từ khóa để chỉ định như thin, medium, thick hoặc dùng %,px, cá nhân tôi thì thích dùng đơn vị px hơn.

Chúng ta viết câu lệnh border-width để áp dụng kích thước đường viền.

Màu sắc của đường viền

Về màu sắc bạn có thể dùng bất kì màu nào .để chon màu bạn dùng câu lệnh border-color để áp dụng màu sắc cho đường viền.

Mã hex là cách chủ yếu dùng để khai báo các giá trị màu trong CSS, ngoài ra định dạng rgba đang được sử dụng ngày càng rộng rãi – trong đó a nghĩa là alpha hay còn gọi là độ trong suốt nằm trong khoảng từ 0 đến 1.

ví dụ về một số màu

• #RRGGBB, ví dụ,  color:#FFFFFF;

• rgb(#R,#G,#B), các giá trị số từ 0 đến 255, ví dụ,  color:rgb(69,00,00);

• rgb(R%,G%,B%) – các giá trị phần trăm nằm trong khoảng từ 0 đến 100%, ví dụ, color:rgb(23%,15%,25%);

• rgba(R,G,B,A), ví dụ, color:rgb(69,00,00,0.3);

• Theo tên màu, ví dụ, color:red;

Chú ý: Nếu bạn không quy định màu cụ thể cho viền, nó sẽ lấy màu đen làm màu mặc định.

Kiểu đường viền

Về kiểu đường viền, ta có khá nhiều kiểu bao gồm: none, hidden, dotted, dashed, solid, double, groove, ridge, inset và outset. Để sử dụng kiểu đường viền bạn dùng câu lệnh boder-style

Chúng ta sẽ thử tất cả các kiểu đường viền ở trên – dĩ nhiên trong ứng dụng ngoài đời có một vài kiểu đường viền phổ biến hơn các kiểu khác. Kiểu hay dùng nhất là solid, đó chính là kiểu nét liền mà 2 hộp ở trên lấy.

Thường thì chúng ta hay đặt đường viền cho thẻ div, tuy nhiên trong thực tế bất cứ thẻ nào của html cũng đều áp dụng đường viền được bằng từ khóa border

Sở dĩ chúng ta không để ý các thẻ html có đường viền là vì theo mặc định chúng không được hiển thị.

Bạn để ý thứ tự: kích cỡ, kiểu và màu sắc – ngoài ra là không có dấu chấm phẩy giữa chúng mà chỉ có dấu cách.

Bốn phía của đường viền

Đường viền có 4 cạnh giống như hình chữ nhật vậy, bạn hoàn toàn tác động được vào một cạnh cụ thể trong 4 cạnh đó. Dưới đây là mã lệnh:

• border-bottom: tác động đến đường viền ở đáy

• border-top: tác động đến đường viền ở đỉnh

• border-left: tác động đến đường viền bên trái

• border-right: tác động đến đường viền bên phải

Vấn đề gia tăng kích thước của div và các thẻ nói chung khi sử dụng đường viền

Đường viền làm kích thước của thẻ div, img, và tất cả các thẻ khác gia tăng theo cả chiều cao và chiều rộng. Điều này cũng giống thực tế ngoài đời, khi bạn bao cái gì đó bên ngoài cái hộp, cái hộp đó sẽ tăng kích thước

Giá trị kích thước gia tăng bạn tính được rất dễ dàng, chẳng hạn thẻ div bạn để viền là 3px thì chiều rộng của thẻ đó sẽ tăng 6px, chiều cao cũng vậy. Sỡ dĩ chiều rộng tăng 6px vì mỗi bên trái và phải bạn đã thêm 3px cho viền – giải thích vừa nói cũng áp dụng cho chiều cao.

Điều này sẽ ảnh hưởng một chút đến thiết kế, chẳng hạn nếu bạn để cái hộp có chiều ngang 140px và để viền 2px, chiều rộng sẽ tăng 4px và làm cái hộp dư ra bên ngoài. Để chình lại bạn phải để hộp có chiều rộng là 140px – 4px = 136px để nó khớp đúng với thiết kế ban đầu.

HTML không có margin và padding:

Hai thuộc tính CSS đơn giản nhưng ảnh hưởng rất mạnh đến thẩm mỹ của trang là margin và padding. Nó quan trọng bởi vì bạn sẽ không thể tìm thấy bất kỳ trang web nào mà lại không có lề, không có đệm.Dưới đây là ví dụ về một đoạn HTML không có margin và padding:

Bạn có thể thấy bức ảnh và văn bản minh họa không hề có khoảng cách nào, thêm vào đó cái hộp có viền màu xám và nội dung bên trong nó cũng không hề có khoảng đệm. Và rõ ràng nếu nó được sắp xếp như bên dưới thì sẽ dễ coi hơn rất nhiều:

Chúng ta chỉ thêm vào những khoảng trống giữa các nội dung ngoài ra không thêm gì khác – nhưng khác biệt thật là lớn.

Dòng code tôi thêm vào rất đơn giản:

• padding: 7px

• margin: 10px

Margin là khoảng cách giữa thẻ đó và các thẻ bên cạnh khác, còn padding là khoảng cách từ nội dung của chính thẻ đó và đường viền của nó. Do vậy để tạo khoảng cách cho phần văn bản với bức ảnh, tôi viết:

img {margin-right:10px}

Tức là tôi báo với trình duyệt để lề bên phải của bức ảnh là 10px.

Còn với hộp có viền màu xám, vì ảnh và nội dung nằm trong hộp đó nên chúng ta dùng padding để làm khoảng đệm, câu lệnh cụ thể là:

div {padding:7px}

Dòng lệnh trên thông báo với trình duyệt rằng, hãy để nội dung trong hộp cách đường viền 7px.

Bốn phía của lề và khoảng đệm

Lề và khoảng đệm đều có 4 phía, khi chúng ta khai báo margin hoặc padding mà không có từ khóa nào thêm vào thì mặc định lề và khoảng đệm sẽ áp dụng cho cả 4 phía là trên, phải, dưới và trái. Ví dụ padding: 7px thì có nghĩa là khoảng đệm sẽ là 7px ở cả 4 phía.

Khi chúng ta thêm một từ khóa bao gồm: top, right, bottom, left (trên, phải, dưới, trái) nó sẽ được chỉ thị cụ thể lề hoặc khoảng đệm phía nào có khoảng cách là bao nhiêu. Chính trong ví dụ trên ta đã sử dụng margin-right để chỉ thị lề bên phải. Giờ nếu tôi muốn chỉ thị khoảng đệm ở phía dưới là 9px chẳng hạn, tôi sẽ phải dùng lệnh padding-bottom: 9px; Cụ thể, tôi liệt kê đầy đủ tên và tác dụng của từng lệnh:

• margin-top: lề bên trên

• padding-top: đệm bên trên

• margin-right: lề bên phải

• padding-right: đệm bên phải

• margin-bottom: lề bên dưới

• padding-bottom: đệm bên dưới

• margin-left: lề bên trái

• padding-left: đệm bên trái

Viết tắt khi sử dụng margin và padding

Nếu bạn muốn quy định lề trên 7px, lề phải 6px, lề dưới 8px, lề trái 9px của ảnh thì một cách đầy đủ nhưng dài dòng bạn sẽ phải viết như thế này:

• img {margin-top:7px;

• margin-right:6px;

• margin-bottom:8px;

• margin-left:9px;}

Nhưng CSS cho phép chúng ta viết tắt lại rất đơn giản mà vẫn cho kết quả tương đương:

img {margin: 7px 6px 8px 9px;}

Rõ ràng là ngắn hơn rất nhiều, nhưng chúng ta cần phải nhớ là không có dấu chấm phẩy nào giữa các giá trị – ngoài ra một điều rất quan trọng là theo thứ tự mặc định nó sẽ lấy giá trị đầu tiên áp dụng cho top, giá trị thứ hai cho right, thứ ba cho bottom và cuối cùng cho left. Để dễ nhớ bạn hãy nghĩ đến cách di chuyển của kim đồng hồ bắt đầu từ vị trí số 12.

Nếu bạn chỉ viết:

{margin: 12px 10px}

Thì bạn đang thiết lập cho top là 12px và right là 10px, các phần còn lại bị thiếu là bottom và left sẽ như nào? Nó không phải là 0px mà sẽ lấy đối xứng là giá trị, đối xứng với top là bottom, đối xứng với right là left. do vậy bottom có giá trị 12px, left là 10px.

Nói một cách khác thay vì viết:

{margin: 12px 10px 12px 10px}

Bạn chỉ phải viết:

{margin: 12px 10px}

Vấn đề gia tăng kích thước thẻ div khi sử dụng padding

Mô hình hộp trong CSS

Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin).

Sở dĩ bình thường bạn chẳng thấy cái hộp nào là bởi theo mặc định các giá trị trên được quy định là 0. Chỉ khi bạn gán một giá trị cụ thể cho nó, các đối tượng này mới hiện nguyên dạng.

Một điều cần chú ý trong mô hình hộp đó là kích thước của hộp sẽ thay đổi khi bạn gán các giá trị cho thuộc tính lề, đệm và viền, cụ thể:

• Chiều rộng hộp = chiều rộng  + padding trái + padding phải +  border trái + border phải + margin trái + margin phải

• Chiều cao hộp = chiều cao + padding trên + padding dưới +  border trên + border dưới + margin trên + margin dưới

Ví dụ một div được mô tả như sau:

div {

width:200px;

height: 100px; padding:10px; border:5px solid red; margin:20px;

}

 

Bạn đừng lầm tưởng div có chiều rộng là 200px và chiều cao là 100px, đấy thực tế chỉ là không gian của nội dung, còn không gian của cả div có kích thước lớn hơn, cụ thể:

• chiều rộng = 200 + 10*2 + 5*2 + 20*2 = 270px

• chiều cao = 100 + 10*2 + 5*2 + 20*2 = 170px

Vấn đề nhầm lẫn kích thước rất hay xảy ra với padding, vì bạn nghĩ khi thêm padding kích thước sẽ không tăng lên.

  

Ngoài padding, một thuộc tính khác cũng làm gia tăng kích thước của thẻ div, đó là đường viền border.

Hướng dẫn tạo 1 button đẹp mắt sử dụng CSS. Hướng dẫn :

a> viết lệnh button

b>chỉnh sửa button , tạo nên đường viền độ góc, trong đó :

+ background color : chỉnh sửa màu sắc

+ boder width : kích cỡ nền

+ font-size:kích thước chữ bên trong

+ color: màu sắc

+ margin :căn chỉnh button ở chỗ bạn muốn

+ border: chỉnh sửa đường viền

code

khi chạy sẽ được

The end.

Share this:

• Twitter
• Facebook

Like Loading...