Со временем CSS становится все более мощным и в настоящее время предлагает множество возможностей для создания визуально потрясающих веб-сайтов.
Эта статья представляет собой сборник свежих продвинутых советов и приемов CSS, которые помогут вам овладеть навыками веб-дизайна и интерфейсной веб-разработки. Каждый метод включает фрагмент кода, демонстрацию и пояснения.
1. Абсолютное позиционирование
Если вы хотите постоянно контролировать, где находится элемент на нашем веб-сайте, абсолютное позиционирование является ключом к этому.
.absolute {
position: absolute:
top: 20px;
right: 20 px
}2. Переопределение всех стилей
Используйте important после стиля в вашем CSS. Например, если вы хотите, чтобы заголовки h2 в определенном разделе вашего сайта были красными, а не синими, можете использовать следующий css:
.section h2 {color:red !important; }3. Центрирование любого элемента
Div (или любой другой элемент) можно центрировать, добавив к нему свойство блока, а затем используя автоматические поля. CSS будет выглядеть так, как в этом примере:
.center {
display: flex;
justify-content: center;
align-items: center;
}4. Bертикальное выравнивание (для одной строки текста)
Ключ состоит в том, чтобы сделать высоту меню и высоту строки текста одинаковой. Такую технику часто можно встретить, если занимаетесь редактированием.
.nav li {
line-height: 50 px;
height: 50 px;
}5. Hover
Анимация наведения css происходит, когда пользователь наводит курсор на элемент, и элемент отвечает движением или другим эффектом перехода.
.entry h2 {
front-size: 36px;
color: #000;
front-weight: 800; }
.entry h2: hover {
color: #f00; }6. Переход
Для эффектов наведения, таких как меню или изображения на вашем веб-сайте, вы не хотите, чтобы цвета слишком быстро привязывались к конечному результату. В идеале вы бы хотели, чтобы переход был постепенным. Для этого можете воспользоваться следующим кодом:
.entry h2: hover {
color: #f00;
transition: all 0.3s ease;
}7. Cостояния ссылок
Псевдокласс ссылки контролирует все ссылки, по которым еще не щелкнули. Посещенный псевдокласс обрабатывает стили всех ссылок, которые вы уже посетили.
а: link {
сolor: blue;
}
а: visited {
сolor: purple;
}8. Легко изменить размер изображения, для соответствия
Иногда вы попадаете в затруднительное положение, когда изображения должны соответствовать определенной ширине при пропорциональном масштабировании. Легкий способ сделать это – использовать максимальную ширину для обработки этого примера:
img {
max width: 100%;
height: auto;
}9. Плавная прокрутка
Добавить поведение прокрутки: плавно для элемента <html>, чтобы обеспечить плавную прокрутку для всей страницы (примечание: также можно добавить его в конкретный элемент/контейнер прокрутки).
html {
scroll-behaviour: smooth;
}10. Применить CSS к нескольким классам или селекторам
Допустим, вы хотите добавить идентичную рамку вокруг всех изображений, раздела блога и боковой панели. просто перечислите эти элементы через запятую. вот пример:
.blog, img, .slidebar {
border: 1px solid #000;
}11. Установить изображения в качестве курсора
При наведении указателя мыши на заголовок, вместо курсора будет отображаться картинка вместо курсора.
header {
cursor: url (imagecursor.png), auto;
}12. Заставить текст быть полностью строчными, заглавными или капсом
Свойство text-transform в css управляет регистром текста и заглавными буквами.
h2 {
text-transforms: uppercase; /* makes all to lowercase. */
}
h2 {
text-transform: lowercase; /* makes all letter uppercase. */
}
h2 {
text-transform: capitalize; /* capitalize the first letter of word. */
}13. Direct children
Если вы только начинаете использовать CSS, это сэкономит вам много времени. Используйте >, чтобы выбрать direct children элемента. Например:
#footer>a
14. Kонкретный дочерний элемент
Это удобно, когда вы составляете списки. вам просто нужно посчитать, сколько предметов в элементе вы хотите стилизовать, а затем применить стиль.
li:nth-child(2) {
font-weight: 800;
color-blue;
text-decoration: underline;
}
