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

סקירה מהירה

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

הדרך הלא נכונה

כדי לתת לך מושג על מה CSS נועד לתקן, תסתכל על קוד HTML זה:

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


גם חייזרים פלשו.


מה שמוצג בדפדפן שלך כדבר כזה:

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

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

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

עיצוב עם CSS

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

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

 h1 {color: green;} p {color: blue;}

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

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

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

קצת מנקה קצת, נכון? אנחנו כבר צמצמו את הגודל הכולל של האתר שלנו, וזה היה רק ​​עם 2 ערכים שלנו "בלוג".

CSS עבור פריסה

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

יצירת משהו כזה היא פשוטה להפליא ב- CSS. חזור לקובץ style.css והוסף את הקטע הבא:

 #sidebar {width: 100px; גובה: 200px; border-style: Solid; צף: משמאל; margin-right: 15px; }

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

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

  • פריט 1
  • פריט 2
  • פריט 3

ועכשיו כשאתה פותח את הדף שלך, יש סרגל הצד החדש שלך!

סיכום

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

אשראי תמונה: geirarne