HackMD
tags: МДК02.04 Сетевые языки
Лабораторная работа №3. Оформление веб страницы с использованием сss.
Теоретическая часть
CSS — это язык описания внешнего вида документа, то есть он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов. Термин расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). CSS взаимодействует с другим языком разметки — HTML, который отвечает за размещение элементов на странице.
Подключение css.
Для добавления css кода есть 3 основных подхода:
-
Добавление css в нутри веб страницы HTML. Для этого в теге
<head></head>нужно добавить в конец следующий код:Именно в этом теге и писался бы код css.
-
Еще одним вариантом являеться добавление css кода непосредственно в тег html c помощью атрибута
<h1 style="color: #336"> Привет css </h1>- так это могло бы выглядеть. -
Третьем подходом, считаеться выделение кода css в отдельный файл стилей. Именно этот подход считается самым правильным. Для этого вам необходимо в теге
<head></head>добавить следующий код:<link rel="stylesheet" type="text/css" href="main.css">.
Применение css.
При оформлении файла main.css очень важно писать коментарии чтобы не запутаться в своем коде и понимать что к чему относиться. Это может выглядеть так:
Чтобы применить стили css к элементу можно использовать следующие:
- Первый вариант это применение стилей непосредственно к элементу:
Такой подход добавит указанные стили всем тегам h1, что не всегда являеться необходимым, можно использовать для указания каких то обших стилей у тега. - Второй вариант это добавление стилей через классы, для этого у тега должен быть задан класс:
Для обращения к классу в css используеться " . ":
Как можно заметить стили применились только к тому тегу который имеет класс "merfi".
- Есть еще одна возможность применить стили к элементу веб страницы это использовать атрибут id:
Результат:
В css у элементов веб странице имееться множество разных свойст и учить их все не рационально. Учиться css нужно на практике, к примеру вы хотите поменять фон веб-странице, чтобы узнать как это сделать воспользуйтесь google :).
Обратите пристальное внимание на методологию именования классов по БЭМ. .
Так как это практический предмет то обращаю ваше внимание на то, что весь необходимый материал показываеться преподавателем на паре.
Практическая часть.
-
Вам необходимо применить к своей веб страницы сделанной в первой лабораторной работе css стили, это может выглядеть так:
Важно используйте методологию по БЭМ. Не используйте id для применения стилей. Также вы должны использовать отдельный файл для css стилей.
-
Пройдите игру https://cssgridgarden.com/#ru
-
Используя grid-css создайте такую веб страницу:
-
Пройдите игру https://flexboxfroggy.com/#ru
-
Сверстайте какую-нибудь страницу с использованием flex-box.
