Комментарий - это текст внутри программы, который не выводится на экран и не воспринимается компьютером как часть программного кода. Он предназначен для программистов, которые будут читать этот код. Писать комментарии к своему коду - полезная привычка, это может помочь не запутаться в коде не только другим людям, но и самому автору. В HTML и CSS комментарии ставятся так:
Знакомство с CSS. Комментарии, селекторы, оформление, позиционирование контента.
Комментарии
<!-- Комментарий в коде HTML. -->
/* Комментарий в коде CSS. */
Селекторы
Селекторы в CSS - это сигналы, которые говорят браузеру, к какому именно элементу HTML-страницы применять то или иное правило CSS. Чаще всего применяются три разновидности селекторов - тип, класс и идентификатор.
h1 {
color: red;
}
/*Это - селектор по типу. В результате выполнения этого кода все заголовки первого уровня на странице станут красными.*/
.red {
color: red;
}
/*Это - селектор по классу. В результате выполнения этого кода красными станут все элементы, для которых указана принадлежность к классу red.
Принадлежность к классу указывается в HTML коде путём добавления к тегу атрибута class со значением "имя класа". Например, так: */
<h1 class="red">
/*Имена классам мы придумываем сами. Компьютеру всё равно, но желательно, чтобы они имели смысл для человека.*/
#red {
color: red;
}
/*Это - селектор по идентификатору (id). Вы уже использовали его на прошлом занятии. В результате выполнения этого кода элемент HTML с id="red" станет красным.
Идентификатор должен быть уникальным. */
Оформление
Основное предназначение CSS - оформление веб-страниц. Правила CSS дают нам очень много возможностей (смотрите в справочнике). Здесь я перечислю только некоторые из них (возможные значения перечисленных правил - тоже смотрите в справочнике):
- text-align
- text-decoration
- font-size
- font-style
- color
- background
- border
Выравнивает текст.
Может зачеркнуть текст, подчеркнуть и т.д.
Определяет размер шрифта.
Определяет начертание шрифта - обычный, курсив и т.д.
Определяет цвет текста элемента.
Определяет фон элемента.
Определяет толщину, цвет и стиль рамки вокруг элемента.
Задание 1 (на занятии)
Создайте веб-страницу. Разместите на ней любой текст. Оформите этот текст при помощи правил CSS, перечисленных выше. Каждое правило должно быть использовано хотя бы один раз.
Позиционирование контента
Для того, чтобы размещать текст и медиафайлы внутри блоков нам нужно научиться правильно позиционировать контент. За это в CSS отвечают правила padding и margin.
Правило margin устанавливает величину отступа от каждого края элемента.
Код CSS:
.margin-example {
border-style: solid;
}
.margin-text-example {
margin-left: 100px;
margin-right: 100px;
margin-top: 0;
margin-bottom: 0;
}
Код HTML:
<div class="margin-example"><p class="margin-text-example">Текст внутри прямоугольника c отступами 100 пикселей слева и справа.</p></div>
Результат выполнения этого кода выглядит так:
Текст внутри прямоугольника c отступами 100 пикселей слева и справа.
Правило padding устанавливает величину полей вокруг содержимого элемента. Поле - это расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Код CSS:
.padding-example {
border-style: solid;
padding-left: 200px;
padding-right: 200px;
padding-top: 0px;
padding-bottom: 0px;
}
.padding-text-example {
margin-top: 0;
margin-bottom: 0;
}
Код HTML:
<div class="padding-example"><p class="padding-text-example">Текст внутри прямоугольника c отступами 200 пикселей слева и справа.</p></div>
Результат выполнения этого кода выглядит так:
Текст внутри прямоугольника c отступами 200 пикселей слева и справа.
Обратите внимание, чтобы убрать автоматически создаваемые браузером отступы сверху и снизу, мне пришлось прописать margin-top = 0 и margin-bottom = 0 для этого абзаца в классе padding-text-example.