План урока
| Цель: | Знакомство с наиболее часто применяемыми свойствами CSS и изучение их применения к нужным html элементам. |
| Инструменты: | Текстовый редактор с подсветкой синткасиса, браузер. |
| Время / сложность: | 2 часа / средний. |
На прошлом уроке мы узнали, что такое CSS и почему стоит применять его для оформления html документов. Мы научились подключать CSS стили к html странице узнали о каскадировании и научились использовать базовый синтаксис CSS.
Сегодня у нас большие планы: познакомиться с основными свойствами CSS (поверхностно, чтобы было с чем практиковаться) и подробно разобрать использование селекторов.
Еще раз о синтаксисе CSS правил
Напомню, что синтаксис блока css правил выглядит следующим образом:
селектор {
названиесвойства: значение;
названиесвойства: значение;
}Селектор отвечает за выбор к каким html элементам применять свойства данного блока.
Думаю, что вам уже наскучило наблюдать теорию, разбавим ее описанием основных свойств CSS.
Что можно оформить с помощью CSS
Основными свойствами элементов, которые подлежат оформлению с помощью CSS являются:
- текст (шрифты, размер. начертание и т.п.);
- фон;
- позиционирование;
Рассмотрим наиболее употребляемые свойства из каждой категории
Текст
Основным оформительским свойством текста является шрифт. CSS позволяет варьировать размер шрифта, начертание, оформление строки. Так же с помощью CSS можно подключать к странице те шрифты, которые могут отсутствовать у пользователей.
Не стоит недооценивать важность настройки типографики для создания полноценного дизайна сайта. Текст, в большинстве случаев, является одним из главных действующих лиц сайта и его неудачное оформление сразу бросается в глаза и затрудняет использование сайта.
Итак, перечислим основные свойства для настройки отображения текста, доступные в CSS.
font-size: значение;
Значениz свойства font-size могут быть заданы в разных единицах измерения. Реально используются 1 абсолютная и 2 относительные единицы.- px — пиксель (соответствует одному пикселю на экране).
- em — относительная величина, 1em равен текущему размеру font-size.
- % — работает подобно em, 100% совпадает с текущим font-size.
font-weight: значение;
Определяет насыщенность шрифта.- bold — полужирное.
- normal — обычное.
font-style: значение;
определяет начертание шрифта- normal — обычное начертание.
- italic — курсив.
- oblique — наклонное начертание, получаемое наклоном симмволов в начертании normal.
- inherit — наследует значение родителя (подробнее об этом вы узнеаете позже).
font-family: имя шрифта, имя шрифта, и т.д.;
Задает шрифт, правила применяются слева направо, пока не будет найден доступный для использования шрифт. кроме имени шрифта допустимо указывать семейство:- serif — с засечками.
- sans-serif — без засечек.
- cursive — курсивный.
- fantasy — декоративный.
- monospace — моноширинный.
Существует сокращенная запись свойств шрифта
font: font-style font-variant font-weight font-size/line-height font-family
Из всех свойств обязательно указывать только размер и название шрифта/семейства. Пример:
font: italic bold 16px/24px gergia, serif;
Вот такой текст.
Фон
Для управления фоном элементов существует несколько свойств CSS, как и в случае шрифта они могут быть сгруппированы в одном объявлении. Основными свойствами являются:
background-color: цвет;— устанавливает цвет фона. Цвет задается псевдонимом (red, green и т.п.), шеснадцатеричным числом (#FF0000, #00FF00) или вот так rgb (255,0,0).background-image: url(путь к файлу);— устанавливает изображения для фона. Может использоваться совместно с заданием цвета, отображается поверх.background-position: положение-по-горизонтали положение-по-вертикали— устанавливает положение фонового изображения относительно элемента. Значения могут быть заданы в пикселях, процентах и т.п. или ключевыми словами «left | center | right» и «top | center | bottom» соответственно.
Позиционирование
Для позиционирования элементов с помощью CSS применяется множество различных приемов. Это одна из самых сложных сторон применения каскадных таблиц стилей. В давние времена, позиционирование элементов задавали с помощью помещения их в таблицы, при такой верстке вложение таблиц друг в друга и объединение ячеек позволяют создавать достаточно сложные структуры. Сегодня можно найти достаточно много авторитетных сайтов, которые сверстаны с применением таблиц.
Основной причиной использования табличной верстки было отсутствие адекватных специализированных средств для создания сложного форматирования html документов. Однако с приходом CSS такие средства появились, что позволяет сегодня применять эффективное разделение форматирования и информации. Конечно, приход новой концепции вызвал серьезную «ломку» у тех, кто привык верстать таблицами и в интернете разгорались многочисленные холивары CSS vs таблицы. Стоит понимать, что сегодня верстка с помощью CSS является общепринятым стандартом, а использование таблиц для размещения не табличных данных справедливо осуждается.
При такой верстке для создания структуры страницы используются блочные элементы. В html 4 основным блоком, в который помещали содержимое был тег <div>, поэтому часто можно услышать выражение «верстка на divах», «дивная верстка». В html5 появились новые теги для улучшения семантичности разметки. Это: <header>, <footer>, <section>, <nav>, <aside>.
Для позиционирования блоков и их содержимого применяются следующие css свойства:
- Внешние и внутренние отступы (margin: top right bottom left и padding: top right bottom left).
- Обтекание элемента (float: left | right | none | inherit ). Наиболее очевидным примером использования является вывод картинки, которую обтекает текст, для этого используется следующий css (выводим картинку слева и добавляем внешние отступы):
img{ float: left; margin: 20px 12px 20px 0px; } - Использование относительного и абсолютного позиционирования (display:relative и display:absolute). Используется для задания позиции выраженной в еденицах измерения, например:
img{ position: absolute; top: 200px; left: 200px; }
Данный код заставит изображения выводиться смещенным на 200 px вниз и вправо относительно окна браузера или родительского элемента, если у него свойство display установлено в ixed, relative или absolute. При этом изображение выводится из общего потока разметки и как бы плавает над остальными элементами, не влияя на них.
Стоит понимать, что тут были приведены лишь начальные сведения о методах позиционирования элементов, чтобы вы имели о них предсмтавление. В следующих уроках мы рассмотрим каждый из них подробнее.
В следующем уроке я почти не буду «грузить» теорией, а мы перейдем к разбору конкретных примеров использования HTML и CSS для отдельных элементов веб-страниц.
Задание
Сверстайте приведенный ниже фрагмент из текста и двух картинок, используя для позиционирования:
- таблицу;
- float;
- абсолютное позиционирование.
Учимся позиционировать
Сегодня я научился позиционировать элементы разными методами. Возможно, таблицами получилось и быстрее, но если я захочу переставить картинки над или под текст, то сразу станет ясно в чем неудобство верстки таблицами
