Работа с текстом и изображениями в CSS

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Табличная верстка сайта
  10. Теги в HEAD
  11. Изображения в html
  12. CSS
  13. Блочная структура сайта
  14. Блочная верстка

В этом уроке мы будем учиться оформлять тексты и изображения с помощью команд 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 задавать параметры форматирования текста. В следующем уроке мы научимся блочной верстке страницы.

Оставить ответ

Ваш email не будет показан.