סגנון CSS לקוד בבלוג שלך

CSS

חבר שלי שאל אותי איך הכנתי את אזורי הקוד בערך הבלוג האחרון שלי. למעשה 'זייפתי' את אזור הקוד תוך שימוש בסגנון. בתוך Blogger תוכל לערוך את התבנית שלך. הוספתי את הסגנון הבא:

p.code {font-family: Courier New; גודל גופן: 8pt; בסגנון גבול: שיבוץ; רוחב הגבול: 3 פיקסלים; ריפוד: 5 פיקסלים; צבע רקע: #FFFFFF; קו גובה: 100%; שוליים: 10 פיקסלים}

השלב הבא הוא עריכת התג שלי במצב 'ערוך HTML'. אני פשוט מצביע על הסגנון החדש שלי על ידי הכנת התג. וואלה! פירוק הסגנונות:

  • הגדר את הגופן ל- Courier New ... נראה כמו עורך קוד כללי
  • הגדר את גודל הגופן ל- 8pt כדי להיראות נכון
  • הגדר את סגנון גבול הפיסקה ל'הכניסה '. זה משכפל איך נראה אזור טקסט בעמוד.
  • הגדר את רוחב הגבול ל -2 או 3 פיקסלים. זה גורם לסגנון הגבול המשובץ להראות נכון.
  • ריפוד קובע את המרחק בין הגבול לטקסט שבתוכו.
  • צבע רקע ... הגדר אותו לבן (#FFFFFF)
  • גובה קו - התאמתי את זה ל 100% מכיוון שחלק מהסגנונות האחרים בנושא הבלוגר שלי גרמו לגובה השורה שלי לכ 200%
  • הגדר את השוליים ל -10 פיקסלים. זה מרחיק את הפסקה (תג תג) 10 פיקסלים מהכל.

זה כל מה שיש גם זה! הערה אחת: העורך שמגיע עם Blogger אינו מסוגל להציג את כפי שהוא יופיע בבלוג שלך. אבל זה עובד ונראה נהדר!

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

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

  • הצעות מחיר (“) הן“
  • > הוא>
  • > הוא>

קידוד שמח!

תגובות 3

  1. 1
  2. 2
  3. 3

מה אתה חושב?

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