כיצד ליצור CSS?

מצא אתרים אחרים שמטרתם ללמוד וללמד HTML ו- CSS. אתרים כמו CSS tricks.com מיועדים במיוחד להוראת CSS ומיומנויות עיצוב אתרים.

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

חלק 1 מתוך 4: כתיבת css מוטבע

1

ודא שיש לך הבנה בסיסית בתגי HTML. עליך לדעת כיצד תגים פועלים srcושל hrefהמאפיינים והתכונות.
2
למד כמה מהמאפיינים הבסיסיים של CSS. תגלה שיש הרבה מאוד נכסים. עם זאת, אין צורך ללמוד את כולם.
- כמה מאפייני CSS בסיסיים טובים לדעת הם colorו font-family.
3

למד על ערכים עבור כל נכס בהתאמה. כל המאפיינים זקוקים לערך. עבור colorהנכס, למשל, אתה יכול לשים את redהערך.
4

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

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

חלק 2 מתוך 4: כתיבת css בסיסי

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

צור <style>תג בתוך ראש ה- HTML שלך. זה יאפשר לך לכתוב CSS ללא צורך בקובץ נפרד.
4

בחר אלמנט שאליו ברצונך להוסיף סטיילינג והקלד את שם האלמנט ואחריו סט סוגריים מתולתלים (). כדי להפוך את הקוד שלך לקריא יותר, שים תמיד את הסד המסולסל השני על קו משלו. { }
5
בין הסוגרים, הקלד את כללי ה- CSS שלך כפי שהיית עושה באמצעות styleהתכונה. כל שורה חייבת להסתיים בנקודה-פסיק (;). כדי להפוך את הקוד שלך לקריא, כל כלל צריך להתחיל בשורה משלו וכל שורה צריכה להיות מוטעת.
- חשוב מאוד לציין כי עיצוב זה ישפיע על כל האלמנטים מהסוג הנבחר בדף. סגנון ספציפי יותר יעסוק בחלק הבא.

זה אמור לאפשר לך ליצור קבצי HTML ו- CSS.

חלק 3 מתוך 4: CSS מתקדם יותר

1

צור קובץ CSS ולא קובץ HTML ושמור אותו באמצעות .cssהתוסף. פתח גם את קובץ ה- HTML שלך.
2
צור <link>תג בראש ה- HTML שלך. זה יאפשר לך לקשר קובץ CSS נפרד למסמך ה- HTML שלך. תג הקישור שלך צריך שלוש תכונות: rel, type, ו href.
- relפירושו "קשר" ומספר לדפדפן מה הקשר למסמך HTML. כאן זה צריך להיות בעל ערך של "stylesheet".
- typeמספר לאיזה סוג מדיה מקושרים. כאן זה צריך להיות בעל ערך של"text/css"
- hrefכאן משמש באופן דומה לאופן השימוש בו <a>באלמנט, אך כאן עליו לקשר לקובץ CSS. אם קובץ ה- CSS נמצא באותה תיקיה כמו קובץ ה- HTML, רק שם הקובץ צריך להיכתב בתוך המרכאות.
3

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

הקצה איזה סטיילינג יקבל הכיתה. הקלד את שם הכיתה בקובץ ה- CSS שלך עם נקודה (.) שקדמה לו (כלומר .class).
5
בחר אלמנטים בודדים שאליהם תרצה להוסיף סגנון מיוחד והוסף idמאפיין. מזהים נוצרים ב- CSS באמצעות סמל פאונד (#) ולא נקודה.
- מזהים הם ספציפיים יותר ממחלקות, כך שמזהה יעקוף כל סגנון מחלקה אם יש לו מאפיין בעל ערך שונה מזה.

צור קובץ CSS ולא קובץ HTML ושמור אותו באמצעות ה-.

חלק 4 מתוך 4: למידע נוסף

1

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

מצא אתרים אחרים שמטרתם ללמוד וללמד HTML ו- CSS. אתרים כמו CSS tricks.com מיועדים במיוחד להוראת CSS ומיומנויות עיצוב אתרים. איתור מקורות מכובדים יעזור לך במסע הלמידה שלך.
3

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

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

טיפים

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

אזהרות

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

קרא גם: איך לשתף פוסט באינסטגרם?