Практическая работа 8

Практическая работа №7

Работа с текстом и шрифтами в CSS

Шрифты делятся на три группы

1. Sans-serif, без засечек, буквы рубленные без черточек.

2. Serif с засечками, на концах букв имеются черточки.

3. Monospace – моноширные шрифты, каждая буква занимает одну и туже ширину, используются в основном при создании кода.

В таблице представлены шрифты, которые по умолчанию будут установлены на любом компьютере с ОС Windows или MAC. При создании сайтов желательно использовать эти типы шрифтов.

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

font-family - указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.

font-family: {Имя шрифта}

В качестве значения этого атрибута задается имя нужного шрифта. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.

font-family: "Times New Roman",sans-serif;

font-size - задает размер шрифта, используемого в элементе страницы.

Единицы измерения размера шрифта font-size

• % - проценты (100%)

• em – единицы (1em)

• px – пиксели (16px)

• pt – пункты (14pt)

• xx-small,small,medium,large,x-large,xx-large

font-weight - задает "жирность" шрифта, используемого в элементе страницы.

"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.

font-weight: normal; - обычный;

font-weight: lighter; - светлее;

font-weight: bold; - жирный;

font-weight: bolder; - жирнее;

font-weight: от 100 до 900 - любое значение, кратное 100 (200,700).

Значение по умолчанию normal.

font-style - задает начертание шрифта.

font-style: normal|italic|oblique;

font-style: normal; - задает обычный вид шрифта (используется по умолчанию);

font-style: italic - курсивное начертание;

font-style: obligue - наклонное начертание (легкий наклон нормального шрифта) (IE отображает как курсив).

font-variant - задает вид малых букв шрифта, используемого в элементе страницы.

font-variant: normal|small-caps;

font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);

font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).

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

text-decoration - задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.

text-decoration: none; - отменяет любое специальное оформление (значение по умолчанию для большинства тегов);

text-decoration: underline; - подчеркивает текст (значение по умолчанию для тегов <A>, <INS> и <U>);

text-decoration: overline; - черта сверху текста;

text-decoration: line-through; - зачеркивает текст (значение по умолчанию для тегов <DEL>, <S> и <STRIKE>);

text-decoration: blink; - мигание текста (отсутствует в IE)

text-decoration: uppercase - все буквы становятся заглавными;

text-decoration: lowercase - все буквы становятся маленькими (прописными);

text-decoration: capitalize - каждое слово в строке начинается с большой буквы.

text-align - определяет горизонтальное выравнивание текста.

text-align: left; - выравнивание текста по левому краю (значение по умолчанию);

text-align: right; - выравнивание по правому краю;

text-align: center; - выравнивание по центру;

text-align: justify; - выравнивание по обоим краям (по ширине).

text-indent - устанавливает отступ красной строки.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др.

text-transform - Задает преобразование регистра символов текста.

text-transform: none|capitalize|uppercase|lowercase;

text-transform: none; - отключает любые преобразования регистра символов (значение по умолчанию);

text-transform: capitalize; - преобразует первую букву каждого слова текста в верхний регистр;

text-transform: uppercase; - преобразует все символы текста в верхний регистр;

text-transform: lowercase; - в нижний регистр.

word-spacing - определяет дополнительное расстояние между словами в тексте.

Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.

line-height

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта.

text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

text-shadow: none | тень [,тень]*

где тень:

<цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>

Пример записи:

text-shadow: yellow 1px 1px 2px, red 0 0 1em; /* Параметры тени */

none

Отменяет добавление тени.

цвет

Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.

сдвиг по x

Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.

сдвиг по y

Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.

радиус

Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

Ход выполнения работы:

1. Создать index.html

2. Подключить к нему внешнюю таблицу стилей style.css

3. В тело html документа вставить нижеприведенный текст. Каждый абзац оформить соответствующим тегом, к заголовкам выделенным полужирным шрифтом применить тег заголовка.

4. Используя свойства шрифтов, и свойства текста оформить каждый абзац применяя различные стили оформления.

Примечание 1. Необходимо создать для каждого абзаца, свой класс в таблице стилей. И html соответвующему абзацу присвоить данный класс. Название классов дать произвольно (например new, new1, new2…)

К каждому абзацу обязательно должны быть применены свойства: font-family, font-size, text-align, text-indent. В работе должны быть использованы все свойства описанные в теоретической части работы.

Примечание 2. Перечеркнутый текст (см.пример выполнения, в конце документа) сделать с помощью тега <span>. Он предназначен для выделения части информации внутри другого тега. В начале необходимо создать класс в таблице стилей, и к тегу добавить атрибут class. Синтаксис тега: <span>...</span> где вместо многоточия должен располагаться текст.

<p>Эй, жлоб! Где туз? Прячь юных съёмщиц в шкаф. Экс-граф? Плюш изъят. Бьём чуждый цен хвощ! Эх, чужак! <span class=”new”>Общий съём цен шляп (юфть) — вдрызг! Любя, съешь щипцы, — вздохнёт мэр, — кайф жгуч. </span>Шеф взъярён тчк щипцы с эхом гудбай Жюль. Эй, жлоб! Где туз? Прячь юных съёмщиц в шкаф. Экс-граф? Плюш изъят. Бьём чуждый цен</p>

В данном примере особый стиль оформления применен к части текста.

Что такое Lorem Ipsum?

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

"Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль.."

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget mauris in odio fringilla aliquet. Vivamus pharetra, neque sit amet viverra scelerisque, sem lectus suscipit magna, nec interdum felis libero quis sem. Vestibulum non urna nulla, eget bibendum lorem. Morbi eu sem a nulla lobortis feugiat sit amet et elit. In hac habitasse platea dictumst. Curabitur id erat ut tellus commodo laoreet. Mauris vestibulum leo vel tortor pretium lobortis. Donec eu ante turpis. Maecenas lacinia aliquam tellus eget tincidunt. Suspendisse consectetur sem non velit euismod in hendrerit purus molestie. Duis eu mi dictum enim dapibus lobortis. Pellentesque convallis porttitor erat, mollis elementum augue dictum a.

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот.

Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.

Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный реторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись. Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну». Не послушавшись рукописи, наш текст продолжил свой путь. Вскоре ему повстречался коварный составитель

Примерный образец выполненной работы:

Контрольные вопросы:

1. Разновидности шрифтов

2. Свойства шрифтов и их значения

3. Свойства текста и их значения