Уроки Joomla

Изучение CMS. Работа с компонентами, модулями и плагинами.

Понятие каскада CSS (наследование). Псевдоклассы. Сокращённый вариант записи. Урок 12.

Сокращённая запись CSS

Отступы (внутренние и внешние)

Возможно, вы задавались вопросом – “а нельзя ли писать CSS код в какой-то более сокращённой форме”? И таки-да, можно. Вот взять пример такого правила:

padding-left: 10px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 25px;

Но абсолютно то же самое можно записать в более сокращённом варианте:

padding: 20px 15px 25px 15px;

Для лучшего запоминания проще представить это всё как стрелки часов. Начинаем с 12 часов (отступ вверх) и далее двигаемся по часовой стрелке. К слову, данный принцип так же работает и для свойства margin.

Продолжаем изучать селекторы. Элемент div и кое-что ещё о блочной вёрстке. Урок 11

В этом уроке я постараюсь дополнить ваши познания в области CSS, продолжая разбирать различные способы для выборки тех или иных элементов, которые мы сейчас и рассмотрим. К тому же, мы рассмотрим некоторые аспекты в работе с блочной моделью и некоторые свойства, применительно к ней.

Продвигаемся чуть дальше - изучаем "блочную модель". Урок 10

Этот урок получился несколько объёмным. А всё дело в том, что мы приступаем к изучению такой важной темы, как «блочная модель». Почему она важная? Потому что проливает свет на многие аспекты того, что раньше вам могло казаться не очень понятным, в частности, почему элементы отображаются в браузере именно так, а не иначе. Более того, прочтение данной темы – ключ к тому, что впоследствии послужит вам отличным подспорьем в изучении вёрстки с нуля.

Разбираемся с шестнадцатеричными цветами в HTML. Урок 9

Сегодня мы поговорим о том, по какому принципу компьютер понимает, какой цвет нужно отобразить в данный момент на экран. Вы наверное уже обратили внимание, что цвета обычно задаются с помощью шестнадцатеричного кода следующим образом:  

color: #abсс33;

Но чтобы разобрать эту запись, нужно прежде всего понять в соответствии с какой цветовой схемой монитор показывает нам цвета и как получает нужный. А происходит это путём смешивания трёх цветов – Red (красный), Green (зелёный) и Blue (синий) в определённой пропорции. Отсюда и само название цветовой схемы – RGB.

Работа с шрифтами. Задание размера, начертания и настройка отображения. Урок 8

В этом уроке мне хотелось бы рассказать про шрифты более подробно. С базовыми CSS правилами, которые используются для оформления шрифтов, такими как font-family, color и font-size вы уже должны быть знакомы по предыдущим урокам. Сейчас мы будем рассматривать и остальные свойства.

font-weight

Отвечает за придание тексту полужирного начертания. Используется, если необходимо выделить какую-то часть информации, для акцентирования на ней внимания читателя.

Пример использования:

font-weight: bold;  – полужирное начертание,

font-weight: normal; - начертание по умолчанию, то есть обычный текст.