Сілтеме астын сызуларын веб-бетте қалай өзгертуге болады

Сілтемедің астын сызып тастау немесе сызылған нүктелерді немесе қос сызылған сілтемелерді жасау

Әдепкі бойынша, веб-браузерлер белгілі бір HTML элементтеріне қолданылатын кейбір CSS мәнерлерін жетілдіреді. Егер сіз осы әдепкі параметрлерді өз сайтыңыздың жеке стилі парақтарымен алмастырмасаңыз, әдепкі мәндер қолданылады. Гиперсілтемелер үшін стандартты көрсету мәнері кез келген байланыстырылған мәтіннің көгілдір және асты сызылғандығына байланысты болады. Браузер сайттың келушілері қандай мәтінді байланыстырылғандығын көре алатындай етіп жасайды. Көптеген веб-дизайнерлер осы әдепкі мәнерлерге, әсіресе бұл сызықтарға көңіл бөлмейді. Бақытымызға орай, CSS қарапайым адамдардың көрінісін өзгертуді немесе оларды толығымен жоюды жеңілдетеді.

Мәтін сілтемелерінде астын сызуды жою

Астыңғы сызылған мәтін бұл асты сызылмаған мәтінді оқу қиынырақ болуы мүмкін. Сонымен қатар көптеген дизайнерлер астын сызылған мәтіндік сілтемелердің көрінісіне қарапайым емес. Мұндай жағдайларда, сіз осы астын сызып тастағыңыз келуі мүмкін.

Мәтін сілтемелерінен астын сызуды алып тастау үшін сіз CSS сипатының мәтіндік декорациясын қолданасыз. Міне, сіз мұны жазатын CSS:

{text-decoration: none; }

CSS-дің бір жолымен, барлық мәтін сілтемелерінен асты сызықты алып тастаңыз. Бұл жалпы стиль болса да (элемент селекторы қолданылады), әдепкі браузерлер стилі жасағаннан гөрі, ол әлі де ерекше сипатқа ие. Өйткені, әдепкі мәнерлер басталатын сызықтарды жасайды, сондықтан қайта жазу керек.

Астыңғы сызықтарды жою туралы ескерту

Көрнекі түрде, астын сызудың алынуы дәл сіз жасағыңыз келетін нәрсе болуы мүмкін, бірақ сіз мұны істегенде абайлаңыз. Сізге сілтеме жасалған сілтемелердің көрінісін ұнатасыз ба, ұнатпаңыз ба, олар қандай мәтінге байланысты және қайсысы болмайтындығы туралы айқындауға болады. Егер әдепкі көк түс сілтемесінің астын сызып тастаса немесе өзгертетін болсаңыз, байланыстырылған мәтіннің бөлінуіне мүмкіндік беретін стильдермен ауыстырылғаныңызды тексеріңіз. Бұл сіздің сайтыңыздың келушілеріне арналған интуитивті тәжірибені жасайды.

Сілтеме емес сілтеме жасамаңыз

Сілтемелер мен астын сызып тастаудың тағы бір ескертуі, сілтеме емес, мәтінді баса көрсетпеу тәсілі ретінде көрсетілмейді. Адамдар асты сызылған мәтінді сілтеме ретінде күтуге келді, сондықтан егер сіз назар аударатын болсаңыз (егер оны қалың немесе қарқынды ете алмасаңыз), сіз дұрыс емес хабарламаны жіберіп, сайт пайдаланушысын шатастырасыз.

Астыңғы сызықты нүктелерге немесе сызықтарға өзгертіңіз

Мәтін сілтемесін сақтап қалғыңыз келсе, сол сызықтың стилін әдепкі көріністен өзгертіңіз, яғни «солға» сызық, сіз мұны да жасай аласыз. Осы сызықтың орнына нүктелерді сілтемелеріңіздің астын сызу үшін пайдалануға болады. Мұны істеу үшін, сіз әлі де асты сызылған сызықты алып тастайсыз, бірақ сіз оны шекаралас стиль сипатымен ауыстырасыз:

{text-decoration: none; төменгі шекара: 1px нүктелі; }

Стандартты астын сызылғандықтан, нүктелі бір ғана пайда болады.

Қиып алу үшін бірдей нәрсені жасай аласыз. Шекаралық астыңғы стильді сызылған етіп өзгертіңіз:

{text-decoration: none; төменгі шекара: 1px dashed; }

Түсіргіштің түсін өзгертіңіз

Сілтемелерге назар аударудың тағы бір жолы - астын сызудың түсін өзгерту. Түс түс схемасымен сәйкес келетініне көз жеткізіңіз.

{text-decoration: none; төменгі шекара: 1px қатты қызыл; }

Екі астын сызу

Екі есе астын сызуды қолдануға болатын шабыт - шекараның енін өзгерту керек. 1px кең шекарасын жасасаңыз, бір астын сызу сияқты көрінетін қос астын сызу арқылы аяқталады.

{text-decoration: none; шекараның төменгі жағы: 3px қосарлы; }

Сондай-ақ, сызылған сызықтардың бірі сияқты басқа мүмкіндіктермен қосарланған астын сызу үшін бар сызылған сызықшаны қолдануға болады:

{border-bottom: 1px double; }

Байланыстыру мемлекеттерін ұмытпаңыз

Шекаралық астыңғы мәнерін сілтемелерге түрлі күйлерде қосуға болады: hover,: active немесе: visited. Бұл «hover» псевдокосын пайдаланған кезде келушілерге жақсы «rollover» стилінің тәжірибесін жасай алады. Сілтеме үстіне өту кезінде екінші нүктелі астын сызу пайда болады:

{text-decoration: none; } a: hover {border-bottom: 1px нүктелі; }

Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard өңдейді