Hướng dẫn how do i keep text color in html? - làm cách nào để giữ màu văn bản trong html?

Khi bạn viết mã trong HTML và thêm một số văn bản, bạn không muốn để nó như thế. Bạn muốn làm cho văn bản đó trông tốt.

Và để làm điều đó, bạn cần thay đổi ngoại hình của chúng thông qua các thuộc tính

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Trong hướng dẫn này, tôi sẽ chỉ cho bạn hai cách khác nhau mà bạn có thể làm cho các văn bản HTML của bạn trông tốt.

Cú pháp cơ bản body { display: flex; align-items: center; justify-content: center; height: 100vh; } 2

selector {
     font-size: value;
     color: value;
}

Bạn có thể thay đổi màu sắc và kích thước của văn bản của bạn ngay bên trong thẻ của nó với các thuộc tính màu và kích thước phông chữ. Điều này được gọi là CSS nội tuyến. Bạn làm điều đó với thuộc tính phong cách trong HTML.

Trong mã HTML bên dưới, chúng tôi sẽ thay đổi màu sắc và kích thước của văn bản Freecodecamp.

freeCodeCamp

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Có vẻ như thế này trong trình duyệt:

Để thay đổi kích thước của văn bản, bạn sẽ sử dụng thuộc tính kiểu và sau đó đặt giá trị với thuộc tính

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

freeCodeCamp

Văn bản bây giờ trông như thế này trong trình duyệt:

Nếu bạn đang tự hỏi 4REM là gì, thì đó là một đơn vị đo lường. Nó giống như 64 pixel, bởi vì 16px tạo ra 1REM trừ khi bạn thay đổi gốc

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Để thay đổi màu của văn bản, bạn có thể sử dụng thuộc tính kiểu, sau đó đặt giá trị với thuộc tính màu:

freeCodeCamp

Đây là những gì chúng ta có trong trình duyệt:

Kết hợp các thuộc tính

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Với mã:

freeCodeCamp

Cách thay đổi kích thước văn bản và màu văn bản trong tệp CSS bên ngoài

Bạn cũng có thể thay đổi màu sắc và kích thước của văn bản theo bảng kiểu bên ngoài. Quan trọng nhất, bạn phải liên kết các CS bên ngoài trong phần đầu của HTML của bạn.

Cú pháp cơ bản để thực hiện nó trông như thế này:

Bây giờ, để thay đổi kích thước văn bản và màu sắc của văn bản freecodecamp, bạn cần chọn nó trong bảng kiểu và áp dụng các thuộc tính và giá trị phù hợp cho nó.

Hãy nhớ rằng đây là mã HTML đơn giản của chúng tôi:

freeCodeCamp

Bạn có thể thay đổi màu sắc và kích thước của văn bản bằng cách chọn phần tử (H2) và gán các giá trị cho các thuộc tính màu sắc và phông chữ:

 h2 {
    color: #2ecc71;
    font-size: 4rem;
}

Chúng tôi có kết quả tương tự trong trình duyệt:

Sự kết luận

Tôi hy vọng hướng dẫn này cung cấp cho bạn kiến ​​thức để có thể thay đổi kích thước và màu sắc của văn bản HTML của bạn để bạn có thể làm cho chúng trông đẹp hơn.

Cảm ơn bạn đã đọc, và tiếp tục mã hóa.