Viết to chữ cái đầu trong 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 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 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 p: dòng đầu tiên font-weight: bold; Giống như mã trước đó của 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 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 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 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 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 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:
Suy nghĩ cuối cùngNhư 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à 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. |