CSS ашиглан линкийг хэрхэн нуух вэ?

CSS-тай холбоотой холбоосыг хадгалах нь хэд хэдэн аргаар хийгдэж болох боловч бид URL-ыг бүрэн харагдахгүй хоёр аргыг харна. Хэрвээ та сайтад агнасан ан агнуур эсвэл өндөгний ургамал тарихыг хүсвэл энэ нь холбоосыг нуух сонирхолтой арга юм.

Эхний арга нь заагч-үйл явдлуудын CSS property value -ийг "none" гэж нэрлэнэ. Нөгөө нэг нь текстийг өнгөөр ​​нь хуудасны арын дэвсгэр дээр тааруулах замаар хийдэг.

Ямар ч арга нь эх кодыг эрж хайхдаа олдохгүй байх холбоосыг алга болгодог гэдгийг санаарай. Гэсэн хэдий ч зочдод үүнийг харах энгийн хялбар арга байхгүй, шинэлэг зочин нь холбоосыг хэрхэн олохыг мэдэхгүй болно.

Тайлбар: Хэрэв та гаднах загварын хуудсыг хэрхэн холбох зааврыг хайж байгаа бол эдгээр зааврууд нь таны дараа байгаа зүйл биш юм. Гадаад загварын хуудсыг юу гэж үздэг вэ? оронд нь.

Заагчийн үйл ажиллагааг идэвхгүй болгох

URL-г нуухын тулд бид эхний арга нь холбоосыг хийхгүй байх явдал юм. Хулгана холбоосыг давхихад, энэ нь URL-ыг зааж харуулахгүй бөгөөд та үүнийг товшихыг зөвшөөрөхгүй.

Зөв бичих HTML

Нэг вэб хуудас, линк холбоосыг дараах байдлаар уншаарай:

ThoughtCo.com

Мэдээж "https://www.thoughtco.com/" нь нуугдахыг хүссэн URL руу чиглүүлэх хэрэгтэй бөгөөд ThoughtCo.com нь холбоосыг тайлбарласан дуртай үг хэллэгээр сольж болно.

Энд сануулга нь идэвхтэй байгаа холбоосыг нуухын тулд доорх CSS-ыг ашиглана.

Энэ CSS кодыг ашиглах

CSS код нь идэвхитэй класст хандах ба холбоос дээрх үйл явдлын хөтчийг тайлбарлахдаа "none" байх ёстой:

. идэвхтэй {заагч үйл явдлууд: none; курсор: анхдагч; }

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

Тэмдэглэл: Хэрвээ хэрэглэгчийн хуудасны эх кодыг харах юм бол тэд холбоосыг нь харах болно. Яагаад гэвэл дээрээс харахад яг кодтой хэвээр байгаа бөгөөд хэрэглэгдэхгүй.

Link & # 39; s Color-г өөрчил

Ихэвчлэн вэб дизайнер нь холбоосууд нь арын дэвсгэрээс өөр өнгө үүсгэх бөгөөд ингэснээр зочдыг үнэндээ харж, хаашаа явж байгаагаа мэдэх болно. Гэсэн хэдий ч, бид холбоосыг нуухын тулд энд байгаа тул өнөөх хуудсыг өнгөтөөр хэрхэн солихыг үзье.

Гаалийн ангиллыг тодорхойлох

Дээрх эхний аргын нэгэн жишээг бид ашиглаж байгаа бол бид зөвхөн хүссэн зүйлээ ердөө л өөрчилж болох бөгөөд ингэснээр зөвхөн тусгай холбоосууд нуугдах болно.

Хэрвээ бид анги хэрэглэдэггүй байсан бол доороос CSS-ийг бүх холбоос болгон хэрэглэсэн бол бүгд алга болно. Эндээс хойш бид ийм зүйл биш, бид custom hideme анги ашиглаж байгаа HTML кодыг ашиглана.

ThoughtCo.com

Ямар өнгө хэрэглэхийг олох

Холбоосыг нуухын тулд зохих CSS код оруулахаас өмнө бид ямар өнгөөр ​​хэрэглэхийг хүсч байгааг мэдэх хэрэгтэй. Хэрэв та хатуу цагаан дэвсгэртэй бол цагаан эсвэл хар өнгөтэй байвал энэ нь амархан. Гэсэн хэдий ч, бусад тусгай өнгө нь яг тохирно.

Жишээлбэл, хэрэв таны дэвсгэр өнгө e6ded1-ийн hex утгатай байвал CSS кодыг устгахыг хүсэж байгаа хуудасныхаа хувьд зөв ажиллах ёстой гэдгийг мэдэх хэрэгтэй.

Эдгээр "өнгөний сонголт" эсвэл "eyedropper" багажуудын олон тооны байдаг бөгөөд тэдгээрийн нэг нь Chrome хөтчийг ColorPick Eyedropper гэж нэрлэдэг. Үүнийг ашиглан вэб хуудасныхаа өнгөний өнгөийг түүвэр болгон ашиглахын тулд hex өнгө авах хэрэгтэй.

Өнгө өөрчлөхөд CSS өөрчлөх хэрэгтэй

Одоо холбоос байх ёстой өнөө үед та CSS-ийн кодыг бичихийн тулд дээр дурдсан болон custom class value-ийг ашиглах цаг боллоо.

.hideme {color: # e6ded1; }

Хэрэв таны дэвсгэр өнгө цагаан эсвэл ногоон шиг энгийн байвал та үүнийг # тэмдэг тавихаас өмнө хийх шаардлагагүй:

.hideme {color: white; }

Энэ JSFiddle дахь энэ аргын жишээ кодыг үзнэ үү.