CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей позволяющий определять отображения HTML документа. Так как HTML используется для создания структуры документа, то CSS используется для форматирования содержимого структуры HTML. Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML.

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

Подробнее

В этом уроке изучим, как использовать цвета и фон на ваших web-сайтах. Рассмотрим продвинутые методы позиционирования и управления фоновым изображением.

В уроке будут использованы CSS-свойства:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Перед тем как перейти непосредственно к обучению, проведу краткий экскурс на тему: "Цвета в Интернете"

Подробнее

Ниже приведена цветовая палитра для использования в интернете.

Подробнее

Рассмотрим варианты работы со шрифтами, а так же вопрос отображения уникального шрифта на выбранном на web-сайте.

В уроке используются следующие параметры CSS:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Подробнее

Рассмотри варианты форматирования и установки стиля текста, так как это ключевая проблема для любого web-дизайнера. В этом уроке будут рассмотрены следующие свойства:

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

Подробнее

В этом уроке мы рассмотри работу со ссылками, посмотрим параметры для активных и не активных ссылок. Так же к ссылкам можно применять все параметры, что мы рассматривали в предыдущих уроках. Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.

Подробнее

Рассмотрим работу со списками с помощью свойств CSS.  В CSS данную задачу берёт на себя свойство: list-style-type, которое в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта".

Подробнее

Идентификация и группирование элементов (class и id).
Когда нужно применить оригинальный стиль к определенным элементам сайта используется class и id для специфицирования свойств выбранных элементов. Допустим надо изменить цвет определенного заголовка или пункта меню или группы меню.

Подробнее

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.
В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.
Группирование с помощью <span>
Группирование с помощью <div>

Подробнее

В этой главе мы поговорим о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

Подробнее

В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку.
В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого элемента выводимого на экран.

Подробнее

До сих пор мы особо не заботились о размерах элементов, с которыми работали. В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.

• width
• height

Подробнее

Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка, то есть когда пользователь наведет курсор на такой элемент он поменяет свой вид.
Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, ani или svg.

Подробнее

Float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим". Элемент может "всплывать" вправо или влево с помощью свойства. Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.
Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Подробнее

Позиционирование – это конкретное месторасположение определенного объекта или бокса на странице веб сайта.

Подробнее

CSS 3 - которая имеет целый ряд интересных свойств не вошедших в предыдущую версию спецификации CSS. И сразу же стоит отметить, что в данный момент официально спецификация CSS 3 ещё находится в разработке – то есть этот документ ещё не утверждён и пока имеет лишь черновой вариант, однако, несмотря на этот факт CSS 3 уже широко используется вебмастерами и поддерживается современными браузерами.

Подробнее

Тень текста.
CSS 3 позволяет без труда имитировать тень падающую от того или иного текста. Для того что бы текст начал отбрасывать тень к нему необходимо применить свойство text-shadow с группой нужных нам значений определяющих параметры этой самой тени.

Подробнее

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Подробнее

Цвет того или иного элемента сайта может быть определён следующими способами:

• Именным значением, например: red - красный.
• Значением цвета RGB, например: RGB(255,0,0) - красный.
• Шестнадцатеричным значением цвета RGB, например: #ff0000 - красный.

Подробнее

Вставка нескольких фонов.
В СSS 3 появилась возможность одновременно использовать сразу несколько фоновых изображений для одного и того же элемента. Делается это с помощью свойства background-image указыват ьадресс картинки нужно через запятую, синтаксис такой:
background-image: url(fon1.jpg), url(fon2.jpg), url(fon3.jpg);

Подробнее