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àu nền để sử dụng trong 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 màu 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 màu 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 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 dưới” 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 cho thấy 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. 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. Vì vậy, 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àu nền để sử dụng trong html

Bài 9: Cách sử dụng màu sắc trong lập trình web HTML

  • Tác giả: Le Academy
  • Ngày đăng: 2020-11-24
  • Đánh giá: 4 ⭐ ( 2836 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng 3 cách để thêm màu sắc trong HTML gồm sử dụng tên bảng màu, sử dụng Hex Codes, Sử dụng RGB. Ngoài ra trong bài anh cũng sẽ trình bày cách đổi background của website và các bước để tự thêm màu sắc mong muốn vào website.

    Anh hi vọng với những hướng dẫn cách thực hiện trong video cùng với những kiến thức lí thuyết chia sẻ trong bài viết trên blog của anh (link bài viết bên dưới) sẽ giúp các bạn có thể áp dụng được kiến thức này vào thực hành.

    ► Xem thêm bài viết chi tiết tại: https://levunguyen.com/laptrinhweb/2021/01/09/su-dung-mau-sac-trong-html/
    hoclaptrinh laptrinhwebhtml mausactronghtml

    ► Subscribe kênh Youtube của Nguyên để nhận được video mới MIỄN PHÍ hằng tuần tại đây ngay nhé: https://bom.to/644ln9z9hS

    Channel Le Vu Nguyen Vlog là nơi chia sẻ những kiến thức chuyên môn về lập trình nhằm hỗ trợ cho quá trình học lập trình của các bạn. Với những chia sẻ về kiến thức lập trình từ cơ bản cho đến nâng cao được phân loại theo từng danh mục hi vọng sẽ giúp bạn từng bước chinh phục lĩnh vực này và có thể trở thành một lập trình viên chuyên nghiệp trong tương lai.

    ► Khám phá thêm các nguồn học lập trình miễn phí:
    Các khoá học lập trình online miễn phí tại: https://hoclaptrinhonline.asia
    Các bài viết chia sẻ về lĩnh vực lập trình tại: https://levunguyen.com
    Tham gia group Da Nang Agile Developer Community để hỏi-đáp về lĩnh vực lập trình: https://www.facebook.com/groups/danangagiledeveloper

    ĐỪNG NGẠI ĐỂ LẠI THẮC MẮC CỦA BẠN DƯỚI PHẦN BÌNH LUẬN, MÌNH SẼ CỐ GẮNG GIẢI ĐÁP SỚM NHẤT CHO CÁC BẠN.”

Thiết lập thẻ Background trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 4 ⭐ ( 2852 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập thẻ Background trong HTML. Theo mặc định, nền của trang web là màu trắng. Bạn có thể không thích màu này, và muốn thiết lập một màu khác cho trang của bạn.

Thiết lập background trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 4343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập background 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á: 3 ⭐ ( 8772 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

HTML Màu Sắc

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 8569 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu sắc trong HTML được biểu diễn theo hai cách khác nhau: Sử dụng màu theo tên: red, black, blue, orange… hoặc sử dụng màu theo giá trị kiểu RGB (red-green-blue), HEX hoặc HSL.

Thiết lập background trong HTML

  • Tác giả: camranh.khanhhoa.gov.vn
  • Đánh giá: 5 ⭐ ( 2847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: blank page

Thuộc tính color, màu trong HTML

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 1027 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thuoc tinh color trong html, Thuộc tính color, màu trong HTML

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  Câu lệnh if-else trong JavaScript - tại sao chúng ta sử dụng câu lệnh if else trong javascript

By ads_php