שיווק תוכן
Blogger: סגנון CSS לקוד בבלוג שלך
חבר שאל אותי איך יצרתי את אזורי הקוד ברשומת Blogger. עשיתי זאת באמצעות תג סגנון עבור CSS בתבנית Blogger שלי. הנה מה שהוספתי:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: זהו כלל CSS שמכוון ל-HTML<p>
אלמנטים עם שם המחלקה "קוד". זה אומר שכל פסקה עם מחלקה זו תעוצב לפי המאפיינים הבאים.font-family: Courier New;
: מאפיין זה מגדיר את משפחת הגופנים ל-"Courier New". הוא מציין את הגופן שישמש עבור הטקסט בתוך האלמנטים הממוקדים.font-size: 8pt;
: מאפיין זה מגדיר את גודל הגופן ל-8 נקודות. הטקסט בתוך הרכיבים הממוקדים יוצג בגודל גופן זה.border-style: inset;
: מאפיין זה מגדיר את סגנון הגבול ל-"inset". זה יוצר מראה שקוע או לחוץ עבור הגבול סביב האלמנטים הממוקדים.border-width: 3px;
: מאפיין זה מגדיר את רוחב הגבול ל-3 פיקסלים. הגבול סביב האלמנטים יהיה בעובי של 3 פיקסלים.padding: 5px;
: מאפיין זה מוסיף 5 פיקסלים של ריפוד סביב התוכן בתוך האלמנטים הממוקדים. הוא מספק מרווח בין הטקסט לגבול.background-color: #FFFFFF;
: מאפיין זה מגדיר את צבע הרקע ללבן (#FFFFFF). לתוכן בתוך האלמנטים הממוקדים יהיה רקע לבן.line-height: 100%;
: מאפיין זה מגדיר את גובה השורה ל-100% מגודל הגופן. זה מבטיח כי שורות הטקסט מרווחות בהתאם לגודל הגופן.margin: 10px;
: מאפיין זה מוסיף שוליים של 10 פיקסלים סביב האלמנט כולו. הוא מספק מרווח בין אלמנט זה לאלמנטים אחרים בדף.
קוד ה-CSS שסופק מגדיר סגנון עבור פסקאות HTML עם המחלקה "קוד". הוא מגדיר את הגופן, גודל הגופן, סגנון הגבול, רוחב הגבול, הריפוד, צבע הרקע, גובה השורה והשוליים עבור פסקאות אלו. ניתן להחיל סגנון זה על קטעי קוד או טקסט מעוצב מראש בפוסט ב-Blogger כדי לתת להם מראה ספציפי.
כך זה ייראה:
p.code {
font-family: Courier חדש;
גודל גופן: 8pt;
סגנון גבול: שיבוץ;
רוחב הגבול: 3px;
ריפוד: 5px;
צבע רקע: #FFFFFF;
גובה קו: 100%;
שוליים: 10 פיקסלים;
}
קידוד שמח!