Строковый CSS (ориг. Inline-CSS) — CSS, размещенный непосредственно в HTML-разметке. Атрибут стиля добавляется в открытый HTML-тег (style= "..."); стиль может содержать сразу несколько CSS-правил, разделенных запятыми. Указанные правила будут действовать для всего содержимого HTML-тега. Правила должны содержать атрибут, двоеточие и его значения.
Для указания строкового CSS возможно использование различных HTML-тегов. Как правило, <div style="...">...</div> — используется для изменения целого абзаца, в то время, как <span style="...">...</span> — для изменения отдельных предложений в абзаце.
Приведенные ниже атрибуты предназначены не только для таблиц, но часто используются именно там.
Граница[]
Толщина, тип и цвет[]
Все три атрибута устанавливаются атрибутом "border; , поддерживающего три значения, разделенных пробелом и расположенных в порядке: толщина, тип, цвет. Цвет и толщина могут быть заданы только вместе с типом.
Если вы хотите изменить границу только с определенной стороны, используйте "border-top", "border-bottom", "border-left" или "border-right" (вверх, низ, лево, право).
Наложенные границы[]
{|style = "border-collapse: ___;" ... |}
Значение
Эффект
collapse
Показать общую границу для всех ячеек
separate
Показать границу для каждой ячейки (как в этой таблице)
Расстояние между смежными ячейками[]
Если граница между ячейками разделена, то задать расстояние между ячейками можно с помощью атрибута border-spacing. Если даны два значения, то они будут отвечать за верх и низ, соответственно.
Атрибут border-radius поддерживает до 8 значений: первые четыре значения определяют радиус в горизонтальной плоскости, последние четыре — в вертикальном положении. У квадратов и прямоугольников четыре угла, начиная с верхнего левого угла и далее по направлению часовой стрелке. Можно исключить четвертое значение, при этом будет использовано значение противоположного угла, равно как можно исключить и третье значение.
Зависит от размера шрифта («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, поддерживает до четырех значений, которые указывают расстояние до внутренних границ ячеек.
Зависит от размера шрифта («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
к содержимому добавляются полосы прокрутки, но только если это необходимо
элемент перемещается влево, обтекание справа (как у этой таблицы)
Атрибут float позволяет определить, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с противоположных сторон.
Тень[]
Атрибут box-shadow позволяет установить тень для таблиц и блочных элементов. Только два первых значения необходимы, остальные могут быть опущены.
<spanstyle="font-family:'Times New Roman',Georgia,Serif;">…</span>
Атрибут font-family позволяет определить список шрифтов в порядке предпочитаемости. Браузер проверит список, применив первый доступный шрифт к тексту с этим свойством. Всегда используйте общие названия групп, например: serif или sans-serif.
Списки[]
Внешний вид списков может быть изменен при помощи атрибута list-style, поддерживающего до трех значений: тип и положение маркеров списка, URL-адрес изображения, которое будет использоваться, как маркер (в этой последовательности).
Строковый CSS для списков может быть использован только в случае использования HTML.