Основы CSS
- Что такое «CSS»?
- Как в CSS обозначаются комментарии?
- Что такое «селектор»?
- Перечислите основные виды селекторов
- Что такое псевдокласс?
- Какие существуют селекторы атрибутов?
- В чем разница между
#myи.my? - В чем разница между
marginиpadding? - В чем заключается разница между значениями
0иautoв свойствеmargin? - Какое свойство задает цвет фона?
- Как убрать подчеркивание для всех ссылок на странице?
- Для чего используется свойство
clear? - Как сделать жирным текст во всех элементах
<p>? - Как задать красный цвет для всех элементов, имеющих класс
red? - Что такое Sass и SCSS?
Что такое «CSS»?
CSS, Cascading Style Sheets (каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки, который применяется к элементам web-страницы для управления их видом и положением.
Основной целью разработки CSS являлось разделение описания логической структуры web-страницы, которое производится с помощью HTML или других языков разметки от описания внешнего вида этой web-страницы, которое производится с помощью CSS.
Как в CSS обозначаются комментарии?
Чтобы пометить, что текст является комментарием, применяют конструкцию /* ... */
Что такое «селектор»?
Селектор – это правило, на основании которого осуществляется выбор элементов в HTML документе для того, чтобы применить к ним определённые стили.
p {
text-align: center;
font-size: 20px;
}
/* p – это селектор, text-align и font-size – это свойства, а center и 20px – значения. */
Перечислите основные виды селекторов
- селектор
*- выбор всех элементов; - селектор элемента - выбор всех элементов в HTML документе, имеющих указанный тег (например:
div); - селектор класса - выбор всех элементов в HTML документе, имеющих указанный класс (например:
.center); - селектор идентификатора - выбор элемента в HTML документе, имеющего указанный идентификатор (например:
#footer); - селекторы псевдоклассов - выбор всех элементов в HTML документе, имеющих указанный псевдокласс (например:
p:first-of-type); - селекторы атрибутов - выбор элементов в зависимости от указанного атрибута элемента или его значения (например:
[href*="youtube"]).
Что такое псевдокласс?
Псевдокласс определяет динамическое состояние элементов, которое изменяется из-за действий пользователя, или же соответствует текущему положению в дереве документа. В отличие от настоящего класса, в явном виде псевдокласс в HTML не указывается, а в CSS указывается через : непосредственно после селектора.
Наиболее известные псевдоклассы:
:linkприменяется к ссылкам, которые еще не посещались пользователем;:visitedприменяется к посещенным ссылкам;:hoverприменяется, когда курсор мыши находится в пределах элемента, но не активирует его;:activeприменяется при активации элемента;:focusприменяется к элементу при получении им фокуса;:first-childприменяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
Какие существуют селекторы атрибутов?
[атрибут]- все элементы, имеющие указанныйатрибут;[атрибут=значение]- все элементы, имеющиеатрибут, значение которого равно"значение";[атрибут^=значение]- все элементы, имеющиеатрибут, значение которого начинается сзначение;[атрибут|=значение]- все элементы, имеющиеатрибут, значение которого равнозначениеили начинается сзначениеследующим образомзначение-*(значениес обязательным дефисом, после которого идёт остальное содержимое значения);[атрибут$=значение]- все элементы, имеющиеатрибут, значение которого заканчивается назначение;[атрибут*=значение]- все элементы, имеющиеатрибут, значение которого содержит подстрокузначение;[атрибут~=значение]- все элементы, имеющиеатрибут, значение которого содержитзначениекак одно из значений через пробел.
В чем разница между #my и .my?
#my — селектор идентификатора, а .my — селектор класса.
В чем разница между margin и padding?
margin — внешний отступ, а padding — внутренний отступ.
В чем заключается разница между значениями 0 и auto в свойстве margin?
В вертикальных полях — auto всегда означает 0. В горизонтальных полях — auto означает 0 только тогда, когда свойство width также auto.
Какое свойство задает цвет фона?
Цвет фона задает свойство background-color.
Как убрать подчеркивание для всех ссылок на странице?
a {
text-decoration: none;
}
Для чего используется свойство clear?
clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
Как сделать жирным текст во всех элементах <p>?
p {
font-weight: bold;
}
Как задать красный цвет для всех элементов, имеющих класс red?
.red {
color: red;
}
Что такое Sass и SCSS?
Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Язык Sass имеет два синтаксиса:
- sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
- SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.