Html chỉnh xác để thêm màu nền la gì

Question

HEX là viết tắc của từ "hexadecimal".

Nội dung chính Show

Làm thế nào để chỉ định Màu Sắc trong CSS
Làm thế nào để chỉ định Màu Sắc trong CSS
Chỉ định màu sắc sử dụng các giá trị HEX
Làm thế nào để chỉ định độ dài trong CSS?
Chỉ định độ dài bằng các giá trị linh động

Cách viết: gồm dấu "#" kết hợp với dãy ký tự Latin, chỉ bao gồm số hoặc chữ (hệ thập lục phân), không phân biệt chữ hoa hay chữ thường.
Các ký tự Latin có thể chấp nhận là: a,b,c,d,e,f,A,B,C,D,E,F.
Ví dụ: #00ffff
Ta có thể viết gút gọn màu này theo các cách sau:
- Gút gọn 6 ký tự giống nhau thành 3 ký tự: #ffffff => #fff
- Gút gọn 3 cặp ký tự thành 3 ký tự: #ff0066 => #f06

Trong bài này, chúng ta sẽ cùng nói về 2 kiểu giá trị phổ biến trong CSS. Đó là các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 và các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

5.

Làm thế nào để chỉ định Màu Sắc trong CSS

Các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 được sử dụng với nhiều

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

7 khác nhau trong CSS - ví dụ như màu chữ, màu nền, màu viền của phần tử HTML, v.v... Cách

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

8 để chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 trong CSS đó là sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0. Bạn có thể dành thời gian để nhìn qua danh sách tên màu được CSS hỗ trợ ở đây: Danh sách các tên màu được hỗ trợ trong CSS.

Chúng ta hãy thử viết một chút code CSS sử dụng các

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0. Bạn có thể chọn sử dụng những màu mà bạn yêu thích. Mình không hẳn có khiếu lắm với những thứ liên quan đến thiết kế, nên sẽ dùng tạm một tấm hình để làm bảng màu.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

2

Semi Dev @thinhtranhnvn

Theo dõi

3.7K 180 186

Đã đăng vào thg 3 6, 7:18 SA 7 phút đọc

349

0

[CSS] Bài 3 - Màu Sắc & Kích Thước

Báo cáo
Thêm vào series của tôi

Trong bài này, chúng ta sẽ cùng nói về 2 kiểu giá trị phổ biến trong CSS. Đó là các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 và các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

5.

Làm thế nào để chỉ định Màu Sắc trong CSS

Các giá trị chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 được sử dụng với nhiều

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

7 khác nhau trong CSS - ví dụ như màu chữ, màu nền, màu viền của phần tử HTML, v.v... Cách

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

8 để chỉ định

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 trong CSS đó là sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0. Bạn có thể dành thời gian để nhìn qua danh sách tên màu được CSS hỗ trợ ở đây: Danh sách các tên màu được hỗ trợ trong CSS.

Chúng ta hãy thử viết một chút code CSS sử dụng các

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0. Bạn có thể chọn sử dụng những màu mà bạn yêu thích. Mình không hẳn có khiếu lắm với những thứ liên quan đến thiết kế, nên sẽ dùng tạm một tấm hình để làm bảng màu.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

2

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Snow White</title>
      <link rel="stylesheet" href="snowwhite.css">
   </head>
   <body>
      <h1>Hi. I'm Snow White.</h1>
   </body>
</html>

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

Trong ví dụ ở trên, có 2 màu được sử dụng đó là

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

3 (xanh hoàng gia) và

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

4 (bạch tuyết). Như bạn có thể thấy rằng cách viết CSS sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0 thực sự rất trực quan và dễ hiểu khi nhìn vào code CSS.

Chỉ định màu sắc sử dụng các giá trị HEX

Ngoài ra thì việc chỉ định màu sắc trong CSS cũng còn có thêm những lựa chọn khác nữa. Những lựa chọn này kém trực quan hơn khi nhìn vào code CSS nhưng lại có độ chính xác và mức độ linh động cao hơn.

Phương sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0 là cách làm

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

8, và bây giờ thì chúng ta đến với phương

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

8 - đó là sử dụng các

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

9.

Có rất nhiều công cụ online có thể giúp chúng ta nhặt ra một màu và mã HEX của màu đó như Adobe Color hay W3schools Picker. Bạn cũng có thể sử dụng trình chỉnh sửa ảnh yêu thích của mình để thực hiện tác vụ đó.

Đây là cách mà chúng ta nói

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

0 khi sử dụng giá trị HEX:

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

1.

Do các giá trị HEX có độ chính xác cao và rất linh động, chúng ta còn có thêm những lựa chọn khác để nói

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

0. Mã HEX vừa rồi là màu đỏ sáng nhất. Tuy nhiên nếu bạn muốn chọn màu đỏ bớt sáng hơn thì chúng ta có thể nói

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

3.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

Hãy giả định rằng chúng ta đang tạo ra một trang web để chia sẻ những kiến thức hữu ích. Và đâu đó vẫn có những người dùng sử dụng các thiết bị với trình duyệt web cũ mà bạn muốn hỗ trợ. Thật may mắn, phương thức sử dụng các giá trị HEX được hỗ trợ 100% bởi tất cả các trình duyệt web. Đó là lý do vì sao đây lại là phương thức phổ biến nhất để chỉ định màu sắc trong CSS.

Tuy nhiên, vẫn còn nhiều phương thức khác nữa mà chúng ta có thể lựa chọn trong những trường hợp sử dụng khác. Những phương thức này cũng đã được được hỗ trợ bởi tất các phiên bản trình duyệt web được cập nhật gần đây. Và dưới đây là một số liên kết tham khảo trong trường hợp bạn muốn tìm hiểu về chúng -

Phương thức đơn giản nhất để chỉ định màu sắc trong CSS - sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

0.

Phương thức phổ biến nhất để chỉ định màu sắc trong CSS - sử dụng

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Red Dwarf</title>
      <link rel="stylesheet" href="reddwarf.css">
   </head>
   <body>
      <h1>Hm. I'm a dwarf, the red one.</h1>
   </body>
</html>

9.

Phương thức linh động nhất nhất để chỉ định màu sắc trong CSS - sử dụng

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

6.

Phương thức đẹp nhất để chỉ định màu sắc trong CSS - sử dụng

body {
   background-color: #bb0000;
}

h1 {
   text-align: center;
   color: #ffffff;
}

7.

Như vậy là chúng ta đã biết về các giá trị chỉ

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 trong CSS. Hãy cùng nói về kiểu giá trị phổ biến tiếp theo - các giá trị chỉ

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

5.

Làm thế nào để chỉ định độ dài trong CSS?

Trong những bài viết trước, chúng ta đã chỉ định các giá trị độ dài với đơn vị

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

0 - hay còn được gọi là

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

1 - để sử dụng với thuộc tính

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

2. Đó là cách đơn giản nhất để chỉ định độ dài trong CSS - và được gọi là phương thức sử dụng các giá trị tĩnh.

Đây là một ví dụ khác về việc sử dụng các giá trị tĩnh để chỉ định độ dài.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

#sun {
   background-color: Red;
   width: 90px;
   height: 90px;
}

#air {
   height: 210px;
}

#earth {
   background-color: ForestGreen;
   width: 300px;
   height: 60px;
}

#water {
   background-color: Navy;
   width: 690px;
   height: 60px;
}

Chỉ định độ dài bằng các giá trị linh động

Trong ví dụ ở trên, nếu như chúng ta điều chỉnh lại kích thước của trình duyệt web, các khối màu sẽ giữ nguyên độ rộng đã được chỉ định; Và như vậy có nghĩa là kết quả hiển thị sẽ không đáp ứng với các kích thước màn hình khác nhau. Các giá trị linh động sẽ giúp chúng ta khiến cho các khối này có khả năng hiển thị đáp ứng tốt hơn với các thiết bị của người sử dụng.

Hãy thay đổi đoạn code CSS ở trên một chút và thay đổi kích thước của trình duyệt web mà bạn đang sử dụng để xem kết quả. Lần này chúng ta sẽ sử dụng đơn vị

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

3 cho 2 khối màu cuối cùng thay vì

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>

4.

#sun {
   background-color: Red;
   width: 90px;
   height: 90px;
}

#air {
   height: 210px;
}

#earth {
   background-color: ForestGreen;
   width: 38.2%;
   height: 60px;
}

#water {
   background-color: Navy;
   width: 100%;
   height: 60px;
}

Bài viết về các giá trị chỉ

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

4 và

body {
   background-color: RoyalBlue;
}

h1 {
   text-align: center;
   color: Snow;
}

5 trong CSS của chúng ta tới đây là kết thúc. Trong các bài viết tiếp theo, chúng ta sẽ cùng nói về việc trang trí các

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>The Fifth Dimension</title>
      <link rel="stylesheet" href="dimension.css">
   </head>
   <body>
      <div id="sun"></div>
      <div id="air"></div>
      <div id="earth"></div>
      <div id="water"></div>
   </body>
</html>