You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tô màu cho toàn bộ văn bản trong thẻ P bằng thuộc tính Text trong HTML

Tô màu cho toàn bộ văn bản trong thẻ P bằng thuộc tính Text trong HTML

Chúng ta sẽ cùng học về một loại thẻ có thể giúp bạn tô màu trong HTML.

Xem thêm bài viết

Đôi khi bạn muốn tô màu cho toàn bộ nội dung của bạn bằng một gam màu. Mọi nội dung sẽ được tô màu khác so với những đường link. Bạn chắc chắn đã từng nghĩ qua rồi. Chỉ có điều là bạn không biết cách áp dụng cho chúng ra làm sao thôi. Có một số kỹ thuật mà trong HTML5 đã lượt bỏ. Trong đó có thẻ giúp bạn tô màu cho nội dung của trang HTML.

Bạn muốn tạo ra sự khác biệt như thế cho trang web thì giờ đây bạn đã có CSS để thực hiện điều đó. Tuy nhiên, bạn vẫn chưa học CSS thì thẻ mà mình sắp giới thiệu với các bạn sẽ rất hữu ích cho các bạn đấy.

Thẻ nào giúp tô màu trong HTML

Thẻ Text trong HTML sẽ đảm nhiệm phần công việc này dành cho bạn. Nhưng chúng ta nói chính xác thì thẻ Text chỉ là một thuộc tính trong thẻ Body mà thôi. Thuộc tính này khá dễ sử dụng và bạn có thể dùng 3 bảng mã màu khác nhau để thực hiện việc tô màu cho trang web của bạn.

Cú pháp thuộc tính Text

Cú pháp:

<body text= “…”>

…

</body>

 

Thuộc tính Text chỉ nhận 3 giá trị duy nhất là color_name, hex_number, rgb_number. Thuộc tính Text không nhận thêm bất cứ một giá trị nào nữa. Bạn cần phải lưu ý rõ điều này Còn về bảng màu thì mình sẽ cung cấp một số mã màu bạn thường sử dụng trong các ví dụ để bạn hiểu rõ vè cách sử dụng thuộc tính Text.

Ví dụ

 Ở đây chúng ta sẽ thử tô màu đỏ cho tất cả thẻ P trong thẻ Body.

<!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" />
   <link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body text="#f31c1c">
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#gthieu" class="main-top">Giới thiệu dự án</a> |
        <a href="#muc-tieu" class="main-top">Mục tiêu dự án</a> |
        <a href="#diem-nhan" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <a><h2 id="gthieu">Giới thiệu dự án</h2></a>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <p>Nếu như bạn biết được một ngày nào đó chính bạn cũng sẽ có cảm giác ấn tượng đến khó phai với bất cứ thứ gì mà bạn đãn từng sinh ra tại đây</p>
        <a id="muc-tieu"><h2>Mục tiêu dự án</h2></a>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <a id="diem-nhan"><h2>Điểm nhấn dự án</h2></a>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <a href="form.html" target="_blank"><button class="button2">THEO DÕI THÔNG TIN CỦA CHÚNG TÔI</button></a>
</body>

</html>

Kết quả ví dụ

Một ví dụ khá dễ hiểu dành cho thuộc Text. Bạn hoàn toàn có thể áp dụng để tô màu một cách hợp lý nhất có thể để tô mà cho trang web. Thậm chí bạn còn thể tô màu nội dung bằng màu trắng trên nền đen nữa cơ.

Thuộc tính này chắc chắn không thể làm khó được bạn. Vì vậy bạn cần luyện tập chút ít để ghi nhớ thuộc tính đơn giản này. Cố lên! Chúc các bạn học vui!




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