Cách Tạo đường Viền (border) Cho Một Phần Tử Trong CSS

• HTML
• CSS
• JAVASCRIPT
• JQUERY
• MYSQL
• PHP

CSS Bài 07: Cách tạo đường viền cho một phần tử HTML Cách tạo đường viền cho một phần tử HTML HAI BỐ CON NHÀ MÈO ĐANG ÔM NHAU NGỦ

1) Cách tạo đường viền cho một phần tử

- Thông thường thì "đường viền" của một phần tử sẽ có ba đặc điểm chính : kiểu, độ dày, màu sắc (ví dụ như đường viền của phần tử phía trên có kiểu là double, độ dày 20 pixel, màu xanh lá cây)

- Cho nên, khi muốn tạo đường viền cho một phần tử thì về cơ bản chúng ta cần phải thực hiện ba công việc như sau: (1) thiết lập kiểu đường viền cho phần tử, (2) thiết lập độ dày của đường viền, (3) xác định màu sắc của đường viền.

1.1) Thiết lập "kiểu đường viền" cho phần tử

- Để thiết lập kiểu đường viền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính border-style cho phần tử đó với cú pháp như sau:

border-style: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

none	- Không thiết lập đường viền cho phần tử.	Xem ví dụ
solid
dashed
dotted
double
groove
ridge
inset
outset
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính border-style có giá trị là none)
inherit	- Kế thừa giá trị thuộc tính border-style từ phần tử cha của nó.	Xem ví dụ

- Lưu ý: Khi tạo đường viền cho phần tử thì công việc xác định kiểu đường viền là quan trọng nhất, nếu ta không xác định kiểu đường viền hoặc thiết lập giá trị none thì đường viền sẽ không được hiển thị.

1.2) Thiết lập "độ dày" của đường viền

- Để thiết lập độ dày của đường viền thì chúng ta sử dụng thuộc tính border-width với cú pháp như sau:

border-width: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

thin	- Độ dày của đường viền sẽ tương đương với 1 pixel.	Xem ví dụ
medium	- Độ dày của đường viền sẽ tương đương với 3 pixel.
thick	- Độ dày của đường viền sẽ tương đương với 5 pixel.
length	- Chỉ định độ dày của đường viền dựa theo một giá trị pixel cụ thể. - Ví dụ: 17px tức là đường viền sẽ có độ dày 17 pixel.
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính border-width có giá trị là medium)
inherit	- Kế thừa giá trị thuộc tính border-width từ phần tử cha của nó.

1.3) Thiết lập "màu sắc" của đường viền

- Thông thường thì đường viền của phần tử sẽ có màu trùng với màu của văn bản, nếu muốn thiết lập lại màu của đường viền thì chúng ta sử dụng thuộc tính border-color với cú pháp như sau:

border-color: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:

color	- Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .)	Xem ví dụ
transparent	- Đường viền trong suốt (nó có tồn tại nhưng ta không thể nhìn thấy)
initial	- Sử dụng giá trị mặc định của nó.
inherit	- Kế thừa giá trị thuộc tính border-color từ phần tử cha của nó.

2) Thiết lập đường viền cho từng cạnh

- Sau khi tìm hiểu xong phần hướng dẫn phía trên thì chắc các bạn cũng đã thấy: khi chúng ta tạo đường viền cho một phần tử thì mặc định cả bốn cạnh của đường viền sẽ có chung một định dạng

- Tuy nhiên, không phải lúc nào người lập trình viên cũng muốn như thế, mà đôi khi họ muốn mỗi cạnh của đường viền có một định dạng khác nhau, và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:

• Cách 1: Thiết lập nhiều giá trị cho thuộc tính.
• Cách 2: Thêm tên cạnh vào bên trong tên thuộc tính.

- Trước khi tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên của từng cạnh:

topbottomleftright

2.1) Thiết lập nhiều giá trị cho thuộc tính

Cú pháp 1: border-style: value1 value2 value3 value4;

- Cạnh top của đường viền sẽ có kiểu value1.

- Cạnh right của đường viền sẽ có kiểu value2.

- Cạnh bottom của đường viền sẽ có kiểu value3.

- Cạnh left của đường viền sẽ có kiểu value4.

Xem ví dụ Cú pháp 2: border-style: value1 value2 value3;

- Cạnh top của đường viền sẽ có kiểu value1.

- Cạnh left & right của đường viền sẽ có kiểu value2.

- Cạnh bottom của đường viền sẽ có kiểu value3.

Xem ví dụ Cú pháp 3: border-style: value1 value2;

- Cạnh top & bottom của đường viền sẽ có kiểu value1.

- Cạnh left & right của đường viền sẽ có kiểu value2.

Xem ví dụ

2.2) Thêm tên cạnh vào bên trong tên thuộc tính

- Để thiết lập đường viền cho riêng từng cạnh bằng cách thêm tên cạnh vào bên trong tên thuộc tính thì chúng ta sử dụng cú pháp như sau:

border-têncạnh-style: value; Ví dụ: h1{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dashed; border-left-style:none; } Xem ví dụ

3) Tạo đường viền cho phần tử (cú pháp rút gọn)

- Trong phần hướng dẫn ở mục một, để tạo một cái đường viền cho phần tử thì chúng ta cần phải sử dụng đến ba thuộc tính: border-style border-width border-color. Trong phần này, tôi sẽ hướng dẫn các bạn rút gọn lại bằng cách sử dụng duy nhất mỗi thuộc tính border thôi.

- Cú pháp:

border: width style color;

- Trong đó:

• Giá trị width dùng để xác định độ dày của đường viền (giống thuộc tính border-width)
• Giá trị style dùng để xác định kiểu của đường viền (giống thuộc tính border-style)
• Giá trị color dùng để xác định màu sắc của đường viền (giống thuộc tính border-color)

Ví dụ: div{ border:5px dotted red; } Xem ví dụ

- Lưu ý: Thuộc tính border không bắt buộc chúng ta phải gán cho nó đủ ba giá trị, những giá trị nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính tương ứng.

Ví dụ: h1{ border:solid red; } Xem ví dụ

- Ngoài ra, nếu muốn thiết lập đường viền cho riêng từng cạnh thì các bạn hãy thêm -têncạnh vào phía sau thuộc tính border.

Ví dụ: h1{ border:5px solid red; border-top:10px dotted blue; border-bottom:3px dashed; } Xem ví dụ Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?