Основы html и css: Основы HTML и CSS — Тренажёр «Знакомство с фронтендом» — HTML Academy
Содержание
Конспект «Основы HTML и CSS» — Основы HTML и CSS — HTML Academy
HTML
HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».
Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов: <h2>
, <p>
, <ul>
.
Парные теги
Теги бывают парными и одиночными. Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:
<h2>Текст заголовка</h2>
В закрывающей части парных тегов перед именем ставится символ /
(«слэш»).
В парные теги можно вкладывать другие теги. Например, как в списках:
<ul> <li>Элемент списка</li> </ul>
У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:
<ul><li>Элемент списка</ul></li> <!-- Плохо --> <ul><li>Элемент списка</li></ul> <!-- Хорошо -->
Не все теги можно вкладывать в другие теги, например, тег <h2>
нельзя вкладывать в <p>
.
Одиночные теги
Существуют не только парные, но и одиночные теги. Например, тег <img>
позволяет добавить картинку в разметку.
Сам по себе <img>
не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src
:
<img src="keks.png">
У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:
<тег атрибут1="значение1" атрибут2="значение2">
Например, картинке при желании можно задать размеры:
<img src="keks.png">
Комментарии
Код, заключённый между символами <!--
и -->
, работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.
<!-- Это комментарий в HTML -->
CSS
CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».
Язык CSS отвечает за внешний вид страницы.
С помощью CSS можно задавать параметры для любого тега: ширину и высоту, отступы, цвет и размер шрифта, фон и так далее. Все эти параметры задаются с помощью свойств в следующем формате:
свойство: значение;
Например:
color: red; padding: 10px;
Стили к тегам добавляются чаще всего при помощи атрибута class
.
Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten
, применились к тегу <p>, то в разметке напишем так:
CSS-правила
Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.
И выглядит это так:
селектор { свойство1: значение; свойство2: значение; }
Задавать стили можно не только с помощью атрибута class
, но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.
p { color: red; }
В примере селектором является p
, и он выбирает все теги с именем p
(то есть теги <p>
), а теги с другим именем, например h2
, не выбирает.
Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.
.название_класса { свойство: значение; }
Миксование классов
У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class
через пробел, например:
<li>Товар</li> <li>Товар, а ещё хит продаж</li> <li>Товар, хит продаж и со ски-и-идкой!</li>
Обычно миксование используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации.
Комментарии
В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */
.
Продолжить
Основы CSS | Основы HTML, CSS и веб-дизайна
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
HTML задаёт структуру.
CSS задаёт оформление.
CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.
CSS расшифровывается как Cascading Style Sheets. Сейчас мы разберёмся, как задавать стили и причём тут слово «каскад».
Допустим, у нас есть такой HTML:
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси. </p>
Это всё — один абзац, но я добавил переводы строк, чтобы текст просто удобнее было читать на этой странице. В HTML перевод строки не транслируется в реальный перевод строки в итоговой странице. Вместо этого он превратится в один пробел. Несколько переводов строки также превратятся в лишь один пробел. Ну, и несколько пробелов тоже превратятся в один пробел.
Все варианты ниже приведут к одному результату:
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси. </p>
Для реального перевода строки можно использовать одиночный тег <br>
.
Мы отвлеклись. Итак, мы хотим добавить к нашему HTML-коду стиль. С помощью CSS-кода ниже мы сделаем так, что у всех элементов p
текст внутри будет красным, а размер шрифта будет 20 пикселей:
p { color: red; font-size: 20px; }
Вот живой пример:
See the Pen Basic CSS by Hexlet (@hexlet) on CodePen.
- Первая часть — это селектор (selector). Им мы выбираем то, к чему применять стиль.
- Набор стилей указан после селектора в фигурных (
{
,}
) скобках. - Набор состоит из пар свойство: значение (property: value).
Классы и идентификаторы
Но что если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>Это подтверждают находки наконечников стрел и других артефактов в районах города, не застроенных зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк. </p> <p>Европейские поселения появились здесь в 1624 году.</p>
Мы указали класс у двух абзацев. Теперь нам нужно обновить CSS, потому что сейчас он не учитывает класс и применяет стили ко всем абзацам. Укажем класс:
p.red { color: red; font-size: 20px; }
Селектор p.red
означает «все элементы типа p
с классом red
».
То есть если мы добавим класс red
к элементу другого типа, например, <a href="https://goo.gl">Goo</a>
, то такой элемент не станет красным: стиль работает строго для p
.
Можно освободить стиль от такого ограничения:
. red { color: red; font-size: 20px; }
Селектор .red
означает «все элементы любого типа с классом red
».
Допустим, визуальный стиль нашей страницы изменился, и важные куски текста теперь выделяются не красным цветом с увеличенным шрифтом, а зелёным цветом и курсивом.
.red { color: green; font-style: italic; }
Отлично, но название класса теперь не имеет особого смысла. Это больше не red на самом деле. Придётся поменять его на green и изменить класс в HTML у всех соответствующих элементов.
Но идея лучше — изначально использовать в названиях классов семантический смысл, а не особенность реализации. Например, если таким образом мы выделяли более важные части текста, то стоило назвать класс important
:
.important { color: green; font-style: italic; }
Теперь при изменении цветов или любых других деталей этого стиля нам не нужно волноваться о названии: смысл не поменяется, поменяется лишь конкретная реализация.
Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи.
Другой пример — логотип сайта где-нибудь наверху.
Для уникальных «разовых» элементов стоит использовать идентификатор:
<h2>История города Нью-Йорк</h2> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>Это подтверждают находки наконечников стрел и других артефактов в районах города, не застроенных зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк. </p>
А так можно указать стиль:
h2#article-title { font-family: Georgia, serif; color: #1050ff; }
Структура и идея такие же, как с классами, но вместо точки .
используется решётка #
. В этом стиле мы задали шрифт с засечками Georgia
и синий цвет в HEX-формате. Введите в гугле «color picker», чтобы поработать с интерактивной палитрой, где можно сгенерировать коды для разных цветов.
Последний пример немного избыточен, потому что по правилам (спецификации HTML) элемент с идентификатором должен быть уникальным на странице. То есть нет необходимости выбирать именно h2
, достаточно сделать так:
#article-title { font-family: Georgia, serif; color: #1050ff; }
Но следить за тем, чтобы идентификаторы были уникальными и не повторялись — ваша задача. Браузер никак не «пожалуется» на нарушение этого правила.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Электронная почта *
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»
Наши выпускники работают в компаниях:
Тег HTML »
В тегах HTML, Новый
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
- Элемент
- Структура HTML-документа до и после HTML5 — вот что изменилось
- Что делает
?HTML-тег - Элемент
используется для обозначения содержимого веб-страницы, относящегося к центральной теме этой страницы или приложения. Он должен включать контент, уникальный для этой страницы, и не должен включать контент, который дублируется на нескольких веб-страницах, например верхние и нижние колонтитулы и основные элементы навигации. - Дисплей
- встроенный
- Использование
- семантический | структурный
Содержание
- 1 Структурирование HTML-документа
- 1.1 Использование
- 1.2 Правильные определения на вашей странице
- 2 Поддержка браузером для main 9 0034
Структурирование HTML-документа
Элемент
— это структурный и семантический элемент, определяющий основной раздел страницы, где отображается контент. Подобные элементы включают
, который описывает примечание или комментарий. Раздел
также полезен, когда нестандартные устройства, такие как программы чтения с экрана, интерпретируют содержимое вашей страницы. Это позволяет устройству чтения с экрана быстро обнаруживать и находить важный контент, пропуская при этом код в верхней части файла.
— один из 9 структурных тегов, представленных в спецификации HTML 5.Использование
Элемент
можно использовать только один раз в каждом файле HTML. За ним следует закрывающий тег
, который следует разместить в конце содержимого. Оба тега должны использоваться вне других структурных элементов, таких как
и его закрывающий тег, а также