Дневники
Тесты
Сообщества
Альбомы
С чего начать?
6 лет назад от Design/CSS коды/Дизайн
Доброго времени суток!
Туториалы CSS кодирования
Категории:
Ништяки
Инструкции по сайту
Как работать с CSS кодами?
Пример простого кода
.Класс { свойство1: значение; свойство2: значение; ... }
Классы: применяют, когда необходимо определить стиль для индивидуального контейнера веб-страницы.
Свойство: применяются для пояснения что конкретно вы хотите изменить/добавить в контейнере.
Значение: применяется для придания определенного вида свойству контейнера.
Как определить класс?
Выбираем элемент который мы хотим изменить > нажимаем правой клавишей >
> посмотреть код элемента/исследовать элемент/…
Далее открывается панель разработчика и выделяется тот элемент, который нам нужен.
Имя класса так и подписывается Class, в код нам нужно писать то, что в ковычках.
Перед классом объязательно ставим точку
Если в классе есть пробел, то его мы объязательно заменяем точкой
То есть: card mb-2 post_home >>> .card.mb-2.post_home
Давате попробуем написать код
Попробуем сделать полупрозрачный фон записи, цвет шрифта и бордюр.
1. Пишем нам необходимый класс:
.card.mb-2.post_home
2. Теперь выберем необходимые нам свойства и зададим им значения.
background-color: rgba(255, 255, 255, 0.5); - цвет фона
color: #ffffff; - цвет текста
border-style: outset; - стиль бордюра
border-width: 5px; – толщина бордюра
Соберем все вместе
.card.mb-2.post_home {
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
border-style: outset;
border-width: 5px;
}
Коды можно писать в одну строчку)
.card.mb-2.post_home {background-color: rgba(255, 255, 255, 0.5); color: #ffffff; border-style: outset; border-width: 5px;}
И главное, если что то не срабатывает , добавляем к значению !important
color: #ffffff !important;
Работаем с цветами # или rgb?
RGB (аббревиатура английских слов red, green, blue — красный, зелёный, синий) или КЗС — аддитивная цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными.
Прозрачность при RGB. Что бы сделать прозрачность фона к основным 3 буквам добавляется “a”
a – прозрачность от 0.0 до 0.9, в некоторых кодах перед точкой «0» нужно убирать
т.е. .0 - .9
rgba (255, 255, 255, 0.5)
#****** - WEB-color - представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:
две первые цифры — красный
две в середине — зелёный
две последние цифры — синий
Прозрачность при #
# имеет 6 цифр, когда мы добавляем еще 2 цифры мы задаем значение прозрачность
#45735850 от 00 до 99
Спасибо Тазику, Satan и Yanhe за помощь в освоении CSS
Менеджер: Akira
P.S. Код, который не позволяет обрезать длинные записи в дневниках
.post_text {max-height: none !important};
2114
17
