Общие атрибуты тегов в Mobile SMARTS

Общие (глобальные, универсальные) атрибуты применяются практически ко всем элементам HTML, поэтому выделены в отдельную группу, чтобы не повторять их для каждого элемента.

Список атрибутов;

• align
  
• width/height
  
• class
  
• id
  
• color
  
• maxlines
  
• style
  

Для атрибута 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 синтаксис будет выглядеть следующим образом:

<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="…".

Если атрибут не задан, то для вывода текста используется цвет по умолчанию, в соответствии со стилем отображения.

Цвет может задаваться тремя способами:

• тег — имя цвета;
• название цвета на английском языке;
• код цвета в шестнадцатеричном виде.

Для атрибута color в зависимости от варианта введения метаданных синтаксис будет выглядеть следующим образом:

<Orange>Оранжевый текст</Orange> <r color="Orange">Оранжевый текст</r> <r color="#FFA500">Оранжевый текст</r>

Для атрибута 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 синтаксис будет выглядеть следующим образом:

<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>