###### tags: `МДК02.04 Сетевые языки` # Лабораторная работа №3. Оформление веб страницы с использованием сss. ## Теоретическая часть CSS — это язык описания внешнего вида документа, то есть он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов. Термин расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). CSS взаимодействует с другим языком разметки — HTML, который отвечает за размещение элементов на странице. ### Подключение css. Для добавления css кода есть 3 основных подхода: 1. Добавление css в нутри веб страницы HTML. Для этого в теге `<head></head>` нужно добавить в конец следующий код: ```html= <style type="text/css"> </style> ``` Именно в этом теге и писался бы код css. 2. Еще одним вариантом являеться добавление css кода непосредственно в тег html c помощью атрибута `<h1 style="color: #336"> Привет css </h1>` - так это могло бы выглядеть. 3. Третьем подходом, считаеться выделение кода css в отдельный файл стилей. Именно этот подход считается самым правильным. Для этого вам необходимо в теге `<head></head>` добавить следующий код: ` <link rel="stylesheet" type="text/css" href="main.css">`. ![](https://hackmd.io/_uploads/H1Qt4k7k6.png) ### Применение css. При оформлении файла `main.css` очень важно писать коментарии чтобы не запутаться в своем коде и понимать что к чему относиться. Это может выглядеть так: ![](https://hackmd.io/_uploads/H1hPSJQka.png) Чтобы применить стили css к элементу можно использовать следующие: 1. Первый вариант это применение стилей непосредственно к элементу: ![](https://hackmd.io/_uploads/HkDKd1Xka.png) ![](https://hackmd.io/_uploads/H1xjOyX1p.png) Такой подход добавит указанные стили всем тегам h1, что не всегда являеться необходимым, можно использовать для указания каких то обших стилей у тега. 2. Второй вариант это добавление стилей через классы, для этого у тега должен быть задан класс: ![](https://hackmd.io/_uploads/SyXFYyXy6.png) Для обращения к классу в css используеться " . ": ![](https://hackmd.io/_uploads/rywkq1m16.png) Как можно заметить стили применились только к тому тегу который имеет класс "merfi". ![](https://hackmd.io/_uploads/S1fW51QyT.png) 3. Есть еще одна возможность применить стили к элементу веб страницы это использовать атрибут id: ![](https://hackmd.io/_uploads/rJkk7eQJa.png) Результат: ![](https://hackmd.io/_uploads/rJYlmlXk6.png) В css у элементов веб странице имееться множество разных свойст и учить их все не рационально. Учиться css нужно на практике, к примеру вы хотите поменять фон веб-странице, чтобы узнать как это сделать воспользуйтесь google :). :::danger Обратите пристальное внимание на [методологию именования классов по БЭМ. ](https://ru.bem.info/methodology/quick-start/). ::: :::success Так как это практический предмет то обращаю ваше внимание на то, что весь необходимый материал показываеться преподавателем на паре. ::: ## Практическая часть. 1. Вам необходимо применить к своей веб страницы сделанной в первой лабораторной работе css стили, это может выглядеть так: ![](https://hackmd.io/_uploads/ByIjdx7JT.png) > :::warning Важно используйте методологию по БЭМ. Не используйте id для применения стилей. Также вы должны использовать отдельный файл для css стилей. ::: 2. Пройдите игру https://cssgridgarden.com/#ru 3. Используя grid-css создайте такую веб страницу: ![](https://hackmd.io/_uploads/r1yiJWmyT.png) 4. Пройдите игру https://flexboxfroggy.com/#ru 5. Сверстайте какую-нибудь страницу с использованием flex-box.