1 00:00:00,000 --> 00:00:00,300 2 00:00:00,300 --> 00:00:04,840 >> SPEAKER: Så det er faktisk ikke den beste designe å blander CSS med HTML. 3 00:00:04,840 --> 00:00:08,700 Snarere er det best å faktor ut CSS, sette den et sted sentralt, og 4 00:00:08,700 --> 00:00:11,430 liksom bruke den til kodene i din nettside. 5 00:00:11,430 --> 00:00:15,290 For å oppnå dette, kan vi faktisk stoppe bruker Stil attributtet og i stedet 6 00:00:15,290 --> 00:00:19,290 bruke en stil tag, som hører til i leder av en nettside sammen, for 7 00:00:19,290 --> 00:00:20,700 eksempel tittelen din. 8 00:00:20,700 --> 00:00:24,400 >> La oss gi dette en sjanse og re-implementere en startside for John Harvard 9 00:00:24,400 --> 00:00:26,410 bruker Stil tag. 10 00:00:26,410 --> 00:00:28,930 Jeg har allerede fått oss i gang her med tre divs for 11 00:00:28,930 --> 00:00:30,260 John Harvard sin hjemmeside. 12 00:00:30,260 --> 00:00:33,990 Men la oss først nå går opp til dette første div og legge til en ny attributt, 13 00:00:33,990 --> 00:00:38,680 nemlig ID, og ​​angir at en unik identifikator for denne spesielle div 14 00:00:38,680 --> 00:00:42,390 skal være, for eksempel, sitat unquote "Top", et vilkårlig navn, men 15 00:00:42,390 --> 00:00:45,840 beskrivende i at dette div er faktisk øverst på siden min. 16 00:00:45,840 --> 00:00:48,920 >> For neste div, la oss gi det en annen ID sitat unquote 17 00:00:48,920 --> 00:00:54,080 "Midten", og la oss gi den tredje div en ID sitat unquote "bunnen". Vi 18 00:00:54,080 --> 00:00:57,740 nå har tre unike identifikator som vi kan bruke noen CSS 19 00:00:57,740 --> 00:01:01,210 egenskaper, men først, la oss retur til hodet på denne siden. 20 00:01:01,210 --> 00:01:04,760 Like over tittelen her, vil jeg gå videre og definere stilen 21 00:01:04,760 --> 00:01:07,120 og deretter tett stil. 22 00:01:07,120 --> 00:01:10,340 >> Innsiden av dette nå, jeg kommer til å definere noen CSS egenskaper, nemlig 23 00:01:10,340 --> 00:01:14,550 samme som jeg tidligere hadde i stil attributter, men her vil de være 24 00:01:14,550 --> 00:01:16,320 sentralt definert. 25 00:01:16,320 --> 00:01:20,880 For å gjøre dette, kommer jeg til å oppgi pundet symbol etterfulgt av toppen, og dermed 26 00:01:20,880 --> 00:01:24,710 spesifiserer at følgende CSS eiendommer bør gjelde uansett 27 00:01:24,710 --> 00:01:28,800 HTML-element har den unike identifikator av toppen. 28 00:01:28,800 --> 00:01:32,240 Jeg deretter kommer til å ha noen åpne og lukkede klammeparentes, og jeg kommer til å 29 00:01:32,240 --> 00:01:39,170 spesifisere, si, skal skriftstørrelsen være 36 piksler, skal skrift vekt være fet. 30 00:01:39,170 --> 00:01:41,810 >> For å holde ting rent, jeg setter hver av disse eiendommene nå på egen hånd 31 00:01:41,810 --> 00:01:44,610 linje, men det er bare en stilistiske konvensjonen. 32 00:01:44,610 --> 00:01:47,830 Under dette, la oss nå definere en annen velgeren, så å si. 33 00:01:47,830 --> 00:01:52,680 Dette en for HTML-kode som har unik identifikator for midten. 34 00:01:52,680 --> 00:01:57,540 Og her, la oss angi en skriftstørrelse av 24 piksler, under den annen 35 00:01:57,540 --> 00:02:01,520 velger for bunnen, og inne av det, la oss angi en 36 00:02:01,520 --> 00:02:03,850 skriftstørrelse 12 piksler. 37 00:02:03,850 --> 00:02:09,350 >> La oss nå lagre, endre tillatelsene på, og laste inn denne siden i en nettleser, 38 00:02:09,350 --> 00:02:14,230 chmod et pluss r css-1.html. 39 00:02:14,230 --> 00:02:22,260 La oss åpne opp Chrome og besøk http://localhost/css-1.html. 40 00:02:22,260 --> 00:02:22,960 Ikke dårlig. 41 00:02:22,960 --> 00:02:26,930 Akkurat som jeg har planlagt, men jeg vil gjerne ta ting et skritt videre nå og 42 00:02:26,930 --> 00:02:29,050 senter John Harvards tekst. 43 00:02:29,050 --> 00:02:32,080 Nå for å gjøre det, kan jeg pakke inn hel side i en div som jeg 44 00:02:32,080 --> 00:02:33,800 gjorde et tidligere eksempel. 45 00:02:33,800 --> 00:02:37,820 Eller jeg kan være mer smart og innse at alle disse divs er innvendig 46 00:02:37,820 --> 00:02:42,420 siden min kropp, så hvorfor ikke bare gjelde en eller flere CSS-egenskaper til legemet 47 00:02:42,420 --> 00:02:43,850 tagge seg selv? 48 00:02:43,850 --> 00:02:45,460 >> For å gjøre dette, la oss gjøre dette. 49 00:02:45,460 --> 00:02:47,650 La oss gå tilbake til gedit her. 50 00:02:47,650 --> 00:02:52,460 La oss bla tilbake til stilen tag, og la oss angi en velger bare 51 00:02:52,460 --> 00:02:54,520 bruker koden navn, Body. 52 00:02:54,520 --> 00:03:00,580 Under det, la oss sette våre klammeparentes etterfulgt av text-align center. 53 00:03:00,580 --> 00:03:05,580 La oss nå lagre siden og laste det inne i den nettleseren. 54 00:03:05,580 --> 00:03:08,090 Reload i Chrome, og voila. 55 00:03:08,090 --> 00:03:11,000 Vi har nå John Harvard side sentrert som vi hadde tenkt. 56 00:03:11,000 --> 00:03:12,619