10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

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





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



1. קוד CSS בסיסי לעיצוב פסקה קלה

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





נניח שאתה רוצה כל פסקה (

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

קָשׁוּר: גיליון ה- Cheat Sheet



קוד ה- CSS לכך הוא:

p { font-size: 120%; color: dimgray; }

פָּשׁוּט! כעת, בכל פעם שהדפדפן מעביר פסקה, הטקסט יירש את הגודל (120 אחוז מהנורמלי) והצבע ('dimgray').



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

2. CSS דוגמא לשינוי רישיות

רוצה ליצור ייעוד לפסקאות שצריכות להיות קטנות? מדגם CSS לכך יהיה:



p.smallcaps { font-variant: small-caps; }

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

Your paragraph here.

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

אם ברצונך לשנות קבוצת טקסט למקרה ספציפי, השתמש בדוגמאות קוד CSS הבאות:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

האחרון באותיות רישיות באות הראשונה בכל משפט.

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

עם קישורים, כל 'a' ואחריו נקודתיים, לא נקודה.

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

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

a { text-decoration: none; }

כל דבר עם תג הקישור ('א') יישאר ללא קו תחתון. רוצה להדגיש אותו כאשר המשתמש מרחף מעליו? פשוט הוסף:

a:hover { text-decoration: underline; }

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

רוצה למשוך יותר תשומת לב לקישור שלך? כפתור קישור הוא דרך מצוינת לעשות זאת. זה דורש עוד כמה שורות:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

בואו להסביר את קוד ה- CSS לדוגמה.

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

צבע הרקע נקבע בצבע רקע וצבע טקסט עם צבע. ריפוד מגדיר את גודל התיבה --- הטקסט מרופד על ידי 10px אנכית ו- 25px אופקית.

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

התקנת פרטיות "חלונות 10"

קוד ה- CSS 'display: inline-block' הוא קצת יותר מסובך. בקיצור, זה מאפשר לך להגדיר את הגובה והרוחב של האובייקט. הוא גם מבטיח שהוא יתחיל קו חדש כשהוא מוכנס.

6. קוד לדוגמה של CSS ליצירת תיבת טקסט

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

p.important { border-style: solid; border-width: 5px; border-color: purple; }

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

Your important paragraph here.

זה יעבוד בלי קשר לפסקה הגדולה ככל שתהיה.

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

border-width: 5px 8px 3px 9px;

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

7. מרכיבי יישור מרכזי עם קוד CSS בסיסי

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

עבור רכיב בלוק (בדרך כלל תמונה), השתמש במאפיין השוליים:

.center { display: block; margin: auto; }

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

img { margin: auto; }

כדי ללמוד מדוע זה עובד כך, בדוק את הסבר על מודל תיבת CSS ב- W3C .

אבל מה אם אתה רוצה למרכז טקסט באמצעות CSS? השתמש במדגם CSS לדוגמה:

.centertext { text-align: center; }

רוצה להשתמש בכיתה 'מרכז טקסט' כדי למרכז את הטקסט בפסקה? פשוט הוסף את המחלקה הזו ל-

תָג:

This text will be centered.

8. דוגמאות CSS להתאמת ריפוד

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

נניח שאתה רוצה שלכל תמונה יהיו 20 פיקסלים של ריפוד בצד שמאל וימין, ו -40 פיקסלים בחלק העליון והתחתון. ביצוע קוד CSS הבסיסי ביותר לכך הוא:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

עם זאת, ישנה הוראת CSS קצרה יותר, המציגה את כל המידע הזה בשורה אחת:

img { padding: 40px 25px 40px 25px; }

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

img { padding: 40px 25px }

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

9. הדגש שורות טבלה עם קידוד CSS

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

tr:hover { background-color: #ddd; }

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

10. CSS דוגמה להעברת תמונות בין שקוף לאטום

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

img { opacity: 0.5; filter: alpha(opacity=50); }

התכונה 'מסנן' עושה את אותו הדבר כמו 'אטימות', אך Internet Explorer 8 ומעלה לא מזהים את מדידת האטימות. לדפדפנים ישנים יותר, כדאי לכלול אותו.

כעת, כשהתמונות שקופות מעט, תוכל להפוך אותן לאטומות לחלוטין בעזרת העכבר:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 דוגמאות CSS עם קוד מקור

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

10 דוגמאות קוד CSS הקלות שוחזרו שוב:

  1. עיצוב פסקה קל
  2. שנה אותיות אותיות
  3. שנה את צבעי הקישור
  4. הסר קו תחתון של הקישור
  5. צור כפתור קישור
  6. צור תיבת טקסט
  7. מרכיבי יישור מרכז
  8. התאם ריפוד
  9. הדגש שורות טבלה
  10. הפוך תמונות אטומות

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל גיליון הרמאות של מאפייני ה- CSS3 Essential

שליטה בתחביר CSS חיוני עם גיליון הרמאות של מאפייני CSS3 שלנו.

קרא הבא נושאים קשורים
  • תִכנוּת
  • עיצוב אתרים
  • CSS
  • תסריט
על הסופר כריסטיאן קאולי(1510 מאמרים פורסמו)

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

עוד מאת כריסטיאן קאולי

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה