1 00:00:00,000 --> 00:00:05,660 >> [CHWARAE CERDDORIAETH] 2 00:00:05,660 --> 00:00:08,740 >> DOUG LLOYD: Felly gadewch i ni gymryd un yn fwy fideo i siarad am un iaith fwy. 3 00:00:08,740 --> 00:00:10,800 Y tro hwn byddwn yn siarad am y CSS. 4 00:00:10,800 --> 00:00:13,460 Felly CSS, sydd yn fyr am Rhaeadru Taflenni Arddull, 5 00:00:13,460 --> 00:00:16,149 yw iaith arall a ddefnyddiwn wrth lunio gwefannau. 6 00:00:16,149 --> 00:00:17,190 Meddyliwch am y peth fel hyn. 7 00:00:17,190 --> 00:00:20,900 Os HTML yw'r hyn yr ydym yn eu defnyddio i drefnu'r cynnwys yr ydym am ei roi ar ein tudalen, 8 00:00:20,900 --> 00:00:25,390 CSS yw'r offeryn yr ydym yn gyffredinol yn defnyddio i addasu sut mae ein gwefannau yn edrych, 9 00:00:25,390 --> 00:00:30,410 a sut y mae profiad y defnyddiwr 'n sylweddol yw, yn rhyngweithio â'n gwefan. 10 00:00:30,410 --> 00:00:32,535 >> Yn debyg i HTML, CSS yw Nid yw iaith raglennu. 11 00:00:32,535 --> 00:00:33,451 Nid oes ganddo rhesymeg. 12 00:00:33,451 --> 00:00:34,595 Nid oes ganddo newidynnau. 13 00:00:34,595 --> 00:00:38,890 Nid oes ganddo unrhyw fath o hynny llif pethau cysylltiedig y C yn ei wneud. 14 00:00:38,890 --> 00:00:40,150 Mae'n iaith steilio. 15 00:00:40,150 --> 00:00:42,810 Ac mae ei gystrawen yn eithaf syml, a dim ond yn disgrifio 16 00:00:42,810 --> 00:00:46,240 sut mae'r elfennau o'n dudalen wedi HTML penodol 17 00:00:46,240 --> 00:00:48,190 Dylai elfennau gael eu haddasu. 18 00:00:48,190 --> 00:00:51,170 I'r perwyl hwnnw, os nad oes gennych eto gwylio ein fideo ar HTML, 19 00:00:51,170 --> 00:00:53,290 neu sy'n anghyfarwydd â HTML yn gyffredinol, yr ydych 20 00:00:53,290 --> 00:00:57,430 efallai y byddant am gymryd golwg ar hynny yn gyntaf, oherwydd y drafodaeth hon y CSS 21 00:00:57,430 --> 00:01:00,700 yn mynd i ddibynnu ar peth gwybodaeth o HTML. 22 00:01:00,700 --> 00:01:03,740 >> Felly, dyma 'n sylweddol arddull CSS syml. 23 00:01:03,740 --> 00:01:06,480 Hyd yn oed os ydych erioed wedi rhaglennu gyda CSS o'r blaen, 24 00:01:06,480 --> 00:01:10,624 Rwy'n eithaf siwr y gallwch chyfrif i maes union beth arddull hwn yn ei wneud. 25 00:01:10,624 --> 00:01:11,290 Beth mae'n ei wneud? 26 00:01:11,290 --> 00:01:15,470 Wel, cymhwyso at y corff ein gwefan dudalen, popeth rhwng tagiau corff 27 00:01:15,470 --> 00:01:19,631 ar ein HTML, ac mae'n gosod y lliw cefndir y dudalen i las. 28 00:01:19,631 --> 00:01:21,130 Wel, mae'n arddull syml iawn. 29 00:01:21,130 --> 00:01:23,269 Mae'n mewn gwirionedd yn ddynol iawn iaith gyfeillgar, CSS. 30 00:01:23,269 --> 00:01:26,560 Felly hyd yn oed os nad ydych erioed wedi ei ddefnyddio o'r blaen, Mae'n debyg y gallech ddyfalu beth wnaeth hynny. 31 00:01:26,560 --> 00:01:30,140 Yn wir, os ydym llwytho dudalen, lle arddull hwn wreiddio rhywsut, 32 00:01:30,140 --> 00:01:36,240 y lliw cefndir ein dudalen byddai fod yn las, ac nid y gwyn safonol. 33 00:01:36,240 --> 00:01:37,670 >> Felly sut rydym yn adeiladu arddull? 34 00:01:37,670 --> 00:01:39,700 Wel yn gyntaf, mae'n rhaid i ni nodi detholydd. 35 00:01:39,700 --> 00:01:42,970 Yn yr enghraifft olaf, y detholydd gorff yn. 36 00:01:42,970 --> 00:01:45,050 Yna, mae gennym agored Brace cyrliog, ac rydym yn 37 00:01:45,050 --> 00:01:48,410 mynd i ddechrau diffinio'r arddull ar gyfer y dewisydd. 38 00:01:48,410 --> 00:01:51,800 Yn rhwng y braces cyrliog, rydym yn oes gen restr o barau gwerth allweddol. 39 00:01:51,800 --> 00:01:56,205 Mae'r pâr Gwerth blaenorol yn lliw cefndir hanner colon glas, 40 00:01:56,205 --> 00:01:57,830 ond gallem wneud mwy a mwy o'r rhain. 41 00:01:57,830 --> 00:02:02,330 Gallech gael pethau lluosog sy'n gwneud cais at y tag, hynny corff dewisydd. 42 00:02:02,330 --> 00:02:05,960 Mae pob un ohonynt yn cael ei gwahanu gan hanner colon, ac rydym yn galw pob un ohonynt 43 00:02:05,960 --> 00:02:08,949 datganiad, datganiad CSS. 44 00:02:08,949 --> 00:02:12,410 Pan rydym yn ei wneud gyda'r holl steilio ydym am wneud cais i'r tag penodol, 45 00:02:12,410 --> 00:02:15,300 rydym yn unig yn cael cyrliog cau Brace i roi terfyn ar yr arddull, 46 00:02:15,300 --> 00:02:19,640 ac rydym yn ei wneud diffinio'r arddull ar gyfer y detholwr penodol. 47 00:02:19,640 --> 00:02:21,341 >> Beth yw rhai eiddo CSS cyffredin? 48 00:02:21,341 --> 00:02:23,590 Wel, efallai y byddwch am roi border o gwmpas rhywbeth. 49 00:02:23,590 --> 00:02:26,850 Felly rydych yn gallu dweud, ar y ffin, byddai hynny'n eich allweddol, 50 00:02:26,850 --> 00:02:29,460 ac yna byddai eich gwerthoedd fod, pa arddull, lliw, a lled 51 00:02:29,460 --> 00:02:30,209 yr ydych am iddo fod. 52 00:02:30,209 --> 00:02:33,530 Felly gallai yr arddull fod yn solid llinell, llinell doredig, llinell doredig, 53 00:02:33,530 --> 00:02:36,020 llinell crib, a fyddai'n llinell donnog. 54 00:02:36,020 --> 00:02:38,790 Efallai eich bod am gael ei fod yn las neu'n du neu wyrdd. 55 00:02:38,790 --> 00:02:41,490 Efallai eich bod am iddo fod 1 neu 2 neu 10 picsel o led. 56 00:02:41,490 --> 00:02:43,254 Gallwch nodi pob un o'r pethau hynny. 57 00:02:43,254 --> 00:02:46,420 Efallai eich bod am osod y cefndir lliw eich dudalen mewn ffordd benodol. 58 00:02:46,420 --> 00:02:49,215 Rydym eisoes yn gweld bod, gan osod y cefndir i'r corff fod yn las. 59 00:02:49,215 --> 00:02:52,080 >> Yna gallwch ddefnyddio gair allweddol, felly CSS Mae lliwiau penodol 60 00:02:52,080 --> 00:02:55,950 sy'n cael eu hadeiladu i mewn iddo, glas, gwyrdd, du, lliwiau syml iawn y gwyddom. 61 00:02:55,950 --> 00:02:59,110 Ond gallwch hefyd nodi unrhyw lliw hecs y byddech yn ei hoffi. 62 00:02:59,110 --> 00:03:05,190 Dwyn i gof y gall lliwiau yn cael eu nodi gan set o dri rhif hecs 63 00:03:05,190 --> 00:03:08,500 0-255, rg a b, mae'r cydran coch, gwyrdd, a glas. 64 00:03:08,500 --> 00:03:10,590 Ac felly y gallwn bennu unrhyw liw yr ydym am yn ôl, 65 00:03:10,590 --> 00:03:15,520 yn hytrach na defnyddio glas neu wyrdd neu'n ddu, gan ddefnyddio bunt ac yna chwe digid o hecs, 66 00:03:15,520 --> 00:03:18,310 a fyddai'n rhoi i ni y lliw chwe digid. 67 00:03:18,310 --> 00:03:19,850 Felly dyna y lliw cefndir. 68 00:03:19,850 --> 00:03:21,975 >> Mae gennym hefyd y blaendir lliw, sydd fel arfer yn 69 00:03:21,975 --> 00:03:24,140 mynd i fod yn destun eich tudalen. 70 00:03:24,140 --> 00:03:28,850 A allech chi wneud hynny yn yr un modd gyda gair allweddol a neu chwech hecs digid. 71 00:03:28,850 --> 00:03:32,140 Felly, gallwch nodi unrhyw liw yr ydych eisiau ar gyfer destun eich tudalen 72 00:03:32,140 --> 00:03:36,370 yn erbyn arbennig lliw cefndir, i fyny uchod. 73 00:03:36,370 --> 00:03:39,100 Gallwch hefyd newid ac ymdrin gyda ffont, a'r modd testun 74 00:03:39,100 --> 00:03:40,400 ei rendro ar y dudalen. 75 00:03:40,400 --> 00:03:42,010 >> Felly, gallwch newid eich maint y ffont. 76 00:03:42,010 --> 00:03:46,320 Gallwch ddefnyddio geiriau allweddol, megis ychwanegol, ychwanegol bach, neu xx bach, neu gyfrwng, 77 00:03:46,320 --> 00:03:47,660 mawr, ac yn y blaen. 78 00:03:47,660 --> 00:03:50,750 Gallwch ddefnyddio bwyntiau sefydlog, 10 pwynt, 12 pwynt, ac yn y blaen. 79 00:03:50,750 --> 00:03:55,850 Gallwch ddefnyddio canrannau, 80%, 20%, lle mae 100% yw'r ffont rhagosodedig 80 00:03:55,850 --> 00:03:59,220 maint, sydd fel arfer yn mynd i fod yn rhywbeth fel 11 neu 12 o bwyntiau. 81 00:03:59,220 --> 00:04:01,659 Neu gallwch hyd yn oed seilio 'i off o'r maint y ffont mwyaf diweddar. 82 00:04:01,659 --> 00:04:04,950 Os ydych newydd ei ysgrifennu rhywbeth a ydych yn gwybod yr hyn yr ydych ei eisiau yw iddi fod yn llai, 83 00:04:04,950 --> 00:04:08,241 ond nid ydych yn gwybod beth yw maint yr ydych yn union am iddo fod, yn dda, byddwch yn gallu dim ond dweud, 84 00:04:08,241 --> 00:04:09,330 maint y ffont llai. 85 00:04:09,330 --> 00:04:14,344 A bydd yn seilio oddi ar y, dim ond i fyny uchod, mae'n maint y ffont. 86 00:04:14,344 --> 00:04:15,760 A gallwch gael llai neu fwy. 87 00:04:15,760 --> 00:04:18,390 Felly mae llawer o wahanol ffyrdd o bennu maint y ffont. 88 00:04:18,390 --> 00:04:20,690 >> Gallwch hefyd benodi beth teulu ffont ydych ei eisiau. 89 00:04:20,690 --> 00:04:23,360 Os oes gennych penodol enw, mae 'na ffordd CSS-- 90 00:04:23,360 --> 00:04:27,270 Nid ydym yn mynd i siarad am y peth Yma-- i ddiffinio ffont penodol iawn 91 00:04:27,270 --> 00:04:28,980 ac ymgorffori i mewn i'ch tudalen. 92 00:04:28,980 --> 00:04:30,620 Gallwch hefyd ddefnyddio enwau generig. 93 00:04:30,620 --> 00:04:33,540 Mae llawer o ffontiau diogel ar y we sy'n cael eu cyn-ddiffinio yn CSS. 94 00:04:33,540 --> 00:04:36,352 Ac os ydych yn ddefnyddiwr o Microsoft Swyddfa yn y 20 mlynedd diwethaf, 95 00:04:36,352 --> 00:04:38,810 Mae'n debyg eich bod yn gyfarwydd â llawer o'r rhain ffontiau diogel ar y we 96 00:04:38,810 --> 00:04:44,640 eisoes, Times New Roman, Arial, Negesydd Newydd, Georgia, Tahoma, Verdana, 97 00:04:44,640 --> 00:04:45,470 ac yn y blaen. 98 00:04:45,470 --> 00:04:47,170 Mae'r rhai i gyd yn cael eu hystyried ar y we ffontiau yn ddiogel. 99 00:04:47,170 --> 00:04:49,169 Ac mewn gwirionedd, yn rhan o'r daethant reswm i fod 100 00:04:49,169 --> 00:04:54,140 oedd i gael ei ddefnyddio i wneud web-- bob tudalen Roedd mynediad at ball hwn yn gosod o ffontiau 101 00:04:54,140 --> 00:04:58,480 gyda gwahanol serifs, ac mae hyn i gyd stwff ffont ni fyddwn yn mynd i mewn, 102 00:04:58,480 --> 00:05:01,130 ond mae'r rhain fel arfer hygyrch yn eich CSS, 103 00:05:01,130 --> 00:05:04,029 hyd yn oed os nad ydych yn ei wneud diffinio'r ffontiau fel arall. 104 00:05:04,029 --> 00:05:07,070 Yn olaf, gallwch alinio eich testun, yn hytrach ei fod, yn ddiofyn, cyd-fynd 105 00:05:07,070 --> 00:05:09,310 i'r chwith, gallech alinio i'r dde, 106 00:05:09,310 --> 00:05:13,740 neu fe allech chi alinio ei ganoli, neu gyfiawnhau fel ei fod yn taro y ddau ymylon. 107 00:05:13,740 --> 00:05:16,800 Felly, y rhai yn cael eu holl opsiynau y gallwch eu defnyddio i newid yr hyn eich testun yn edrych fel, 108 00:05:16,800 --> 00:05:20,120 a sut mae'n cael ei arddangos ar eich tudalen. 109 00:05:20,120 --> 00:05:22,180 >> Nid yw eich dewiswyr yn ei wneud rhaid i ni fod tagiau yn unig. 110 00:05:22,180 --> 00:05:25,539 Rydym eisoes yn gweld tag corff dewiswr, ac dewisydd tag 111 00:05:25,539 --> 00:05:26,580 ddim yn edrych yn union fel hynny. 112 00:05:26,580 --> 00:05:30,020 Rydych yn enwi tag, ac yna rydych ddiffinio arddull ar gyfer y tag. 113 00:05:30,020 --> 00:05:32,660 Ond gallwch hefyd wneud rhywbeth a elwir yn detholydd adnabod. 114 00:05:32,660 --> 00:05:34,390 Mae detholydd ID edrych yn eithaf tebyg. 115 00:05:34,390 --> 00:05:38,100 Ond yn sylwi, sydd bellach dydw i ddim yn defnyddio tag HTML, Im 'yn arfer, yn yr achos hwn, 116 00:05:38,100 --> 00:05:40,720 #unique, neu hash unigryw. 117 00:05:40,720 --> 00:05:42,930 Os cofiwch gan ein 'n fideo ar HTML, buom yn siarad 118 00:05:42,930 --> 00:05:45,620 am sut y gall tagiau gael priodoleddau. 119 00:05:45,620 --> 00:05:48,340 >> Ac un nodwedd sy'n berthnasol i 'n bert lawer pob tag HTML, 120 00:05:48,340 --> 00:05:51,440 ond doedden ni ddim yn siarad am y peth, yn rhywbeth a elwir tag adnabod. 121 00:05:51,440 --> 00:05:55,250 Felly, byddai hyn CSS arbennig berthnasol yn unig i HTML tag sydd wedi 122 00:05:55,250 --> 00:05:58,530 ID penodol iawn, eich bod wedi enwi. 123 00:05:58,530 --> 00:06:01,000 Felly os oes gennych rywle yn eich cod, yn rhywle 124 00:06:01,000 --> 00:06:06,090 yn eich ffeil HTML, tag a chi pennu fel nodwedd i'r tag, 125 00:06:06,090 --> 00:06:09,060 ID hafal unigryw, mae hyn yn arddull arbennig 126 00:06:09,060 --> 00:06:15,030 Bydd yma dim ond yn berthnasol yn y canol bod tag gyda'r ID unigryw o. 127 00:06:15,030 --> 00:06:17,180 >> Gallwch hefyd wneud rhywbeth a elwir yn detholydd dosbarth. 128 00:06:17,180 --> 00:06:19,920 Felly, yn ogystal â bod ID priodoleddau, gallwch hefyd 129 00:06:19,920 --> 00:06:23,130 ychwanegu priodoledd dosbarth i tagiau HTML. 130 00:06:23,130 --> 00:06:27,140 A phan fyddwch yn defnyddio priodoledd dosbarth, gellir ei gymhwyso i tagiau lluosog. 131 00:06:27,140 --> 00:06:31,880 Felly os oes gennych nifer o bethau y yn debyg, efallai eich bod am ei ddweud, 132 00:06:31,880 --> 00:06:35,890 blah tag agored, blah, blah, blah, dosbarth hafal myfyrwyr. 133 00:06:35,890 --> 00:06:38,190 Ac yna mae hyn arbennig Byddai arddull wneud cais 134 00:06:38,190 --> 00:06:42,041 i bob tag y mae eu dosbarth yn fyfyrwyr. 135 00:06:42,041 --> 00:06:44,290 Yn yr achos hwn, byddem yn gosod y lliw cefndir i melyn, 136 00:06:44,290 --> 00:06:46,706 a byddem yn gosod dywyllach, a oedd yn yw tag doedden ni ddim yn siarad am, 137 00:06:46,706 --> 00:06:52,510 ond dim ond yn ymdrin â sut dryloyw rhywbeth yw, i 70%, yn yr achos hwn. 138 00:06:52,510 --> 00:06:54,430 >> Mae dau ddewis ar gyfer arddull ysgrifennu. 139 00:06:54,430 --> 00:06:56,680 Gallwch eu ysgrifennu yn uniongyrchol i mewn i'ch HTML 140 00:06:56,680 --> 00:06:59,690 drwy osod y arddull rhwng tagiau arddull. 141 00:06:59,690 --> 00:07:03,850 A thagiau arddull y rhai yn mynd y tu mewn o y tagiau pennaeth eich tudalen we. 142 00:07:03,850 --> 00:07:08,240 Y ffordd efallai yn fwy dewisol i'w wneud y mae i ysgrifennu ffeil .css ar wahân, 143 00:07:08,240 --> 00:07:12,360 ac yna gysylltu i mewn i'ch dogfennu ddefnyddio tagiau cyswllt. 144 00:07:12,360 --> 00:07:14,690 Tagiau Link, unwaith eto, yn cael eu yn wahanol i hypergysylltiadau, 145 00:07:14,690 --> 00:07:16,760 os cofiwch oddi ein fideo yn HTML. 146 00:07:16,760 --> 00:07:19,030 A thagiau cyswllt yn sut yr ydym tynnu mewn ffeiliau ar wahân. 147 00:07:19,030 --> 00:07:23,900 Mae'n fath o fel yr hyn sy'n cyfateb y #include ar gyfer rhaglennu ar y we. 148 00:07:23,900 --> 00:07:27,140 >> Felly, gadewch i ni edrych ar table.HTML. 149 00:07:27,140 --> 00:07:29,380 Os cofiwch gan ein HTML fideo, yr wyf yn dangos 150 00:07:29,380 --> 00:07:32,000 enghraifft o iawn lluosi syml 151 00:07:32,000 --> 00:07:35,160 tabl a oedd yn edrych 'n bert hyll, ac efallai mae ' 152 00:07:35,160 --> 00:07:38,650 ffordd i'w gwneud yn well gyda CSS, i'w gwneud yn mewn gwirionedd yn edrych 153 00:07:38,650 --> 00:07:41,120 fwy fel lluosi bwrdd, neu rywbeth 154 00:07:41,120 --> 00:07:43,730 nad yw'n cael ei sownd at ei gilydd yn unig heb unrhyw rhaniad gwirioneddol 155 00:07:43,730 --> 00:07:45,532 rhwng y rhesi a'r colofnau. 156 00:07:45,532 --> 00:07:47,490 Felly gadewch i ni ben ar at CS50 IDE, ac yn edrych 157 00:07:47,490 --> 00:07:50,780 ar sut y gall CSS, rhyw fath o, tweak yr hyn rydym yn dechrau gyda blaen, 158 00:07:50,780 --> 00:07:53,290 a'i wneud yn rhywbeth llawer gwell. 159 00:07:53,290 --> 00:07:55,650 >> Felly rydym yn yn CS50 IDE erbyn hyn, ac os anghyfarwydd, 160 00:07:55,650 --> 00:07:58,710 byddwn yn tynnu i fyny yn hyn tabl y dudalen honno HTML. 161 00:07:58,710 --> 00:08:01,090 Table.HTML y bôn jyst yn diffinio'r cynnwys 162 00:08:01,090 --> 00:08:05,044 o multiple-- yr oedd i fod i fod yn tabl pedwar gan bedwar lluosi. 163 00:08:05,044 --> 00:08:06,210 Mae'n eithaf syml. 164 00:08:06,210 --> 00:08:09,410 A byddem yn meddwl y byddai'n edrych drefnu'n eithaf da. 165 00:08:09,410 --> 00:08:15,277 Ond mewn gwirionedd, pan fyddwn yn rhagolwg y dudalen hon, gwelwn ei fod yn fath o hyll, dde? 166 00:08:15,277 --> 00:08:16,860 Yn amlwg mae gennym rhesi a cholofnau yma. 167 00:08:16,860 --> 00:08:18,350 Mae rhyw fath o wahanu. 168 00:08:18,350 --> 00:08:20,040 Ond nid yw'n gwahaniad ystyrlon. 169 00:08:20,040 --> 00:08:23,105 Nid ydym yn ei gael mewn gwirionedd gormod o wybodaeth yma. 170 00:08:23,105 --> 00:08:25,730 A does dim gwahaniad rhwng y rhesi a cholofnau mewn termau 171 00:08:25,730 --> 00:08:28,460 o reolau llorweddol neu'n fertigol. 172 00:08:28,460 --> 00:08:31,530 Mae'n debyg y gallem wneud hyn edrych ychydig yn well. 173 00:08:31,530 --> 00:08:32,934 Felly gadewch i ni geisio. 174 00:08:32,934 --> 00:08:34,559 Felly, yr wyf i'n mynd i gau y tab hwn i fyny yma. 175 00:08:34,559 --> 00:08:37,434 Ac yr wyf i'n mynd i gau fy table.HTML, ac mae gen i fersiwn arall yma 176 00:08:37,434 --> 00:08:39,490 Gelwir table2.HTML. 177 00:08:39,490 --> 00:08:40,655 Byddwn yn agor bod hyd. 178 00:08:40,655 --> 00:08:42,530 Mae corff y dudalen hon yn 'n bert lawer yr un fath, 179 00:08:42,530 --> 00:08:44,238 ond rwyf wedi newid ychydig bach ar y brig. 180 00:08:44,238 --> 00:08:47,132 A byddaf sgrolio i fyny yma. 181 00:08:47,132 --> 00:08:49,340 Sylwch fod yr amser hwn, rwy'n ddefnyddio tagiau arddull wreiddio. 182 00:08:49,340 --> 00:08:53,550 Rydw i wedi agor tag arddull, ac rwy'n awr diffinio steil CSS ychydig y tu mewn 183 00:08:53,550 --> 00:08:54,310 ohono. 184 00:08:54,310 --> 00:08:56,310 Mae gen i arddull sy'n dweud, bwrdd. 185 00:08:56,310 --> 00:08:58,170 Dyna fy dewisydd tag. 186 00:08:58,170 --> 00:09:01,340 Dydw i ddim yn defnyddio dot neu hash, y byddwn yn ei wneud os byddaf 187 00:09:01,340 --> 00:09:03,710 Roedd gan ddefnyddio ID neu detholydd dosbarth. 188 00:09:03,710 --> 00:09:06,190 Mae gen i dabl Yma-- dewisydd tag. 189 00:09:06,190 --> 00:09:10,090 Mae'r arddull yn mynd i yn gymwys i bob tag bwrdd. 190 00:09:10,090 --> 00:09:14,950 Mae'n debyg yr wyf am roi un picsel o led, ar y ffin glas solet, 191 00:09:14,950 --> 00:09:15,779 y tu mewn fy mwrdd. 192 00:09:15,779 --> 00:09:18,320 Mae hynny'n swnio fel y byddai'n fwy na thebyg helpu'r sefyllfa, dde? 193 00:09:18,320 --> 00:09:20,320 Rydym yn mynd i gael pethau edrych yn llawer gwell. 194 00:09:20,320 --> 00:09:21,190 Felly mae hyn yn iawn. 195 00:09:21,190 --> 00:09:23,540 Arddull, rwyf wedi dim ond gwreiddio fy arddull yn fan hyn. 196 00:09:23,540 --> 00:09:25,100 Mae'n bendant yn ffordd dderbyniol i wneud hynny. 197 00:09:25,100 --> 00:09:26,391 Gadewch i ni weld beth mae hyn yn edrych fel. 198 00:09:26,391 --> 00:09:29,790 Felly, byddaf yn mynd yn ôl i lawr yma, ac 'N annhymerus' Bydd rhagolwg fy table2.HTML. 199 00:09:29,790 --> 00:09:32,430 200 00:09:32,430 --> 00:09:36,470 Wel, nid yw hynny'n hollol beth roeddwn eisiau, ond mae'n union yr hyn y gofynnodd yr ydym am. 201 00:09:36,470 --> 00:09:39,530 Rydym yn dweud bod y dull hwn yn mynd i wneud cais i ein bwrdd. 202 00:09:39,530 --> 00:09:43,810 Erbyn hyn mae gan ein bwrdd o un picsel eang y ffin glas, solid o'i gwmpas. 203 00:09:43,810 --> 00:09:46,237 Nid ydym yn ei gael mewn gwirionedd yn y celloedd y tabl. 204 00:09:46,237 --> 00:09:47,570 Rydym yn dim ond mynd wrth y bwrdd. 205 00:09:47,570 --> 00:09:49,310 Felly gweithiodd CSS. 206 00:09:49,310 --> 00:09:51,890 Mae wedi cymhwyso taflen arddull at ein bwrdd. 207 00:09:51,890 --> 00:09:53,981 Ond nid oedd yn eithaf yn ei wneud yr hyn yr ydym am ei wneud. 208 00:09:53,981 --> 00:09:55,730 Sut ydym yn cael i wneud yr hyn yr ydym am iddo ei wneud? 209 00:09:55,730 --> 00:09:59,287 >> Wel, gadewch i ni edrych ar un yn fwy Fersiwn o hyn yn table3.HTML. 210 00:09:59,287 --> 00:10:00,870 Felly Im 'jyst yn mynd i gau tabiau hyn. 211 00:10:00,870 --> 00:10:03,890 Rydw i'n mynd i fynd yn ôl dros yma at fy ffeil coed, ac yn agor i fyny table3.HTML. 212 00:10:03,890 --> 00:10:07,680 213 00:10:07,680 --> 00:10:10,350 Unwaith eto, mae'n mynd i edrych yn bert tebyg yma ar y dechrau. 214 00:10:10,350 --> 00:10:14,460 Ond rhybudd, y tro hwn, yn hytrach na defnyddio dalen steil hymgorffori i'r dde i mewn 'na, 215 00:10:14,460 --> 00:10:18,870 Rydw i'n mynd i gysylltu mewn arddull gan ddefnyddio'r tag ddolen. 216 00:10:18,870 --> 00:10:22,480 Felly rwy'n yn ôl pob golwg yn cysylltu mewn arddull a elwir yn tables.CSS, 217 00:10:22,480 --> 00:10:25,090 ac yn dychwelyd dda hon arddull unig yw-- yn dda, 218 00:10:25,090 --> 00:10:28,645 beth yw ffeil hwn gymharu â beth Rwy'n doing-- yn arddull fy mod 219 00:10:28,645 --> 00:10:29,821 ddefnyddio ar gyfer fy dudalen. 220 00:10:29,821 --> 00:10:32,320 Felly os Fi 'n sylweddol am weld beth Rwy'n gwneud gyda'r CSS yma, 221 00:10:32,320 --> 00:10:35,010 Angen i mi fynd yn agored bod table.CSS ffeil hefyd. 222 00:10:35,010 --> 00:10:37,490 Felly, byddwn yn mynd yn ôl dros yma unwaith eto at ein coeden ffeil. 223 00:10:37,490 --> 00:10:38,660 Mae table.CSS. 224 00:10:38,660 --> 00:10:40,490 Byddwn yn pop ar agor. 225 00:10:40,490 --> 00:10:43,070 Nawr rydym yn gweld ychydig o'r CSS. 226 00:10:43,070 --> 00:10:45,630 Mae'n debyg, mae gen i gwpl o bethau yn digwydd yma. 227 00:10:45,630 --> 00:10:48,950 Rwyf yn ôl pob golwg yn awyddus i roi pump picsel o led, border coch solet, 228 00:10:48,950 --> 00:10:50,287 o amgylch fy mwrdd. 229 00:10:50,287 --> 00:10:52,870 Rydym eisoes yn gwybod bod hynny'n mynd i ddim ond mynd ar y perimedr. 230 00:10:52,870 --> 00:10:56,180 Gwelsom hynny yn table2.HTML. 231 00:10:56,180 --> 00:10:58,770 Gyda mhob rhes, yr wyf yn yn ôl pob golwg yn awyddus i bennu 232 00:10:58,770 --> 00:11:01,950 bod uchder rhes yn 50 picsel uchel. 233 00:11:01,950 --> 00:11:05,680 Felly, ar gyfer pob rhes, cofiwch dyna beth y tag tr ei wneud, 234 00:11:05,680 --> 00:11:08,550 Im 'yn ei gwneud yn 50 picsel uchel. 235 00:11:08,550 --> 00:11:09,804 >> Yn olaf, mae gennyf y sylw hwn. 236 00:11:09,804 --> 00:11:11,470 Ac mae hyn yw sut yr ydym yn gwneud sylwadau yn CSS. 237 00:11:11,470 --> 00:11:16,174 Mae'n debyg iawn i atafaelu bloc Sylwadau seren slaes chystrawen. 238 00:11:16,174 --> 00:11:17,090 Mae'r holl y testun rydych ei eisiau. 239 00:11:17,090 --> 00:11:19,470 Does dim slaes slaes er yn CSS. 240 00:11:19,470 --> 00:11:23,400 Ar gyfer sylwadau unol fyr, rydym wedi i ddefnyddio'r fformat penodol yma. 241 00:11:23,400 --> 00:11:26,830 Mae'n edrych fel fy mod yn gwneud yn llawer o bethau yn fy tagiau td. 242 00:11:26,830 --> 00:11:29,710 Cofiwch tagiau TD, neu dabl data, sydd mewn gwirionedd yn unig 243 00:11:29,710 --> 00:11:32,210 y colofnau tu mewn ein rhesi, ac i bob golwg 244 00:11:32,210 --> 00:11:35,090 ar gyfer pob darn o ddata yn fy bwrdd, yr wyf am 245 00:11:35,090 --> 00:11:38,850 i osod y lliw cefndir i fod yn ddu, y lliw i fod yn wyn, 246 00:11:38,850 --> 00:11:40,320 lliw yn lliw blaendir. 247 00:11:40,320 --> 00:11:42,360 Felly, mae hyn yn mynd i fod destun fy dudalen. 248 00:11:42,360 --> 00:11:45,140 Rwyf am ffont mawr, 22 pwyntio ffont, ac yr wyf am 249 00:11:45,140 --> 00:11:47,001 ei fod o'r teulu ffont, Georgia. 250 00:11:47,001 --> 00:11:48,750 Felly, nid wyf ddim yn mynd i yn cael y ffont rhagosodedig. 251 00:11:48,750 --> 00:11:51,820 Rydw i'n mynd i bennu Georgia, a oedd yn yn un o'r rhai we ffontiau diogel 252 00:11:51,820 --> 00:11:53,830 ein bod ni wedi ei weld o'r blaen. 253 00:11:53,830 --> 00:11:57,284 Rwyf am fy testun i gyd-fynd yn ganolog, yng nghanol y blwch, 254 00:11:57,284 --> 00:11:59,450 Nid wyf am iddo gael ei adael alinio neu alinio i'r dde. 255 00:11:59,450 --> 00:12:03,461 Ac yr wyf am i fy lled y golofn i fod yn 50 picsel o led hefyd. 256 00:12:03,461 --> 00:12:05,210 Gadewch i ni edrych ar beth mae hyn yn edrych fel, 257 00:12:05,210 --> 00:12:07,470 i weld os yw hyn yn bosib yn welliant. 258 00:12:07,470 --> 00:12:12,890 Felly, yr wyf i'n mynd i fynd i table3.HTML, a oedd yn dwyn i gof, yn cynnwys table.CSS fel cyswllt, 259 00:12:12,890 --> 00:12:14,830 a byddwn yn rhagolwg ei. 260 00:12:14,830 --> 00:12:16,800 Mae hynny'n llawer gwell, dde? 261 00:12:16,800 --> 00:12:20,004 Mae hyn mewn gwirionedd yn dechrau edrych yn llawer mwy fel tabl lluosi. 262 00:12:20,004 --> 00:12:21,920 Mae gen i fod ffin coch o amgylch fy mwrdd ond erbyn hyn 263 00:12:21,920 --> 00:12:26,700 Rwyf hefyd wedi nodi y pob rhes yn 50 picsel o led, 264 00:12:26,700 --> 00:12:30,220 neu ei fod yn 50 picsel tall-- esgus me-- pob colofn yn 50 picsel o led. 265 00:12:30,220 --> 00:12:34,251 Mae'r data ym mhob colofn, a dim ond y data, gefndir du. 266 00:12:34,251 --> 00:12:36,000 Felly dyna pam y rhai llinellau gwyn yno. 267 00:12:36,000 --> 00:12:38,836 Oherwydd bod y gofod yn rhwng yr holl gelloedd hynny, 268 00:12:38,836 --> 00:12:40,710 Nid ei fod yn ffin yn ac o ei hun, 'i' jyst 269 00:12:40,710 --> 00:12:43,170 Im 'dim ond llenwi'r celloedd, sydd mewn gwirionedd 270 00:12:43,170 --> 00:12:46,310 yn gwneud y ffiniau y tabl, a oedd yn mae'n debyg yn bodoli ar hyd, mae'n 271 00:12:46,310 --> 00:12:47,887 Roedd llinellau gwyn yn unig tenau. 272 00:12:47,887 --> 00:12:48,720 Nawr maen nhw'n weladwy. 273 00:12:48,720 --> 00:12:50,380 Erbyn hyn maent pop i ffwrdd ar y sgrin. 274 00:12:50,380 --> 00:12:52,920 Ac felly mae hyn yn syml iawn arddull yr wyf wedi gwneud cais, 275 00:12:52,920 --> 00:12:56,850 ac yn awr fy mwrdd yn edrych yn llawer mwy tebyg tabl pedwar gan bedwar lluosi, 276 00:12:56,850 --> 00:13:00,950 yn hytrach na dim ond llanast blêr, lle popeth yn rhesi a cholofnau yn glir, 277 00:13:00,950 --> 00:13:03,717 ond drefnu'n nid super dda. 278 00:13:03,717 --> 00:13:06,800 Rydym yn wir yn unig crafu'r wyneb o'r hyn y gallwch ei wneud gyda'r CSS yma. 279 00:13:06,800 --> 00:13:10,330 Yn ffodus y ddogfennaeth CSS yn eithaf syml. 280 00:13:10,330 --> 00:13:14,000 Byddwch yn defnyddio sawl un o'i priodoleddau, yn deg yn aml. 281 00:13:14,000 --> 00:13:16,087 Y rhai yr ydym yn siarad am yn gynharach yn y fideo hwn. 282 00:13:16,087 --> 00:13:18,170 Mae sawl bod chi Mae'n debyg na fydd yn defnyddio pob. 283 00:13:18,170 --> 00:13:19,469 Ac mae hynny'n iawn, hefyd. 284 00:13:19,469 --> 00:13:22,010 Ond dim ond yn gwybod, bod yna llawer o ddogfennau i maes 'na. 285 00:13:22,010 --> 00:13:25,110 Felly hyd yn oed os nad oeddem yn cwmpasu popeth, Yn sicr, nid ydych yn gadael ar eich pen eich hun. 286 00:13:25,110 --> 00:13:26,780 Ond mae CSS yn llawer o hwyl i arbrofi gyda. 287 00:13:26,780 --> 00:13:29,040 A byddwn yn eich annog yn gryf i chwarae o gwmpas gyda eich tudalennau gwe, 288 00:13:29,040 --> 00:13:32,180 a gweld sut y gallwch eu gwneud edrych ac yn teimlo i wella'r defnyddiwr 289 00:13:32,180 --> 00:13:34,790 profiad o ymweld eich tudalen. 290 00:13:34,790 --> 00:13:35,710 Rwy'n Doug Lloyd. 291 00:13:35,710 --> 00:13:37,980 Mae hyn yn CS50. 292 00:13:37,980 --> 00:13:40,151