1 00:00:00,000 --> 00:00:00,300 2 00:00:00,300 --> 00:00:04,840 >> SPEAKER: Joten se oikeastaan 窶銀€黍le paras suunnitella sekoittua CSS HTML. 3 00:00:04,840 --> 00:00:08,700 Pikemminkin se on parasta tekijﾃ､ ulos CSS, laita se jonnekin Keski-ja 4 00:00:08,700 --> 00:00:11,430 jotenkin soveltaa sitﾃ､ Tunnisteet Web-sivun. 5 00:00:11,430 --> 00:00:15,290 Tﾃ､mﾃ､n saavuttamiseksi, voimme todella lopettaa kﾃ､yttﾃ､en tyyliattribuutti ja sen sijaan 6 00:00:15,290 --> 00:00:19,290 Kﾃ､ytﾃ､ Style tag, joka kuuluu johtaja web-sivun ohella varten 7 00:00:19,290 --> 00:00:20,700 Esimerkiksi otsikko. 8 00:00:20,700 --> 00:00:24,400 >> Annetaanpa tﾃ､mﾃ､n kokeilla ja uudelleen toteuttaa kotisivun John Harvard 9 00:00:24,400 --> 00:00:26,410 kﾃ､yttﾃ､en Style tag. 10 00:00:26,410 --> 00:00:28,930 Olen jo saanut meidﾃ､t alkoi tﾃ､ﾃ､llﾃ､ kolme divs varten 11 00:00:28,930 --> 00:00:30,260 John Harvardin kotisivu. 12 00:00:30,260 --> 00:00:33,990 Mutta katsotaanpa ensin nyt mennﾃ､ jopa tﾃ､mﾃ､n ensimmﾃ､isen div ja lisﾃ､ﾃ､ uuden mﾃ､ﾃ､ritteen, 13 00:00:33,990 --> 00:00:38,680 eli ID, ja tﾃ､smennetﾃ､ﾃ､n, ettﾃ､ yksilﾃｶllinen tunniste tﾃ､hﾃ､n nimenomaiseen div 14 00:00:38,680 --> 00:00:42,390 on esimerkiksi lainaus lainaus "Top", mielivaltainen nimi, mutta 15 00:00:42,390 --> 00:00:45,840 kuvaileva, sillﾃ､ tﾃ､mﾃ､ div on todellakin ylﾃ､reunassa sivuni. 16 00:00:45,840 --> 00:00:48,920 >> Seuraavan div Annetaan sen eri ID lainaus lainaus 17 00:00:48,920 --> 00:00:54,080 "Keskellﾃ､" ja Annetaanpa kolmannen div ID lainaus lainaus "alhaalta". Me 18 00:00:54,080 --> 00:00:57,740 nyt kolme yksilﾃｶllinen tunniste johon voimme soveltaa joitakin CSS 19 00:00:57,740 --> 00:01:01,210 ominaisuuksia, mutta ensin on paluu pﾃ､ﾃ､hﾃ､n tﾃ､llﾃ､ sivulla. 20 00:01:01,210 --> 00:01:04,760 Ylﾃ､puolella otsikko tﾃ､ﾃ､llﾃ､, Otan mennﾃ､ eteenpﾃ､in ja mﾃ､ﾃ､ritellﾃ､ tyyli 21 00:01:04,760 --> 00:01:07,120 ja sulje tyyliin. 22 00:01:07,120 --> 00:01:10,340 >> Inside tﾃ､mﾃ､n nyt, aion mﾃ､ﾃ､ritellﾃ､ joitakin CSS-ominaisuuksia, eli 23 00:01:10,340 --> 00:01:14,550 samoja Olen aiemmin ollut Style attribuutteja, mutta tﾃ､ssﾃ､ he ovat 24 00:01:14,550 --> 00:01:16,320 keskitetysti mﾃ､ﾃ､ritelty. 25 00:01:16,320 --> 00:01:20,880 Voit tehdﾃ､ niin, aion mﾃ､ﾃ､ritellﾃ､ punnan symboli ja sen jﾃ､lkeen pﾃ､ﾃ､lle, jolloin 26 00:01:20,880 --> 00:01:24,710 tﾃ､smennetﾃ､ﾃ､n, ettﾃ､ seuraavat CSS ominaisuudet olisi sovellettava riippumatta 27 00:01:24,710 --> 00:01:28,800 HTML-elementti on ainutlaatuinen tunniste alkuun. 28 00:01:28,800 --> 00:01:32,240 Olen sitten menossa olla avoin ja suljettu aaltosulkeita, ja aion 29 00:01:32,240 --> 00:01:39,170 mﾃ､ﾃ､ritellﾃ､ vaikkapa fonttikoko on 36 pikseliﾃ､, fontti Painon on oltava rohkea. 30 00:01:39,170 --> 00:01:41,810 >> Pitﾃ､ﾃ､ asiat puhtaana, Laitan kunkin Nﾃ､iden ominaisuuksien nyt omasta 31 00:01:41,810 --> 00:01:44,610 linja, mutta se on vain tyylillisiﾃ､ sopimusta. 32 00:01:44,610 --> 00:01:47,830 Tﾃ､mﾃ､n alapuolella, nyt nyt mﾃ､ﾃ､rittﾃ､ﾃ､ toista valitsin, niin sanoakseni. 33 00:01:47,830 --> 00:01:52,680 Tﾃ､mﾃ､ yksi HTML-tunniste, joka on yksilﾃｶllinen tunniste keskellﾃ､. 34 00:01:52,680 --> 00:01:57,540 Ja tﾃ､ﾃ､llﾃ､, katsotaanpa mﾃ､ﾃ､ritﾃ､ fontin kokoa 24 pikseliﾃ､, alla, ettﾃ､ toinen 35 00:01:57,540 --> 00:02:01,520 valitsin pohja-, ja sisﾃ､ltﾃ､ Tﾃ､mﾃ､n, nyt mﾃ､ﾃ､ritellﾃ､ 36 00:02:01,520 --> 00:02:03,850 fonttikokoa 12 pikseliﾃ､. 37 00:02:03,850 --> 00:02:09,350 >> Katsotaanpa nyt tallentaa, muuttaa oikeuksia pﾃ､ﾃ､lle, ja lataa tﾃ､mﾃ､ sivu selaimessa, 38 00:02:09,350 --> 00:02:14,230 chmod plus r css-1.html. 39 00:02:14,230 --> 00:02:22,260 Avataan Chrome ja vierailla http://localhost/css-1.html. 40 00:02:22,260 --> 00:02:22,960 Ei paha. 41 00:02:22,960 --> 00:02:26,930 Juuri niin kuin on tarkoitettu, mutta haluaisin ottaa asiat askel pidemmﾃ､lle nyt ja 42 00:02:26,930 --> 00:02:29,050 keskusta John Harvardin tekstiﾃ､. 43 00:02:29,050 --> 00:02:32,080 Nyt tehdﾃ､ niin, voisin kietoa koko sivun div kuin minﾃ､ 44 00:02:32,080 --> 00:02:33,800 teki aiemmin esimerkki. 45 00:02:33,800 --> 00:02:37,820 Tai voin olla viisaampi ja ymmﾃ､rtﾃ､ﾃ､, ettﾃ､ kaikki nﾃ､mﾃ､ divs ovat sisﾃ､puolella 46 00:02:37,820 --> 00:02:42,420 sivuni ruumis, joten miksi ei vain sovelleta yksi tai useampi CSS-ominaisuuksia kehon 47 00:02:42,420 --> 00:02:43,850 tag itse? 48 00:02:43,850 --> 00:02:45,460 >> Voit tehdﾃ､ niin, tehdﾃ､ﾃ､n tﾃ､mﾃ､. 49 00:02:45,460 --> 00:02:47,650 Mennﾃ､ﾃ､n takaisin gedit tﾃ､ﾃ､llﾃ､. 50 00:02:47,650 --> 00:02:52,460 Katsotaanpa siirry takaisin ylﾃｶs tyyli tag, ja lﾃ､hdetﾃ､ﾃ､n mﾃ､ﾃ､ritﾃ､ valitsin juuri 51 00:02:52,460 --> 00:02:54,520 kyseisten elementtien nimi, Body. 52 00:02:54,520 --> 00:03:00,580 Alla, katsotaanpa laittaa meidﾃ､n aaltosulkeita seuraa text-align center. 53 00:03:00,580 --> 00:03:05,580 Katsotaanpa nyt tallentaa sivun ja lataa se sisﾃ､llﾃ､ kyseisen selaimen. 54 00:03:05,580 --> 00:03:08,090 Reload Chrome, ja voila. 55 00:03:08,090 --> 00:03:11,000 Meillﾃ､ on nyt John Harvardin sivu keskitetty kuten tarkoitettu. 56 00:03:11,000 --> 00:03:12,619