В этой статье мы приступаем к изучению CSS - формального языка описания внешнего вида документа. CSS позволяет разработчику настроить сайт "под себя". Это можно сравнить с покупкой смартфона. Изначально в нем установлены настройки по умолчанию, но в процессе эксплуатации пользователь может изменять фон рабочего стола, громкость, мелодию и т.д. Тоже самое происходит и с сайтом. Изначальные настройки для него уже прописаны, но благодаря правилам CSS Вы можете задавать свои.
Для начала немного теории.
Правила CSS могут быть представлены как в отдельном документе (внешняя каскадная таблица стилей, которая будет использоваться в данной статье), так и встроены в код html-страницы (внутренняя каскадная таблица стилей). Правило CSS состоит из двух частей: селектора и объявления.
Пример:
Объявление в свою очередь состоит из двух частей: свойства и значения.
Пример:
Краткий обзор статьи:
- Гарнитура шрифта
- Цвет шрифта
- Размер шрифта
- Цвет блока
- Непрозрачность блока
Гарнитура шрифта
Первое что Вы должны сделать - это создать два файла: html-страницу и css-документ. Или только второе если первое уже создано.
У меня это выглядит вот так:
Открываем файл в формате CSS и прописываем правило для элемента <h1>.
В приведенном примере нужное правило подчеркнуто красной линией, пока мы работаем только с ним.
Сохраняем этот файл, закрываем и открываем другой : indec.html.
Открываем встроенный редактор кода (клавиша f12) и создаем заголовок первого уровня (в моем примере он звучит как "Лучшие программисты в истории").
Для того чтобы связать текстовый файл css с html-страницей необходимо между элементами <head></head> прописать путь к этому файлу. Сделать это можно с помощью элемента <link>.
Справились? Отлично) Сохраняем, закрываем и переходим к следующему пункту.
Цвет шрифта
Здесь цепочка действий аналогична предыдущей: открываем файл css → прописываем вторую строку с указанием цвета шрифта → сохраняем.
Размер шрифта
Не закрывая прописываем третью строку с указанием размера шрифта → сохраняем.
Цвет блока
В CSS html-элементы могут создавать различные блоки цвет и прозрачность которых можно изменять.
Не закрывая прописываем четвертую строку с указанием цвета блока → сохраняем → закрываем.
Пора посмотреть на то что же у нас получилось:
Непрозрачность блока
Как видно из примера все вышеперечисленные правила соблюдены. Остается только добавить прозрачность.
Открываем файл css → прописываем пятую строку с прозрачности блока → сохраняем.
Вот что у нас в итоге получается:
А вот так будет выглядеть окончательный вариант:
Остальные три блока создаются точно также как и первый.
Подсказка:
Спасибо за внимание!
Надеюсь все получилось и теперь Вы сделаете свой сайт гораздо более красочным и интересным.
Предлагаю подписаться на канал и прокачать свои навыки веб-разработчика.