מאַכן טשיקאַווע זוך שורות אויף וועב זייַטלעך מיט הר טאַגס
אויב איר דאַרפֿן צו לייגן האָריזאָנטאַל, סעפּאַראַטאָר-נוסח שורות צו דיין וועבסיטעס, איר האָבן אַ ביסל אָפּציעס. איר קען לייגן פאַקטיש בילד טעקעס פון די שורות צו דיין בלאַט, אָבער אַז וואָלט דאַרפן דיין בלעטערער צו באַקומען און מאַסע די טעקעס, וואָס קען האָבן אַ נעגאַטיוו פּראַל אויף פּלאַץ פאָרשטעלונג.
איר קען נוצן די CSS גרענעץ פאַרמאָג צו לייגן געמארקן וואָס שפּילן ווי שורות אָדער בייַ דער שפּיץ אָדער בייַ די דנאָ פון אַן עלעמענט, יפעקטיוולי שאפן דיין סעפּאַראַטאָר שורה.
צום סוף, איר קענען נוצן די HTML עלעמענט פֿאַר די האָריזאָנטאַל הערשן - די
די האָריזאָנטאַל רול עלעמענט
אויב איר האָבן אלץ שטעלן אַן עלעמענט אויף אַ וועב בלאַט, איר מסתּמא דיסקאַווערד אַז די פעליקייַט וועג אַז די שורות זענען געוויזן זענען נישט ידעאַל. דעם מיטל אַז איר דאַרפֿן צו דרייען צו קסס צו סטרויערן די וויזשאַוואַל אויסזען פון די עלעמענטן צו זיין אין שורה מיט ווי איר ווילן דיין פּלאַץ צו קוקן.
א יקערדיק הר קוויטל איז דערווייזן ווי דער בלעטערער וויל צו אַרויסווייַזן. מאָדערן בראַוזערז טיפּיקלי אַרויסווייַזן אַנסטיילד הר טאַגס מיט אַ ברייט פון 100%, אַ הייך פון 2 פּקס, און אַ 3 ד ברעג אין שוואַרץ צו מאַכן די שורה.
דאָ איז אַ בייַשפּיל פון אַ נאָרמאַל הר עלעמענט אָדער איר קענען זען אין דעם בילד ווי אַ ונסטילעד הר קוקט אין מאָדערן בראַוזערז.
ברייט און הייך זענען קאָנסיסטענט ביי בראָווסערס
די בלויז סטיילז וואָס זענען קאָנסיסטענט אַריבער וועב בראַוזערז זענען די ברייט און סטיילז. די דעפינירן ווי גרויס די שורה וועט זיין. אויב איר טאָן ניט דעפינירן די ברייט און הייך די פעליקייַט ברייט איז 100% און די פעליקייַט הייך איז 2 פּקס.
אין דעם בייַשפּיל די ברייט איז 50% פון די פאָטער עלעמענט (טאָן די ביישפילן ונטער אַלע אַרייַננעמען ינלינע סטיילז. אין אַ פּראָדוקציע באַשטעטיקן, די סטיילז וואָלט פאקטיש געשריבן אין אַ פונדרויסנדיק נוסח בויגן פֿאַר יז פון פאַרוואַלטונג איבער אַלע דיין בלעטער):
נוסח = "ברייט: 50%;">
און אין דעם בייַשפּיל די הייך איז 2 עם:
style = "height: 2em;">
טשאַנגינג די באָרדער קענען זיין טשאַלאַנדזשינג
אין מאָדערן בראַוזערז, דער בלעטערער בויען די שורה דורך סטרויערן די גרענעץ. אַזוי אויב איר באַזייַטיקן די גרענעץ מיט די נוסח פון די נוסח, די שורה וועט פאַרשווינדן אויף די בלאַט. ווי איר קענען זען (נו, איר וועט נישט זען עפּעס, ווי די שורות וועט זיין ומזעיק) אין דעם בייַשפּיל:
style = "border: none;">
אַדזשאַסטינג די גרענעץ גרייס, קאָליר, און סטיל וועט מאַכן די שורה קוקן אַנדערש און האט די זעלבע ווירקונג אין אַלע מאָדערן בראַוזערז. פֿאַר בייַשפּיל, אין דעם דעמאַנסטריישאַן די גרענעץ איז רויט, דאַשט, און 1 פּקס ברייט:
style = "border: 1px dashed # 000;">
אבער אויב איר ענדערט די גרענעץ און די הייך, די סטיילז קוקן אַ ביסל אַנדערש אין זייער אַוטדייטיד בראַוזערז ווי זיי טאָן אין מאָדערן בראַוזערז. ווי איר קענט זען אין דעם בייַשפּיל, אויב איר קוק עס אין IE7 און ווייטער (אַ בלעטערער וואָס איז וועאַפאַלי אַוטדייטיד און ניט מער געשטיצט דורך מייקראָסאָפֿט), עס איז אַ בעוועלעד ינער שורה וואָס טוט ניט אַרויסווייַזן אין די אנדערע בראַוזערז (אַרייַנגערעכנט יע 8 און אַרויף) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
די אַנטיקוועד בראַוזערז ביסט טאַקע נישט פיל פון אַ דייַגע אין וועב פּלאַן הייַנט, זינט זיי האָבן שוין לאַרגעלי ריפּלייסט מיט מער מאָדערן אָפּציעס.
מאַכן אַ דעקאָראַטיווע שורה מיט אַ הינטערגרונט בילד
אַנשטאָט אַ פֿאַרב, איר קענען דעפינירן אַ הינטערגרונט בילד פֿאַר דיין הר אַזוי אַז עס קוקט פּונקט ווי איר ווילן עס, אָבער נאָך דיספּלייז סעמאַנטיקלי אין דיין מאַרקאַפּ.
אין דעם בייַשפּיל מיר געניצט אַ בילד וואָס איז פון דרייַ ווייווי שורות. דורך באַשטעטיקן עס ווי דער הינטערגרונט בילד מיט קיין איבערחזרן, עס קריייץ אַ ברעכן אין די אינהאַלט וואָס קוקט כּמעט ווי איר זען אין ביכער:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
טראַנספאָרדינג הר עלעמענץ
מיט קסס 3, איר קענען אויך מאַכן דיין שורות מער טשיקאַווע. דער הר עלעמענט איז טראַדישאַנאַלי אַ האָריזאָנטאַל שורה, אָבער מיט די CSS טראַנספאָרמאַציע פאַרמאָג, איר קענען ענדערן ווי זיי קוקן. א באַליבט טראַנספאָרמאַציע אויף די הר עלעמענט איז צו טוישן די ראָוטיישאַן.
איר קענען דרייען דיין הר עלעמענט אַזוי עס איז נאָר אַ ביסל דיאַגאָנאַל:
hr {
-מאָז-יבערמאַכן: דרייען (10 דעל);
-וועבקיט-יבערמאַכן: דרייען (10 דד);
-א-יבערמאַכן: דרייען (10 דעל);
-מס-יבערמאַכן: דרייען (10 דעל);
טראַנספאָראַציע: דרייען (10 דעל);
}
אָדער איר קענען דרייען עס אַזוי אַז עס איז גאָר ווערטיקאַל:
hr {
-מאָז-יבערמאַכן: דרייען (90 דד);
-וועבקיט-יבערמאַכן: דרייען (90 דד);
-א-יבערמאַכן: דרייען (90 דד);
-מז-יבערמאַכן: דרייען (90 דד);
טראַנספאָראַציע: דרייען (90 דעל);
}
געדענקען אַז דאָס ראָוטייץ די הר באזירט אויף זייַן קראַנט אָרט אין דעם דאָקומענט, אַזוי איר קען דאַרפֿן צו סטרויערן די פּאַזישאַנינג צו באַקומען עס ווו איר ווילן עס. עס איז נישט רעקאַמענדיד צו נוצן דאָס צו לייגן ווערטיקאַל שורות צו אַ פּלאַן, אָבער עס איז אַ וועג צו באַקומען אַ טשיקאַווע ווירקונג.
אן אנדער וועג צו באַקומען שורות אויף דיין בלעטער
איין זאַך אַז עטלעכע מענטשן טאָן אַנשטאָט פון ניצן די הר עלעמענט איז צו פאַרלאָזנ אויף געמארקן פון אנדערע עלעמענטן. אבער מאל אַ הר איז אַ פּלאַץ מער באַקוועם און גרינגער צו נוצן ווי טריינג צו שטעלן אַרויף געמארקן. דער קעסטל מאָדעל ישוז פון עטלעכע בראַוזערז קענען מאַכן באַשטעטיקן אַרויף אַ גרענעץ אַפֿילו טריקיער.