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);
