Chỉnh màu chữ trong CSS

Định dạng màu sắc và văn bản là một trong những thuộc tính được sử dụng nhiều nhất trong CSS. Nắm vững kiến thức về màu sắc và cách phối màu sẽ giúp cho trang web của chúng ta trở nên đồng bộ và đẹp hơn rất nhiều.

 Các hệ màu trong CSS

CSS sử dụng các hệ màu sau:

• RGB: là hệ màu với 3 channel Reg, Green, Blue
• RGBA: là hệ màu với 4 channel Reg, Green, Blue và Alpha
• HEXA Decimal: là hệ màu sử dụng hệ số thập lục phân
• HSL: là hệ màu với 3 channel Hue, Saturation, Lightness
• HSLA: là hệ màu với 4 channel Hue, Saturation, Lightness vaf Alpha

Trong đó channel Alpha là channel giúp cho màu sắc trở nên trong suốt hơn (có thể nhìn thấy được phần tử bên dưới). Channel alpha có giá trị từ 0 - 1

Các thuộc tính định dạng màu sắc trong CSS

background-color: được sử dụng để chỉ định màu nền cho một phần tử HTML
Ví dụ: Chỉ định màu nền cho phần tử có id="sidebar"

#sidebar {background-color:red}

background-image: được sử dụng để chỉ định 1 ảnh làm ảnh nền

Ví dụ: Chỉ định ảnh nền cho toàn bộ trang web

body {
background-image: url("paper.gif");
}

background-repeat: lặp lại ảnh nền phủ kín vùng chứa với các giá trị

• repeat-x: Chỉ lặp lại ảnh theo phương ngang.
• repeat-y: Chỉ lặp lại ảnh theo phương dọc.
• repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
• no-repeat: Không lặp lại ảnh.

background-attachment: cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính background attachment có các giá trị sau:

• scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
• fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

background-position: chỉ định ví trí đặt ảnh nền. Thuộc tính background-position có các giá trị sau

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

Ví dụ: background-position:bottom left sẽ định vị ảnh nền ở góc phía dưới bên trái

•  x% y%

Ví dụ: background-position:20% 30% sẽ định vị ảnh nền 20% từ trái qua và 30% từ trên xuống.

•  xpos ypos

Ví dụ: background-position:5px 2px sẽ định vị ảnh nền 5px từ trái qua và 2px từ trên xuống.

background: là thuộc tính giúp rút gọn các thuộc tính background trong một khai báo duy nhất.

Cú pháp:
background: | | | |
Ví dụ: Với các thuộc tính sau:

background-color:blue;
background-image: url(logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

Chúng ta có thể viết gọn lại thành

background: blue url(logo.png) no-repeat fixed left top;

Định dạng văn bản

font-family: định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một phẩn tử trên trang web (đối với tên font có nhiều hơn một từ phải được đặt trong dấu “”)

Thuộc tính color dùng để thiết lập màu chữ trong CSS. giá trị màu có thể nhận là tên các màu quy định trước mà trình duyệt có thể hiểu như red, blue, green ... hoặc mã hex của màu, hoặc tự trọn màu bằng hàm RGB.

Nội dung chính Show

Ví dụ: Lớp CSS có tên mycolor nó thiết lập màu chữ là xanh lá (green).

Đoạn text này có màu do lớp myclor thiết lập.
   

Kết quả:

Đoạn text này có màu do lớp myclor thiết lập.

Thiết lậpmã màu Hex cho thuộc tính color

Cách thứ hai là gán giá trị màu dạng hex (bắt đầu bởi # và có có các số dạng hex phía sau - cặp 3 số tương ứng với màu Red - Green - Blue (RGB) được phai trộn để tạo màu). Xem màu sắc html để biết về mã màu dạng hex trong HTML, CSS và chọn màu hex tuỳ ý.

Ví dụ màu green (xanh lá) nếu viết dạng hex thì là #008000, bạn có thể gán giá trị này cho thuộc tính color

.mycolor {
    color: #008000; /* tương đương giá trị theo tên green */
}

Gán mã màu RGB cho thuộc tính color

Trong CSS có cung cấp sẵn hàm rgb(red, green, blue) để pha trộn ba màu cơ bản thành màu mới. Bạn có thể thiết lập thuộc tính color nhận giá trị của hàm này. Ví dụ trộn ba màu đỏ cường độ 0 (thấp nhất - không có màu đỏ), green cường độ 255 (cao nhất), không màu blue (0) thì viết rgb(0,255,0), kết quả chính là màu green.

.mycolor {
    color: rgb(0,255,0); /* tương đương giá trị theo tên green */
}

Trong CSS còn có hàm rgba(r,g,b,a) sử dụng giống rgb, nhưng nó có thêm tham số a (alpha) để cho biết độ mờ (trong suốt) của, a nhận giá trị 0 - 1 với 0 là hoàn toàn trong suốt.

Tên màu và mã màu HTML, CSS

Bảng sau là các tên màu định nghĩa sẵn trong CSS và mã màu Hex kèm theo. Tùy bạn khi sử dụng, dùng tên hay dùng giá trị hex đều có kết quả như nhau