' hoặc ' Các thẻ ” cũng có thể được sử dụng nhưng cách tốt nhất là sử dụng các thẻ “ ' nhãn. Tiếp theo, chỉ định một “ tiêu đề ” để áp dụng các kiểu CSS trên phần tiêu đề. Sau đó, thêm “

” gắn thẻ vào đó và gán cho nó một lớp “ phần mở đầu ” để hiển thị nội dung “Welcome to Linuxhint!”:

lớp học = 'tiêu đề' >

< h1 lớp học = 'phần mở đầu' > Chào mừng bạn đến với Linuxhint! < / h1 >

< / tiêu đề>

Sau đó, chọn “ ” lớp thẻ và chỉ định các kiểu sau:

---

---

.header {

hình nền: url ( '../bg.jpg' ) ;

lý lịch- kích cỡ : che phủ;

lặp lại nền: không lặp lại;

màu sắc : khói trắng;

vị trí nền: trên cùng;

phần đệm: 0px 20px 20px 20px;

}

Giải thích của đoạn mã trên được đề cập dưới đây:

• Đầu tiên, đặt hình ảnh “ bg.jpg ” làm nền cho phần tiêu đề bằng cách sử dụng “ hình nền ' tài sản.
• Tiếp theo, phần “ kích thước nền ' Và ' Bối cảnh Lặp lại Các thuộc tính ” được sử dụng để đặt kích thước hình ảnh và dừng lặp lại hình ảnh tương ứng.
• Sau đó, đặt màu của vị trí văn bản và hình ảnh lên trên cùng với sự trợ giúp của “ màu sắc ' Và ' vị trí nền ' của cải.
• Cuối cùng, “ đệm ” thuộc tính được sử dụng để đặt khoảng cách giữa nội dung tiêu đề và đường viền.

Sau khi thực thi đoạn mã trên, trang web trông như thế này:

Đầu ra ở trên hiển thị rằng phần tiêu đề đã được tạo và các kiểu CSS được áp dụng cho nó.

Bước 2: Tạo Thanh điều hướng

Trong hầu hết các trường hợp, tiêu đề cũng có thể chứa thanh điều hướng. Để tạo thanh điều hướng, HTML “ ” thẻ có thể rất hữu ích. Đó là lý do tại sao, hãy thêm các mục trên thanh điều hướng bằng cách sử dụng “ ” thẻ và chỉ định một lớp “ hành động ”:

lớp học = 'tiêu đề' >



< Một lớp học = 'hành động' href = '#' >Trang chủ< / Một >

< Một lớp học = 'hành động' href = '#' >Dịch vụ< / Một >

< Một lớp học = 'hành động' href = '#' >Giới thiệu< / Một >

< Một lớp học = 'hành động' href = '#' >Liên hệ với chúng tôi< / Một >

< Một lớp học = 'hành động' href = '#' >Hàng mới về< / Một >

< / không>

< anh >< anh >

< h1 lớp học = 'phần mở đầu' > Chào mừng bạn đến với Linuxhint! < / h1 >

< / tiêu đề>

Sau khi thực thi đoạn mã trên, trang web trông như thế này:

Đầu ra ở trên minh họa rằng các mục trên thanh điều hướng “ Trang chủ ”, “ Dịch vụ ”, “ Về chúng tôi ”, “ Liên hệ chúng tôi ' Và ' Điểm đến mới ' đã được tạo ra.

Bước 3: Áp dụng kiểu cho các mục trên thanh điều hướng

Để tạo kiểu cho các mục trên thanh điều hướng, hãy chọn “ hành động ” lớp và gán các thuộc tính kiểu CSS sau:

.hành động {

trang trí văn bản: không;

màu sắc : trắng;

hiển thị: khối;

phần đệm: 15px;

nét chữ- kích cỡ : lớn;

nổi: trái;

lề: 0px 20px;

}

Giải thích của đoạn mã trên là:

• Đầu tiên ' trang trí văn bản ” thuộc tính được đặt thành “none” để xóa kiểu dáng được xác định trước của “ ' nhãn.
• Để nâng cao khả năng hiển thị văn bản cho người dùng, “ trắng ' Và ' lớn ” các giá trị được cung cấp cho “ màu sắc ' và ' cỡ chữ ' tài sản.
• Sau đó, “ trưng bày ' Và ' trôi nổi ” thuộc tính giúp “ ” xuất hiện trên cùng một dòng.
• Cuối cùng, “ đệm ' Và ' lề ” các giá trị thuộc tính được sử dụng để tạo khoảng cách giữa mỗi thẻ “ ”.

Sau khi thực thi đoạn mã trên, trang web trông như thế này:

Đầu ra ở trên minh họa rằng các mục thanh điều hướng hiện đã được tạo kiểu.

Bước 4: Thêm hiệu ứng di chuột vào các mục trên thanh điều hướng

Như trong đầu ra ở trên, hiệu ứng di chuột không khả dụng trên mục thanh điều hướng. Để thêm cả hai, hãy chọn “ phần mở đầu ” lớp được gán cho “

' nhãn. Sau đó, thêm “ :bay lượn ” bộ chọn với “ hành động ” lớp để áp dụng hiệu ứng di chuột trên các mục của thanh điều hướng:

.act:di chuột {

ranh giới : 2px màu trắng đặc;

màu sắc : màu xanh tím;

}

.phần mở đầu {

chữ- căn chỉnh : trung tâm;

lề: 18 %0px;

}

Giải thích của mã trên được cung cấp dưới đây:

• Đầu tiên, đặt “ ranh giới ” của một loại rắn 2px và gán một màu trắng “ màu sắc ”. Cùng với nó, hãy đặt “ màu xanh tím ” màu chỉ khi người dùng di chuột trên các mục của thanh điều hướng.
• Tiếp theo, chọn “ phần mở đầu ” và đặt căn chỉnh của nó thành “ trung tâm ” và cung cấp một số lề để làm cho phần trông lớn hơn.

Sau khi thực thi đoạn mã trên, giao diện cuối cùng của tiêu đề trông như thế này:

Đầu ra ở trên hiển thị rằng tiêu đề được tạo bằng HTML và CSS.

Phần kết luận

Trong tệp HTML, thẻ “

” được sử dụng để tạo phần cho tiêu đề. Sau đó, người dùng có thể áp dụng các thuộc tính CSS như phần đệm và hình nền để nâng cao phần tiêu đề. Nó áp dụng cho tất cả các thành phần tiêu đề, chẳng hạn như thanh điều hướng. Để tạo thanh điều hướng, người dùng có thể sử dụng thẻ “