HTML - это язык разметки, с помощью которого отображается весь контент веб-страницы. Например, весь текст данной страницы, находится внутри HTML-тегов, сообщающих браузеру, как упорядочивать контент на странице. Щелкните правой кнопкой мыши по любому элементу на странице и выберите "Просмотреть код", чтобы открыть консоль разработчика браузера. В результате вы увидите структуру страницы.
CSS сообщает браузеру, хотите ли вы отображать какой-либо из этих тегов особым образом, например, изменить его фон на синий цвет или слегка сдвинуть его влево. В консоли разработчика вы можете увидеть стили CSS правее от кода страницы. Там обычно показывается, какие конкретные свойства были применены с какой строки CSS-файла.
Постарайтесь ответить на предложенные вопросы. После выполнения задания попробуйте ответить на них ещё раз:
- Почему мы разделяем понятие HTML и CSS?
- Что такое классы и идентификаторы (и чем их различие)?
- Что такое элементы?
- Что такое теги?
- Что такое атрибуты?
- Что такое формы?
- Что такое div?
- Что такое селекторы?
- Что такое свойства?
- Что такое значения (или values)?
- Что такое адресная строка браузера и что она делает?
- В чем разница между px и em?
- Как наследуются стили CSS для конкретного элемента? Т.е. как у элемента образуются стили "по умолчанию" (или "default")?
- Какие два атрибута CSS вы можете изменить, чтобы переместить элемент на странице?
- Какие существуют три способа подключить CSS для стилизации определенного элемента или для стилизации всего проекта?
- Что такое "default stylesheet" или "user agent stylesheet"?
- Зачем используется файл сброса CSS?
Чтобы заполнить пробелы, прочитайте HTML Dog beginner HTML tutorial, HTML Dog beginner CSS tutorial и HTML Dog intermediate CSS tutorial. Хоть вы и будете знакомы с частью информации, вы все равно найдете немало полезной информации.
Узнайте о формах в HTML из данного видео или данной страницы.
Необязательно: узнайте о стилях по умолчанию вашего браузера и ресет-файлах CSS. Именно из-за стандартных стилей вы иногда можете видеть в браузере пробелы там, где вы их не ставили или стили, которых вы не писали. Разработчики практически всегда используют CSS-ресеты, чтобы избавиться от стандартных стилей и писать с нуля. Если вам хочется больше информации о ресетах, вот более длинное видео.