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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Оказва се, че HTML не е
единственият език, можете да използвате вътре

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

4
00:00:03,895 --> 00:00:08,100
Можете да използвате нещо, наречено CSS, или
Cascading Style Sheets, както добре.

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
наречен DIV.

14
00:00:35,670 --> 00:00:43,880
Open скоба Разделения, Джон Харвард, в близост
скоба Разделения, друг отворен скоба Div,

15
00:00:43,880 --> 00:00:48,330
и сега ние ще се уточни нещо
като, добре дошли в моята начална страница!

16
00:00:48,330 --> 00:00:50,420
И нека да се затвори тази дивизия, както добре.

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
>> Сега, какво е това Div маркер?

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 A + 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 пиксела, или PX.

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
>> На последно място, в тази трета дивизия, да го направим
стил се равнява на размера на цитат, шрифт, и

45
00:02:33,255 --> 00:02:35,340
да речем 12 пиксела и този път.

46
00:02:35,340 --> 00:02:37,280
Close цитат след запетаята.

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 тук,
нека кликнете Reload.

60
00:03:13,470 --> 00:03:15,800
>> Сега имаме малко по-интересна
начална страница за John

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
Но по-лесно, може ли да приключи тези
три Divs вътре в четвърта дивизия, а

70
00:03:45,330 --> 00:03:49,360
Разделения родител, така да се каже, и да укажете
, че Div и цялото му

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, нека се върнем към моя
тялото и добавете нов Разделения до върха с

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.

78
00:04:15,040 --> 00:04:18,829
>> С други думи, тъй като тези три
оригинални Divs сега са деца, така че да

79
00:04:18,829 --> 00:04:22,110
се каже, на нов родител Разделения и аз съм
уточни, че бих искал да се приведе

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