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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: On käynyt ilmi, että HTML ei ole
ainoa kieli, voit käyttää sisällä

3
00:00:03,310 --> 00:00:03,895
Web-sivun.

4
00:00:03,895 --> 00:00:08,100
Voit käyttää jotain kutsutaan CSS, tai
Cascading Style Sheets, samoin.

5
00:00:08,100 --> 00:00:12,120
CSS voit määrittää paljon enemmän
Juuri estetiikka web

6
00:00:12,120 --> 00:00:16,930
sivu, mukaan lukien layout ja koot ja
värit ja fontit ja paljon muuta.

7
00:00:16,930 --> 00:00:20,820
Esimerkiksi nyt luoda web-sivun
jota tässä kutsutaan CSS0, joka edustaa

8
00:00:20,820 --> 00:00:22,740
kotisivun vaikkapa John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Tällä sivulla meillä on John Harvardin
Nimi, jonka alla on

10
00:00:25,480 --> 00:00:28,500
kiva viesti hänen kävijöitä, alla
joka on footer, jossa

11
00:00:28,500 --> 00:00:30,590
sanoa, tekijänoikeustiedot.

12
00:00:30,590 --> 00:00:34,650
Voit tehdä tämän, nyt määritellä kolme toimialaa
sivun käyttäen tag

13
00:00:34,650 --> 00:00:35,670
nimeltään div.

14
00:00:35,670 --> 00:00:43,880
Alkusulkumerkki div, John Harvard, lähellä
kiinnike div toinen alkusulkumerkki div,

15
00:00:43,880 --> 00:00:48,330
ja nyt me määrittää jotain
kuten, tervetuloa kotisivuilleni!

16
00:00:48,330 --> 00:00:50,420
Ja nyt sulkea tämän div samoin.

17
00:00:50,420 --> 00:00:53,700
>> Ja nyt kolmas ja viimeinen
div, copyright.

18
00:00:53,700 --> 00:00:58,250
Vain olla fancy, anna minun käyttää nyt HTML
kokonaisuus, symboli, joka edustaa

19
00:00:58,250 --> 00:01:01,140
merkki, joka olisi muuten
kirjoita näppäimistöllä.

20
00:01:01,140 --> 00:01:07,490
Erityisesti aion tehdä
et-merkki, punta, 169, puolipiste.

21
00:01:07,490 --> 00:01:10,620
Osoittautuu, että on numerokoodi
Tekijänoikeuden symboli.

22
00:01:10,620 --> 00:01:14,260
Sitten Katsotaanpa määritellä John Harvard
täällä alareunassa.

23
00:01:14,260 --> 00:01:17,180
Katsotaanpa sulje div ja tallenna tiedosto.

24
00:01:17,180 --> 00:01:18,910
>> Nyt, mitä tämä div tag?

25
00:01:18,910 --> 00:01:21,970
Div tag määritellään pelkästään jako
sivun, joka on lähinnä

26
00:01:21,970 --> 00:01:23,310
suorakulmainen alue.

27
00:01:23,310 --> 00:01:26,850
Joten tällä hetkellä, minulla on kolme
suorakulmainen alueita, päällekkäin

28
00:01:26,850 --> 00:01:27,620
muut.

29
00:01:27,620 --> 00:01:30,610
Joten nyt, vaikutus on lähes yhtä
vaikka minulla oli kolme kappaletta.

30
00:01:30,610 --> 00:01:33,490
Mutta emme tule näkemään aivan yhtä paljon
valkoinen tilaa niiden välillä.

31
00:01:33,490 --> 00:01:36,170
>> Katsotaanpa tallentaa tiedoston, muuttaa sen
käyttöoikeudet, ja katsomaan varten

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

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

34
00:01:43,040 --> 00:01:52,440
Katsotaanpa nyt avata Chrome ja vierailu
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Todellakin, tässä kotisivu
John Harvard.

36
00:01:54,630 --> 00:01:59,370
Katsotaanpa nyt tyylitellä sitä hieman
Juuri käyttäen joitakin CSS.

37
00:01:59,370 --> 00:02:03,510
>> Back in gedit, mennään tähän
Ensimmäinen div tag ja lisää tyyliä

38
00:02:03,510 --> 00:02:11,060
Yhdistän täsmennetään, että haluaisin
fonttikokoa, vaikkapa 36 pikseliä tai px.

39
00:02:11,060 --> 00:02:15,650
Ja haluaisin paino tätä fonttia
olla rohkea eikä oletus,

40
00:02:15,650 --> 00:02:16,980
mikä on normaalia.

41
00:02:16,980 --> 00:02:21,170
Toisen div, nyt määritellä
toinen tyyli ominaisuus, joka on

42
00:02:21,170 --> 00:02:25,550
fonttikokoa 24 pikseliä, joten
hieman pienempi.

43
00:02:25,550 --> 00:02:28,410
Sulje lainauksia jälkeen puolipiste.

44
00:02:28,410 --> 00:02:33,255
>> Lopuksi tässä kolmannessa div, tehdään
tyyli vastaa lainaus, fontin kokoa, ja

45
00:02:33,255 --> 00:02:35,340
sanokaamme 12 pikseliä tällä kertaa.

46
00:02:35,340 --> 00:02:37,280
Sulje quote jälkeen puolipiste.

47
00:02:37,280 --> 00:02:40,200
Huomaa silloin, että olen ilmeisesti
määritelty hieman stilisointi varten

48
00:02:40,200 --> 00:02:43,770
kukin näistä kolmesta divs käyttäen,
se kääntyy pois, CSS.

49
00:02:43,770 --> 00:02:47,820
Itse asiassa, syntaksin että näet
näiden lainausmerkkeihin on CSS,

50
00:02:47,820 --> 00:02:50,620
erityisesti CSS-ominaisuuksia
arvojen kanssa.

51
00:02:50,620 --> 00:02:53,910
Ja että ensimmäinen merkintä, jossa minun piti
kaksi sellaisia ​​ominaisuuksia, fontin kokoa ja

52
00:02:53,910 --> 00:02:57,290
font paino, en yksinkertaisesti erotettu
ne puolipisteellä.

53
00:02:57,290 --> 00:02:59,940
>> Nyt, vain tyyli tähden, minä
myös puolipisteet at

54
00:02:59,940 --> 00:03:00,880
kunkin rivin lopussa.

55
00:03:00,880 --> 00:03:04,270
Mutta ne eivät ole ehdottoman välttämätöntä,
varsinkin kun sinulla on vain yksi

56
00:03:04,270 --> 00:03:05,580
omaisuutta määritelty.

57
00:03:05,580 --> 00:03:08,370
Katsotaanpa nyt tallenna tiedosto ja lataa
Chrome, ja katso, mitä

58
00:03:08,370 --> 00:03:11,000
nettovaikutus on.

59
00:03:11,000 --> 00:03:13,470
Back in Chrome täällä,
Katsotaanpa valitse Päivitä.

60
00:03:13,470 --> 00:03:15,800
>> Nyt meillä on hieman mielenkiintoisempi
kotisivulla John

61
00:03:15,800 --> 00:03:19,000
Harvard, jolloin ensimmäinen rivi kanssa
hänen nimensä, joka on sisällä, että

62
00:03:19,000 --> 00:03:23,470
Ensimmäinen div, on 36 pikseliä pitkä ja myös
lihavointia, jolloin toinen rivi,

63
00:03:23,470 --> 00:03:27,340
joka on tässä toisessa div, on 24
pikseliä korkea, mutta ei lihavoitu.

64
00:03:27,340 --> 00:03:31,500
Ja jolloin kolmannen rivin kyseisessä kolmannessa
div on 12 pikseliä pitkä ja myös

65
00:03:31,500 --> 00:03:32,610
ei lihavoitu.

66
00:03:32,610 --> 00:03:35,380
Mutta oletetaan nyt haluaisin siirtää
kaikki tämän tekstin yli

67
00:03:35,380 --> 00:03:36,650
siten, että se on keskitetty.

68
00:03:36,650 --> 00:03:40,480
>> Voisin mukauttaa kunkin yksittäisen
DIVs olevan keskellä.

69
00:03:40,480 --> 00:03:45,330
Mutta helpommin, voisin kietoa niitä
kolme divs sisällä neljäsosa div,

70
00:03:45,330 --> 00:03:49,360
vanhemman div, niin sanotusti, ja määritä
että div ja kaikki sen

71
00:03:49,360 --> 00:03:52,610
jälkeläisiä olisi
Tekstin linjassa keskustassa?

72
00:03:52,610 --> 00:03:54,120
Katsotaanpa katsomaan.

73
00:03:54,120 --> 00:03:58,510
>> Sisältä gedit, mennään takaisin minun
kehon ja lisätä uuden div ylös kanssa

74
00:03:58,510 --> 00:04:04,460
div, tyyli vastaa lainaus lainaus
text align keskustassa lähellä

75
00:04:04,460 --> 00:04:06,250
Lainaan jälkeen puolipiste.

76
00:04:06,250 --> 00:04:10,280
Ja nyt, mennään eteenpäin ja luetelmakohta kaikki
Näiden johtojen että me kirjoitetaan ennen.

77
00:04:10,280 --> 00:04:15,040
Ja sen alapuolella kolmannen div, katsotaanpa
Sulje tämä uusi div.

78
00:04:15,040 --> 00:04:18,829
>> Toisin sanoen, koska nämä kolme
alkuperäinen divs ovat nyt lapsia, niin

79
00:04:18,829 --> 00:04:22,110
sanotusti uusi emo div ja olen
täsmensi, että haluaisin kohdistaa

80
00:04:22,110 --> 00:04:26,140
teksti tämän emoyrityksen div keskellä
sivun, että omaisuus on

81
00:04:26,140 --> 00:04:28,290
perivät kaikki nämä lapset.

82
00:04:28,290 --> 00:04:32,370
Todellakin, nyt tallenna tiedosto ja
katsomaan selaimessa.

83
00:04:32,370 --> 00:04:34,650
Katsotaanpa uudelleen Chrome.

84
00:04:34,650 --> 00:04:37,540
Ja siellä meillä on, vielä mukavampaa
kotisivulla John Harvard.

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