Каскадные таблицы стилей CSS
Значение CSS при разработке Web-узла
3 способа внедрения CSS
Атрибут style
Тэг <style>
Тэг <LINK>
Синтаксис
Простой селектор
Селекторы потомков
Имя тэга
Имя класса
Имя класса
Идентификатор
Классы и идентификаторы
Наследование
Наследование
CSS3 переменные
Модель бокса
Отступы
Набивка
Обтекание блока текста
Управление цветом
Фон
Фон
Способы задания цвета
Способы задания цвета
Выравнивание текста
Выравнивание текста
Красная строка
Красная строка
Междустрочный интервал
Междустрочный интервал
Положение маркеров
Тип маркера
Тип маркера
Маркер-изображение
Форматирование списков
Тень текста(CSS3)
Граница (border)
Ширина границы
Стиль границы
Цвет границы
Цвет границы
Позиционирование блоков
bottom
top
left
right
Абсолютное и относительное позиционирование
Относительное позиционирование, если нет родительского объекта
Ось Z
z-index
Валидация CSS
Эффективный код
Форматирование кода
Скругленные углы (CSS3)
Скругленные углы (CSS3)
Вендорные префиксы для свойств CSS
Шрифт
Шрифт
Текст
Позиционирование
Прозрачность
Фон из нескольких картинок
Изменение размера
Закругленные углы
Тень
Колонки
CSS3 анимация
Анимация
Анимация
transition-timing-function
Псевдоклассы
Псевдоклассы
12.81M
Категория: ИнтернетИнтернет

Каскадные таблицы стилей CSS. Управление стилем отображения элементов

1. Каскадные таблицы стилей CSS

Управление стилем отображения элементов

2. Значение CSS при разработке Web-узла

1.
2.
3.
4.
Номенклатура страниц узла
Логической структуры страниц
Навигационная карта узла
Cтиль отображения стандартных
компонентов
5. Содержимое узла.
2

3. 3 способа внедрения CSS

1. В элемент разметки
2. В заголовок документа
3. Внешнее описание
3

4. Атрибут style

4

5. Тэг <style>

Тэг <style>
5

6. Тэг <LINK>

Тэг <LINK>
6

7. Синтаксис

перечисление селекторов
ИЛИ
иерархия вложенности селекторов
7

8. Простой селектор

8

9. Селекторы потомков

9

10. Имя тэга

10

11. Имя класса

11

12. Имя класса

12

13. Идентификатор

14. Классы и идентификаторы

Идентификаторы
• В коде документа идентификатор уникален
• Имя чувствительно к регистру.
• Можно получить доступ к элементу по его идентификатору и для
управления JavaScript.
• Стиль для идентификатора имеет приоритет выше, чем у классов.
Классы
• Классы могут использоваться в коде неоднократно.
• Имя чувствительно к регистру.
• Классы можно комбинировать между собой, добавляя несколько
классов к одному тегу.
14

15. Наследование


стили браузера по умолчанию;
прилинкованные стили
стили в элементе <STYLE>;
атрибут STYLE в любом из элементов
разметки.
15

16. Наследование

16

17. CSS3 переменные

18. Модель бокса

18

19. Отступы


margin-left — левый внешний отступ
margin-right — правый внешний отступ
margin-top — верхний внешний отступ
margin-bottom — нижний внешний отступ
margin — задает общий внешний отступ
19

20. Набивка

• padding-left — левый внутренний отступ
• padding-right — правый внутренний отступ
• padding-top — верхний внутренний отступ
• padding-bottom — нижний внутренний отступ
• padding — определяет единый размер
внутреннего отступа блока.
20

21. Обтекание блока текста

• left — блок прижат к левой границе
охватывающего элемента;
• right — блок прижат к правой
границе охватывающего элемента;
• both — текст может обтекать блок с
обеих сторон.
21

22. Управление цветом

• сolor – цвет текста
• background-color – и цвета фона на
котором отображается текст.
• border-color – цвет границы
текстового блока
22

23. Фон

23

24. Фон

24

25. Способы задания цвета

http://alt-f4.ru/setting-color-in-css
25

26. Способы задания цвета

26

27.

Форматирование текста

28. Выравнивание текста

text-align: center | justify | left | right |

29. Выравнивание текста

30. Красная строка

text-indent: значение

31. Красная строка

32. Междустрочный интервал

33. Междустрочный интервал

line-height: значение

34.

Форматирование списков
list-style: list-style-type
list-style-position
list-style-image

35. Положение маркеров

• inside
• outside

36. Тип маркера

circle маркер в виде кружка.
disc маркер в виде точки.
square маркер в виде квадра

37. Тип маркера


armenian
традиционная армянская нумерация.
decimal
арабские числа (1, 2, 3, 4,...).
decimal-leading-zero арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian
традиционная грузинская нумерация.
lower-alpha
строчные латинские буквы (a, b, c, d,...).
lower-greek
строчные греческие буквы (α, β, γ, δ,...).
lower-roman римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha
upper-roman римские числа в верхнем регистре (I, II, III, IV, V,...).
None
заглавные латинские буквы (A, B, C, D,...).
Отменяет маркеры для списка.

38. Маркер-изображение

url('путь к файлу')

39. Форматирование списков

40. Тень текста(CSS3)

text-shadow: none | тень [,тень]*
где тень:
<цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>

41.

Границы
border:
border-width
border-style
border-color
border-top, border-bottom, border-left, border-right.

42. Граница (border)

• border-top-width — ширина верхней границы
блока
• border-bottom-width — ширина нижней
границы блока
• border-left-width — ширина левой границы
блока
• border-right-width — ширина правой границы
блока
• border-width — ширина границы блока
• border-color — цвет границы блока
• border-style — тип линии границы блока
42

43. Ширина границы

border-width:значение

44. Стиль границы

border-style: значение

45. Цвет границы

border-color:значение

46. Цвет границы

47. Позиционирование блоков

Способ позиционирования:
position: absolute | relative| fixed | static |
Координаты:
bottom
top
right
left

48. bottom

абсолютное
позиционирование
относительное
позиционирование

49. top

абсолютное
позиционирование
относительное
позиционирование

50. left

абсолютное
позиционирование
относительное
позиционирование

51. right

абсолютное
позиционирование
относительное
позиционирование

52. Абсолютное и относительное позиционирование

53.

54. Относительное позиционирование, если нет родительского объекта

55. Ось Z

z-index: число

56. z-index

57. Валидация CSS

http://jigsaw.w3.org/css-validator
57

58. Эффективный код

• Размещайте каскадные таблицы стилей в
отдельном файле
• Удаляйте неиспользуемые селекторы
• Применяйте группирование
• Используйте универсальные свойства
58

59. Форматирование кода

http://www.cssportal.com/format-css/
59

60. Скругленные углы (CSS3)

61. Скругленные углы (CSS3)

62. Вендорные префиксы для свойств CSS

-mozпроект Mozilla Firefox, SeaMonkey, Camino и др.
-webkitApple Safari 3+, Google Chrome и др.
-o-, -op-, -xv-
Opera Software

63. Шрифт

• font-family - семейство начертаний шрифта
(гарнитура);
• font-style - прямое начертание или курсив;
• font-weight - "усиление" (насыщенность)
шрифта, "жирность" букв;
• font-size - размер шрифта (кегль). Задается в
пикселах (px) и типографских пунктах (pt).
• font-variant - вариант начертания (обычный
или мелкими буквами - капитель).
Все эти параметры можно совместить в одном
атрибуте font
63

64. Шрифт

font-family
"прямое" начертание (normal)
курсив (italic)
"скошенное" (oblique)
усиленное по насыщенности ("жирное", bold)
"мелкое" (капитель, small-caps)
• Times - это пропорциональный шрифт "с засечками" (serif)
• Arial - это пропорциональный шрифт "без засечек" (sansserif),
• Courier - это моноширинный шрифт (monospace).
64

65. Текст

• letter-spacing – межбуквенное
расстояние
• text-align – выравнивание
• text-transform – регистр
• text-decoration – подчеркивание,
перечеркивание
65

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

• Position:
–absolute - абсолютные координаты
–relative - относительные координаты
top – верхняя граница
right – права граница
bottom – нижняя граница
left – левая граница
66

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

68. Фон из нескольких картинок

69. Изменение размера

70. Закругленные углы

71. Тень

72. Колонки

73. CSS3 анимация

• transition-property - какое свойство
элемента мы анимируем
• transition-duration - время, которое будет
продолжаться анимация.
• transition-timing-function - функция от
времени, определяющая типа изменения например: liner, ease-in, и т.п.
• transition - Возможна короткая запись трех
предыдущих свойств.

74. Анимация

75. Анимация

76. transition-timing-function

77. Псевдоклассы

78. Псевдоклассы

English     Русский Правила