1 00:00:00,000 --> 00:00:05,660 >> [MUSIC nagpe-play] 2 00:00:05,660 --> 00:00:08,740 >> DOUG LLOYD: Kaya sabihin kumuha ng isa pang video na makipag-usap tungkol sa isa pang wika. 3 00:00:08,740 --> 00:00:10,800 Oras na ito namin makipag-usap tungkol sa CSS. 4 00:00:10,800 --> 00:00:13,460 Kaya CSS, na kung saan ay maikli para sa Cascading Style Sheet, 5 00:00:13,460 --> 00:00:16,149 ay isa pang wika na ginagamit namin kapag ang paggawa sa mga website. 6 00:00:16,149 --> 00:00:17,190 Isipin ito tulad nito. 7 00:00:17,190 --> 00:00:20,900 Kung HTML ay kung ano ang ginagamit namin upang ayusin ang nilalamang gusto naming ilagay sa aming pahina, 8 00:00:20,900 --> 00:00:25,390 CSS ay ang tool na kami ay karaniwang gamitin upang i-customize kung paano titingnan ng aming website, 9 00:00:25,390 --> 00:00:30,410 at kung paano ang karanasan ng gumagamit tunay ay, nakikipag-ugnayan sa aming website. 10 00:00:30,410 --> 00:00:32,535 >> Katulad sa HTML, CSS ay hindi isang programming language. 11 00:00:32,535 --> 00:00:33,451 Hindi nito ay may lohika. 12 00:00:33,451 --> 00:00:34,595 Hindi nito ay may mga variable. 13 00:00:34,595 --> 00:00:38,890 Hindi nito ay may anumang uri ng na dumaloy kaugnay na mga bagay na ginagawa C. 14 00:00:38,890 --> 00:00:40,150 Ito ay isang estilo ng wika. 15 00:00:40,150 --> 00:00:42,810 At syntax nito ay medyo simple, at naglalarawan lamang 16 00:00:42,810 --> 00:00:46,240 kung paano ang mga elemento ng aming page ay mayroon ilang mga HTML 17 00:00:46,240 --> 00:00:48,190 ay dapat na mabago elemento. 18 00:00:48,190 --> 00:00:51,170 Sa layong iyon, kung hindi mo pa pa napanood aming mga video sa HTML, 19 00:00:51,170 --> 00:00:53,290 o ikaw ay hindi bihasa sa HTML pangkalahatan, ikaw 20 00:00:53,290 --> 00:00:57,430 maaaring gusto mong kumuha ng isang pagtingin sa na una, dahil ito diskusyon ng CSS 21 00:00:57,430 --> 00:01:00,700 ay pagpunta sa depende sa ilang kaalaman ng HTML. 22 00:01:00,700 --> 00:01:03,740 >> Kaya dito ay isang tunay na simple CSS stylesheet. 23 00:01:03,740 --> 00:01:06,480 Kahit na hindi mo kailanman nakaprograma sa CSS bago, 24 00:01:06,480 --> 00:01:10,624 Ako ay medyo sigurado maaari mong malaman kung ano mismo ang ibig stylesheet. 25 00:01:10,624 --> 00:01:11,290 Ano ang ginagawa nito? 26 00:01:11,290 --> 00:01:15,470 Well, inilapat sa katawan ng ating web pahina, ang lahat ng bagay sa pagitan ng mga body tag 27 00:01:15,470 --> 00:01:19,631 sa aming HTML, at itinatakda nito ang kulay ng background ng pahina na sa asul. 28 00:01:19,631 --> 00:01:21,130 Well, ito ay isang napaka-simpleng stylesheet. 29 00:01:21,130 --> 00:01:23,269 Ito ay talagang napaka-pantao friendly na wika, CSS. 30 00:01:23,269 --> 00:01:26,560 Kaya kahit na hindi mo na ginagamit ito bago, ikaw ay malamang na maaaring hulaan kung ano na ang ginawa. 31 00:01:26,560 --> 00:01:30,140 Sa katunayan, kung puno na kami ng isang pahina, na kung saan ang ito stylesheet ay naka-embed sa anumang paraan, 32 00:01:30,140 --> 00:01:36,240 ang kulay ng background ng aming mga pahina ng gagawin maging kulay bughaw, at hindi ang karaniwang puti. 33 00:01:36,240 --> 00:01:37,670 >> Kaya paano namin bumuo ng stylesheet? 34 00:01:37,670 --> 00:01:39,700 Well una, kami ay may sa kilalanin ang isang selector. 35 00:01:39,700 --> 00:01:42,970 Sa nakaraang halimbawa, selector na katawan. 36 00:01:42,970 --> 00:01:45,050 Pagkatapos kami ay may isang bukas na kulot suhay, at hindi namin 37 00:01:45,050 --> 00:01:48,410 pagpunta sa magsimula ng pagtukoy sa stylesheet para selector na. 38 00:01:48,410 --> 00:01:51,800 Sa pagitan ng mga kulot tirante, namin lamang magkaroon ng isang listahan ng mga pangunahing mga pares ng halaga. 39 00:01:51,800 --> 00:01:56,205 Ang nakaraang halaga ng pares ay kulay ng background asul tuldok-kuwit, 40 00:01:56,205 --> 00:01:57,830 ngunit kami ay maaaring makagawa ng higit pa at higit pa ng mga ito. 41 00:01:57,830 --> 00:02:02,330 Ikaw ay maaaring magkaroon ng maramihang mga bagay ng pag-aaplay sa na tag, na selector katawan. 42 00:02:02,330 --> 00:02:05,960 Ang bawat isa sa mga ito ay pinaghihiwalay ng isang tuldok-kuwit, at ang tawag namin sa bawat isa sa kanila 43 00:02:05,960 --> 00:02:08,949 isang deklarasyon, isang CSS deklarasyon. 44 00:02:08,949 --> 00:02:12,410 Kapag tapos na kami sa lahat ng mga estilo namin nais na mag-aplay sa mga partikular na tag, 45 00:02:12,410 --> 00:02:15,300 kami na lang ng pagsasara kulot suhay upang tapusin ang stylesheet, 46 00:02:15,300 --> 00:02:19,640 at kami ay tapos ng pagtukoy sa stylesheet para sa partikular na selector. 47 00:02:19,640 --> 00:02:21,341 >> Ano ang ilang mga karaniwang katangian ng CSS? 48 00:02:21,341 --> 00:02:23,590 Well, baka gusto mong ilagay isang hangganan sa paligid ng isang bagay. 49 00:02:23,590 --> 00:02:26,850 Kaya maaari mong sabihin, hangganan, na ang iyong mga susi, 50 00:02:26,850 --> 00:02:29,460 at pagkatapos ang iyong mga halaga ay magiging, kung ano ang estilo, kulay, at lapad 51 00:02:29,460 --> 00:02:30,209 gusto mo ito upang maging. 52 00:02:30,209 --> 00:02:33,530 Kaya maaari maging isang solid estilo linya, ang isang tuldok-tuldok na linya, ang isang dashed linya, 53 00:02:33,530 --> 00:02:36,020 isang linya ridge, na kung saan ay may alun-alon linya. 54 00:02:36,020 --> 00:02:38,790 Siguro gusto mong magkaroon ng ito maging asul o itim o berde. 55 00:02:38,790 --> 00:02:41,490 Siguro gusto mo ito upang maging 1 o 2 o 10 na lapad. 56 00:02:41,490 --> 00:02:43,254 Maaari mong tukuyin ang lahat ng mga bagay. 57 00:02:43,254 --> 00:02:46,420 Baka nais mong itakda ang background kulay ng iyong pahina sa isang partikular na paraan. 58 00:02:46,420 --> 00:02:49,215 Na nakita namin na, ang pagtatakda ng background ng katawan upang maging asul. 59 00:02:49,215 --> 00:02:52,080 >> Pagkatapos ay maaari mong gamitin ang isang key word, kaya ito ay may tiyak na mga kulay CSS 60 00:02:52,080 --> 00:02:55,950 na nakapaloob sa mga ito, asul, berde, black, isang napaka-simpleng kulay alam namin. 61 00:02:55,950 --> 00:02:59,110 Ngunit maaari mo ring tukuyin ang anumang mga hex color na gusto mo. 62 00:02:59,110 --> 00:03:05,190 Pagpapabalik na mga kulay ay maaaring kinilala sa pamamagitan ng isang hanay ng mga tatlong hex numero 63 00:03:05,190 --> 00:03:08,500 mula 0 hanggang 255, rg at b, ang pula, berde, at asul na component. 64 00:03:08,500 --> 00:03:10,590 At upang maaari naming tukuyin ang anumang kulay na gusto namin sa pamamagitan ng, 65 00:03:10,590 --> 00:03:15,520 sa halip ng paggamit ng asul o berde o itim, gamit pound at pagkatapos ay anim na numero ng hex, 66 00:03:15,520 --> 00:03:18,310 at na magbibigay sa amin ang kulay ng anim na digit. 67 00:03:18,310 --> 00:03:19,850 Kaya na ang kulay ng background. 68 00:03:19,850 --> 00:03:21,975 >> Mayroon din kaming mga foreground kulay, na kung saan ay karaniwang 69 00:03:21,975 --> 00:03:24,140 magiging ang teksto ng iyong pahina. 70 00:03:24,140 --> 00:03:28,850 At maaari mong parehas gawin iyon sa key word at o anim na digit hex. 71 00:03:28,850 --> 00:03:32,140 Kaya maaari mong tukuyin ang anumang kulay mo gusto para sa teksto ng iyong pahina 72 00:03:32,140 --> 00:03:36,370 laban sa isang partikular kulay ng background, hanggang sa itaas. 73 00:03:36,370 --> 00:03:39,100 Maaari mo ring baguhin at pakikitungo may font, at ang paraan ng text 74 00:03:39,100 --> 00:03:40,400 ay nai-render sa pahina. 75 00:03:40,400 --> 00:03:42,010 >> Kaya maaari mong baguhin ang laki ng iyong font. 76 00:03:42,010 --> 00:03:46,320 Maaari mong gamitin ang mga pangunahing mga salita, tulad ng mga dagdag na, dagdag na maliit, o xx maliit, o medium, 77 00:03:46,320 --> 00:03:47,660 malaki, at iba pa. 78 00:03:47,660 --> 00:03:50,750 Maaari mong gamitin ang mga nakapirming punto, 10 point, 12 point, at iba pa. 79 00:03:50,750 --> 00:03:55,850 Maaari mong gamitin ang mga porsyento, 80%, 20%, kung saan ang 100% ang default na font 80 00:03:55,850 --> 00:03:59,220 laki, na kung saan ay karaniwang pagpunta sa isang bagay tulad ng 11 o 12 puntos. 81 00:03:59,220 --> 00:04:01,659 O maaari mong kahit base ito off sa mga pinaka-kamakailan-lamang na laki ng font. 82 00:04:01,659 --> 00:04:04,950 Kung sinulat mo lamang ng isang bagay at alam mo kung ano ang nais mo ay para sa mga ito upang maging mas maliit, 83 00:04:04,950 --> 00:04:08,241 ngunit hindi mo alam kung ano mismo ang laki mo gusto mo itong maging, well, maaari mo lamang sabihin, 84 00:04:08,241 --> 00:04:09,330 laki ng font na mas maliit. 85 00:04:09,330 --> 00:04:14,344 At ito ay base off ng, lamang hanggang sa itaas, ito ay ang laki ng font. 86 00:04:14,344 --> 00:04:15,760 At maaari kang makakuha ng mas maliit o mas malaki. 87 00:04:15,760 --> 00:04:18,390 Kaya mayroong maraming iba't ibang mga paraan upang tukuyin ang laki ng font. 88 00:04:18,390 --> 00:04:20,690 >> Maaari mo ring tukuyin kung ano ang font family na gusto mo. 89 00:04:20,690 --> 00:04:23,360 Kung mayroon kang isang partikular na pangalan, may isang paraan sa CSS-- 90 00:04:23,360 --> 00:04:27,270 hindi namin pagpunta sa makipag-usap tungkol sa mga ito here-- upang tukuyin ang isang tiyak na takdang font 91 00:04:27,270 --> 00:04:28,980 at i-embed ang mga ito sa iyong pahina. 92 00:04:28,980 --> 00:04:30,620 Maaari mo ring gamitin ang mga generic na mga pangalan. 93 00:04:30,620 --> 00:04:33,540 May isang pulutong ng mga web ligtas na mga font na paunang natukoy na sa CSS. 94 00:04:33,540 --> 00:04:36,352 At kung ikaw ay isang gumagamit ng Microsoft Office sa huling 20 taon, 95 00:04:36,352 --> 00:04:38,810 ikaw ay malamang na pamilyar sa isang pulutong ng mga web ligtas na mga font 96 00:04:38,810 --> 00:04:44,640 nagagawa, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, 97 00:04:44,640 --> 00:04:45,470 at iba pa. 98 00:04:45,470 --> 00:04:47,170 Ang mga ito ay itinuturing ang lahat ng mga web ligtas na mga font. 99 00:04:47,170 --> 00:04:49,169 At talagang, bahagi ng dahilan na sila ay dumating na 100 00:04:49,169 --> 00:04:54,140 ay dapat gamitin upang gumawa ng web-- bawat pahina nagkaroon ng access sa mga ito ang default na hanay ng mga font 101 00:04:54,140 --> 00:04:58,480 may iba't ibang serifs, at ang lahat ng ito stuff font hindi kami makakuha ng sa, 102 00:04:58,480 --> 00:05:01,130 ngunit ang mga ito ay karaniwang naa-access sa iyong CSS, 103 00:05:01,130 --> 00:05:04,029 kahit na hindi mo gusto sa kabilang banda tukuyin ang mga font. 104 00:05:04,029 --> 00:05:07,070 Sa wakas, maaari mong ihanay ang iyong teksto, sa halip na ito sa, sa pamamagitan ng default, nakahanay 105 00:05:07,070 --> 00:05:09,310 sa kaliwa, maaari mong align ito sa kanan, 106 00:05:09,310 --> 00:05:13,740 o maaari mong align ito nakasentro, o Pantay upang ito ay pindutin ang parehong mga gilid. 107 00:05:13,740 --> 00:05:16,800 Kaya ang mga ay ang lahat ng mga opsyon na magagamit mo upang baguhin kung ano ang hitsura ng iyong teksto tulad ng, 108 00:05:16,800 --> 00:05:20,120 at kung paano ito ipinapakita sa iyong pahina. 109 00:05:20,120 --> 00:05:22,180 >> Ang iyong tagapili hindi kailangang maging tags lamang. 110 00:05:22,180 --> 00:05:25,539 Dati Nakita namin ang isang body tag selector, at tag selector 111 00:05:25,539 --> 00:05:26,580 ay hindi hitsura na lang. 112 00:05:26,580 --> 00:05:30,020 Pangalanan mo ang isang tag, at pagkatapos ay sa iyo tukuyin ang isang stylesheet para sa tag na iyon. 113 00:05:30,020 --> 00:05:32,660 Ngunit maaari mo ring gawin ang isang bagay tinatawag na isang selector ID. 114 00:05:32,660 --> 00:05:34,390 Isang selector ID mukhang medyo katulad. 115 00:05:34,390 --> 00:05:38,100 Ngunit paunawa, na ngayon ay hindi ako gamit isang HTML tag, gumagamit ako, sa kasong ito, 116 00:05:38,100 --> 00:05:40,720 #unique, o hash natatanging. 117 00:05:40,720 --> 00:05:42,930 Kung isipin ang mo mula sa aming video sa HTML, usapan natin 118 00:05:42,930 --> 00:05:45,620 tungkol sa kung paano mga tag ay maaaring magkaroon ng mga katangian. 119 00:05:45,620 --> 00:05:48,340 >> At sa isang katangian na nalalapat na medyo marami ang lahat ng mga tag na HTML, 120 00:05:48,340 --> 00:05:51,440 ngunit hindi namin makipag-usap tungkol dito, ay isang bagay na tinatawag na isang ID tag. 121 00:05:51,440 --> 00:05:55,250 Kaya ito partikular na CSS gagawin mailalapat lamang sa HTML tag na may 122 00:05:55,250 --> 00:05:58,530 isang napaka-tukoy na ID, na iyong pangalang. 123 00:05:58,530 --> 00:06:01,000 Kaya kung mayroon kang isang lugar sa iyong code, sa isang lugar 124 00:06:01,000 --> 00:06:06,090 sa iyong HTML file, ang isang tag at ikaw tukuyin bilang isang attribute sa na tag, 125 00:06:06,090 --> 00:06:09,060 ID ay katumbas ng mga natatanging, ito partikular na stylesheet 126 00:06:09,060 --> 00:06:15,030 dito ay mailalapat lamang sa pagitan ng na tag sa ID ng natatanging. 127 00:06:15,030 --> 00:06:17,180 >> Maaari mo ring gawin ang isang bagay tinatawag na isang klase selector. 128 00:06:17,180 --> 00:06:19,920 Kaya sa karagdagan sa pagkakaroon ID katangian, maaari mo ring 129 00:06:19,920 --> 00:06:23,130 magdagdag ng isang attribute ng klase na mga tag na HTML. 130 00:06:23,130 --> 00:06:27,140 At kapag gumamit ka ng isang attribute class, maaaring ito ay inilalapat sa maramihang mga tag. 131 00:06:27,140 --> 00:06:31,880 Kaya kung mayroon kang ilang mga bagay na ay katulad na, baka gusto mong sabihin, 132 00:06:31,880 --> 00:06:35,890 buksan ang tag blah, blah, blah, blah, class katumbas mag-aaral. 133 00:06:35,890 --> 00:06:38,190 At pagkatapos ay ang partikular na stylesheet ay mag-aplay 134 00:06:38,190 --> 00:06:42,041 sa bawat tag na klase ay mag-aaral. 135 00:06:42,041 --> 00:06:44,290 Sa kasong ito, nais naming i-set ang kulay ng background sa yellow, 136 00:06:44,290 --> 00:06:46,706 at gusto naming i-set opacity, na ay isang tag na hindi namin pag-uusapan, 137 00:06:46,706 --> 00:06:52,510 ngunit ang trato lamang sa kung paano transparent isang bagay ay, sa 70%, sa kasong ito. 138 00:06:52,510 --> 00:06:54,430 >> Mayroong dalawang mga opsyon para sa pagsulat stylesheet. 139 00:06:54,430 --> 00:06:56,680 Maaari mong isulat ang mga ito nang direkta sa iyong HTML 140 00:06:56,680 --> 00:06:59,690 pamamagitan ng paglalagay ng stylesheet sa pagitan ng mga tag ng estilo. 141 00:06:59,690 --> 00:07:03,850 At ang mga estilo ng mga tag ay pumunta sa loob ng ang ulo ng mga tag ng iyong web page. 142 00:07:03,850 --> 00:07:08,240 Ang marahil mas ginustong paraan upang gawin ito ay upang magsulat ng isang hiwalay na CSS file, 143 00:07:08,240 --> 00:07:12,360 at pagkatapos ay i-link ito sa iyong idokumento gamit link tags. 144 00:07:12,360 --> 00:07:14,690 Link tag, muli, ay naiiba mula sa mga hyperlink, 145 00:07:14,690 --> 00:07:16,760 kung isipin mo mula sa aming mga video ng isang HTML. 146 00:07:16,760 --> 00:07:19,030 At link tag ay kung paano namin pull sa hiwalay na mga file. 147 00:07:19,030 --> 00:07:23,900 Ito uri ng mga tulad ng katumbas ng ang #include para sa mga web programming. 148 00:07:23,900 --> 00:07:27,140 >> Kaya sabihin kumuha ng isang pagtingin sa table.html. 149 00:07:27,140 --> 00:07:29,380 Kung isipin ang mo mula sa aming HTML video, ako ay nagpakita 150 00:07:29,380 --> 00:07:32,000 isang halimbawa ng isang napaka simpleng pagpaparami 151 00:07:32,000 --> 00:07:35,160 mesa na tumingin pretty pangit, at baka may 152 00:07:35,160 --> 00:07:38,650 isang paraan upang gawin itong mas mahusay sa CSS, upang gawin itong tunay na hitsura 153 00:07:38,650 --> 00:07:41,120 mas katulad ng pagpaparami table, o isang bagay 154 00:07:41,120 --> 00:07:43,730 na ito ay hindi lamang natigil magkasama na walang aktwal na division 155 00:07:43,730 --> 00:07:45,532 sa pagitan ng mga hilera at ang mga haligi. 156 00:07:45,532 --> 00:07:47,490 Kaya ng tumuloy sa ipaalam CS50 IDE, at tingnan 157 00:07:47,490 --> 00:07:50,780 sa kung paano maaaring CSS, uri ng, mag-tweak kung ano ang namin na nagsimula sa dati, 158 00:07:50,780 --> 00:07:53,290 at gawin itong isang bagay na mas mahusay. 159 00:07:53,290 --> 00:07:55,650 >> Kaya hindi namin sa CS50 IDE ngayon, at kung hindi kilala, 160 00:07:55,650 --> 00:07:58,710 Makikita pull up kami sa mesa na pahina ng HTML. 161 00:07:58,710 --> 00:08:01,090 Table.html talaga lamang tumutukoy sa nilalaman 162 00:08:01,090 --> 00:08:05,044 ng isang multiple-- ito ay dapat na maging isang apat na sa pamamagitan ng apat na pagdami talahanayan. 163 00:08:05,044 --> 00:08:06,210 Ito ay medyo tapat. 164 00:08:06,210 --> 00:08:09,410 At gusto naming isipin na gagawin ito magmukhang medyo mahusay na nakaayos. 165 00:08:09,410 --> 00:08:15,277 Ngunit sa katunayan, kapag i-preview namin ang pahinang ito, nakita namin na ito ay uri ng pangit, di ba? 166 00:08:15,277 --> 00:08:16,860 Malinaw na namin mga hanay at haligi dito. 167 00:08:16,860 --> 00:08:18,350 Mayroong ilang mga uri ng paghihiwalay. 168 00:08:18,350 --> 00:08:20,040 Ngunit ito ay hindi isang makabuluhan paghihiwalay. 169 00:08:20,040 --> 00:08:23,105 Hindi namin ay aktwal na pagkuha ng masyadong maraming impormasyon dito. 170 00:08:23,105 --> 00:08:25,730 At walang paghihiwalay sa pagitan ng ang mga hanay at haligi sa mga tuntunin 171 00:08:25,730 --> 00:08:28,460 ng pahalang o patayong mga patakaran. 172 00:08:28,460 --> 00:08:31,530 Marahil namin ay maaaring gumawa ito tumingin ng isang maliit na piraso ng mas mahusay. 173 00:08:31,530 --> 00:08:32,934 Kaya sabihin subukan. 174 00:08:32,934 --> 00:08:34,559 Kaya ako pagpunta upang isara ang tab up dito. 175 00:08:34,559 --> 00:08:37,434 At ako pagpunta upang isara ang aking table.html, at ako ay may isa pang bersyon dito 176 00:08:37,434 --> 00:08:39,490 tinatawag table2.HTML. 177 00:08:39,490 --> 00:08:40,655 Susubukan naming buksan na up. 178 00:08:40,655 --> 00:08:42,530 Ang katawan ng pahina ay medyo marami ang parehong, 179 00:08:42,530 --> 00:08:44,238 ngunit binago ko ang isang maliit na piraso sa itaas. 180 00:08:44,238 --> 00:08:47,132 At kukunin ko na mag-scroll up dito. 181 00:08:47,132 --> 00:08:49,340 Pansinin na ang oras na ito, hindi ako gamit na naka-embed estilo ng mga tag. 182 00:08:49,340 --> 00:08:53,550 Binuksan ko ang isang tag ng estilo, at ako ngayon pagtukoy ng isang CSS stylesheet sa loob lamang ng 183 00:08:53,550 --> 00:08:54,310 ng mga ito. 184 00:08:54,310 --> 00:08:56,310 Mayroon akong isang stylesheet na nagsasabing, table. 185 00:08:56,310 --> 00:08:58,170 Iyon ang aking tag selector. 186 00:08:58,170 --> 00:09:01,340 Hindi ako gumagamit ng tuldok o hash, na kung saan Gusto ko ay ginagawa kung ako 187 00:09:01,340 --> 00:09:03,710 ay gumagamit ng isang ID o isang klase selector. 188 00:09:03,710 --> 00:09:06,190 Mayroon akong isang selector tag here-- table. 189 00:09:06,190 --> 00:09:10,090 Style na ito ay pagpunta sa mag-aplay sa bawat tag table. 190 00:09:10,090 --> 00:09:14,950 Tila gusto kong maglagay ng isa pixel ang lapad, solid asul na hangganan, 191 00:09:14,950 --> 00:09:15,779 sa loob ng aking table. 192 00:09:15,779 --> 00:09:18,320 Iyan tulad ng mga ito ay marahil matulungan ang sitwasyon, di ba? 193 00:09:18,320 --> 00:09:20,320 Kami ay pagpunta sa may maraming mas mahusay na mga bagay na tumingin. 194 00:09:20,320 --> 00:09:21,190 Kaya ito ay pinong. 195 00:09:21,190 --> 00:09:23,540 Stylistically, na ako lang naka-embed na aking stylesheet sa dito. 196 00:09:23,540 --> 00:09:25,100 Ito ay tiyak na isang katanggap-tanggap na paraan upang gawin ito. 197 00:09:25,100 --> 00:09:26,391 Tingnan natin kung ano ito mukhang Hayaan. 198 00:09:26,391 --> 00:09:29,790 Kaya kukunin ko na bumalik pababa dito, at Kukunin ko ay preview aking table2.HTML. 199 00:09:29,790 --> 00:09:32,430 200 00:09:32,430 --> 00:09:36,470 Well, na hindi lubos kung ano ang nais ko, ngunit ito ay eksakto kung ano ang namin tinanong para sa. 201 00:09:36,470 --> 00:09:39,530 Sinabi namin na ito estilo ay pagpunta sa mag-aplay sa aming table. 202 00:09:39,530 --> 00:09:43,810 Ang aming mga talahanayan ay mayroon na ngayong isang pixel malawak, solid asul na hangganan sa paligid nito. 203 00:09:43,810 --> 00:09:46,237 Hindi namin ay aktwal na pagkuha ng sa mga cell ng talahanayan. 204 00:09:46,237 --> 00:09:47,570 Nagsisimula pa lamang kami sa table. 205 00:09:47,570 --> 00:09:49,310 Kaya pinag-aralan CSS. 206 00:09:49,310 --> 00:09:51,890 Ito ay inilalapat ng isang stylesheet sa aming table. 207 00:09:51,890 --> 00:09:53,981 Ngunit hindi pa masyadong gawin ano ang aming nais na gawin ito. 208 00:09:53,981 --> 00:09:55,730 Paano kami makakuha ng upang gawin kung ano ang gusto naming ito upang gawin? 209 00:09:55,730 --> 00:09:59,287 >> Well, sabihin kumuha ng isang pagtingin sa isa pa bersyon ng mga ito sa table3.HTML. 210 00:09:59,287 --> 00:10:00,870 Kaya lang ako pagpunta upang isara ang mga tab. 211 00:10:00,870 --> 00:10:03,890 Pupunta ako sa bumalik sa paglipas dito sa aking maghain tree, at buksan up table3.HTML. 212 00:10:03,890 --> 00:10:07,680 213 00:10:07,680 --> 00:10:10,350 Muli, ito ay pagpunta upang tumingin medyo katulad dito sa simula. 214 00:10:10,350 --> 00:10:14,460 Ngunit paunawa, oras na ito, sa halip ng paggamit isang stylesheet naka-embed na mga karapatan sa doon, 215 00:10:14,460 --> 00:10:18,870 Pupunta ako mag-link sa isang stylesheet gamit ang tag na link. 216 00:10:18,870 --> 00:10:22,480 Kaya ako tila nagli-link sa isang stylesheet tinatawag tables.CSS, 217 00:10:22,480 --> 00:10:25,090 at ito rin ay katumbas ng stylesheet means-- lamang ng mabuti, 218 00:10:25,090 --> 00:10:28,645 kung ano ang file na ito na may kaugnayan sa kung ano ang Ako doing-- ay isang stylesheet na ako 219 00:10:28,645 --> 00:10:29,821 gamit para sa aking page. 220 00:10:29,821 --> 00:10:32,320 Kaya kung talagang gusto kong makita kung ano Ako ginagawa sa CSS dito, 221 00:10:32,320 --> 00:10:35,010 Kailangan ko bang pumunta bukas na table.CSS maghain rin. 222 00:10:35,010 --> 00:10:37,490 Kaya makikita namin bumalik sa paglipas dito muli sa aming file tree. 223 00:10:37,490 --> 00:10:38,660 May table.CSS. 224 00:10:38,660 --> 00:10:40,490 Susubukan naming pop ito bukas. 225 00:10:40,490 --> 00:10:43,070 Ngayon kami ay nakakakita ng isang maliit ng CSS. 226 00:10:43,070 --> 00:10:45,630 Tila, Mayroon akong isang pares ng mga bagay na nangyayari dito. 227 00:10:45,630 --> 00:10:48,950 Malas ko nais na ilagay ang isang limang pixel ang lapad, solid red hangganan, 228 00:10:48,950 --> 00:10:50,287 sa paligid ng aking table. 229 00:10:50,287 --> 00:10:52,870 Alam na namin na na-alis pumunta lamang sa perimeter. 230 00:10:52,870 --> 00:10:56,180 Nakita namin na sa table2.HTML. 231 00:10:56,180 --> 00:10:58,770 Sa bawat hilera, ako tila nais na tukuyin ang 232 00:10:58,770 --> 00:11:01,950 na ang mga taas ng hilera ay 50 pixels mataas. 233 00:11:01,950 --> 00:11:05,680 Kaya para sa bawat hilera, tandaan na kung ano ang ginagawa ng tr tag, 234 00:11:05,680 --> 00:11:08,550 Ako gumawa ito ng 50 pixels mataas. 235 00:11:08,550 --> 00:11:09,804 >> Panghuli, mayroon akong ang komentong ito. 236 00:11:09,804 --> 00:11:11,470 At ito ay kung paano namin gumawa ng mga komento sa CSS. 237 00:11:11,470 --> 00:11:16,174 Ito ay halos katulad sa sakupin block komento syntax slash star. 238 00:11:16,174 --> 00:11:17,090 Ang lahat ng mga text na gusto mo. 239 00:11:17,090 --> 00:11:19,470 Walang slash slash bagaman sa CSS. 240 00:11:19,470 --> 00:11:23,400 Para sa maikling inline komento, kami ay gamitin sa partikular na format dito. 241 00:11:23,400 --> 00:11:26,830 Mukhang ako ng paggawa ng isang pulutong ng mga bagay-bagay sa aking td mga tag. 242 00:11:26,830 --> 00:11:29,710 Tandaan td mga tag, o talahanayan data, na kung saan ay talagang lamang 243 00:11:29,710 --> 00:11:32,210 ang mga haligi sa loob ng ang aming mga hilera, at tila 244 00:11:32,210 --> 00:11:35,090 para sa bawat piraso ng data sa aking table, gusto ko 245 00:11:35,090 --> 00:11:38,850 upang itakda ang kulay ng background sa maging itim, ang kulay na puti, 246 00:11:38,850 --> 00:11:40,320 kulay ay kulay harapan. 247 00:11:40,320 --> 00:11:42,360 Kaya ito ay magiging ang teksto ng aking page. 248 00:11:42,360 --> 00:11:45,140 Gusto ko ng malaking font, 22 point font, at gusto kong 249 00:11:45,140 --> 00:11:47,001 ito upang maging ng pamilya ng font, Georgia. 250 00:11:47,001 --> 00:11:48,750 Kaya hindi ako pagpunta sa Mayroon ang default na font. 251 00:11:48,750 --> 00:11:51,820 Pupunta ako upang tukuyin Georgia, kung saan ay isa sa mga web ligtas na mga font 252 00:11:51,820 --> 00:11:53,830 na namin nakita bago. 253 00:11:53,830 --> 00:11:57,284 Gusto ko ang aking text na nakahanay May gitnang, sa gitna ng kahon, 254 00:11:57,284 --> 00:11:59,450 Hindi ko gusto ito upang iwanang nakahanay o kanan nakahanay. 255 00:11:59,450 --> 00:12:03,461 At gusto ko width aking column upang maging malawak na rin 50 pixels. 256 00:12:03,461 --> 00:12:05,210 Tingnan natin ang isang pagtingin sa kung ano ang ganito ang hitsura, 257 00:12:05,210 --> 00:12:07,470 at tingnan kung ito ay marahil isang pagpapabuti. 258 00:12:07,470 --> 00:12:12,890 Kaya ako pagpunta sa pumunta sa table3.HTML, na pagpapabalik, nagsasama table.CSS bilang isang link, 259 00:12:12,890 --> 00:12:14,830 at kami ay i-preview ito. 260 00:12:14,830 --> 00:12:16,800 Iyan ay isang pulutong mas mahusay, tama? 261 00:12:16,800 --> 00:12:20,004 Ito ay aktwal na nagsisimula sa hitsura ng isang maraming mas katulad ng pagdami talahanayan. 262 00:12:20,004 --> 00:12:21,920 Mayroon akong na red border sa paligid ng aking mga talahanayan ngunit ngayon 263 00:12:21,920 --> 00:12:26,700 Kami rin ay may tinukoy ko na bawat hilera ay 50 na lapad, 264 00:12:26,700 --> 00:12:30,220 o ito ay 50 pixels tall-- excuse me-- bawat haligi ay 50 na lapad. 265 00:12:30,220 --> 00:12:34,251 Ang data sa bawat haligi, at lamang ang data, ay may isang itim na background. 266 00:12:34,251 --> 00:12:36,000 Kaya na ang dahilan kung bakit ang mga puting linya ay may. 267 00:12:36,000 --> 00:12:38,836 Dahil ang mga puwang sa sa pagitan ng lahat ng mga cell, 268 00:12:38,836 --> 00:12:40,710 ito ay hindi isang hangganan sa at ng kanyang sarili, ito lamang 269 00:12:40,710 --> 00:12:43,170 Lamang ako ng pagpuno sa cells, na aktwal na 270 00:12:43,170 --> 00:12:46,310 gumagawa ng mga hangganan ng mga table, kung saan malas ay umiiral sa lahat ng kasama, ito 271 00:12:46,310 --> 00:12:47,887 ay lamang ng manipis na puting linya. 272 00:12:47,887 --> 00:12:48,720 Ngayon ang mga ito ay nakikita. 273 00:12:48,720 --> 00:12:50,380 Ngayon pop-off ang mga ito sa screen. 274 00:12:50,380 --> 00:12:52,920 At kaya ito ay isang napaka-simple stylesheet at nagamit ko ito, 275 00:12:52,920 --> 00:12:56,850 at ngayon ay mukhang ang aking mga talahanayan ng maraming higit pa tulad ng isang apat na sa pamamagitan ng apat na pagdami talahanayan, 276 00:12:56,850 --> 00:13:00,950 sa halip ng isang lamang ginulo gulo, kung saan lahat ng bagay ay malinaw na hanay at haligi, 277 00:13:00,950 --> 00:13:03,717 ngunit hindi sobrang mahusay na nakaayos. 278 00:13:03,717 --> 00:13:06,800 Kami ay talagang lamang scratching sa ibabaw ng kung ano ang maaari mong gawin sa CSS dito. 279 00:13:06,800 --> 00:13:10,330 Sa kabutihang palad ang mga babasahin CSS ay pretty tapat. 280 00:13:10,330 --> 00:13:14,000 Gagamitin mo ang ilan sa kanyang katangian, medyo madalas. 281 00:13:14,000 --> 00:13:16,087 Ang mga usapan natin ang tungkol mas maaga sa video na ito. 282 00:13:16,087 --> 00:13:18,170 Mayroong ilang mga na kayo marahil ay hindi gamitin ang lahat. 283 00:13:18,170 --> 00:13:19,469 At iyon ang masarap, masyadong. 284 00:13:19,469 --> 00:13:22,010 Ngunit alam lang, na mayroong isang pulutong ng mga babasahin sa labas doon. 285 00:13:22,010 --> 00:13:25,110 Kaya kahit na hindi namin ginawa masaklawan ang lahat ng bagay, tiyak na hindi ka na natitira sa iyong sarili. 286 00:13:25,110 --> 00:13:26,780 Ngunit CSS ay talagang masaya mag-eksperimento sa. 287 00:13:26,780 --> 00:13:29,040 At ako ay Matindi hinihikayat ka upang i-play sa paligid sa iyong mga web page, 288 00:13:29,040 --> 00:13:32,180 at makita kung paano ka maaaring gumawa ng mga ito hitsura at pakiramdam upang mapabuti ang user 289 00:13:32,180 --> 00:13:34,790 karanasan ng mga pagbisita sa iyong pahina. 290 00:13:34,790 --> 00:13:35,710 Ako Doug Lloyd. 291 00:13:35,710 --> 00:13:37,980 Ito ay CS50. 292 00:13:37,980 --> 00:13:40,151