פסקה Dropcap עם השורה הראשונה של CSS ומכתבי האות הראשונה

ישנם כמה בוררים CSS או תכונות שלדעתי הן נדירות בשימוש בטבע, אבל הם למעשה היו קיימים מאז ימי CSS1; חלקם כוללים את :שורה ראשונה ו :מכתב ראשון אלמנטים של פסאודו.

איך להישתמש?

האלמנטים המדומה האלה דומים למעשה לאחיהם: לפני ואחרי: ואני חושב שגם הם פשוטים למדי. ה :מכתב ראשון יהיה למקד את האות הראשונה או תו של אלמנט נבחר, זה אלמנט פסאודו הוא נפוץ ליצור אפקט טיפוגרפי כמו טיפה. הנה איך זה נעשה.

 p: אות ראשונה font-size: 50px;  

קוד זה מציג את המצגת הבאה.

יש לציין כמה דברים, עם זאת, השפעה זו תחול רק כאשר התו הראשון לא קדמו על ידי אלמנט אחר, למשל, תמונה. בנוסף, כאשר יש לנו כמה מאותם אלמנטים ממוקדים ברצף, כולם יושפעו.

יתר על כן, במונחים של :שורה ראשונה, זה אלמנט פסאודו יכוון לשורה הראשונה של אלמנט ממוקד, דוגמה זו להלן מראה כיצד אנו מודגשים את השורה הראשונה של הפסקה.

 p: השורה הראשונה font-weight: bold;  

כמו הקוד הקודם של :מכתב ראשון, זה ישפיע גם על כל השורות הראשונות באלמנטים סעיף יש בדף.

אז, במקרים אמיתיים, כאשר אנחנו בדרך כלל רוצים להוסיף שווי ירידה או לשנות את השורה הראשונה רק על הפסקה הראשונה אנחנו צריכים להיות יותר ספציפי - או על ידי הוספת תכונה מחלקה נוספת או החלת אלה אלמנטים pseudo יחד עם :ילד ראשון או : ראשון מסוגו בחר, כך.

 p: first-child: first-letter font-size: 50px;  p: הילד הראשון: השורה הראשונה font-weight: bold;  

הנה אנחנו הולכים, הסעיף מושפע עכשיו רק הראשון.

אלמנטים פסאודו בעבודה

בסדר, תן לנו עכשיו לנסות עיצוב טוב יותר של פסקה באמצעות אלמנטים פסאודו. אבל לפני שנתחיל אנחנו צריכים גופן מיוחד לכובע הטיפה שלנו והנה הבחירה שלי: Hominis על ידי פול לויד. לאחר מכן אנו מגדירים משפחת גופנים חדשה בגיליון הסגנונות, כדלקמן.

 @ font-face font-family: 'HominisNormal'; src: url ('גופנים / HOMINIS-webfont.eot'); src: url ('גופנים / HOMINIS-webfont.woff') פורמט ('woff'), url ('גופנים / HOMINIS-webfont.ttf ') פורמט (' trutype '), כתובת אתר (' גופנים / HOMINIS-webfont.svg # HominisNormal ') פורמט (' svg '); משקל גופני: רגיל; font-style: Normal;  

לאחר מכן, אנו קובעים את משפחת הגופנים המוגדרת כברירת מחדל עבור הפסקאות.

 p color: # 555; משפחת גופן: 'ג'ורג'יה', טיימס, סריף; line-height: 24px;  

בדוגמה זו, נשתמש ב- :ילד ראשון בחר כדי למקד את הפיסקה הראשונה וליישם סגנונות דקורטיביים זה נראה בולט יותר:

 p: ילד ראשון ריפוד: 30px; border-left: 5px solid # 7f7664; צבע רקע: # f5f4f2; line-height: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); מקומות קרובים  

לאחר מכן, אנו מוסיפים מכסה טיפה באמצעות :מכתב ראשון, להגדיל את גודל הגופן, כמו גם להקצות למשפחת גופנים חדשה אליו;

 p: first-child: first-letter font-size: 72px; צף: משמאל; ריפוד: 10px; גובה: 64px; font-family: 'HominisNormal'; צבע רקע: # 7F7664; margin-right: 10px; צבע לבן; border-radius: 5px; line-height: 70px;  

נדגיש גם את השורה הראשונה :שורה ראשונה, ככה.

 p: first-child: first-line font-weight: bold; font-size: 24px; צבע: # 7f7664;  

לבסוף, אנחנו רוצים להוסיף תכונה דקורטיבית לפסקה הראשונה עם מהדק באמצעות :לאחר אלמנט פסאודו.

 p: first-child: after background: url ("... /images/paper-clip.png") no-repeat scroll 0 0 שקוף; content: ""; הצג: inline-block; גובה: 100px; תפקיד מוחלט מימין: -5px; top: -35px; רוחב: 100px;  

זה כל הקוד שאנחנו צריכים, עכשיו הפסקה שלנו צריך להיראות הרבה יותר טוב;

תוכל גם לראות את ההדגמה החיה מהקישורים הבאים:

• הצג הדגמה
• הורד מקור

מחשבה סופית

כפי שציינו קודם לכן בפוסט הזה, האלמנטים המדומים האלה, במיוחד :מכתב ראשון ו :שורה ראשונה נכלל מאז CSS1, ולכן הם נתמכים גם ב- Internet Explorer 8 קודם לכן.

עם זאת, עד כמה שאני יודע, הם לא מיושמים במידה רבה בטבע. לכן, אנו מקווים כי הדרכה זו יכולה בדרך כלשהי השראה לך לנסות את תכונות CSS באתר האינטרנט שלך.