Привет всем, я хотел бы дать всем новичкам CSS несколько приемов CSS, которые помогут улучшить их разработку. Как только вы узнали, как работает блочная модель и как перемещать эти боксы, пришло время серьезно заняться своим CSS. Я перечислил несколько советов, приемов, приемов и случайных грязных приемов, которые помогут вам создать дизайн, который вы хотите.
1. Абсолютное позиционирование
Если вы хотите постоянно контролировать расположение элемента на нашем веб-сайте, абсолютное позиционирование — это ключ к тому, чтобы это произошло. Если вы думаете о своем браузере как об одной большой ограничивающей рамке, абсолютное позиционирование позволяет вам точно контролировать, где именно в этой рамке останется элемент. Используйте верхний, правый, нижний и левый элементы, сопровождаемые значением в пикселях, чтобы контролировать, где остается элемент.
postistion: absolute; top:30px; right:30px;
2. глобальный → ( * ) + селектор
* позволяет выбрать все элементы определенного селектора. Например, если вы использовали *p, а затем добавили к нему стили CSS, это будет сделано для всех элементов в вашем документе с помощью тега ‹p›. Это позволяет легко ориентироваться на части вашего веб-сайта по всему миру.
3. Центрирование
Центрировать сложно, потому что это зависит от того, что вы пытаетесь центрировать. Давайте взглянем на CSS элементов, которые нужно центрировать, в зависимости от содержимого.
- Текст
Текст выравнивается по центру с помощью text-align:center;. Если вы хотите, чтобы это было с любой стороны, используйте левое или правое вместо центра.
- Контент
div (или любой другой элемент) можно центрировать, добавив к нему свойство блока, а затем используя автоматические поля. CSS будет выглядеть так:
#div {
display: block;
margin: auto;
width: anything under 100%
}Причина, по которой я поставил «все, что меньше 100%» для ширины, заключается в том, что если бы она была шириной 100%, то она была бы полной ширины и не нуждалась бы в центрировании. Лучше всего иметь фиксированную ширину, например 60% или 550 пикселей и т. д.
4. Выравнивание по вертикали (для одной строки текста)
Вы будете использовать это в меню навигации CSS, я почти гарантирую это. Ключ в том, чтобы сделать высоту меню и высоту строки текста одинаковыми. Я часто вижу эту технику, когда возвращаюсь и редактирую существующие веб-сайты для клиентов.
.nav li{
line-height:50px;
height:50px;
}5. Эффекты наведения
Это используется для кнопок, текстовых ссылок, основных разделов вашего сайта, значков и многого другого. Если вы хотите, чтобы что-то меняло цвет, когда кто-то наводит на него указатель мыши, используйте тот же CSS, но добавьте к нему :hover и измените стиль. Вот пример:
.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}
.entry h2:hover{
color:#f00;
}Это меняет цвет вашего тега h2 с черного на красный, когда кто-то наводит на него курсор. Самое замечательное в использовании :hover заключается в том, что вам не нужно снова объявлять размер или вес шрифта, если они не меняются. Меняется только то, что вы указываете.
- ПЕРЕХОД
Для эффектов наведения, таких как меню или изображения на вашем веб-сайте, вы не хотите, чтобы цвета слишком быстро привязывались к конечному результату. В идеале вы хотите облегчить изменение постепенно, и именно здесь в игру вступает свойство перехода.
.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}Это приводит к тому, что изменение происходит в течение 0,3 секунды, а не просто мгновенно становится красным. Это делает эффект наведения более приятным для глаз и менее раздражающим.
6. Состояния ссылки
Многие дизайнеры пропускают эти стили, и это действительно вызывает проблемы с удобством использования у ваших посетителей. Псевдокласс :link управляет всеми ссылками, по которым еще не нажимали. Псевдокласс :visited обрабатывает стиль всех ссылок, которые вы уже посетили. Это сообщает посетителям веб-сайта, где они уже были на вашем сайте, а где им еще предстоит изучить.
a:link { color: blue; }
a:visited { color: purple; }
7. Управляйте элементами раздела
Используя приведенный выше пример изображения, если вы хотите настроить таргетинг только на изображения определенного раздела, например вашего блога, используйте класс для раздела блога и объедините его с фактическим селектором. Это позволит вам выбирать только изображения раздела блога, а не другие изображения, такие как ваш логотип или значки социальных сетей, или изображения в любых других разделах вашего сайта, например, на боковой панели. Вот как будет выглядеть CSS:
.blog img{
max-width:100%;
height:auto;
}8. Легко изменяйте размер изображений по размеру
Иногда вы попадаете в затруднительное положение, когда изображения должны соответствовать определенной ширине при пропорциональном масштабировании. Простой способ сделать это - использовать max width для обработки этого. Вот пример:
img {
max-width:100%;
height:auto;
}Это означает, что самое большое изображение, которое когда-либо могло быть, составляет 100%, а высота автоматически рассчитывается на основе ширины изображения. В некоторых случаях вам, возможно, придется также указать ширину на 100%.
9. Примените CSS к нескольким классам или селекторам
Допустим, вы хотите добавить одинаковую рамку вокруг всех изображений, раздела блога и боковой панели. Вам не нужно писать один и тот же CSS 3 раза. Просто перечислите эти элементы, разделенные запятыми. Вот пример:
.blog, img, .sidebar {
border: 1px solid #000;
}Независимо от того, являетесь ли вы веб-дизайнером в течение многих лет или только начинаете, изучение того, как правильно создавать веб-сайты, может показаться тернистым и бесконечным путешествием. После того, как вы определились с тем, какие языки вы хотите изучать, вам нужно выучить и усовершенствовать свои навыки.
Независимо от того, что вы изучаете, CSS — один из тех важных, но пугающих навыков, которые вам нужно освоить. Однако это не должно быть так уж сложно, особенно если вы знаете несколько удобных и малоизвестных приемов CSS для выполнения этой работы.
