Коротко об основных возможностях CSS

1. CSS

2. CSS
Появление CSS стало революцией в мире
web-дизайна
— управление отображением множества документов с помощью
одной таблицы стилей;
— более точный контроль над внешним видом страниц;
— различные представления для разных носителей информации
(экран, печать, и т. д.);
— сложная и проработанная техника дизайна.

3. Синтаксис CSS
В HTML:
<h2 style="color:#ff0000;">Заголовок</h2>
В CSS:
h2 { color:#ff0000; }

4. Синтаксис CSS
selector { property: value; }
Селектор Свойство Значение
тег, к которому объекта свойства
будет применен
стиль

5. Применение CSS
Лучший метод — создать отдельный
файл, подключенный для всех страниц
CSS

6. Color — цвет
h2 { color:#ff0000; }
Задает цвет объекта

7. Background — фон
body { background-color:#ff0000; }
Задает цвет фона

8. Background — фон
body { background-color:#ff0000; }
Задает цвет фона
body { background-image:url(image.jpg); }
Задает фоновую картинку

9. Background — фон
body { background-repeat:repeat-x; }
Задает повторение изображения

10. Background — фон
body { background-repeat:repeat-x; }
Задает повторение изображения
body { background-position:left top; }
Задает положение. По горизонту, затем по вертикали

11. Font — шрифт
p { font-family:arial, verdana, sans-serif; }
Выбирает шрифт

12. Font — шрифт
p { font-family:arial, verdana, sans-serif; }
Выбирает шрифт
p { font-style:italic; }
Определяет начертание шрифта

13. Font — шрифт
p { font-weight:bold; }
Вес шрифта. Некоторые браузеры поддерживают числовое значение

14. Font — шрифт
p { font-weight:bold; }
Вес шрифта. Некоторые браузеры поддерживают числовое значение
p { font-size:120%; }
Размер шрифта. Значения: px, pt, em, %

15. Text — текст
p { text-align:center; }
Выравнивание текста

16. Text — текст
p { text-align:center; }
Выравнивание текста
p { text-decoration:underline; }
Отвечает за подчеркивание, зачеркивание

17. Text — текст
p { text-indent:20px; }
Регулирует отступ

18. Text — текст
p { text-indent:20px; }
Регулирует отступ
p { text-transform:uppercase; }
Определяет строчные/прописные буквы

19. a — ссылка
a:hover { color:#ff0000; }
Определяет поведение при наведении

20. a — ссылка
a:hover { color:#ff0000; }
Определяет вид при наведении
a:visited { color:#ff0000; }
Определяет вид посещенной ссылки

21. a — ссылка
a:active { color:#ff0000; }
Определяет вид при нажатии

22. Идентификаторы
Class. В HTML-коде для любого элемента
можно указать класс.
<ul class=”list”>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>

23. Идентификаторы
В файле стилей класс прописывается
через точку
ul.list { color:#ff0000; }

24. Идентификаторы
Id. В HTML-коде для любого элемента
можно указать идентификатор.
В отличии от класса идентификатор
с определенным именем может быть
только один на странице

25. Идентификаторы
HTML: <ul id=”list”>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
CSS: #list { color:#ff0000; }

26. Группировка стилей
ul.list { color:#ff0000; }

27. Группировка стилей
ul.list { color:#ff0000; }
Не обязательно указывать тег
.list { color:#ff0000; }

28. Группировка стилей
ul.list { color:#ff0000; }
Не обязательно указывать тег
.list { color:#ff0000; }
Можно указывать несколько классов
.list, .list2 { color:#ff0000; }

29. Группировка элементов
<span>
Предназначен для выделения внутри тегов
<p>Элемент ничего не добавляет к содержимому
документа. Но, в сочетании с <span>CSS</span>,
может использоваться для визуальных эффектов
применимо к отдельным блокам текста</p>

30. Группировка элементов
span { color:#ff0000; font-weight:bold; }
Элемент ничего не добавляет к содержимому
документа. Но, в сочетании с CSS, может
использоваться для визуальных эффектов
применимо к отдельным блокам текста

31. Группировка элементов
<div>
Предназначен для выделения нескольких
тегов в общий блок

32. Блочная модель
DIV

33. Блочная модель
padding
DIV

34. Блочная модель
border
DIV

35. Блочная модель
margin
DIV

36. Всплывающие элементы
div { float:left; }

37. Всплывающие элементы
Этот div
всплывает
влево
А пустое место
заполняется
следующим далее
содержимым

38. Всплывающие элементы
При помощи всплывания можно создать
колонки
div { div { div {
float:left; float:left; float:left;
width:30%; width:30%; width:30%;
} } }

39. Вопросы?
United Design
uniteddesign.ru