Nội dung bài viết
Giới thiệu nội dung bài viết
Trong quá trình lập trình web CSS, làm việc với các trang website. Để các trang web có những hiệu ứng màu sắc đẹp, gây bắt mắt với người dùng. Ngôn ngữ lập trình web CSS cho phép người dùng sử dụng thuộc tính màu sắc [color] để thực hiện được điều này.
Trong phạm vi bài viết này, anh sẽ trình bày về 3
mã màu gồm Hex Code, Short Hex Code và RGB. Và hướng dẫn cách sử dụng mỗi mã màu sắc trong lập trình web CSS, làm sao để lấy được màu sắc như mong muốn cho trang web. Ngoài 3 mã màu trên, thì chúng ta cũng có thể tự xây dựng màu với 216 mã màu có thể sử dụng cho cả CSS và HTML.
Bên cạnh việc sử dụng thuộc tính màu sắc để giúp trang web thêm thu hút, hấp dẫn. Các lập trình viên cũng có thể thêm các icon vào website. Trong những chia sẻ dưới đây, anh cũng sẽ hướng dẫn các bạn
cách để nhúng icon vào website như cách sử dụng thư viện font awesome icon, bootstrap icon hoặc google icon.
Với những chia sẻ kèm các ví dụ minh hoạ hướng dẫn cụ thể bên dưới sẽ giúp các bạn áp dụng được thuộc tính màu sắc vào lập trình web CSS một cách hiệu quả nhất.
1. Màu sắc-Hex Code
Hex Code gồm 6 chữ số để tạo ra một màu. 2 chữ số đầu tiên là tạo ra màu đỏ, 2 chữ số tiếp theo là màu xanh lá và 2 chữ số tiếp theo là màu xanh.
2. Màu sắc-Short Hex Code
Là phiên bản ngắn gọn của Hex Code nó chỉ gồm 6 chữ số như sau
3. Màu sắc- RGB
Tạo ra màu sắc bằng cách sử dụng rgb[]. RGB có 3 giá trị mỗi giá trị tượng trưng cho một màu là đỏ, xanh lá và xanh. Các giá trị này là các con số từ 0 đến 255
4. Tự xây dựng màu
Ngoài những màu sắc trên chúng ta có thể sử dụng 216 các mã màu sắc dưới đây trong css hoặc html
5. Nhúng icon vào website
Chúng ta có nhiều cách để nhúng icon vào một website chúng ta có thể sử dụng thư viện font awesome icon, bootstrap icon hoặc google icon
- Để sử dụng font awesome icon, chúng ta vào trang web fontawesome.com sau đó copy class của icon mà ta muốn dùng. Trong ví dụ dưới đây mình sử dụng các icon mạng xã hội vào
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Font Awesome Icons
Some Font Awesome icons:
Styled Font Awesome icons [size and color]:
- Chúng ta cũng có thể sử dụng Bootstrap Icon như sau. Để sử dụng được Bootstrap Icon ta phải thêm dòng sau vào website
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Bootstrap Icons
Some Bootstrap icons:
Styled Bootstrap icons [size and color]:
- Sử dụng google icon thì ta thêm đoạn mã sau vào head của HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Google Icons
Some Google icons:
cloud
favorite
attachment
computer
traffic
Styled Google icons [size and color]:
cloud
cloud
cloud
cloud
6. Video Demo
7. Thực hành online và source code