| Kosten | Среда, 27 Декабря 2017, 22:37 | Сообщение 1 |
| Это для абсолютных новичков, кто решил создать веб сайт или варится в этом теме. Как только вы узнаете как работает модель коробки и как плавать эти поля, то пришло время серьезно относиться к CSS. С этой целью мы собрали массивный список советов или случайные приемы, чтобы помочь вам построить дизайн, который вы хотите.
Абсолютное позиционирование
Если вы хотите контролировать где элемент постоянно живет на нашем веб-сайте, абсолютное позиционирование это ключ к тому, чтобы это произошло. Если вы считаете, что ваш браузер как один большой ограничивающий прямоугольник, абсолютное позиционирование позволяет вам точно контролировать, где в этом поле элемент останется. Используйте верхний, правый, нижний и левый, сопровождаемые значением пикселя, чтобы контролировать где находится элемент.
Код position:absolute;
top:20px;
right:20px
CSS выше устанавливает положение элемента, чтобы он оставался 20px с верхнего и правого краев вашего браузера. Вы также можете использовать абсолютное позиционирование внутри div.
Как в css переопределить стиль
Это следует использовать экономно, потому что, если вы сделаете это ради всего, вы окажетесь в беде в конечном итоге. Однако, если вы хотите переопределить другой стиль CSS для определенного элемента.
Например, если бы захотели чтобы заголовки H2 в определенном разделе своего сайта были красными, а не синими или другим цветом, то здесь нужно использовать следующий CSS.
Код .section h2 { color:red !important; }
Эффекты наведения
Это используется для кнопок или текстовых ссылок, также для разделов вашего сайта, разных значков и многое другое, где присутствуют элементы. Если вы хотите что-то изменить, пример оттенок цвета, это как пример при наведение курсора, чтоб изменялась палитра, то нужно использовать тот же CSS
Вот пример:
Код .zornet_ru h2{
font-size:36px;
color:#000;
font-weight:800;
}
.zornet_ru h2:hover{
color:#f00;
}
Это делает изменение цвета вашего тега h2 от черного до красного, когда вы просто навели на текст или кнопку курсор. Самое замечательное в использовании: hover заключается в том, что вам не нужно снова объявлять размер шрифта. Он изменяет только на то, что вы указываете изначально.
Для эффектов зависания, как например работа с меню или изображением на вашем сайте. Где вы не хотите чтобы цвета быстро переключался или изменялся до конечного результата. А точнее хотите в идеале хотите постепенно ослабить изменения.
Код .zornet_ru h2:hover{
color:#f00;
transition: all 0.3s ease;
}
Это приводит к тому, что изменение происходит за 0,3 секунды, вместо того, что всегда делают на мгновенному переходу. Это делает эффект наведения более приятным для глаз и менее резким.
Простое изменение размеров изображений
Иногда нужно сделать так, где изображения должны соответствовать определенной ширине, а масштабирование должно быть пропорциональным. Легкий способ сделать это использовать максимальную ширину для обработки этого.
Вот пример:
Код img {
max-width:100%;
height:auto;
}
Это означает, что наибольшее изображение может когда-либо быть на 100%, а высота автоматически рассчитывается на основе ширины изображения. В некоторых случаях также можно в ручном режиме придать указывать ширину на 100%.
Управлять элементами секции на CSS
Используя пример изображения выше, если вы хотите только настроить таргетинг на изображения определенного раздела, например свой блог, используйте класс для раздела блога и объедините его с фактическим селектором. Это позволит вам выбирать только изображения раздела блога, а не другие изображения, такие как логотип или значки социальных сетей, что также идет изображения в любых других разделах вашего сайта, например на боковой панели.
Вот как выглядит CSS:
Код .blog img{
max-width:100%;
height:auto;
}
Простое изменение размеров изображений
Иногда нужно сделать так, где изображения должны соответствовать определенной ширине, а масштабирование должно быть пропорциональным. Легкий способ сделать это использовать максимальную ширину для обработки этого.
Вот пример:
img {
max-width:100%;
height:auto;
}
Это означает, что наибольшее изображение может когда-либо быть на 100%, а высота автоматически рассчитывается на основе ширины изображения. В некоторых случаях также можно в ручном режиме придать указывать ширину на 100%.
Управлять элементами секции на CSS
Используя пример изображения выше, если вы хотите только настроить размер на изображения определенного раздела, например свой блог, используйте класс для раздела блога и объедините его с фактическим селектором.
Это позволит вам выбирать только изображения раздела блога, а не другие изображения, такие как логотип или значки социальных сетей, что также идет изображения в любых других разделах вашего сайта, например на боковой панели.
Вот как выглядит CSS:
Код .blog img{
max-width:100%;
height:auto;
}
Как применить несколько классов в CSS
Предположим вы хотели добавить идентичную рамку вокруг всех изображений или раздела блога и боковой панели. Вам не нужно выписывать один и тот же точный CSS 3 раза. Просто перечислите эти элементы, разделенные запятыми.
Вот пример
Код .blog, img, .sidebar {
border: 1px solid #000;
}
Независимо от того, что вы узнаете, но CSS это один из тех необходимых, но сложных навыков которыми вы должны овладеть.
| | Страна: (RU) |
| |
