Cách đặt màu nền bằng HTML và CSS – mã màu nền html

Tìm hiểu cách đặt màu nền nói chung, cách tạo gradient và thay đổi màu nền với các ví dụ.

Bạn đang xem : mã màu nền html

Điều đầu tiên bạn nên biết là có nhiều loại màu HTML khác nhau, chẳng hạn như Mã màu hex, tên màu HTML, giá trị RGB và RGBa, màu HSL, v.v. Để chọn màu ưa thích của bạn, hãy sử dụng Công cụ màu của chúng tôi.

Trong đoạn mã này, bạn có thể tìm thấy nhiều cách khác nhau để thêm màu nền. Hãy bắt đầu từ cái dễ nhất.

Thêm thuộc tính

style

vào & lt; body & gt; phần tử

Bạn có thể đặt màu nền cho tài liệu HTML bằng cách thêm style = “background-color:” vào phần tử & lt; body & gt; .

Ví dụ về cách đặt nền màu với thuộc tính

style

:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

style

=

" background-color: # 1c87c9; "

& gt;

& lt;

h1

& gt;

Một số tiêu đề

& lt; /

h1

& gt;

& lt;

p

& gt;

Một số đoạn văn chẳng hạn.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Một số tiêu đề

Một số đoạn văn chẳng hạn.

Thêm thuộc tính CSS background-color vào & lt; body & gt; phần tử

Thuộc tính background-color được sử dụng để thay đổi màu nền. Chèn nó vào phần tử & lt; body & gt; , bạn sẽ có trang bìa đủ màu.

Ví dụ về cách đặt màu nền bằng CSS thuộc tính background-color:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể thêm màu nền cho các phần tử cụ thể trong tài liệu của mình. Ví dụ: hãy xem cách thay đổi màu của tiêu đề và đoạn văn.

Ví dụ về cách thêm màu nền vào các phần tử cụ thể:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-color

:

# e6ebef

; }

h2

{

background-color

:

# 8ebf42

; }

p

{

background-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Một số tiêu đề có nền xanh lục.

& lt ; /

h2

& gt;

& lt;

p

& gt;

Một số đoạn có nền xanh lam.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Hãy xem một ví dụ khác, trong đó chúng tôi thêm màu nền với giá trị tên màu vào phần tử & lt; h1 & gt; . Chúng tôi chỉ định giá trị RGB cho & lt; h2 & gt ;, HSL cho & lt; p & gt; và giá trị RGBa cho phần tử & lt; span & gt; .

Ví dụ về cách đặt màu nền với các loại màu khác nhau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

h1

{

background-color

: lightblue; }

h2

{

background-color

:

rgb

(

142

,

191

,

66

); }

p

{

background-color

:

hsl

(

300

,

100%

,

25%

); }

span

{

background-color

:

rgba

(

255

,

127

,

80

,

0.58

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ

& lt; /

h1

& gt;

& lt;

h2

& gt;

Một số tiêu đề có nền xanh lục.

& lt ; /

h2

& gt;

& lt;

p

& gt;

Một số đoạn có nền xanh lam.

& lt ; /

p

& gt;

& lt;

span

& gt;

Một số đoạn cho

& lt; / < p class = "hljs-name"> span

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tạo nền với gradient

Hình nền Gradient cho phép bạn tạo ra sự chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.

Có hai loại nền gradient: linear-gradient radial-gradient .

Trong nền tuyến tính-gradient , bạn có thể đặt điểm bắt đầu cho các màu. Nếu bạn không đề cập đến điểm bắt đầu, nó sẽ tự động đặt “từ trên xuống” theo mặc định.

Ví dụ về thiết lập nền gradient tuyến tính:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

# grad

{

chiều cao

:

500px

;

background-color

: blue;

background-image

:

linear-gradient

(sang phải,

# 1c87c9

,

# 8ebf42

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền Gradient Tuyến tính Từ phải sang Trái

& lt ; /

h1

& gt;

& lt;

div

id

=

" grad "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ đã cho hiển thị một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu từ màu xanh lam, chuyển sang màu xanh lá cây. Thay đổi nó theo yêu cầu của bạn.

Trong nền gradient xuyên tâm , điểm bắt đầu được xác định bởi tâm của nó.

Ví dụ về cách đặt nền radial-gradient:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

# grad

{

height

:

500px

;

background-color

: màu xám;

background-image

:

radial-gradient

(

# e6ebef ,

# 1c87c9

,

# 8ebf42

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền chuyển màu xuyên tâm

& lt; / < p class = "hljs-name"> h1

& gt;

& lt;

div

id

=

" grad "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể điều chỉnh tỷ lệ phần trăm màu của mình như sau: (color1 30%, color2 50%, color3 20%).

Tạo nền thay đổi

Bạn có thể tạo một nền sẽ thay đổi màu sắc của nó trong thời gian đã đề cập. Để làm được điều đó, hãy thêm thuộc tính animation vào phần tử & lt; body & gt; . Sử dụng quy tắc @keyframes để đặt màu nền mà bạn sẽ chuyển qua cũng như khoảng thời gian mỗi màu sẽ xuất hiện trên trang.

Ví dụ về cách tạo nền thay đổi:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{ -webkit-

hoạt ảnh

: colorchange

20 giây

vô hạn;

hoạt ảnh

: colorchange

20 giây

vô hạn; }

@ - webkit-keyframes

colorchange {

0%

{

background

:

# 8ebf42

; }

25%

{

background

:

# e6ebef

; }

50%

{

background

:

# 1c87c9

; }

75%

{

background

:

# 095484

; }

100%

{

background

:

# d0e2bc

; } }

@ keyframes

colorchange {

0%

{

background

:

# 8ebf42

; }

25%

{

background

:

# e6ebef

; }

50%

{

background

:

# 1c87c9

; }

75%

{

background

:

# 095484

; }

100%

{

background

:

# d0e2bc

; } }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền thay đổi

& lt; /

h1

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tỷ lệ phần trăm chỉ định độ dài hoạt ảnh được đề cập trong “colorchange” (ví dụ: 20 giây).

Bạn có thể thay đổi thời gian và màu sắc để đạt được kết quả mong muốn.


Xem thêm những thông tin liên quan đến chủ đề mã màu nền html

How to Change HTML Background Color

  • Tác giả: Internet Services and Social Networks Tutorials from HowTech
  • Ngày đăng: 2013-04-22
  • Đánh giá: 4 ⭐ ( 4703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video tutorial we will teach you how to set background color in HTML.

    Don’t forget to check out our site http://howtech.tv/ for more free how-to videos!
    http://youtube.com/ithowtovids – our feed
    http://www.facebook.com/howtechtv – join us on facebook
    https://plus.google.com/103440382717658277879 – our group in Google+

    But before moving on to set the color, we must see how to define a color in HTML. HTML color codes are defined as 6 digit hexadecimal values, i.e A0082C, and create a spectrum of 16 million colors. These individual 16 million values can be found on the internet very easily.

    Follow this easy step by step tutorial to learn how to set background color of your HTML page, as well as change it to another color.

    Step 1 — Learning the old way

    Basically to set the background color in HTML there is a very simple way that most of HTML designers are normally familiar with and may still prefer. It is the attribute bgcolor in the ‘body’ element. The bgcolor attribute takes a color code value and changes the background of the HTML page to that color.

    Although this method is very easy and simple, setting background colors in HTML through the bgcolor attribute has been deprecated in HTML5 and is discouraged. But even so, all browsers still support this attribute. With rise of CSS, all styling is done through style sheets, including background colors.

    Step 2 — Style attribute

    CSS introduces a style attribute in all elements of HTML, including the body element. And like all other styling, background colors can also be declared in this attribute. The syntax follows that of external CSS files or internal CSS defined in the ‘head’ element.

    For setting background color in HTML, the background color tag in the style attribute takes the same hexadecimal color code as value as bgcolor did.

    The result of this method is a change in the background of the HTML page exactly like bgcolor resulted, but this unifies all types of styling to one attribute instead of multiple fragmented attributes. With more research and advancement in web technologies, fragmentation can turn out to be a big problem if not handled early, similar to this change in coloring background.

Thiết lập màu nền trong HTML

  • Tác giả: tusach.thuvienkhoahoc.com
  • Đánh giá: 4 ⭐ ( 9226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần “body” (thân) của thẻ

    . Các bước hướng dẫn sẽ thay

Code Màu mã màu HTML, CSS, RGB, CMYK Mới Nhất 2022

  • Tác giả: seotct.com
  • Đánh giá: 5 ⭐ ( 5343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng Hợp Code Màu mã màu HTML, CSS, RGB, CMYK Mới Nhất. Hi vọng bảng tổng hợp mã màu dưới đây sẽ giúp ích cho bạn trong quá trình làm việc và học tập.

Màu Chữ Và Màu Nền Trong Css

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 8046 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu một thuộc tính khá quan trọng và được sử dụng khá phổ biến trong website đó là màu chữ và màu nền, Vậy chúng ta phải làm thế nào để kiểm soát và sử dụng nó cho phù hợp? Bài này sẽ giúp bạn trả lời câu hỏi đó

Màu trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6916 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Cách để Thiết lập màu nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 6723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Thiết lập màu nền trong HTML

Thiết lập màu nền trong HTML

  • Tác giả: chongthamvietnam.vn
  • Đánh giá: 4 ⭐ ( 3249 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từ VLOS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hình ảnh HTML - html làm thế nào để đặt một hình ảnh