כיצד להכניס פסקאות באמצעות CSS

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

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

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

התחביר של מאפיין זה פשוט. כך תוסיף כניסה לטקסט לכל הפסקאות במסמך.

p {
כניסה לטקסט: 2em;
}

התאמה אישית של הכניסות

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

instagram viewer
קידוד HTML שיטות עבודה מומלצות.

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

p + p {
כניסה לטקסט: 2em;
}

מכיוון שאתה מכניס את השורה הראשונה, עליך לוודא שגם בפסקאות שלך אין מקום נוסף ביניהן (שהוא ברירת המחדל של הדפדפן). מבחינה סגנונית, צריך שיהיה לך רווח בין פסקאות אוֹ כניסה לשורה הראשונה, אך לא לשניהם.

p {
שוליים למטה: 0;
ריפוד תחתון: 0;
}
p + p {
שוליים-עליון: 0;
ריפוד עליון: 0;
}

כניסות שליליות

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

אמור, למשל, שיש לך פיסקה שהיא צאצא של ציטוט, ואתה רוצה שהוא יוטה בשלילה. אתה יכול לכתוב CSS זה:

הצעת מחיר p {
כניסה לטקסט: -.5em;
}

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

לגבי שוליים וריפודים

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