5.1 Атрибутът стил на таг
И още няколко полезни неща за HTML. Тъй като мрежата започна да набира популярност, имаше нарастващо търсене уеб страниците да бъдат красиво or много красиво проектирани. Този проблем беше решен с помощта на style
.
Общата форма на този атрибут има следния формат:
<tag style="name=value;name2=value2;nameN=valueN">
Стойността на атрибута, разделена style
с точка и запетая, изброява всички "стилове", които трябва да бъдат приложени към етикета.
Да приемем, че искате да покажете изображение като квадрат 100х100
и да го направите наполовина прозрачно. За да направите това, трябва да добавите специални стилове към него:
- ширина=100px;
- височина=100px;
- непрозрачност=0,5;
Тогава HTML codeът с това изображение ще изглежда така:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Има стотици, ако не и хиляди стилове. И разработчиците на браузъри постоянно измислят нови. Хубаво е, че учиш за Java разработчик, а не за уеб дизайнер :)
5.2 Популярни CSS стилове
Малко вероятно е да пишете много HTML code or да редактирате неговите стилове в живота си, но всичко може да се случи. Например, вие пишете няколко малки HTML страници, за да тествате API
. Следователно познаването на основните стилове HTML
може да бъде полезно.
По-долу са 10-те най-често срещани за бекенд разработчиците:
# | Име | Пример | Описание |
---|---|---|---|
1 | ширина | ширина: 100px | ширина на елемента в пиксели |
2 | височина | височина: 50% | височина на елемента като процент (от ширината на родителя) |
3 | дисплей | дисплей: няма | елемент за показване (не показвайте елемент) |
4 | видимост | видимост: скрит | видимост на елемента (елементът е скрит, но за него е запазено място) |
5 | цвят | цвят: червен; | цвят на текста |
6 | Цвят на фона | цвят на фона: дим | Цвят на фона |
7 | граница | рамка: 1px плътно черно; | рамка (ширина 1 пиксел, цвят черен, плътна линия) |
8 | шрифт | шрифт: verdana 10pt | шрифт: verdana, размер 10pt |
9 | подравняване на текст | подравняване на текст: център; | хоризонтално подравняване на текста |
10 | марж | margin:2px | подложка извън елемента |
Не е нужно да помните тези етикети, всичко е в Интернет. Освен това всеки "стил" има свой собствен набор от валидни стойности и собствен формат за описание на стойността. Вижте поне border
or font
.
GO TO FULL VERSION