Khi bạn xây dựng các trang web, bạn luôn muốn tạo các bố cục độc đáo. Bạn muốn trang web của mình hấp dẫn người dùng và không gây chói mắt
Và để giúp làm điều đó, bạn có thể chọn màu nền và màu văn bản kết hợp tốt và bổ sung cho nhau
Theo mặc định, bạn sẽ nhận thấy rằng trang web của bạn có màu nền trong suốt, bạn có thể thay đổi thành bất kỳ màu nào bạn muốn
Ví dụ: bạn có thể muốn tạo tính năng chế độ tối trên trang web của mình để nền có màu tối trong khi văn bản có màu sáng. Điều này giúp người đọc tránh được những màu sắc quá chói có thể ảnh hưởng đến mắt.
Trong bài viết này, bạn sẽ học cách thay đổi màu nền của trang web bằng HTML và CSS
Cách chúng tôi sử dụng để thay đổi màu nền
Trước đây, trước khi HTML5 ra đời, một số kiểu dáng cơ bản đã được xử lý bởi HTML
Ví dụ: khi bạn muốn thay đổi màu nền của trang, bạn có thể dễ dàng thêm thuộc tính
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Or
Tuy nhiên, thuộc tính này không được dùng nữa khi HTML5 được giới thiệu. Nó hiện được thay thế bằng một giải pháp thay thế tốt hơn, thuộc tính CSS
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Trong trường hợp bạn đang vội xem cách thay đổi màu nền của trang web, div và các yếu tố khác, thì đây là
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Giả sử bạn có thời gian rảnh rỗi. Hãy nhanh chóng bắt đầu
Cách thay đổi màu nền trong HTML
Bạn có thể sử dụng thuộc tính màu nền CSS để thay đổi màu của trang web của mình. Thuộc tính này hoạt động giống như mọi thuộc tính CSS khác, nghĩa là bạn có thể sử dụng nó để tạo kiểu cho trang của mình theo ba cách
- trong các thẻ HTML của bạn [kiểu dáng nội tuyến],
- trong thẻ kiểu trong thẻ đầu [kiểu bên trong],
- hoặc trong một tệp CSS chuyên dụng [kiểu dáng bên ngoài]
Tùy thuộc vào tùy chọn của bạn, bạn sẽ đặt thuộc tính
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Kiểm tra ví dụ sau trong CodePen
Xem Màu nền bút của Olawanle Joel [@olawanlejoel] trên CodePenCách thay đổi màu nền trong HTML bằng CSS nội tuyến
CSS nội tuyến cho phép bạn áp dụng các kiểu trực tiếp cho các thành phần HTML của mình. Điều này có nghĩa là bạn đang đặt trực tiếp CSS vào thẻ HTML. Bạn làm điều này với thuộc tính style, chứa tất cả các kiểu bạn muốn áp dụng cho thẻ HTML của mình
// ...
Bạn sẽ sử dụng thuộc tính màu nền CSS cùng với giá trị màu ưa thích của mình
// Color Name Value
// Hex Value
// RGB Value
// ...
// HSL Value
// ...
Cách thay đổi màu nền trong HTML bằng CSS bên trong/bên ngoài
Cách tốt nhất để tạo kiểu cho các trang web là tạo kiểu bên ngoài, nhưng bạn luôn có thể sử dụng kiểu bên trong khi bạn chỉ có một vài dòng kiểu
Cả bên trong và bên ngoài đều sử dụng cùng một cách tiếp cận. cả hai đều sử dụng bộ chọn để thêm kiểu dáng cho các phần tử HTML
Đối với kiểu nội bộ, tất cả các kiểu được thêm vào tệp HTML của bạn trong thẻ
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Đối với kiểu dáng bên ngoài, tất cả những gì bạn phải làm là thêm kiểu dáng CSS vào tệp CSS của mình bằng cú pháp chung
selector {
background-color: value;
}
Bộ chọn có thể là thẻ HTML của bạn hoặc có thể là một
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Hoặc bạn có thể sử dụng một
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Hoặc bạn có thể sử dụng một
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Ghi chú. Như bạn đã thấy trước đó, với CSS nội tuyến, bạn có thể sử dụng tên màu, mã Hex, giá trị RGB và giá trị HSL với cả kiểu dáng bên trong hoặc bên ngoài
kết thúc
Trong bài viết này, bạn đã học cách thay đổi màu nền của các phần tử HTML bằng cách sử dụng thuộc tính màu nền CSS. Bạn cũng đã biết cách các nhà phát triển đã làm điều đó trước khi giới thiệu HTML5 với thuộc tính
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Điều cần thiết phải nhớ là việc tạo kiểu cho các thành phần HTML của bạn bằng nội bộ hoặc bên ngoài luôn được ưu tiên hơn so với kiểu nội tuyến vì nó mang lại sự linh hoạt hơn. Ví dụ: thay vì thêm các kiểu nội tuyến tương tự vào tất cả các thành phần thẻ
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
// Using inline CSS
// ..
// Using internal/external CSS
selector {
background-color: value;
}
Kiểu nội tuyến không được coi là phương pháp hay nhất vì chúng dẫn đến nhiều lần lặp lại - bạn không thể sử dụng lại kiểu ở nơi khác. Để tìm hiểu thêm, bạn có thể đọc bài viết của tôi về Kiểu nội tuyến trong HTML. Bạn cũng có thể tìm hiểu cách thay đổi kích thước văn bản trong bài viết này và cách thay đổi màu văn bản trong bài viết này
Tôi hy vọng hướng dẫn này cung cấp cho bạn kiến thức để thay đổi màu sắc của văn bản HTML của bạn để làm cho nó trông đẹp hơn
Chúc các bạn code vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển Frontend & Người viết kỹ thuật
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu