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 - Предназначен для синтезаторов речи.
В чём разница между строчным и блочно-строчным элементом?
block
- Начинается с новой строки родительского элемента и занимает всю строку.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.
inline-block
- Размер зависит от контента.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.
inline
- Размер зависит от контента.
- Ширину и высоту задавать нельзя.
- Можно выровнять только по горизонтали. Место, которое занимает элемент по вертикали, зависит от line-height.
- Ведёт себя как блочный элемент, если задать вертикальные margins и paddings.
Как вы реализуете макет, который использует нестандартные шрифты?
Буду подключать шрифты с помощью @font-face для каждого font-weight.
каскадность v CSS
каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.
p {
font-size: 24px;
}
.text-bold {
font-weight: bold;
}
.text-dark {
color: #333333;
}
Итоговыми стилями для нашего параграфа будут:
{
font-size: 24px;
font-weight: bold;
color: #333333;
}
каскад — процесс, с помощью которого упорядочиваются конфликтующие объявления.
некоторые из наиболее распространённых типов селекторов
ID селектор - #my-id
Селектор класса - .my-class
Селектор атрибута - Элемент(ы) на странице с указанным атрибутом - img[src]
Селектор псевдокласса a:hover - Выбирает <a>, но только тогда, когда указатель мыши наведён на ссылку.</a>
@media query
Сайты, которые мы создаём сейчас, отзывчивы: они адаптируются к типу устройства, ориентации экрана и разрешению.
Правила Media query удивительно просты в использовании – всё, что вам нужно, заключить стили CSS в блок с правилом @media. Каждый блок @media активируется, когда соблюдается одно или более условий.
Что такое директива?
Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.
Директива — это оператор CSS. Она начинается знаком @ и является какой-то командой или установкой. Например, часто применяются директивы:
@charset (задает кодировку символов),
@import (позволяет включать одни таблицы стилей в другие) и
@media (задает имена устройств отображения).
z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
z-index: число | auto | inherit
Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.
auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.
inherit указывает, что оно наследуется у родителя.
Нормализация в CSS
Normalize.css — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это современная, готовая к HTML5 альтернатива традиционному reset.css.
Цели normalize.css:
- сохранять полезные настройки браузера, а не стирать их;
- нормализовать стили для широкого круга HTML-элементов;
- корректировать ошибки и основные несоответствия браузера;
- совершенствовать юзабилити незаметными улучшениями;
- объяснять код, используя комментарии и детальную документацию.
Принцип DRY
Принцип DRY (Don`t repeat yourself, рус. не повторяйся) также может быть применён к CSS. Дублирование в CSS может привести к раздутию кода, ненужными переопределениям, ухудшению поддерживаемости и т.п. Эта проблема может быть исправлена с помощью надлежащего структурирования кода и наличия качественной документации.
Три ключевых принципа хорошего кода DRY, KISS, YAGNI
Когда мы описываем свойства (in head) при помощи teg: style и teg: link. Какие свойства применяться? какой приоритет выше?
style
Что такое префикс?
если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причин для появления префиксов было достаточно много:
- Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
- Для решения проблем с кроссбраузерностью.
- Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Выберите все псевдоэлементы
\:last-child \:first \:after \:before \:active
:before
:after
Выберите всё что является псевдоклассами
\:first-line \:hover \:focus \:after \:first-child
:focus
:hover
:first-child
Какие параметры анимации можно установить используя transition?
Продолжительность
Задержка анимации
Скоростью воспроизведения (даже в зависимости от временного промежутка)
Что такое миксины в scss
По сути просто функции в которые можно вынести какие-то блоки стилей
Можно ли унаследовать (расширить) какой-то класс в scss?
Да, с помощью директивы @extend
В чём отличие псевдоклассов от псевдоэлементов?
Ключевое отличие между ними в том, чтопсевдоклассыопределяют именно состояние элементов, которые уже существуют на странице,
апсевдоэлементысоздают области (искусственные элементы), которых изначально на веб-странице не было.
Но и те и другие отсутствуют в исходном коде документа.
Как выделить цитату в тексте, с помощью какого тега?
В HTML существует несколько тегов для обозначения цитат:
‘blockquote’ предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
‘q’ предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
‘cite’ используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.
Все же есть один способ подписать цитату так, чтобы семантические божества были довольны: вы можете поместить тег ‘blockquote’ внутрь тег ‘figure’. А следом можно поместить имя автора и источник (окруженный тегами ‘cite’) в тег ‘figcaption’. (https://techrocks.ru/2019/12/11/quoting-in-html/)
Как выровнять текст по обоим краям?
В параграфе <p> используем атрибут align.</p>
Какие есть атрибуты у тега “img”?
src - путь к изображению, обязательный;
alt - альтер.текст, обязательный;
width, height - размеры картинки;
title - текст выплыв.подсказки;
align - выравнивание (left, right, bottom, middle, top);
hspace, vspace - гориз. и вертик. расстояние/отступы между текстом и картинкой.
Как выровнять картинку по центру?
Обернуть img в тег ‘p’ и применить атрибут align=”center”
Что значит атрибут “target” у тега ‘a’?
target = “_blank” - Позволяет открыть в новом окне.
target = “_self” - по умолчанию, открыть страницу в том же окне
Как сделать так, чтоб тег ‘a’ (ссылка) давала скачать картинку?
Архивируем картинку. И когда пишем путь, указываем href=”files/5.zip”
Как сделать так, чтоб ссылка ‘a’ давала отправить письмо? открывала gmail, например
Указываем путь как href = “mailto: svetlana@gmail.com”. Указываем адрес почты того человека кому хотим отправить письмо.
Как сделать ссылку на тот же документ, допустим, ниже по тексту?
В нужном месте прописать тег ‘a’ + атрибут name=’metka’
А при указании ссылки написать: href=”#metka”
Как сделать упорядоченный список, где используются римские цифры или алфавит?
тег ‘ol’: атрибут type=’a’ или type=’A’ или type=’i’
Какой тип укажем, с той и будет начинаться список.
Если укажем type=’4’ , то начинаться список будет с 4.
Как в таблице объединить 3 столбца в одну ячейку и получить одну строку, допустим, для заголовка?
tr + th (colspan=’3’) - as head
или tr + td (colspan=’3’)
Т.е.объединили три столбца = “3”
Если хотим объединить строки, то пишем rowspan=”3”
В формах, какой тег используется, чтобы оставить сообщение или комментарий?
textarea
В формах, какой тег/и используется, чтобы сделать выпадающее меню?
select + option
В формах, поля “input”, какие есть типы?
text, password,
checkbox, radio,
reset, submit,
image, file
Что делает атрибут “action” у тега form?
action - в нем указывается URL-адрес программы, которая обрабатывает информацию переданную через форму.
Что делает атрибут “method” у тега form?
Это метод, которым передаются данные - post, get
post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
get: Соответствует GET методу; данные из формы добавляются к URI атрибута action, их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.
Как указать, чтобы анимация двигалась с начала до конца и обратно?
animation-direction: alternate;
Величина 2vw в CSS означает?
ширина 2% от видимой части окна
