Основы web-разработки

Раздел 4. Настройка внешнего вида страницы с использованием стилей. CSS как современный инструмент для оформления сайта.

• Подробно о CSS URL
• Справочник CSS URL
• Попробуем выполнить пять занятий:

  1. Задаём размер шрифта заголовка в 55 пикселей.
  2. Заменяем цвет ссылок на зелёный.
  3. Заменяем цвет ссылок при наведении.
  4. Заменяем цвет и размер текста в третьем абзаце на второй странице.
  5. Делаем крупные картинки, которые уменьшаются при наведении.
     

  • Страницы для практики
    • my-page-1.html
    • my-page-2.html
    • style.css

  Download folder
• Быстрая проверка знаний URL
• Попробуем выполнить пять заданий:

  1. Создаём файл my-page.html.
  2. Прописываем в файле my-page.html стандартную структуру, в body указываем теги заголовка, изображения и два абзаца.
  3. Создаём файл my-style.css.
  4. Указываем в теге <link> в файле my-page.html связь с my-style.css.
  5. В файле стилей прописываем следующие свойства для элементов:
     
     • Заголовок имеет размер 100px.
     • Заголовок имеет красный цвет.
     • Картинка имеет размер 200px по ширине и высоте.
     • Один абзац выровнен по правой стороне.
     • Другой абзац выровнен по центру.
     • Оба абзаца окрашены в синий.
       

  
  

  Бонусные задания для супермолодцов:

  1. Изображение имеет скруглённые края (https://webref.ru/recipe/2340).
  2. Изменять размер заголовка вместе с размером окна (https://webref.ru/recipe/2370).
  3. Изменить шрифт абзацев на свой, скачанный с сайта https://fonts-online.ru (https://webref.ru/css/font-face).
  4. Добавить градиент на фон страницы (https://webref.ru/recipe/2338).
     
• 
  

  
  

• style-page File
• Итоговые задания раздела.

  Связываем тегом <link> файл style-page.html с файлом стилей. Все дальнейшие задания выполняем в файле стилей.
  

  1. Добавить поля к контейнеру содержимого слева и справа по 10%, сверху и снизу 15px.
  2. Добавить картинку на фон сайта.
  3. Установить белый цвет с небольшой прозрачностью у контейнера содержимого.
  4. Установить размер шрифта в таблице в 14px.
  5. Добавить псевдоэлементом знак звёздочки к числу рейтинга в таблице.
  6. Добавить фон к каждой второй строке в таблице при помощи псевдокласса.

  
  

  Бонусные задания для супермолодцов:

  1. Добавить при наведении различный фон для чётных и нечётных строк таблицы.
  2. Изменить цвет и фон текста при выделении в таблице при помощи псевдоэлемента.
  3. Выровнять второй столбец по центру.
  4. Выровнять последний столбец по правому краю.