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

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

במאמר הדרכה זה, תלמד את כל היסודות של CSS כדי להתחיל לבנות יישומים היום.

מתי להשתמש בשיטות היישום השונות של CSS

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

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

שימוש בדוגמא CSS Inline

כותרת ראשית

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

אם אתה מתכוון לחבוש הכל h2 אלמנטים בדף אינטרנט עם הצבע הצהוב. יהיה עליך להשתמש ב- CSS סִגְנוֹן מילת המפתח, יחד עם צֶבַע המאפיין והערך שלו (צהוב) על כל אלמנט. עם זאת, דרך יעילה יותר לביצוע משימה זו היא שימוש ב- CSS פנימי.

שימוש בדוגמא פנימית של CSS

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

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

שימוש בדוגמא CSS חיצונית

הכנסת שורת הקוד למעלה ב- תג של קובץ ה- HTML שלך יקל על עיצוב דף האינטרנט שלך בשיטת CSS חיצונית. ההיבט היחיד של הקוד למעלה שישתנה הוא הערך שהוקצה ל- href property, שתמיד צריך להיות שם קובץ ה- CSS (כולל סיומת .css).

קָשׁוּר: מה הם גיליונות סגנון מדורגים ולמה משמש CSS? כאשר קובץ ה- CSS שלך מקושר למסמך ה- HTML שלך, כעת תוכל להתחיל לכתוב קוד CSS בקובץ ה- CSS שלך. בשלב זה, ההבדל היחיד בין דוגמת ה- CSS הפנימית שלמעלה לבין ה- CSS החיצוני הוא ה- סִגְנוֹן תָג. לכן הכנסת הקוד הבא בקובץ CSS תניב את אותה התוצאה כמו דוגמת ה- CSS הפנימית שלמעלה.

h2 {
צבע: צהוב;
}

חקר המבנה הבסיסי של CSS

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

הבורר

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

הצהרת התחלה וסיום

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

הרכוש

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

מפריד הנכס/ערך

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

הערך

ערך הנכס CSS מייצג את הסגנון המדויק שברצונך להחיל על נכס נתון. הערכים הזמינים לשימוש תלויים בסוג המאפיין. לדוגמה, המאפיין המשמש במבנה למעלה הוא צֶבַע, כלומר יש רק סוג אחד של ערך שניתן להחיל על נכס זה, שם צבע. א צֶבַע ניתן להציג את הערך באחת מארבע צורות: ערך מילה (כמו בדוגמה למעלה), ערך הקסדצימלי, ערך HSL (גוון, רוויה, בהירות) או ערך RGB (אדום, ירוק, כחול).

מפריד ההצהרה

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

מה זה מזהים ושיעורים?

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

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

עם זאת, אם זה h2 לאלמנט יש תְעוּדַת זֶהוּת המשמש כבורר בהצהרת CSS, ללא קשר למיקומה (לפני או אחרי) להצהרת CSS שיש לה את h2 האלמנט כבורר שלו, העדפת הסטיילינג ב- תְעוּדַת זֶהוּת ההצהרה תמיד תעדיף את האלמנט. בקיצור, א תְעוּדַת זֶהוּת יעקוף בוחרי סגנון אחרים.

חשוב לזכור כי בהצהרת CSS, מזהים התחל בסימן מספר והשיעורים מתחילים עם עצירה. ההבדל המשמעותי ביותר בין תְעוּדַת זֶהוּת וכן א מעמד האם זה א תְעוּדַת זֶהוּת הוא ייחודי, בעוד א מעמד ניתן לשכפל. למשל, אוסף של דומים ניתן לתת תגים זהים מעמד שֵׁם; אולם, ה תְעוּדַת זֶהוּת מכל אחד התג צריך להיות ייחודי.

חקר סוגי הסוגים השונים

ישנם שלושה סוגים בסיסיים של בוחרים - יחידים, מרובים ומקוננים. עד כה, מאמר זה סקר בהרחבה בוחרים בודדים.

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

דוגמא בסיסית לתבנית HTML

ברוך הבא

Lorem ipsum dolor sit amet consectetur, aditisiting elit. Impedit odit מתנודד
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  אדריכלו
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







על אודות

Lorem ipsum dolor sit amet consectetur, aditisiting elit. Impedit odit מתנודד
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  אדריכלו
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







כותרת

Lorem ipsum dolor sit amet consectetur aditisiting elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
לעצור את מקסימום הזמן? Eius modi optio ad, nisi tempora sapiente?







כותרת

Lorem ipsum dolor sit amet consectetur aditisiting elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
לעצור את מקסימום הזמן? Eius modi optio ad, nisi tempora sapiente?

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

שימוש בדוגמאות מרובות בוחרים

#אודות, .תוכן {
צבע לבן;
צבע רקע: כהה;
}

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

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

שימוש בדוגמאות בוחרות מקוננות

#ברוך הבא p טווח {
צבע אדום;
}

הבורר המקונן למעלה מכיל תְעוּדַת זֶהוּת ושני רכיבי HTML. כפי שאתה יכול לראות מהדוגמה למעלה, בורר מקונן מספק לך את היכולת למקד אלמנט ספציפי בתוך קבוצה.

לכן, רק ה לְהַקִיף הסעיף ב תג של div עם ה מזהה ברוך הבא יהיה מצופה בצבע אדום.

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

הערת CSS מכילה שני קווים קדימה, שתי כוכביות וקטע הערות.

/ * כך כותבים הערת שורה אחת ב- CSS */

/*
כך אתה כותב
הערה מרובת שורות
ב- CSS
*/

מה הלאה?

מאמר זה מספק לך את המרכיבים הבסיסיים של CSS. כעת תוכל להשתמש בזיהוי:

• כל אחת משלוש שיטות היישום של CSS
• כל האלמנטים בהצהרת CSS
• שלושת סוגי הבוררים הבסיסיים
• הערת CSS

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

Tailwind CSS לעומת Bootstrap: איזו מסגרת טובה יותר?

בעת בחירת מסגרת CSS חשוב למצוא את המתאימה לדרישותיך.

קרא הבא

על הסופר