Холбоосыг Вэб хуудсан дээр хэрхэн өөрчлөх талаар

Зөвшөөрөгдсөн линкийг устгах эсвэл тасархай холбоос үүсгэх, эсвэл хоёрдогч зурах холбоос үүсгэнэ үү

Анхдагч байдлаар, вэб хөтчүүд нь тодорхой HTML элементүүд дээр хэрэглэдэг тодорхой CSS загварыг эзэмшдэг. Хэрэв та эдгээр хуудсыг өөрийн сайтын загварын хуудаснуудыг дарж бичихгүй бол анхдагч утгуудыг нь хэрэглэнэ. Загварын холбоосуудын хувьд анхдагч дэлгэцийн загвар нь холбоосын текст цэнхэр, доогуур зураастай байх явдал юм. Хөтчийн вэбсайтууд нь ямар ямар тексттэй холбогдохыг харах боломжтой байдаг. Ихэнх вэб дизайнерууд эдгээр үндсэн хэв маягийг, ялангуяа онцлон авч үзэхийг хүсдэггүй. Аз болоход, CSS нь зургуудыг харахад хялбар болгож, бүрэн устгах боломжтой болгодог.

Текстийн линкийг хасах

Доор зурагдсан текст нь доогуур зураастай текстийг уншихад илүү төвөгтэй байж болох юм. Үүнээс гадна, олон дизайнерууд доогуур зураастай холбоосуудыг харахыг хүсдэггүй. Эдгээр тохиолдлуудад та тэдгээрийг тоймлон авч үзэхийг хүсч магадгүй юм.

Текстийн холбоосоос гарах зураасуудыг арилгахын тулд CSS property property-decoration-г ашиглана. Энд хийхээр бичсэн CSS энд байна:

a {text-decoration: none; }

CSS-ийн нэг мөрөнд та доогуур зураасыг бүх текст холбоосоос хасах болно. Хэдийгээр энэ нь маш ерөнхий загвар боловч элемент сонгогчийг ашигладаг боловч анхдагч хөтөч стилиудаас илүү тодорхой шинж чанаруудтай хэвээр байна. Анхдагч загварууд нь эхлүүлэх тэмдгүүдийг үүсгэдэг тул та үүнийг дарж бичих хэрэгтэй.

Огцом үсэг хаях талаар болгоомжлох

Үзэгдлийг хасах нь таны хийхийг хүсч буй зүйл байж болох ч та үүнийг хийхдээ болгоомжтой байх хэрэгтэй. Дүрслэх холбоосыг харах дуртай эсэхээс үл хамааран та текст ямар холбоосоор холбогдож байгаагаас үл хамааран тэдгээрийг тодруулж чаддаггүй. Хэрэв та гол анхаарлаа хандуулаарай эсвэл цэнхэр холбоосын өнгө өөрчлөгдвөл тэдгээрийг холбох текстийг хэвээр нь байлгах хэв загварыг хэвээр байлгах хэрэгтэй. Энэ нь таны сайтын зочдод илүү мэдрэмжтэй болгох болно.

Холбоогүй линкийг бүү оруул

Холбоос болон онцолсон өөр нэг анхааруулга, энэ нь онцлон авч үзэх арга болгон холбоос биш текстийг бүү заа. Хүмүүс доогуур зураастай текстийг холбоос болгох гэж хүсэн хүлээж байсан тул хэрвээ онцолж тодруулахын тулд агуулга тодруулахын тулд (зоримог болгох эсвэл налуугаар бичихийн оронд) бол та буруу мэдэгдэл илгээж, сайтын хэрэглэгчдийг төөрөгдүүлэх болно.

Доогуур зураасыг цэг эсвэл зураас болгон өөрчил

Хэрэв та текстийн холбоосыг товчлохыг хүсч байгаа бол "soldi" гэсэн шугамын анхдагч харагдах байдлаасаа зураасыг өөрчилж болно. Үүнийг хатуу шугамын оронд холбоосыг тоймлох цэгүүдийг ашиглаж болно. Үүнийг хийхийн тулд та доогуур зураасыг арилгах болно, гэхдээ та үүнийг хил хязгаар доторх загварын өмчөөр солих болно:

a {text-decoration: none; border-bottom: 1px тасархай; }

Та стандартыг хассан тул тасархай цор ганц гарч ирнэ.

Та зураас авахдаа ижил зүйлийг хийж болно. Зүгээр л хил хязгаартай хэв маягийг өөрчлөх хэрэгтэй.

a {text-decoration: none; border-bottom: 1px тасархай; }

Доод шугамыг өөрчил

Холбоос руу анхаарлаа хандуулах өөр нэг арга бол зураасыг өнгөөр ​​солих явдал юм. Өнгө нь таны өнгөний схемтэй нийцэж байгаа эсэхийг шалгаарай.

a {text-decoration: none; border-bottom: 1px хатуу улаан; }

Давхар товчоор

Давхар мөрийг ашиглах арга зам бол хилийн өргөнийг өөрчлөх хэрэгтэй. Хэрвээ та 1px өргөн хил үүсгэх юм бол давхар зураастай байх бөгөөд нэг товчлуур шиг харагдах болно.

a {text-decoration: none; хил хязгаар: 3px давхар; }

Та одоо байгаа шугамыг ашиглаж болно. Дараах тоонуудын аль нэгийг шиг давхар функцтэй давхар тоогоор хийж болно:

a {border-bottom: 1px double; }

Дон Link холбоосыг март

Та хилийн дээрх доод хэв маягийг таны холбоосууд дээр өөр өөр мужуудад нэмж болно: hover,: active, эсвэл: visited. Энэ нь "hover" псевдо классыг ашиглах үед зочинд зориулсан "өнхрөх" загварын туршлагыг бий болгож чадна. Хоёр дахь цэгтэй тойм зургийг доорх линк дээр харуулав:

a {text-decoration: none; } a: hover {border-bottom: 1px таслагдсан; }

Женнифер Кэрнин эх нийтлэл. Жереми Герард засварт хийсэн