ФЭНДОМ


Строковый CSS (ориг. Inline-CSS) — CSS, размещенный непосредственно в HTML-разметке. Атрибут стиля добавляется в открытый HTML-тег (style= "..."); стиль может содержать сразу несколько CSS-правил, разделенных запятыми. Указанные правила будут действовать для всего содержимого HTML-тега. Правила должны содержать атрибут, двоеточие и его значения.

Для указания строкового CSS возможно использование различных HTML-тегов. Как правило, <div style="...">...</div> — используется для изменения целого абзаца, в то время, как <span style="...">...</span> — для изменения отдельных предложений в абзаце.

Примеры синтаксиса

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

<span style="color: green; text-decoration: blink;">…</span>

Таблицы

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

Граница

Толщина, тип и цвет

Все три атрибута устанавливаются атрибутом "border; , поддерживающего три значения, разделенных пробелом и расположенных в порядке: толщина, тип, цвет. Цвет и толщина могут быть заданы только вместе с типом.

<div style="border:___ … …;">…</div>
Значение Эффект
thin Тонкий
medium Средний (как у границы этой таблицы)
thick Толстый
__px Толщина в пикселях
<div style="border: … ___ …;">…</div>
Значение Эффект
none Нет
dashed Пунктир
dotted Точечный
solid Сплошной (нормальная линия)
stand-in Двойная линия (как у границы этой таблицы)
droove Желобчатый (зависит от цвета)
ridge Возвышенный (зависит от цвета)
inset Растущий наружу (зависит от цвета)
outset Наклоненный наружу (зависит от цвета)
<div style="border:… … ___;">…</div>
Значение Эффект
___ Выбранный цвет (см. Справка:Цвет)
transparent Невидимый (как у границы этой таблицы)

Если вы хотите изменить границу только с определенной стороны, используйте "border-top", "border-bottom", "border-left" или "border-right" (вверх, низ, лево, право).

Наложенные границы

{|style = "border-collapse: ___;"
...
|}
Значение Эффект
collapse Показать общую границу для всех ячеек
separate Показать границу для каждой ячейки (как в этой таблице)
Расстояние между смежными ячейками

Если граница между ячейками разделена, то задать расстояние между ячейками можно с помощью атрибута border-spacing. Если даны два значения, то они будут отвечать за верх и низ, соответственно.

{|style = "border-collapse: separate; border-spacing: ___ ___;"
...
|}
Значение Эффет
__px Дистанция в пикселях
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)
Пустые ячейки

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

{|style = "border-collapse: separate; empty-cells: ___;"
...
|}
Значение Эффект Пример
show Форматированные пустые ячейки  
hide Неформатированные пустые ячейки

Закругленные углы

Атрибут border-radius поддерживает до 8 значений: первые четыре значения определяют радиус в горизонтальной плоскости, последние четыре — в вертикальном положении. У квадратов и прямоугольников четыре угла, начиная с верхнего левого угла и далее по направлению часовой стрелке. Можно исключить четвертое значение, при этом будет использовано значение противоположного угла, равно как можно исключить и третье значение.

<div style="border-radius: _ _ _ _ / _ _ _ _;">…</div>
<div style="border-radius: _;">…</div>
Значение Эффект
__px Радиус в пикселях
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)

Margin

Атрибут margin поддерживает до 4 значений для 4 сторон: право, низ, лево, верх. Если четвертое значение пропущено, то будет использовано противоположное значение и т.д.

<div style="margin:_ _ _ _;">…</div>
Значение Эффект
auto Автоматически (как здесь)
__px Расстояние в пикселях
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)
__% Зависит от ширины родителя

С margin-right: auto и margin-left: auto контейнер можно переместить влево или вправо, не затрагивая текст и иные строковые элементы.

Padding

Атрибут padding, как и margin, поддерживает до четырех значений, которые указывают расстояние до внутренних границ ячеек.

<div style="border-collapse:separate; padding:_ _ _ _;">…</div>
Значение Эффект
__px Расстояние в пикселях (здесь: «8px»)
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)
__% Зависит от ширины родителя

Ширина и высота

<div style="width:___;">…</div>
Значение Эффект
auto Автоматически (по умолчанию)
__px Ширина в пикселах
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)
__% Зависит от ширины родителя (здесь: «90%»)
<div style="height:___;">…</div>
Значение Эффект
auto Автоматически («default»)
__px Высота в пикселях (здесь: «270px»)
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1ex» = высота текущей буквы)
__% Зависит от размера родителя

С помощью max-height, min-height, max-width и min-width можно задать размер для определенной стороны.

Масштабирование содержимого

Вы можете масштабировать содержимое, используя атрибуты ScaleX, ScaleY, Scale3D или Scale.

<div style = "transform:scalex(__);">
Значение Эффект
Transform:ScaleX(value) Горизонтальное масштабирование содержимого.
<div style = "transform:scaley(__);">
Значение Эффект
Transform:ScaleY(value) Вертикальное масштабирование содержимого.
<div style = "transform:scale(__);">
Значение Эффект
Transform:Scale(value) Масштабирование содержимого по обоим осям: X и Y.

Предотвращение утечек содержимого

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

<div style="overflow:___;">…</div>
Значение Эффект
visible
содержимое выходит за рамки блочного элемента (по умолчанию)
hidden
содержимое обрезается таким образом, чтобы поместиться внутри блочного элемента
scroll
к содержимому добавляются полосы прокрутки
auto к содержимому добавляются полосы прокрутки, но только если это необходимо

Позиционирование заголовка

{|style = "caption-side: ___;" "table caption" ...
|+

|}
Значение Эффект
top Заголовок вверху
bottom Заголовок внизу (как у этой таблицы)

Обтекание

<div style="float:___;">…</div>
Значение Эффект
none элемент остается на месте, обтекание не задано
right элемент перемещается вправо, обтекание слева
left элемент перемещается влево, обтекание справа (как у этой таблицы)

Атрибут float позволяет определить, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с противоположных сторон.

Тень

Атрибут box-shadow позволяет установить тень для таблиц и блочных элементов. Только два первых значения необходимы, остальные могут быть опущены.

<div style="box-shadow:___ ___ ___ ___ ___ ___;">…</div>
Значения для 1-4 Эффекты 1,2 Эффект 3 Эффект 4
__px Положение (в пикселях) Размытие Растяжение
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1em» = высота текущей буквы)
Значение для 5 Эффект
___ Цвет тени
Значение для 6 Эффект
inset Тень также будет выводиться внутрь элемента

Текст

Цвет текста

<div style="color:___;">…</div>
Значение Эффект
___ Выбранный цвет (см. Справка:Цвет)

Размер шрифта

<div style="font-size:___;">…</div>
Значение Эффект

xx-small
  x-small
  small
  medium
  large
  x-large
  xx-large
 

Фиксированные размеры (здесь: "large»)
__px Размер шрифта в пикселях («20px»)
__em Относительно размера шрифта («2em»)
__ex Относительно размера шрифта («2ex»)
__% Относительно размера шрифта («70%»)

Ширина шрифта

<div style="letter-spacing:___;">…</div>
Значение Эффект
normal Нормальный
__px Межбуквенный интервал в пикселях («2px»)
__em Относительно размера шрифта («0.2em»)
__ex Относительно размера шрифта («-0.08ex»)

Высота строки

<div style="line-height:___;">…</div>
Значение Эффект
normal Нормальный
__px Высота строки в пикселях («30px»)
Раз
__em Относительно размера шрифта («1.7em»)
Два
__ex Относительно размера шрифта («1.7ex»)
Три
__% Относительно размера шрифта («166%»)
Четыре

Выравнивание текста

<div style="text-align:___;">…</div>
Значение Эффект
right Право
Center Центр
left Лево
justify Ширина

Вертикальное выравнивание текста

<span style="vertical-align:___;">…</span>
Значение Эффект
top Верх
Middle Центр
bottom Низ
sub Подстрочный
great Надстрочный
__px Увеличить в пикселях («40px»)
__em Относительно размера шрифта («1.7em»)
__ex Относительно размера шрифта («-3ex»)

Аттрибут vertical-align позволяет выравнивать не только текст.

Отступ

<div style="text-indent:___;">…</div>
Значение Эффект
__px Отступ в пикселях («20px»)
__em Относительно размера шрифта («1.2em»)
__ex Относительно размера шрифта («1ex»)
__% Относительно размера шрифта («25%»)

Курсив

<div style="font-style:___;">…</div>
Значение Эффект
normal Нормальный
italic Курсив
Oblique Наклонный

Полужирный

<div style="font-weight:___;">…</div>
Значение Эффект
normal Нормальный
Bold Полужирный
Bolder Жирнее родителя
Lighter Светлее родителя

Капитель

<div style="font-variant:___;">…</div>
Значение Эффект
normal Нормальный
small-caps Заглавные буквы уменьшенного размера

Изменение регистра

<div style="text-transform:___;">…</div>
Значение Эффект
lowercase Все буквы прописного регистра
capitalize Первый символ каждого слова становится заглавным
Uppercase Все буквы заглавного регистра

Оформление текста

<div style="text-decoration:___;">…</div>
Значение Эффект
none Нормальный
underline Подчеркивание
overline Линия над текстом
line-through Зачеркивание
Flashing Мигающий текст

Тени

Только для первых значения ​​(позиция тени) являются обязательными, остальные могут быть опущены.

<div style="text-shadow:___ ___ ___ ___;">…</div>
Значения для 1-3 Эффект 1.2 Эффект 3
__px Положение (в пикселях) Растяжение
__em Зависит от размера шрифта («1em» = высота текущей заглавной буквы)
__ex Зависит от размера шрифта («1em» = высота текущей буквы)
Значение для 4 Эффект
___ Цвет тени (см. Справка:Цвет)

Шрифт

<span style="font-family:'Times New Roman',Georgia,Serif;"></span>
Атрибут font-family позволяет определить список шрифтов в порядке предпочитаемости. Браузер проверит список, применив первый доступный шрифт к тексту с этим свойством. Всегда используйте общие названия групп, например: serif или sans-serif.

Списки

Внешний вид списков может быть изменен при помощи атрибута list-style, поддерживающего до трех значений: тип и положение маркеров списка, URL-адрес изображения, которое будет использоваться, как маркер (в этой последовательности).

Строковый CSS для списков может быть использован только в случае использования HTML.

<ol style="list-style:_ … …;"><li>…</li><li>…</li>…</ol>
 
Значение (тип) Эффект
none Нет маркера
circle Кольцо
disc Круг
square Квадрат
decimal Число
decimal-leading-zero Число с нулем
lower-latin Буквы нижнего регистра
upper-roman Римские цифры
<ol style="list-style:… _ …;"><li>…</li><li>…</li>…</ol>
 
Значение (положение) Эффект
inside маркер является частью текстового блока
outside текст выравнивается по левому краю, маркеры выносятся за текстовый блок
<ol style="list-style:… … _;"><li>…</li><li>…</li>…</ol>
Значние (URL) Эффект
none нет изображения, использовать стандартные
url ('___') загрузить изображение в качестве маркера

Прозрачность

<div style="opacity:___;">…</div>
Значение Эффект
___ Дробное значение в пределах от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность); здесь: 0.4

Смешивание цветов

<div style="mix-blend-mode:___;">…</div>
Значение Эффект
normal Нет
color-dodge, screen, lighten Смешивание с ярким фоном
color-burn, darken, multiply Смешивание с темным фоном
overlay, hard-light, soft-light Смешивание контрастным методом
difference, exclusion Смешивание инверсионным методом
hue, saturation, color, luminosity Смешивание с цветов на основе параметров

Запретить обтекание текста

<div style="clear:___;">…</div>
Значение Эффект
none разрешить обтекание
right запретить обтекание справа
left запретить обтекание слева
both запретить обтекание

Сокрытие элементов

<div style="visibility:___;">…</div>
Значение Эффект
visible Нормальный
hidden Сокрытие элемента

Удаление элементов

<div style="display:___;">…</div>
Значение Эффект
none полностью скрывает элемент, освобождая его место
inline элемент отображается, как встроенный
block элемент отображается, как блочный


Ссылки


Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.