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
.