פארשטאנד דער הויפּט ענדערונגען צו CSS3
די ביגאַסט חילוק צווישן CSS2 און CSS3 איז אַז CSS3 איז ספּליט זיך אין פאַרשידענע סעקשאַנז, גערופן מאַדזשולז. יעדער פון די מאַדזשולז מאכט זייַן וועג דורך די וו 3 ק אין פאַרשידענע סטאַגעס פון די רעקאָממענדאַטיאָן פּראָצעס. דעם פּראָצעס האט געמאכט עס פיל גרינגער פֿאַר פאַרשידן ברעקלעך פון קסס 3 צו זיין אנגענומען און ימפּלאַמענאַד אין דעם בלעטערער דורך פאַרשידענע מאַניאַפאַקטשערערז.
אויב איר פאַרגלייַכן דעם פּראָצעס צו וואָס געטראפן מיט CSS2, ווו אַלץ איז דערלאנגט ווי אַ איין דאָקומענט מיט אַלע די קאַסקאַדינג סטייל שיץ אינפֿאָרמאַציע ין עס, איר אָנהייבן צו זען די אַדוואַנידזשיז פון ברייקינג די רעקאָמענדאַציע אַרויף אין קלענערער, יחיד ברעקלעך. ווייַל יעדער פון די מאַדזשולז איז געענדיקט אויף ינדיווידזשואַלי, מיר האָבן אַ פּלאַץ פון בראָדעווקאַס שטיצן פֿאַר CSS3 מאַדזשולז.
ווי מיט קיין נייַע און טשאַנגינג ספּעסאַפאַקיישאַנז, זיין זיכער צו פּרובירן דיין CSS3 בלעטער ונ דורך ווי פילע בראַוזערז און אַפּערייטינג סיסטעמס ווי איר קענען. געדענקען אַז דער ציל איז ניט צו מאַכן וועב בלעטער וואָס קוקט פּונקט די זעלבע אין יעדער בלעטערער, אָבער צו ענשור אַז קיין סטיילז וואָס איר נוצן, אַרייַנגערעכנט CSS3 סטיילז, קוק גרויס אין די בראַוזערז וואָס שטיצן זיי און אַז זיי פאַלן צוריק גראַציעז פֿאַר עלטערע בראַוזערז וואָס טוה נישט.
New CSS3 סעלעקטאָרס
CSS3 אָפפערס אַ פּלאַץ פון נייע וועגן איר קענען שרייַבן CSS כּללים מיט נייַע CSS סעלעקטאָרס, און אַ נייַ קאָמבינאַטאָר און עטלעכע נייַע פּסעוודאָ-עלעמענטן.
דרייַ נייַע אַטריביוט סעלעקטאָרס:
- אַטטריבוטע אָנהייב שוועבעלעך פּונקט עלעמענט [פאָאָ ^ = "באַר"] דער עלעמענט האט אַ אַטריביוט גערופן פאָאָ וואָס הייבט מיט "באַר" למשל
- אַטריביוט ענדיינינג ווייזט פּונקט עלעמענט [פיאָ $ = "באַר"] דער עלעמענט האט אַ אַטריביוט גערופן פאָאָ אַז ענדס מיט "באַר" למשל
- אַטאַטשט כּולל די גלייַכן עלעמענט [פאָאָ * = "באַר"] דער עלעמענט האט אַ אַטריביוט גערופן פאָאָ אַז כּולל די שטריקל "באַר" למשל
16 נייע פּסעוודאָ קלאסן:
- : root
- דער שורש עלעמענט פון דעם דאָקומענט. אין HTML דאָס איז שטענדיק.
- : nth-child (n)
- ניצן דעם צו גלייַכן פּינטלעך קינד עלעמענטן אָדער נוצן וועריאַבאַלז צו באַקומען אָלטערנייטינג שוועבעלעך.
- : nth-last-child (n)
- גלייַכן פּינטלעך קינד עלעמענטן קאַונטינג אַרויף פון די לעצטע.
- : nth-of-type (n)
- גלייַכן סיבלינג עלעמענטן מיט דער זעלביקער נאָמען איידער עס אין די דאָקומענט בוים.
- : nth-last-of-type (n)
- גלייַכן סליידינג עלעמענטן מיט דער זעלביקער נאָמען קאַונטינג אַרויף פון די דנאָ.
- : לעצט-קינד
- גלייַכן די לעצטע קינד עלעמענט פון דער פאָטער.
- : ערשטער-פון-טיפּ
- גלייַכן די ערשטער סיבלינג עלעמענט פון דעם טיפּ.
- : לעצט-פון-טיפּ
- גלייַכן די לעצטע סיבלינג עלעמענט פון דעם טיפּ.
- :איינציג קינד
- גלייַכן דעם עלעמענט וואָס איז דער בלויז קינד פון זייַן פאָטער.
- : בלויז-פון-טיפּ
- גלייַכן דעם עלעמענט וואָס איז דער בלויז איינער פון זייַן טיפּ.
- : empty
- גלייַכן דעם עלעמענט וואָס האט קיין קינדער (אַרייַנגערעכנט טעקסט נאָודז).
- : ציל
- גלייַכן אַן עלעמענט וואָס איז דער ציל פון די ריפערינג URI.
- :ערמעגליכט
- גלייַכן דעם עלעמענט ווען עס איז ענייבאַלד.
- : disabled
- גלייַכן דעם עלעמענט ווען עס איז פאַרקריפּלט.
- : checked
- גלייַכן די עלעמענט ווען עס איז אָפּגעשטעלט (ראַדיאָ קנעפּל אָדער טשעקקבאָקס).
- : ניט (s)
- גלייַכן ווען דער עלעמענט טוט נישט גלייַכן דעם פּשוט סעלעקטאָר s.
איין נייַ קאָמבינאַטאָר:
- elemental ~ elementB
- גלייַכן ווען עלעמענט באָאָ ערגעץ נאָך עלעמענטאַ, ניט דאַווקע מיד.
New פּראָפּערטיעס
CSS3 אויך באַקענענ אַ נומער פון נייַע CSS פּראָפּערטיעס. פילע פון די פּראָפּערטיעס זענען צו מאַכן וויזשאַוואַל סטיילז אַז וואָלט מסתּמא מיטאַרבעטער מער מיט אַ גראַפיקס פּראָגראַם ווי פאָטאָשאָפּ. עטלעכע פון די, ווי ברעג-ראַדיוס אָדער קעסטל-שאָטן, זענען אַרום זינט די הקדמה אויב קסס 3. אנדערע, ווי פלעקסבאָקס אָדער אַפֿילו CSS גריד זענען נייַער סטיילז וואָס זענען נאָך אָפט געהאלטן קסס 3 אַדישאַנז.
אין CSS3, די קעסטל מאָדעל האט נישט פארענדערט. אבער עס זענען אַ בינטל פון נייַ סטיל פּראָפּערטיעס אַז קענען העלפן איר סטיל די באַקגראַונדז און געמארקן פון דיין באָקסעס.
קייפל באַקגראַונדז איך מאַדזשעס
ניצן די הינטערגרונט-בילד, הינטערגרונט-שטעלע, און הינטערגרונט-איבערחזרן סטיילז איר קענען ספּעציפיצירן קייפל הינטערגרונט בילדער צו זיין לייערד אויף שפּיץ פון איין אנדערן אין די קעסטל. דער ערשטער בילד איז די שיכטע קלאָוסאַסט צו דער באַניצער, מיט די ווייַטערדיק פּייניד הינטער. אויב עס איז אַ הינטערגרונט פֿאַרב, עס איז פּיינטיד אונטן אַלע די בילד לייַערס.
New הינטערגרונט סטייל פּראָפּערטיעס
עס זענען אויך עטלעכע נייַע הינטערגרונט פּראָפּערטיעס אין CSS3.
- background-clip
- דעם פאַרמאָג באשלאסן ווי די הינטערגרונט בילד זאָל זיין קליפּט. די פעליקייַט איז די גרענעץ קעסטל, אָבער עס קען זיין געביטן צו די וואַטן קעסטל אָדער די אינהאַלט קעסטל.
- background-origin
- דעם פאַרמאָג באשלאסן אויב דער הינטערגרונט זאָל זיין ערטער אין די וואַטן קאַסטן, די גרענעץ קעסטל, אָדער די אינהאַלט קעסטל.
- background-size
- דעם פאַרמאָג אַלאַוז איר צו אָנווייַזן די גרייס פון דעם הינטערגרונט בילד. עס אַלאַוז איר אויסשטרעקן קלענערער בילדער צו פּאַסיק די בלאַט.
ענדערונגען צו עקסיסטינג הינטערגרונט סטייל פּראָפּערטיעס
עס זענען אויך עטלעכע ענדערונגען צו יגזיסטינג הינטערגרונט נוסח פּראָפּערטיעס:
- הינטערגרונט-איבערחזרן
- עס זענען צוויי נייַע וואַלועס פֿאַר דעם פאַרמאָג: פּלאַץ און קייַלעכיק. אָרט ספּייסאַז די טיילד בילד יוואַנלי ין די קעסטל אָן זייַענדיק קליפּט. קייַלעכיק רעסקאַלעס די הינטערגרונט בילד אַזוי אַז עס וועט קאַכל אַ גאַנץ נומער פון מאל אין די קעסטל.
- הינטערגרונט-אַטאַטשמאַנט
- א נייַ ווערט "היגע" איז מוסיף אַזוי אַז דער הינטערגרונט וועט מעגילע מיט די עלעמענט 'ס צופרידן ווען אַז עלעמענט האט אַ מעגילע באַר.
- background
- דער הינטערגרונט שאָרכאַנד פאַרמאָג מוסיף אין די גרייס און אָנהייב פּראָפּערטיעס.
CSS3 Border Properties
אין CSS3 געמארקן קענען זיין די סטיילז מיר זענען געניצט צו (האַרט, טאָפּל, דאַשעד, אאז"ו ו) אָדער זיי קענען זיין אַ בילד. פּלוס, CSS3 ברענגט אין די פיייקייַט צו שאַפֿן ראַונדיד עקן. Border images are interesting because you create a picture of all four borders and then tell the CSS how to apply that image to your borders.
New באָרדער סטייל פּראָפּערטיעס
עס זענען עטלעכע נייע גרענעץ פּראָפּערטיעס אין CSS3:
- גרענעץ-ראַדיוס
- border- bottom -right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
- די פּראָפּערטיעס לאָזן איר צו מאַכן ראַונדיד עקן אויף דיין געמארקן.
- border-image-source
- ספּעסאַפייז די בילד מקור טעקע צו זיין געוויינט אַנשטאָט פון פונדרויסנדיק סטיילז שוין דיפיינד.
- ברעג-בילד-רעפטל
- רעפּראַזענץ די ינווערד אָפסעץ פון די גרענעץ בילד עדזשאַז
- ברעג-בילד-ברייט
- דעפינעס די ווערט פון די ברייט פֿאַר דיין גרענעץ בילד.
- border-image-outset
- דערמאנט די סומע וואָס די גרענעץ בילד געגנט יקסטענדז די גרענעץ קעסטל.
- ברעג-בילד-אויסשטרעקן
- דעפינעס ווי די זייטן און מיטל טיילן פון די גרענעץ בילד זאָל זיין טילד אָדער סקיילד.
- גרענעץ-בילד
- די שאָרטהאַנד פאַרמאָג פֿאַר אַלע די גרענעץ בילד פּראָפּערטיעס.
נאָך CSS3 פּראָפּערטיעס מיט Borders און Backgrounds
ווען אַ קעסטל איז צעבראכן אין אַ בלאַט ברעכן, זייַל ברעכן פֿאַר שורה ברעכן (פֿאַר ינלינע עלעמענטן) די קאַסטן-באַפּוצונג-ברעכן פאַרמאָג באשטייט ווי די נייַ באָקסעס זענען אלנגעוויקלט מיט גרענעץ און וואַטן. באַקקגראָונדס קענען זיין צעטיילט צווישן קייפל צעבראכן באָקסעס ניצן דעם פאַרמאָג.
עס אויך איז אַ קעסטל-שאָטן פאַרמאָג וואָס קענען זיין געניצט צו לייגן שאַדאָוז צו קעסטל עלעמענטן.
מיט קסס 3, איר קענען איצט לייכט שטעלן אַ וועב בלאַט מיט קייפל שפאלטן אָן טישן אָדער קאָמפּליצירט דיוואַג סטראַקטשערז. איר פשוט דערציילן דעם בלעטערער ווי פילע שפאלטן די גוף עלעמענט זאָל האָבן און ווי ברייט זיי זאָל זיין. Plus איר קענען לייגן געמארקן (כּללים), הינטערגרונט פארבן וואָס שפּאַן די הייך פון די זייַל, און דיין טעקסט וועט לויפן דורך אַלע די שפאלטן אויטאָמאַטיש.
CSS3 שפאלטן - באַשטימען די נומער און ברייט פון די קאָלומנס
עס זענען דרייַ נייַ פּראָפּערטיעס אַז איר קענען באַשטימען די נומער און ברייט פון דיין שפאלטן:
- זייַל-ברייט
- דעפינעס די ברייט דיין שפאלטן זאָל זיין. דער בלעטערער וועט דעמאָלט לויפן די טעקסט צו פּלאָמבירן דעם פּלאַץ מיט שפאלטן אַז ברייט.
- זייַל-ציילן
- דעפינעס די נומער פון שפאלטן אויף דעם בלאַט. דער בלעטערער וועט דעמאָלט מאַכן שפאלטן ברייט גענוג צו פּאַסיק אין די פּלאַץ, אָבער בלויז די נומער איר ספּעציפיצירן.
- columns
- שאָרטהאַנד פאַרמאָג ווו איר קענען דעפינירן אָדער די ברייט אָדער נומער (אָדער ביידע, אָבער אַז ראַרעלי מאכט זינען).
קסס 3 קאַלאַם גאַפּס און כּללים
גאַפּס און כּללים זענען געשטעלט צווישן שפאלטן אין דער זעלביקער Multicolumn סצענאַר. גאַפּס וועט פּוש באַזונדער די שפאלטן, אָבער כּללים טאָן ניט נעמען אַרויף קיין פּלאַץ. אויב אַ זייַל הערשן איז ברייט ווי עס גאַפּ, עס וועט אָוווערלאַפּ שכייניש שפאלטן. עס זענען פינף נייַ פּראָפּערטיעס פֿאַר זאמלונגען כּללים און גאַפּס:
- column-gap
- דעפינעס די ברייט פון די גאַפּס צווישן די שפאלטן.
- column-rule-color
- דעפינעס די קאָליר פון די הערשן.
- זייַל-הערשן-נוסח
- דיפיינז די נוסח פון די הערשן (האַרט, דאַטיד, טאָפּל, אאז"ו ו).
- זייַל-הערשן-ברייט
- דעפינעס די ברייט פון די הערשן.
- זייַל-הערשן
- א קאַסטהאַנד פאַרמאָג דיפיינינג אַלע דרייַ זייַל הערשן פּראָפּערטיעס בייַ אַמאָל.
CSS3 קאַלאַם ברעאַקס, Spanning Columns, and Filling Columns
זייַל ברייקס נוצן די זעלבע CSS2 אָפּציעס געניצט צו באַשטימען ברייקס אין פּיידזשד צופרידן, אָבער מיט דרייַ נייַ פּראָפּערטיעס: ברעכן-איידער , ברעכן-נאָך , און ברעכן ין .
ווי מיט טישן, איר קענען שטעלן עלעמענטן צו ספּאַנדזש שפאלטן מיט די זייַל-שפּאַן פאַרמאָג. דעם אַלאַוז איר צו שאַפֿן כעדליינז אַז שפּאַן קייפל שפאלטן מער ווי אַ צייַטונג.
פילונג שפאלטן דיסיידז ווי פיל צופרידן וועט זיין אין יעדער זייַל. באַלאַנסט שפאלטן פּרובירן צו שטעלן די זעלבע סומע פון אינהאַלט אין יעדער זייַל בשעת אַוטאָ נאָר פלאָוז דער אינהאַלט אין ביז דער זייַל איז פול און דעמאָלט גייט צו דער ווייַטער איינער.
מער פֿעיִקייטן אין CSS3 אַז אַרענ & # 39; ה Included in CSS2
עס זענען גורל פון נאָך פֿעיִקייטן אין CSS3 וואָס האט נישט עקסיסטירן אין CSS2, אַרייַנגערעכנט:
- CSS מוסטער אויסלייג מאָדולע און CSS3 גריד פּאַזישאַנינג מאָדולע : שאַפֿן גראַדעס מיט CSS.
- CSS3 טעקסט מאָדולע : אַוטליין טעקסט און אפילו שאַפֿן קאַפּ-שאַדאָוז מיט קסס.
- CSS3 קאָליר מאָדולע : איצט מיט אָופּאַסאַטי.
- ענדערונגען צו די קעסטל מאָדעל : אַרייַנגערעכנט אַ מאַרקע פאַרמאָג אַז אקטן ווי די IE קוויטל.
- CSS3 באַניצער צובינד מאָדולע : געבן איר נייַ לויפֿער, רעספּאָנסעס צו אַקשאַנז, פארלאנגט פעלדער, און אפילו רעסיזינג עלעמענטן .
- מעדיע קוועריעס : מעדיע קוויריז לאָזן איר מער בייגיקייַט ווען דיפיינינג ווי אַ נוסח בלאַט זאָל זיין געוויינט. פֿאַר בייַשפּיל, איר קען דעפינירן אַ נוסח בלאַט וואָס איז בלויז פֿאַר כאַנדכעלד דיווייסיז וואָס האָבן אַ מיינונג פון גרעסער ווי 20 עם.
- CSS3 רובי מאָדולע : גיט שטיצן פֿאַר שפּראַכן וואָס נוצן טעקסט אַרטיקלען צו אַנאַטייט דאָקומענטן.
- CSS3 פּאַדזשעד מידיאַ מאָדולע : פֿאַר מער שטיצן פֿאַר פּאַפּיד מידיאַ (פּאַפּיר, טראַנספּעראַנסיז, עטק).
- גענעראַטעד אינהאַלט : ל פליסנדיק כעדערז און פוטערז, פאַטנאָוץ, און אנדערע אינהאַלט וואָס איז דזשענערייטאַד פּראָגראַממאַטיקאַללי, ספּעציעל פֿאַר פּאַדזשעד מידיאַ.
- CSS3 ספּיטש מאָדולע : טשאַנגעס צו אַוראַל קסס.