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

2
00:00:00,290 --> 00:00:03,310
>> ALTAVEU: Resulta que HTML no és
l'únic llenguatge que pot utilitzar a l'interior

3
00:00:03,310 --> 00:00:03,895
d'una pàgina web.

4
00:00:03,895 --> 00:00:08,100
Podeu fer servir una cosa anomenada CSS, o
Fulls d'estil en cascada, també.

5
00:00:08,100 --> 00:00:12,120
CSS permet especificar molt més
precisament l'estètica d'una Web

6
00:00:12,120 --> 00:00:16,930
pàgina, incloent el disseny i la mida i la
colors i les fonts i molt més.

7
00:00:16,930 --> 00:00:20,820
Per exemple, crearem una pàgina web
aquí es diu css0 que representa un

8
00:00:20,820 --> 00:00:22,740
la teva pàgina d'inici per, per exemple, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> En aquesta pàgina, tindrem de John Harvard
nomenar, sota de la qual serà

10
00:00:25,480 --> 00:00:28,500
un missatge per als seus visitants, per sota de
que serà un peu de pàgina, amb

11
00:00:28,500 --> 00:00:30,590
dir, una mica d'informació dels drets d'autor.

12
00:00:30,590 --> 00:00:34,650
Per a això, definirem tres divisions
per la pàgina utilitzant una etiqueta

13
00:00:34,650 --> 00:00:35,670
anomenat div.

14
00:00:35,670 --> 00:00:43,880
Obrir div suport, John Harvard, prop
div suport, un altre div parèntesi obert,

15
00:00:43,880 --> 00:00:48,330
i ara anem a especificar alguna cosa
com, benvingut a la meva pàgina d'inici!

16
00:00:48,330 --> 00:00:50,420
I anem a tancar aquest div, també.

17
00:00:50,420 --> 00:00:53,700
>> I ara una tercera i última
div, els drets d'autor.

18
00:00:53,700 --> 00:00:58,250
Només per ser de luxe, permetin-me fer servir ara un arxiu HTML
entitat, un símbol que representa

19
00:00:58,250 --> 00:01:01,140
un personatge que no podia d'una altra manera
escrigui en el teclat.

20
00:01:01,140 --> 00:01:07,490
En particular, em faré
signe, lliura, 169, punt i coma.

21
00:01:07,490 --> 00:01:10,620
Resulta que és el codi numèric
per al símbol de drets d'autor.

22
00:01:10,620 --> 00:01:14,260
Llavors anem a especificar John Harvard
aquí a la part inferior.

23
00:01:14,260 --> 00:01:17,180
Anem a tancar el div i deseu el fitxer.

24
00:01:17,180 --> 00:01:18,910
>> Ara, què és aquesta etiqueta div?

25
00:01:18,910 --> 00:01:21,970
L'etiqueta div simplement defineix una divisió
de la pàgina, que és essencialment un

26
00:01:21,970 --> 00:01:23,310
regió rectangular.

27
00:01:23,310 --> 00:01:26,850
Així que en aquest moment en el temps, tinc tres
regions rectangulars, un a la part superior

28
00:01:26,850 --> 00:01:27,620
de l'altra.

29
00:01:27,620 --> 00:01:30,610
Així que per ara, l'efecte és gairebé tan
encara que jo tenia tres paràgrafs.

30
00:01:30,610 --> 00:01:33,490
Però no anem a veure absolutament tant
espai en blanc entre ells.

31
00:01:33,490 --> 00:01:36,170
>> Anem a guardar l'arxiu, canviï el seu
permisos i fer una ullada per una

32
00:01:36,170 --> 00:01:37,990
moment en Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Ara anem a obrir Chrome i visita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
De fet, aquesta és una pàgina de inici
per John Harvard.

36
00:01:54,630 --> 00:01:59,370
Ara anem a stylize una mica més
amb precisió utilitzant una mica de CSS.

37
00:01:59,370 --> 00:02:03,510
>> De tornada a gedit, entrarem en aquest
primera etiqueta div i afegir un estil

38
00:02:03,510 --> 00:02:11,060
Atribueixo especificant que m'agradaria un
mida de la font de, per exemple, 36 píxels o píxels.

39
00:02:11,060 --> 00:02:15,650
I m'agradaria que el pes d'aquesta font
ser audaços en lloc de la per defecte,

40
00:02:15,650 --> 00:02:16,980
la qual cosa és normal.

41
00:02:16,980 --> 00:02:21,170
Per segon div, anem a especificar
altre atribut d'estil que té un

42
00:02:21,170 --> 00:02:25,550
mida de font de 24 píxels, per la qual
una mica més petit.

43
00:02:25,550 --> 00:02:28,410
Tancar cometes, després del punt i coma.

44
00:02:28,410 --> 00:02:33,255
>> Finalment, en aquesta tercera div, farem
estil és igual a la grandària de pressupost, la font, i

45
00:02:33,255 --> 00:02:35,340
diguem 12 píxels en aquesta ocasió.

46
00:02:35,340 --> 00:02:37,280
Tancar cotització després del punt i coma.

47
00:02:37,280 --> 00:02:40,200
Noteu llavors que em sembla que tenen
especificat una mica d'estilització per

48
00:02:40,200 --> 00:02:43,770
cada un d'aquests tres divs utilitzant,
resulta, CSS.

49
00:02:43,770 --> 00:02:47,820
De fet, la sintaxi que es veu en
entre aquestes cometes és CSS,

50
00:02:47,820 --> 00:02:50,620
CSS específicament propietats
amb valors.

51
00:02:50,620 --> 00:02:53,910
I per aquesta primera etiqueta, on vaig tenir
dues d'aquestes propietats, mida de font i

52
00:02:53,910 --> 00:02:57,290
pes de la font, simplement em vaig separar
amb punt i coma.

53
00:02:57,290 --> 00:02:59,940
>> Ara, només pel bé d'estil, em
punt i coma també inclosos en

54
00:02:59,940 --> 00:03:00,880
al final de cada línia.

55
00:03:00,880 --> 00:03:04,270
Però no són estrictament necessaris,
sobretot quan només té un

56
00:03:04,270 --> 00:03:05,580
propietat definida.

57
00:03:05,580 --> 00:03:08,370
Ara anem a guardar l'arxiu i torneu a carregar
a Chrome, i veure el que

58
00:03:08,370 --> 00:03:11,000
l'efecte net és.

59
00:03:11,000 --> 00:03:13,470
De tornada a Chrome aquí,
fem clic en Recarregar.

60
00:03:13,470 --> 00:03:15,800
>> Ara tenim una mica més interessant
la teva pàgina d'inici per a John

61
00:03:15,800 --> 00:03:19,000
Harvard, en què la primera línia amb
el seu nom, que es troba dins d'aquest

62
00:03:19,000 --> 00:03:23,470
primera div, és de 36 píxels d'alt i també
negreta, en què la segona línia,

63
00:03:23,470 --> 00:03:27,340
que és en aquest segon div, és a dir 24
píxels d'alt, però no en negreta.

64
00:03:27,340 --> 00:03:31,500
I pel que la tercera línia en aquest tercer
div és de 12 píxels d'alt i també

65
00:03:31,500 --> 00:03:32,610
No negreta.

66
00:03:32,610 --> 00:03:35,380
Però suposo que ara m'agradaria canviar
tot d'aquest text sobre

67
00:03:35,380 --> 00:03:36,650
de tal manera que està centrada.

68
00:03:36,650 --> 00:03:40,480
>> Jo podria alinear cadascun dels individus
divs com està centrada.

69
00:03:40,480 --> 00:03:45,330
Però més fàcilment, podria embolicar els
03:00 divs dins d'una cambra, un div

70
00:03:45,330 --> 00:03:49,360
div pare, per així dir-ho, i especificar
que que div i la totalitat del seu

71
00:03:49,360 --> 00:03:52,610
descendents haurien d'estar
centrar el text alineat?

72
00:03:52,610 --> 00:03:54,120
Anem a fer una ullada.

73
00:03:54,120 --> 00:03:58,510
>> Dins gedit, anem a tornar al meu
cos i afegir un nou div sobre de la tapa amb

74
00:03:58,510 --> 00:04:04,460
div, estil és igual entre cometes
Centre text s'alineï, prop

75
00:04:04,460 --> 00:04:06,250
postular després del punt i coma.

76
00:04:06,250 --> 00:04:10,280
I ara, seguirem endavant i tot guió
d'aquelles línies que hem escrit abans.

77
00:04:10,280 --> 00:04:15,040
I per sota de la tercera div, anem a
tancar aquesta nova div.

78
00:04:15,040 --> 00:04:18,829
>> En altres paraules, a causa als tres
divs originals ara són fills, de manera que

79
00:04:18,829 --> 00:04:22,110
Parlo, per un nou div pare i no tinc
vaig especificar que m'agradaria per alinear el

80
00:04:22,110 --> 00:04:26,140
text d'aquest div pare al centre
de la pàgina, que la propietat serà

81
00:04:26,140 --> 00:04:28,290
heretat per tots aquests nens.

82
00:04:28,290 --> 00:04:32,370
De fet, anem a guardar l'arxiu i
fer una ullada a un navegador.

83
00:04:32,370 --> 00:04:34,650
Anem Recarregar a Chrome.

84
00:04:34,650 --> 00:04:37,540
I aquí el tenim, 01:00 encara millor
La pàgina principal de John Harvard.

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