НовоВики. «Мой Новосибирск родной!»
Справка:Оформление страниц НовоВики — различия между версиями
(→Выравнивание) |
(→Блоки) |
||
(не показаны 10 промежуточных версий 1 участника) | |||
Строка 120: | Строка 120: | ||
− | <nowiki>style="vertical-align: top"| | + | <nowiki>style="vertical-align: top"|Содержимое ячейки выровнено по верхнему краю</nowiki> |
− | |style="vertical-align: top"| | + | |style="vertical-align:top"|Содержимое ячейки выровнено по верхнему краю |
|- | |- | ||
| | | | ||
− | <nowiki>style="vertical-align: center"| | + | <nowiki>style="vertical-align: center"|Содержимое ячейки выровнено по центру (по вертикали)</nowiki> |
− | |style="vertical-align: center"| | + | |style="vertical-align: center"|Содержимое ячейки выровнено по центру (по вертикали) |
|- | |- | ||
− | + | | | |
− | + | ||
− | + | <nowiki>style="vertical-align: down"|Содержимое ячейки выровнено по нижнему краю</nowiki> | |
+ | |style="vertical-align: down"|Содержимое ячейки выровнено | ||
|- | |- | ||
|colspan="2" align="center"|'''Выравнивание по горизонтали''' | |colspan="2" align="center"|'''Выравнивание по горизонтали''' | ||
|- | |- | ||
− | | | + | |<nowiki>style="text-align: left"|Содержимое ячейки выровнено по левому краю</nowiki> |
− | + | |style="text-align: left"|Содержимое ячейки выровнено по левому краю | |
− | + | ||
− | <nowiki>style="text-align: left"| | + | |
− | |style="text-align: left"| | + | |
|- | |- | ||
− | | | + | |<nowiki>style="text-align: center"|Содержимое ячейки выровнено по центру (по горизонтали)</nowiki> |
− | + | |style="text-align: center"|Содержимое ячейки выровнено по центру (по горизонтали) | |
− | + | ||
− | <nowiki>style="text-align: center"| | + | |
− | |style="text-align: center"| | + | |
|- | |- | ||
− | | | + | |<nowiki>style="text-align: right"|Содержимое ячейки выровнено по правому краю</nowiki> |
− | + | |style="text-align: right"|Содержимое ячейки выровнено по правому краю | |
− | + | ||
− | <nowiki>style="text-align: right"| | + | |
− | |style="text-align: right"| | + | |
|- | |- | ||
− | |<nowiki>align="center"| | + | |<nowiki>align="center"|Содержимое ячейки выровнено по центру (по горизонтали)</nowiki> |
− | |align="center"| | + | |align="center"|Содержимое ячейки выровнено по центру (по горизонтали) |
− | + | ||
|- | |- | ||
|colspan="2" align="center"|'''Выравнивание по вертикали и горизонтали''' | |colspan="2" align="center"|'''Выравнивание по вертикали и горизонтали''' | ||
Строка 176: | Строка 166: | ||
|- | |- | ||
| | | | ||
+ | <nowiki>{|</nowiki> cellpadding="10" cellspacing="5" style="width: 100%;" | ||
+ | |||
+ | <nowiki>| style="width: 50%; border: 2px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 80px; height: 60px;" |</nowiki> | ||
+ | |||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |||
+ | <nowiki>|style="width: 50%; border: 10px solid green; -moz-border-radius-topleft: 80px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; height: 60px;" |</nowiki> | ||
+ | |||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
| | | | ||
+ | {| cellpadding="10" cellspacing="5" style="width: 100%;" | ||
+ | | style="width: 50%; border: 2px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 80px; height: 60px;" | | ||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |style="width: 50%; border: 10px solid green; -moz-border-radius-topleft: 80px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; height: 60px;" | | ||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |} | ||
+ | |} | ||
+ | |||
+ | '''где:''' | ||
+ | |||
+ | {|class="standard" | ||
+ | |<nowiki>style=</nowiki> | ||
+ | |<nowiki>"width: 50%;</nowiki> | ||
+ | |<nowiki>border: 2px</nowiki> | ||
+ | |<nowiki>solid #777777;</nowiki> | ||
+ | |<nowiki>-moz-border-radius-topleft: 8px;</nowiki> | ||
+ | |<nowiki>-moz-border-radius-bottomleft: 8px;</nowiki> | ||
+ | |<nowiki>-moz-border-radius-topright: 8px;</nowiki> | ||
+ | |<nowiki>-moz-border-radius-bottomright: 8px;</nowiki> | ||
+ | |<nowiki>height: 60px;"</nowiki> | ||
+ | |- | ||
+ | |стиль= | ||
+ | |"ширина: 50%; | ||
+ | |толщина границы:2пикселя; | ||
+ | |цвет границы СЕРЫЙ; | ||
+ | |<nowiki>-скругление-левого-верхнего-угла: 8 пикселей;</nowiki> | ||
+ | |<nowiki>-скругление-левого-нижнего-угла: 8 пикселей;</nowiki> | ||
+ | |<nowiki>-скругление-правого-верхнего-угла: 8 пикселей;</nowiki> | ||
+ | |<nowiki>-скругление-правого-нижнего-угла: 8 пикселей;</nowiki> | ||
+ | |высота: 60 пикселей;" | ||
|} | |} | ||
Строка 198: | Строка 229: | ||
== Изображения == | == Изображения == | ||
− | ===Выравнивание=== | + | ===Выравнивание изображения=== |
+ | [[Файл:640px-Wiki0.png|100px|right|thumb|Вики-технологии - это ...]] | ||
+ | |||
+ | Вы можете размещать изображение справа: <code><nowiki>[[Файл:640px-Wiki0.png|100px|right|thumb|Вики-технологии - это ...]]</nowiki></code> | ||
+ | |||
+ | <br clear="all"/> | ||
+ | |||
+ | [[Файл:640px-Wiki0.png|100px|center|thumb|Вики-технологии - это ...]] | ||
+ | |||
+ | Вы можете размещать изображение по центру: <code><nowiki>[[Файл:640px-Wiki0.png|100px|center|thumb|Вики-технологии - это ...]]</nowiki></code> | ||
+ | |||
+ | <br clear="all"/> | ||
+ | |||
+ | [[Файл:640px-Wiki0.png|100px|left|thumb|Вики-технологии - это ...]] | ||
+ | |||
+ | Вы можете размещать изображение слева: <code><nowiki>[[Файл:640px-Wiki0.png|100px|left|thumb|Вики-технологии - это ...]]</nowiki></code> | ||
+ | |||
+ | <br clear="all"/> | ||
+ | === Окончание обтекания текстом изображения === | ||
+ | |||
+ | Для пометки окончания обтекающего изображение текста используйте специальный HTML-код: <code><nowiki><br clear="all"/></nowiki></code>[[Файл:640px-Wiki0.png|100px|left|thumb|Вики-технологии - это ...]]<br clear="all"/> | ||
+ | |||
+ | Текст, расположенный после этого кода, будет начинаться с новой строки и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье. | ||
+ | |||
+ | ==Блоки== | ||
+ | Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) | ||
+ | |||
{|class="wide wikitable" | {|class="wide wikitable" | ||
!style="width:50%"|Код | !style="width:50%"|Код | ||
Строка 204: | Строка 261: | ||
|- | |- | ||
| | | | ||
− | + | <nowiki> | |
− | + | <div style="background-color:#D7FFC7;font-size:1px;height:8px;border:1px solid #AAAAAA;-moz-border-radius-topright:0.5em;-moz-border-radius-topleft:0.5em;"></div></nowiki> | |
− | == | + | |
− | + | <nowiki> | |
− | + | <div style="border:1px solid #97BF87;border-top:0px solid white;padding:5px 5px 0 5px;margin-bottom:3ex;"> | |
− | + | Здесь можно расположить любой текст</div></nowiki> | |
+ | |||
+ | |<div style="background-color:#D7FFC7;font-size:1px;height:8px;border:1px solid #AAAAAA;-moz-border-radius-topright:0.5em;-moz-border-radius-topleft:0.5em;"></div> | ||
+ | <div style="border:1px solid #97BF87;border-top:0px solid white;padding:5px 5px 0 5px;margin-bottom:3ex;"> | ||
+ | Здесь можно расположить любой текст</div> | ||
+ | |- | ||
+ | |<nowiki><div style="border:1px solid #FF9600; float:right; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> Парам-парам-парам-пам </div></nowiki> | ||
+ | |||
+ | <nowiki><div style="border:1px solid #FF9600; float:left; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> Парам-парам-парам-пам </div></nowiki> | ||
+ | |||
+ | Показан пример расположения двух контейнеров, содержащих информацию и расположенных по краям страницы. | ||
+ | |<div style="border:1px solid #FF9600; float:right; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> Парам-парам-парам-пам </div> | ||
+ | |||
+ | <div style="border:1px solid #FF9600; float:left; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> | ||
+ | Парам-парам-парам-пам</div> | ||
+ | |||
+ | Показан пример расположения двух контейнеров, содержащих информацию и расположенных по краям страницы. | ||
|- | |- | ||
| | | | ||
+ | <nowiki>{|cellpadding="15" cellspacing="10" style="width: 100%; background-color: inherit; margin-left: auto; margin-right: auto"</nowiki> | ||
+ | |||
+ | <nowiki>| style="width: 50%; border: 4px solid #228B22; -moz-border-radius-topleft: 66px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 66px; height: 60px; background-color: #C1FFC1;" |</nowiki> | ||
+ | |||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
| | | | ||
+ | {|cellpadding="15" cellspacing="10" style="width: 100%; background-color: inherit; margin-left: auto; margin-right: auto" | ||
+ | | style="width: 50%; border: 4px solid #228B22; -moz-border-radius-topleft: 66px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 66px; height: 60px; background-color: #C1FFC1;" | | ||
+ | ТЕКСТ, ТЕКСТ, ТЕКСТ | ||
+ | |} | ||
|} | |} |
Текущая версия на 01:30, 25 февраля 2012
Содержание |
[править] Работа с текстом
[править] Заголовки
Код | Результат |
---|---|
=Заголовок 1-го уровня= |
[править] Заголовок 1-го уровня |
==Заголовок 2-го уровня== |
[править] Заголовок 2-го уровня |
===Заголовок 3-го уровня=== |
[править] Заголовок 3-го уровня |
====Заголовок 4-го уровня==== |
[править] Заголовок 4-го уровня |
=====Заголовок 5-го уровня===== |
[править] Заголовок 5-го уровня |
======Заголовок 6-го уровня====== |
[править] Заголовок 6-го уровня |
[править] Размер текста
Код | Результат |
---|---|
<font size="6">Текст размером 6</font> | Текст размером 6 |
<font size="5">Текст размером 5</font> | Текст размером 5 |
<font size="4">Текст размером 4</font> | Текст размером 4 |
<font size="3">Текст размером 3</font> | Текст размером 3 |
<font size="2">Текст размером 2</font> | Текст размером 2 |
<font size="1">Текст размером 1</font> | Текст размером 1 |
[править] Цвет текста
Цвета (наименование или код) см. в справочной статье "Таблица цветов HTML".
Код | Результат |
---|---|
Цветной текст
<span style="color:#008000">Образова́ние</span> — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Цветной абзац
<div style="color:red">Образова́ние</div> — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов)
|
[править] Выравнивание текста
Этот абзац отцентрирован. Использована конструкция: <p style="text-align:center">текст абзаца</p>
. Для того, чтобы лучше показать, чем отличается выравнивание по центру от выравнивания по ширине, по левому и по правому краю, пришлось вставить этот текст.
Этот абзац выровнен по ширине. Использована конструкция: <p style="text-align:justify">текст абзаца</p>
. Для того, чтобы лучше показать, чем отличается выравнивание по ширине от выравнивания по центру, по левому и по правому краю, пришлось вставить этот текст.
Этот абзац выровнен по левому краю. Использована конструкция: <p style="text-align:left">текст абзаца</p>
. Для того, чтобы лучше показать, чем отличается выравнивание по левому краю от выравнивания по центру, по ширине и по правому краю, пришлось вставить этот текст.
Этот абзац выровнен по правому краю. Использована конструкция: <p style="text-align:right">текст абзаца</p>
. Для того, чтобы лучше показать, чем отличается выравнивание по правому краю от выравнивания по центру, ширине и по левому краю, пришлось вставить этот текст.
По умолчанию принято выравнивание по левому краю.
[править] Цвет фона текста
Цвета (наименование или код) см. в справочной статье "Таблица цветов HTML".
Код | Результат |
---|---|
Фон для одного или нескольких слов
<span style="background-color:yellow">Образова́ние</span> — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Фон абзаца
<div style="background-color:yellow">Образова́ние</div> — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов) |
Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов)
|
[править] Оформление таблиц
[править] Выравнивание
Код | Результат |
---|---|
Выравнивание по вертикали | |
|
Содержимое ячейки выровнено по верхнему краю |
|
Содержимое ячейки выровнено по центру (по вертикали) |
|
Содержимое ячейки выровнено |
Выравнивание по горизонтали | |
style="text-align: left"|Содержимое ячейки выровнено по левому краю | Содержимое ячейки выровнено по левому краю |
style="text-align: center"|Содержимое ячейки выровнено по центру (по горизонтали) | Содержимое ячейки выровнено по центру (по горизонтали) |
style="text-align: right"|Содержимое ячейки выровнено по правому краю | Содержимое ячейки выровнено по правому краю |
align="center"|Содержимое ячейки выровнено по центру (по горизонтали) | Содержимое ячейки выровнено по центру (по горизонтали) |
Выравнивание по вертикали и горизонтали | |
|
Текст выровненный по верхнему правому краю |
[править] Границы
Цвета (наименование или код) см. в справочной статье "Таблица цветов HTML".
Код | Результат | ||
---|---|---|---|
{| cellpadding="10" cellspacing="5" style="width: 100%;" | style="width: 50%; border: 2px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 80px; height: 60px;" | ТЕКСТ, ТЕКСТ, ТЕКСТ |style="width: 50%; border: 10px solid green; -moz-border-radius-topleft: 80px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; height: 60px;" | ТЕКСТ, ТЕКСТ, ТЕКСТ |} |
|
где:
style= | "width: 50%; | border: 2px | solid #777777; | -moz-border-radius-topleft: 8px; | -moz-border-radius-bottomleft: 8px; | -moz-border-radius-topright: 8px; | -moz-border-radius-bottomright: 8px; | height: 60px;" |
стиль= | "ширина: 50%; | толщина границы:2пикселя; | цвет границы СЕРЫЙ; | -скругление-левого-верхнего-угла: 8 пикселей; | -скругление-левого-нижнего-угла: 8 пикселей; | -скругление-правого-верхнего-угла: 8 пикселей; | -скругление-правого-нижнего-угла: 8 пикселей; | высота: 60 пикселей;" |
[править] Цвет фона
Цвета (наименование или код) см. в справочной статье "Таблица цветов HTML".
Код | Результат |
---|---|
Фон ячейки таблицы
style="background-color:#FA8072;" | текст |
текст |
Фон ячейки таблицы (альтернативный вариант)
bgcolor="#FEDBCA" | текст |
текст |
[править] Изображения
[править] Выравнивание изображения
Вы можете размещать изображение справа: [[Файл:640px-Wiki0.png|100px|right|thumb|Вики-технологии - это ...]]
Вы можете размещать изображение по центру: [[Файл:640px-Wiki0.png|100px|center|thumb|Вики-технологии - это ...]]
Вы можете размещать изображение слева: [[Файл:640px-Wiki0.png|100px|left|thumb|Вики-технологии - это ...]]
[править] Окончание обтекания текстом изображения
Для пометки окончания обтекающего изображение текста используйте специальный HTML-код:<br clear="all"/>
Текст, расположенный после этого кода, будет начинаться с новой строки и будет располагаться ниже нижнего края любого из изображений, расположенных прежде этого кода в статье.
[править] Блоки
Образова́ние — целенаправленный процесс воспитания и обучения в интересах человека, общества, государства, сопровождающийся констатацией достижения гражданином (обучающимся) установленных государством образовательных уровней (образовательных цензов)
Код | Результат | |
---|---|---|
<div style="background-color:#D7FFC7;font-size:1px;height:8px;border:1px solid #AAAAAA;-moz-border-radius-topright:0.5em;-moz-border-radius-topleft:0.5em;"></div> <div style="border:1px solid #97BF87;border-top:0px solid white;padding:5px 5px 0 5px;margin-bottom:3ex;"> Здесь можно расположить любой текст</div> |
Здесь можно расположить любой текст
| |
<div style="border:1px solid #FF9600; float:right; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> Парам-парам-парам-пам </div>
<div style="border:1px solid #FF9600; float:left; width:200px; solid white;padding:5px 5px 0 5px;margin-bottom:3ex; font-size: 9px"> Парам-парам-парам-пам </div> Показан пример расположения двух контейнеров, содержащих информацию и расположенных по краям страницы. |
Парам-парам-парам-пам
Парам-парам-парам-пам
Показан пример расположения двух контейнеров, содержащих информацию и расположенных по краям страницы. | |
{|cellpadding="15" cellspacing="10" style="width: 100%; background-color: inherit; margin-left: auto; margin-right: auto" | style="width: 50%; border: 4px solid #228B22; -moz-border-radius-topleft: 66px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 66px; height: 60px; background-color: #C1FFC1;" | ТЕКСТ, ТЕКСТ, ТЕКСТ |} |
|