Dropcap ย่อหน้ากับ CSS ขององค์ประกอบบรรทัดแรกและตัวอักษรตัวแรก

มีตัวเลือก CSS หรือคุณสมบัติไม่กี่ตัวที่ฉันคิดว่าไม่ค่อยใช้ใน wild แต่จริง ๆ แล้วมันมีอยู่จริงตั้งแต่ CSS1; บางคนรวมถึง :เส้นแรก และ :จดหมายฉบับแรก pesudo องค์ประกอบ.

วิธีใช้?

องค์ประกอบหลอกเหล่านี้โดยทั่วไปทำงานคล้ายกับพี่น้องของพวกเขา -: ก่อนและ: หลังจาก - และฉันคิดว่าพวกเขายังค่อนข้างตรงไปตรงมา :จดหมายฉบับแรก จะกำหนดเป้าหมายอักษรตัวแรกหรือตัวละครขององค์ประกอบที่เลือกนี้ องค์ประกอบหลอก มักใช้เพื่อสร้างเอฟเฟ็กต์การพิมพ์เช่นฝาปิด นี่คือวิธีที่มันทำ.

 p: อักษรตัวแรก font-size: 50px;  

โค้ดนี้ให้ผลลัพธ์ในงานนำเสนอต่อไปนี้.

ควรสังเกตสิ่งเล็ก ๆ น้อย ๆ อย่างไรก็ตามเอฟเฟกต์นี้จะมีผลเฉพาะเมื่อตัวละครตัวแรกไม่ได้นำหน้าด้วยองค์ประกอบอื่นตัวอย่างเช่นรูปภาพ นอกจากนี้เมื่อเรามีองค์ประกอบเป้าหมายเหมือนกันบางส่วนองค์ประกอบทั้งหมดจะได้รับผลกระทบด้วย.

เพิ่มเติมในแง่ของการ :เส้นแรก, นี้ องค์ประกอบหลอก จะกำหนดเป้าหมายบรรทัดแรกขององค์ประกอบที่กำหนดเป้าหมายตัวอย่างด้านล่างนี้แสดงให้เห็นว่าเราเป็นตัวหนาบรรทัดแรกของย่อหน้าอย่างไร.

 p: บรรทัดแรก font-weight: ตัวหนา;  

ชอบรหัสก่อนหน้าของ :จดหมายฉบับแรก, สิ่งนี้จะส่งผลต่อบรรทัดแรกทั้งหมดในองค์ประกอบย่อหน้าที่มีอยู่ในหน้า.

ดังนั้นในกรณีจริงเมื่อเราต้องการเพิ่ม drop cap หรือแก้ไขบรรทัดแรก เท่านั้น ในย่อหน้าแรกเราจำเป็นต้องมีความเฉพาะเจาะจงมากขึ้น - โดยการเพิ่มคุณสมบัติคลาสพิเศษหรือใช้องค์ประกอบหลอกเหล่านี้พร้อมกับ : ครั้งแรกที่เด็ก หรือ : ครั้งแรกของชนิด ตัวเลือกเช่นนั้น.

 p: ลูกคนแรก: ตัวอักษรตัวแรก font-size: 50px;  p: ลูกคนแรก: บรรทัดแรก font-weight: ตัวหนา;  

เราไปแล้วย่อหน้าที่ได้รับผลกระทบตอนนี้เป็นเพียงย่อหน้าแรกเท่านั้น.

องค์ประกอบ Pseudo ในที่ทำงาน

เอาล่ะให้เราลองออกแบบรูปลักษณ์ย่อหน้าที่ดีขึ้นโดยใช้องค์ประกอบแบบหลอก แต่ก่อนที่เราจะเริ่มต้นเราต้องการแบบอักษรพิเศษสำหรับหมวกหล่นของเราและนี่คือตัวเลือกของฉัน: Hominis โดย Paul Lloyd จากนั้นเราจะกำหนดตระกูลแบบอักษรใหม่ในสไตล์ชีทดังนี้.

 @ font-face font-family: 'HominisNormal'; src: url ('แบบอักษร / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') รูปแบบ ('embedded-opentype'), url ('font / HOMINIS-webfont.woff') รูปแบบ ('woff'), url ('font / รูปแบบ HOMINIS-webfont.ttf ') (' truetype '), url (' แบบอักษร / HOMINIS-webfont.svg # HominisNormal ') รูปแบบ (' svg '); น้ำหนักตัวอักษร: ปกติ; แบบอักษร: ปกติ;  

ต่อไปเราจะตั้งตระกูลฟอนต์เริ่มต้นสำหรับย่อหน้า.

 p color: # 555; แบบอักษรตระกูล: 'Georgia', Times, serif; line-height: 24px;  

ในตัวอย่างนี้เราจะใช้ : ครั้งแรกที่เด็ก ตัวเลือกเพื่อกำหนดเป้าหมายย่อหน้าแรกและใช้สไตล์การตกแต่งเพื่อให้ดูโดดเด่นยิ่งขึ้น:

 p: ลูกคนแรก padding: 30px; ขอบซ้าย: 5px solid # 7f7664; สีพื้นหลัง: # f5f4f2; line-height: 32px; กล่องเงา: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); ตำแหน่ง: ญาติ;  

จากนั้นเราจะเพิ่มการปิดโดยใช้ :จดหมายฉบับแรก, ขยายขนาดแบบอักษรรวมทั้งกำหนดตระกูลแบบอักษรใหม่ให้กับมัน

 p: ลูกคนแรก: ตัวอักษรตัวแรก font-size: 72px; ลอย: ซ้าย; การขยาย: 10px; ความสูง: 64px; แบบอักษรตระกูล: 'HominisNormal'; สีพื้นหลัง: # 7F7664; ระยะขอบขวา: 10px; สี: ขาว รัศมีเส้นขอบ: 5px; line-height: 70px;  

เราจะเน้นย้ำบรรทัดแรกด้วย :เส้นแรก, ชอบมาก.

 p: ลูกคนแรก: บรรทัดแรก font-weight: ตัวหนา; ขนาดตัวอักษร: 24px; สี: # 7f7664;  

สุดท้ายเราต้องการเพิ่มคุณลักษณะการตกแต่งในย่อหน้าแรกโดยใช้คลิปหนีบกระดาษที่ใช้ :หลังจาก องค์ประกอบหลอก.

 p: ลูกคนแรก: หลัง พื้นหลัง: url ("… /images/paper-clip.png") เลื่อนแบบไม่ซ้ำ 0 0 โปร่งใส เนื้อหา: " "; จอแสดงผล: บล็อกแบบอินไลน์; ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ขวา: -5px; ด้านบน: -35px; ความกว้าง: 100px;  

นั่นคือรหัสทั้งหมดที่เราต้องการตอนนี้ย่อหน้าของเราควรจะดูดีขึ้นมาก

คุณสามารถดูการสาธิตสดได้จากลิงค์ด้านล่าง:

• ดูการสาธิต
• แหล่งดาวน์โหลด

ความคิดสุดท้าย

ดังที่เราได้กล่าวถึงก่อนหน้านี้ในโพสต์นี้องค์ประกอบเทียมเหล่านี้โดยเฉพาะ :จดหมายฉบับแรก และ :เส้นแรก ถูกรวมตั้งแต่ CSS1 ดังนั้นจึงรองรับแม้ใน Internet Explorer 8 ก่อนหน้านี้.

ถึงกระนั้นเท่าที่ฉันรู้พวกมันไม่ได้ถูกนำไปใช้อย่างแพร่หลายในป่า ดังนั้นเราหวังว่าบทเรียนนี้จะเป็นแรงบันดาลใจให้คุณลองใช้คุณสมบัติ CSS เหล่านี้ในเว็บไซต์ของคุณ.