Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
outline-width

Пример для свойства outline-width:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Внешние рамки таблицы</TITLE>
  5. <STYLE type="text/css">
  6.TD,TR {
  7.outline-style:dashed;
  8.outline-color: #000;
  9.outline-width: 1px;
10.}
11. </STYLE>
12. </HEAD>
13. <BODY>
14.<TABLE>
15.<CAPTION>Таблицы - свойство outline</CAPTION>
16.<TR>
17. <TH></TH>
18. <TH>Meals</TH>
19. <TH>Hotels</TH>
20. <TH>Transport</TH>
21. <TH>subtotal</TH>
22.</TR>
23.<TR>
24. <TH id="san-jose" axis="san-jose" colspan="5"
25. style="background-color:#efe;text-align:left;">San Jose</TH>
26.</TR>
27.<TR>
28. <TH headers="san-jose">25-Aug-97</TH>
29. <TD>37.74</TD>
30. <TD>112.00</TD>
31. <TD>45.00</TD>
32. <TD></TD>
33.</TR>
34.<TR>
35. <TH headers="san-jose">26-Aug-97</TH>
36. <TD>27.28</TD>
37. <TD>112.00</TD>
38. <TD>45.00</TD>
39. <TD></TD>
40.</TR>
41.<TR style="background-color:#cadceb;">
42. <TH headers="san-jose">subtotal</TH>
43. <TD>65.02</TD>
44. <TD>224.00</TD>
45. <TD>90.00</TD>
46. <TD>379.02</TD>
47.</TR>
48.<TR>
49. <TH id="seattle" axis="seattle" colspan="5"
50. style="background-color:#efe;text-align:left;">Seattle</TH>
51.</TR>
52.<TR>
53. <TH headers="seattle">27-Aug-97</TH>
54. <TD>96.25</TD>
55. <TD>109.00</TD>
56. <TD>36.00</TD>
57. <TD></TD>
58.</TR>
59.<TR>
60. <TH headers="seattle">28-Aug-97</TH>
61. <TD>35.00</TD>
62. <TD>109.00</TD>
63. <TD>36.00</TD>
64. <TD></TD>
65.</TR>
66.<TR>
67. <TH headers="seattle">subtotal</TH>
68. <TD>131.25</TD>
69. <TD>218.00</TD>
70. <TD>72.00</TD>
71. <TD>421.25</TD>
72.</TR>
73.<TR style="background-color:#cadceb;">
74. <TH>Totals</TH>
75. <TD>196.27</TD>
76. <TD>442.00</TD>
77. <TD>162.00</TD>
78. <TD>800.27</TD>
79.</TR>
80.</TABLE>
81.
82. </BODY>
83.</HTML>
84.
Внешние рамки таблицы
Внешние рамки таблицы

Основные отличия контуров от рамок:

  1. Контуры не занимают дополнительное пространство;
  2. Контуры могут быть не квадратными;
  3. Контуры не влияю на размеры и размещение элемента;
  4. Контуры вырисовываются вокруг рамок

Свойство outline-width принимает те же значения что и свойство border-width.

Свойство outline-style принимает те же значения что и свойство border-style', за исключением значения hidden, которое в это свойстве недопустимо.

Свойство outline-color приминает все допустимые значения цветов в CSS.

Свойство invert создает инверсию цвета. Сделано это для того, чтобы обеспечить видимость фокус рамки, не принимая во внимание цвет фона.

Дополнительный пример:

  1.BUTTON {outline-width : thick}

Дополнительный пример создания интерактивности элемента, при фокусе добавляется черная рамка, в момент его активации рамка меняется на красный цвет:

  1.:focus { outline: thick solid black }
  2.:active { outline: thick solid red }


Доступ и установка с jQuery

  • Получить свойство outlineWidth: val = $("div").css("outlineWidth");
  • Установить свойство outlineWidth: $("div").css({"outlineWidth":"..."});
  • Установить свойство outlineWidth: $("div").css("outlineWidth","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org