CSS Flashcards
Единицы измерения css
Мы рассмотрели единицы измерения:
px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: “x”(ex) и “0”(ch), используется там, где нужно упростить масштабирование компоненты.
rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
% – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
vw, vh, vmin, vmax – относительно размера экрана.
Анимация css
@keyframes go-left-right { /* объявляем имя анимации: “go-left-right” /
from { left: 0px; } / от: left: 0px /
to { left: calc(100% - 50px); } / до: left: 100%-50px */
}
.progress {
animation: go-left-right 3s infinite alternate;
/* применить анимацию “go-left-right” на элементе
продолжительностью 3 секунды
количество раз: бесконечно (infinite)
менять направление анимации каждый раз (alternate)
*/
position: relative; border: 2px solid green; width: 50px; height: 20px; background: lime; }
Селекторы CSS
В CSS-селекторы используются для стилизации HTML элементов на веб-странице.
Разные типы селекторов имеют разный приоритет.
Селектор по тегу: 1
Селектор по классу (html атрибуты): 10
Селектор по ID: 100
Inline-стиль: 1000
!important - служит для того чтобы применить этот стиль игнорируя приоритеты
Комбинаторы
Комбинаторы - Это селекторы, которые позволяют соединить другие селекторы между собой
(“ “) - Селектор потомка — позволяет соединить дочерний селектор
’>’ - выберет только дочерние элементы , которые находятся внутри, на первом уровне вложенности
Комбинатор ‘~’ выбирает элементы, которые находятся на этом же уровне вложенности.
Position
position указывает, как элемент позиционируется в документе
static, relativ - позицианирует элемент в основном потоке. static по дефолту, relativ используется как контейнер для элементов, у которых позиционирование является absolute
absolute - позиционирование вырывается из основноко потока. Начальное позиционирование берется от родительского элемента
fixed - позиционирование вырывается из основноко потока. Позиционируется относитьельно окна браузера. при прокрутке страницы позиционирование жтого элемента фиксированно
sticky - позиционирование вырывается из основноко потока. Похож на fixed но отличается тем что скролится с элементами при скролинге страницы
кроме static можем применять css свойства top bottom z-index
Псевдоклассы, псевдоелементы
Псевдоэдементы - в основном
::before
::after
::placeholder
Псевдоэдементы - можно использовать для добавления стилей или какого-либо контента
Псевдоклассы -
:hover
:first-child
:last-child
Псевдоклассы - это селектор, который выбирает элементы, находящиеся в специфическом состоянии.
SASS, LESS
Это CSS-препроцеcсоры.
метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода.
Добавляют в код переменные (например использовать для цветов, размера экрана), Миксины (Это повторяющиеся участки кода, которые можно включать в различные селекторы)
Styled-components
Это написание css в js.
можно прокидывать пропсы и в зависимости от них применять определенные стили css.
Мне не нравится, тк не понятно это стиль или компонента, нету подсветки css разметки в ide и автозаполнения.
Tailwind
Это то же что и bootstrap.
Есть какие-то классы, подключаешь эти стили к html компонентам.
В результате ухудшает читаемость.
Мне не нравится, мне лучше разделить код со стилями отдельно с элементами отдельно
CSS container queries
- При использовании container queries мы даем элементам возможность менять свои стили в зависимости от размера их контейнера , а не области просмотра (@media (max-width))
- Они более пригодны для повторного использования, чем медиа-запросы, поскольку ведут себя одинаково, независимо от того, где они используются. Таким образом, если вы создадите компонент, включающий container queries, вы можете легко перенести его в другой проект, и он все равно будет вести себя тем же предсказуемым образом.
Пример:
.parent {
container-name: hero-banner;
container-type: inline-size;
}
.child {
display: flex;
flex-direction: column;
}
@container hero-banner (width > 60ch) {
/* Change the flex direction of the .child element. */
.child {
flex-direction: row;
}
}
Медиазапросы
Медиа-запросы позволяют применять стили CSS в зависимости от типа устройства (например, принтер или экран) или других функций или характеристик, таких как разрешение или ориентация экрана, соотношение сторон , ширина или высота области просмотра браузера
@media (max-width: 1250px) {
/* … */
}
модули css
это CSS-файлы, в которых имена классов, анимации и медиа-запросов по умолчанию локализованы.
:where
:where() — это функциональный селектор CSS, который принимает список селекторов в качестве аргумента и применяет заданные стили к любому элементу из этого списка.
header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoration: underline;
}
:where(header, main, footer) a:hover {
color: red;
text-decoration: underline;
}
