CSS - RUS Flashcards
В Чём Отличие CSS от HTML?
Хотя на самом деле разница сама по себе очень простая:HTMLиспользуется для написания и создания контента на странице, тогда какCSSиспользуется для его дизайна – это включает в себя дизайн заднего фона, шрифты, изображения, цвета и так далее.
Как Вы Можете Подключить CSS Стили к Странице?
Всего существует три способа применить стили с помощью CSS.
Использование команды link является самым распространённым методом – вы просто загружаете другой CSS-файл (с его атрибутами) в тот, над которым вы работаете в данный момент. Это удобно, так как позволяет использовать один и тот же файл множество раз.
Вы можете использовать атрибут стиля, если вы хотите изменить только один элемент (для этого вы будете использовать атрибут стиля на одной с элементом строке) или просто использовать стиль поверх файла HTML, где находится хедер.
Сколько Существует Типов CSS?
Всего существуетпятьтипов CSS: CSS 1, CSS 2, CSS 2.1, CSS 3 и CSS 4.
Что Такое CSS Фреймворк?
В CSSфреймворкиявляются простыми библиотеками с предварительно написанным кодом, который может быть использован в дизайне сайтов. Они полезны в том случае, когда сайту необходимо какая стандартная деталь дизайна.
Что Такое Таргетирование Элементов?
Таргетирование элементов — это когда вы указываете определённые элементы, которые хотите стилизовать или изменить каким-либо способом. В целом, вы можете сделать этотремяспособами: С помощьютегов, классаилиидентификатораэлемента, который вы указали в коде HTML.
Как Указать Цвет в CSS? Сколько способов указания цвета?
Существуетдваспособа указания цвета в CSS –RGBишестнадцатеричный код цвета.
RGBявляется аббревиатурой для “red, green, blue” (красный, зелёный, синий). Различные комбинации этих цветов (в зависимости от процента их использования) могут иметь множество разных оттенков.
Шестнадцатеричный код цвета— это код, являющийся буквенно цифровым представлением определённого цвета. Эти коды состоят из комбинации шести различных букв и цифр (каждая из которых представляет определённый цвет).
Что Такое Псевдо Элементы?
Если представить, что ваш элемент был абзацем текста, но вы хотели бы стилизовать только первую букву этого абзаца, то вам пришлось бы использоватьпсевдо элементдля этой задачи.
Эти элементы используются путем размещения двойного двоеточия перед частью основного элемента, который вы хотите стилизовать.
Что Такое Псевдо Классы?
Псевдо классы используются так же как псевдо элементы, но имеют одно особенное отличие. Они изменяют внешний вид элемента тогда, когда он находится в определённом состоянии.
К примеру, когда вы наводите курсор мыши на кнопку и она подсвечивается или выделяется каким-либо другим образом. Это является работой псевдо классов
Как Вы Можете Интегрировать CSS На Ваш Сайт?
строчная, встраиваемаяиимпортируемаяинтеграция.
Строчныйметод интеграции используется для вставки CSS-кода в HTML документ.
Встраиваемыйпозволяет вставить уникальные стили в одиночный документ,
тогда какимпортируемыйметод позволяет вносить изменения в несколько документов.
Объясните Концепт Специфичности.
Сам по себе концепт подразумевает, что определённые CSS-правила заменяют (перезаписывают) другие будучи более специфичными. Это немного запутанный концепт, так как часто вызывает множество проблем – применение слишком большого количества специфичных типов правил может значительно усложнить процесс внесения изменений после окончания работы на над ними.
Всего существуеттриуровня специфичности –тип, классиID.Тип селектора имеет самую низкую специфичность, тогда как ID самую высокую.
Объясните Шрифты Web-safe и Fallback.
Когда вы пытаетесь подобрать шрифт для вашего сайта, то вы должны учесть, что не каждый браузер может воспринимать различные шрифты – это именно тот случай, когда на помощь приходятweb-safe(безопасные) шрифты. Эти шрифты часто используются и известны каждому.
В качестве примера можно привести Times New Roman, Arial или Calibri.
Если по какой-то причине ваш браузер не воспринимает эти шрифты, то для этого существуютfallbackшрифты – это шрифты, которые браузер выберет для вас автоматически.
Что Такое Разбиение Файла?
позволяют вам разбивать большие файлы на более мелкие части, чтобы помочь программе работать быстрее и плавнее. Дляразбиения файлавам может потребоваться препроцессор CSS.
Файлы могут быть разбиты любым необходимым вам способом, но рекомендуется подойти к этому вопросу с умом. Так как излишнее количество файлов может привести к обратному эффекту.
Что Такое Непрозрачность?
Непрозрачностьявляется уровнем прозрачности вашего элемента в CSS.
как можно настроить непрозрачность с помощью CSS. Отличным примером для этого будет данный код:
div {
background: rgb(136, 66, 213);
padding: 10px;
}
Дайте Определение Набору Правил.
В CSSнабор правилсостоит из блоков объявления, которые следуют за определёнными селекторами набора. Эти наборы правил сообщают серверу о том, как должен выглядеть определенный документ.
Дайте Определение Универсальному Селектору и Приведите Пример.
Универсальные селекторы— это селекторы, которые позволяют вам выбрать все файлы с одинаковым именем (вне зависимости от того, какой это тип элемента), вместо выбора конкретно типизированных.
Примером универсального селектора будет:
- {
color: red; /* changes the color of all elements to red /
background: blue; / changes the background of all elements to blue */
}
Что Выбирают Селекторы ID и Класса?
Селекторклассавыберет весь блок информации.
Селектор ID выберет лишь определённый элемент, обладающий уникальным типом числа ID.
Что Такое Float в CSS?
Свойство float позволяет вам перемещать изображения по тексту в вашем HTML-документе, при это не перекрывая его, текст может обтекать изображение.
Что Такое Z Индекс?
Индекс Zв CSS выделяет любые части, которые пересекаются между вашим файлом стилей CSS и реальным документом HTML. Так как пересечение является распространённой проблемой при стилизации и изменении изображений в CSS, то он является очень полезным.
Почему Необходимо Использовать Import Вверху Файла?
Import чаще всего используется в верхней части файла, поскольку существует большой риск перезаписи уже существующих наборов правил. Размещая import сверху, в большинстве случаев этой проблемы можно избежать.
Что такое Flexbox?
Flexbox — это гибкий макет. Он используется для позиционирования элементов и распределения пространства внутри контейнера.
Это пригодится, когда вам нужно создать адаптивный веб-дизайн
Расскажите о стилизации SVG
Стилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства отличаются по названию. Fill вместо background-color, stroke вместо border и т.д.
Изображение в формате SVG можно стилизовать в SVG-разметке, а также в CSS файлах. Если вы используете SVG-спрайты, то стилизовать svg можно только в разметке. Также не получится динамически изменить свойства SVG js-ом.
Что делает * { box-sizing: border-box; ? В чём его преимущества?
По умолчанию все элементы имеют box-sizing: content-box. Размеры блока рассчитываются из размеров контента.
box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт.
Высота будет состоять из: высота контента + вертикальные padding’и + ширина вертикальных border.
Ширина будет состоять из: ширина контента + горизонтальные padding’и + ширина горизонтальных border.
Объясните, что такое плавающие элементы (floats) и как они работают.
При применении этого свойства происходит следующее:
1) Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float.
2) Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3) Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4) Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.
Можете ли вы привести пример свойства @media, отличного от screen?
Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевые браузеры, устройства Брайля, телевизоры и так далее.
all - Подходит для всех устройств.
print - Для принтеров.
screen - Предназначен в первую очередь для цветных компьютерных экранов.
speech - Предназначен для синтезаторов речи.
используем атрибут align.
