הסגנון החזותי של האתר ואת הפריסה הם מוכתבים על ידי CSS או גיליונות סגנון מדורגים. אלה מסמכים המעצבים סימון HTML של דף אינטרנט, המספק לדפדפני אינטרנט הוראות כיצד להציג את הדפים הנובעים מסימון זה. CSS מטפל בפריסת עמוד, כמו גם צבע, תמונות רקע, טיפוגרפיה ועוד.
אם אתה מסתכל על קובץ CSS, תראה כי כמו כל סימון או שפת קידוד, קבצים אלה יש תחביר ספציפי אליהם. כל גיליון סגנונות מורכב ממספר כללי CSS. כללים אלה, כאשר נלקח במלואו, הם מה סגנונות האתר.
החלקים של כלל CSS
כלל CSS מורכב משני חלקים נפרדים - בורר והצהרה. בורר קובע מה הוא מנוסח על הדף ואת ההצהרה היא איך זה צריך להיות מנוסח. לדוגמה:
p {
צבע: # 000;
}
זהו כלל CSS. החלק בורר הוא "p", שהוא בורר אלמנטים עבור "פסקאות". זה היה, אם כן, בחר את כל פסקאות באתר ולספק להם סגנון זה (אלא אם כן יש פסקאות אשר ממוקד על ידי סגנונות ספציפיים יותר במקום אחר במסמך ה- CSS שלך).
החלק של הכלל שאומר "צבע: # 000;" היא מה שמכונה ההצהרה. הצהרה זו מורכבת משני חלקים - הנכס והערך.
הנכס הוא חתיכת "צבע" של הצהרה זו. זה מכתיב איזה היבט של בורר ישתנו חזותית.
הערך הוא מה ישתנה המאפיין CSS שנבחר. בדוגמה שלנו, אנו משתמשים בערך hex של # 000, שהוא CSS קצרנות עבור "שחור".
אז באמצעות כלל CSS זה, הדף שלנו יהיה פסקאות המוצגות בצבע גופן של שחור.
יסודות נכס CSS
כאשר אתה כותב תכונות CSS, אתה לא יכול פשוט להפוך אותם כפי שאתה רואה לנכון. עבור מקרים, "צבע" הוא מאפיין CSS בפועל, כך שתוכל להשתמש בו. מאפיין זה קובע את צבע הטקסט של אלמנט. אם ניסית להשתמש "צבע טקסט" או "צבע גופן" כמו CSS תכונות, אלה ייכשל כי הם לא חלקים בפועל של שפת CSS.
דוגמה נוספת היא המאפיין "תמונת רקע". מאפיין זה מגדיר תמונה שניתן להשתמש בה עבור רקע, כגון:
.logo {
background-image: url (/images/company-logo.png);
}
אם ניסית להשתמש "תמונת רקע" או "רקע רקע" כמאפיין, הם נכשלים כי, שוב, אלה אינם מאפייני CSS בפועל.
כמה תכונות CSS
קיימים מספר תכונות CSS שבהן ניתן להשתמש כדי לסגנן אתר. חלק מהדוגמאות הן:
- גבול (כולל סגנון גבול, צבע גבול וגובה רוחב)
- ריפוד (כולל ריפוד עליון, ריפוד-ימין, ריפוד-תחתון, וריפוד-שמאל)
- שוליים (כולל שוליים - עליונים, שוליים-ימניים, שוליים-תחתונים ושוליים-שמאליים)
- משפחת גופן
- גודל גופן
- צבע רקע
- רוֹחַב
- גוֹבַה
תכונות CSS אלה נהדרות להשתמש בהן כדוגמאות, משום שהן כולן פשוטות מאוד, גם אם אינך יודע CSS, אתה יכול כנראה לנחש מה הם עושים על פי השמות שלהם.
ישנם תכונות CSS אחרות כי תיתקל גם אשר לא יכול להיות ברור כמו איך הם עובדים על פי שמותיהם:
- לָצוּף
- ברור
- הצפה
- המרת טקסט
- Z- אינדקס
כאשר אתה מקבל עמוק יותר לתוך עיצוב אתרים, תוכלו להיתקל (ולהשתמש) כל התכונות האלה ועוד!
מאפיינים זקוקים לערכים
בכל פעם שאתה משתמש במאפיין, עליך לתת לו ערך - ומאפיינים מסוימים יכולים לקבל ערכים מסוימים בלבד.
בדוגמה הראשונה שלנו של המאפיין "צבע", אנחנו צריכים להשתמש בערך צבע. זה יכול להיות ערך hex , ערך RGBA, או אפילו מילות מפתח צבע . כל אחד מהערכים האלה יעבוד, עם זאת, אם השתמשת במילה "קודר" עם המאפיין הזה, זה לא יעשה כלום כי, כפי תיאורית כמו מילה זו עשויה להיות, זה לא ערך מוכר ב- CSS.
הדוגמה השנייה שלנו ל "תמונת רקע" מחייבת שימוש בנתיב תמונה כדי להביא תמונה בפועל מקובצי האתר שלך. זהו הערך / התחביר הדרוש.
לכל מאפייני CSS יש ערכים שהם מצפים. לדוגמה:
- צבע גבול מצפה לערך צבע
- גודל הגבול מצפה לערך שינוי גודל, כמו פיקסלים או אחוזים
- סגנונות גבול מצפים לאחד מהסגנונות השמורים המשמשים לנכס זה, כגון "מוצק"
אם אתה עובר את רשימת המאפיינים CSS, תגלו כי לכל אחד מהם יש ערכים ספציפיים שהם ישתמשו כדי ליצור את סגנונות הם מיועדים.
בעריכת ג'רמי ג'יררד