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)

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ẽ thêm một trích dẫn nổi bật vào trang web của bạn bằng cách sử dụng CSS như trong phần thứ sáu của trang web trình diễn . Bạn có thể sử dụng phần này để giới thiệu một trích dẫn yêu thích, một lời chứng về công việc của bạn hoặc một thông điệp cho khách truy cập trang web . Bạn cũng có thể liên kết câu trích dẫn này với một trang web khác nếu bạn muốn. 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.

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 .

Tạo luật kiểu cho phần trích dẫn nổi bật

Để tạo phần trích dẫn nổi bật, bạn sẽ tạo một lớp để tạo kiểu cho containers và một lớp để tạo kiểu cho văn bản nổi bật. Trong file styles.css của bạn, hãy thêm các đoạn mã sau:

. . .  /* Section 6: Featured Quote  */  .column-quote {   width: 90%;   height: 475px;   padding: 40px;   padding-left:70px;   padding-right: 70px;   padding-bottom:100px;   margin:auto;   margin-bottom:150px;   border: 20px solid #FEDE00; }  .quote {   font-size:80px;   font-weight:bold;   line-height: 1;   text-align: center; } 

Trong đoạn mã này, bạn đã thêm chú thích CSS /* Section 6: Featured Quote */ để gắn nhãn phần này của mã CSS. Sau đó, bạn đã xác định column-quote lớp, mà bạn sẽ sử dụng để tạo kiểu cho hộp trích dẫn và chỉ định kích thước, phần đệm, lề và đường viền của containers .

Lưu ý lề được đặt thành auto , đặt lề theo chiều ngang cho containers ở giữa trang. Ngoài ra, lề dưới cùng được đặt thành 200 pixel để cung cấp một số không gian cho cuối trang. 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 , đường viền và lề .

Bạn cũng đã tạo lớp quote , lớp này bạn sẽ sử dụng để tạo kiểu cho văn bản của trích dẫn nổi bật. Lưu ý bạn đã đặt thuộc tính line-height thành 1 , thuộc tính này sẽ thu hẹp khoảng cách giữa các dòng văn bản từ cài đặt mặc định là 1.6. Thử nghiệm với việc thay đổi giá trị này để xác định khoảng cách dòng bạn thích.

Lưu file styles.css .

Thêm phần trích dẫn nổi bật

Quay lại index.html . Sau thẻ đóng </div> cuối cùng, hãy thêm đoạn mã sau:

. . .  <!--Section 6: Featured Quote-->  <div class="section-break"> </div> <div class="column-quote">   <p class="quote">There are many fish in the sea, but only one Sammy!</p> </div> 

Trước khi tiếp tục, hãy tạm dừng để kiểm tra từng dòng mã:

• Comment HTML <!--Section 6: Featured Quote--> gắn nhãn phần mã này trong index.html và sẽ không được trình duyệt hiển thị.
• Phần tử <div class="section-break"> </div> tạo ngắt phần bằng cách sử dụng một lớp mà bạn có thể đã xác định trong hướng dẫn trước . Nếu bạn không làm theo hướng dẫn đó, bạn có thể thêm lớp đó bằng cách thêm luật CSS .section-break {margin:50px; height:500px;} vào file styles.css của bạn. Yếu tố này tạo khoảng trống giữa nội dung trong phần trước và phần trích dẫn nổi bật.
• Thẻ <div class="column-quote"> và thẻ đóng </div> tạo containers cho trích dẫn nổi bật với các luật kiểu bạn đã khai báo cho lớp column-quote trong file styles.css của bạn .
• <p class="quote">There are many fish in the sea, but only one Sammy! </p> chèn nội dung văn bản vào containers <div> mà bạn đã mở ở dòng trên và tạo kiểu cho nó theo các luật bạn đã khai báo cho bộ chọn lớp quote trong file styles.css của bạn . Nếu bạn thay đổi độ dài của nội dung văn bản của bạn , bạn có thể cần sửa đổi một trong các lớp trong phần này để thay đổi kích thước của phông chữ hoặc kích thước của containers đảm bảo văn bản vẫn vừa vặn.

Lưu index.html và reload trong trình duyệt của bạn. Trang web bây giờ sẽ hiển thị một trích dẫn nổi bật lớn trong một containers trong suốt với nền vững chắc:

Kết luận

Trong hướng dẫn này, bạn đã tạo một hộp văn bản nổi bật trên trang web của bạn và sửa đổi kiểu của nó cho các bố cục trang web khác nhau. Nếu bạn muốn siêu liên kết báo giá của bạn đến một trang web mới, vui lòng truy cập hướng dẫn của ta Cách tạo và liên kết đến các trang web bổ sung bằng HTML .

Trong phần hướng dẫn tiếp theo và cuối cùng của loạt bài hướng dẫn, bạn sẽ tạo một chân trang tĩnh, chân trang này “bám” vào một vị trí cố định ở cuối khung nhìn khi khách truy cập cuộn xuống trang.

---

---

Các tin liên quan

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 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)
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