ФОРМАТИРОВАНИЕ
ТЕКСТА WEB-СТРАНИЦЫ
С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ
Единицы измерения
ВCSS имеется 8размерастандартных единиц измерения размеров:
зависящая от устройства вывода (экран, принтер,…) px – в пикселях
относительные:
em – ширина буквы m в данном шрифте; ex – высота буквы х в данном шрифте;
абсолютные:
in – в дюймах (2,54см); cm – в сантиметрах; mm – в миллиметрах;
pt – в пунктах (1/72 дюйма); pc – в пиках (1pc=12pt);
Вбольшинстве браузеров принимается 1em=2ex
Число и обозначение размера писать слитно без пробела!
Способы задания цвета
Цвета наWeb-странице можно задавать:
в шестнадцатиричных числах:
#ff0066
в шестнадцатиричных числах сокращенной записью:
#333 , #369, #6
с функцией RGB с десятичными числами: rgb(128,255,128)
с функцией RGB с процентами: rgb(50%,100%,50%)
используя 17 именованных цветов:
red, green, blue, aqua (зелено-голубой), gray (серый), lime (светло-зеленый), navy (темно-синий), yellow (желтый), orange…
Фоновый цвет можно задавать для любых HTML-элементов, а не только в теге <body>
Свойства шрифтов
Дескриптор <font> использовать не рекомендуется, вместо этого используются
свойства CSS-стилей для шрифтов
Свойство font-family – задает гарнитуру шрифта из семейства
ВCSS имеется 5 семейств (общих категорий) шрифтов:
serif – с засечками (Times, Georgia, …)
sans-serif – без засечек (Arial, Helvetica, Verdana, …)
monospace – пропорциональные (Courier, …)
fantasy – декоративные (Western, …)
cursive – рукописные (Lucida Handwriting, …)
Браузер выбирает тот шрифт из семейства, который установлен на пользовательском компьютере, а перед именем семейства можно указать приоритетный шрифт:
<span style=“font-family: Times, serif”>текст с засечками</span>
Свойства шрифтов
Свойство font-size может иметь следующие значения:7 именованных значений размера:
xx-small, x-small, small, medium, large, x-large, xx-large
Можно использовать увеличение larger и уменьшение на единицу smaller
<body style=“font-size: x-small”> <p>текст1</p>
<p style=“font-size: larger”>текст2</p> </body>
любые значения в единицах размера
<h1 style=“font-size: 24px”>текст</h1
В процентах относительно размера базового шрифта
<p style=“font-size: 150%”>текст</p>
Свойства шрифтов
Свойство font-style определяет наклон шрифта:
normal, italic - курсив, oblique - скошенный
Свойство font-variant задает прописные буквы малого размера:
normal, small-caps
Свойство font-weight определяет жирность шрифта:
число от 100 до 900
Можно использовать значения: normal – соответствует 400 ( обычный) и bold – соответствует 700 (полужирный)
Свойство font позволяет одновременно устанавливать значения свойств font-style, font- variant, font-weight, font-size, font-family (порядок задания свойств необходимо соблюдать, при этом некоторые из свойств могут быть пропущены):
<div style=“font: italic small-caps bold 16pt sans- serif>текст</div>
Свойства текста
Свойство letter-spacing задает интервалы между отдельными символами:
<h1 style=“letter-spacing: 0.5cm”>текст</h1>
Свойство word-spacing задает интервалы между отдельными словами:
<p style=“letter-spacing: 2mm”>текст</p>
Свойство line-height задает интервалы между строками:
<div style=“line-height: 30pt”>текст</div>
Свойство text-align задает выравнивание текста на странице для HTML-элементов блокового уровня (заголовков, абзацев, <div>) и может принимать значения:
left, right, center, justify (по ширине)
Свойства текста
Свойство text-indent задает отступ первой строки в абзаце:
p {text-indent: 1.25cm}
Свойство text-transform задает регистр
capitalize (каждое слово начинается с заглавной буквы), uppercase (текст из заглавных букв),
lowercase (текст из строчных букв), none (буквы текста не преобразуются)
Свойство text-decoration позволяет задавать оформление текста:
underline (подчеркивание), overline (черта над символами), line- through (перечеркивание), none (удаляет подчеркивание, в том числе у гиперссылок), blink (мигание)
Свойство text-shadow позволяет задавать тень <h1 style=“text-shadow: red 10px -5px”>текст</h1>
Блочная модель Web-
В языке CSS у всехстраницыHTML-элементов есть отступы, которые форми- руются блочной моделью размещения элементов на Web-странице.
Поля margin:
margin-top, margin-right, margin-bottom, margin-left (в единицах размера)
Если для свойства margin заданы только два значения, то они воспринимаются противоположными границами, если одно – то всеми границами
Границы border:
border-top, border-right, border-bottom, border-left width (толщина, в единицах размера),
style (dotted – точки, dashed – штрихи, … всего 10 значений) color (в единицах цвета)
Отступы padding:
padding-top, padding-right, padding-bottom, padding-left