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