** Các yếu tố tạo thành border của phần tử HTML**

* Đường viền của một phần tử HTML được tạo thành bởi 3 yếu tố sau đây:

+ Màu sắc
+ Độ dày đường viền
+ Loại nét vẽ đường viền (liền, gạch đứt, …)

*Thuộc tính border-color của CSS

+ Chỉ định màu của đường viền
+ Giá trị của thuộc tính này có thể là một từ (tiếng anh) chỉ định màu hoặc mã màu
+ Ví dụ: border-color:blue; HOẶC border-color:#666666;

* Thuộc tính border-width của CSS

+ Chỉ định độ dày của đường viền
+ Giá trị của thuộc tính này là một giá trị tính theo đơn vị px, pt, cm, em, … phổ biến nên dùng px. Từ từ các bạn sẽ được học chi tiết về đơn vị đo.
+ Ví dụ:border-width:1px;

* Thuộc tính border-style của CSS

+ Chỉ định loại nét vẽ của đường viền
+ Giá trị của thuộc tính này là một trong danh sách sau: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.
+ Trong đó, 3 giá trị in đậm trên dùng phổ biến nhất (dotted là đứt khúc, solid là đường bình thường, none là không có viền). Chú ý có sự khác nhau giữa none và hidden, none là KHÔNG có viền còn hidden là có nhưng ẩn đi.
+ Ví dụ:border-style:solid;

* Thuộc tính border của CSS (shorthand)

+ Là thuộc tính viết tắt trong việc chỉ định đường viền. Do 3 giá trị tương ứng màu sắc, loại nét vẽ và độ dày có định dạng hoàn toàn không trùng nhau nên chỉ cần liệt kê ra thành giá trị của thuộc tính border đơn lẻ cho nhanh.
+ Ví dụ: border : solid #524521 2px;

* Sự chia nhỏ đường viền theo cạnh

+ Do nhu cầu thực tế khi thiết kế thì đường viền ở 4 cạnh của khối của thể khác nhau (cạnh trái, trên, phải, dưới). Do đó, chúng ta có thể tách riêng định dạng của 1 cạnh tương ứng với vị trí của chúng như sau:
+ border-left-color dùng để chỉ định màu cho đường viền cạnh trái.
+ border-top-style dùng để chỉ định loại nét vẽ cho đường viền cạnh trên
+ border-right là lối viết tắt dùng để chỉ ra các giá trị cho đường viền cạnh phải.
+ border-bottom là lối viết tắt cho đường viền cạnh dưới

* Định nghĩa về khoảng cách:



* Đường giới hạn:



* Phân biệt biên trong và biên ngoài:

* Thuộc tính color

+ Dùng để chỉ định màu của văn bản
+ Giá trị là một mã màu hoặc tên màu
+ VÍ DỤ: color:red; hoặc color:#333333;

* Thuộc tính text-align

+ Dùng để chỉ định hướng canh lề văn bản
+ Giá trị bao gồm:
- left : canh trái
- right : canh phải
- center : canh giữa
- Justify : canh đều
+ VÍ DỤ: text-align:center;

* Thuộc tính text-decoration

+ Dùng để tạo ra một lần gạch cho văn bản (gạch chân, gạch hủy, /(gạch đầu))
+ Giá trị bao gồm:
- overline : gạch đầu text
- line-through : gạch giữa text (gạch hủy)
- underline : gạch chân
- none : không có gạch
+ VÍ DỤ: text-decoration:underline;

* Thuộc tính text-transform

+ Dùng để chỉ định cách viết chữ của văn bản (HOA, thường, Hoa Đầu Chữ)
+ Giá trị bao gồm:
- uppercase : toàn bộ viết HOA
- lowercase : toàn bộ viết thường
- capitalize : Viết Hoa Chữ Cái Đầu
+ VÍ DỤ: text-transform:uppercase;

* Thuộc tính text-indent

+ Chỉ định khoảng cách sẽ thụt đầu hàng của đoạn văn
+ Giá trị là một đơn vị đo (px, em, % …)
+ VÍ DỤ: text-indent:50px; ---> đầu đoạn văn sẽ thụt đầu dòng vào 50px
* Thuộc tính letter-spacing
+ Chỉ định khoảng cách giữa 2 chữ cái trong từ
+ Giá trị là một đơn vị đo (px, em, % …)
+ VÍ DỤ: letter-spacing:5px; C Á C C H Ữ C Á I C Á C H R A 5 P X

* Thuộc tính line-height

+ Chỉ định độ cao của 1 line trong đoạn văn. Độ cao mặc định thường do size của văn bản quyết định nếu không chỉ định cụ thể.
+ Giá trị là một đơn vị đo (px, em, % …)
+ VÍ DỤ: line-height:30px; mỗi line trong đoạn văn cao 30px
* Thuộc tính word-spacing
+ Dùng để chỉ định khoảng cách của 2 từ liền kề nhau trong văn bản.
+ Giá trị là một đơn vị đo (px, em, % …)
+ VÍ DỤ: word-spacing:10px; Các từ sẽ cách ra 10px

* Thuộc tính border-image của CSS

+ Đây là shorthand của một nhóm các CSS dùng để chỉ định hình ảnh làm đường viền cho phần tử HTML. Cấu trúc giá trị khai báo như sau:
+ border-image: source slice width outset repeat

+ border-image-source : đường dẫn hình ảnh

+ border-image-slide : (đơn vị đo)

+ border-image-width : độ rộng đường viền (đơn vị đo)

+ border-image-outset : độ tràn ra ngoài đường viền (bên ngoài) (đơn vị đo)

+ border-image-repeat : stretch, repeat, round, space


* Thuộc tính background-blend-mode của CSS

+ Đây là thuộc tính css tác động lên ảnh nền, dùng để chỉ định chế độ hòa trộn màu của hình ảnh (blending mode)
+ multiply : chế độ này sẽ ẩn các phần màu sáng
+ screen : chế độ này sẽ ẩn các phần màu tối
+ overlay : chế độ tác động mạnh lên màu sắc
+ Và rất nhiều: darken, lighten, color-dodge, saturation, color, luminosity
* Tạo màu nền hòa trộn màu (gradients) – Phần 1
+ Chúng ta không sử dụng thuộc tính mới mà dùng thuộc tính background shorthand kết hợp hàm trộn màu.

+ background: linear-gradient(hướng, màu 1, màu 2, …) background : linear-gradient(to right, red, green, #ccc); background : linear-gradient(to bottom right, red, green);

+ background: repeating-linear-gradient(hướng, màu 1, màu 2, …) background : repeating-linear-gradient(45deg, red, green); background : repeating-linear-gradient(red, green);