Внедрения индивидуальных шрифтов

Лабораторная работа №8

Тема: Свойства цвета и фона. Свойства шрифта. Свойства текста.

Цель: Знакомство с возможностями языка CSS при создании HTML-документа с применением цвета и изменением свойств шрифта и текста.

Задача: Создание страницы HTML-документаc применением CSS при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.

Вопросы для подготовки к лабораторной работе:

1. Какими способами возможно задать цвет с применением CSS?
2. Какие аргументы являются обязательными при изменении свойств шрифта?
3. Возможно ли внедрение индивидуальных шрифтов?
4. Какие значения длин можно использовать при выравнивании элемента по вертикали относительно своего родителя или окружающего текста.?
5. Какое свойство стиля определяет автоматический перевод в тексте буквы в верхний (нижний) регистр?

Задание:

1. Создайте HTML-страницу с фоном и рисунком зафиксированном в центре страницы, цветным текстом и различными шрифтами с информацией о своем хобби.

Материал для подготовки к лабораторной работе:

Свойства цвета и фона

Присвоение элементам цветовых и фоновых значения помогают создать зрелищную WEB-страницу.

 

color	Определяет цвет текста элемента. Значение цвета можно задавать тремя способами. 1. По его названию (color:red) 2. По шестнадцатеричному значению (color:#ffffff) 3. С помощью RGB (color:rgb(255,0,0)) Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.
background-color	Определяет цвет фона. Значение: любое соответствующее стандарту значение цвета. transparent - фон элемента делается прозрачным (по умолчанию). inherit - применяется значение родительского элемента.
background-image	Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Значение: none - фоновое изображение не устанавливается. любое соответствующее стандарту значение URL фонового изображение. inherit - применяется значение родительского элемента.
background-repeat	Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Значение: repeat - фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию). repeat-x - фоновое изображение повторяется только по горизонтали. repeat-y - фоновое изображение повторяется только по вертикали. no-repeat - фоновое изображение не повторяется. inherit - применяется значение родительского элемента.
background-attachment	Определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом. Значение: scroll - фоновое изображение прокручивается вместе с документом (по умолчанию) fixed - фоновое изображение фиксируется в окне браузера. inherit - применяется значение родительского элемента.
background-position	Определяет положение изображения относительно верхнего левого угла содержащего его элемента. Одиночное значение устанавливает расстояние по горизонтали и вертикали. Смещение по умолчанию равно 50%. Возможно сочетание нескольких ключевых слов. Значение: Первое стандартное значение длины - расстояние по горизонтали от левого края элемента до изображения. Допускаются и отрицательные значения. Второе, соответствующее стандарту значение длины - расстояние по вертикали от левого края элемента до изображения. Допускаются и отрицательные значения. Первое, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображение от левого края по горизонтали к длине содержащего его элемента. Значение по умолчанию 0%, что равносильно верхнему левому углу. Второе, соответствующее стандарту процентное значение - отношение (в процентах) смещения фонового изображения от левого края по вертикали к высоте содержащего его элемента. top - размещение фонового изображение по верхнему краю center - размещение фонового изображение по центру содержащего его элемента. bottom - размещение фонового изображения по нижнему краю. left - размещение фонового изображение по левому краю. right - размещение фонового изображение по правому краю. inherit - применяется значение родительского элемента. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее. top left = left top = 0% 0% (в левом верхнем углу) top = top center = center top = 50% 0% (по центру вверху) right top = top right = 100% 0% (в правом верхнем углу) left = left center = center left = 0% 50% (по левому краю и по центру) center = center center = 50% 50% (по центру) right = right center = center right = 100% 50% (по правому краю и по центру) bottom left = left bottom = 0% 100% (в левом нижнем углу) bottom = bottom center = center bottom = 50% 100% (по центру внизу) bottom right = right bottom = 100% 100% (в правом нижнем углу)
background	Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить. Значение: background-color - значение цвета фона. background-image - значение фонового изображения. background-repeat - значение повторения фонового изображения. background-attachment - значение фиксации фонового изображения. background-position - значение положения фонового изображения. inherit - применяется значение родительского элемента.
opacity	Устанавливает уровень прозрачности элемента веб-страницы. Данное свойство является нововведением в CSS3 и на сегодняшний день не поддерживается Internet Explorer, Mozilla, Safari 1.0 и Firefox 1.0

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

font	Любые комбинации значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.
font-family	Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке. Значение: имя семейства - семейство шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки. имя типового шрифта, применяемого для вывода текста.. inherit - применяется значение родительского элемента. Универсальные семейства шрифтов: serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова. p {font-family: "Times roman", courier, serif}
font-style	Определяет начертания шрифта, такие как курсив или наклонное. Значение: normal - обычное начертание (по умолчанию). italic - курсив. oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив. inherit - применяется значение родительского элемента. В браузере Internet Explorer шрифт со значением italic и oblique всегда показывается как курсив p{font-style: italic; }
font-weight	Определяет толщину выводимого шрифта. Значение устанавливается от 100 до 900 с шагом 100. Значение: normal - обычное начертание (по умолчанию). bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании. bolder - жирный шрифт. lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид. 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder. inherit - применяется значение родительского элемента. Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров текста и вида шрифта. p {font-weight: bold;}
font-stretch	Определяет толщину шрифта. Значение: normal - обычная ширина (по умолчанию) wider- увеличение текущей ширины. narrower - уменьшает текущую ширину на единицу. ultra-condensed - наименьшее значение ширины. extra-condensed - значение большее, чем предыдущее condensed - значение большее, чем предыдущее. semi-condensed - значение большее, чем предыдущее. semi-expanded - значение большее, чем при обычной толщине. expanded - значение большее, чем предыдущее. extra-expanded - значение большее, чем предыдущее. ultra-expanded - максимальное значение ширины. inherit - применяется значение родительского элемента. body{ font-stretch: condensed }
font-size	Определяет кегель (высоту символов) шрифта. Значение: абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше), любая соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается. любое соответствующее стандарту процентное значение. inherit - применяется значение родительского элемента. p{font-size: 20px}
font-variant	Определяет, как нужно представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений. Значение: normal - обычное начертание (по умолчанию). small-caps - выводит шрифт в виде малых прописных букв. inherit - применяется значение родительского элемента. p {font-variant: small-caps }
font-size-adjust	Определяет соотношение ширины и высоты символов, которые поддерживается при установке кегля шрифта. Это дает пользователю регулировать изменения высоты текста. Значение: none - по умолчанию. любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов. inherit - применяется значение родительского элемента. p {font-size-adjust: 0.45}

Внедрения индивидуальных шрифтов.

CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вместе с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

@font-face {font-family: fontName; src: url(failMame.eot) }

значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

<style>
@font-face{ font-family: demoFont; src: url(http://myweb.ru/superFont.eot)}
H1 {font-family: demoFont, Arial, sans-serif;}
</style>
<h1> Текст отображается с использованием загружаемого шрифта </h1>

После определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифт не может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.

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

text-indent	Определяет длину отступа в первой строке блока. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера. Значение: любое соответствующее стандарту длина; возможны отрицательные значения. Значение по умолчанию равно 0. любое соответствующее стандарту процентное значение. inherit - применяется значение родительского элемента. p {text-indent:20px;}
text-align	Определяет выравнивание текста в элементе. Значение: left - выравнивание по левому краю. center - выравнивание по центру. right - выравнивание по правому краю. justify - Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. любая строка, соответствующая стандарту - определяет последовательность символов. inherit - применяется значение родительского элемента. p {text-align: center;}
text-decoration	Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел. Значение: none - отсутствие элементов оформления (по умолчанию). underline - подчеркивание. overline - линия над текстом. line-through - перечеркивание. blink - мерцание. Браузер Internet Explorer хотя и позволяет использовать значение blink, текст показывает как обычно, без всякого мерцания. inherit - применяется значение родительского элемента. Согласно спецификации CSS, если для элемента задан вид форматирования, а для его наследника нет, все равно свойства родителя будут передаваться его вложенным элементам. Так, если используется подчеркнутый параграф, а внутри него расположен неподчеркнутый элемент, выделяющий слово другим цветом, все слова в параграфе будут подчеркнуты, включая и выделенные другим цветом слова. p {text-decoration: underline }
text-transform	Автоматически переводит в тексте буквы в верхний (нижний) регистр. Значение: none - отсутствие изменения регистра (по умолчанию). capitalize - переводит первую букву каждого слова в верхний регистр. uppercase - переводит все буквы в верхний регистр. lowercase -переводит все буквы в нижний регистр. inherit - применяется значение родительского элемента. p {text-transform: uppercase }
text-shadow	Определяет значения, устанавливающие эффект затенения текста. Может содержать несколько значений, которые следует определить друг за другом запятыми. В каждом отдельном значении теневых эффектов обязательно должно быть значение смещения и возможны такие значения, как радиус резкости и цвет. Значение: none - отсутствие значения (по умолчанию). color - цвет затенения текста. первое числовое значение, соответствует стандарту - расстоянию по горизонтали вправо от текста. Отрицательное значение соответствует расстоянию влево от текста. второе числовое значение, соответствует стандарту - расстоянию по вертикали вниз от текста. Отрицательное значение соответствует расстоянию вверх от текста. третье числовое значение, соответствует стандарту - радиус нерезкости тени текста. inherit - применяется значение родительского элемента. h1{text-shadow: blue 5px 5px 3px}
letter-spacing	Определяет интервал между символами текста. Значение: none - интервал, обычные для используемого шрифта. любая длина, соответствующее стандартам, длина интервала межу букв. inherit - применяется значение родительского элемента. p { letter-spacing: 5px }
word-spacing	Определяет интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю. Значение: none - интервал, обычный для используемого шрифта. любая длина, соответствующая стандарту, длина интервала между словами. inherit - применяется значение родительского элемента. p{word-spacing: 2px}
white-space	Определяет, как обрабатывать пробелы. Значение: normal - пробелы сворачиваются, если это необходимо для размещения элемента. Этот способ, который использует HTML по умолчанию pre - пробелы обрабатываются так, как указано в коде (предварительно отформатированный текст). nowrap - сворачиваются все пробелы. inherit - применяется значение родительского элемента. Браузер Internet Explorer 6 и младше не поддерживает аргумент pre. Internet Explorer 7 понимает значение pre только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">).   p { white-space: pre}
line-height	Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается. Значение: normal - интервал, обычный для используемого шрифта. · любая длина, соответствующая стандарту, длина интервала между словами. · inherit - применяется значение родительского элемента.
vertical-align	Выравнивает элемент по вертикали относительно своего родителя или окружающего текста. В качестве значения можно использовать любую. длину, соответствующую стандартам Положительный аргумент смещает элемент вверх относительно базовой линии, в то время как отрицательное значение опускает его вниз. Значение: · baseline - Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom - Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. · middle - Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub - Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super - Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom - Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. · text-top - Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top - Выравнивание верхнего края элемента по верху самого высокого элемента строки.