Màu biểu tượng html5

hôm nay mình xin giới thiệu về màu sắc (color) trong CSS, nó cũng là một phần hết sức quan trọng đối với một trang web vì nó tạo cho trang web của mình trở nên sinh động và cuốn hút hơn

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Các bạn có thể thiết lập màu cho màu nền (nền) hay màu cho đường viền (viền) hay màu cho chữ (văn bản) hay màu cho đường khung của bảng (bảng)

Vì sao để sử dụng màu trong CSS như thế nào? . Mời các bạn xem tiếp nội dung sau đây

1. Sử dụng màu sắc trong CSS như thế nào.  

Để sử dụng màu trong CSS, chúng ta có thể sử dụng tên màu (tên màu) hoặc giá trị RGB, Hex, HSL, RGBA, HSLA. Mình sẽ đi qua chi tiết từng cái một

Bài viết này đã được đăng tại [free tuts. net]

Tên màu

Tên màu nghĩa là mình dùng tên màu để làm giá trị

Cú pháp CSS

selector {
     thuộc tính: color name;
}

Mình xin lấy một ví dụ về việc sử dụng tên màu trong CSS như sau

Ví dụ RUN

h1 {
    background-color: yellow;
    color: red;
    border: 1px solid blue;
}

Như vậy là mình có thể sử dụng màu trong CSS bằng cách xác định đúng tên màu của nó như vàng, đỏ, xanh lục. Cái này yêu cầu các bạn phải biết màu sắc trong tiếng anh nha. ) Mình có thể viết chữ hoa như VÀNG, ĐỎ, XANH đều được, tuy nhiên mình không nên viết hoa mà nên viết bằng chữ thường nha

Các bạn có thể tham khảo một số tên màu sau (hình trích dẫn từ w3school)

RGB

RGB nghĩa là mình sử dụng bộ ba giá trị đó là đỏ (đỏ), xanh lá cây (xanh lá cây), xanh da trời (xanh dương) để xác định một màu nào đó. Mỗi tham số rgb(red, green, blue) sẽ có giá trị là số nguyên đi từ 0 đến 255. Mỗi lần tăng hoặc giảm một trong 3 giá trị đó sẽ có màu khác nhau.  

Một số tham số đặc biệt như

• rgb(255,0,0) = đỏ
• rgb(0,255,0) = xanh lục
• rgb(0,0,255) = màu xanh
• rgb(0,0,0) = đen
• rgb(255,255,255) = trắng

Cú pháp CSS

selector {
        thuộc tính: rgb(red, green, blue);
}

Mình xin lấy ví dụ về việc sử dụng RGB trong CSS như sau

Ví dụ RUN

h1 {
    background-color: rgb(23, 123, 213);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(1, 1, 1);
}

lục giác

Hex có nghĩa là sử dụng bộ giá trị

h1 {
    background-color: yellow;
    color: red;
    border: 1px solid blue;
}

2 để xác định một màu nào đó. Trong đó RR (đỏ), GG (xanh lục), BB (xanh dương) có giá trị trong hệ cơ số 16 từ 00 đến FF. Còn hệ số 16 là gì thì các bạn search trên google sẽ hiểu nha

Tương tự như RGB, Hex cũng có một số bộ đặc biệt như

• #ff0000 = đỏ
• #00ff00 = màu xanh lục
• #0000ff = màu xanh lam
• #000000 = đen
• #ffffff = trắng

Cú pháp CSS

selector {
         thuộc tính: #RRGGBB;
}

Ví dụ RUN

h1 {
    background-color: #09aaff;
    color: #ffffff;
    border: 1px solid #000000;
}

HSL

HSL có nghĩa là sử dụng bộ giá trị hsl (màu sắc, độ bão hòa, độ sáng) để xác định một màu nào đó, còn hsl (màu sắc, độ bão hòa, độ sáng) thì có nghĩa là gì thì các bạn tra google dịch nha. )

in which

• Huế. has value from 0 to 360
• bão hòa. has value from 0% to 100%
• Lightness has value from 0% to 100%

Cú pháp CSS

Selector {
      thuộc tính: hsl(hue, saturation, lightness);
}

Ví dụ RUN

________số 8_______

RGBA

RGBA đây là phạm vi mở rộng của RGB, chẳng qua nó còn có thêm một thuộc tính nữa, đó là một bản tắt của điện tử Alpha biểu thị cho độ mờ (độ mờ) của màu sắc

Alpha will have the value from 0. 0 đến 1. 0. Trong đó 0. 0 thì sẽ trong suốt 100%, 1. 0 thì màu vẫn nguyên phiên bản gốc không có gì hết. . )

Cú pháp CSS

Selector {
     thuộc tính: rgba(red, green, blue, alpha);
}

ví dụ CHẠY

h1 {
    background-color: rgba(23, 123, 213, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(1, 1, 1, 0.3);
}

HSLA

HSLA cũng là sự mở rộng của HSL, và nó có thêm thuộc tính alpha. Ý nghĩa và giá trị của alpha trong HSLA cũng giống như alpha trong RGBA

Cú pháp CSS

h1 {
    background-color: yellow;
    color: red;
    border: 1px solid blue;
}

0

Ví dụ RUN

h1 {
    background-color: yellow;
    color: red;
    border: 1px solid blue;
}

1

2. Cách lấy mã màu của một hình ảnh như thế nào

Ở phần này mình sẽ giới thiệu cho các bạn lấy mã màu của ảnh nào đó. Trên mạng cũng có rất nhiều trang web lấy mã màu trực tuyến, cũng như rất nhiều tool hỗ trợ mình phần này

Tuy nhiên ở bài viết này mình sẽ giới thiệu cho các bạn tool Pluin của chrome. đó là "ColorZilla"

Bước 1. Truy cập tiện ích mở rộng của tìm kiếm chrome ColorZilla. Will see as after

Bước 2. Nhấp vào nút Thêm vào Chrome sẽ xuất hiện biểu tượng hình cây bút ở góc trên cùng bên phải. Để sử dụng điều đó, bạn chỉ cần nhấn vào cây bút vào hình bạn muốn lấy mã màu

Lưu ý. ColorZilla only get image at on the browser.  

Vì thế chỉ cần bạn kéo hình ảnh của mình vào trình duyệt là có thể lấy được mã màu rồi. ) mình sẽ làm thử ví dụ cho các bạn xem

3. Lời kết

Vì vậy mình đã giới thiệu cho các bạn về màu sắc trong CSS và cũng hướng dẫn tool lấy màu từ ảnh

Cuối cùng trong quá trình viết không tránh khỏi sai sót, nên nếu điểm nào không hợp lý mong nhận được lời góp ý chân thành của các bạn để bộ truyện của mình ngày một tốt hơn. Cảm ơn các bạn đã đọc bài viết và chúc các bạn học tốt