Các cách chèn mã lệnh CSS vào trang web:

Cách 1. Chèn trực tiếp mã lệnh CSS vào các thẻ mở của phần tử HTML thông qua thuộc tính style theo cú pháp:

«tên_thẻ_HTML style="thuộc_tính_CSS: giá_trị; thuộc tính_CSS: giá_trị;">

Ví dụ 1: Để tô màu xanh và đổ bóng cho để mục Giới thiệu chung, em chèn thuộc tính style vào thẻ

của tệp portfolio.html.

Giới thiệu chung

Thuộc tính color dùng để tô màu xanh cho chữ (mã màu #996bb0), thuộc tính text-shadow dùng để đổ bóng, với 1 pixel theo chiều ngang (hưởng sang phải), 1 pixel theo chiều dọc (hướng xuống dưới), 2 pixels làm mờ và màu xám rgba(0, 0, 0, 0.5) (Hình 1).

Cách này giúp định kiểu nhanh và trực tiếp cho một phần tử HTML cụ thể. Tuy nhiên, cách này có nhiều hạn chế, chẳng hạn như khó khăn bảo trì hoặc không thể tái sử dụng mã lệnh CSS.

Cách 2. Chèn cặp thẻkèm mã lệnh CSS vào giữa cặp thẻcủa tệp portfolio.html. Phần mã lệnh CSS trong thẻ

color: #006bb0;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

Một trong những ưu điểm của cách này là tách rời phẩn mã lệnh CSS với phần nội dung nằm trong thẻvà giúp định kiểu toàn cục cho các phần tử HTML liên quan. Cụ thể trong Ví dụ 2, không chỉ để mục Giới thiệu chung, mà tất cả để mục

khác của lập portfolio.html đều được tô màu xanh và đổ bóng.

Cách 3. Tạo tệp mã lệnh CSS riêng biệt và chèn vào trang web một liên kết đến tệp CSS bằng thẻđặt vào giữa cặp thẻ. Thẻdược viết theo cú pháp:

Ví dụ 3: Các bước cụ thể của cách 3 được thực hiện như sau:

D Trong Visual Studio Code, tạo tập style.css trong cùng thư mục với tập portfolio html Sau đó, nhập đoạn mã CSS dưới đây:

h1 {

}

color: #006bb0;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

Trong tập portfolio.html, chèn thẻvào cặp thẻđể liên kết đến tập style.css, cụ thể:

Cách này cũng đem lại kết quả tương tự như cách 2. Một số ưu điểm của cách này là tách rời các thành phần của một trang web, hỗ trợ khả năng làm việc cộng tác, khả năng bảo trì và tái sử dụng mã lệnh.