Работаем над текстом и шрифтами в CSS. Свойства шрифтов

Скачать материалы:

Скачать 5-ый видеоурок по CSS Размер: 10.96 MB, скачали: 607 раз.
Скачать исходники к 5 видеоуроку по CSS Размер: 28.68 kB, скачали: 552 раз.

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

Сокращенная и полная записи CSS стилей

Также, мы впервые рассмотрим полную запись. Возможно, в предыдущих видеоуроках я это упустил, но там это было не столь важно. Там мы писали сокращенную запись сразу, например, при задании фонового изображения мы прописывали свойство background и потом перечисляли значения:

body { background: #33CCFF url(img/bg.jpg) repeat fixed;}

Однако, мы могли разделить свойство background на background-color, background-position и другие свойства полной записи.

body {
 background-color: #33CCFF;
 background-repeat: repeat;
 ............................................
 }
 

Почему мы будем делать это так? Потому что здесь, при записи в сокращенном виде нужно будет соблюдать особый порядок. Если мы например, зададим шрифты раньше, чем стиль шрифта, то эти стили (шрифты и стиль шрифтов) могут у нас не сработать. Поэтому я буду разбирать все в полном виде, а потом мы все это запишем в сокращенном. Так будет яснее.

Работаем над текстом и шрифтами в CSS. Свойства шрифтов.

Давайте приступим, я открываю документ index.html и style.css в программе Notepad++ и ввожу тег H3 в последнем.
Сейчас прописываем к нему свойство цвета — color, зеленый, например (напоминаю, что цвета можно взять из таблицы цветов). И перед последней закрывающей фигурной скобкой, нажимаю два раза клавишу Enter. Сейчас мы будем разбирать полную запись.

Как прописывается шрифт? Шрифт мы можем прописать с помощью свойства font-family. Начинаем указывать шрифты. Первый шрифт имеет приоритет над вторым, второй над третьим и т.д.
Мы сейчас пропишем шрифт arial, шрифт verdana и шрифт courier. Ставим точку с запятой (;). И в таком случае, шрифт Arial будет браться у нас первым, если же он будет отсутствовать у пользователя, то вторым будет браться Verdana, третьим — Courier. Вряд ли до шрифтов Verdana и Courier дойдет очередь, так как все три шрифта являются стандартными. Скорее всего, все дело остановится на шрифте Arial. Также не рекомендую устанавливать неизвестные шрифты, так как вряд ли они есть у пользователя. Если вам уж очень хочется сделать какой-то небольшой текст на сайте красивым, то желательно используйте для этого изображения.

Итак, вторым свойством у нас будет стиль шрифта — font-style. Принимать он может три значения:

• normal
• italic
• oblique

Введем oblique. Давайте на этом этапе остановимся и сохраним файл style.css.

Теперь добавим заголовок h3 в документ index.html. Ведь мы именно для заголовка h3 и прописывали стили. Выделим текст «Сейчас вы с мотрите данный видеоурок и скорее всего:» и поместим его в заголовок h3. Сохраняем и смотрим, что у нас получилось. Видим два заголовка h3, которые приняли шрифт Arial и стиль oblique, то есть стиль oblique — это небольшой наклон.
Давайте попробуем заменить oblique на italic. Это в простонародье — курсив. По сути, отличий мало. И на данном примере они вовсе не видны, но возможно в некоторых шрифтах эту разницу можно будет заметить.
Normal, как вы наверное уже поняли, — значение font-weight по умолчанию.

Переходим в код, изучаем новые свойства. Нам нужно задать толщину нашего шрифта, толщина шрифта задается с помощью свойства font-weight, которое может принимать 2 текстовых значения: normal и bold. Также свойство font-weight может принимать и числовые значения: от 100 до 900. Укажем 500. Не все браузеры воспринимают числовые значения. Сохраняем. Проверяем в браузере.
Мы видим, что браузер Opera понимает числовые значения и толщина шрифта стала у нас равной 500.
Давайте пропишем вместо числового значения 500 текстовое значение bold. Проверяем. Видим, что толщина шрифта стала у нас более жирной.

Переходим к следующему свойству — font-size — размер текста. Может указываться как в абсолютных, так и в относительных величинах. Лично я пользуюсь двумя относительными величинами: проценты *например 150%* и пиксели *например 30 пикселей*. Очень часто пиксель называют абсолютной величиной, на самом же деле пиксель является относительной величиной, так как она зависит от разрешения установленного на экране и размера монитора, то есть устройства отображения. Однако, следует отметить, что ведет она себя как абсолютная. Но если желаете быть точно уверенными, что ваш текст отображается везде одинаково, то советую использовать вместо пикселей абсолютную величину — пункты (pt). Ее отличие от пикселей в ее написании (pt вместо px) и 1 пункт = 1/72 дюйма.
Так как я использую при работе пиксели, то поставлю значение свойства font-size равное 20px. Сохраняем, смотрим, что у нас получилось. Замечаем, что текст стал у нас больше, чем был раньше.

И сейчас давайте из этих четырех свойств (font-family, font-style, font-weight и font-size) запишем сокращенную форму. В комментариях я указал порядок сокращения формы:

 /* font-style | font-weight | font-size |font-family */ 

Для начала нам нужно прописать свойство font, после чего по порядку вписать все значения имеющихся свойств. У нас это будет выглядеть так:

 font: italic bold 20px arial, verdana, courier; 

Сохраняем. Проверяем в браузере. У нас не произошло никаких изменений. Это означает, что мы правильно прописали сокращенный вид. Однако, это еще не все, на этом разбор оформления текста мы еще не заканчиваем. Сейчас мы будем задавать ему декорацию и трансформирование. Предлагаю для этого взять какой-нибудь класс. Прописываем класс .text-1. Открываем фигурные скобки. Прописываем свойство text-decoration. Это свойство имеет три значения:

• underline
• overline
• line-through

Давайте рассмотрим каждый по отдельности. Вводим underline. Сохраняем файл стилей. Теперь нужно задать класс text-1 какому-нибудь тегу в документе index.html
Зададим этот класс тегу pre. Сохраняем. Проверяем в браузере. Видим, что текст «Я работал на фрилансе» стал подчеркнутым.
Переходим в файл style.css и заменяем слово underline на overline. Сохраняем и проверяем. Теперь у нас текст «Я работал на фрилансе» подчеркнут не снизу, а сверху.
Итак, что же будет, если мы пропишем значение line-through? Давайте попробуем. Видим, что текст «Я работал на фрилансе» стал у нас перечеркнутым. Оставим, как есть.

Переходим к следующему свойству — text-transform. Это свойство используется достаточно редко, но мы его все равно разберем.
Начнем с первого значения, имя которому — capitalize. Добавляем его в текст. Проверим, что у нас произошло на странице index.html. Первая буква каждого слова, которому было присвоено значение capitalize, стала у нас большой.
Давайте создадим класс text-2 и продолжаем изучать свойство text-transform. Вводим свойству text-transform следующее значение — uppercase. Сохраняем файл style.css. Теперь присваиваем класс .text-2 тексту «Вы со мной согласны», а точнее элементу списка — тегу li. Сохраняем и проверяем в браузере: Как мы видим тег li принял класс .text-2, .text-2 принял свойство text-transform, которое имеет значение — uppercase. Благодаря чему, все буквы стали большими, независимо от того, как мы их написали в исходном коде документа index.html.
Сейчас давайте попробуем заменить значение uppercase на lowercase. Проверим, что получилось. А получилось у нас то, что все буквы стали маленькими, также независимо от того, как они написаны в исходном коде документа.
Третье значение, которое может принимать данное свойство — значение none. Текст при нем не изменяется. Это значение является стандартным.

Есть еще одно свойство, которое используется еще реже, чем предыдущее. Называется оно — letter-spacing. Значение указывается в пикселях, процентах и других величинах. Укажем значение, например 5px. Сохраним и проверим, что у нас произошло. Итак, расстояние между буквами стало у нас равное 5 пикселям. Эти свойства можно не запоминать, в любом случае, их можно будет найти в интернете и прочитать про них. Но для общего развития, я их показал.

Теперь будем разбираться с отступами и выравниванием текста. Выравнивание происходит с помощью свойства text-align. Наверняка вы уже догадались, что принимать оно может 4 значения:

• left
• right
• center
• justify

Укажем значение center. Сохраняем и проверяем. Предложение «Вы со мной согласны» стало у нас по центру. Что ж, с выравниванием мы разобрались. Отступы делаются также легко с помощью свойства text-indent. Укажем значение, например, 30px. Предложение «Я работал на фрилансе» отступает от левого края на 30 пикселей. Давайте поставим вместо 30 пикселей 20 процентов. У нас все работает и отступ от левого края стал равен 20%.

Как вы видите, тема видеоурока не трудная, но объемная.
Информации много и вся в памяти может не сохранится. Но в любом случае, всегда можно будет вернуться к этому видеоуроку и просмотреть забытое.

Итак, что здесь самое важное? Что нужно запомнить обязательно?
Запомнить нужно свойство font и его запись в сокращенном виде, которую я указал в комментариях в исходном коде, так как это сократит не только время вашей работы в целом, но и исходный код, а следовательно благополучно скажется на скорости загрузки будущего сайта. В качестве домашнего задания, я хочу, чтобы вы каждому заголовку, не только h3, но и h1, h2, h4 задали свой класс, в котором указали шрифт, толщину и размер.

На этом мы заканчиваем, до встречи в следующем видеоуроке, в котором мы изучим не менее интересную тему, а именно — cсылки и псевдоклассы в CSS!