Знакомство с CSS

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

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

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

Поля и отступы

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

Border (рамки)

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

Height (высота) и Width (ширина)

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

  • width
  • height

Курсоры

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

Float (поплавки)

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

Позиционирование

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

Знакомство с CSS 3

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

Свойства текста

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

Прозрачность

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

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

Цвет в CSS3

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

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

Фон в CSS 3

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

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ. Мы предлагаем фотопечать на различной поверхности, изготовление наклеек, roll-up стендов, создание диазйна и другой рекламной продукции. В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами с 8:00 до 19:00 по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu