Tel: +372 5596 5762
e-mail: info@digipo.eu

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

CSS стили поддерживаются всеми браузерами. С помощью 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 для специфицирования свойств выбранных элементов. Допустим надо изменить цвет определенного заголовка или пункта меню или группы меню.

Подробнее: Class и Id

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

Подробнее: Группирование элементов (span и div)

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

Подробнее: Поля и отступы

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

Подробнее: Border (рамки)

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

  • width
  • height

Подробнее: Height (высота) и Width (ширина)

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

Подробнее: Курсоры

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

Подробнее: Float (поплавки)

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

Подробнее: Позиционирование

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

Подробнее: Знакомство с CSS 3

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

Подробнее: Свойства текста

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

Полностью прозрачный рисунок Почти совсем прозрачный 0.05 Прозрачность рисунка .3 да, ноль писать вовсе не обязательно Полупрозрачный рисунок Прозрачность рисунка может быть заданна очень точно 0.874 Непрозрачный вовсе

Подробнее: Прозрачность

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

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

Подробнее: Цвет в CSS3

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

Подробнее: Фон в CSS 3