Định dạng văn bản trong HTML trong Apps Script

Định dạng văn bản trong HTML trong Apps Script

Có 2 cách định dạng văn bản html trong apps script

1. Định đạng lệnh trực tiếp vào thẻ html

Một số lệnh css cơ bản

Màu chữ, Màu nền, Font size của chữ ..

Tham khảo : MỜI BẠN XEM LIÊN KẾT

2. Định dạng lệnh ngoài thẻ html thông qua tên class và id

Để định dạng các phần tử HTML thông qua tên class và id, bạn sẽ sử dụng CSS bên ngoài thẻ HTML trong file riêng biệt (hoặc trong thẻ <style> của phần <head> trong HTML).

Cách này giúp quản lý và tái sử dụng mã CSS dễ dàng hơn.

- Cách 1: Sử dụng class trong CSS

class là một thuộc tính HTML giúp bạn nhóm các phần tử lại với nhau, cho phép áp dụng các kiểu chung cho nhiều phần tử khác nhau.

Cấu trúc:

    Trong HTML: Gán class cho phần tử
    Trong CSS: Sử dụng dấu chấm (.) để chọn phần tử có class cụ thể

Ví dụ:

HTML:

<p class="highlight">Đoạn văn này có màu nền vàng.</p>
<p class="highlight">Đoạn văn này cũng có màu nền vàng.</p>

CSS:

.highlight {
  background-color: yellow;
  font-size: 18px;
  padding: 10px;
}

Giải thích:

    HTML: Bạn gán class="highlight" cho các phần tử <p>, cho phép các phần tử này sử dụng cùng một kiểu CSS.
    CSS: Bạn định nghĩa kiểu cho tất cả phần tử có class="highlight" bằng cách sử dụng .highlight (dấu chấm trước tên class).

- Cách 2: Sử dụng id trong CSS

id là một thuộc tính HTML dùng để xác định duy nhất một phần tử trong trang. Một id chỉ có thể được áp dụng cho một phần tử duy nhất trong trang HTML.

Cấu trúc:

    Trong HTML: Gán id cho phần tử.
    Trong CSS: Sử dụng dấu # để chọn phần tử có id cụ thể.

Ví dụ:

HTML:

<h1 id="main-header">Đây là tiêu đề chính của trang</h1>
<p id="intro-text">Đoạn văn này chỉ xuất hiện duy nhất trong trang.</p>

CSS:

#main-header {
  color: blue;
  text-align: center;
  font-size: 36px;
}

#intro-text {
  font-style: italic;
  font-size: 20px;
  color: gray;
}

Giải thích:

    HTML: Bạn gán id="main-header" cho phần tử tiêu đề và id="intro-text" cho đoạn văn.
    CSS: Bạn định nghĩa kiểu cho phần tử có id="main-header" và id="intro-text" bằng cách sử dụng #main-header và #intro-text (dấu # trước tên id).

Bài viết liên quan:

Định dạng văn bản trong HTML trong Apps Script