Способы задания цвета

CSS предлагает четыре удобных способа указать цвет.

· По имени. Используются англоязычные названия цветов, например blue или red.

· В шестнадцатеричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML.

· В десятичном формате RGB (например, rgb(126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.

· В формате RGB с указанием величин в процентах, например, rgb(30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

Примеры способов сделать параграф красным: p{color: rgb(255,0,0)}

p{color: #f00}
p{color: #ff0000}
p{color: rgb(100%, 0%, 0%)}

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

Способы задания размеров (ширина, длина)

Их существует множество, но они формируют три основные категории единиц для цифровых значений: относительные, абсолютные и процентные. Размеры могут задаваться в числовых значениях, как отрицательных, так и положительных, причем допустимы десятичные дроби, дробная часть, которых пишется через точку ".". Сразу после числа необходимо указать единицу измерения.

Относительные единицы

em Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.

ex Высота буквы x в настоящем шрифте. Применяется аналогично em.

Абсолютные единицы

cm Размер в сантиметрах

in Размер в дюймах. Один дюйм = 2.54 сантиметра

mm Размер в миллиметрах

pc Размер в пиках (12 пунктов)

pt Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1)

px Размер в пикселях.

Проценты. Значения многих свойств шрифтов могут задаваться в процентах к текущему размеру: P {line-height: 120%}.

Примеры:

body {margin: 1in}

table {padding: 1.5cm}

p {text-indent: -2pt}

img.logo {height: 12px}

p {text-indent: 3em}

blockquote {padding-bottom: 2ex}

table {border-width: 7.5pc}

Свойства текста

В их состав входят свойства выравнивания текста такие, как text-align и word-spacing, а также свойства изменения стиля text-decoration и новое свойство text-shadow.

Letter-spacing определяет интервал между символами текста. При настройке интервала между символами текста можно использовать следующие параметры:

• none - интервал, обычный для используемого шрифта.
• любая длина, соответствующая стандартам, длина интервала между буквами.
• inherit - применяется значение родительского элемента.

p {letter-spacing: 5px}

Text-align определяет выравнивание текста в элементе. При настройке выравнивания текста можно использовать следующие параметры:

• left - выравнивание по левому краю.
• center - выравнивание по центру.
• right - выравнивание по правому краю.
• justify - выравнивание по обоим краям.
• любая строка, соответствующая стандарту - определяет последовательность символов.
• inherit - применяется значение родительского элемента.

p {text-align: center}

Text-decoration определяет оформление текста. При настройке оформления текста можно использовать следующие параметры:

• none - отсутствие элементов оформления (по умолчанию).
• underline - подчеркивание.
• overline - линия над текстом.
• line-through - перечеркивание.
• blink - мерцание.
• inherit - применяется значение родительского элемента.

p {text-decoration: underline}

Text-indent - определяет длину отступа в первой строке абзаца. При настройке этого отступа можно использовать следующие параметры:

• любая соответствующая стандарту длина; возможны отрицательные значения. Значение по умолчанию - 0.
• любое соответствующее стандарту процентное значение.
• inherit - применяется значение родительского элемента.

p {text-indent: 20px}

Text-shadow определяет значения, устанавливающие эффект затенения текста. Может содержать несколько значений, которые следует определить друг за друга запятыми. В каждом отдельном значении теневых эффектов обязательно должно быть значение смещения и возможны такие значения, как радиус резкости и цвет. При настройке эффекта затенения текста можно использовать следующие параметры:

• none - отсутствие значения (по умолчанию).
• color - цвет затенения текста.
• первое числовое значение, соответствует стандарту - расстоянию по горизонтали вправо от текста. Отрицательное значение соответствует расстоянию влево от текста.
• второе числовое значение, соответствует стандарту - расстоянию по вертикали вниз от текста. Отрицательное значение соответствует расстоянию вверх от текста.
• третье числовое значение, соответствует стандарту - радиус резкости тени текста.
• inherit - применяется значение родительского элемента.

h1{text-shadow: blue 5px 5px 3px}

Text-transform автоматически переводит в тексте буквы в верхний (нижний) регистр. При настройке регистра букв можно использовать следующие параметры:

• none - отсутствие изменения регистра (по умолчанию).
• capitalize - переводит первую букву каждого слова в верхний регистр.
• uppercase - переводит все буквы в верхний регистр.
• lowercase -переводит все буквы в нижний регистр.
• inherit - применяется значение родительского элемента.

p {text-transform: uppercase}

White-space определяет, как обрабатывать пробелы. При настройке обрабатки пробелов можно использовать следующие параметры:

• normal - пробелы сворачиваются, если это необходимо для размещения элемента. Этот способ, который использует HTML по умолчанию
• pre - пробелы обрабатываются так, как указано в коде (предварительно отформатированный текст).
• nowrap - сворачиваются все пробелы.
• inherit - применяется значение родительского элемента.

p{white-space: pre}

Word-spacing определяет интервал между словами. При его настройке можно использовать следующие параметры:

• none - интервал, обычный для используемого шрифта.
• любая длина, соответствующая стандарту, длина интервала между словами.
• inherit - применяется значение родительского элемента.

p{word-spacing: 2px}

Свойства шрифта

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

Font удобное свойство для установки сразу всех параметров шрифта. Если какие-то значения пропущены, то берутся их значения по умолчанию. При настройке шрифта можно использовать следующие параметры:

• font-family - семейство шрифтов.
• font-size - кегль.
• font-style - начертание.
• font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
• font-weight- толщина.
• inherit - применяется значение родительского элемента.
• line-height - интерлиньяж.

p{font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed}

Font-family определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенных друг от друга запятыми. Приоритет определяется порядком в этом списке. При настройке семейства шрифта можно использовать следующие параметры:

• имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
• имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospace.
• inherit - применяется значение родительского элемента.

p {font-family: "Times new roman", courier, serif}

Font-size определяет кегль (высоту символов) шрифта. При настройке кегля можно использовать следующие параметры:

• абсолютный размер - для выражения кегля шрифта используются ключевые слова: xx-small (крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое),
• относительный размер - для выражение кегля шрифта используются ключевые слова: larger (меньше), smaller (больше),
• любая соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается,
• любое соответствующее стандарту процентное значение.
• inherit - применяется значение родительского элемента.

p{font-size: 20px}

Font-size-adjust определяет соотношение ширины и высоты символов, которое поддерживается при установке кегля шрифта. Это дает возможность регулировать изменения высоты текста. При настройке соотношения ширины и высоты символов можно использовать следующие параметры:

• none - по умолчанию.
• любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
• inherit - применяется значение родительского элемента.

p{font-size-adjust: 0.45}

Font-stretch определяет толщину шрифта. При настройке толщины шрифта можно использовать следующие параметры:

• condensed - значение большее, чем предыдущее.
• expanded - значение большее, чем предыдущее.
• extra-condensed - значение большее, чем предыдущее
• extra-expanded - значение большее, чем предыдущее.
• inherit - применяется значение родительского элемента.
• narrower - уменьшает текущую ширину на единицу.
• normal - обычная ширина (по умолчанию)
• semi-condensed - значение большее, чем предыдущее.
• semi-expanded - значение большее, чем при обычной толщине.
• ultra-condensed - наименьшее значение ширины.
• ultra-expanded - максимальное значение ширины.
• wider- увеличение текущей ширины.

body{font-stretch: condensed}

Font-style определяет начертания шрифта, такие как курсив или наклон. При настройке начертания шрифта можно использовать следующие параметры:

• inherit - применяется значение родительского элемента.
• italic - курсив.
• normal - обычное начертание (по умолчанию).
• oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон, чем курсив.

p{font-style: italic}

Font-variant определяет, будет ли шрифт выведен в виде малых прописных букв. При настройке начертания шрифта можно использовать следующие параметры:

• inherit - применяется значение родительского элемента.
• normal - обычное начертание (по умолчанию).
• small-caps - выводит шрифт в виде малых прописных букв.

p {font-variant: small-caps}

Font-weight определяет толщину выводимого шрифта. При настройке толщины можно использовать следующие параметры:

• bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
• bolder - жирный шрифт.
• inherit - применяется значение родительского элемента.
• lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
• normal - обычное начертание (по умолчанию).
• 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.

p {font-weight: bold}

Не нашли, что искали? Воспользуйтесь поиском: