CSS מלמעלה למטה – כולל CSS3

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


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

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

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

תחילת העבודה עם CSS

אם אתה מוכן לקפוץ פנימה, הנה מה מכסה המדריך הזה:

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

מבוא ל- CSS

Contents

מבוא ל- CSS

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

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

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

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

שלושה מקומות לכתוב כללי CSS

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

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

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

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

שיוך כללי CSS למרכיבי HTML ספציפיים

כללי CSS בנויים משני חלקים: בורר והצהרה. כל הצהרה מורכבת גם משני חלקים: נכס וערך.

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

בוררים וספציפיות

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

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

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

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

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

שימושים נפוצים ב- CSS

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

גופן לעיצוב

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

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

דגם התיבה

ניתן להבין את המרחב סביב כל אלמנט HTML על ידי מחשבה על מה שמכונה מודל התיבה:

תרשים של דגם התיבה

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

שקול את האלמנט הבא בפסקת HTML:

פיסקה של טקסט.

מה תהיה ההשפעה של כתיבת הכלל CSS הבא?

p {
ריפוד: 10px;
גבול: 1px מוצק;
שולי: 10px;
}

הפסקה תופיע מוקפת ב:

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

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

שימוש בצפות

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

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

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

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

לנכס הצף ארבעה ערכים מקובלים: שמאל, ימין, אין וירושה. במקרה של הדוגמא שלנו לעיל:

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

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

לדוגמה, תפריט ניווט טיפוסי עשוי להיראות כך ב- HTML:

  • בית

  • החנות שלנו

  • עלינו

  • צור קשר.

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

li {
לצוף: שמאל;
}

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

נקה את הציפה

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

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

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

שימוש בנכס המיקום

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

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

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

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

מה חדש ב- CSS3

מה חדש ב- CSS3

בעוד CSS2 היה מפרט יחיד, CSS3 נחלק ליותר מחמישים מודולים שונים, כל אחד בשלב אחר של פיתוח וקבלה..

עבודה שוטפת על CSS3 מנוהלת על ידי World Wide Web Consortium, או W3C, והם מציעים מיקום מרכזי בו תוכלו לעקוב אחר כל עבודות הסטנדרטיזציה המתמשכות של CSS3..

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

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

יצירת אתרים רספונסיביים עם CSS

יצירת אתרים רספונסיביים עם CSS

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

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

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

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

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

הטכניקה הראשונה לנייד מציעה שני יתרונות ראויים לציון:

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

לימוד עיצוב רספונסיבי

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

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

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

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

כיצד להכין כפתורי דלת הזזה

כיצד להכין כפתורי דלת הזזה

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

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

לחץ על תמונה כדי לעבור בין הנפשה.

כפתורי דלת הזזה דוגמה 1

יצירת תמונות שלך

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

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

כפתור כחול
כפתור שחור

מה שאנחנו צריכים לעשות זה לפצל כל כפתור לשתי תמונות:

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

להלן התמונות שנצליח להגיע אליהם לאחר שגזרנו אותן בגדלים המתאימים:

כפתור כחול משמאלכפתור כחול מימיןכפתור כחול מימין
כפתור שחור משמאלכפתור שחור מימיןכפתור שחור מימין

לאחר שתיצור את ארבע התמונות, אתה מוכן להתחיל לקוד.

כפתור HTML

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

טקסט כפתור

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

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

הוספת תמונות כפתור

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

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

.כפתור הזזה {
תצוגה: inline-block;
רוחב: אוטומטי;
שולי: 20px;
}

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

.קישור הזזה {
תמונת רקע: url (‘כפתור כחול-ימינה.png’);
גודל רקע: אוטומטי 100%;
עמדת רקע: נכון;
רקע-חוזר: אין-חוזר;
}
.טקסט הזזה {
תמונת רקע: url (‘כחול-כפתור-שמאל.png’);
גודל רקע: אוטומטי 100%;
עמדת רקע: שמאל;
רקע-חוזר: אין-חוזר;
}

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

כפתור רע

סטיילינג כפתור

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

.קישור הזזה {
תצוגה: inline-block;
}
.טקסט הזזה {
ריפוד: 20px;
תצוגה: inline-block;
}

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

.קישור הזזה {
שוליים-שמאל: 17 פיקסלים;
}
.טקסט הזזה {
שוליים-שמאל: -17 פיקסלים;
}

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

לפני שנמשיך הלאה, בואו ונמשיך להוסיף גם סטיילינג לטקסט הכפתורים שלנו.

.טקסט הזזה {
צבע: #fff;
גודל גופן: 14p;
font-family: ‘Open-Sans’, Arial, sans-serif;
שינוי טקסט: אותיות גדולות;
מודגש;
יישור טקסט: מרכז;
}

בשלב זה הכפתור שלנו למעשה נראה כמו כפתור!

כפתור טוב

אפקט ריחוף כפתור

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

.הזזה-טקסט: רחף,. החלקה-טקסט: פעיל {
תיבת צל: הכניסה 0 0 0 1000 פיקסלים rgba (255,255,255, .2);
}

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

אנו יכולים לתקן את שני הבעיות הללו עם מספר שורות קוד שנוספות לרכיב ה- span.

.טקסט הזזה {
-webkit-מעבר-מאפיין: צל תיבה; / * ספארי * /
-משך מעבר של webkit: .2s; / * ספארי * /
מעבר-מאפיין: צל תיבה;
משך מעבר: .2s;
רדיוס גבול: 12 פיקסלים;
}

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

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

החלפת תמונות כפתור

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

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

נתחיל ב- CSS.

.קישור כפתור זרם.
תמונת רקע: url (‘שחור-כפתור-ימינה.png’);
}
.כפתור זרם. החלקה-טקסט {
תמונת רקע: url (‘כפתור שחור-שמאל.פנג’);
}

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

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

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

לכן, כדי לייעד כל כפתור ככפתור להחלפה, פשוט נוסיף את הכיתה הזו לעטיפה החיצונית החיצונית:

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

$ (‘. לחצן toggle’). לחץ על (פונקציה () {
$ (זה) .toggleClass (‘כפתור נוכחי’);
להחזיר שקר;
});

ישנם כמה דברים שקורים בקוד הזה. בואו נלך בזה.

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

אלמנט הסקריפט השני מכיל פונקציית jQuery פשוטה.

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

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

עם פיסות הקוד האלו שנוכל, אנו יכולים להחליף את הכפתור לתוכן ליבנו.

לחץ על תמונה כדי לעבור בין הנפשה.

כפתור דלת הזזה דוגמא 2

קוד המקור המלא

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

כפתורי דלת הזזה

.כפתור הזזה {
תצוגה: inline-block;
רוחב: אוטומטי;
שולי: 20px;
}
.קישור הזזה {
תמונת רקע: url (‘כפתור כחול-ימינה.png’);
גודל רקע: אוטומטי 100%;
עמדת רקע: נכון;
רקע-חוזר: אין-חוזר;
תצוגה: inline-block;
שוליים-שמאל: 17 פיקסלים;
}
.טקסט הזזה {
תמונת רקע: url (‘כחול-כפתור-שמאל.png’);
גודל רקע: אוטומטי 100%;
עמדת רקע: שמאל;
רקע-חוזר: אין-חוזר;
תצוגה: inline-block;
ריפוד: 20px;
שוליים-שמאל: -17 פיקסלים;
צבע: #fff;
גודל גופן: 14p;
font-family: ‘Open-Sans’, Arial, sans-serif;
שינוי טקסט: אותיות גדולות;
מודגש;
יישור טקסט: מרכז;
-webkit-מעבר-מאפיין: צל תיבה; / * ספארי * /
-משך מעבר של webkit: .2s; / * ספארי * /
מעבר-מאפיין: צל תיבה;
משך מעבר: .2s;
רדיוס גבול: 12 פיקסלים;
}
.הזזה-טקסט: רחף,. החלקה-טקסט: פעיל {
תיבת צל: הכניסה 0 0 0 1000 פיקסלים rgba (255,255,255, .2);
}
.קישור כפתור זרם.
תמונת רקע: url (‘שחור-כפתור-ימינה.png’);
}
.כפתור זרם. החלקה-טקסט {
תמונת רקע: url (‘כפתור שחור-שמאל.פנג’);
}


לחצן הפעלה

כפתור קישור

$ (‘. לחצן toggle’). לחץ על (פונקציה () {
$ (זה) .toggleClass (‘כפתור נוכחי’);
להחזיר שקר;
});

הפעלת הכפתור שלך לשימוש טוב

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

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

הכל על צבעי CSS

הכל על צבעי CSS

אחד הדברים החשובים ביותר – והמעשיים לבלבל – שניתן לציין באמצעות CSS הוא צבע. כמעט כל האלמנטים בדף אינטרנט יכולים להיות צבעוניים באמצעות CSS.

מאפייני הצבע של CSS

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

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

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

הצהרות צבע

מלבד מאפייני CSS השונים שניתן להשתמש בהם כדי לציין צבע, ישנן שלוש דרכים שונות לזהות צבע ב- CSS: RGB, ערך hex או שם.

/ * שלושת אלה יהיו באותו צבע. * /

.red-rgb {
צבע רקע: rgb (255, 0, 0);
}

.משושה אדום {
צבע רקע: # ff0000;
}

.שם אדום {
צבע רקע: אדום;
}

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

ערכי RGB

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

אלה הם מה שמכונה “צבעי אור ראשוניים.” ניתן להשתמש בשילוב של שלושת הצבעים בעוצמות שונות כדי ליצור כל צבע שהעין האנושית מסוגלת לראות. זה מכונה “ערבוב צבע תוסף.”

(כדאי לדעת שזה קשור לעין האנושית ולא לאור עצמו).

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

כסטנדרט, מחשבים משתמשים בטווח שבין אפס (0 – כל הדרך) ועד 255 (כל הדרך הלאה) עבור כל תת-פיקסל (לדוגמה, 128 נמצא באמצע הדרך). זה 256 עוצמות אפשריות עבור כל תת-פיקסל, מה שאומר שאפשר לאחסן את הערך של כל תת-פיקסל כבתים של 8 סיביות (2 8 = 256).

מכיוון שישנם שלושה צבעים, שכל אחד מהם מיוצג עם 8 סיביות, המספר הכולל של הצבעים שניתן לייצג בדרך זו הוא מעל 16 מיליון (256 3 = 16,777,216).

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

rgb (0, 128, 255)

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

במערכת זו, לבן (כל הצבעים עד הסוף) הוא rgb (255, 255, 255) ושחור (כל הצבעים כבוי) הוא rgb (0, 0, 0).

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

rgb (0.0, 50.0, 100.0)

שימוש זה אינו נפוץ במיוחד.

ערכי הקס

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

# 0080ff

הצמד הראשון מייצג את הערך האדום, הזוג השני מייצג את הערך הירוק, והצמד השלישי מייצג את הערך הכחול. בדוגמה זו פירושו של 00 אין אדום בכלל, 80 פירושו ירוק באמצע הדרך, ו- ff פירושו כחול לאורך כל הדרך. אז זהו אותו צבע כמו rgb (0, 128, 255).

זה אולי נראה מעט מבלבל אם לא תשתמש במספרים הקסדצימליים. במערכת העשרונית הרגילה שלנו, לכל ספרה יכולים להיות 10 ערכים (0-9). במספור ההקסדצימלי, לכל ספרה יש 16 ערכים אפשריים (0-9, a-f).

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

במערכת זו, לבן הוא #ffffff ושחור הוא # 000000.

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

שמות צבע CSS

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

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

כיום, היתרון הגדול ביותר שיש שמות צבעוניים הוא שקל יותר לזכור אותם. לדוגמה, קל יותר לזכור את האור דבק (ולהקליד נכון) לעומת המקבילות שלו, # add8e6 או rgb (173, 216, 230).

רשימת שמות צבע של CSS

שם צבע
ערכי הקס
דוגמה צבעונית
aliceblue# f0f8ff
לבן עתיק# faebd7
אקווה# 00ffff
אקוומרין# 7fffd4
צבע תכלת# f0ffff
בז ‘# f5f5dc
ביסק# ffe4c4
שחור# 000000
בלנצ’דאלמונד# ffe4c4
כחול# 0000ff
כחול סגול# 8a2be2
חום# a52a2a
בורווד# deb887
צביעת כחול# 5f9ea0
ירקרק# 7fff00
שוקולד# d2691e
אלמוג# ff7f50
דבק קורנפלור# 6495
חלב תירס# fff8dc
ארגמן# dc143c
כחול כהה# 00008 ב
חושך# 008b8b
Darkgoldenrod# b8860b
אפור כהה# a9a9a9
ירוק כהה# 006400
אפור כהה# a9a9a9
Darkkhaki# bdb76b
כהה מגנטה# 8b008b
ירוק כהה# 556b2f
כתום כהה# ff8c00
כהה# 9932cc
אדום כהה# 8b0000
דרקססלמון# e9967a
מגניבה# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
Darkslategrey# 2f4f4f
דרוקטורקיז# 00ced1
כהה סגול# 9400d3
ורוד עמוק# ff1493
deepskyblue# 00bfff
dimgray# 696969
dimgrey# 696969
dodgerblue# 1e90ff
אש# b22222
פרחוני לבן# fffaf0
יער יער# 228b22
ורוד פוקסיה# ff00ff
גינסבורו#dcdcdc
רוח רפאים# f8f8ff
זהב# ffd700
גולדרוד# daa520
אפור# 808080
ירוק# 008000
ירוק צהוב# adff2f
אפור# 808080
דבש# f0fff0
ורוד עז# ff69b4
הודי# cd5c5c
אינדיגו# 4b0082
שנהב# fffff0
חאקי# f0e68c
לבנדר# e6e6fa
סומק לבנדר# fff0f5
ירוק דשא# 7cfc00
לימנצ’יפון#fffacd
כחול בהיר# add8e6
אור קלורלי# f08080
קליקן# e0ffff
אור צהוב# fafad2
אפור בהיר# d3d3d3
ירוק בהיר# 90ee90
אפור בהיר# d3d3d3
ורוד בהיר# ffb6c1
אורות סלמון# ffa07a
ירוק אור# 20b2aa
דבק אור# 87 צ’יפה
אורות# 778899
lightlategrey# 778899
דבק קל# b0c4de
צהוב בהיר# ffffe0
ליים# 00ff00
ירוק ליים# 32cd32
מצעים# faf0e6
חרבון# 800000
בינונית אקוומרין# 66 קדאא
כחול בינוני# 0000cd
בינונית# ba55d3
בינוני-סגול# 9370db
ירוק בינוני# 3cb371
כחול בינוני# 7b68ee
ירוק בינוני# 00fa9a
בינוני טורקיז# 48d1cc
בינוני-סגול# c71585
כחול חצות# 191970
מינקטקרם# f5fffa
טעות# ffe4e1
מוקסין# ffe4b5
navajowhite#ffdead
חיל הים# 000080
ישן# fdf5e6
זית# 808000
זית# 6b8e23
תפוז# ffa500
כתום אדום# ff4500
סחלב# da70d6
palegoldenrod# eee8aa
ירוק חיוור# 98fb98
paleturquoise#afeeee
palevioletred# db7093
papayawhip# ffefd5
אפרסק# ffdab9
פרו# cd853f
ורוד# ffc0cb
שזיף# dda0dd
אבקת דבק# b0e0e6
סגול# 800080
מרענן מחדש# 663399
אדום# ff0000
ורדרד# bc8f8f
כחול מלכותי# 4169e1
אוכף שובר# 8b4513
סלמון# fa8072
שזוף# f4a460
ירוק-ים# 2e8b57
צדף# fff5ee
סיינה# a0522d
כסף# c0c0c0
שמים כחולים# 87 סייב
קצת כחול# 6a5acd
אפור צפחה# 708090
סלגריי# 708090
שלג#fffafa
ירוק מעיין# 00ff7f
מתכת כחולה# 4682b4
שזוף# d2b48c
ירוק כחלחל# 008080
גדילן# d8bfd8
עגבנייה# ff6347
טורקיז# 40e0d0
סגול# ee82ee
חיטה# f5deb3
לבן#ffffff
עשן לבן# f5f5f5
צהוב# ffff00
צהוב ירוק# 9acd32

משאבי צבע אחרים של CSS

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

כתיבת CSS יעילה

כתיבת CSS יעילה

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

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

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

מדוע יעילות CSS יעילה

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

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

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

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

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

הבולטים הם החשובים ביותר

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

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

לכן, אם הקוד שלך קורא ul > לי אימג ‘, אז הדבר הראשון שיתפרש הוא אימג’.

בורר המפתחות הוא החלק האחרון שהקצנו לנו בסוף הבורר.

ארבעה סוגים של בוחרי CSS

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

בורר תעודות זהות

בורר הזיהוי מתייחס לאלמנט HTML ספציפי המשתמש בתכונה ID, ונראה כך:

# ניווט ראשי

ב HTML, ישמש בזה כדלקמן:

בורר כיתות

בורר הכיתות יבחר אלמנטים בתוך ייחוס כיתתי ספציפי, ונראה כך:

.מרכז

ב HTML, ישמש בזה כדלקמן:

בורר תגיות

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

ul

ב- HTML, התג פשוט יהיה מעוצב כפי שמוכתב על ידי ה- CSS בכל פעם שהתג משמש (ul במקרה זה).

בורר אוניברסלי

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

*

כללי CSS יעילים שיש לזכור

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

אל תשתמש בבוררים צאצאים

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

דוגמה לבוחרי צאצאים שאסור לך להשתמש בהם, כוללת:

כותרת h3

כותרת תחתונה עמ ‘

.חלוקת גוף

אל תייג תעודות זהות

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

li # שמאל ניווט

אין צורך לומר לדפדפן לאיזה תג יוחל הבורר. במקום זאת, הדבר יעיל יותר:

# ניווט שמאלי

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

השתמש בירושה של CSS ככל האפשר

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

לדוגמה, גודל הגופן יורש. אז אם אתה מגדיר אותו לגוף המסמך, אין צורך להגדיר אותו לתגיות p ו- li.

הגבל את החוקים שלך

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

לדוגמה

גוף. וויגט-שמאל # ווידג’ט

זהו קוד גרוע. פשוט קורה יותר מדי. מצד שני:

#widget

.יישומון-שמאל

אלה יעילים בהרבה.

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

כלים לשיפור ה- CSS שלך

אם תקפיד על הכללים שלעיל, קוד ה- CSS שלך יהיה יעיל בהרבה.

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

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

כתיבת CSS יעילה היא רעיון טוב

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

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

מאסטר CSS מקוון

מאסטר CSS מקוון

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

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

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

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

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

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

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

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

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

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

השראה לעיצוב

עבודות מדהימות של CSS

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

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

המילה הרשמית על CSS3

המילה הרשמית על CSS3

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

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

קריאה מומלצת

קריאה מומלצת

אחת הדרכים היעילות ביותר לפתח הבנה ומומחיות עמוקה יותר עם CSS3 היא להשתמש במספר מקורות ושיטות הדרכה.

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

  • CSS3 למעצבי אתרים (2010), מאת דן סידרוהולם: עם קדם הקדמה מאת ג’פרי זלדמן, מייסד A List Apart, והמלצות מאת כריס קויייר מ- CSS-Tricks, ואריק מאייר, מחבר מספר ספרים על CSS, טקסט זה מאת דן סידרהולם, מייסד שותף של דריבל, הוא תקן הזהב לטקסטים של CSS3.
  • HTML ו- CSS: תכנן ובנה אתרי אינטרנט (2011), מאת ג’ון דוקט: טקסטים אלה כוללים HTML ו- CSS כאחד, והיא אחת ההקדמות הפופולריות והמוערכות ביותר לשני הנושאים..
  • למדו CSS ביום אחד ולמדו זאת היטב (2015), מאת ג’יימי צ’אן: אם אתם מתחילים ב- CSS, ואתם רוצים להשיג את העניין הבסיסי במהירות, הספר הזה הוא בשבילכם.
  • CSS: The Missing Manual (2015) מאת דייוויד סוייר מקפרלנד: טקסט זה אינו מכוון אך ורק למתחילים, אלא מכסה נושאים מתקדמים כמו Flexbox והשימוש בסאס. אם אתה מוכן להתייצב מסטטוס למתחילים, טקסט זה יעזור לך להגיע לשם.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map