Доброго времени суток!

Туториалы CSS кодирования

Категории:

Class'ы блоков

Фон

Оформление

Детали

Ништяки

Инструкции по сайту

Как работать с 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

Самоучитель CSS кодов

Онлайн палитра 

Онлайн хостинг картинок 

Спасибо Тазику, Satan и Yanhe за помощь в освоении CSS

Менеджер: Akira
 

P.S. Код, который не позволяет обрезать длинные записи в дневниках 

.post_text {max-height: none !important};

by @narutowannasuck