Đoạn văn Dropcap với các phần tử dòng đầu tiên và chữ cái đầu tiên của CSS
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.
p: dòng đầu tiên font-weight: bold;
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.
p: First-child: First-letter font-size: 50px; p: First-child: First-line font-weight: bold;
Ở đó 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.
@ font-face font-family: 'HominisN normal'; src: url ('phông chữ / HOMINIS-webfont.eot'); src: url (định dạng 'phông chữ / HOMINIS-webfont.eot? Định dạng HOMINIS-webfont.ttf ') (' truetype '), url (' phông chữ / HOMINIS-webfont.svg # HominisN normal ') (' svg '); font-weight: bình thường; kiểu chữ: bình thường; Tiếp theo, chúng tôi đặt họ phông chữ mặc định cho các đoạn văn.
p màu: # 555; họ phông chữ: 'Georgia', Times, serif; chiều cao dòng: 24px;
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:
p: con đầu lòng padding: 30px; viền trái: 5px solid # 7f7664; màu nền: # f5f4f2; chiều cao dòng: 32px; hộp bóng: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); vị trí: tương đối;
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ó;
p: con đầu: chữ cái đầu tiên font-size: 72px; phao: trái; phần đệm: 10px; chiều cao: 64px; họ phông chữ: 'HominisN normal'; màu nền: # 7F7664; lề phải: 10px; màu trắng; bán kính đường viền: 5px; chiều cao dòng: 70px;
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.
p: con đầu: dòng đầu tiên font-weight: bold; cỡ chữ: 24px; màu: # 7f7664;
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ả.
p: con đầu lòng: sau nền: url ("Thẻ /images/apers-clip.png") cuộn không lặp lại 0 0 trong suốt; Nội dung: " "; hiển thị: khối nội tuyến; chiều cao: 100px; vị trí: tuyệt đối; phải: -5px; đầu trang: -35px; chiều rộng: 100px; Đó 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.
