You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tô màu nền trong HTML bằng giá trị Background Color của thuộc tính Style

Tô màu nền trong HTML bằng giá trị Background Color của thuộc tính Style

Chúng ta đã biết tô màu chữ. Thế nên bây giờ chúng ta sẽ học tô màu nền trong HTML.

Xem thêm bài viết

Chúng ta đã biết đến cách để tô màu chữ trong HTML. Hôm nay mình sẽ hướng dẫn cho các bạn cách tô màu nền chữ. Lần trước mình cũng có đề cập là không có thẻ màu nền trong HTML. Thay vào đó là chúng ta sẽ sử dụng thuộc tính để tô màu nền cho chữ. Thuộc tính Style giúp bạn tô màu chữ rồi cả tô màu nền chữ, định dạng font,...Bạn có thể làm tất cả trong thuộc tính Style. Bạn có thấy thuộc tính này lợi hại không nào? Rất lợi hại.

Chúng ta sẽ cùng học cách để tô màu chữ với thuộc tính Style nhé!

Cú pháp sử dụng thuộc tính Style để tô màu nền chữ

<tên thẻ style= “background-color :…”>Content</tên thẻ>

“color:…” có thể ghi theo kiểu mã màu HEX hoặc bằng tiếng Anh.

Cú pháp này khá đơn giản đúng không? Bây giờ chúng ta cùng xem qua một vài ví dụ.

Ví dụ

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        
        <p style="background-color: #c2d6d6">
            Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

            Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane kiểm soát bóng 70%, thực hiện 604 đường chuyền với độ chính xác lên tới 90% và tung ra tổng cộng 17 pha dứt điểm, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>

            Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
        </p>
        <p style="background-color: #cccccc">
            Nguyên nhân trực tiếp xuất phát từ cuộc không kích bằng Tomahawk của Mỹ vào Syria ngày 7-4. Sự thay đổi nhanh chóng, khó lường và quyết định thực thi giải pháp quân sự cứng rắn của Tổng thống Mỹ Donald Trump về vấn đề Syria chỉ trong 68 giờ đồng hồ khiến người ta “ớn lạnh” khi nghĩ kịch bản tương tự sẽ lặp lại ở Triều Tiên nếu quốc gia này thử hạt nhân lần 6.
        </p>
    
    </body>
</html>

Muốn dùng được giá trị Background Color thì chúng ta sẽ sử dụng thuộc tính Style để thực hiện điều đó. Bạn có thể chọn màu nên đậm hay nhạt là tuỳ ý bạn. 

Kết quả ví dụ

 

Trong trường hợp bạn muốn kết hợp cả tô màu chữ và tô màu nền chữ thì chúng ta sẽ có cú pháp tương đối giống với cú pháp ở trên. Bạn còn nhớ đến giá trị để bạn tô màu chữ chứ. Đó là giá trị color. Ở giữa hai giá trị là color và background-color là dấu chấm phẩy ( ; ).

Hãy xem ví dụ sau:

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        
        <p style="background-color: #ff6666; color: #ffffff ">
            Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

            Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane kiểm soát bóng 70%, thực hiện 604 đường chuyền với độ chính xác lên tới 90% và tung ra tổng cộng 17 pha dứt điểm, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>

            Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
        </p>
        <p style="background-color: #cc0052; color: #1aff1a">
            Nguyên nhân trực tiếp xuất phát từ cuộc không kích bằng Tomahawk của Mỹ vào Syria ngày 7-4. Sự thay đổi nhanh chóng, khó lường và quyết định thực thi giải pháp quân sự cứng rắn của Tổng thống Mỹ Donald Trump về vấn đề Syria chỉ trong 68 giờ đồng hồ khiến người ta “ớn lạnh” khi nghĩ kịch bản tương tự sẽ lặp lại ở Triều Tiên nếu quốc gia này thử hạt nhân lần 6.
        </p>
    
    </body>
</html>

Kết quả ví dụ

Khá dễ dàng ứng dụng vào trang HTML. Nếu bạn muốn tô cho một chữ thì chúng ta sẽ sử dụng thẻ Span sau đó nhập thêm thuộc tính Style vá nhập giá trị background-color và color vào thuộc tính Style.

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        
        <p style="background-color: #ff6666; color: #ffffff ">
            Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

            Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane kiểm soát bóng 70%, thực hiện 604 đường chuyền với độ chính xác lên tới <span style="background-color: #ff00ff">90%</span> và tung ra <span style="background-color: #66ccff">tổng cộng 17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>

            Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
        </p>
        <p style="background-color: #cc0052; color: #1aff1a">
            Nguyên nhân trực tiếp xuất phát từ cuộc không kích bằng Tomahawk của Mỹ vào Syria ngày 7-4. Sự thay đổi nhanh chóng, khó lường và quyết định thực thi giải pháp quân sự cứng rắn của <span style="background-color: #00cccc; color:#ff3399">Tổng thống Mỹ Donald Trump</span> về vấn đề Syria chỉ trong 68 giờ đồng hồ khiến người ta “ớn lạnh” khi nghĩ kịch bản tương tự sẽ lặp lại ở Triều Tiên nếu quốc gia này thử hạt nhân lần 6.
        </p>
    
    </body>
</html>

Chúng ta đã tô màu cho từng chữ ở thẻ P thứ nhất. Ở thẻ P thứ 2 chúng ta cũng thử tô màu từng chữ, kèm theo đó là thay đổi luôn màu chữ của cụm từ đó.

Kết quả ví dụ

Bạn đã biết đến cách để ứng dụng việc tô màu chư và tô màu nền cho một đoạn văn trogn HTML. Quá tuyệt vời luôn rồi. Bạn có thể  ừng dụng nhiều màu sắc khác nhau để mang đến sự nổi bật cho các đoạn văn trong HTML của bạn. Bạn đã biết thêm thẻ tô màu nền chữ. Bài viết sau mình sẽ cùng học với các bạn cách để tạo bảng trong HTML nhé! Hẹn gặp lại các bạn trong bài viết sau.




Đặt câu hỏi cho bài viết này ?