1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> СПИКЕР: Получается, что HTML не
единственный язык, который вы можете использовать внутри

3
00:00:03,310 --> 00:00:03,895
веб-страницы.

4
00:00:03,895 --> 00:00:08,100
Вы можете использовать то, что называется CSS, или
Каскадные таблицы стилей, а также.

5
00:00:08,100 --> 00:00:12,120
CSS позволяет задать гораздо больше
именно эстетика Сети

6
00:00:12,120 --> 00:00:16,930
страницы, в том числе планировки и размеров и
цвета и шрифты и многое другое.

7
00:00:16,930 --> 00:00:20,820
Например, давайте создавать веб-страницы
здесь называется css0, что представляет собой

8
00:00:20,820 --> 00:00:22,740
Домашняя страница для, скажем, Джона Гарварда.

9
00:00:22,740 --> 00:00:25,480
>> На этой странице мы будем иметь Джон Гарварда
имя, под которым будет

10
00:00:25,480 --> 00:00:28,500
хороший сообщение для своих посетителей, под
который будет подвал, с

11
00:00:28,500 --> 00:00:30,590
говорят, некоторые сведения об авторских правах.

12
00:00:30,590 --> 00:00:34,650
Чтобы сделать это, давайте определим три подразделения
для страницы с помощью тега

13
00:00:34,650 --> 00:00:35,670
называется дел.

14
00:00:35,670 --> 00:00:43,880
Открыть кронштейн дел, Джон Гарвард, недалеко
Кронштейн дел, еще один открытый кронштейн дел,

15
00:00:43,880 --> 00:00:48,330
и теперь мы будем указать что-то
как, добро пожаловать на мою страничку!

16
00:00:48,330 --> 00:00:50,420
И давайте закроем эту DIV, а также.

17
00:00:50,420 --> 00:00:53,700
>> И теперь третий и последний
дел, авторское право.

18
00:00:53,700 --> 00:00:58,250
Просто быть фантазии, позвольте мне использовать сейчас в HTML
лицо, символ, который представляет

19
00:00:58,250 --> 00:01:01,140
символ, который вы не могли иначе
печатать на клавиатуре.

20
00:01:01,140 --> 00:01:07,490
В частности, я собираюсь сделать
амперсанд, фунт, 169, точка с запятой.

21
00:01:07,490 --> 00:01:10,620
Оказывается, что это цифровой код
для символа авторского права.

22
00:01:10,620 --> 00:01:14,260
Тогда давайте уточним Джон Гарвард
здесь в нижней части.

23
00:01:14,260 --> 00:01:17,180
Закроем DIV и сохраните файл.

24
00:01:17,180 --> 00:01:18,910
>> Теперь, что же это за дел тег?

25
00:01:18,910 --> 00:01:21,970
Дел тег просто определяет деление
страницы, который является по существу

26
00:01:21,970 --> 00:01:23,310
прямоугольная область.

27
00:01:23,310 --> 00:01:26,850
Так что в этот момент времени, у меня есть три
прямоугольные области, один на вершине

28
00:01:26,850 --> 00:01:27,620
от другого.

29
00:01:27,620 --> 00:01:30,610
Так что на данный эффект почти как
хотя я должен был три абзаца.

30
00:01:30,610 --> 00:01:33,490
Но мы не увидим в той же степени
пробелы между ними.

31
00:01:33,490 --> 00:01:36,170
>> Давайте сохранить этот файл, изменить его
разрешения, и взглянуть на

32
00:01:36,170 --> 00:01:37,990
момент в Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod + R CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Давайте теперь открыть Chrome и визит
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
В самом деле, вот домашняя страница
Джона Гарварда.

36
00:01:54,630 --> 00:01:59,370
Давайте теперь стилизовать его немного больше
Именно с помощью некоторых CSS.

37
00:01:59,370 --> 00:02:03,510
>> Вернуться в Gedit, давайте войдем в этот
Первый дел теги и добавить стиль

38
00:02:03,510 --> 00:02:11,060
атрибутов уточнив, что я хотел бы
размер шрифта, скажем, 36 пикселей, или пикс.

39
00:02:11,060 --> 00:02:15,650
И я хотел бы вес этого шрифта
быть смелым, а не по умолчанию,

40
00:02:15,650 --> 00:02:16,980
который является нормальным.

41
00:02:16,980 --> 00:02:21,170
Для второго DIV, давайте уточним
другой атрибут стиля, который имеет

42
00:02:21,170 --> 00:02:25,550
Размер шрифта 24 пикселей, так что
немного меньше.

43
00:02:25,550 --> 00:02:28,410
Закрыть котировки после запятой.

44
00:02:28,410 --> 00:02:33,255
>> Наконец, в этом третьем DIV, давайте сделаем
стиль равна размер цитаты, шрифт, и

45
00:02:33,255 --> 00:02:35,340
скажем 12 пикселей на этот раз.

46
00:02:35,340 --> 00:02:37,280
Закрыть цитата после запятой.

47
00:02:37,280 --> 00:02:40,200
Обратите внимание, то, что я, кажется,
указано немного стилизации для

48
00:02:40,200 --> 00:02:43,770
каждый из этих трех DIVs с использованием,
Оказывается, CSS.

49
00:02:43,770 --> 00:02:47,820
На самом деле, синтаксис, что вы видите в
между этими двойные кавычки является CSS,

50
00:02:47,820 --> 00:02:50,620
специально CSS свойства
со значениями.

51
00:02:50,620 --> 00:02:53,910
И по этой первого тега, где я имел
две такие свойства, размер шрифта и

52
00:02:53,910 --> 00:02:57,290
вес шрифта, я просто отделена
их точкой с запятой.

53
00:02:57,290 --> 00:02:59,940
>> Теперь, просто ради стиля, я
также включены Точка с запятой в

54
00:02:59,940 --> 00:03:00,880
конец каждой строки.

55
00:03:00,880 --> 00:03:04,270
Но они не обязательно,
особенно когда у вас есть только один

56
00:03:04,270 --> 00:03:05,580
свойство, определяемое.

57
00:03:05,580 --> 00:03:08,370
Давайте теперь сохраните файл и перезагрузите
в Chrome, и посмотреть, что

58
00:03:08,370 --> 00:03:11,000
чистый эффект.

59
00:03:11,000 --> 00:03:13,470
Вернуться в Chrome здесь,
давайте нажмите Обновить.

60
00:03:13,470 --> 00:03:15,800
>> Теперь у нас есть немного более интересный
Домашняя страница для Иоанна

61
00:03:15,800 --> 00:03:19,000
Гарвард, в результате чего первая линия с
его имя, которое находится внутри, что

62
00:03:19,000 --> 00:03:23,470
Первый дел, составляет 36 пикселей в высоту, а также
полужирный, причем вторая строка,

63
00:03:23,470 --> 00:03:27,340
который в этом втором DIV, 24
пикселей в высоту, но не жирным шрифтом.

64
00:03:27,340 --> 00:03:31,500
И при этом третья строка в этом треть
дел составляет 12 пикселей в высоту, а также

65
00:03:31,500 --> 00:03:32,610
не жирным шрифтом.

66
00:03:32,610 --> 00:03:35,380
Но предположим, что теперь я хотел бы перейти
весь этот текст над

67
00:03:35,380 --> 00:03:36,650
таким образом, что она по центру.

68
00:03:36,650 --> 00:03:40,480
>> Я мог выровнять каждый из личности
дивы как по центру.

69
00:03:40,480 --> 00:03:45,330
Но легче, я мог обернуть тех,
три дивы внутри четвертого DIV,

70
00:03:45,330 --> 00:03:49,360
родитель дел, так сказать, и укажите
что, что дел и все его

71
00:03:49,360 --> 00:03:52,610
потомки должны быть
Текст выравнивается центр?

72
00:03:52,610 --> 00:03:54,120
Давайте взглянем.

73
00:03:54,120 --> 00:03:58,510
>> Внутри Gedit, давайте вернемся к моему
тело и добавить новый DIV наверху с

74
00:03:58,510 --> 00:04:04,460
дел, стиль равна цитатой конец цитаты
Текст по центру, близко

75
00:04:04,460 --> 00:04:06,250
цитирую после запятой.

76
00:04:06,250 --> 00:04:10,280
А теперь, давайте идти вперед и отступ все
из тех линий, которые мы ввели раньше.

77
00:04:10,280 --> 00:04:15,040
И ниже этой третьей DIV, давайте
закрыть эту новую DIV.

78
00:04:15,040 --> 00:04:18,829
>> Другими словами, так как эти три
оригинальные дивы теперь дети, так

79
00:04:18,829 --> 00:04:22,110
говорить, нового родительского DIV и у меня есть
указано, что я хотел бы, чтобы выровнять

80
00:04:22,110 --> 00:04:26,140
Текст этого родительского сНу в центре
страницы, что имущество будет

81
00:04:26,140 --> 00:04:28,290
наследуются все из этих детей.

82
00:04:28,290 --> 00:04:32,370
В самом деле, давайте сохраните файл и
взглянуть в браузере.

83
00:04:32,370 --> 00:04:34,650
Давайте перезагрузить в Chrome.

84
00:04:34,650 --> 00:04:37,540
И у нас это есть, еще приятнее
Домашняя страница для Джона Гарварда.

85
00:04:37,540 --> 00:04:39,872