Kā mainīt HTML saites pasvītrojumus tīmekļa lapā

Šajā rakstā ir paskaidroti vairāki veidi, kā jūs varat izmantot CSS, lai mainītu noklusējuma teksta saišu izskatu savā tīmekļa lapā, noņemot pasvītrojumu, mainot to uz punktētu līniju vai mainot tā krāsu. Lai pasvītru mainītu uz punktētu līniju vai dubultu pasvītrojumu, ir iekļauta papildu informācija.

Kā noņemt pasvītrojumu teksta saitēs

Pēc noklusējuma tīmekļa pārlūkprogrammām ir noteiktas iespējas CSS stili ka tie attiecas uz noteiktiem HTML elementiem. Ja nepārrakstāt šos noklusējumus ar savas vietnes stila lapām, tiek lietoti noklusējumi. Priekš hipersaites, noklusējuma displeja stils ir tāds, ka jebkurš sasaistītais teksts ir zils un pasvītrots. Ja vēlaties, varat mainīt šo pasvītrojumu izskatu vai pilnībā noņemt tos no savas tīmekļa lapas.

Lai noņemtu pasvītrojumus no teksta saitēm, izmantojiet CSS rekvizītu teksta apdari. Šeit ir CSS, kuru jūs rakstāt, lai to izdarītu:

a {teksta noformējums: nav; }

Izmantojot šo vienu CSS rindiņu, jūs noņemat pasvītrojumu no visām tīmekļa vietnes teksta saitēm. Lai gan tas ir ļoti vispārīgs stils (tajā tiek izmantots elementu atlasītājs), tam tomēr ir daudz specifiskāk nekā noklusējuma pārlūkprogrammu stiliem. Tā kā šie noklusējuma stili ir tie, kas vispirms rada pasvītrojumus, tas ir tas, kas jums jāpārraksta.

Piesardzība, pasvītrojot

Vizuāli pasvītrojumu noņemšana var būt tieši tas, ko vēlaties paveikt, taču, to darot, jums vajadzētu būt piesardzīgam. Neatkarīgi no tā, vai jums patīk pasvītroto saišu izskats vai nē, jūs nevarat apgalvot, ka tie skaidri parāda, kurš teksts ir saistīts un kurš nē. Ja jūs noņemat pasvītrojumus vai maināt šo noklusējuma zilo saites krāsu, pārliecinieties, ka esat tos aizstājis ar stiliem, kas joprojām ļauj saistītam tekstam izcelties. Tas jūsu vietnes apmeklētājiem sniegs intuitīvāku pieredzi.

Neuzsveriet nesaites

Vēl viena piesardzība attiecībā uz saitēm un pasvītrojumiem neuzsveriet tekstu, kas nav saite, lai to uzsvērtu. Cilvēki ir sagaidījuši, ka pasvītrotais teksts būs saite, tādēļ, ja jūs pasvītrojat saturu, lai to pievienotu uzsvars (tā vietā, lai padarītu to treknu vai kursīvu), jūs nosūtāt nepareizu ziņojumu un sajauksit vietni lietotājiem.

Kā mainīt pasvītrojumu uz punktiem vai domuzīmēm

Ja vēlaties saglabāt teksta saites pasvītrojumus, bet mainiet pasvītrojuma stilu no noklusējuma izskata, kas ir "stabila" līnija, varat to izdarīt arī jūs. Šīs vienotās līnijas vietā varat izmantot punktus, lai pasvītrotu saites. Lai to izdarītu, jūs joprojām noņemsit pasvītrojumu, bet aizstāsit to ar stila rekvizītu border-bottom:

a {teksta noformējums: nav; apmales apakšdaļa: 1 pikseļi ar punktētu punktu; }

Tā kā esat noņēmis standarta pasvītrojumu, parādās vienīgais punktētais.

Jūs varat darīt to pašu, lai iegūtu domuzīmes. Vienkārši mainiet robežas apakšdaļas stilu uz punktētu:

a {teksta noformējums: nav; apmale-apakšdaļa: 1px pārtraukta; }

Kā mainīt pasvītrojuma krāsu

Vēl viens veids, kā pievērst uzmanību savām saitēm, ir mainīt pasvītrojuma krāsu. Vienkārši pārliecinieties, ka krāsa atbilst jūsu krāsai krāsu shēma.

a {teksta noformējums: nav; apmales apakšdaļa: 1 pikseļa vienkrāsains; }

Divkārši pasvītrojumi

Divkāršu pasvītrojumu izmantošanas triks ir tāds, ka jums jāmaina apmales platums. Izveidojot 1 pikseļu platu apmali, jūs iegūsiet dubultu pasvītrojumu, kas izskatās kā viens pasvītrojums.

a {teksta noformējums: nav; apmale apakšā: 3 pikseļi dubultā; }

Varat arī izmantot esošo pasvītrojumu, lai izveidotu dubultu pasvītrojumu ar citām funkcijām, piemēram, vienu no punktētām līnijām:

a {border-bottom: 1px double; }

Neaizmirstiet saites stāvokļus

Varat pievienot saites robežas apakšdaļas stilu dažādos stāvokļos, piemēram: kursors,: aktīvs vai: apmeklēts. Tas var radīt jauku "rollover" stila pieredzi apmeklētājiem, kad izmantojat šo "hover" pseidoklasi. Lai novirzot kursoru virs saites, tiktu parādīts otrais punktveida pasvītrojums:

a {teksta noformējums: nav; }
a: virziet kursoru {border-bottom: 1px dotted; }