Главная | Случайная
Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






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




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}




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

vikidalka.ru - 2015-2019 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных