Параметры style.
(Рекомендуется не перенасыщать тегами стену, вопросы, идеи, задания. Не стоит портить дизайн сайта. Все это может повлечь блокировку аккаунта!)
Параметр style пишется внутри любого тега. Вот некоторые значения параметра style:
|
<b style="background-color:#66FF99">Пример</b> |
Пример |
|
<font style="text-shadow:1px 1px 2px lime; border:1px solid #f0f; background-color:#eeeeee; padding:1px;">Пример</font> |
Пример |
Здесь, background-color задает цвет фона, text-shadow - тень, отбрасываемую от текста (отображается не во всех браузерах), border - рамку.
Перед изучением значений параметров следует знать:
- top - верх, right - право, bottom - низ, left - лево.
- После каждого значения параметра нужно поставить точку с запятой ;
Значений параметра style огромное количество, но здесь будут описаны только самые распространенные (в скобках приведены примеры)
background-color - задает цвет фона [background-color:#66FF99"]
border устанавливает параметры рамки [border:1px solid #ccc], где 1px - толщина рамки, solid - стиль рамки (возможные варианты ниже), #ccc - цвет рамки
dotted dashed solid double groove ridge inset outset
- border-top - то же самое что и border, только задает параметры для верхней границы рамки [border-top:1px solid #ccc]
- border-right
- border-bottom
- border-left
color - определяет цвет (как в font color, только без участия тега font. Это может пригодиться при оформлении оплачиваемых заданий, где тег font запрещен) [color:#999999]
cursor - задает тип курсора. Ниже приведены возможные варианты [cursor:pointer]
float - определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон [float:right]
- left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
- right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
font-size - определяет размер шрифта (как в font size, только без участия тега font. Это может пригодиться при оформлении оплачиваемых заданий, где тег font запрещен) [font-size:medium]
|
Значение |
Размер |
|
xx-small |
1 |
|
x-small |
|
|
small |
2 |
|
medium |
3 |
|
large |
4 |
|
x-large |
5 |
|
xx-large |
6 |
font-weight - устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 [font-weight:bold]
letter-spacing - определяет интервал между символами в пределах элемента [letter-spacing:10px]
margin - устанавливает величину отступа от каждого края элемента [margin:2px 3px 4px 5px] (в этом примере: 2px - отступ сверху; 3px - справа; 4px - снизу; 5px - слева. То есть, перечисление идет по часовой стрелке.)
|
Число значений |
Результат |
|
1 |
Отступы будут установлены одновременно от каждого края элемента. |
|
2 |
Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. |
|
3 |
Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края. |
|
4 |
Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
|
Число значений |
Пример |
|
1 |
margin:3px |
|
2 |
margin:3px 2px |
|
3 |
margin:3px 2px 4px |
|
4 |
margin:3px 2px 4px 2px |
- margin-top - устанавливает величину отступа от верхнего края элемента
- margin-right
- margin-bottom
- margin-left
padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое [padding:7px]
Это значение очень схоже с margin, а именно:
|
Число значений |
Результат |
|
1 |
Поля будут установлены одновременно от каждого края элемента. |
|
2 |
Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого. |
|
3 |
Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края. |
|
4 |
Поочередно устанавливается поля от верхнего, правого, нижнего и левого края. |
|
Число значений |
Пример |
|
1 |
padding:3px |
|
2 |
padding:3px 2px |
|
3 |
padding:3px 2px 4px |
|
4 |
padding:3px 2px 4px 2px |
- padding-top - Устанавливает значение поля от верхнего края содержимого элемента
- padding-right
- padding-bottom
- padding-left
text-decoration - Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания [text-decoration:line-through]
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).
line-through Создает перечеркнутый текст
overline Линия проходит над текстом
underline Устанавливает подчеркнутый текст
text-indent - устанавливает величину отступа первой строки блока текста. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера. [text-indent:15px]
text-shadow - добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия [text-shadow: black 1px 1px 2px], где black - цвет тени, 1px (слева) - сдвиг по X (смещение тени по горизонтали относительно текста), 1px (справа) - сдвиг по Y (смещение тени по вертикали относительно текста), 2px - радиус (задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0)
word-spacing - устанавливает интервал между словами [word-spacing:20px]
