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

פארשטאנד ווי יפראַמעס אַרבעט אין וועבזייַטל פּלאַן

ווען איר עמבעד אַן עלעמענט אין דיין HTML , איר האָבן צוויי אַפּערטונאַטיז צו לייגן קסס סטיילז צו עס:

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

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

דאָ זענען עטלעכע CSS סטיילז איך שטענדיק אַרייַננעמען אויף מיין יפראַמעס:

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

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

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

דאָ איז ווי צו באַזייַטיקן סקראָללינג מיט די סקראָללינג אַטריביוט:

scrolling = "no"
דאָס איז אַן יפראַמע.

צו ויסמעקן סקראָללינג אין הטמל 5 איר זענען געמיינט צו נוצן די אָוווערפלאָו פאַרמאָג. אבער ווי איר קענען זען אין די ביישפילן, עס טוט נישט אַרבעטן רילייאַבלי אין אַלע בראַוזערז נאָך.

דאָ ס ווי איר ווענדן אויף די מעגילע אַלע די צייַט מיט די אָוווערפלאָו פאַרמאָג:

style = "overflow: scroll;"
דאָס איז אַן יפראַמע.

עס איז קיין וועג צו קער אַוועק די סקראָללינג גאָר מיט די אָוווערפלאָו פאַרמאָג.

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

iframe {
border-top: # ק 00 1 פּקס דאַטיד;
border-right: # c00 2 פּקס דאַטיד;
border-left: # ק 00 2 פּקס דאַטיד;
border-bottom: # ק 00 4 פּקס דאַטיד;
}

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

iframe {
גרענעץ-שפּיץ: 20 פּקס;
גרענעץ-דנאָ: 30 פּקס;

-מאַז-גרענעץ-ראַדיוס: 12 פּקס;
-וועבקיט-גרענעץ-ראַדיוס: 12 פּקס;
גרענעץ-ראַדיוס: 12 פּקס;

-מאָז-קעסטל-שאָטן: 4 פּקס 4 פּקס 14 פּקס # 000;
-וועבקיט-קעסטל-שאָטן: 4 פּקס 4 פּקס 14 פּקס # 000;
קעסטל-שאָטן: 4 פּקס 4 פּקס 14 פּקס # 000;

-מאָז-יבערמאַכן: דרייען (20 דד);
-וועבקיט-יבערמאַכן: דרייען (20 דד);
-א-יבערמאַכן: דרייען (20 דעל);
-מז-יבערמאַכן: דרייען (20 דד);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}

סטילינג די יפראַמע אינהאַלט

סטילינג די אינהאַלט פון אַ יפראַמע איז פּונקט ווי סטילינג קיין אנדערע וועב בלאַט. אָבער, איר מוזן האָבן צוטריט צו רעדאַגירן די בלאַט . אויב איר קענט נישט ענדערן דעם בלאַט (למשל, עס איז אויף אן אנדער פּלאַץ).

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