Cách tạo kiểu cho phần thân của trang web bằng CSS

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

Một phần của loạt bài: Cách xây dựng trang web bằng CSS

Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.

Trong hướng dẫn này, bạn sẽ tạo kiểu cho phần thân của trang web bằng luật CSS. Bạn sẽ sử dụng luật này để áp dụng và tạo kiểu cho hình nền cũng như đặt họ phông chữ cho trang web. Bạn cũng cần tạo luật kiểu thay đổi màu của tất cả văn bản siêu liên kết thành màu phù hợp hơn với bảng màu của trang web trình diễn.

Bài tập này sẽ được sử dụng để tạo lại kiểu của trang trình diễn nhưng bạn có thể áp dụng và sửa đổi các luật tương tự được sử dụng ở đây cho các dự án trang web HTML / CSS khác.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Đối với hướng dẫn này, ta khuyên bạn nên sử dụng hình nền từ trang web trình diễn mà bạn có thể download từ liên kết này . Bạn có thể sử dụng một hình ảnh khác làm nền của bạn , nhưng hãy đảm bảo hình ảnh đó đủ lớn để lấp đầy màn hình.

Lưu ý : Để download hình nền của trang trình diễn, hãy truy cập liên kết này và nhấp CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) vào hình ảnh và chọn “Lưu hình ảnh dưới dạng” và lưu nó dưới dạng background-image.jpeg vào folder "hình ảnh" của bạn.

Khi bạn đã chọn một hình ảnh, hãy đảm bảo nó được lưu dưới dạng “background-image.jpeg” trong folder images của bạn. Đến đây bạn đã sẵn sàng để tiến hành bước tiếp theo.

Thêm hình nền vào trang web bằng CSS

Tuyên bố luật phong cách cho cơ thể của một trang web, bạn cần phải tạo ra một luật CSS cho body chọn thẻ. Sau đó, các luật này sẽ được áp dụng cho tất cả các phần tử được đặt bên trong các thẻ mở và đóng <html> mà bạn đã thêm vào index.html trong hướng dẫn trước Cách Cài đặt Dự án Trang web CSS và HTML của Bạn .

Để thêm hình nền vào trang web , hãy tạo luật CSS bằng công cụ chọn thẻ <body> . Xóa mọi thứ trong file styles.css của bạn (nếu bạn đang theo dõi loạt bài này) và thêm bộ luật sau:

styles.css

/* General Website Style rules */ body {   font-family: "Helvetica", Sans-Serif;   background-image: url("../images/background-image.jpeg"); }

Ghi lại đường dẫn file được đánh dấu, đường dẫn này cho trình duyệt biết vị trí hình nền. Nếu bạn đã thay đổi tên hoặc vị trí của hình ảnh thì bạn cần phải điều chỉnh đường dẫn file ở đây cho phù hợp.

Hãy tạm dừng một chút để hiểu từng khai báo trong bộ luật này:

/* General Website Style rules */ là một comment CSS, không được trình duyệt hiển thị. Giống như các comment HTML, các comment CSS hữu ích cho việc giải thích và tổ chức mã của bạn để tham khảo trong tương lai. Lưu ý các comment CSS mở và đóng bằng các thẻ /* và */ thay vì các thẻ  được sử dụng cho các comment HTML.
Họ font-family: "Helvetica", Sans-Serif; khai báo đặt họ phông chữ (Helvetica) và họ phông chữ chung (Sans-Serif) cho tất cả văn bản trên trang web. ( Lưu ý bạn có thể chỉ định các họ phông chữ khác nhau cho nội dung văn bản trên cùng một trang web bằng cách thêm các luật CSS sau này). Họ phông chữ chung được cung cấp như một bản backup trong trường hợp họ phông chữ đầu tiên không khả dụng và trình duyệt cần chọn một phông chữ dự phòng. Bạn có thể khám phá các phông chữ khác bằng cách thay thế “Helvetica” bằng các tên phông chữ khác, chẳng hạn như Times , Courier hoặc Palatino .
Khai báo background-image: url(" ../images/background-image.jpeg ;") yêu cầu trình duyệt thêm hình nền vào trang web bằng cách sử dụng file được tìm thấy với đường dẫn file được chỉ định. Lưu ý bạn đã thêm ../ vào tên đường dẫn file để yêu cầu trình duyệt xác định vị trí folder images trong folder phía trên folder chứa file bạn đang làm việc ( styles.css ).

Lưu file styles.css của bạn và tải trang index.html trong trình duyệt của bạn. Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước hướng dẫn của ta Cách xem file HTML offline trong trình duyệt của bạn .

Bạn sẽ nhận được một trang không có nội dung ngoại trừ hình nền:

Trang web chỉ có hình nền

Nếu bạn không nhận được hình ảnh, hãy kiểm tra đảm bảo rằng đường dẫn file của bạn chính xác và không có lỗi trong index.html và file styles.css .

Thay đổi màu của văn bản siêu liên kết

Tiếp theo, ta sẽ thêm luật CSS thay đổi màu của tất cả văn bản siêu liên kết thành màu phù hợp hơn với bảng màu trang web.

Ở cuối file styles.css của bạn, hãy thêm bộ luật sau:

styles.css

a {   color: #112d4e;  }

Bộ luật này sẽ tạo kiểu cho bất kỳ văn bản nào được đánh dấu bằng thẻ <a> có mã màu HTML #112d4e . Kiểu sẽ không rõ ràng cho đến khi bạn thêm <a> phần tử vào trang index.html của bạn (bạn sẽ thực hiện trong hướng dẫn cuối cùng Cách tạo chân trang tĩnh bằng HTML và CSS . Bạn có thể thay đổi màu kiểu bằng cách thay đổi màu HTML mã trong luật CSS này.

Kết luận

Đến đây bạn sẽ có một trang web với hình nền lớn. Ngoài ra, bạn đã khai báo một họ phông chữ sẽ được áp dụng khi bạn bắt đầu thêm nội dung văn bản. Sử dụng rulesets như thế này cho phép bạn thay đổi hình ảnh phông chữ và nền của một trang web bằng cách tạo ra một ruleset cho body chọn thẻ. Cuối cùng, bạn đã tạo một luật kiểu chỉ định màu của bất kỳ văn bản siêu liên kết nào mà bạn thêm vào trang.

Trong hướng dẫn tiếp theo, bạn sẽ tạo lại phần tiêu đề của trang web trình diễn .

Tags:

Các tin liên quan

Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12