Как сделать с помощью css подчеркивание пунктиром нужных слов

Иногда некоторые слова на веб-страничке требуется оформить так, что в html для этого не предусмотрено никаких тегов. Например, в css подчеркивание пунктиром, двойную линия и другие декоративные элементы оформления реализовать можно, потому что этот язык для этого и создан.

Как в css подчеркнуть пунктиром текст

Для этого к нужному элементу нужно дописать свойство border (граница или рамка). Оно имеет три параметра:

Border: толщина линии | тип подчеркивания | цвет

Для легкого подчеркивания обычно достаточно задать толщину в 1-2 пикселя. А вот второй параметр как раз нам и нужен, потому что именно он определяет тип линии. Пунктирная линия соответствует ключевому слову dashed. Сплошная – solid.

Итак, чтобы задать нижнее пунктирное подчеркивание красного цвета, нужно записать все следующим образом:

Selector{
	Border-bottom: 1px dashed red;
}

Дело в том, что свойство border задает рамку со всех сторон элемента, поэтому он будет облачен в прямоугольник, но в данном примере нам нужно лишь немного подчеркнуть снизу. Для этого мы и записали border-bottom. Соответственно, также есть свойства border-left, border-right и border-top.

Еще я говорил вам в начале о двойной линии. Она тоже задается свойством border, нужно только прописать другой тип линии, а именно:

Border: 1px double blue;

Здесь ключевым словом является double. У свойства есть и другие значения, а посмотреть вы их можете в любом нормальном справочнике по CSS.

Итак, для подчеркивания пунктиром в css нужных слов используйте свойство свойство border. Первое значение — высота линии, а второе — ее тип, где нужно прописать dashed.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: