5.1 Атрибут style у тега
И еще несколько полезных вещей про HTML. После того как веб начал набирать популярность, начал расти спрос на то, чтобы веб-страницы были оформлены красиво или очень красиво. Эту проблему решили с помощью атрибута style.
Общий вид этого атрибута имеет такой формат:
<tag style="name=value;name2=value2;nameN=valueN">В качестве значения атрибута style через точку с запятой перечисляются все «стили», которые нужно применить к тэгу.
Допустим, вы хотите отобразить картинку в виде квадрата 100х100, а также сделать ее наполовину прозрачной. Для этого нужно добавить ей специальные стили:
- width=100px;
- height=100px;
- opacity=0.5;
Тогда HTML-код с данной картинкой примет вид:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">Стилей сотни, если не тысячи. И разработчики браузеров постоянно придумывают новые. Хорошо, что ты учишься на Java-разработчика, а не на веб-верстальщика :)
5.2 Популярные CSS-стили
Вряд ли ты в своей жизни будешь писать много HTML-кода или править его стили, но все может случиться. Например, ты пишешь пару небольших HTML-страниц, чтобы протестировать написанный вами API. Поэтому знание основных стилей HTML может быть полезным.
Ниже представлены 10 самых распространенных для backend-разработчиков:
| # | Имя | Пример | Описание |
|---|---|---|---|
| 1 | width | width: 100px | ширина элемента в пикселях |
| 2 | height | height: 50% | высота элемента в процентах (от ширины родителя) |
| 3 | display | display: none | отображение элемента (не отображать элемент) |
| 4 | visibility | visibility: hidden | видимость элемента (элемент скрыт, но место под него резервируется) |
| 5 | color | color: red; | цвет текста |
| 6 | background-color | background-color: smoke; | цвет фона |
| 7 | border | border: 1px solid black; | рамка (ширина 1px, цвет черный, сплошная линия) |
| 8 | font | font: verdana 10pt | шрифт: verdana, размер 10pt |
| 9 | text-align | text-align: center; | выравнивание текста по горизонтали |
| 10 | margin | margin:2px | отступ снаружи элемента |
Тебе не нужно запоминать эти теги, все есть в интернете. Тем более, у каждого "стиля" свой набор допустимых значений и свой формат описания значения. Посмотри хотя бы на border или font.
🐴