Общие (глобальные, универсальные) атрибуты применяются практически ко всем элементам HTML, поэтому выделены в отдельную группу, чтобы не повторять их для каждого элемента.
Список атрибутов;
| Атрибут | Значение | Описание |
| align | right, left, center | горизонтальное выравнивание |
Для атрибута align синтаксис будет выглядеть следующим образом:
|
<b align="center">Атрибут "align"</b> <r align="left">Текст слева</r> <r align="left">align="left"</r> <r align="center">Текст в центре</r> <r align="center">align="center"</r> <r align="right">Текст справа</r> <r align="right">align="right"</r> |
| Атрибут | Значение | Описание |
| width | числовое значение | определяет ширину таблиц, изображений или ячеек таблицы |
| height | числовое значение | определяет высоту таблиц, изображений или ячеек таблицы |
На примере форматирования кнопки для атрибутов width и height синтаксис будет выглядеть следующим образом:
<button direction="4" width="100%" height="15%">Дальше</button>
Для атрибута class синтаксис будет выглядеть следующим образом:
|
CSS: class="имя_класса" <div width="100%"> <table width="100%" style="border:3dp solid black;" > <tr> <td width="20%" height="20%" class="redBorder"></td> <td></td> <td class="redBorder"></td> <td></td> <td class="redBorder"></td> </tr> <tr> <td width="20%" height="20%"></td> <td class="greenBorder"></td > <td ></td> <td class="greenBorder"></td> <td></td> </tr> <tr> <td width="20%" height="20%" class="blueBorder"></td> <td></td> <td class="blueBorder"></td> <td></td> <td class="blueBorder"></td> </tr> <tr> <td width="20%" height="20%"></td> <td class="grayBorder"></td> <td></td> <td class="grayBorder"></td> <td></td> </tr> </table> </div> |
Для атрибута id синтаксис будет выглядеть следующим образом:
|
<div id="example">Желтый текст на синем фоне</div> <div id="example">Здесь тоже используется этот идентификатор, но этот блок не отобразится</div> |
| Атрибут | Значение | Описание |
| color | цвет | устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB (см. Таблица цветов в HTML) |
Для задания цвета текста используется тег с именем цвета или необязательный атрибут color="…".
Если атрибут не задан, то для вывода текста используется цвет по умолчанию, в соответствии со стилем отображения.
Цвет может задаваться тремя способами:
- тег — имя цвета;
- название цвета на английском языке;
- код цвета в шестнадцатеричном виде.
Для атрибута color в зависимости от варианта введения метаданных синтаксис будет выглядеть следующим образом:
|
<Orange>Оранжевый текст</Orange> |
| Атрибут | Значение | Описание |
| maxlines | числовое значение | обрезает текст до N строк |
Для атрибута maxlines синтаксис будет выглядеть следующим образом:
|
<div align="left"> <r maxlines="4">Google — американская транснациональная корпорация, реорганизованная 15 октября 2015 года в международный конгломерат Alphabet Inc., компания в составе холдинга Alphabet, инвестирующая в интернет-поиск, облачные вычисления и рекламные технологии.</r><br /> <b size="+2">\<r size="-2">:</b><br /> <r size="-2" maxlines="4">Google — американская транснациональная корпорация, реорганизованная 15 октября 2015 года в международный конгломерат Alphabet Inc., компания в составе холдинга Alphabet, инвестирующая в интернет-поиск, облачные вычисления и рекламные технологии.</r><br /> <b size="+2">\<r size="+2">:</b><br /> <r size="+2" maxlines="4">Google — американская транснациональная корпорация, реорганизованная 15 октября 2015 года в международный конгломерат Alphabet Inc., компания в составе холдинга Alphabet, инвестирующая в интернет-поиск, облачные вычисления и рекламные технологии.</r><br /> <b size="+2">\<h2>:</b><br /> <h2 maxlines="4">Google — американская транснациональная корпорация, реорганизованная 15 октября 2015 года в международный конгломерат Alphabet Inc., компания в составе холдинга Alphabet, инвестирующая в интернет-поиск, облачные вычисления и рекламные технологии.</h> </div> |
Ограничить длину выводимого текста можно также с помощью форматирования:
|
{SomeString = "Google — американская транснациональная корпорация, реорганизованная 15 октября 2015 года в международный конгломерат Alphabet Inc., компания в составе холдинга Alphabet, инвестирующая в интернет-поиск, облачные вычисления и рекламные технологии."} <div align="left"> {SomeString:Иcходная строка: (0)} <br /><br /> {SomeString:Обрезана до 100 символов: (0:T100)} <br /><br /> {SomeString:Обрезана до 100 символов + троеточие: (0:E100)} <br /><br /> {SomeString:Начало и конец + троеточие в середине: (0:M100)} </div> |
| Атрибут | Значение | Описание |
| style | в качестве значений указываются стилевые правила | применяется для определения стилей элементов с помощью правил CSS |
Для атрибута style синтаксис будет выглядеть следующим образом:
|
<div> <table cols="3" width="100%" cellspacing="10dp" align="center" valign="middle"> <tr> <td style="border:3dp solid #cccccc;" >solid</td> <td style="border:3dp dotted #cccccc;">dotted</td> <td style="border:3dp dashed #cccccc;">dashed</td> </tr> <tr> <td style="border:3dp double #cccccc;">double</td> <td style="border:3dp hidden #cccccc;">hidden</td> <td style="border:3dp groove #cccccc;">groove</td> </tr> <tr> <td style="border:3dp ridge #cccccc;">ridge</td> <td style="border:3dp inset #cccccc;">inset</td> <td style="border:3dp outset #cccccc;">outset</td> </tr> <tr> <td colspan="3" style="border:3dp none #cccccc;">none</td> </tr> </table> </div> |
С помощью стилевого правила border-radius атрибута style можно устанавливать радиус скругления углов рамок. Можно использовать одно, два, или четыре значения.
В зависимости от количества значений скругление будет применяться (по очереди):
- 1 — для всех четырех углов;
- 2 — первое значение определяет радиус скругления верхнего левого и нижнего правого, второе — верхнего правого и нижнего левого углов;
- 3 — первое значение определяет радиус скругления верхнего левого угла, второе — одновременно для верхнего правого и нижнего левого, третье — для нижнего правого
- 4 — верхнего левого, верхнего правого, нижнего правого, нижнего левого.
В качестве значения принимаются числа в поддерживаемом формате (рекомендуется использовать dp) или проценты. Синтаксис выглядит следующим образом:
|
<div> <table width="100%" align="center" style="vertical-align: middle;" cellspacing="10dp"> <tr> <td width="100%" height="10%" style="border: 3dp solid red; border-radius:20% 0% 0% 0%; "> border-radius:20% 0% 0% 0%; </td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp solid red; border-radius:0% 20% 0% 0%; "> border-radius: 0% 20% 0% 0%; </td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp solid red; border-radius:0% 0% 20% 0%; "> border-radius:0% 0% 20% 0%; </td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp solid red; border-radius:0% 0% 0% 20%; "> border-radius:0% 0% 0% 20%; </td> </tr> </table> </div> |
Еще один пример с использованием различного количества значений:
<div> <table width="100%" align="center" valign="middle" cellspacing="10dp"> <tr> <td> CSS: border-radius: topRight+topLeft, botRight + botLeft </td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp dotted red; border-radius:15dp 0dp; "> border-radius:15dp 0dp; </td> </tr> <tr> <td> CSS: border-radius: all </td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp inset red; border-radius:15dp; "> border-radius: 15dp; </td> </tr> <tr> <td>CSS: border-radius: topLeft, topRight, botRight, botLeft</td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp outset red; border-radius:5dp 10dp 15dp 20dp; ">border-radius: 5dp 10dp 15dp 20dp;</td> </tr> <tr> <td>CSS: border-radius: topLeft, topRight + botLeft, botRight</td> </tr> <tr> <td width="100%" height="10%" style="border: 3dp inset red; border-radius:5dp 10dp 20dp; ">border-radius: 5dp 10dp 20dp;</td> </tr> </table> </div>
