Cascading Style Sheets (CSS) атрибуту көбүнчө веб-баракчалардагы гипершилтемелердин түсүн өзгөртүү үчүн колдонулат. Бул көйгөйдү чечүүнүн азыраак функциялары HTML тилинде (HyperText Markup Language - "гипертекст белгилөө тили").
Ал зарыл
HTML жана CSS тилдерин билүү
Нускамалар
1 кадам
Гипершилтемелер үчүн стилдөө блогун даярдаңыз. Жөнөкөй түрүндө, ал төмөнкүдөй көрүнүшү мүмкүн: a {color: Green} Бул жерде "a" "селектор" деп аталат, бул кашаанын ичиндеги стилдин сүрөттөлүшү документтеги бардык шилтеме белгилерине колдонулушу керектигин билдирет. Жашыл шилтеменин түсүн аныктайт; бул түстүн өтө орой аныктамасы жана сейрек колдонулат. Көбүнчө, "а" селекторуна "псевдо-класс" кошулат - бул үч башка абалда шилтеме стилин көрсөтүүгө мүмкүндүк берген ярлык.
2-кадам
Шилтеменин кадимки (жигерсиз) абалын стилдөө үчүн псевдо-класс шилтемесин колдонуңуз. Мындай окшош болушу мүмкүн, мисалы: a: link {color: Green}
3-кадам
Шилтеме Hoverде кандайча көрсөтүлүшү керектигин көрсөтүү үчүн псевдо-класс сүйрөгүчүн колдонуңуз. Мисалы: a: hover {color: Lime}
4-кадам
Мурун кирген шилтеме стилин сүрөттөө үчүн барган псевдо-классты колдонуңуз. Мисалы: a: visit {color: DarkGreen}
5-кадам
Бардык үч абалды бир стиль сүрөттөө блогуна бириктирүү. CSS сүрөттөөлөрүн камтыган HTML кодунун көрүнүшү, мисалы, төмөнкүдөй болушу мүмкүн:
a: link {color: Green}
а: барган {color: DarkGreen}
a: hover {color: Lime}
Бул жерде HTML стилинин ачылышы жана жабылышы тегдер браузерге стилдердин сүрөттөлүшү кайда башталарын жана эмне менен аяктай тургандыгын билдирет жана алардын ортосунда үч абалда шилтеме жүрүм-турумунун сүрөттөлүшү бар.
6-кадам
Жогоруда колдонулган үлгү түстөрдүн мүнөздөмөлөрүн гана көрсөтөт, бирок сүрөттөмөдө башка атрибуттар камтылышы мүмкүн. Мисалы, эгерде баракчанын дизайны шилтеменин кадимки (жигерсиз) абалында сызылбастан, курсордун үстүнө коюлганда астын сызылышын талап кылса, анда кодду төмөнкүдөй өзгөртүүгө болот:
a: link {color: Green; текстти жасалгалоо: none;}
а: барган {color: DarkGreen; текстти жасалгалоо: none;}
a: hover {color: Lime; текстти жасалгалоо: астын сызуу;}
7-кадам
Эгерде сиз баракчанын айрым гана шилтемелеринин түсүн өзгөртүп, калгандарын демейки орнотуулар менен калтыргыңыз келсе, анда өзгөртүлүп жаткан ар бир шилтеменин тегине класс атрибутун кошуңуз. Мисалы, бул гипершилтеме классын newLinks деп атаңыз. Шилтеме теги мындай болуп калышы мүмкүн: текст шилтемеси Стилдин сүрөттөлүшүнө ошол эле класстын аталышы кошулушу керек:
a.newLinks: link {color: Green; текстти жасалгалоо: none;}
a.newLinks: барган {color: DarkGreen; текстти жасалгалоо: none;}
a.newLinks: hover {color: Lime; текстти жасалгалоо: астын сызуу;}
8-кадам
Жогоруда сүрөттөлгөн мисалдардан даярдалган стилди сүрөттөө кодун барактын башына - жана тегдердин ортосуна жайгаштырыңыз. Керек болсо, шилтеме белгилерине класс атрибутун стиль сүрөттөмөсүндө колдонулган аты менен кошуңуз. Андан кийин өзгөртүлгөн баракты сактап, гипершилтемелердин түсүн өзгөртүү процедурасы бүтөт.
