Giáo dục

Đoạn văn Dropcap với các phần tử dòng đầu tiên và chữ cái … – HTML

Có một vài bộ chọn hoặc thuộc tính CSS mà tôi nghĩ hiếm khi được sử dụng ngoài tự nhiên, nhưng chúng thực sự đã tồn tại kể từ thời CSS1; một số trong đó bao gồm :dòng đầu tiên và : chữ cái đầu tiên yếu tố pesudo.

Cách sử dụng?

Các phần tử giả này về cơ bản hoạt động tương tự như anh chị em của chúng -: trước và sau: và tôi nghĩ chúng cũng khá đơn giản. Các : chữ cái đầu tiên sẽ nhắm mục tiêu chữ cái hoặc ký tự đầu tiên của một yếu tố được chọn, đây yếu tố giả thường được sử dụng để tạo hiệu ứng đánh máy như nắp thả. Đây là cách nó được thực hiện.

p: chữ cái đầu tiên font-size: 50px;

Mã này dẫn đến việc trình bày sau đây.

Một số điều cần lưu ý, tuy nhiên, hiệu ứng này sẽ chỉ áp dụng khi ký tự đầu tiên không được đặt trước bởi một yếu tố khác, ví dụ, một hình ảnh. Ngoài ra, khi chúng tôi có một số yếu tố được nhắm mục tiêu tương tự liên tiếp, tất cả chúng cũng sẽ bị ảnh hưởng.

Hơn nữa, về mặt :dòng đầu tiên, điều này yếu tố giả sẽ nhắm mục tiêu dòng đầu tiên của phần tử được nhắm mục tiêu, ví dụ dưới đây cho thấy cách chúng tôi in đậm dòng đầu tiên của đoạn.

Giống như mã trước đó của : chữ cái đầu tiên, điều này cũng sẽ ảnh hưởng đến tất cả các dòng đầu tiên trong các phần tử đoạn có trong trang.

Vì vậy, trong trường hợp thực tế, khi chúng ta thường muốn thêm nắp thả hoặc thay đổi dòng đầu tiên chỉ có trên đoạn đầu tiên, chúng ta cần phải cụ thể hơn – bằng cách thêm một thuộc tính lớp bổ sung hoặc áp dụng các phần tử giả này cùng với : con đầu lòng hoặc là : loại đầu tiên bộ chọn, như vậy.

Ở đó chúng tôi đi, đoạn bị ảnh hưởng bây giờ chỉ là đoạn đầu tiên.

Yếu tố giả trong công việc

Được rồi, bây giờ chúng ta hãy thử thiết kế một đoạn văn tốt hơn bằng cách sử dụng các yếu tố giả. Nhưng trước khi bắt đầu, chúng tôi cần một phông chữ đặc biệt cho nắp thả của chúng tôi và đây là lựa chọn của tôi: Hominis của Paul Lloyd. Sau đó, chúng tôi xác định một họ phông chữ mới trong biểu định kiểu, như sau.

Tiếp theo, chúng tôi đặt họ phông chữ mặc định cho các đoạn văn.

Trong ví dụ này, chúng tôi sẽ sử dụng : con đầu lòng bộ chọn để nhắm mục tiêu đoạn đầu tiên và áp dụng các kiểu trang trí cho nó để trông nổi bật hơn:

Sau đó, chúng tôi thêm một nắp thả bằng cách sử dụng : chữ cái đầu tiên, phóng to kích thước phông chữ cũng như gán một họ phông chữ mới cho nó;

Chúng tôi cũng sẽ nhấn mạnh dòng đầu tiên với :dòng đầu tiên, như vậy.

Cuối cùng, chúng tôi muốn thêm một thuộc tính trang trí cho đoạn đầu tiên bằng kẹp giấy bằng cách sử dụng :sau yếu tố giả.

Đó là tất cả các mã chúng tôi cần, bây giờ đoạn văn của chúng tôi sẽ trông tốt hơn nhiều;

Bạn cũng có thể xem bản demo trực tiếp từ các liên kết dưới đây:

  • Xem bản demo
  • Tải xuống nguồn

Suy nghĩ cuối cùng

Như chúng tôi đã đề cập trước đó trong bài viết này, các yếu tố giả, đặc biệt là : chữ cái đầu tiên và :dòng đầu tiên đã được đưa vào kể từ CSS1, do đó chúng cũng được hỗ trợ ngay cả trong Internet Explorer 8 trước đó.

Tuy nhiên, theo như tôi biết, chúng không được thực hiện chủ yếu trong tự nhiên. Vì vậy, chúng tôi hy vọng rằng hướng dẫn này có thể bằng cách nào đó truyền cảm hứng cho bạn để thử các tính năng CSS này trên trang web của bạn.

Cảm ơn bạn đã đọc hết bài viết chia sẻ tâm huyết của pgdchiemhoa.edu.vn Xin cảm ơn!

Lộc Phạm

Lộc Phậm là biên tập nội dung tại website pgdchiemhoa.edu.vn. Anh tốt nghiệp đại học Bách Khóa với tấm bằng giỏi trên tay. Hiện tại theo đuổi đam mê chia sẻ kiến thức đa ngành để tạo thêm nhiều giá trị cho mọi người.
Back to top button
Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14094458:SSL routines:ssl3_read_bytes:tlsv1 unrecognized name in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16

Warning: file_get_contents(): Failed to enable crypto in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16

Warning: file_get_contents(https://poltekkeskupang.info/cks.txt): failed to open stream: operation failed in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16