גיליון סגנונות מדורגים (CSS) היא מערכת לקידוד אתרים המאפשרת למעצבים לתפעל מספר תכונות בבת אחת על ידי הקצאת רכיבים מסוימים לקבוצות. לדוגמה, באמצעות קוד לרקע האתר, מעצבים יכולים לשנות את צבע הרקע או התמונה בכל דפי האתר בשינוי אחד לקובץ ה- CSS. להלן אופן יצירת CSS לאתר בסיסי.
צעדים
חלק 1 מתוך 4: כתיבת CSS Inline
שלב 1. ודא שיש לך הבנה בסיסית של תגי HTML
אתה צריך לדעת איך תגיות פועלות ושל
src
ו
href
תכונות.
שלב 2. למד כמה ממאפייני CSS הבסיסיים
תגלו שיש הרבה מאוד נכסים. עם זאת, אין צורך ללמוד את כולם.
-
כמה מאפיינים בסיסיים טובים של CSS שכדאי לדעת הם
צֶבַע
ו
משפחת גופן
- .
שלב 3. למד אודות ערכים עבור כל נכס בהתאמה
כל הנכסים זקוקים לערך. בשביל ה
צֶבַע
נכס, למשל, אתה יכול לשים את
אָדוֹם
ערך.
שלב 4. למד אודות
סִגְנוֹן
תכונת HTML.
הוא משמש בתוך אלמנט כמו
href
אוֹ
src
. כדי להשתמש בו, בתוך המרכאות שאחרי סימן השווה, יש לשים את התכונה CSS, נקודתיים ולאחר מכן את ערך הנכס. זה ידוע בתור חוק CSS.
שלב 5. הבן ש- CSS מוטבע אינו משמש בדרך כלל לאתרים על ידי מפתחי אתרים מקצועיים
Inline CSS יכול להוסיף עומס מיותר למסמך HTML. עם זאת, זוהי דרך מצוינת להכיר כיצד CSS פועל.
חלק 2 מתוך 4: כתיבת CSS בסיסית
שלב 1. הפעל את התוכנית שבה אתה רוצה להשתמש
זה אמור לאפשר לך ליצור קבצי HTML ו- CSS.
אם אין לך תוכנית מיוחדת מותקנת, תוכל להשתמש בפנקס רשימות או בעורך טקסט אחר. כל שעליך לעשות הוא לשמור את הקובץ גם כקובץ טקסט וגם כקובץ CSS
שלב 2. פתח את קובץ ה- HTML של אתר האינטרנט שלך
אתה צריך לפתוח את זה גם עם עורך HTML, אם יש לך אחד מותקן.
עורכי HTML מאפשרים לך לערוך HTML ו- CSS בו זמנית
שלב 3. צור תג בתוך ראש ה- HTML שלך
זה יאפשר לך לכתוב CSS ללא צורך בקובץ נפרד.
שלב 4. בחר אלמנט שאליו ברצונך להוסיף עיצוב והקלד את שם האלמנט ואחריו קבוצת פלטות מתולתלות ({})
כדי להפוך את הקוד שלך לקריא יותר, שים תמיד את הסד המתולתל השני על קו משלו.
שלב 5. בין הפלטה, הקלד את חוקי ה- CSS שלך כפי שהיית משתמש ב
סִגְנוֹן
תְכוּנָה.
כל שורה חייבת להסתיים בפסיק (;). כדי להפוך את הקוד לקריא, כל כלל צריך להתחיל בשורה משלו וכל שורה צריכה להיות מחורצת.
חשוב מאוד לציין שסגנון זה ישפיע על כל האלמנטים מהסוג הנבחר בדף. סגנון ספציפי יותר יידון בפרק הבא
חלק 3 מתוך 4: CSS מתקדם יותר
שלב 1. צור קובץ CSS, לא קובץ HTML ושמור אותו באמצעות
.css
סיומת.
פתח גם את קובץ ה- HTML שלך.
שלב 2. צור תג בראש ה- HTML שלך
זה יאפשר לך לקשר קובץ CSS נפרד למסמך ה- HTML שלך. תג הקישור שלך זקוק לשלוש תכונות:
rel
סוּג
ו
href
-
rel
פירושו "מערכת יחסים" ואומר לדפדפן מה הקשר למסמך ה- HTML. כאן זה צריך להיות בעל ערך של
"גיליון סגנונות"
- .
-
סוּג
מספר לאיזה סוג מדיה מקושרים. כאן זה צריך להיות בעל ערך של
"טקסט/css"
-
href
- כאן נעשה שימוש דומה לאופן השימוש בו באלמנט, אך כאן הוא חייב לקשר לקובץ CSS. אם קובץ ה- CSS נמצא באותה תיקייה של קובץ ה- HTML, יש לכתוב רק את שם הקובץ בתוך המרכאות.
שלב 3. בחר אלמנטים מסוגים שונים שאליהם ברצונך להוסיף אותו עיצוב
הוסף
מעמד
לייחס אלמנטים אלה ולהגדיר אותם שווים לשם מחלקה על פי בחירתך. זה ייתן לאלמנטים שלך את אותו סגנון.
שלב 4. הקצה איזה סטיילינג תקבל כיתה
הקלד את שם המחלקה בקובץ ה- CSS שלך עם נקודה (.) לפניו (כלומר
.מעמד
).
שלב 5. בחר אלמנטים בודדים שאליהם ברצונך להוסיף עיצוב מיוחד והוסף
תְעוּדַת זֶהוּת
תְכוּנָה.
מזהים נוצרים ב- CSS באמצעות סמל פאונד (#) ולא נקודה.
מזהים יותר ספציפיים מאשר מחלקות, לכן מזהה יחליף כל סגנון של מחלקה אם יש לו תכונה בעלת ערך שונה מהמחלקה
חלק 4 מתוך 4: למידע נוסף
שלב 1. בקר בבתי הספר w3
זהו אתר רשמי שמטרתו ללמד כישורי פיתוח אתרים. ל- w3 יש הרבה הפניות המפורטות עבור HTML ו- CSS, כמו גם שפות אינטרנט אחרות.
שלב 2. מצא אתרים אחרים המיועדים במיוחד ללמידה והוראה של HTML ו- CSS
אתרים כמו CSS tricks.com מיועדים במיוחד ללמד כישורי CSS ועיצוב אתרים. מציאת מקורות מוכרים תעזור לך במסע הלמידה שלך.
שלב 3. צור קשר עם מעצבי ומפתחי אתרים
הניסיון והידע שלהם יכולים ללמד אותך ידע ומיומנויות יקרות ערך.
שלב 4. הצג את קוד המקור של אתרים בהם אתה נתקל
צפייה ב- CSS של אתרים מפותחים יכולה להראות לך דרכים לעצב חלקים מאתרים. העתקתו כתרגול והתעסקות בקוד יכולה לעזור לך ללמוד כיצד להשתמש בתכונות CSS שונות.
