ווי CSS Inheritance אַרבעט אין וועב דאָקומענץ

אַ וויכטיק טייל פון סטילינג אַ וועבזייטל מיט קסס איז פארשטאנד דער באַגריף פון ירושה.

CSS ירושה איז אויטאָמאַטיש דיפיינד דורך די נוסח פון די פאַרמאָג זייַענדיק געניצט. ווען איר קוק אַרויף די נוסח פאַרמאָג הינטערגרונט-קאָליר, איר וועט זען אַ אָפּטיילונג טייטאַלד "ירושה". אויב איר ווי רובֿ וועב דיזיינערז, איר'ווע איגנאָרירט דעם אָפּטיילונג, אָבער עס דינען אַ ציל.

וואָס איז CSS Inheritance?

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

פֿאַר בייַשפּיל, דעם HTML קאָד אונטן האט אַ H1 tag enclosing an EM tag:

דאָס איז אַ <עם> גרויס העאַדלינע

די על עלעמענט איז אַ קינד פון די ה 1 עלעמענט, און קיין סטיילז אויף די ה 1 וואָס זענען ינכעראַטיד וועט זיין דורכגעגאנגען אויף די עמ טעקסט ווי געזונט. פֿאַר בייַשפּיל:

h1 {font-size: 2em; }

זינט די שריפֿט-גרייס פאַרמאָג איז ינכעראַטיד, די טעקסט וואָס זאגט "ביג" (וואָס איז וואָס איז ענקלאָוזד ין די עם טאַגס) וועט זיין די זעלבע גרייס ווי די מנוחה פון די ה 1. דאָס איז ווייַל עס ינכעראַץ די ווערט שטעלן אין די CSS פאַרמאָג.

ווי צו נוצן CSS Inheritance

די יזיאַסט וועג צו נוצן עס איז צו באַקענען מיט די CSS פּראָפּערטיעס וואָס זענען און זענען נישט ינכעראַטיד. אויב די פאַרמאָג איז ינכעראַטיד, דעמאָלט איר וויסן אַז די ווערט וועט בלייַבן די זעלבע פֿאַר יעדער קינד עלעמענט אין דעם דאָקומענט.

דער בעסטער וועג צו נוצן דאָס איז צו שטעלן דיין יקערדיק סטיילז אויף אַ זייער הויך-מדרגה עלעמענט, ווי די גוף. אויב איר שטעלן דיין שריפֿט-משפּחה אויף דעם גוף פאַרמאָג, דעמאָלט, דאַנק צו ירושה, די גאנצע דאָקומענט וועט האַלטן אַז זעלביקער שריפֿט-משפּחה. דעם וועט אַקשלי מאַכן פֿאַר סמאָלער סטיילז וואָס זענען גרינגער צו פירן ווייַל עס זענען ווייניקערע קוילעלדיק סטיילז. פֿאַר בייַשפּיל:

body {font-family: Arial, sans-serif; }

ניצן די ינערייט סטייל ווערט

יעדער קסס פאַרמאָג כולל די ווערט "ירשענען" ווי אַ מעגלעך אָפּציע. דאָס דערציילט דעם וועב בלעטער, אַז אפילו אויב די פאַרמאָג וואָלט נישט נאָרמאַלי זיין ינכעראַטיד, עס זאָל האָבן די זעלבע ווערט ווי די פאָטער. אויב איר שטעלן אַ נוסח אַזאַ ווי אַ גרענעץ אַז איז נישט ינכעראַטיד, איר קענען נוצן די ירושה ווערט אויף סאַבסטאַנטיוו פּראָפּערטיעס צו געבן זיי די זעלבע גרענעץ ווי די פאָטער. פֿאַר בייַשפּיל:

body {margin: 1em; } p {margin: inherit; }

ינערייטאַנס ניצט קאַמפּיוטאַד וואַלועס

דעם איז וויכטיק פֿאַר ינכעראַטיד וואַלועס ווי שריפֿט גרייס וואָס נוצן לענגקטס. א קאַמפּיוטיד ווערט איז אַ ווערט וואָס איז קאָרעוו צו עטלעכע אנדערע ווערט אויף די וועב בלאַט.

אויב איר שטעלן אַ שריפֿט-גרייס פון 1 עם אויף דיין באָדי עלעמענט, דיין גאנצע בלאַט וועט ניט זיין בלויז בלויז 1 עם אין גרייס. דאָס איז ווייַל עלעמענטן ווי כעדינגז (H1-H6) און אנדערע עלעמענטן (עטלעכע בראַוזערז קאַמפּיוזשאַן טיש פּראָפּערטיעס אַנדערש) האָבן אַ קאָרעוו גרייס אין דעם וועב בלעטערער. אין דער אַוועק פון אנדערע שריפֿט גרייס אינפֿאָרמאַציע, די וועב בלעטערער וועט שטענדיק מאַכן אַ H1 קאָפּ די גרעסטע טעקסט אויף דעם בלאַט, נאכגעגאנגען דורך H2 און אַזוי אויף. ווען איר שטעלן דיין גוף עלעמענט צו אַ ספּעציפיש שריפֿט גרייס, דעמאָלט עס איז געניצט ווי די "דורכשניטלעך" שריפֿט גרייס, און די כעדליין עלעמענטן זענען קאַמפּיוטיד פון וואָס.

א באַמערקונג וועגן ירושה און הינטערגרונט פּראָפּערטיעס

עס זענען אַ נומער פון סטיילז אַז זענען ליסטעד ניט ינכעראַטיד אין CSS 2 אויף די W3C, אָבער די וועב בראַוזערז נאָך ירשענען די וואַלועס. למשל, אויב איר האָט געשריבן די פאלגענדע HTML און CSS: