Page Title

CSS-HTML ссылки

Привет, друг. Сегодня мы узнаем чуть больше о ссылках.

Что мы знаем? Что если не добавить ссылкам свойства, то по умолчанию они будут выглядить примерно так;

ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Но что если мы хотим задать свой цвет, свой шрифт, размер, убрать это подчеркивание?

Чтож, давай посмотрим что мы можем сделать...
Для начала, давайте уберем подчеркивание ссылок? В этом нам поможет наш css и свойство text-decoration.
Так будет выглядеть наш код в css:

a {
text-decoration: none;
}

Давай запишем сюда теперь пример, чтобы посмотреть что получилось?

ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Как видим наше свойство сработало. Ссылки не подчеркнуты.
Круто круто, но я хочу поменять цвет ссылок на красный?
Это не проблема.
Мы добавим к нашим свойствам пополнение, а именно свойство color.
Давай посмотрим как будет выглядеть наш код в css:

a {
text-decoration: none;
color: red;
}

И теперь давай глянем что получилось

ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Мы уже знаем как убрать подчеркивание. Знаем как поменять цвет. Давай теперь узнаем как поменять шрифт и зададим нашим ссылкам задний фон?
Для того что изменить шрифт, в наш код css нужно добавить следующее свойство - font-family.
Наш код в css будет выглядеть так;

a {
text-decoration: none;
color: red;
font-family: 'Courier New';
}

Теперь посмотрим на результат

ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Как видим, шрифт стал другим. Шрифт я выбрал свой, вы же можете найти много примеров шрифтов в гугл, и вставлять какие душе угодно)

Теперь зададим нашим ссылкам цвет заднего фона. Цвет заднего фона будет черный, а сами ссылки я сделаю оранжевого цвета.

Зададим нашим ссылкам черный фон.
В этом нам посожет свойство background-color. Наш код в css будет выглядеть так:

a {
text-decoration: none;
color: orange;
font-family: 'Courier New';
background-color: black;
}

Наши ссылки стали с черным фоном.
ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Давайте зададим радиус заднему фону, чтобы наши ссылки были с круглыми углами.
Как мы знаем за это отвечает свойство border-radius.
А так же зададим отступы внутри чтобы слова не прилегали по краям (padding)
Наш код в css будет выглядеть так

a {
text-decoration: none; убериает подчеркивание ссылок
color: orange; цвет оранжевый
font-family: 'Courier New'; меняем шрифт
background-color: black; задний фон черный
border-radius: 10px; круглые углы
padding: 2px;отступы внутри
}

Мы добавили два свойства, отступы внутри и круглые углы, смотрим на резульат;

ссылка 1 | ссылка 2 | ссылка 3 | ссылка 4 |

Так будет выглядеть наш код в html;

<a href="">ссылка 1</a> |
<a href="">ссылка 2</a> |
<a href="">ссылка 3</a> |
<a href="">ссылка 4</a> |

А так он будет выглядеть в css;

a {
text-decoration: none;
color: orange;
font-family: 'Courier New';
background-color: black;
border-radius: 10px;
padding: 2px;
}

"пссс, друг. В ссылках есть такое свойство как target="_blank" оно добавляется после адреса ссылок.
Для чего? Чтобы ваша ссылка открывалсь в новом отдельном окне.
Если это свойство не добавить, то ваша ссылка откроется в одном окне, как бы проваливаясь. Пример кода в html;

<a href="ww.http/california.ru" target="_blank"> ссылка </a>

урок (ссылки )