לינקס זענען זייער פּראָסט אויף וועב זייַטלעך, אָבער פילע וועב דיזיינערז טאָן ניט פאַרשטיין די מאַכט וואָס זיי האָבן מיט קסס צו מאַניפּולירן און פירן זייער לינקס יפעקטיוולי. איר קענען דעפינירן לינקס מיט באזוכט, האָווער, און אַקטיוו לענדער. איר קענען אויך אַרבעט מיט געמארקן און באַקגראַונדז צו געבן דיין לינקס מער פּיזזאַז אָדער מאַכן זיי קוקן ווי קנעפּלעך אָדער אַפֿילו בילדער.
רובֿ וועב דיזיינערז אָנהייב אויס דורך דיפיינינג אַ נוסח אויף די "אַ" צעטל:
אַ {קאָליר: רויט; }דאס וועט נוסח אַלע אַספּעקץ פון די לינקס (האָווער, באזוכט, און אַקטיוו). צו נוסח יעדער טייל סעפּעראַטלי, איר מוזן נוצן לינק פּסעוודאָ קלאסן.
לינק פּסעוודאָ-קלאַססעס
עס זענען פיר יקערדיק טייפּס פון לינק פּסעוודאָ-קלאסן וואָס איר קענען באַשטימען:
- : לינק - דאָס איז די פעליקייַט נוסח פֿאַר די לינק
- : באזוכט - נאָך אַ לינק איז קליקט
- : האָווער - ווי אַ מויז איז פּויזאַנד איבער אַ לינק (פאַר-גיט)
- : אַקטיוו - רעכט ווי דער לינק איז קליקט
צו באַשטימען אַ לינק פּסעוודאָ קלאַס, נוצן עס מיט די אַ טאַג אין דיין קסס סעלעקטאָר . אַזוי, צו טוישן די באזוכט קאָליר פון אַלע דיין לינקס צו גרוי, שרייַבן:
אַ: באזוכט {קאָליר: גרוי; }אויב איר נוסח איינער לינק פּסעוודאָ קלאַס, עס ס אַ גוט געדאַנק צו סטיל זיי אַלע. דער וועג איר וועט נישט זיין סאַפּרייזד דורך עקסטרייניאַס רעזולטאטן. אַזוי אויב איר נאָר ווילן צו טוישן די באזוכט קאָליר צו גרוי, אָבער אַלע אנדערע פּסעוודאָ פּראָפּערטיעס פון דיין פֿאַרבינדונגען בלייַבן שוואַרץ, איר'ד שרייבט:
אַ: לינק, אַ: האָווער, אַ: אַקטיוו {קאָליר: שוואַרץ; } אַ: באזוכט {קאָליר: גרוי; }טוישן די לינק קאָלאָרס
די מערסט פאָלקס וועג צו נוסח לינקס איז צו טוישן די קאָליר ווען די מויז כאַווערז איבער אים:
אַ {קאָליר: # 00ף; } a: hover {color: # 0f0; }אָבער טאָן ניט פאַרגעסן אַז איר קען ווירקן ווי די לינק קוקט ווי זיי זענען קליקינג אויף עס מיט די: אַקטיוו פאַרמאָג:
אַ {קאָליר: # 00ף; } אַ: אַקטיוו {קאָליר: # פ 00; }אָדער ווי די לינק קוקט נאָך איר'ווע באזוכט עס מיט די: באזוכט פאַרמאָג:
אַ {קאָליר: # 00ף; } a: visited {color: # f0f; }צו שטעלן עס אַלע צוזאַמען:
אַ {קאָליר: # 00ף; } a: visited {color: # f0f; } a: hover {color: # 0f0; } אַ: אַקטיוו {קאָליר: # פ 00; }שטעלן באַקקגראָונדס אויף די לינקס צו לייגן יקאָנס אָדער בולאַץ
איר קענען לייגן אַ הינטערגרונט אויף אַ לינק ווי אין די סטייליש באַקקגראָונדס אַרטיקל, אָבער דורך פּלייינג מיט דעם הינטערגרונט אַ ביסל, איר קענען שאַפֿן אַ לינק וואָס האט אַ פארבונדן ייקאַן. קלייַבן אַ בילדל וואָס איז קליין, אַרום 15 פּקס דורך 15 פּקס, סייַדן דיין טעקסט איז גרעסער. אָרט דעם הינטערגרונט צו איין זייַט פון די לינקס און שטעלן די איבערחזרן אָפּציע צו קיין-איבערחזרן. דערנאָך, לינק די לינק אַזוי אַז די טעקסט ין דער לינק איז אריבערגעפארן איבער ווייַט גענוג צו די לינקס אָדער רעכט צו זען דעם בילדל.
אַ {וואַטן: 0 2 פּקס 1 פּקס 15 פּקס; background: #fff url (ball.gif) לינקס צענטער קיין-איבערחזרן; קאָליר: # ק 00; }אַמאָל איר'ווע גאַט דיין ייקאַן, איר קענען שטעלן אַ אַנדערש בילד ווי דיין כאַווער, אַקטיוו, און באזוכט ייקאַנז צו מאַכן די לינק ענדערונג:
אַ {וואַטן: 0 2 פּקס 1 פּקס 15 פּקס; background: #fff url (ball.gif) לינקס צענטער קיין-איבערחזרן; קאָליר: # ק 00; } a: hover {background: #fff url (ball2.gif) לינקס צענטער קיין-איבערחזרן; } אַ: אַקטיוו {הינטערגרונט: #fff URL (ball3.gif) לינקס צענטער קיין-איבערחזרן; }מאַכן דיין לינקס קוקן ווי בוטטאָנס
בוטטאָנס זענען זייער פאָלקס, אָבער ביז קסס געקומען צוזאמען, איר האט צו שאַפֿן קנעפּלעך ניצן בילדער , וואָס מאכט דיין בלעטער נעמען מער צו מאַסע. צומ גליק, עס איז אַ גרענעץ נוסח אַז קענען העלפן איר מאַכן אַ קנעפּל-ווי ווירקונג לייכט מיט קסס.
אַ {גרענעץ: 4 פּקס אָנהייב; padding: 2px; טעקסט-באַפּוצונג: קיין; } אַ: אַקטיוו {גרענעץ: 4 פּקס ינסעט; }באַמערקונג, ווען איר שטעלן פארבן אויף די אָנהייב און ינסעט סטיילז, בראַוזערז זענען נישט ווי מסתּמא צו ופפירן זיי ווי איר זאלן דערוואַרטן. אַזוי, דאָ ס אַ פאַנסיער קנעפּל מיט בונט געמארקן:
אַ {גרענעץ-נוסח: האַרט; border-width: 1px 4px 4px 1px; טעקסט-באַפּוצונג: קיין; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }און איר קענען ווירקן די האָווער און אַקטיוו סטיילז פון אַ קנעפּל לינק ווי געזונט, נאָר נוצן די פּסעוודאָ-קלאסן:
אַ: לינק {border-style: האַרט; border-width: 1px 4px 4px 1px; טעקסט-באַפּוצונג: קיין; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: # ccc; }