1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> СПІКЕР: Так що це насправді не найкращий
дизайн змішуватися CSS з HTML.

3
00:00:04,840 --> 00:00:08,700
Швидше, краще винести за ваш
CSS, покласти його де-небудь центральний, і

4
00:00:08,700 --> 00:00:11,430
якось застосувати його до
теги у вашій веб-сторінці.

5
00:00:11,430 --> 00:00:15,290
Щоб добитися цього, ми можемо насправді зупинити
за допомогою атрибуту стилю і замість

6
00:00:15,290 --> 00:00:19,290
використовувати стиль тег, який належить в
Глава веб-сторінки поряд, для

7
00:00:19,290 --> 00:00:20,700
Примірник, ваша назва.

8
00:00:20,700 --> 00:00:24,400
>> Давайте дамо цьому спробу і повторно реалізувати
Домашня сторінка для Джона Гарварда

9
00:00:24,400 --> 00:00:26,410
з використанням стилю тег.

10
00:00:26,410 --> 00:00:28,930
Я вже отримав нас почали
тут з трьома діви для

11
00:00:28,930 --> 00:00:30,260
Домашня сторінка Джона Гарварда.

12
00:00:30,260 --> 00:00:33,990
Але давайте спочатку тепер підійти до цієї першої
справ і додати новий атрибут,

13
00:00:33,990 --> 00:00:38,680
а саме ID, і вказати, що це унікальний
ідентифікатор для цього конкретного DIV

14
00:00:38,680 --> 00:00:42,390
має бути, наприклад, цитата кінець цитати
"Кращих", це довільне ім'я, але

15
00:00:42,390 --> 00:00:45,840
описовий, що це справ є
дійсно у верхній частині моєї сторінці.

16
00:00:45,840 --> 00:00:48,920
>> Протягом наступного DIV, давайте дамо йому
відрізняється Ідентифікатор цитатою Unquote

17
00:00:48,920 --> 00:00:54,080
"Середній", і давайте дамо третій DIV
Ідентифікатор цитатою кінець цитати "дна". Ми

18
00:00:54,080 --> 00:00:57,740
Тепер є три унікальний ідентифікатор
, До якого ми можемо застосувати деякі CSS

19
00:00:57,740 --> 00:01:01,210
властивості, але спочатку давайте повернення
глави цій сторінці.

20
00:01:01,210 --> 00:01:04,760
Прямо над назвою тут, я буду
йти вперед і визначають стиль

21
00:01:04,760 --> 00:01:07,120
а потім закрийте стиль.

22
00:01:07,120 --> 00:01:10,340
>> Всередині це зараз, я збираюся визначити
деякі властивості CSS, а саме

23
00:01:10,340 --> 00:01:14,550
ті самі, я раніше була в стилі
атрибути, але тут вони будуть

24
00:01:14,550 --> 00:01:16,320
централізовано визначені.

25
00:01:16,320 --> 00:01:20,880
Щоб зробити це, я збираюся вказати фунт
символ з наступним вершині, тим самим

26
00:01:20,880 --> 00:01:24,710
уточнивши, що наступне CSS
властивості повинні застосувати до будь-якої

27
00:01:24,710 --> 00:01:28,800
HTML елемент має унікальний
ідентифікатор вершини.

28
00:01:28,800 --> 00:01:32,240
Я тоді буде мати деякі відкриті і
закриті фігурні дужки, і я збираюся

29
00:01:32,240 --> 00:01:39,170
вказати, скажімо, розмір шрифту повинен бути 36
пікселів, вага шрифту повинен бути сміливим.

30
00:01:39,170 --> 00:01:41,810
>> Щоб усе було чисто, я ставлю кожен
з цих властивостей тепер сама по собі

31
00:01:41,810 --> 00:01:44,610
лінія, але це тільки
стилістична умовність.

32
00:01:44,610 --> 00:01:47,830
Нижче цього, давайте визначимо інший
Селектор, так сказати.

33
00:01:47,830 --> 00:01:52,680
Це один для HTML тега, який має
унікальний ідентифікатор середині.

34
00:01:52,680 --> 00:01:57,540
І тут, давайте вказати розмір шрифту
з 24 пікселів, нижче, що інший

35
00:01:57,540 --> 00:02:01,520
Селектор для нижньої, а всередині
про це, давайте уточнимо

36
00:02:01,520 --> 00:02:03,850
Розмір шрифту 12 пікселів.

37
00:02:03,850 --> 00:02:09,350
>> Давайте тепер зберегти, змінити права доступу
на, і завантажити цю сторінку в браузері,

38
00:02:09,350 --> 00:02:14,230
CHMOD плюс г CSS-1.html.

39
00:02:14,230 --> 00:02:22,260
Давайте відкрити Chrome і відвідати
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Не погано.

41
00:02:22,960 --> 00:02:26,930
Точно так, як я передбачав, але я хотів би, щоб
приймати речі на один крок далі тепер і

42
00:02:26,930 --> 00:02:29,050
Текст центру Джона Гарварда.

43
00:02:29,050 --> 00:02:32,080
Тепер, щоб зробити це, я міг обернути
вся сторінка в DIV, як я

44
00:02:32,080 --> 00:02:33,800
зробив більш ранній приклад.

45
00:02:33,800 --> 00:02:37,820
Або я можу бути розумнішими і розуміти, що
всі ці діви знаходяться всередині

46
00:02:37,820 --> 00:02:42,420
Тіло моїй сторінці, так чому б просто не застосовуються
один або кілька CSS властивості для організму

47
00:02:42,420 --> 00:02:43,850
помітити себе?

48
00:02:43,850 --> 00:02:45,460
>> Щоб зробити це, давайте зробимо це.

49
00:02:45,460 --> 00:02:47,650
Давайте повернемося до Gedit тут.

50
00:02:47,650 --> 00:02:52,460
Давайте прокрутки назад до Style тега,
і давайте вказати селектор просто

51
00:02:52,460 --> 00:02:54,520
За допомогою цього тега ім'я, тіло.

52
00:02:54,520 --> 00:03:00,580
Нижче цього, давайте поставимо наші фігурні дужки
потім вирівнювання тексту центру.

53
00:03:00,580 --> 00:03:05,580
Давайте тепер зберегти сторінку і перезавантажте
це усередині цього браузера.

54
00:03:05,580 --> 00:03:08,090
Перезавантаження в Chrome, і вуаля.

55
00:03:08,090 --> 00:03:11,000
Тепер у нас є сторінка Джона Гарварда
в центрі, як ми мали намір.

56
00:03:11,000 --> 00:03:12,619