מדריך מהיר על שפת העיצוב של האינטרנט.
CSS (גליונות סגנון מדורגים) הוא שגורם לדפי אינטרנט להיראות טובים וייצוגיים. זהו חלק חיוני בפיתוח אתרים מודרני ומיומנות חובה לכל מעצב ומפתח אתרים.
במאמר זה אתן לך מבוא מהיר שיעזור לך להתחיל לעבוד עם CSS.
השקנו גם קורס CSS באורך מלא בחינם ב- Scrimba. לחץ כאן כדי לבדוק זאת.
אני מניח שיש לך הבנה בסיסית ב- HTML, אך פרט לכך אין תנאים מוקדמים להדרכה זו.
מתחילים
נתחיל בללמוד כיצד אנו יכולים לכלול CSS בפרויקטים שלנו. בדרך כלל יש שלוש דרכים לעשות זאת.
1. CSS מוטבע
ראשית, אנו יכולים לכלול CSS ישירות באלמנטים ה- HTML שלנו. לשם כך אנו משתמשים styleבמאפיין ואז אנו מספקים לו מאפיינים.
Hello world!
כאן אנו נותנים לו את המאפיין של color, ומגדירים את הערך ל blue, מה שמביא לדברים הבאים:
אנחנו יכולים גם להגדיר מספר מאפיינים בתוך styleהתג אם נרצה. עם זאת, אני לא רוצה להמשיך בדרך זו, מכיוון שהדברים מתחילים להיות מבולגנים אם ה- HTML שלנו עמוס בתוכו הרבה CSS.
זו הסיבה שהונהגה השיטה השנייה הכוללת CSS.
2. CSS פנימי
הדרך האחרת לכלול CSS היא שימוש styleבאלמנט headבחלק של מסמך ה- HTML. זה נקרא סטיילינג פנימי.
h1 { color: blue; } באלמנט הסגנון נוכל לתת את העיצוב לאלמנטים ה- HTML שלנו על ידי בחירת האלמנטים ולספק תכונות סטיילינג. בדיוק כמו שהחלנו את colorהנכס על h1האלמנט שלמעלה.
3. CSS חיצוני
הדרך השלישית והמומלצת ביותר לכלול CSS היא שימוש בגליון סגנונות חיצוני. אנו יוצרים גיליון סגנונות עם .cssסיומת וכוללים את הקישור שלו במסמך ה- HTML, כך:
בקוד לעיל כללנו את קישור style.cssהקובץ באמצעות linkהאלמנט. לאחר מכן אנו כותבים את כל ה- CSS שלנו בגליון סגנונות נפרד הנקרא style.cssכך שיהיה לניהול בקלות.
h1 { color: blue; } ניתן לייבא את גיליון סגנונות זה גם HTMLלקבצים אחרים , כך שזה נהדר לשימוש חוזר.
בוחרי CSS
כפי שדנו קודם, CSS היא שפת עיצוב המשמשת לעיצוב אלמנטים של HTML. וכדי לעצב אלמנטים, ראשית עליך לבחור אותם. כבר ראיתם הצצה לאיך זה עובד, אבל בואו נצלול קצת יותר לעומק בבוחרי CSS ונראה שלוש דרכים שונות בהן תוכלו לבחור אלמנטים של HTML.
1. אלמנט
הדרך הראשונה לבחור אלמנט HTML היא פשוט להשתמש בשם, וזה מה שעשינו לעיל. בואו נראה איך זה עובד:
h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } הדוגמה לעיל כמעט מסבירה את עצמה. אנחנו בחירת אלמנטים שונים כמו h1, p, divולתת להם תכונות סגנון שונות. font-sizeשולטת בגודל של הטקסט, colorקובע את צבע הטקסט marginמוסיף ריווח מסביב לרכיב.
2. כיתה
דרך נוספת לבחירת אלמנטים ב- HTML היא באמצעות תכונת הכיתה. ב- HTML, אנו יכולים להקצות שיעורים שונים לאלמנטים שלנו. לכל אלמנט יכולים להיות מספר מחלקות, וכל מחלקה יכולה להיות מיושמת גם על מספר אלמנטים.
בואו נראה את זה בפעולה:
This is heading
.container { margin: 10px; } בקוד לעיל, הקצנו את הכיתה של containerאלמנט div. בגיליון הסגנונות, אנו בוחרים את הכיתה שלנו לפי .classNameפורמט ומעניקים לה 10pxשוליים.
3. תעודת זהות
כמו שיעורים, אנו יכולים גם להשתמש במזהים כדי לבחור אלמנטים של HTML ולהחיל עליהם סטיילינג. ההבדל היחיד בין מחלקה ומזהה הוא שניתן להקצות מזהה אחד לרכיב HTML אחד בלבד.
This is a paragraph
#para1 { color: green; font-size: 16px; } הדוגמה שלמעלה מציגה כיצד אנו מקצים מזהה לאלמנט הפסקה ובהמשך משתמשים בבורר המזהה בגליון הסגנונות כדי לבחור את הפסקה ולהחיל עליה את הסגנון.
גופנים וצבעים
CSS מספק לנו ממש מאות אפשרויות לשחק עם גופנים וצבעים ולהפוך את אלמנטים ה- HTML שלנו ליפים. אנו יכולים לבחור משני סוגים של שמות משפחה של גופנים:
1. משפחה גנרית: קבוצה של משפחות פונטים בעלות מראה דומה (כמו 'סריף' או 'מונוספייס')
2. משפחת פונטים: משפחת פונטים ספציפית (כמו 'Times New Roman' או 'Arial')
עבור צבעים, אנו יכולים להשתמש בשמות צבעים מוגדרים מראש, או בערכי RGB, HEX, HSL, RGBA, HSLA.
CSS is Coooooool!!!!
.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 
כפי שניתן לראות בדוגמה שלעיל, יש לנו אלמנט div עם הכיתה של container. בתוך ה- div הזה יש h1תג עם קצת טקסט בתוכו.
הסגנונות, אנו בוחרים את המעמד מיכל ולהגדיר שלה width, height, background-color, ו text-align.
Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.
Conclusion
You might feel a bit overwhelmed by all this information, but don’t worry.
Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
