Семейство шрифтов
Мы уже много времени посветили селекторам, научились отбирать элементы несколькими способами и теперь пришло время научиться создавать правила.
Какое правило мы уже знаем?
Ответ: Установка цвета для выбранного элемента
Задание: Давайте с Вами в нашем файлике с будильником, сделаем первый абзац Розовым цветом. Как это сделать?
Сейчас давайте научимся изменять шрифт.
Если мы откроем файл со сказкой, то увидим, что весь текст нашей HTML страницы исполнен стандартным шрифтом, который называется Times New Roman.
Давайте с вами попытаемся изменить шрифт допустим у абзацев.
Что для этого нужно будет сделать?
Ответ: Подключить таблицу стилей к нашему файлу. Зайти в файл css и написать свойство. (семейство шрифтов)
Какие шрифты можно использовать вместо стандартного?
Ответ: Браузеры устроены таким образом, что могут отображать текст только теми шрифтами, которые установлены в операционное системе пользователя (не в Вашей, а пользователя), естественно нам нужно пользоваться только теми шрифтами, которые у пользователя будут в системе.
Где же взять такой список?
Ответ: Перейдите по ссылке
Fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Тут мы увидим список шрифтов, которые используются в Windows
Все шрифты можно поделить на группы:
1. Шрифты без засечек sans-serif (Все буквы ровные и четкие)
2. Шрифты с засечками serif (На кончиках букв маленькие засечки)
3. Моноширные шрифты monospace (Каждая буква занимает одну и туже ширину)
Остальные группы менее распространенные, например cursive
В стиле мы можем указать несколько шрифтов:
Шрифты, которые состоят из нескольких слов (такие шрифты нужно заключать в двойные кавычки)
Размер шрифта
Если мы с Вами посмотрим файл со сказкой, то увидим, что до нашего изменения страница была написана стандартным шрифтом и размер был стандартный (т.е. тот, который заложен в системе)
За размер шрифта отвечает:
Если мы напишем 100%, то получим результат, как будто на чего не писали. Если захотим увеличить, то мы напишем 120% (увеличение на 20%), если захотим уменьшить- пишем 80% (уменьшение на 20%)
Единица измерения em пришла из книгопечатания и ее базовый размер 1em.
Если мы захотим увеличить, то пишем 1.1 em равносильно тому, что увеличили на 110%
Следующая единица, это пиксели. Что такое пиксель?
Ответ: Это точка Вашего экрана, из таких точек состоит понятие разрешение. Например: если разрешение Вашего экрана 1600 по ширине и 1200 по высоте, это говорит о том, что в ширину 1600 пикселей, а в высоту 1200.
Редко используемы вариант, это пункты: 1 пункт =1,72 дюйма= 0,35мм
10 пунктов=3,5 мм
Ключевые слова:
Medium- средний; (100%)
Small-маленький; (80%)
Large-большой. (120%)
Если нужен больше размер
Жирный и курсивный текст
Откроем файл с бдильником
С помошью каких тегов мы делали жирный шрифт и курсив?
Ответ: em (курсив) и strong (жирный)
курсив
Для начало создадим класс, в который мы пропишем это свойство, а затем мы дадим этот класс абзацу, заменим em на span и дадим этот же класс ему.
У абзаца удаляем теги em и даем ему класс
Возвращаемся в файл с будильником и меняем тег сstrong на span и задаем новый класс
Оформление текста (подчеркнутый текс по низу и по верху)
Давайте подчеркнем текст, который мы сделали жирным.
