Cách xây dựng phần Giới thiệu về bản thân trên trang web của bạn bằng CSS (Phần 2)

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.

---

Trong hướng dẫn này, bạn sẽ tạo lại phần thứ hai của trang web trình diễn bằng CSS. Thoải mái chuyển đổi thông tin của Sammy nếu bạn muốn cá nhân hóa kích thước. Các phương pháp bạn học ở đây có thể được áp dụng cho các dự án trang web CSS / HTML khác.

Phần thứ hai của trang web chứa hai hộp nội dung, một hộp chứa văn bản và một hộp chứa ảnh profile lớ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ư đã hướng dẫn trong phần 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 .

Bạn cần một hình ảnh profile để đặt trong hộp nội dung bên phải. Nếu bạn không có hình ảnh profile , bạn có thể sử dụng hình ảnh này cho mục đích demo .

Lưu ý : Để download hình ảnh profile lớn, hãy truy cập liên kết này và nhấp vào 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 profile large-profile.jpeg vào của bạn folder images .

Trước khi tiếp tục, hãy đảm bảo hình ảnh đã chọn của bạn được lưu trong folder images của bạn dưới dạng large-profile.jpeg .

Tạo luật kiểu cho hộp nội dung văn bản và hình ảnh

Để tạo hai hộp nội dung này, trước tiên bạn sẽ xác định một lớp cột trong file styles.css kiểu cho các hộp cho mục đích này. Sau đó, bạn sẽ thêm nội dung văn bản và hình ảnh vào trang HTML .

Quay lại file styles.css và copy paste các bộ luật sau vào cuối file :

. . . /* Include padding and border in total box size*/ * {   box-sizing: border-box; }  /* Create two equal columns that float next to each other */ .column-2 {   float: left;   width: 45%;   padding: 40px;   padding-left:70px;   padding-right: 70px;   height: 475px;   margin:30px;   margin-right:30px;   margin-bottom: 70px;   background-color: #FEDE00;   line-height:2; } 

Trước khi tiếp tục, hãy tạm dừng để hiểu từng bộ luật mà ta vừa thêm vào.

Bộ luật đầu tiên sử dụng bộ chọn “ * ” để cho biết bộ luật nên được áp dụng cho tất cả các phần tử và lớp HTML. Bộ luật này khai báo giá trị của thuộc tính box-sizing dưới dạng border-box , điều chỉnh tổng chiều rộng và chiều cao được tính toán của phần tử CSS để bao gồm kích thước phần đệm và đường viền của nó. Theo mặc định, kích thước chiều rộng và chiều cao của một phần tử chỉ tham chiếu đến nội dung của một phần tử. Đặt thuộc tính box-sizing thành border-box giúp điều chỉnh tổng chiều rộng và chiều cao của một phần tử dễ dàng hơn và có thể hữu ích khi bố trí nội dung trên một trang. Để đọc thêm về mô hình hộp CSS, vui lòng xem hướng dẫn của ta Cách Điều chỉnh Nội dung, Phần đệm, Đường viền và Lề của Phần tử HTML bằng CSS .

Bộ luật thứ hai xác định một lớp có tên là “column-2” với các thông số kỹ thuật về kích thước cho phép hai cột được hiển thị cạnh nhau trên trang. Lớp này được đặt tên là column-2 để phân biệt nó với các cột có kích thước khác mà bạn sẽ tạo các lớp cho phần sau của hướng dẫn.

Một số giá trị và thuộc tính trong bộ luật này chưa được đề cập trong loạt bài hướng dẫn này:

• float:left; khai báo hướng dẫn phần tử trôi về phía bên trái của containers mà nó ở bên trong (trong trường hợp này là chính khung nhìn) trong khi cho phép nội dung xung quanh chảy xung quanh phía bên phải của nó. Bạn cũng có thể đặt giá trị thuộc tính float thành right hoặc none , mặc dù hướng dẫn này sử dụng giá trị left để tạo lại trang web trình diễn.
• width: 45%; khai báo đặt chiều rộng của phần tử bằng 45% chiều rộng của containers của nó, trong trường hợp này là chính khung nhìn. Đặt kích thước (chẳng hạn như chiều rộng) theo phần trăm thay vì pixel có thể hữu ích khi bạn muốn phần tử thay đổi kích thước theo kích thước của containers mà nó nằm trong đó. Tuy nhiên, lưu ý định cỡ động có thể là một quá trình phức tạp — có nhiều phương pháp để tạo các phần tử đáp ứng có thể được triển khai sau khi cài đặt nền tảng trong CSS.
• Màu background-color: #FEDE00; đặt màu nền của phần tử thành mã màu HTML “# FEDE00”.
• line-height:2; tăng khoảng cách giữa các dòng.
• Nếu bạn muốn tìm hiểu thêm về các khai báo khác, vui lòng xem lại các phần trước trong loạt bài hướng dẫn này về cách đặt kích thước của nội dung , phần đệm và lề .

Thêm Hộp nội dung “Giới thiệu về tôi”

Tiếp theo, bạn sẽ thêm hộp nội dung “Giới thiệu về bản thân” vào trang web bằng cách sử dụng lớp column-2 mà bạn vừa tạo. Lưu file styles.css của bạn và quay lại index.html . Thêm mã sau vào sau thẻ đóng </div> trong phần tiêu đề của bạn, trước thẻ đóng </body> :

. . . <!--Section 2: About me-->          <div class="column-2">             <h1>About me</h1>             <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>             <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>             </div>  . . . 

Lưu file và tải nó trong trình duyệt. Để 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 .

Đến đây bạn sẽ có một hộp màu vàng ở bên trái của trang web chứa văn bản:

Lưu ý trang web vẫn phải chứa nội dung tiêu đề mà bạn đã thêm trong phần hướng dẫn trước của loạt bài này Cách tạo phần tiêu đề của trang web bằng CSS .

Hãy xem lại ngắn gọn cách mã HTML này đang hoạt động:

• Dòng đầu tiên trong đoạn mã này ( <!--Section 2: About me--> ) là một comment giúp tổ chức nội dung HTML. Nó sẽ không hiển thị trong trình duyệt và được đưa vào đây để tham khảo sau này.
• Dòng mã tiếp theo ( <div class="column-2" style="background-color:#FEDE00;"> ) tạo một containers <div> , gán cho nó kiểu của lớp column-2 mà bạn đã xác định trong các styles.css và sử dụng thuộc tính style nội tuyến HTML để gán cho nó màu nền #FEDE00 .
• Các <h1> và <p> theo sau chứa văn bản bạn đang chèn vào hộp văn bản “Giới thiệu về tôi”. Lưu ý bạn đã đóng containers <div> ở cuối văn bản này. Bạn có thể chuyển văn bản của Sammy bằng text của bạn nếu bạn định cá nhân hóa trang web của bạn .

Thêm Hộp Nội dung Hình ảnh Tiểu sử

Tiếp theo, bạn sẽ thêm hộp nội dung thứ hai chứa ảnh profile lớn. Có một số cách bạn có thể thêm một hộp hình ảnh, nhưng trong hướng dẫn này, bạn sẽ thêm hình ảnh profile lớn bằng cách đặt nó làm hình nền của một containers <div> khác được gán cho lớp column-2 .

Quay lại file styles.css và thêm đoạn mã sau vào cuối tài liệu:

. . . /* Large profile image */ .large-profile {   background: url('../images/large-profile.jpeg');   background-size: cover;   background-position: center; } 

Trong đoạn mã này, bạn đã thêm comment để sắp xếp các luật CSS và tạo và xác định large-profile lớp mới mà bạn sẽ sử dụng để tạo kiểu cho hộp chứa hình ảnh profile lớn. Trong bộ luật này, background: url('images/large-profile.jpeg'); khai báo cho trình duyệt sử dụng hình ảnh được tìm thấy tại đường dẫn file được chỉ định làm hình nền của phần tử. Khai báo background-size: cover phù hợp với hình ảnh để bao phủ không gian của containers mà nó được đặt, khai báo background-position:center hình ảnh bên trong containers .

Tiếp theo, bạn sẽ thêm một containers <div> được gán cho cả lớp column-2 và lớp large-profile để tạo lại hộp với hình ảnh cấu hình lớn.

Lưu file styles.css của bạn và quay lại index.html . Thêm đoạn mã sau vào bên dưới thẻ đóng </div> của cột đầu tiên của bạn và bên trên thẻ đóng </body> :

. . .   <div class="column-2 large-profile">   </div> 

Đoạn mã này tạo một containers <div> được tạo kiểu theo các luật được khai báo trong lớp column-2 và lớp profile-picture .

Lưu cả hai file và reload index.html trong trình duyệt của bạn. Trang web bây giờ sẽ có hộp văn bản và hộp hình ảnh như được tạo kiểu trong trang web trình diễn (và được minh họa trong hình ảnh đầu tiên của hướng dẫn này). Lưu ý trang web cũng nên bao gồm nội dung tiêu đề mà bạn đã tạo trong hướng dẫn trước. Bạn có thể tiếp tục thử nghiệm với các giá trị đã khai báo trong lớp column-2 và lớp profile-large để khám phá các khả năng thiết kế khác nhau.

Kết luận

Đến đây bạn đã tạo và tạo kiểu cho các hộp nội dung cho văn bản và hình ảnh bằng CSS. Trong hướng dẫn tiếp theo, bạn sẽ tạo lại phần thứ ba của trang web. Trong quá trình này, bạn sẽ sắp xếp nội dung thành hai hàng gồm bốn hộp và áp dụng một lớp giả sẽ làm cho các hộp thay đổi màu sắc khi user di con trỏ qua chúng.

---

---

Các tin liên quan

Cách tạo hộp trích dẫn nổi bật trên trang web của bạn bằng CSS (Phần 6)
2020-10-14
Cách thêm phần sơ yếu lý lịch hoặc lịch sử việc làm vào trang web của bạn bằng CSS (Phần 4)
2020-10-14
Cách xây dựng nhiều thanh bên cố định xếp chồng với CSS thuần túy và Bootstrap 4
2020-10-14
Cách xây dựng bố cục lát gạch bằng CSS (Phần 3)
2020-10-14
Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
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