Nội dung
- Yêu cầu - Thêm tiêu đề và phụ đề vào tiêu đề trang web - Thêm và tạo kiểu một hình ảnh tiểu sử nhỏ vào tiêu đề trang web - Tạo kiểu và định vị nội dung tiêu đề bằng CSS - Kết luận

Thứ ba, 13/10/2020 | 00:00 GMT+7

Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)

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 lại phần tiêu đề trên cùng của trang web trình diễn bằng HTML và CSS. Bạn có thể tự mình chuyển đổi thông tin của Sammy nếu bạn muốn thử nghiệm hoặc cá nhân hóa kích thước. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS / HTML khác.

Ảnh chụp màn hình phần tiêu đề của trang web trình diễn

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 .

Thêm tiêu đề và phụ đề vào tiêu đề trang web

Tiêu đề trang web của ta bao gồm tiêu đề (“Sammy the Shark”), phụ đề (“SENIOR SELACHIMORPHA TẠI DIGITALOCEAN”) và một hình ảnh profile nhỏ. Các phần tử này được bao bọc bên trong một containers <div> được tạo kiểu với một lớp được xác định trong biểu định kiểu CSS. Bạn sẽ tạo lại phần này bằng cách thêm nội dung văn bản và hình ảnh, tạo một lớp cho containers <div> , sau đó gói nội dung văn bản và hình ảnh trong containers <div> được gán cho lớp mới tạo.

Để thêm tiêu đề và phụ đề vào trang web , hãy thêm đoạn mã được đánh dấu sau vào giữa các <body> mở và đóng trong index.html . Loại bỏ thông tin của Sammy với thông tin của bạn nếu bạn muốn cá nhân hóa trang web của bạn :

index.html

. . .  <body>  <!--Header content-->    <h1>Sammy the Shark<h1>    <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5>  </body>

Trong đoạn mã này, bạn đã thêm tiêu đề Sammy the Shark và gán cho nó thẻ tiêu đề <h1> vì nó là tiêu đề quan trọng nhất của trang web này. Bạn cũng đã thêm phụ đề SENIOR SELACHIMORPHA AT DIGITALOCEAN và gán cho nó thẻ tiêu đề <h5> , vì nó là tiêu đề ít quan trọng hơn.

Lưu ý bạn cũng đã thêm comment  ngay trước tiêu đề. Comment được sử dụng để lưu các ghi chú giải thích về mã của bạn để tham khảo trong tương lai và không được trình duyệt hiển thị cho khách truy cập trang web (trừ khi họ xem mã nguồn của trang web). Trong HTML, comment được viết giữa  như được minh họa trong đoạn mã ở trên. Đảm bảo đóng comment của bạn bằng thẻ comment kết thúc ( --> ) nếu không tất cả nội dung của bạn sẽ được comment .

Thêm và tạo kiểu một hình ảnh tiểu sử nhỏ vào tiêu đề trang web

Tiếp theo, bạn sẽ thêm một hình ảnh profile nhỏ vào phần tiêu đề. Chọn ảnh profile mà bạn muốn đưa vào trang web của bạn . Nếu bạn không có ảnh profile , bạn có thể sử dụng bất kỳ hình ảnh thay thế nào (chẳng hạn như ảnh profile của Sammy ) hoặc tạo ảnh đại diện thông qua một trang web như Getavataaars.com .

Khi bạn đã chọn một hình ảnh, hãy lưu nó vào folder images của bạn dưới dạng small-profile.jpeg .

Bây giờ, hãy thêm ảnh profile vào trang web bằng cách sử dụng <img> và thuộc tính src gán đường dẫn file của ảnh profile của bạn. Thêm đoạn mã được đánh dấu sau vào index.html của bạn ngay sau dòng  và trước dòng <h1>Sammy the Shark<h1> :

index.html

. . .    <body>    <!--Header content-->        <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">        <h1>Sammy the Shark<h1>        <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5>     </body> </html>

Lưu file và tải nó trong trình duyệt. Trang web bây giờ phải có tiêu đề, phụ đề, hình ảnh profile và hình nền:

Trang web có hình ảnh profile , tiêu đề và phụ đề

Lưu ý hình ảnh không có cùng kiểu dáng với hình ảnh profile trong trang web trình diễn . Để tạo lại hình dạng, kích thước và đường viền của hình ảnh profile trong trang web trình diễn, hãy thêm bộ luật sau vào file styles.css của bạn:

styles.css

. . . /*Top header profile image*/ .profile-small {    height:150px;    border-radius: 50%;    border: 10px solid #FEDE00; }

Trước khi tiếp tục, hãy xem lại từng dòng mã bạn vừa thêm:

/*Top header profile image*/ là một comment CSS để gắn nhãn mã.
Văn bản .profile-small đề cập đến tên của lớp mà ta đang xác định với bộ luật . Lớp này sẽ được áp dụng cho ảnh profile trong bước tiếp theo.
height:150px; khai báo height:150px; đặt chiều cao của hình ảnh thành 150 pixel và tự động điều chỉnh chiều rộng để duy trì tỷ lệ kích thước hình ảnh.
border-radius: 50%; khai báo border-radius: 50%; làm tròn các cạnh của hình ảnh thành một hình tròn.
Đường border: 10px solid #FEDE00; khai báo border: 10px solid #FEDE00; tạo cho hình ảnh một đường viền liền mạch rộng 10 pixel và có mã màu HTML là #FEDE00 .

Lưu file và quay lại index.html của bạn để thêm lớp profile-small vào <img> của bạn như sau:

index.html

. . .        <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot"> . . .

Lưu file và reload trong trình duyệt của bạn. Hình ảnh profile của bạn bây giờ phải có chiều cao 150 pixel, hình tròn và viền màu vàng:

Tiêu đề với hình ảnh profile được tạo kiểu

Trong bước tiếp theo, bạn sẽ áp dụng kiểu bổ sung cho toàn bộ tiêu đề, phụ đề và ảnh profile .

Tạo kiểu và định vị nội dung tiêu đề bằng CSS

Đến đây bạn sẽ xác định một lớp bằng CSS để định kiểu và định vị nội dung tiêu đề. Quay lại file styles.css và tạo lớp header bằng cách thêm bộ luật CSS sau:

styles.css

. . . /* Header Title */ .header {   padding: 40px;   text-align: center;   background: #f9f7f7;   margin:30px;   font-size:20px; }

Hãy tạm dừng một chút để hiểu từng dòng mã mà bạn vừa thêm:

/* Header Title */ là một comment , không được trình duyệt hiển thị.
Văn bản .header là tên của bộ chọn lớp mà ta đang tạo và xác định với bộ luật này.
Phần padding: 40px; khai báo tạo ra 40 pixel đệm giữa nội dung và đường viền của phần tử.
Các text-align: center; khai báo di chuyển nội dung đến trung tâm của phần tử. Bạn cũng có thể điều chỉnh giá trị sang left hoặc right để căn chỉnh văn bản cho phù hợp.
background: #f9f7f7; khai báo đặt màu cho mã màu HTML cụ thể được sử dụng trong trang web trình diễn. Hướng dẫn này sẽ không che mã màu HTML trong loạt bài hướng dẫn này, nhưng bạn cũng có thể sử dụng tên màu HTML ( black , white , gray , silver , purple , red , fuchsia , lime , olive , green , yellow , teal , navy , blue , maroon và aqua ) để thay đổi giá trị màu của thuộc tính này.
margin:30px; khai báo tạo lề 30 pixel giữa chu vi của phần tử và chu vi của khung nhìn hoặc bất kỳ phần tử nào xung quanh.
font-size:20px; khai báo làm tăng kích thước của cả tiêu đề và phụ đề.

Lưu file styles.css của bạn. Tiếp theo, bạn sẽ áp dụng lớp header này cho nội dung tiêu đề của bạn. Quay lại trang index.html và bọc nội dung tiêu đề (mà bạn đã thêm vào file của bạn ) trong <div> được gán cho lớp header :

. . . <!--Section 1: Header content-->    <div class="header">       <img src="images/small-profile.jpeg" class="small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">      <h1>Sammy the Shark<h1>      <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5>     </div>    </body> </html>

Lưu index.html và reload trong trình duyệt của bạn. Bây giờ, tiêu đề, phụ đề và hình ảnh profile của bạn sẽ được tạo kiểu bên trong containers <div> theo các luật bạn đã khai báo với lớp header :

Nội dung tiêu đề hiện được căn giữa và tạo kiểu

Kết luận

Đến đây bạn đã tạo lại phần tiêu đề của trang web trình diễn trên trang web của bạn bằng HTML và CSS. Bạn đã thêm và tạo kiểu cho tiêu đề, phụ đề và hình ảnh profile bằng cách sử dụng containers <div> và các lớp CSS. Nếu quan tâm, bạn có thể tiếp tục khám phá các khả năng thiết kế bằng cách sửa đổi các luật CSS cho nội dung tiêu đề của bạn.

Khi đã sẵn sàng , bạn có thể tiếp tục hướng dẫn tiếp theo, nơi bạn sẽ tạo lại phần thứ hai của trang trình diễn.

Tags:

Các tin liên quan

Cách tạo kiểu cho phần thân của trang web bằng 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 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