1 00:00:00,000 --> 00:00:05,660 >> [Muzika] 2 00:00:05,660 --> 00:00:08,740 >> DOUG Lloyd: Pra, le të marrin një të tillë më shumë Video për të folur për një gjuhë më shumë. 3 00:00:08,740 --> 00:00:10,800 Këtë herë ne do të flasim për CSS. 4 00:00:10,800 --> 00:00:13,460 Pra CSS, e cila është e shkurtër për Cascading Style Sheets, 5 00:00:13,460 --> 00:00:16,149 është një gjuhë që ne përdorim kur ndërtimin e faqet e internetit. 6 00:00:16,149 --> 00:00:17,190 Mendoni për këtë si kjo. 7 00:00:17,190 --> 00:00:20,900 Nqs HTML është ajo që ne përdorim për të organizojë Përmbajtja ne duam të vënë në faqen tonë, 8 00:00:20,900 --> 00:00:25,390 CSS është mjet që ne në përgjithësi përdorin për të rregulloje se si duken faqet tona, 9 00:00:25,390 --> 00:00:30,410 dhe se si user experience me të vërtetë është, që ndërveprojnë me faqen tonë të internetit. 10 00:00:30,410 --> 00:00:32,535 >> Ngjashëm me HTML, CSS është jo një gjuhë programimi. 11 00:00:32,535 --> 00:00:33,451 Kjo nuk ka logjikë. 12 00:00:33,451 --> 00:00:34,595 Ajo nuk ka variablave. 13 00:00:34,595 --> 00:00:38,890 Ajo nuk ka asnjë lloj që rrjedhin gjërat që lidhen se C bën. 14 00:00:38,890 --> 00:00:40,150 Është një gjuhë styling. 15 00:00:40,150 --> 00:00:42,810 Dhe sintaksa e tij është shumë e të thjeshtë, dhe vetëm përshkruan 16 00:00:42,810 --> 00:00:46,240 si elementet e tonë faqe kanë HTML caktuar 17 00:00:46,240 --> 00:00:48,190 elemente duhet të modifikohet. 18 00:00:48,190 --> 00:00:51,170 Për këtë qëllim, në qoftë se ju nuk e keni por shikuar video tonë në HTML, 19 00:00:51,170 --> 00:00:53,290 ose janë të panjohur me HTML në përgjithësi, ju 20 00:00:53,290 --> 00:00:57,430 mund të dëshironi të hidhni një sy në atë së pari, për shkak se ky diskutim të CSS 21 00:00:57,430 --> 00:01:00,700 do të varet nga disa njohuri të HTML. 22 00:01:00,700 --> 00:01:03,740 >> Kështu që këtu është një të vërtetë thjeshtë stylesheet CSS. 23 00:01:03,740 --> 00:01:06,480 Edhe në qoftë se ju kurrë nuk kam programuar me CSS para, 24 00:01:06,480 --> 00:01:10,624 Unë jam goxha i sigurt që ju mund të kuptoj se pikërisht ajo që e bën këtë stylesheet. 25 00:01:10,624 --> 00:01:11,290 Çfarë do të bëni? 26 00:01:11,290 --> 00:01:15,470 E pra, aplikuar në trupin e faqen tonë faqe, çdo gjë në mes tags trupit 27 00:01:15,470 --> 00:01:19,631 në HTML tonë, dhe ajo përcakton ngjyrën e sfondit e kësaj faqe në blu. 28 00:01:19,631 --> 00:01:21,130 E pra, kjo është një stylesheet shumë e thjeshtë. 29 00:01:21,130 --> 00:01:23,269 Është në fakt shumë e njeriut gjuha miqësore, CSS. 30 00:01:23,269 --> 00:01:26,560 Pra, edhe në qoftë se ju nuk e kam përdorur atë më parë, ju ndoshta mund të me mend se çfarë ajo e bëri. 31 00:01:26,560 --> 00:01:30,140 Në fakt, në qoftë se ne të ngarkuar një faqe, ku kjo stylesheet ishte ngulitur disi, 32 00:01:30,140 --> 00:01:36,240 ngjyra e sfondit të faqes tonë do të të jetë blu, dhe jo standarde të bardhë. 33 00:01:36,240 --> 00:01:37,670 >> Pra, si nuk kemi ndërtuar stili? 34 00:01:37,670 --> 00:01:39,700 E pra së pari, ne duhet të identifikojnë një përzgjedhës. 35 00:01:39,700 --> 00:01:42,970 Në shembullin e fundit, se përzgjedhës ishte trupi. 36 00:01:42,970 --> 00:01:45,050 Pastaj ne kemi një të hapur mbajtëse kaçurrel, dhe ne jemi 37 00:01:45,050 --> 00:01:48,410 do të fillojë përcaktimi i stylesheet për këtë përzgjedhës. 38 00:01:48,410 --> 00:01:51,800 Në mes të formatimin e teksteve kaçurrel, ne vetëm të ketë një listë të çifte të rëndësishme me vlerë. 39 00:01:51,800 --> 00:01:56,205 Dyshja Vlera e mëparshëm ishte ngjyrën e sfondit pikëpresje blu, 40 00:01:56,205 --> 00:01:57,830 por ne mund të bëjmë më shumë dhe më shumë prej tyre. 41 00:01:57,830 --> 00:02:02,330 Ju mund të keni gjëra të shumta të aplikoni për këtë tag, atij organi përzgjedhës. 42 00:02:02,330 --> 00:02:05,960 Secili prej tyre është e ndarë nga a pikëpresje, dhe ne e quajmë secili prej tyre 43 00:02:05,960 --> 00:02:08,949 një deklaratë, një deklaratë CSS. 44 00:02:08,949 --> 00:02:12,410 Kur ne jemi duke bërë me të gjitha styling ne e duan të aplikojnë për këtë tag të veçantë, 45 00:02:12,410 --> 00:02:15,300 ne vetëm duhet një kaçurrel mbylljes shtrëngoj për t'i dhënë fund stylesheet, 46 00:02:15,300 --> 00:02:19,640 dhe ne jemi duke bërë përcaktimin e stylesheet për këtë përzgjedhës të veçantë. 47 00:02:19,640 --> 00:02:21,341 >> Cilat janë disa prona të përbashkëta CSS? 48 00:02:21,341 --> 00:02:23,590 E pra, ndoshta ju doni të vendosni një kufi rreth diçkaje. 49 00:02:23,590 --> 00:02:26,850 Kështu që ju mund të thoni, kufirit, që do të jetë çelësi yt, 50 00:02:26,850 --> 00:02:29,460 dhe pastaj vlerat e tua do të jetë, çfarë stil, ngjyra, dhe gjerësi 51 00:02:29,460 --> 00:02:30,209 ju doni që ajo të jetë. 52 00:02:30,209 --> 00:02:33,530 Pra, stili mund të jetë një të ngurta line, një vijë me pika, një linjë thye, 53 00:02:33,530 --> 00:02:36,020 një linjë kurriz, e cila do të jetë linjë me onde. 54 00:02:36,020 --> 00:02:38,790 Ndoshta ju doni të keni atë të jenë blu ose të zezë apo të gjelbër. 55 00:02:38,790 --> 00:02:41,490 Ndoshta ju dëshironi që ajo të jetë 1 ose 2 ose 10 gjerë piksel. 56 00:02:41,490 --> 00:02:43,254 Ju mund të specifikoni të gjitha ato gjëra. 57 00:02:43,254 --> 00:02:46,420 Ndoshta ju doni të vendosur në sfond ngjyra e faqen tuaj në një mënyrë të veçantë. 58 00:02:46,420 --> 00:02:49,215 Ne tashmë e pamë se, vendosjen e sfond i trupit të jetë blu. 59 00:02:49,215 --> 00:02:52,080 >> Atëherë ju mund të përdorni një fjalë kyçe, kështu CSS ka ngjyra të caktuara 60 00:02:52,080 --> 00:02:55,950 që janë ndërtuar në të, blu, jeshile, e zezë, një ngjyra shumë të thjeshtë që dinë. 61 00:02:55,950 --> 00:02:59,110 Por ju gjithashtu mund të specifikoni ndonjë ngjyra magji që ju dëshironi. 62 00:02:59,110 --> 00:03:05,190 Kujtojnë se ngjyra mund të identifikohet nga një grup i tre numra magji 63 00:03:05,190 --> 00:03:08,500 nga 0 deri ne 255, dhe unaza B, kuqe, jeshile, blu dhe komponent. 64 00:03:08,500 --> 00:03:10,590 Dhe kështu që ne mund të specifikojë çdo ngjyrë duam nga, 65 00:03:10,590 --> 00:03:15,520 në vend të përdorimit blu apo të gjelbër apo të zi, duke përdorur kile dhe pastaj gjashtë shifrat e magji, 66 00:03:15,520 --> 00:03:18,310 dhe që do të na japë gjashtë shifra ngjyra. 67 00:03:18,310 --> 00:03:19,850 Pra, kjo është ngjyra e sfondit. 68 00:03:19,850 --> 00:03:21,975 >> Ne gjithashtu kemi plan të parë ngjyra, e cila është zakonisht 69 00:03:21,975 --> 00:03:24,140 do të jetë teksti i faqes tuaj. 70 00:03:24,140 --> 00:03:28,850 Dhe ju mund të bëni në mënyrë të ngjashme që me fjalë kyçe dhe ose gjashtë shifror magji. 71 00:03:28,850 --> 00:03:32,140 Kështu që ju mund të specifikoni ndonjë ngjyrë që ju duan për tekstin e faqes tuaj 72 00:03:32,140 --> 00:03:36,370 kundër një të veçantë ngjyra e sfondit, lart. 73 00:03:36,370 --> 00:03:39,100 Ju gjithashtu mund të ndryshojë dhe të merren me font, dhe teksti mënyrë 74 00:03:39,100 --> 00:03:40,400 është dhënë në faqe. 75 00:03:40,400 --> 00:03:42,010 >> Kështu që ju mund të ndryshojë madhësinë e shkronjave tuaj. 76 00:03:42,010 --> 00:03:46,320 Ju mund të përdorni fjalë kyçe, të tilla si ekstra, shtesë të vogël, apo të xx të vogla, apo të mesme, 77 00:03:46,320 --> 00:03:47,660 të mëdha, dhe kështu me radhë. 78 00:03:47,660 --> 00:03:50,750 Ju mund të përdorni pikë fikse, 10 pikë, 12 pikë, dhe kështu me radhë. 79 00:03:50,750 --> 00:03:55,850 Ju mund të përdorni përqindjet, 80%, 20%, ku 100% është font i parazgjedhur 80 00:03:55,850 --> 00:03:59,220 madhësia, e cila zakonisht do të të jetë diçka si 11 apo 12 pikë. 81 00:03:59,220 --> 00:04:01,659 Ose ju mund edhe të bazojnë atë e madhësisë më të fundit font. 82 00:04:01,659 --> 00:04:04,950 Në qoftë se ju vetëm të shkruar diçka dhe ju e dini ajo që ju dëshironi është që ajo të jetë më i vogël, 83 00:04:04,950 --> 00:04:08,241 por ju nuk e dini saktësisht se çfarë Madhësia ju duan që ajo të jetë, mirë, ju mund të them vetëm, 84 00:04:08,241 --> 00:04:09,330 font size të vogla. 85 00:04:09,330 --> 00:04:14,344 Dhe kjo do të bazojë jashtë e, vetëm lart, kjo është madhësia e shkronjave. 86 00:04:14,344 --> 00:04:15,760 Dhe ju mund të merrni më të vogla ose më të mëdha. 87 00:04:15,760 --> 00:04:18,390 Pra, ka një shumë të ndryshme mënyra për të specifikojë madhësinë e shkronjave. 88 00:04:18,390 --> 00:04:20,690 >> Ju gjithashtu mund të specifikojë se çfarë Familja font që ju dëshironi. 89 00:04:20,690 --> 00:04:23,360 Nëse keni një të veçantë emri, ka një mënyrë në CSS-- 90 00:04:23,360 --> 00:04:27,270 ne nuk jemi duke shkuar për të folur në lidhje me të here-- për të përcaktuar një font shumë të veçantë 91 00:04:27,270 --> 00:04:28,980 dhe embed atë në faqen tuaj. 92 00:04:28,980 --> 00:04:30,620 Ju gjithashtu mund të përdorni emra të përgjithshme. 93 00:04:30,620 --> 00:04:33,540 Nuk është një shumë e web fonts sigurta që janë të para-përcaktuar në CSS. 94 00:04:33,540 --> 00:04:36,352 Dhe në qoftë se ju jeni një përdorues të Microsoft Zyra në 20 vitet e fundit, 95 00:04:36,352 --> 00:04:38,810 ju ndoshta jeni njohur me një shumë prej këtyre web fonts sigurta 96 00:04:38,810 --> 00:04:44,640 tashmë, Times New Roman, Arial, Courier New, Gjeorgjinë, Tahoma, Verdana, 97 00:04:44,640 --> 00:04:45,470 dhe kështu me radhë. 98 00:04:45,470 --> 00:04:47,170 Ata janë konsideruar të gjitha web fonts sigurta. 99 00:04:47,170 --> 00:04:49,169 Dhe në fakt, pjesë e arsye ata erdhën në jetë 100 00:04:49,169 --> 00:04:54,140 është për t'u përdorur për të bërë web-- çdo faqe kishin qasje në këtë mungesë të vendosur e fonts 101 00:04:54,140 --> 00:04:58,480 me serifs të ndryshme, dhe e gjithë kjo sende font ne nuk do të marrë në, 102 00:04:58,480 --> 00:05:01,130 por këto janë zakonisht qasshme në CSS tuaj, 103 00:05:01,130 --> 00:05:04,029 edhe në qoftë se ju nuk e bëni përndryshe definojnë fonts. 104 00:05:04,029 --> 00:05:07,070 Së fundi, ju mund të lidhur tekstin tuaj, në vend të tij të qenit, by default, një linjë 105 00:05:07,070 --> 00:05:09,310 të majtë, ju mund të lidhur atë në të djathtë, 106 00:05:09,310 --> 00:05:13,740 ose ju mund të lidhur atë në qendër, ose justifikohet në mënyrë që ajo goditi dy kufijtë. 107 00:05:13,740 --> 00:05:16,800 Pra, ato janë të gjitha opsionet që ju mund të përdorni për të ndryshuar atë që tekstin tuaj si duket, 108 00:05:16,800 --> 00:05:20,120 dhe se si është shfaqur në faqen tuaj. 109 00:05:20,120 --> 00:05:22,180 >> Selectors tu nuk duhet të jetë vetëm tags. 110 00:05:22,180 --> 00:05:25,539 Ne më parë pamë një tag trupit përzgjedhës, dhe tag përzgjedhës 111 00:05:25,539 --> 00:05:26,580 nuk duket vetëm si kjo. 112 00:05:26,580 --> 00:05:30,020 Ju emrin një tag, dhe pastaj ju të përcaktojë një stylesheet për këtë tag. 113 00:05:30,020 --> 00:05:32,660 Por ju mund të bëni diçka quhet përzgjedhës ID. 114 00:05:32,660 --> 00:05:34,390 Një përzgjedhës ID duket goxha i ngjashëm. 115 00:05:34,390 --> 00:05:38,100 Por vini re, se tani unë nuk jam duke përdorur një tag HTML, unë jam duke përdorur, në këtë rast, 116 00:05:38,100 --> 00:05:40,720 #unique, ose të hash unik. 117 00:05:40,720 --> 00:05:42,930 Nëse ju kujtohet nga tonë video mbi HTML, kemi biseduar 118 00:05:42,930 --> 00:05:45,620 për mënyrën se si tags mund të ketë atributet. 119 00:05:45,620 --> 00:05:48,340 >> Dhe një atribut që vlen për shumë e shumë të gjithë tags HTML, 120 00:05:48,340 --> 00:05:51,440 por ne nuk flasim për këtë, është diçka që quhet një tag ID. 121 00:05:51,440 --> 00:05:55,250 Pra, kjo CSS veçantë do zbatohen vetëm për HTML tag që ka 122 00:05:55,250 --> 00:05:58,530 një ID shumë specifike, që e keni emrin. 123 00:05:58,530 --> 00:06:01,000 Pra, nëse ju keni diku në kodin tuaj, diku 124 00:06:01,000 --> 00:06:06,090 në dosjen tuaj HTML, një tag dhe jush specifikoni si një atribut për këtë tag, 125 00:06:06,090 --> 00:06:09,060 ID e barabartë unike, kjo stylesheet të veçantë 126 00:06:09,060 --> 00:06:15,030 këtu do të zbatohen vetëm në mes që tag me ID e unik. 127 00:06:15,030 --> 00:06:17,180 >> Ju gjithashtu mund të bëni diçka quajtur një përzgjedhës klasë. 128 00:06:17,180 --> 00:06:19,920 Pra, përveç që ka ID atributet, ju gjithashtu mund të 129 00:06:19,920 --> 00:06:23,130 shtoni një atribut të klasit të HTML tags. 130 00:06:23,130 --> 00:06:27,140 Dhe kur ju përdorni një atribut të klasës, ajo mund të aplikohet në tags shumta. 131 00:06:27,140 --> 00:06:31,880 Pra, nëse ju keni disa gjëra që janë të ngjashme, ndoshta ju doni të thoni, 132 00:06:31,880 --> 00:06:35,890 tag hapur llafe, llafe, llafe, llafe, klasë është e barabartë me studentët. 133 00:06:35,890 --> 00:06:38,190 Dhe pastaj kjo të veçantë stylesheet do të zbatohet 134 00:06:38,190 --> 00:06:42,041 për çdo tag klasë të cilit është nxënës. 135 00:06:42,041 --> 00:06:44,290 Në këtë rast, ne do të vendosur background të verdhë, 136 00:06:44,290 --> 00:06:46,706 dhe ne do të vënë perde, e cila është një tag ne nuk flasim për, 137 00:06:46,706 --> 00:06:52,510 por vetëm merret me sa transparente diçka është, në 70%, në këtë rast. 138 00:06:52,510 --> 00:06:54,430 >> Ka dy opsione për shkrim Stylesheets. 139 00:06:54,430 --> 00:06:56,680 Ju mund të shkruani ato direkt në HTML tuaj 140 00:06:56,680 --> 00:06:59,690 duke e vendosur stili në mes tags stil. 141 00:06:59,690 --> 00:07:03,850 Dhe këto tags stil të shkojnë në brendësi të tags kreu i faqes tuaj web. 142 00:07:03,850 --> 00:07:08,240 Mënyra ndoshta më e preferuar për të bërë kjo është për të shkruar një skedar të veçantë .css, 143 00:07:08,240 --> 00:07:12,360 dhe pastaj të lidhë atë në tuaj dokumentuar përdorur lidhjen tags. 144 00:07:12,360 --> 00:07:14,690 Link tags, përsëri, janë ndryshëm nga hyperlinks, 145 00:07:14,690 --> 00:07:16,760 nëse ju kujtohet nga video tonë një HTML. 146 00:07:16,760 --> 00:07:19,030 Dhe lidhje tags janë si ne tërheq në dosje të veçanta. 147 00:07:19,030 --> 00:07:23,900 Ajo lloj si ekuivalentin e # Include për programimin e web. 148 00:07:23,900 --> 00:07:27,140 >> Pra, le të marrin një vështrim në table.HTML. 149 00:07:27,140 --> 00:07:29,380 Nëse ju kujtohet nga tonë HTML Video, unë tregoi 150 00:07:29,380 --> 00:07:32,000 një shembull i një shumë shumëzimit të thjeshtë 151 00:07:32,000 --> 00:07:35,160 tabela që dukej goxha shëmtuar, dhe ndoshta nuk ka 152 00:07:35,160 --> 00:07:38,650 një mënyrë për ta bërë atë më mirë me CSS, për ta bërë atë në fakt duken 153 00:07:38,650 --> 00:07:41,120 më shumë si një shumëzim tavolinë, apo diçka 154 00:07:41,120 --> 00:07:43,730 që nuk është e mbërthyer vetëm së bashku pa ndarje aktuale 155 00:07:43,730 --> 00:07:45,532 mes rreshtave dhe kolonave. 156 00:07:45,532 --> 00:07:47,490 Pra, le të kryesojë mbi të CS50 IDE, dhe të marrë një sy 157 00:07:47,490 --> 00:07:50,780 se si mund të CSS, lloj, shkulje ajo që kemi filluar me para, 158 00:07:50,780 --> 00:07:53,290 dhe të bëjnë diçka shumë më mirë. 159 00:07:53,290 --> 00:07:55,650 >> Pra, ne jemi në CS50 IDE tani, dhe nëse të panjohura, 160 00:07:55,650 --> 00:07:58,710 ne do të tërheqë deri në këtë tabela që faqe HTML. 161 00:07:58,710 --> 00:08:01,090 Table.HTML thelb vetëm përcakton përmbajtjen 162 00:08:01,090 --> 00:08:05,044 e një multiple-- ajo është dashur të jetë një tavolinë katër nga katër shumëzimit. 163 00:08:05,044 --> 00:08:06,210 Është shumë i thjeshtë. 164 00:08:06,210 --> 00:08:09,410 Dhe ne do të mendojnë se ajo do të shikoni të organizuar mjaft mirë. 165 00:08:09,410 --> 00:08:15,277 Por në fakt, kur ne preview këtë faqe, ne shohim se kjo është lloj i shëmtuar, e drejtë? 166 00:08:15,277 --> 00:08:16,860 Është e qartë se ne kemi rreshtave dhe kolonave këtu. 167 00:08:16,860 --> 00:08:18,350 Ka disa lloj ndarje. 168 00:08:18,350 --> 00:08:20,040 Por kjo nuk është një ndarje kuptimplotë. 169 00:08:20,040 --> 00:08:23,105 Ne nuk jemi të vërtetë duke marrë shumë informacion këtu. 170 00:08:23,105 --> 00:08:25,730 Dhe nuk ka asnjë ndarje midis rreshtave dhe kolonave në aspektin 171 00:08:25,730 --> 00:08:28,460 e rregullave horizontale ose vertikale. 172 00:08:28,460 --> 00:08:31,530 Ne ndoshta mund të bëjë këtë shikoni pak më mirë. 173 00:08:31,530 --> 00:08:32,934 Pra, le të përpiqemi. 174 00:08:32,934 --> 00:08:34,559 Kështu që unë jam duke shkuar për të mbyllur këtë skedë këtu. 175 00:08:34,559 --> 00:08:37,434 Dhe unë jam duke shkuar për të mbyllur table.HTML tim, dhe unë kam një version tjetër këtu 176 00:08:37,434 --> 00:08:39,490 quajtur table2.HTML. 177 00:08:39,490 --> 00:08:40,655 Ne do të hapur atë deri. 178 00:08:40,655 --> 00:08:42,530 Trupi i faqe është shumë e shumë të njëjtën gjë, 179 00:08:42,530 --> 00:08:44,238 por unë kam ndryshuar një pak në krye. 180 00:08:44,238 --> 00:08:47,132 Dhe unë do të lëviz deri këtu. 181 00:08:47,132 --> 00:08:49,340 Vini re se këtë herë, unë jam duke përdorur tags stil ngulitur. 182 00:08:49,340 --> 00:08:53,550 Unë e kam hapur një tag stil, dhe unë jam tani përcaktimin e një stylesheet CSS vetëm brenda 183 00:08:53,550 --> 00:08:54,310 e saj. 184 00:08:54,310 --> 00:08:56,310 Unë kam një stylesheet që thotë, tryezë. 185 00:08:56,310 --> 00:08:58,170 Kjo është përzgjedhës ime tag. 186 00:08:58,170 --> 00:09:01,340 Unë nuk jam duke përdorur dot apo hash, që unë do të jetë bërë në qoftë se unë 187 00:09:01,340 --> 00:09:03,710 ishte përdorur një ID ose një përzgjedhës të klasës. 188 00:09:03,710 --> 00:09:06,190 Unë kam një përzgjedhës tag tavolinë here--. 189 00:09:06,190 --> 00:09:10,090 Ky stil do të vlejnë për çdo tag tavolinë. 190 00:09:10,090 --> 00:09:14,950 Me sa duket unë dua të vënë një të piksel, kufiri ngurta blu, 191 00:09:14,950 --> 00:09:15,779 brenda tryezën time. 192 00:09:15,779 --> 00:09:18,320 Kjo tingëllon si ajo ndoshta do të ndihmuar situatën, e drejtë? 193 00:09:18,320 --> 00:09:20,320 Ne do të kemi gjërat duken shumë më mirë. 194 00:09:20,320 --> 00:09:21,190 Pra, kjo është e mirë. 195 00:09:21,190 --> 00:09:23,540 Stilistikisht, unë kam vetëm ngulitur stylesheet tim këtu. 196 00:09:23,540 --> 00:09:25,100 Kjo është sigurisht një mënyrë e pranueshme për të bërë atë. 197 00:09:25,100 --> 00:09:26,391 Le të shohim se çfarë kjo duket si. 198 00:09:26,391 --> 00:09:29,790 Kështu që unë do të shkoj përsëri poshtë këtu, dhe Unë do të do të parapamje table2.HTML time. 199 00:09:29,790 --> 00:09:32,430 200 00:09:32,430 --> 00:09:36,470 E pra, kjo nuk është krejt ajo që kam kërkuar, por kjo është pikërisht ajo që ne kërkuam. 201 00:09:36,470 --> 00:09:39,530 Ne thamë se ky stil është do të zbatohet për tryezën tonë. 202 00:09:39,530 --> 00:09:43,810 Tabela jonë tani ka një një pixel gjerë, kufiri ngurta blu rreth tij. 203 00:09:43,810 --> 00:09:46,237 Ne nuk jemi të vërtetë duke marrë në qelizat tryezë. 204 00:09:46,237 --> 00:09:47,570 Ne jemi vetëm duke marrë në tryezë. 205 00:09:47,570 --> 00:09:49,310 Pra, CSS punuar. 206 00:09:49,310 --> 00:09:51,890 Ajo ka aplikuar një stylesheet në tryezën tonë. 207 00:09:51,890 --> 00:09:53,981 Por nuk e ka fare të bëjë atë që kemi dashur që ajo të bëjë. 208 00:09:53,981 --> 00:09:55,730 Si nuk kemi marrë për të bërë ajo që ne duam që ajo të bëjë? 209 00:09:55,730 --> 00:09:59,287 >> E pra, le të marrin një vështrim në një më shumë version i këtij në table3.HTML. 210 00:09:59,287 --> 00:10:00,870 Kështu që unë jam vetëm duke shkuar për të mbyllur këto tabs. 211 00:10:00,870 --> 00:10:03,890 Unë jam duke shkuar për të shkuar mbrapa mbi këtu për tim fotografi pemë, dhe e hapur deri table3.HTML. 212 00:10:03,890 --> 00:10:07,680 213 00:10:07,680 --> 00:10:10,350 Përsëri, ajo do të duken bukur ngjashme këtu në fillim. 214 00:10:10,350 --> 00:10:14,460 Por njoftim, këtë herë, në vend të përdorimit një stylesheet ngulitur drejtë në atje, 215 00:10:14,460 --> 00:10:18,870 Unë jam duke shkuar për të lidhur në një stylesheet duke përdorur tag link. 216 00:10:18,870 --> 00:10:22,480 Kështu që unë jam me sa duket i lidhur në një stylesheet quajtur tables.CSS, 217 00:10:22,480 --> 00:10:25,090 dhe kjo mirë është e barabartë me stylesheet vetëm means-- mirë, 218 00:10:25,090 --> 00:10:28,645 çfarë është kjo skedë në lidhje me çfarë Unë jam doing-- është një stylesheet që unë jam 219 00:10:28,645 --> 00:10:29,821 duke përdorur për faqen time. 220 00:10:29,821 --> 00:10:32,320 Pra, nëse unë me të vërtetë duan të shohin se çfarë Unë jam duke bërë me CSS këtu, 221 00:10:32,320 --> 00:10:35,010 Unë kam nevojë për të shkuar të hapur që table.CSS fotografi si. 222 00:10:35,010 --> 00:10:37,490 Pra, ne do të kthehemi këtu përsëri në pemë tonë file. 223 00:10:37,490 --> 00:10:38,660 Ka table.CSS. 224 00:10:38,660 --> 00:10:40,490 Ne do të pop atë të hapur. 225 00:10:40,490 --> 00:10:43,070 Tani ne jemi duke parë pak e CSS. 226 00:10:43,070 --> 00:10:45,630 Me sa duket, unë kam një çift e gjërave ndodh këtu. 227 00:10:45,630 --> 00:10:48,950 Unë me sa duket duan të vënë një pesë piksel, kufirit të ngurta të kuqe, 228 00:10:48,950 --> 00:10:50,287 rreth tryezën time. 229 00:10:50,287 --> 00:10:52,870 Ne tashmë e dimë se kjo do për të shkuar vetëm në perimetrin. 230 00:10:52,870 --> 00:10:56,180 Ne pamë se në table2.HTML. 231 00:10:56,180 --> 00:10:58,770 Me çdo rresht, unë me sa duket duan të specifikojë 232 00:10:58,770 --> 00:11:01,950 se lartësia rresht është 50 pixels i lartë. 233 00:11:01,950 --> 00:11:05,680 Pra, për çdo rresht, mos harroni kjo është ajo tag tr bën, 234 00:11:05,680 --> 00:11:08,550 Unë jam duke e bërë atë 50 pixels i lartë. 235 00:11:08,550 --> 00:11:09,804 >> Së fundi, unë kam këtë koment. 236 00:11:09,804 --> 00:11:11,470 Dhe kjo është se si ne të bërë komente në CSS. 237 00:11:11,470 --> 00:11:16,174 Është shumë e ngjashme për të kapur bllok Komentet yll Sintaksa slash. 238 00:11:16,174 --> 00:11:17,090 Të gjithë tekstin që ju dëshironi. 239 00:11:17,090 --> 00:11:19,470 Nuk ka asnjë plagë plagë edhe në CSS. 240 00:11:19,470 --> 00:11:23,400 Për komente shkurtër inline, ne kemi për të përdorur këtë format të veçantë këtu. 241 00:11:23,400 --> 00:11:26,830 Ajo duket si unë jam duke bërë një shumë gjëra në tags mia TD. 242 00:11:26,830 --> 00:11:29,710 Mos harroni tags DT, apo tryezë të dhëna, të cilat me të vërtetë janë vetëm 243 00:11:29,710 --> 00:11:32,210 shtyllat brenda e rreshtave tanë dhe me sa duket 244 00:11:32,210 --> 00:11:35,090 për çdo pjesë të të dhënave në tryezën time, unë dua 245 00:11:35,090 --> 00:11:38,850 për të vendosur ngjyrën e sfondit për të jetë i zi, ngjyra të jetë e bardhë, 246 00:11:38,850 --> 00:11:40,320 ngjyra është ngjyra i dukshëm. 247 00:11:40,320 --> 00:11:42,360 Pra, kjo do të jetë teksti i faqen time. 248 00:11:42,360 --> 00:11:45,140 Unë dua font të madh, 22 pikë font, dhe unë dua 249 00:11:45,140 --> 00:11:47,001 që ajo të jetë e familjes font, Gjeorgjia. 250 00:11:47,001 --> 00:11:48,750 Kështu që unë nuk jam duke shkuar për kanë font default. 251 00:11:48,750 --> 00:11:51,820 Unë jam duke shkuar për të specifikojë Gjeorgjinë, e cila është një nga ato web fonts sigurta 252 00:11:51,820 --> 00:11:53,830 që ne kemi parë më parë. 253 00:11:53,830 --> 00:11:57,284 Unë dua teksti im të jetë një linjë qendra, në mes të kutisë, 254 00:11:57,284 --> 00:11:59,450 Unë nuk dua që ajo të jetë lënë një linjë apo një linjë të drejtë. 255 00:11:59,450 --> 00:12:03,461 Dhe unë dua width kolonë e mia të jetë 50 pixels i gjerë si. 256 00:12:03,461 --> 00:12:05,210 Le të marrin një vështrim në çfarë kjo duket si, 257 00:12:05,210 --> 00:12:07,470 dhe të shohim nëse kjo është ndoshta një përmirësim. 258 00:12:07,470 --> 00:12:12,890 Kështu që unë jam duke shkuar për të shkuar në table3.HTML, e cila Recall, përfshin table.CSS si një lidhje, 259 00:12:12,890 --> 00:12:14,830 dhe ne do të preview atë. 260 00:12:14,830 --> 00:12:16,800 Kjo është një shumë e mirë, e drejtë? 261 00:12:16,800 --> 00:12:20,004 Kjo është në të vërtetë filluar të duken një shumë më tepër si një tryezë shumëzimit. 262 00:12:20,004 --> 00:12:21,920 Unë kam se kufirit të kuqe rreth tryezën time, por tani 263 00:12:21,920 --> 00:12:26,700 Unë gjithashtu kanë përcaktuar se çdo rresht është 50 pixels i gjerë, 264 00:12:26,700 --> 00:12:30,220 apo është 50 pixels tall-- justifikim me-- çdo kolonë është 50 pixels i gjerë. 265 00:12:30,220 --> 00:12:34,251 Të dhënat në çdo kolonë, dhe vetëm të dhënat, ka një sfond të zezë. 266 00:12:34,251 --> 00:12:36,000 Pra, kjo është arsyeja pse ata vija të bardha janë atje. 267 00:12:36,000 --> 00:12:38,836 Sepse hapësira në midis gjithë atyre qelizave, 268 00:12:38,836 --> 00:12:40,710 kjo nuk është një kufi në dhe në vetvete, kjo është vetëm 269 00:12:40,710 --> 00:12:43,170 Unë jam vetëm duke plotësuar në Qelizat, të cilat në fakt 270 00:12:43,170 --> 00:12:46,310 i bën kufijtë e tabelës, të cilat me sa duket ka ekzistuar gjithë së bashku, atë 271 00:12:46,310 --> 00:12:47,887 ishte linjat e vetëm të hollë të bardhë. 272 00:12:47,887 --> 00:12:48,720 Tani ata janë të dukshme. 273 00:12:48,720 --> 00:12:50,380 Tani ata pop jashtë mbi ekran. 274 00:12:50,380 --> 00:12:52,920 Dhe kështu kjo është një shumë e thjeshtë stylesheet që unë kam aplikuar, 275 00:12:52,920 --> 00:12:56,850 dhe tani tryezën time, duket shumë më shumë si një tavolinë katër nga katër shumëzimit, 276 00:12:56,850 --> 00:13:00,950 në vend të një rrëmujë jumbled vetëm, ku çdo gjë është e qartë rreshtave dhe kolonave, 277 00:13:00,950 --> 00:13:03,717 por i organizuar jo super të mirë. 278 00:13:03,717 --> 00:13:06,800 Ne jemi me të vërtetë vetëm kruarje sipërfaqe të asaj që ju mund të bëni me CSS këtu. 279 00:13:06,800 --> 00:13:10,330 Për fat të mirë dokumentacioni CSS është shumë i thjeshtë. 280 00:13:10,330 --> 00:13:14,000 Ju do të përdorni disa prej saj atributet, mjaft shpesh. 281 00:13:14,000 --> 00:13:16,087 Ato kemi biseduar për më herët në këtë video. 282 00:13:16,087 --> 00:13:18,170 Ka disa që ju ndoshta nuk do të përdorë të gjithë. 283 00:13:18,170 --> 00:13:19,469 Dhe kjo është në rregull, too. 284 00:13:19,469 --> 00:13:22,010 Por vetëm e di, se ka një shumë e dokumentacionit atje. 285 00:13:22,010 --> 00:13:25,110 Pra, edhe në qoftë se ne nuk mbulojnë gjithçka, ju jeni me siguri nuk e la në tuaj. 286 00:13:25,110 --> 00:13:26,780 Por CSS është me të vërtetë zbavitëse të eksperimentojnë me. 287 00:13:26,780 --> 00:13:29,040 Dhe unë do të inkurajojmë fuqimisht ju për të luajtur rreth me faqet tuaja web, 288 00:13:29,040 --> 00:13:32,180 dhe të shohim se si ju mund të bëni ato shikoni dhe të ndjehen të përmirësuar përdorues 289 00:13:32,180 --> 00:13:34,790 përvoja e vizituar faqen tuaj. 290 00:13:34,790 --> 00:13:35,710 Unë jam Doug Lloyd. 291 00:13:35,710 --> 00:13:37,980 Kjo është CS50. 292 00:13:37,980 --> 00:13:40,151