Một số lệnh css định dạng văn bản

1. Màu chữ css
2. Màu nền css
3. Kích thước chữ
4. Kiểu font chữ
5. Canh giữa văn bản css
6. Định dạng chữ in đậm css
7. Định dạng chữ in nghiêng csss
8. Đặt khoảng cách giữa các ký tự css
9. Khoảng cách giữa các dòng css
10. Độ rộng của văn bản (có thể dùng để tạo hiệu ứng văn bản với đổ bóng)
11. Rút ra nguyên tắt thêm lệnh css vào thẻ html

1. Màu chữ css

color: white;

Ví dụ css cơ bản:

<p>Xin chào, văn bản không có css</p>

<p style="color:red;">Xin chào</p>

2. Màu nền css

background-color: lightblue;

Ví dụ css cơ bản: 

<p style="background-color:blue;">Xin chào</p>

<p style="background-color:red;">Xin chào</p> 

3. Kích thước chữ

font-size: 15px;
font-size: 20px;
font-size: 1em;  (hay sử dụng vì phù hợp với mọi thiết bị)
font-size: 1.2em;

Ví dụ css:

<p style="font-size: 1.2em;">Xin chào</p> 

4. Kiểu font chữ

font-family: verdana;

5. Canh giữa văn bản css

text-align: center;
text-align: left;
text-align: right;

<p style="text-align: right">Xin chào</p>

Có thể kết hợp 2 lệnh css

<p style="text-align: right;font-size: 1.4em;">Xin chào</p> 

6. Định dạng chữ in đậm css

font-weight: bold;

7. Định dạng chữ in nghiêng csss

font-style: italic;

<p style="text-align: right;font-style: italic;">Xin chào</p>

<p style="text-align: right;font-style: italic;font-weight: bold;">Xin chào (kết hợp 3 lệnh css)</p>

8. Đặt khoảng cách giữa các ký tự css

letter-spacing: 2px;

9. Khoảng cách giữa các dòng css

line-height: 1.5;

10. Độ rộng của văn bản (có thể dùng để tạo hiệu ứng văn bản với đổ bóng)

text-shadow: 2px 2px 5px gray;
 

11. Rút ra nguyên tắt thêm lệnh css vào thẻ html

<span style="lệnh css1">Nội dung</span>
<span style="lệnh css1;lệnh css2;lệnh css3;">Nội dung</span>

Giải thích các phần css trong html:

    <span>: Là một thẻ HTML dùng để nhóm các phần tử văn bản lại với nhau, giúp bạn áp dụng các định dạng mà không làm thay đổi cấu trúc HTML.
    style="...": Thuộc tính style cho phép bạn thêm các lệnh CSS trực tiếp vào thẻ HTML, tạo kiểu cho nội dung của thẻ đó. Các lệnh CSS phải được ngăn cách bằng dấu chấm phẩy (;).
    lệnh_css_1; lệnh_css_2; lệnh_css_3: Các lệnh CSS bạn muốn áp dụng, có thể là bất kỳ thuộc tính CSS nào, ví dụ như color, font-size, background-color, v.v.

Ví dụ:

Giả sử bạn muốn áp dụng ba lệnh CSS cho một phần tử <span>, chẳng hạn như thay đổi màu chữ, kích thước chữ và màu nền. Cấu trúc sẽ như sau:

<span style="color: white; font-size: 20px; background-color: lightblue;">
  Đây là nội dung văn bản
</span>

Giải thích:

    color: white;: Đặt màu chữ là trắng.
    font-size: 20px;: Đặt kích thước chữ là 20px.
    background-color: lightblue;: Đặt màu nền của phần tử là màu xanh dương nhạt.

Tìm kiếm: