ווי צו פלאָוט אַ בילד צו די לינקס פון טעקסט אויף אַ וועבפּאַגע

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

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

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

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

אָנהייב מיט HTML

דער ערשטער זאַך אַז איר דאַרפֿן צו טאָן איז צו האָבן HTML צו אַרבעטן. פֿאַר אונדזער בייַשפּיל, מיר וועלן שרייַבן אַ פּאַראַגראַף פון טעקסט און לייגן אַ בילד אין די אָנהייב פון די פּאַראַגראַף (איידער די טעקסט, אָבער נאָך די עפן <פּ> צעטל). דאָ איז וואָס HTML קעסטל קוקט ווי:

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

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

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

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

CSS Styles

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

.לעפט {פלאָוט: לינקס; וואַטן: 0 20 פּקס 20 פּקס 0; }

דעם נוסח פלאָוץ אַז בילד צו די לינקס און לייגן אַ ביסל וואַטן (ניצן עטלעכע קסס סטענאָגראַפיע) צו די רעכט און דנאָ פון די בילד.

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

אַלטערנאַטיווע וועגן צו דערגרייכן די סטיילז

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

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

צו נוסח דעם בילד, איר קען שרייַבן דעם קסס:

.מיין-צופרידן img {פלאָוט: לינקס; וואַטן: 0 20 פּקס 20 פּקס 0; }

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

צום סוף, איר קען אפילו לייגן די סטיילז גלייַך אין דיין HTML מאַרקאַפּ, ווי דאָס:

<פּ> דער טעקסט פון דעם פּאַראַגראַף גייט דאָ. אין דעם בייַשפּיל, מיר האָבן אַ בילד פון אַ העאַדשאָט פאָטאָ, אַזוי דעם טעקסט וואָלט מסתּמא זייַן וועגן דעם מענטש וועמען די קאָפּווייטיק איז פֿאַר.

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

אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 4/3/17.