Участник:Bhudh/Plage: различия между версиями

Материал из LingvoWiki
Перейти к навигацииПерейти к поиску
(→‎CSS: примеры background-color, скелет и образец border)
Строка 54: Строка 54:
 
=CSS=
 
=CSS=
 
<div style="background:ivory;width:90%;margin-left:5%;padding-left:2%;padding-right:2%;">
 
<div style="background:ivory;width:90%;margin-left:5%;padding-left:2%;padding-right:2%;">
−
<h3>Свойство BACKGROUND</h3>
+
==Свойство BACKGROUND==
 
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.
 
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.
−
<h4>Синтаксис</h4>
+
===Синтаксис===
 
<code style="font-family:Consolas, mono;">background: background-attachment || background-color || background-image || background-position || background-repeat</code>
 
<code style="font-family:Consolas, mono;">background: background-attachment || background-color || background-image || background-position || background-repeat</code>
  
 
Аргументы: любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.<hr />
 
Аргументы: любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.<hr />
−
<h4>Свойство BACKGROUND-ATTACHMENT</h4>
+
===Свойство BACKGROUND-ATTACHMENT===
 
Параметр устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.  
 
Параметр устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.  
−
<h5>Синтаксис</h5>
+
====Синтаксис====
 
<code style="font-family:Consolas, mono;">background-attachment: fixed | scroll</code>
 
<code style="font-family:Consolas, mono;">background-attachment: fixed | scroll</code>
  
 
Значение fixed делает фоновое изображение элемента неподвижным (и очень тормозит прокрутку), scroll&nbsp;— позволяет перемещаться фону вместе с содержимым.<hr />
 
Значение fixed делает фоновое изображение элемента неподвижным (и очень тормозит прокрутку), scroll&nbsp;— позволяет перемещаться фону вместе с содержимым.<hr />
−
<h4>Свойство BACKGROUND-COLOR</h4>
+
===Свойство BACKGROUND-COLOR===
 
Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.
 
Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.
−
<h5>Синтаксис</h5>
+
====Синтаксис====
 
<code style="font-family:Consolas, mono;">background-color: ''цвет''</code>
 
<code style="font-family:Consolas, mono;">background-color: ''цвет''</code>
  
Строка 83: Строка 83:
  
 
Кроме значения цвета, еще один допустимый аргумент — <code>transparent</code>, устанавливающий прозрачный фон.<hr />
 
Кроме значения цвета, еще один допустимый аргумент — <code>transparent</code>, устанавливающий прозрачный фон.<hr />
−
<h4>Свойство BACKGROUND-IMAGE</h4>
+
===Свойство BACKGROUND-IMAGE===
 
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
 
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
−
<h5>Синтаксис</h5>
+
====Синтаксис====
 
<code style="font-family:Consolas, mono;">background-image: url(''путь к файлу'') | none</code>
 
<code style="font-family:Consolas, mono;">background-image: url(''путь к файлу'') | none</code>
  
 
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции <code>url()</code>. Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение <code>none</code>.<hr />
 
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции <code>url()</code>. Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение <code>none</code>.<hr />
−
<h4>Свойство BACKGROUND-POSITION</h4>
+
===Свойство BACKGROUND-POSITION===
 
Задает начальное положение фонового изображения, установленного с помощью параметра <code>background-image</code>.
 
Задает начальное положение фонового изображения, установленного с помощью параметра <code>background-image</code>.
−
<h5>Синтаксис</h5>
+
====Синтаксис====
 
<code style="font-family:Consolas, mono;">background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]</code>
 
<code style="font-family:Consolas, mono;">background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]</code>
  
Строка 107: Строка 107:
  
 
В скобках указано, где располагается фоновый рисунок относительно контейнера.<hr />
 
В скобках указано, где располагается фоновый рисунок относительно контейнера.<hr />
−
<h4>Свойство BACKGROUND-REPEAT</h4>
+
===Свойство BACKGROUND-REPEAT===
 
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра <code>background-image</code>, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
 
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра <code>background-image</code>, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
−
<h5>Синтаксис</h5>
+
====Синтаксис====
 
<code style="font-family:Consolas, mono;">background-repeat: no-repeat | repeat | repeat-x | repeat-y</code>
 
<code style="font-family:Consolas, mono;">background-repeat: no-repeat | repeat | repeat-x | repeat-y</code>
  
−
'''Аргументы'''<br />
+
====Аргументы====<br />
 
*<code>no-repeat</code><br />
 
*<code>no-repeat</code><br />
 
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом <code>background-position</code> (по умолчанию в левом верхнем углу).
 
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом <code>background-position</code> (по умолчанию в левом верхнем углу).
Строка 124: Строка 124:
 
*<code>repeat-y</code><br />
 
*<code>repeat-y</code><br />
 
Фоновый рисунок повторяется только по вертикали
 
Фоновый рисунок повторяется только по вертикали
−
<h4></h4>
 
 
</div>
 
</div>
 +
==='''Примеры использования'''===
 +
&nbsp;&nbsp;&nbsp;свойства <code>background-color</code> на <s><span style="color:grey;">кошках</span></s> таблицах.
 +
 +
Свойство <code>background-color:lightgreen</code> применено ко всей таблице.<br />
 +
Результат:
 +
{| style="background-color:lightgreen;"
 +
|&nbsp;A&nbsp;
 +
|&nbsp;B&nbsp;
 +
|-
 +
|&nbsp;C&nbsp;
 +
|&nbsp;D&nbsp;
 +
|}
 +
<hr />
 +
К первой строке применено свойство <code>background-color:green</code>,<br />
 +
ко второй строке применено свойство <code>background-color:azure</code>.<br />
 +
Результат:
 +
{|
 +
|- style="background-color:green;"
 +
|&nbsp;A&nbsp;
 +
|&nbsp;B&nbsp;
 +
|- style="background-color:azure;"
 +
|&nbsp;C&nbsp;
 +
|&nbsp;D&nbsp;
 +
|}
 +
<hr />
 +
К ячейке '''A''' применено свойство <code>background-color:beige</code>,<br />
 +
&nbsp;&nbsp;к ячейке '''B''' применено свойство <code>background-color:teal</code>,<br />
 +
&nbsp;&nbsp;к ячейке '''C''' применено свойство <code>background-color:khaki</code>.<br />
 +
&nbsp;&nbsp;к ячейке '''D''' применено свойство <code>background-color:purple</code>.<br />
 +
Результат:
 +
{|
 +
|-
 +
| style="background-color:beige;"|&nbsp;A&nbsp;
 +
| style="background-color:teal;"|&nbsp;B&nbsp;
 +
|-
 +
| style="background-color:khaki;"|&nbsp;C&nbsp;
 +
| style="background-color:purple;"|&nbsp;D&nbsp;
 +
|}
 +
<hr />
 +
<div style="background:ivory;width:90%;margin-left:5%;padding-left:2%;padding-right:2%;">
 +
== Свойство BORDER ==
 +
<hr />
 +
=== Свойство BORDER-COLOR ===
 +
<hr />
 +
=== Свойство BORDER-STYLE ===
 +
<hr />
 +
=== Свойство BORDER-WIDTH ===
 +
<hr />
 +
=== Свойство BORDER-TOP ===
 +
<hr />
 +
==== Свойство BORDER-TOP-COLOR ====
 +
<hr />
 +
==== Свойство BORDER-TOP-STYLE ====
 +
<hr />
 +
==== Свойство BORDER-TOP-WIDTH ====
 +
<hr />
 +
=== Свойство BORDER-LEFT ===
 +
<hr />
 +
==== Свойство BORDER-LEFT-COLOR ====
 +
<hr />
 +
==== Свойство BORDER-LEFT-STYLE ====
 +
<hr />
 +
==== Свойство BORDER-LEFT-WIDTH ====
 +
<hr />
 +
=== Свойство BORDER-RIGHT ===
 +
<hr />
 +
==== Свойство BORDER-RIGHT-COLOR ====
 +
<hr />
 +
==== Свойство BORDER-RIGHT-STYLE ====
 +
<hr />
 +
==== Свойство BORDER-RIGHT-WIDTH ====
 +
<hr />
 +
=== Свойство BORDER-BOTTOM ===
 +
<hr />
 +
==== Свойство BORDER-BOTTOM-COLOR ====
 +
<hr />
 +
==== Свойство BORDER-BOTTOM-STYLE ====
 +
<hr />
 +
==== Свойство BORDER-BOTTOM-WIDTH ====
 +
<hr />
 +
</div>
 +
{| border="1" style="border-width:0px;"
 +
| style="border-width:thin;"|&nbsp;'''A'''1&nbsp;
 +
| style="border-width:thin; border-style:dotted;"|&nbsp;'''B'''1&nbsp;
 +
| style="border-width:thin; border-style:dashed;"|&nbsp;'''C'''1&nbsp;
 +
| style="border-width:medium; border-style:outset;"|&nbsp;'''D'''1&nbsp;
 +
| style="border-width:medium; border-style:inset;"|&nbsp;'''E'''1&nbsp;
 +
| style="border-width:medium; border-style:groove;"|&nbsp;'''F'''1&nbsp;
 +
| style="border-width:thick; border-style:ridge;"|&nbsp;'''Z'''1&nbsp;
 +
| style="border-width:thick; border-style:double;"|&nbsp;'''H'''1&nbsp;
 +
| style="border-width:thick; border-style:solid;"|&nbsp;'''Θ'''1&nbsp;
 +
| style="border-width:5px; border-style:dotted dashed groove double;"|&nbsp;'''I'''1&nbsp;
 +
|-
 +
| style="border-width:thin thin; border-color:darkgreen;"|&nbsp;'''A'''2&nbsp;
 +
| style="border-width:thin medium; border-style:dotted solid; border-color:darkgreen;"|&nbsp;'''B'''2&nbsp;
 +
| style="border-width:thin thick; border-style:dashed dotted; border-color:darkgreen;"|&nbsp;'''C'''2&nbsp;
 +
| style="border-width:medium thin; border-style:outset groove; border-color:darkgreen;"|&nbsp;'''D'''2&nbsp;
 +
| style="border-width:medium medium; border-style:inset ridge; border-color:darkgreen;"|&nbsp;'''E'''2&nbsp;
 +
| style="border-width:medium thick; border-style:groove dotted; border-color:darkgreen;"|&nbsp;'''F'''2&nbsp;
 +
| style="border-width:thick thin; border-style:double dashed; border-color:darkgreen;"|&nbsp;'''Z'''2&nbsp;
 +
| style="border-width:thick medium; border-style:double double; border-color:darkgreen;"|&nbsp;'''H'''2&nbsp;
 +
| style="border-width:thick thick; border-style:solid dashed; border-color:darkgreen;"|&nbsp;'''Θ'''2&nbsp;
 +
| style="border-width:5px 7px 9px; border-style:dotted dashed groove double; border-color:darkgreen;"|&nbsp;'''I'''2&nbsp;
 +
|-
 +
| style="border-width:thin thin medium; border-color:navy;"|&nbsp;'''A'''3&nbsp;
 +
| style="border-width:thin medium thin; border-style:dotted solid dotted; border-color:navy;"|&nbsp;'''B'''3&nbsp;
 +
| style="border-width:medium thin thin; border-style:dashed dotted dashed; border-color:navy;"|&nbsp;'''C'''3&nbsp;
 +
| style="border-width:thin medium thick; border-style:outset groove groove; border-color:navy;"|&nbsp;'''D'''3&nbsp;
 +
| style="border-width:thick medium thin; border-style:inset ridge double; border-color:navy;"|&nbsp;'''E'''3&nbsp;
 +
| style="border-width:medium thin thin; border-style:groove solid dotted; border-color:navy;"|&nbsp;'''F'''3&nbsp;
 +
| style="border-width:medium thin medium ; border-style:ridge double dashed; border-color:navy;"|&nbsp;'''Z'''3&nbsp;
 +
| style="border-width:medium thin thick; border-style:double solid groove; border-color:navy;"|&nbsp;'''H'''3&nbsp;
 +
| style="border-width:thick medium thick; border-style:solid dashed solid; border-color:navy;"|&nbsp;'''Θ'''3&nbsp;
 +
| style="border-width:5px 7px 9px; border-style:dotted dashed groove double; border-color:navy;"|&nbsp;'''I'''3&nbsp;
 +
|-
 +
| style="border-width:medium 5px 3px 8px; border-color:maroon;"|&nbsp;'''A'''4&nbsp;
 +
| style="border-width:4px thin 7px thin; border-style:solid solid dotted solid; border-color:maroon;"|&nbsp;'''B'''4&nbsp;
 +
| style="border-width:medium 5px 6px thin; border-style:dashed dotted dashed dashed; border-color:maroon;"|&nbsp;'''C'''4&nbsp;
 +
| style="border-width:0.4em medium 1mm 3px; border-style:outset groove groove groove; border-color:maroon;"|&nbsp;'''D'''4&nbsp;
 +
| style="border-width:thick 0.5em 1en thin; border-style:inset ridge double double; border-color:maroon;"|&nbsp;'''E'''4&nbsp;
 +
| style="border-width:medium 2mm thin 3mm; border-style:groove solid dotted groove; border-color:maroon;"|&nbsp;'''F'''4&nbsp;
 +
| style="border-width:3px 4px 5px 6px; border-style:ridge double dashed ridge; border-color:maroon;"|&nbsp;'''Z'''4&nbsp;
 +
| style="border-width:0.2em 0.5em 0.7em 1em; border-style:double solid groove dashed; border-color:maroon;"|&nbsp;'''H'''4&nbsp;
 +
| style="border-width:0.2en 0.5en 0.7en 1en; border-style:solid dashed groove ridge; border-color:maroon;"|&nbsp;'''Θ'''4&nbsp;
 +
| style="border-width:1mm 0.05in 4mm 3pt; border-style:dotted dashed groove double; border-color:maroon;"|&nbsp;'''I'''4&nbsp;
 +
|}

Версия 18:19, 3 апреля 2010

Песочницы мне мало. Я люблю простор.

Мои шаблоны

ЛЭС
I longa
Lang-la-test

Тест шаблонов

Из Википедия:Механизм шаблонов

Если в главном пространстве имен существует статья Имя шаблона, то можно вызвать ее, поставив перед именем шаблона двоеточие 

{{:Имя шаблона}}

Таким образом, любую страницу можно использовать как шаблон. Если вызывать так картинку 

{{Файл:Имя шаблона}}

или категорию, 

{{Категория:Имя шаблона}}

то будет подставлена описательная часть картинки и категории соответственно. Таким способом удобно экспериментировать с шаблонами (не залезая в пространство шаблонов); «вытаскивать» подписи и описания картинок;

изготавливать специальные составные статьи (например, для печати).

Проверка связи

{{:МФА}} ⇒

LambdaGlobeLogo.png Это незавершённая статья.
Вы можете помочь проекту, исправив и дополнив её.

Международный фонетический алфавит — система знаков для транскрипции, разработанная и поддерживаемая Международной фонетический ассоциацией. Основана на латинице. Каждый символ обозначает один звук, каждый звук записывается одним символом. МФА не имеет различных символов для двух звуков, если ни один из известных языков не делает между ними различия (так называемая селективность).

Ссылки

{{МФА}} ⇒ {{{1}}} (Шаблон как он есть)
{{МФА|МФА}} ⇒ МФА (Текст шрифтом для МФА)
{{:МФА|МФА}} ⇒

LambdaGlobeLogo.png Это незавершённая статья.
Вы можете помочь проекту, исправив и дополнив её.

Международный фонетический алфавит — система знаков для транскрипции, разработанная и поддерживаемая Международной фонетический ассоциацией. Основана на латинице. Каждый символ обозначает один звук, каждый звук записывается одним символом. МФА не имеет различных символов для двух звуков, если ни один из известных языков не делает между ними различия (так называемая селективность).

Ссылки


''{{msgnw:МФА}}'' ⇒ <span style="font-family: 'DejaVu Sans', Universalia, 'Arial Unicode MS', 'Lucida Sans Unicode', 'Charis SIL', Calibri, 'Segoe UI', Tahoma, Arial, sans-serif, Consolas, 'Everson Mono', 'Courier New', Code2000;">{{{1}}}</span><noinclude> Шаблон для транскрипции в [[Международный фонетический алфавит|международном фонетическом алфавите]]. Для использования, введите код <tt>{<i></i>{<i></i>МФА|</tt>ваша транскрипция<tt><i></i>}<i></i>}</tt>.<br /> Альтернативный вариант: <tt>{<i></i>{<i></i>IPA|</tt>ваша транскрипция<tt><i></i>}<i></i>}</tt>. Этот код ''не вставляет скобок.'' [[Категория:Шаблоны:Выбор шрифтов|{{PAGENAME}}]] [[Категория:Шаблоны:Семантическая разметка|{{PAGENAME}}]] </noinclude>


Работает.
Теперь файло.

[[Файл:MyLingvoWiki.png|30px]] ⇒ MyLingvoWiki.png
{{Файл:MyLingvoWiki.png}} ⇒ Логотип локальной LingvoWiki


{{:Файл:MyLingvoWiki.png}} ⇒ Логотип локальной LingvoWiki


Работает.
Попробуем категории.

[[Категория:Шаблоны]] ⇒ Категория:Шаблоны
{{Категория:Шаблоны}} ⇒ Шаблоны, используемые в ЛингвоВики.
{{:Категория:Шаблоны}} ⇒ Шаблоны, используемые в ЛингвоВики.

Bhudh 08:24, 20 марта 2010 (UTC)

Текстики

ЧЮДНЩЄ (Автор: Борис Заходер)

CSS

Свойство BACKGROUND

Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

Синтаксис

background: background-attachment || background-color || background-image || background-position || background-repeat

Аргументы: любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Свойство BACKGROUND-ATTACHMENT

Параметр устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Синтаксис

background-attachment: fixed | scroll

Значение fixed делает фоновое изображение элемента неподвижным (и очень тормозит прокрутку), scroll — позволяет перемещаться фону вместе с содержимым.

Свойство BACKGROUND-COLOR

Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.

Синтаксис

background-color: цвет

Значение цвета можно задавать тремя способами.

По его названию

По шестнадцатеричному значению

  • Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

С помощью RGB

  • Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Например: RGB(249, 201, 16). Также можно задавать цвет в процентном отношении.
Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Свойство BACKGROUND-IMAGE

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.

Синтаксис

background-image: url(путь к файлу) | none

В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение none.

Свойство BACKGROUND-POSITION

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

Синтаксис

background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее:

  • top left = left top = 0% 0%  (в левом верхнем углу)
  • top = top center = center top = 50% 0%  (по центру вверху)
  • right top = top right = 100% 0%  (в правом верхнем углу)
  • left = left center = center left = 0% 50%  (по левому краю и по центру)
  • center = center center = 50% 50%  (по центру)
  • right = right center = center right = 100% 50%  (по правому краю и по центру)
  • bottom left = left bottom = 0% 100%  (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100%  (по центру внизу)
  • bottom right = right bottom = 100% 100%  (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.

Свойство BACKGROUND-REPEAT

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y

====Аргументы====

  • no-repeat

Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу).

  • repeat

Фоновое изображение повторяется по горизонтали и вертикали.

  • repeat-x

Фоновый рисунок повторяется только по горизонтали

  • repeat-y

Фоновый рисунок повторяется только по вертикали

Примеры использования

   свойства background-color на кошках таблицах.

Свойство background-color:lightgreen применено ко всей таблице.
Результат:

 A   B 
 C   D 

К первой строке применено свойство background-color:green,
ко второй строке применено свойство background-color:azure.
Результат:

 A   B 
 C   D 

К ячейке A применено свойство background-color:beige,
  к ячейке B применено свойство background-color:teal,
  к ячейке C применено свойство background-color:khaki.
  к ячейке D применено свойство background-color:purple.
Результат:

 A   B 
 C   D 

Свойство BORDER

Свойство BORDER-COLOR

Свойство BORDER-STYLE

Свойство BORDER-WIDTH

Свойство BORDER-TOP

Свойство BORDER-TOP-COLOR

Свойство BORDER-TOP-STYLE

Свойство BORDER-TOP-WIDTH

Свойство BORDER-LEFT

Свойство BORDER-LEFT-COLOR

Свойство BORDER-LEFT-STYLE

Свойство BORDER-LEFT-WIDTH

Свойство BORDER-RIGHT

Свойство BORDER-RIGHT-COLOR

Свойство BORDER-RIGHT-STYLE

Свойство BORDER-RIGHT-WIDTH

Свойство BORDER-BOTTOM

Свойство BORDER-BOTTOM-COLOR

Свойство BORDER-BOTTOM-STYLE

Свойство BORDER-BOTTOM-WIDTH

 A1   B1   C1   D1   E1   F1   Z1   H1   Θ1   I1 
 A2   B2   C2   D2   E2   F2   Z2   H2   Θ2   I2 
 A3   B3   C3   D3   E3   F3   Z3   H3   Θ3   I3 
 A4   B4   C4   D4   E4   F4   Z4   H4   Θ4   I4 
Источник — https://wiki.lingvoforum.net/wiki/index.php?title=Участник:Bhudh/Plage&oldid=2003