Дэкаратыўнае падкрэсліванне CSS-элементаў

Тэхналогія табліц стыляў выконвае дзве функцыі пры афармленні HTML-старонак. Па-першае, з яе дапамогай адбываецца фарміраванне становішча асобных элементаў сайта. Па-другое, яна робіць блокі візуальна прывабнымі для карыстальніка. Рэалізацыя другой функцыі адбываецца рознымі спосабамі. Адзін з іх - падкрэсліванне. CSS прадугледжвае для гэтага атрыбут text- decoration.

Спецыфікацыя запісу атрыбуту

Скарыстацца уласцівасцю text- decoration проста. Дастаткова прапісаць у кодзе файла стыляў наступны радок для элемента:

text- decoration: значение_атрибута;

Замест «значение_атрибута» спецыфікацыя CSS прапануе шэраг варыянтаў:

• underline - лінія размяшчаецца строга пад тэкстам;
• overline - лінія праходзіць зверху тэксту;
• none - зняцце ўсіх дэкаратыўных эфектаў;
• inherit - пераймае значэнне элемента-бацькі.

Вышэй прыведзены не ўсе магчымыя формы запісу, паколькі дадзены атрыбут задае не толькі падкрэсліванне CSS, але і іншыя эфекты, напрыклад «лыпанне» тэксту або яго перечёркивание.

Прыклады афармленне гіперспасылак

У пачаткоўцаў у вэб-дызайне і праграмаванні ўзнікае пытанне: навошта рабіць ніжнюю лінію ў тэксту? На світанку эпохі інтэрнэт-тэхналогій такі спосаб вылучэння паказваў карыстачу на тое, што перад ім знаходзіцца гіперспасылка - тэкст, па кліку на які будзе ажыццёўлены пераход на новую старонку.

Па змаўчанні ў гіперспасылак ўстаноўлена ўласцівасць underline. На практыцы ўзнікае задача прыбраць лінію ў неактыўных элементаў і зрабіць яе бачнай пры навядзенні карыстальнікам паказальніка мышы. Вось прыклад кода, які адключае падкрэсліванне спасылак CSS:

a {text-decoration: none;}

Для актыўных спасылак выкарыстоўваецца наступны запіс:

a: hover {text-decoration: underline;}

Дэкаратыўнае падкрэсліванне для прасунутых

Стандартны атрыбут text- decoration мае некалькі абмежаванняў:

• колер лініі не адрозніваецца ад колеру тэксту спасылкі, нельга размежаваць іх «размалёўку»;
• толькі суцэльная лінія выкарыстоўваецца як падкрэсліванне. CSS не прадугледжвае прымяненне іншых стыляў напісання.

Але адмысловыя прыёмы дапамагаюць абыйсці класічнае афармленне тэксту. У першым выпадку для задання гіперспасылкі выкарыстоўваецца дадатковы тэг .

напрыклад: