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

1.

ВГУЭС
Тема 2. Каскадные таблицы стилей CSS
Федорищев Леонид Александрович
1

2. Клиентская часть

Клиент
Верстка,
структура
HTML
Оформление
форматирова
ние
CSS
Интерактивно
сть,
«общение» с
сервером
Javascript
Серве
р
2

3. CSS

3

4. CSS. Пример

4

5. Синтаксис

5

6. Синтаксис

6

7. Пример.Шрифт

h1
{
font-family: Georgia, serif;
}
7

8. Пример. Размер

h1
{
font-size: 60px;
}
8

9. Селекторы

название тега
класс тега – class (.)
идентификатор тега – id (#)
атрибут тега – []
* все элементы страницы
9

10. Селекторы тегов

10

11. Селекторы тегов

11

12. Селекторы идентификаторов

12

13. Селекторы идентификаторов

13

14. Селекторы классов

14

15. Селекторы классов

15

16. Селекторы атрибутов

16

17. Селекторы атрибутов

17

18. Комбинирование селекторов

18

19. Комбинирование селекторов

19

20. Группировка селекторов

20

21. Конфликт селекторов?

HTML:
<div class="hello_class" id="hello_id">Привет, мир</div>
CSS:
div {
font-size: 11pt;
font-weight: bold;
}
#hello_id {
font-size: 27pt;
text-decoration: underline;
}
.hello_class {
font-size: 14pt;
font-style: italic;
}
21

22. Вес селекторов

название тега имеет вес 1 балл;
присвоенный тегу класс — 10 баллов;
идентификатор тега — 100 баллов.
!important - способ явно повысить вес определенного CSS-свойства
div {
font-size: 11pt !important;
font-weight: bold;
}
22

23. Каскадирование стилей. Вес стилей

Стиль браузера.
Стиль пользователя.
Стиль автора.
Стиль автора с добавлением !important.
Стиль пользователя с добавлением !
important.
23

24. Псевдоклассы и псевдоэлементы

селектор : псевдоклассселектор : псевдоэлемент
:active
:link
:focus
:hover
:visited
:first-child
:lang
:after
:before
:first-letter
:first-line
24

25. Текст. Цвет

 color
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}
25

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

 text-align
•p.ta1
•p.ta2
•p.ta3
•p.ta4
{text-align:center;} (По центру)
{text-align:left;} (Слева)
{text-align:right;}
(Справа)
{text-align:justify;}
(По ширине)
26

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

27

28. Текст. Оформление

28

29. Текст. Отступ между словами и буквами в тексте

29

30. Текст. Отступ между словами и буквами в тексте

30

31. Текст. Другие свойства

31

32. Текст. Шрифт

 Шрифт: font-family
p {font-family:Arial;}
Размер шрифта: font-size
p.fz1 {font-size:20px;}
32

33. Текст. Безопасные шрифты

33

34. Шрифт. Размер

34

35. Шрифт. Стиль

35

36. Оформление фона

 background:
background-attachment
background-color
background-image
background-position
background-repeat
body
{ backgroundcolor:green; }
body
{ backgroundimage:url('http://www.wi
sdomweb.ru/editor/spid
er2.gif'); }
36

37. Оформление фона: цвет

37

38. Оформление фона: картинка

38

39. Оформление фона: картинка

39

40. Оформление фона: картинка

40

41. Оформление ссылок

a:link - определяет оформление обычной не
посещенной ссылки.
a:visited - определяет оформление
посещенной пользователем ссылки.
а:hover - определяет оформление ссылки, на
которую наведен курсор мыши.
a:active - определяет оформление ссылки, на
которую щелкнули мышкой.
41

42. Оформление ссылок

42

43. Оформление списков

43

44. Оформление таблиц

44

45. Блоковая модель

45

46. Блоковая модель

46

47. Блоковая модель

47

48. Стиль границ

48

49. Стиль границы в одной строке

49

50. Padding: внутренний отступ

50

51. Padding: внутренний отступ

51

52. Padding: краткая форма записи

52

53. Margin: внешний отступ

53

54. Скрытие элементов

54

55. Скрытие элементов

55

56. Блочные и строковые элементы

56

57. Блочные и строковые элементы

57

58. Размещение элементов

#pos1
{
position:absolute;
top:10px; left:200px;
}
58

59. Размещение элементов

59

60. Относительное размещение

60

61. Наложение элементов

61

62. Выравнивание с margin

62

63. Выравнивание с float

63

64. Float: обтекание элемента

64

65. Очищение от float

65

66. Способы подключения к HTML

Внутренние стили (внутри тегов, атрибут
style)
Глобальные стили (указанные внутри тега
style)
Связанные стили (отдельный файл CSS,
подключение в html через link)
Импорт стилей (еще один вариант
подключения внешних CSS-файлов)
66

67. Строковое подключение стиля

<p style="font-size:1.3em">
Абзац оформленный с помощью CSS.
</p>
67

68. Внутренние стили

<head>
<style type='text/css'>
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
</style>
</head>
68

69. Подключение внешнего файла

<head>
<link rel="stylesheet" type="text/css"
href="адрес_внешнего_файла_стилей" />
</head>
69