- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Блочная структура сайта
- Блочная верстка
В этом уроке мы будем учиться оформлять тексты и изображения с помощью команд CSS.
Основные параметры оформления текста:
font-family — задает шрифт, которым пишется текст (может быть Serif ( соответствует для русского языка Times) sans-serif (соответствует Arial, Helvetica) и monospace (соответствует Courier)
font-size — задает величину текста (может задаваться в пикселях (px), процентах ( %);
text-align — задает расположение текста ( может быть по центру (center), справа (right), слева (left), выравнивание по ширине (justify);
font-weight — толщина шрифта (может быть нормальной(normal) и полужирной (bold);
Есть и другие параметры оформления текста, но для начала нам хватит и этих.
Давайте теперь зададим на нашем сайте такие параметры работы с текстом: шрифт Times, для заглавий полужирное начертание. Выравнивание заглавий обязательно по центру, а параграфа по ширине. Высота текста в параграфе будет 120% от нормальной.
Откройте файл style.css
Добавьте следующий код:
h1, h2, h3, h4, p { font-family: "Times New Roman", Times, serif;}
h1, h2, h3, h4 { text-align: center; font-weight: bold}
p {text-align: justify; font-size:120%; }
Первая строка нашего кода задает начертание текста для заголовков и параграфов.
Вторая строка задает заголовкам выравнивание по центру и полужирное начертание.
Третья строка задает выравнивание по ширине для параграфов и размер шрифта в 120% от нормального.
Элементы страницы можно группировать в 1 строке. Параметры описания обязательно должны оканчиваться точкой с запятой (;).
Теперь откройте все наши файлы и удалите из текстовых тегов атрибуты. Т.е если было:
<p align="left">Этот текст выровнен по левому краю</p>
то сделайте:
<p>Этот текст выровнен по левому краю</p>
Посмотрите в браузере что получилось. Все текстовые элементы должны соответствовать описанию, заданному в файле style.css.
Работа с изображениями.
Мы можем с помощью команд CSS сделать так, чтобы текст обтекал изображение справа или слева. Для этого используется параметр float.
Откройте файл style.css и добавьте туда такую строку:
img {float:left;}
Теперь давайте вставим картинку в файле site.html. В коде после строки заголовка h1 вставьте картинку:
<h1>Введение</h1> <img src="images/img1.png" width="169" height="250">
Посмотрите в браузере , что получилось. Картинка прижата влево, а текст обтекает картинку справа. Если же мы в файле style.css поменяем строку так:
img {float:right;}
Тогда текст будет обтекать справа.
В этом уроке мы научились с помощью команд CSS задавать параметры форматирования текста. В следующем уроке мы научимся блочной верстке страницы.