Trong bài viết 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;
}
5Làm thế nào để chỉ định Màu sắc trong CSSCá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 bao 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 để xem 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 CSSChúng ta hãy thử viết một đoạn mã 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 sắc mà bạn yêu thích. Mình chắc chắn không có khiếu nại với những thứ liên quan đến thiết kế, nên sẽ tạm thời sử dụng 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>
2Bán phát triển @thinhtranhnvn Theo dõi 3. 9K 184 208 Đã đăng vào ngày 3 tháng 6 năm 2022 7. 18 SA 7 phút đọc 432 0 0 [CSS] Bài 3 - Màu sắc và Kích thước- Report
- Add to series of me
Trong bài viết 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;
}
5Làm thế nào để chỉ định Màu sắc trong CSSCá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 bao 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 để xem 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 CSSChúng ta hãy thử viết một đoạn mã 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 sắc mà bạn yêu thích. Mình chắc chắn không có khiếu nại với những thứ liên quan đến thiết kế, nên sẽ tạm thời sử dụng 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![bảng màu]() body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
8body {
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 mã CSSChỉ định màu sắc sử dụng các giá trị HEXNgoài ra thì việc chỉ định màu sắc trong CSS 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 mã CSS nhưng lại có độ chính xác và mức độ linh hoạt 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à cách 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>
9Có rất nhiều công cụ trực tuyến có thể giúp chúng ta trích xuất 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 nhiệm vụ đó Đây là cách mà chúng ta nói body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
70 khi sử dụng giá trị HEX. body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
71Do các giá trị HEX có độ chính xác cao và rất linh hoạt, chúng ta còn có thêm những lựa chọn khác để nói body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
70. 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 đỏ giảm sáng hơn thì chúng ta có thể nói body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
73<!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: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
7Xin 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 là 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 tại 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 nhau. Những phương thức này cũng đã được hỗ trợ bởi tất cả 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 hoạt nhất để chỉ định màu sắc trong CSS - sử dụng
body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
76 - Phương thức đẹp nhất để chỉ định màu sắc trong CSS - sử dụng
body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
77
Như vậy là chúng ta đã biết về các giá trị duy nhất của body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
4 trong CSS. Hãy cùng nói về các biến phổ biến kiểu giá trị tiếp theo - các giá trị chỉ body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
5Làm thế nào để chỉ định độ dài trong CSS?Trong những bài viết trước, chúng tôi chỉ định giá trị độ dài cho đơn vị body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
90 - hay còn được gọi là body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
91 - để sử dụng với thuộc tính body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
92. Đó 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ỉ độ dài body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
9body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
3Chỉ định độ dài bằng các giá trị linh hoạtTrong ví dụ ở trên, nếu 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 định sẵn; . Các giá trị linh động sẽ giúp chúng ta tạo ra các khối này có khả năng hiển thị đáp ứng tốt hơn so với các thiết bị của người sử dụng Hãy thay đổi đoạn mã 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ị body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
93 cho 2 khối màu cuối cùng thay vì body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
94body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
6Bài viết về các giá trị duy nhất của 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 body {
background-color: RoyalBlue;
}
h1 {
text-align: center;
color: Snow;
}
97 | 
