הבנת השינויים העיקריים CSS3
ההבדל הגדול ביותר בין CSS2 ו- CSS3 הוא ש- CSS3 נפרץ לחלקים שונים, הנקראים מודולים. כל אחד מהמודולים הללו עושה את דרכו דרך ה- W3C בשלבים שונים של תהליך ההמלצה. תהליך זה עשה את זה הרבה יותר קל עבור חלקים שונים של CSS3 להתקבל מיושם בדפדפן על ידי יצרנים שונים.
אם תשווה את התהליך הזה למה שקרה עם CSS2, שבו הכל הוגש כמסמך יחיד עם כל המידע על גיליונות סגנון מדורגים , אתה מתחיל לראות את היתרונות של שבירת ההמלצה לתוך חלקים קטנים יותר. מכיוון שכל אחד מהמודולים עובד על כל אחד בנפרד, יש לנו מגוון רחב בהרבה של תמיכה בדפדפן עבור מודולי CSS3.
כמו בכל מפרט חדש ומשתנה, הקפד לבדוק את דפי CSS3 ביסודיות כמו דפדפנים ומערכות הפעלה רבות ככל שתוכל. זכור שהמטרה היא לא ליצור דפי אינטרנט שנראים בדיוק אותו דבר בכל דפדפן, אך כדי לוודא שכל הסגנונות שבהם אתה משתמש, כולל סגנונות CSS3, נראים נהדר בדפדפנים התומכים בהם ושהם נופלים בגאווה לדפדפנים ישנים יותר אל.
חדש CSS3 בוררים
CSS3 מציע חבורה של דרכים חדשות אתה יכול לכתוב כללי CSS עם בוררי CSS חדשים, כמו גם קומבינאטור חדש, וכמה אלמנטים חדשים פסאודו.
שלושה בוררי תכונות חדשים:
- תחילת התכונה תואמת את האלמנט המדויק [foo = = "bar"] לאלמנט יש תכונה הנקראת foo שמתחיל עם "bar" לדוגמה
- סיומת תכונה תואמת אלמנט מדויק [foo $ = "bar"] לאלמנט יש תכונה בשם foo שמסתיימת עם "bar" למשל
- תכונה מכילה את אלמנט ההתאמה [foo = = "bar"] לאלמנט יש תכונה הנקראת foo המכילה את המחרוזת "bar" eg
16 כיתות פסאודו חדשות:
- :שורש
- אלמנט הבסיס של המסמך. ב- HTML זה תמיד.
- : nth-child (n)
- השתמש באפשרות זו כדי להתאים אלמנטים מדויקים של הילד או להשתמש במשתנים כדי לקבל התאמות לסירוגין.
- : nth-last-child (n)
- התאמה מדויקת של אלמנטים של הילד, שנספרו מן האחרון.
- : nth-of-type (n)
- התאם אלמנטים של אחים עם אותו שם לפניו בעץ המסמך.
- : nth-last-of-type (n)
- התאמת אלמנטים אחים עם אותו שם לספור מלמטה.
- :ילד אחרון
- התאם את אלמנט הילד האחרון של ההורה.
- : ראשון מסוגו
- התאימו את אלמנט האחים הראשון מסוג זה.
- : האחרון מסוג
- התאם את אלמנט האחים האחרון מסוג זה.
- :ילד יחיד
- התאם את האלמנט שהוא הילד היחיד של ההורה שלו.
- : רק של סוג
- התאם את האלמנט שהוא היחיד מסוגו.
- :ריק
- התאם את האלמנט שאין לו ילדים (כולל צמתים לטקסט).
- :יַעַד
- התאם אלמנט שהוא היעד של URI המפנה.
- : מופעל
- התאם את הרכיב כאשר הוא מופעל.
- :נָכֶה
- התאם את האלמנט כאשר הוא מושבת.
- :בָּדוּק
- התאם את הרכיב כאשר הוא מסומן (לחצן הבחירה או תיבת הסימון).
- :לא ים)
- התאמה כאשר האלמנט אינו תואם את בורר פשוט s.
קומבינטור חדש אחד:
- אלמנט רכיבים
- התאם כאשר elementB עוקב אחרי אלמנט אחר, לא בהכרח מיד.
מאפיינים חדשים
CSS3 גם הציג מספר תכונות CSS חדשות. רבים מן המאפיינים הללו היו ליצור סגנונות חזותיים אשר סביר להניח לשייך יותר עם תוכנית גרפיקה כמו Photoshop. חלקם, כמו רדיוס הגבול או תיבת צל, כבר סביב מאז המבוא אם CSS3. אחרים, כמו Flexbox או אפילו רשת CSS הם סגנונות חדשים יותר, כי הם עדיין נחשבים לעתים קרובות תוספות CSS3.
ב- CSS3, מודל הקופסה לא השתנה. אבל יש חבורה של תכונות סגנון חדש שיכול לעזור לך סגנון הרקע ואת הגבולות של תיבות שלך.
רקע מרובה אני mages
באמצעות סגנונות הרקע-רקע, מיקום הרקע וסגנונות הרקע החוזרים, באפשרותך לציין מספר תמונות רקע שיוצגו על גבי זו בתבנית. התמונה הראשונה היא השכבה הקרובה ביותר למשתמש, עם אלה הבאים צבועים מאחור. אם יש צבע רקע, הוא צבוע מתחת לכל שכבות התמונה.
מאפיינים חדשים של סגנון הרקע
יש גם כמה תכונות רקע חדשות ב- CSS3.
- רקע קליפ
- מאפיין זה מגדיר כיצד יש לקצץ את תמונת הרקע. ברירת המחדל היא תיבת הגבול, אך ניתן לשנות אותה לתיבת הריפוד או לתיבת התוכן.
- מקור הרקע
- מאפיין זה קובע אם הרקע צריך להיות מקומות בתיבה ריפוד, תיבת הגבול או תיבת התוכן.
- גודל הרקע
- תכונה זו מאפשרת לך לציין את גודל תמונת הרקע. זה מאפשר לך למתוח תמונות קטנות יותר כדי להתאים את הדף.
שינויים בתכונות סגנון רקע קיים
ישנם גם מספר שינויים בתכונות סגנון הרקע הקיימות:
- רקע לחזור
- קיימים שני ערכים חדשים עבור מאפיין זה: שטח עגול. החלל מרחיב את התמונה באריחים באופן שווה בתוך התיבה מבלי לקצץ. סיבוב rescales תמונת הרקע כך יהיה אריח מספר שלם של פעמים בתיבה.
- רקע-קובץ מצורף
- ערך חדש "מקומי" נוסף כך שהרקע יגלגל עם תוכן האלמנט כאשר אלמנט זה כולל פס גלילה.
- רקע כללי
- המאפיין רקע מקצר מוסיף בגודל ובמקורות המוצא.
תכונות גבול
ב CSS3 גבולות יכול להיות סגנונות אנחנו רגילים (מוצק, כפול, מקווקו, וכו ') או שהם יכולים להיות תמונה. בנוסף, CSS3 מביא את היכולת ליצור פינות מעוגלות. תמונות גבול מעניינות משום שאתה יוצר תמונה של כל ארבעת הגבולות ולאחר מכן אומר ל- CSS כיצד להחיל את התמונה על הגבולות שלך.
תכונות סגנון גבול חדש
יש כמה מאפייני גבול חדשים ב- CSS3:
- רדיוס הגבול
- גבול-ימין-רדיוס , גבול תחתית-ימין רדיוס , גבול תחתית-שמאל-רדיוס , גבול-שמאל-רדיוס שמאלי
- מאפיינים אלה מאפשרים לך ליצור פינות מעוגלות על הגבולות שלך.
- border-image-source
- מציין את קובץ מקור התמונה שישמש במקום את סגנונות הגבול שהוגדרו כבר.
- border-image-slice
- מייצג את הקיזוזים הפנימיים מקצוות תמונות הגבול
- border-image-width
- מגדיר את ערך הרוחב של תמונת הגבול שלך.
- הגבול- image-outset
- מציין את הסכום שאזור תמונה הגבול משתרע מעבר לתיבת הגבול.
- הגבול- image-stretch
- מגדיר כיצד הצדדים ואת החלקים האמצעיים של התמונה הגבול צריך להיות רעפים או scaled.
- תמונת גבול
- המאפיין קצר עבור כל מאפייני התמונה הגבול.
תכונות CSS3 נוספות הקשורות לגבולות ורקעים
כאשר תיבה שבורה בהפסקה של עמוד, מעבר עמודה עבור מעבר שורה (עבור אלמנטים מוטבעים) מאפיין תיבת-קישוט-קופון מגדיר כיצד תיבות חדשות עוטפות עם גבול וריפוד. רקעים ניתן לחלק בין תיבות שבורות מרובים באמצעות הנכס הזה.
יש גם נכס צל תיבת כי ניתן להשתמש כדי להוסיף צללים אלמנטים תיבת.
עם CSS3, עכשיו אתה יכול בקלות להגדיר דף אינטרנט עם מספר עמודות ללא שולחנות או מסובך תג תג div. אתה פשוט אומר את הדפדפן כמה עמודות אלמנט הגוף צריך וכמה רחב הם צריכים להיות. בנוסף, תוכל להוסיף גבולות (כללים), צבעי רקע המרחיבים את גובה העמודה, והטקסט שלך יזרום את כל העמודות באופן אוטומטי.
עמודות CSS3 - הגדר את המספר והרוחב של העמודות
קיימים שלושה מאפיינים חדשים שמאפשרים לך להגדיר את המספר והרוחב של העמודות שלך:
- רוחב העמודה
- מגדיר את רוחב העמודות שלך צריך להיות. הדפדפן יזרם את הטקסט כדי למלא את החלל עם עמודות רחבות.
- ספירת עמודות
- מגדיר את מספר העמודות בעמוד. לאחר מכן, הדפדפן ייצור עמודות רחבות מספיק כדי שיתאימו למרחב, אך רק את המספר שציינת.
- עמודות
- נכס קצרנות שבו אתה יכול להגדיר את רוחב או מספר (או שניהם, אבל זה לעתים רחוקות הגיוני).
פערים
פערים וכללים ממוקמים בין עמודות באותו תרחיש מרובה עמודים. הפערים ידחפו את העמודות, אבל הכללים לא תופסים מקום. אם כלל עמודה גדול יותר מזה של הפער, הוא יחפוף בין עמודות סמוכות. קיימים חמישה נכסים חדשים עבור כללי עמודה ופערים:
- פער עמודות
- מגדיר את רוחב הפערים בין העמודות.
- צבע כלל-עמודה
- מגדיר את צבע הכלל.
- סגנון כלל-עמודה
- מגדיר את סגנון הכלל (מוצק, מנוקד, כפול וכו ').
- רוחב כלל העמודה
- מגדיר את רוחב הכלל.
- כלל טור
- מאפיין קצרני המגדיר את כל שלושת נכסי הטור בבת אחת.
CSS3 מעברי עמודות, Spanning עמודות, וכן מילוי עמודות
הפסקות עמודות משתמשות באותן אפשרויות CSS2 המשמשות להגדרת הפסקות בתוכן מעומעם, אך עם שלושה מאפיינים חדשים: break-before , break-after , ו- break- in.
בדומה לטבלאות, באפשרותך להגדיר אלמנטים לעמודי טווח עם המאפיין span-column. זה מאפשר לך ליצור כותרות כי טווח עמודות מרובות יותר כמו עיתון.
מילוי העמודות קובע כמה תוכן יהיה בכל עמודה. עמודות מאוזנות משתדלות לשים את אותה כמות תוכן בכל עמודה, בעוד ש'אוטומטי 'זורם רק את התוכן עד שהטור מלא ולאחר מכן עובר לשלב הבא.
תכונות נוספות ב CSS3 זה Aren & # 39; לא כלול CSS2
יש הרבה תכונות נוספות ב- CSS3 שלא היו קיימות ב- CSS2, כולל:
- מודול פריסת תבנית CSS ו- CSS3 מודול מיקום רשת : יצירת רשתות עם CSS.
- CSS3 מודול טקסט : טקסט מתאר ואפילו ליצור צללים עם CSS.
- CSS3 מודול צבע : עכשיו עם אטימות.
- שינויים במודל התיבה : כולל מאפיין מארקים הפועל כמו תג IE.
- CSS3 ממשק משתמש : נותן לך סמנים חדשים, תגובות לפעולות, שדות נדרשים, ואפילו שינוי גודל של אלמנטים .
- שאילתות מדיה : שאילתות מדיה מאפשרות לך גמישות רבה יותר בעת הגדרת אופן השימוש בגיליון סגנונות. לדוגמה, אתה יכול להגדיר גיליון סגנונות רק עבור התקני כף יד שיש להם חלון תצוגה גדול מ 20em.
- CSS3 מודול רובי : מספק תמיכה בשפות המשתמשות באודם טקסטואלי כדי להוסיף הערות.
- CSS3 מודול מדיה ממוזערת : לקבלת תמיכה נוספת עבור מדיה מעומעמת (נייר, שקפים וכו ').
- תוכן שנוצר : L כותרות עליונות ותחתונות, הערות שוליים ותוכן אחר שנוצר באופן פרוגרמטי, במיוחד עבור מדיה מדורגת.
- CSS3 מודול דיבור : שינויים ב- CSS.