Учебник CSS

Базовые понятия и алгоритм использования правил стилей CSS для создания и редактирования элементов вебстраниц.

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня мы продолжаем тему каскадных таблиц стилей и в очередном уроке из «Учебника» рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.

На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.

Конечно, во многих случаях не обойтись без задания конкретных размеров области посредством width и height (ширины и высоты блока), которые могут принимать значения, выраженные в различных единицах измерения. В общем, рассмотрим ниже примеры действия свойства оверфлоу во всех возможных вариантах.

ЧИТАТЬ ДАЛЬШЕ

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства - block, inline и none. Естественно, все это будет рассмотрено на живых примерах, куда же без этого.

Данное средство каскадных таблиц стилей дает возможность без вмешательства в HTML код задавать тип отображения элементов на странице. Я уже писал о том, что наиболее популярные HTML теги подразделяются на блочные и строчные. Однако, на самом деле типов, определяющих вид того или иного элемента на странице, гораздо больше.

Мы разберем на конкретных практических примерах превращение строчных вебэлементов в блочные и в обратном порядке, а также посмотрим, как можно реализовать динамический эффект посредством чистого CSS с помощью display none без использования скриптов.

Кроме этого, попробуем создать списки на основе блочных вэбэлементов, используя list-item. Все эти изыскания имеют вполне конкретную и реальную сферу применения, поэтому такой практикум трудно переоценить. В общем, приступаем.

ЧИТАТЬ ДАЛЬШЕ

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! После весьма существенного перерыва я решил продолжить тему изучения CSS и сегодняшняя статья будет посвящена созданию плавающих элементов посредством float, на практических примерах рассмотрим действие данного правила вкупе со свойством clear для создания колонок и горизонтального меню.

Для непосвященных, думаю, правильнее будет для начала ознакомиться с другими материалами по каскадным таблицам стилей. Напомню, что все статьи на данную тему находятся в разделе «Учебник CSS», в котором вы сможете почерпнуть необходимую информацию.

Плавающие элементы встречаются также в HTML при необходимости создать обтекание тех же изображений текстом (атрибут align тега img с параметрами left и right). Так что этот аспект весьма популярен при разработке содержания вебстраниц.

На протяжении сегодняшней публикации разберем действия правила float (left, right, none) и clear в том числе применительно к тегам DIV и SPAN, которые являются основой при блочной верстке. Конечно, на современном этапе подавляющее большинство использует при создании сайта прогрессивные CMS (в частности, WordPress). Однако, поверьте, что знания основ стилей и языка гипертекстовой разметки сослужат вам добрую службу в дальнейшем.

ЧИТАТЬ ДАЛЬШЕ

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Время от времени я позволяю себе добавлять материалы в копилку уроков CSS и сегодня мы поговорим о свойстве z-index, которое влияет на позиционирование элементов на вебстранице.

Надо понимать, что данное правило работает только в отношении позиционированных тегов, для которых прописано свойство position со значениями absolute, relative и fixed. То есть для стандартного потока документа (где позиционирование не задано или его параметр определен как static) оно действовать не будет. Ниже я продемонстрирую работу z-index на конкретном примере.

ЧИТАТЬ ДАЛЬШЕ

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настало время дополнить «Учебник CSS» новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования position с различными параметрами (static, relative, absolute, fixed).

Также в рамках озвученной выше темы рассмотрим, как можно задавать тот или иной отступ вправо, влево, вверх или вниз посредством использования соответствующих свойств left, right, top и bottom путем присвоения им нужных числовых значений.

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

ЧИТАТЬ ДАЛЬШЕ