1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Musika nagpe-play] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 Allison BUCHHOLTZ-AU: Kaya talaga kami lamang ang pagpunta 5 00:00:12,224 --> 00:00:14,629 upang bigyan ka ng isang rundown ng CSS, dahil alam namin 6 00:00:14,629 --> 00:00:16,420 na ito ay hindi sakop sa lahat ng mga seksyon. 7 00:00:16,420 --> 00:00:20,090 At kami ba talagang makatiyak na guys mayroon ang tool na ito sa iyong pagtatapon, 8 00:00:20,090 --> 00:00:24,790 dahil mayroon itong kakayahan upang gumawa ng mga ang iyong website hitsura magkano prettier. 9 00:00:24,790 --> 00:00:28,660 >> At kung ikaw ay pagbuo ng isang website, at pagkatapos ay malamang na gusto upang gawing mas kaakit-akit. 10 00:00:28,660 --> 00:00:31,372 Ibig kong sabihin, hindi mo na kailangang, ngunit nais kong imungkahi ito. [LAUGHS] 11 00:00:31,372 --> 00:00:35,430 Kung gusto mong ang mga user na gamitin ito, maaari kang nais upang gawin itong isang maliit na [hindi marinig]. 12 00:00:35,430 --> 00:00:39,130 Kaya kami ay pagpunta sa subukan at bibigyan ka lang ilang mga pangunahing mga tool at pag-unawa, 13 00:00:39,130 --> 00:00:42,340 upang kapag kang pumunta out at ikaw ay pagsasaliksik ng mga bagay tungkol sa CSS, 14 00:00:42,340 --> 00:00:45,902 hindi ito makumpleto walang kuwentang, tulad ng CSS minsan upang maging. 15 00:00:45,902 --> 00:00:47,240 >> Tomas REIMERS: Oo. 16 00:00:47,240 --> 00:00:49,930 Sinabi nito Allison nang mahusay. 17 00:00:49,930 --> 00:00:53,250 Kaya hulaan ko ang unang bagay na namin dapat na magsimula sa ay kung ano ang CSS? 18 00:00:53,250 --> 00:00:55,750 Kaya CSS ay kahanga-hanga. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> Allison BUCHHOLTZ-AU: Iyon ang pangalan ng aming seminar. 21 00:00:58,320 --> 00:00:58,434 >> Tomas REIMERS: Oo. 22 00:00:58,434 --> 00:01:00,130 Ito ay talagang mahalaga na Nauunawaan mo na sa pamamagitan ng pagkatapos. 23 00:01:00,130 --> 00:01:03,090 Kung mong gawin lamang ang layo ng isa bagay na ito, na CSS kung kahanga-hanga. 24 00:01:03,090 --> 00:01:06,180 Dalawang ay nakatayo CSS para sa Lumalagaslas na mga Pilas ng Estilo. 25 00:01:06,180 --> 00:01:10,380 Kaya sa core nito, CSS ay isang style sheet, na nangangahulugang 26 00:01:10,380 --> 00:01:13,200 pinapayagan ka nitong istilo isang web page. 27 00:01:13,200 --> 00:01:16,609 At pagkatapos ay kung ano ang ibig sabihin nito ay, ito ay isang paraan upang magdagdag ng estilo sa iyong website. 28 00:01:16,609 --> 00:01:18,900 Kaya sa pamamagitan ng estilo, ang ibig sabihin namin ang lahat ng bagay na hindi structural-- 29 00:01:18,900 --> 00:01:24,350 kaya mga bagay tulad ng mga kulay, background mga larawan, hangganan, tulad ng, padding, 30 00:01:24,350 --> 00:01:25,040 margin. 31 00:01:25,040 --> 00:01:27,310 Susubukan naming makipag-usap tungkol sa kung ano Nangangahulugan lahat na sa ilang sandali. 32 00:01:27,310 --> 00:01:30,110 >> Kaya nagbigay lamang nawala namin magpatuloy at Binuksan ang parehong mga up sa gedit. 33 00:01:30,110 --> 00:01:32,680 Kaya ito ay index.html. 34 00:01:32,680 --> 00:01:34,800 At ito ay main.css. 35 00:01:34,800 --> 00:01:36,829 Kaya main.css ay wala. 36 00:01:36,829 --> 00:01:38,412 Allison BUCHHOLTZ-AU: Walang estilo sa ngayon. 37 00:01:38,412 --> 00:01:39,245 Tomas REIMERS: Wala. 38 00:01:39,245 --> 00:01:42,577 At bilang makikita mo, ito ay isang talagang pangit site. 39 00:01:42,577 --> 00:01:44,160 Allison BUCHHOLTZ-AU: Ito ay lamang plain. 40 00:01:44,160 --> 00:01:45,820 Tomas REIMERS: Oo. 41 00:01:45,820 --> 00:01:49,150 Oo, ito ay hindi mainit ang ulo, ito lamang ay minimalist. 42 00:01:49,150 --> 00:01:53,430 At pagkatapos dito mayroon index.html namin. 43 00:01:53,430 --> 00:01:55,729 At kaya para sa mabilis na pagbabalik-tanaw ng HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 Gusto mo bang makipag-usap lamang tungkol sa mga pahina? 45 00:01:57,270 --> 00:01:58,395 >> Allison BUCHHOLTZ-AU: Oo. 46 00:01:58,395 --> 00:02:01,100 Kaya malinaw naman, mayroon kaming HTML tag, na kung saan lamang ng mga pangalan HTML file. 47 00:02:01,100 --> 00:02:07,080 Mayroon kaming aming header dito, may CSS Mahusay, which-- kung pumunta ka pabalik. 48 00:02:07,080 --> 00:02:07,720 Saan na? 49 00:02:07,720 --> 00:02:09,136 >> Tomas REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Oo, maaari mong makita. 51 00:02:10,301 --> 00:02:12,092 Allison BUCHHOLTZ-AU: At mapansin ang header 52 00:02:12,092 --> 00:02:14,120 ang tab na header sa karapatang ito up dito. 53 00:02:14,120 --> 00:02:17,130 At pagkatapos ay ang "Hello, world!" ay ang teksto na mayroon kami lamang 54 00:02:17,130 --> 00:02:19,620 pagpapakita sa web pahina, na is-- bumalik. 55 00:02:19,620 --> 00:02:21,290 Bumalik. 56 00:02:21,290 --> 00:02:24,287 Aling ay isa lamang sa aming katawan here-- ang plain text. 57 00:02:24,287 --> 00:02:26,120 Gayundin, isang bagay na mapansin, kung tiningnan mo dito, 58 00:02:26,120 --> 00:02:29,410 Tomas lumipat up ang mga dalawang mula sa aming mga slide. 59 00:02:29,410 --> 00:02:32,035 Kaya hangga't mayroon ka ng lahat tatlong sa mga ito, ikaw ay multa. 60 00:02:32,035 --> 00:02:34,044 Maaari silang maging sa anumang pagkakasunud-sunod nila gusto. 61 00:02:34,044 --> 00:02:39,368 Ano ang pinakamahalaga lamang na mayroon kang bawat isa sa mga tatlong bagay. 62 00:02:39,368 --> 00:02:40,340 >> Tomas REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Magdagdag ng isang uri ng doc? 64 00:02:41,111 --> 00:02:42,235 Allison BUCHHOLTZ-AU: Oo. 65 00:02:42,235 --> 00:02:43,068 Tomas REIMERS: Oo. 66 00:02:43,068 --> 00:02:43,769 Ayos. 67 00:02:43,769 --> 00:02:46,102 Allison BUCHHOLTZ-AU: tila, aking mics hindi ako gusto. 68 00:02:46,102 --> 00:02:49,650 Tomas REIMERS: Oh, bigyan kami ng isang segundo lamang habang Allison Lilipat ang kanyang mic. 69 00:02:49,650 --> 00:02:50,500 Kaya oo. 70 00:02:50,500 --> 00:02:52,030 Kaya mayroon namin ang aming pangunahing pahina. 71 00:02:52,030 --> 00:02:53,890 Ito ay uri ng unstyled. 72 00:02:53,890 --> 00:02:54,780 Hindi namin magkano ang mayroon. 73 00:02:54,780 --> 00:02:57,110 Mayroon lang namin talaga ng teksto. 74 00:02:57,110 --> 00:02:59,470 Mayroon kaming mga style sheet. 75 00:02:59,470 --> 00:03:00,220 Mayroon kaming mga pamagat. 76 00:03:00,220 --> 00:03:04,020 Kaya lang walang kalaman-laman-walang buto mga bahagi gumawa ng isang website. 77 00:03:04,020 --> 00:03:08,880 >> Kaya mula doon, sabihin makipag-usap tungkol sa kung ano CSS ay 78 00:03:08,880 --> 00:03:11,270 at kung ano ang mukhang at ang lahat ng iyon. 79 00:03:11,270 --> 00:03:12,047 Kaya para that-- 80 00:03:12,047 --> 00:03:13,755 Allison BUCHHOLTZ-AU: Bumalik sa mga slide. 81 00:03:13,755 --> 00:03:15,200 Tomas REIMERS: Bumalik sa slide. 82 00:03:15,200 --> 00:03:17,240 At Allison ay maaaring umabot ng higit sa. 83 00:03:17,240 --> 00:03:18,720 >> Allison BUCHHOLTZ-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 Kaya sa iyong CSS file, ka ng pagpunta sa may 86 00:03:22,360 --> 00:03:25,010 ng maraming mga bagay na ito na tinatawag na tagapili. 87 00:03:25,010 --> 00:03:27,420 Iyon ay lamang maging batayan ng iyong CSS file. 88 00:03:27,420 --> 00:03:29,480 Lamang ito ay magiging maraming at maraming ng mga ito. 89 00:03:29,480 --> 00:03:30,780 Kaya tagapili. 90 00:03:30,780 --> 00:03:32,649 Ito ay lamang ng pangkalahatang anatomya. 91 00:03:32,649 --> 00:03:35,190 Kami ay pagpunta sa pumunta sa pamamagitan ng mga halimbawa, dahil kung hindi kailanman guys 92 00:03:35,190 --> 00:03:38,400 pinanood ang aking seksyon, nararamdaman ko tulad ng mga bagay sa abstract 93 00:03:38,400 --> 00:03:39,400 hindi talaga magkaroon ng kahulugan. 94 00:03:39,400 --> 00:03:41,110 Laging nakakatulong ito upang makita ang mga halimbawa. 95 00:03:41,110 --> 00:03:42,420 >> Kaya mayroon kaming ilang mga tagapili. 96 00:03:42,420 --> 00:03:49,120 Iyon ang nangyayari sa ilang mga identifier para sa kung ano ang gusto namin ang estilo na mag-aplay sa. 97 00:03:49,120 --> 00:03:52,220 At pagkatapos ay maaari kaming magkaroon ng anumang hanay ng mga patakaran at mga halaga. 98 00:03:52,220 --> 00:03:55,680 Kaya tagapili na maaari kang makakita ay maaaring maging isang bagay tulad ng katawan, 99 00:03:55,680 --> 00:04:00,262 o talata na may P, o header, o anumang, 100 00:04:00,262 --> 00:04:02,000 anumang nais mo ang iyong mga tag ng HTML upang maging. 101 00:04:02,000 --> 00:04:03,570 >> Kaya sa kasong ito, mayroon kaming katawan. 102 00:04:03,570 --> 00:04:06,985 At mayroon kaming ilang mga panuntunan, na kung saan ito ay tumutugon 103 00:04:06,985 --> 00:04:09,610 sa kung ano ang naaangkop sa iyong estilo. 104 00:04:09,610 --> 00:04:12,720 Kaya sa kasong ito, mayroon kaming kulay ng background at font timbang. 105 00:04:12,720 --> 00:04:16,200 Kaya ito ay pagpunta upang baguhin ang background ng anumang bagay 106 00:04:16,200 --> 00:04:19,640 sa loob ng anumang katawan na tag sa aming mga HTML file. 107 00:04:19,640 --> 00:04:22,810 At ito ang nangyayari upang bigyan ito sa ganitong mapusyaw na asul na halaga. 108 00:04:22,810 --> 00:04:24,820 >> Kaya ito ay pagpunta sa gawin ang background mapusyaw na asul. 109 00:04:24,820 --> 00:04:28,660 At pagkatapos ay anumang bagay sa loob ng katawan ay pagpunta sa magkaroon ng isang font timbang bold. 110 00:04:28,660 --> 00:04:31,142 Kaya lang pagpunta sa bold lahat ng aming mga teksto. 111 00:04:31,142 --> 00:04:32,970 At ito ang isa-pili lang. 112 00:04:32,970 --> 00:04:34,680 Ngunit maaari kang magkaroon ng napaka marami sa mga ito. 113 00:04:34,680 --> 00:04:38,730 At bilang namin ang pagpunta upang ipakita ang sa ibang pagkakataon, nang kaunti ang nalalaman sa kung paano 114 00:04:38,730 --> 00:04:40,709 na mga gawa at higit pang mga halimbawa doon. 115 00:04:40,709 --> 00:04:41,750 Anumang bagay na gusto mong idagdag? 116 00:04:41,750 --> 00:04:42,499 >> Tomas REIMERS: Hindi. 117 00:04:42,499 --> 00:04:43,500 Nakuha ko Allison. 118 00:04:43,500 --> 00:04:46,144 Lamang kami ng pagpunta upang i-cut up ng isang Halimbawa dito sa aming halimbawa site. 119 00:04:46,144 --> 00:04:47,310 Kaya sabihin aktwal na tumagal ito. 120 00:04:47,310 --> 00:04:48,620 Ito ay perpekto. 121 00:04:48,620 --> 00:04:54,460 Kaya ako lamang ng pagpunta sa kopyahin at i-paste ang karapatang iyon sa aming main.css file. 122 00:04:54,460 --> 00:04:56,530 At ako pagpunta sa i-save ito. 123 00:04:56,530 --> 00:04:59,190 At pagkatapos ay namin patakbuhin ito. 124 00:04:59,190 --> 00:05:01,600 Kaya gilid tala, ang isa sa mga pinaka-nakakabigo bagay 125 00:05:01,600 --> 00:05:04,490 ay kung hindi mo i-save ang isang file, at pagkatapos, tulad ng, i-reload ang pahina, 126 00:05:04,490 --> 00:05:07,450 at tulad ng, kung bakit hindi ang nangyayari pagbabago? 127 00:05:07,450 --> 00:05:07,950 Nangyayari ito. 128 00:05:07,950 --> 00:05:14,230 Kaya dito nakita namin na aming ginawa ang aming website mapusyaw na asul na background 129 00:05:14,230 --> 00:05:16,560 at ang ilan ay naka-bold na teksto. 130 00:05:16,560 --> 00:05:20,730 >> Dapat ko ring banggitin, kung guys may mga katanungan tungkol sa anumang bagay 131 00:05:20,730 --> 00:05:23,622 aming ginagawa, mangyaring huwag mag libreng upang ihinto sa amin at hilingin sa amin. 132 00:05:23,622 --> 00:05:25,330 Kami ay talagang gusto sa field katanungan. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> Allison BUCHHOLTZ-AU: Malinaw, na may CSS, ang lahat ng bagay ay nagbubuo mula sa sarili nito. 135 00:05:31,930 --> 00:05:34,107 Kaya kung ang isang bagay ay hindi magkaroon ng kahulugan ngayon, namin 136 00:05:34,107 --> 00:05:35,690 ayaw na sa lusak down ka sa ibang pagkakataon. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> Tomas REIMERS: Kaya sabihin uri ng pag-aralan ito. 139 00:05:41,930 --> 00:05:44,210 Kaya nais mong magsimula may selector dito? 140 00:05:44,210 --> 00:05:45,979 >> Allison BUCHHOLTZ-AU: Oo. 141 00:05:45,979 --> 00:05:48,270 Tulad ng sinasabi ko dati, katawan lamang ang aming tagapili dito. 142 00:05:48,270 --> 00:05:50,950 Kaya kung pumunta namin pabalik sa aming mga index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> Tomas REIMERS: Aling ko lang sarado. 144 00:05:53,245 --> 00:05:54,530 Bigyan mo ako ng isang segundo. 145 00:05:54,530 --> 00:05:58,286 Kaya File, Buksan, index.html. 146 00:05:58,286 --> 00:05:59,410 Allison BUCHHOLTZ-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Kaya kung napansin mo dito, namin May mga body tag, tama? 148 00:06:02,710 --> 00:06:06,270 Kaya ang tagapili lamang tumutugon sa ang mga tag na pinag-uusapan natin ang tungkol. 149 00:06:06,270 --> 00:06:07,670 Kaya katawan dito mismo. 150 00:06:07,670 --> 00:06:10,315 Kaya kung ano ang iyong sinasabi namin ay everything-- maaari naming bumalik? 151 00:06:10,315 --> 00:06:12,065 Gusto ko ng dati ko lang tulad ng pindutin ang screen. 152 00:06:12,065 --> 00:06:14,410 Gusto itong maging kaya magkano ang mas malalamig. 153 00:06:14,410 --> 00:06:17,150 >> Kaya kahit ano sa loob ng mga katawan ng mga tag, na kung saan nakita natin 154 00:06:17,150 --> 00:06:19,637 ay isa lamang, tulad ng, ang teksto, at ang katawan sa pangkalahatan 155 00:06:19,637 --> 00:06:20,970 ay tumutukoy sa, tulad ng, sa background. 156 00:06:20,970 --> 00:06:22,720 Kung sakaling nais mong baguhin ang background, 157 00:06:22,720 --> 00:06:25,090 na magiging sa isang body tag. 158 00:06:25,090 --> 00:06:27,120 May mga panuntunang ito ilapat sa kanila lamang. 159 00:06:27,120 --> 00:06:32,040 >> Kaya kung kami ay upang pumunta sa index.html and-- talaga, 160 00:06:32,040 --> 00:06:33,840 Maaaring magkaroon kami ng isang bagay sa labas ng katawan? 161 00:06:33,840 --> 00:06:37,340 Kung nagkaroon kami, tulad ng, ang isang footer o isang bagay, hindi ito ay nalalapat sa ito. 162 00:06:37,340 --> 00:06:40,900 Ngunit kahit ano sa loob ang mga katawan ng mga tag ay pagpunta 163 00:06:40,900 --> 00:06:44,960 na naaapektuhan ng katawan tagapili na ginawa naming. 164 00:06:44,960 --> 00:06:47,405 Kaya kung ikaw ay i-type ibang bagay there-- 165 00:06:47,405 --> 00:06:49,400 >> Tomas REIMERS: humimok na bahay Hayaan. 166 00:06:49,400 --> 00:06:55,330 Kaya kung nagkaroon kami ng div-- kaya na isa lamang tag na maaari kang magkaroon ng. 167 00:06:55,330 --> 00:06:56,350 Pupunta ako upang isara ito. 168 00:06:56,350 --> 00:06:58,280 O kaya ay gumawa ito ng isang talata ipaalam. 169 00:06:58,280 --> 00:07:01,430 Kaya p ay kumakatawan sa talataan. 170 00:07:01,430 --> 00:07:02,560 At sa loob ng talata. 171 00:07:02,560 --> 00:07:05,650 At pagkatapos ay sinasabi ko, "Ito ang text." 172 00:07:05,650 --> 00:07:06,369 Ayos. 173 00:07:06,369 --> 00:07:09,160 At pagkatapos ay ginawa ko ang panuntunan na ito ay nalalapat sa isang talata sa halip ng katawan. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Makikita mo kung paano ito ay nalalapat lamang sa ang bagong nabuo talata, kanan, 176 00:07:17,320 --> 00:07:18,892 hindi ang buong bagay. 177 00:07:18,892 --> 00:07:20,090 Ba na magkaroon ng kahulugan? 178 00:07:20,090 --> 00:07:21,840 >> Allison BUCHHOLTZ-AU: Kaya ito ay ang lahat ng katawan, 179 00:07:21,840 --> 00:07:24,450 ngunit ngayon ang aming tagapili lamang ay tumutugon sa talata. 180 00:07:24,450 --> 00:07:27,050 Kaya mayroon lamang namin ang naka-bold at asul para sa partikular na talata, 181 00:07:27,050 --> 00:07:30,760 dahil ito ay ang tanging bagay na nakapaloob sa loob ng p tag. 182 00:07:30,760 --> 00:07:35,349 >> Tomas REIMERS: Sinusuportahan ba na make kahulugan pag-uuri kung paano ang mga bagay encapsulate iba pang mga bagay? 183 00:07:35,349 --> 00:07:38,140 Allison BUCHHOLTZ-AU: Gayundin, lamang sasabihin, tulad ng, ang isa sa mga pinakamahusay na paraan 184 00:07:38,140 --> 00:07:40,889 upang makakuha ng talagang kumportable sa CSS ay gagawin lamang ng mga bagay na tulad nito, 185 00:07:40,889 --> 00:07:42,050 subukan lamang ito. 186 00:07:42,050 --> 00:07:46,700 Ito ay napaka-simpleng i-type ang isang bagay out, pindutin ang I-refresh, at tingnan kung ano ang mangyayari. 187 00:07:46,700 --> 00:07:48,940 At katulad ng karamihan sa CS, -e-eksperimento maaari madalas 188 00:07:48,940 --> 00:07:51,790 humantong sa isang mas mas mahusay na intuitive-unawa. 189 00:07:51,790 --> 00:07:54,432 Higit pang mga kaya kaysa sa amin lang, tulad ng, pakikipag-usap sa iyo. 190 00:07:54,432 --> 00:07:58,350 >> Tomas REIMERS: Oo naman 100% sumang-ayon sa puntong iyon. 191 00:07:58,350 --> 00:08:02,430 Kaya kung pumunta namin pabalik sa ito, ay magsisimulang ipaalam dissecting kung ano mismo ang dalawang gawin. 192 00:08:02,430 --> 00:08:04,550 Kaya mayroon kaming dalawang mga panuntunan ukol dito. 193 00:08:04,550 --> 00:08:07,420 Kaya ang una ay ang kulay ng background. 194 00:08:07,420 --> 00:08:10,590 At makikita mo na na-set namin ito katumbas ng halaga, mapusyaw na asul. 195 00:08:10,590 --> 00:08:15,009 >> Kaya sa CSS, CSS ay pag-uuri ng napaka hindi kabit-kabit tungkol sa kung paano 196 00:08:15,009 --> 00:08:16,300 pinapayagan ka upang tukuyin ang kulay. 197 00:08:16,300 --> 00:08:17,800 Kaya maaari mong tukuyin ang mga ito sa pamamagitan ng pangalan. 198 00:08:17,800 --> 00:08:20,650 Maaari mo ring gawin ang isang bagay tulad ng "pula." 199 00:08:20,650 --> 00:08:25,270 At pagkatapos kung pumunta namin pabalik sa ito, makikita mo na ang background ay pula. 200 00:08:25,270 --> 00:08:29,040 Maaari ka ring makakuha really-- tingin ko sa iyo maaaring makakuha ng medyo creative na may ito, 201 00:08:29,040 --> 00:08:29,540 hindi maaari mong? 202 00:08:29,540 --> 00:08:31,170 >> Allison BUCHHOLTZ-AU: ko Sa tingin maaari mong gamitin ang hex. 203 00:08:31,170 --> 00:08:31,250 Maaari mong hindi? 204 00:08:31,250 --> 00:08:32,083 >> Tomas REIMERS: Oo. 205 00:08:32,083 --> 00:08:32,969 Kaya maaari mong gamitin ang hex. 206 00:08:32,969 --> 00:08:34,490 Ngunit ako nag-iisip pangalan-matalino. 207 00:08:34,490 --> 00:08:35,385 Sigurado hindi doon? 208 00:08:35,385 --> 00:08:37,260 Allison BUCHHOLTZ-AU: Maaari mong gawin marami-dami. 209 00:08:37,260 --> 00:08:43,350 Halos tulad ng karamihan sa mga kulay na Maaari name-- tulad, sa palagay ko salmon ay isa. 210 00:08:43,350 --> 00:08:45,322 >> Tomas REIMERS: Humihingi kami ng gonna try salmon. 211 00:08:45,322 --> 00:08:47,530 Allison BUCHHOLTZ-AU: ko Sa tingin chartreuse ay nasa doon. 212 00:08:47,530 --> 00:08:48,050 Tomas REIMERS: Oo. 213 00:08:48,050 --> 00:08:48,550 Tingnan? 214 00:08:48,550 --> 00:08:50,080 Kaya maaari kang makakuha ng medyo creative. 215 00:08:50,080 --> 00:08:52,246 >> Allison BUCHHOLTZ-AU: mo maaaring makakuha ng medyo creative. 216 00:08:52,246 --> 00:08:55,750 Tulad ng, kung maaari mong isipin na ang pangalan ng kulay, ito ay marahil sa doon. 217 00:08:55,750 --> 00:08:57,840 Kung mo ba talagang fine detalyado, maaari kang pumunta hex. 218 00:08:57,840 --> 00:08:58,673 >> Tomas REIMERS: Oo. 219 00:08:58,673 --> 00:08:59,390 Kaya hexadecimal. 220 00:08:59,390 --> 00:09:05,280 Kung naaalala guys ito pabalik mula sa iyong lumang PSET, Ibalik muli ang Imahe, 221 00:09:05,280 --> 00:09:08,300 ka guys ay nagkaroon upang harapin may mga halagang ito hex. 222 00:09:08,300 --> 00:09:15,280 At uri ng pagbabalik-tanaw sa kung ano ang ibig sabihin, hex ay may tatlong mga halaga na naka-imbak sa loob nito. 223 00:09:15,280 --> 00:09:17,250 Kaya sa mga grupo ng mga dalawang-unti. 224 00:09:17,250 --> 00:09:19,300 Ang unang dalawang kumakatawan sa mga pulang halaga. 225 00:09:19,300 --> 00:09:22,420 Ang ikalawang isa ay kumakatawan sa ang berde na halaga. 226 00:09:22,420 --> 00:09:25,020 At ang huli ay asul? 227 00:09:25,020 --> 00:09:30,050 >> Kaya ang mangyayari FF upang kumatawan isang hexadecimal 255. 228 00:09:30,050 --> 00:09:35,480 Kaya mayroon kang 255 na pula, 255 berde, at 0 para sa asul. 229 00:09:35,480 --> 00:09:37,670 At ang range halaga sa pagitan ng 0 at 255. 230 00:09:37,670 --> 00:09:38,350 >> Madla: Mag-right. 231 00:09:38,350 --> 00:09:41,472 Kaya mahalagang, maaari naming maghanap sa internet para sa anumang kulay na gusto namin, 232 00:09:41,472 --> 00:09:43,912 at matukoy ang aktwal na-kilala Kulay ng spectrum combo, 233 00:09:43,912 --> 00:09:45,130 at pagkatapos ay maaari naming ilagay ito sa? 234 00:09:45,130 --> 00:09:46,380 Allison BUCHHOLTZ-AU: Mismong. 235 00:09:46,380 --> 00:09:52,900 Kaya ikaw ay may halos kumpletong kontrol sa ibabaw ng mga kulay na gusto mo sa loob ng CSS. 236 00:09:52,900 --> 00:09:55,069 Kami makapupunta sa makipag-usap tungkol sa mga larawan sa background sa ibang pagkakataon? 237 00:09:55,069 --> 00:09:56,110 O ang gusto naming gawin iyon? 238 00:09:56,110 --> 00:09:56,240 >> Tomas REIMERS: Oo. 239 00:09:56,240 --> 00:09:57,010 Oo naman. 240 00:09:57,010 --> 00:10:00,830 Kaya una, upang ipakita na pula at berde ay dilaw. 241 00:10:00,830 --> 00:10:03,120 At kung kailangan mo ng ilang ng tulong sa paghanap na ito, ikaw 242 00:10:03,120 --> 00:10:05,575 Maaari Google ng isang bagay tulad ng "tagapili ng kulay." 243 00:10:05,575 --> 00:10:07,200 Allison BUCHHOLTZ-AU: Oh, ito ay kaya maganda. 244 00:10:07,200 --> 00:10:09,090 Gustung-gusto ko Picker ng Kulay. 245 00:10:09,090 --> 00:10:11,360 >> Tomas REIMERS: colorpicker.com ay isang magandang halimbawa. 246 00:10:11,360 --> 00:10:14,580 At dito, makikita mo na mayroon kang isang buong Photoshop-tulad ng tagapili ng kulay. 247 00:10:14,580 --> 00:10:14,920 >> Allison BUCHHOLTZ-AU: MM-Hm. 248 00:10:14,920 --> 00:10:16,980 Gayundin, ang mga cool na bagay na ikaw ay Maaari bumuo ng scheme ng kulay 249 00:10:16,980 --> 00:10:18,896 upang hindi mo na kailangang, tulad ng, clashing kulay. 250 00:10:18,896 --> 00:10:22,780 Tomas REIMERS: At pagkatapos ay narito ang hex value dito. 251 00:10:22,780 --> 00:10:27,800 Kaya maaari mong laging mahanap ang mga online na talaga mga lugar upang makuha ang halaga ng hex mula sa. 252 00:10:27,800 --> 00:10:31,667 Hindi ito-uri-uriin ng na lang, tulad ng, namin makita ang mga kulay ng mundo sa mga numero. 253 00:10:31,667 --> 00:10:34,000 Mas na kami mag-online at makita kung ano ang kulay na gusto namin, 254 00:10:34,000 --> 00:10:36,850 at pagkatapos ay gawin ang mga numero pababa. 255 00:10:36,850 --> 00:10:39,590 Dahil lamang ng isang talagang madali paraan na banggitin ang mga bagay sa CS. 256 00:10:39,590 --> 00:10:40,350 >> Allison BUCHHOLTZ-AU: At pagkatapos ay mayroong also-- 257 00:10:40,350 --> 00:10:41,630 Nalimutan ko ang eksaktong pangalan ng site. 258 00:10:41,630 --> 00:10:43,838 Ngunit mayroong talagang, ako Sa tingin, isang bagay mula sa Adobe 259 00:10:43,838 --> 00:10:48,350 na binubuo ng mga scheme ng kulay para sa iyo, na kung saan ay talagang cool na, dahil hindi mo 260 00:10:48,350 --> 00:10:50,580 definitely-- minsan ito ay mahirap upang malaman kung, 261 00:10:50,580 --> 00:10:53,729 naku, kung gusto kong gamitin ang kulay na ito, kung ano ang maaaring maging isa pang kapaki-pakinabang ang isa 262 00:10:53,729 --> 00:10:56,395 gamitin sa ibang lugar sa aking site sa, tulad ng, gawing mas maganda at cohesive. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> Tomas REIMERS: Allison ng pakikipag-usap tungkol sa isa sa pamamagitan ng Adobe tinatawag Kuler, sa tingin ko. 265 00:11:04,260 --> 00:11:04,885 Ito ay K-U-L-e-R. 266 00:11:04,885 --> 00:11:06,259 Allison BUCHHOLTZ-AU: Sa tingin ko kaya. 267 00:11:06,259 --> 00:11:07,610 Ako ay medyo sigurado na ang isa. 268 00:11:07,610 --> 00:11:11,050 >> Tomas REIMERS: Aking mga paboritong ay palagi nang naging Kulay Scheme Designer. 269 00:11:11,050 --> 00:11:13,998 >> Allison BUCHHOLTZ-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> Tomas REIMERS: Alin ang now-- 271 00:11:16,010 --> 00:11:16,860 >> Allison BUCHHOLTZ-AU: Ah, ito ay maganda. 272 00:11:16,860 --> 00:11:18,818 >> Tomas REIMERS: At ka Maaari isa lamang sabihing, tulad ng, 273 00:11:18,818 --> 00:11:21,700 Gusto ko ng tatlong kulay sa tabi ng bawat isa. 274 00:11:21,700 --> 00:11:25,030 At gawin ang isang bagay na maganda pagkatapos ay hayaan. 275 00:11:25,030 --> 00:11:29,210 At pagkatapos ay maaari kang makakuha ng isang halimbawa ng kung ano na maaaring magmukhang. 276 00:11:29,210 --> 00:11:32,470 At pagkatapos ay kung mag-hover sa alinman sa mga mga ito, binibigyan ka nito ang halaga ng hex. 277 00:11:32,470 --> 00:11:35,010 >> Kaya bilang isang magandang paraan upang simulan ang nag-iisip tungkol sa mga scheme ng kulay 278 00:11:35,010 --> 00:11:39,570 o kung ano ang mga kulay sa isang website Baka pumunta maayos kung magkasama. 279 00:11:39,570 --> 00:11:45,655 Dahil na maaaring maging kahanga-hanga hindi bilang madaling upang pumili bilang sa tingin mo. 280 00:11:45,655 --> 00:11:48,280 At pagkatapos ay ang iba pang mga cool na bagay Na laging natagpuan ko ang tungkol sa site na ito 281 00:11:48,280 --> 00:11:51,480 ay kung pinindot ninyo ang mga halimbawa, ipapakita ito ipakita kung ano ang isang halimbawa website 282 00:11:51,480 --> 00:11:54,800 maaaring magmukhang gamit na scheme ng kulay. 283 00:11:54,800 --> 00:11:56,270 Pa Rin. 284 00:11:56,270 --> 00:11:57,863 >> Bumalik sa aktwal na CSS. 285 00:11:57,863 --> 00:12:01,112 Allison BUCHHOLTZ-AU: Ngunit malinaw naman, namin Alam maaaring maging kapaki-pakinabang ang mga sanggunian. 286 00:12:01,112 --> 00:12:03,195 Tomas REIMERS: Hindi, sila Siguradong ay maaaring maging kapaki-pakinabang. 287 00:12:03,195 --> 00:12:04,720 Kaya ang ikalawang panuntunan, Allison? 288 00:12:04,720 --> 00:12:05,844 >> Allison BUCHHOLTZ-AU: Oo. 289 00:12:05,844 --> 00:12:08,280 Ang ikalawang panuntunan lamang nakaayon sa aming mga font. 290 00:12:08,280 --> 00:12:11,520 Kaya timbang font ay uri lamang of-- kaya ang bigat ng gagawin 291 00:12:11,520 --> 00:12:15,220 maging kung gusto mo lang, gaya ng, normal o, tulad ng, thinner font, 292 00:12:15,220 --> 00:12:17,251 o sa kasong ito, tulad ng, naka-bold. 293 00:12:17,251 --> 00:12:17,750 Nakakalimutan ko. 294 00:12:17,750 --> 00:12:21,557 Ano ang kung nais mong it-- ay mayroong isang thinner isa pa, tulad ng, normal? 295 00:12:21,557 --> 00:12:24,140 Tomas REIMERS: gagawin ko hindi talaga alam kung may thinner isa. 296 00:12:24,140 --> 00:12:24,680 Allison BUCHHOLTZ-AU: ako makalimutan. 297 00:12:24,680 --> 00:12:26,300 Kaya timbang font ating kadalasang gamitin lamang para sa mga naka-bold. 298 00:12:26,300 --> 00:12:29,010 Kung nais mong makakuha ng talagang sa ito, kami ay pagpunta upang ipakita sa iyo. 299 00:12:29,010 --> 00:12:34,317 W3Schools mayroon ng lahat ng iba't ibang mga bagay na maaari mong gawin para sa mga font. 300 00:12:34,317 --> 00:12:36,900 Ngunit isa lamang, kung sakaling nais mong baguhin ang anumang tungkol sa font, 301 00:12:36,900 --> 00:12:39,330 palaging ito ay magiging, tulad ng, font-bagay. 302 00:12:39,330 --> 00:12:43,450 Kaya ito ay magiging tulad ng, font-family kung ikaw ay sa pagsubok na baguhin ang aktwal na uri. 303 00:12:43,450 --> 00:12:47,390 Ito ay font-style kung nais upang gawin itong tulad ng kursiba, 304 00:12:47,390 --> 00:12:49,710 o italics, o watnat. 305 00:12:49,710 --> 00:12:53,570 O kahit font-kulay, kung gusto naming baguhin iyon. 306 00:12:53,570 --> 00:12:55,621 >> Tomas REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Kaya maaari mong baguhin iyon. 308 00:12:56,925 --> 00:12:59,360 At uri ng lamang sa pagbabalik-tanaw ngayon, kaya maaari kang 309 00:12:59,360 --> 00:13:01,400 makita na mayroon up selector namin dito. 310 00:13:01,400 --> 00:13:03,000 Mayroon kaming mga kulot tirante. 311 00:13:03,000 --> 00:13:06,735 At pagkatapos ay mayroon kaming mga panuntunan delimited sa pamamagitan ng semicolon. 312 00:13:06,735 --> 00:13:08,100 Ba na magkaroon ng kahulugan? 313 00:13:08,100 --> 00:13:09,130 Oo? 314 00:13:09,130 --> 00:13:10,500 Ayos. 315 00:13:10,500 --> 00:13:13,200 Kaya kung iyon ang good-- 316 00:13:13,200 --> 00:13:14,424 >> Allison BUCHHOLTZ-AU: Bumalik. 317 00:13:14,424 --> 00:13:17,590 Tomas REIMERS: Hayaan ang partikular na makipag-usap tungkol sa kung anong uri ng mga tagapili na mayroon kami. 318 00:13:17,590 --> 00:13:19,790 'Sanhi sa ngayon hindi namin uri ng ipinapakita lamang na mga tag. 319 00:13:19,790 --> 00:13:21,696 Ngunit ka guys ay maaaring makita ito maaaring mangyari. 320 00:13:21,696 --> 00:13:23,570 Sabihin nating mayroon kang dalawang mga talataan sa isang pahina at mo 321 00:13:23,570 --> 00:13:26,087 nais na ma-estilo isa ngunit hindi ang iba pang, 322 00:13:26,087 --> 00:13:29,170 hindi mo nais lamang upang limitahan ang iyong sarili magkaroon upang gamitin ang iba't ibang mga aktwal na HTML 323 00:13:29,170 --> 00:13:33,410 mga tag upang mabigyan sila ng iba't ibang estilo. 324 00:13:33,410 --> 00:13:35,995 >> Kaya mayroon kaming tatlong pangunahing mga uri ng tagapili. 325 00:13:35,995 --> 00:13:37,120 Allison BUCHHOLTZ-AU: Oo. 326 00:13:37,120 --> 00:13:39,828 Kaya mayroon kaming tag, na kung saan ay kung ano ang Na-uusapan natin ang tungkol sa ngayon. 327 00:13:39,828 --> 00:13:42,430 Kaya na uri ng tulad ng iyong katawan o p. 328 00:13:42,430 --> 00:13:46,280 At pagkatapos ay mayroon kaming klase, na kapag tinutukoy namin ito sa aming mga CSS file, 329 00:13:46,280 --> 00:13:49,907 palagi itong nangyayari na tuldok, ang anumang Gusto mo ang pangalan ng iyong klase na. 330 00:13:49,907 --> 00:13:51,490 At ito ay maaaring ilapat sa maramihang mga bagay. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Sabihin nating mayroon ka ng limang talata at dalawang sa tatlong ng mga ito 333 00:13:57,610 --> 00:14:00,580 kailangang ma-istilong pareho, Gusto mong ilapat sa isang klase dito. 334 00:14:00,580 --> 00:14:03,040 At ito lamang ang paraan gawin namin ito. 335 00:14:03,040 --> 00:14:05,600 Bibigyan ka namin ng isang halimbawa ng kung saan talaga nagpapakita ito up. 336 00:14:05,600 --> 00:14:11,030 Ngunit kung mayroon kang siguro ilang tag na p, matapos na ito, nais mong isulat, 337 00:14:11,030 --> 00:14:14,170 klase ay katumbas ng kahit anong klase gusto mong ilapat dito. 338 00:14:14,170 --> 00:14:19,280 Kaya kahit anong tagapili ng klase na nais naming mag-apply sa mga tiyak na talata, 339 00:14:19,280 --> 00:14:21,300 maaari naming lamang magsulat tulad nito. 340 00:14:21,300 --> 00:14:24,080 Siyempre, sa palagay ko isang halimbawa Gagawing mas kongkreto. 341 00:14:24,080 --> 00:14:27,270 >> Ang iba pang isa na mayroon kami ay id, na magpakilala namin 342 00:14:27,270 --> 00:14:29,707 may hash, o pound, o hashtag. 343 00:14:29,707 --> 00:14:30,790 Tomas REIMERS: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 Allison BUCHHOLTZ-AU: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 Na gumagana, masyadong. 346 00:14:34,550 --> 00:14:36,640 At ang isang ito ay dapat talagang maging natatangi. 347 00:14:36,640 --> 00:14:39,880 Dapat nilang mailalapat lamang sa mga isang bagay sa iyong pahina. 348 00:14:39,880 --> 00:14:43,820 Kaya kung iyon ay isang partikular na talata, o ilang mga item sa isang listahan, o anumang, 349 00:14:43,820 --> 00:14:45,090 ito ay dapat natatangi. 350 00:14:45,090 --> 00:14:48,730 At sa parehong paraan na aming lamang sabihin, tulad ng, class = "class1 class2," 351 00:14:48,730 --> 00:14:51,577 ito ay maaari lamang maging id ng kahit anong mayroon kami. 352 00:14:51,577 --> 00:14:52,410 Tomas REIMERS: Oo. 353 00:14:52,410 --> 00:14:54,330 Kaya sabihin talagang makipag-usap tungkol sa mga halimbawa dito. 354 00:14:54,330 --> 00:14:58,170 At lamang ako ng pagpunta sa sumisid tuwid pabalik sa code. 355 00:14:58,170 --> 00:15:02,090 Kaya tingnan natin ang ating HTML ipaalam. 356 00:15:02,090 --> 00:15:03,960 At kaya namin ngayon ay may isang talata. 357 00:15:03,960 --> 00:15:05,510 Ito ay teksto. 358 00:15:05,510 --> 00:15:09,151 Lamang ako ng pagpunta sa baguhin ito. "Ito ang teksto 1." 359 00:15:09,151 --> 00:15:11,150 At pagkatapos kami ay pagpunta sa May "Ito ang teksto 2." 360 00:15:11,150 --> 00:15:12,525 >> Allison BUCHHOLTZ-AU: Ikalawa isa. 361 00:15:12,525 --> 00:15:13,540 Tomas REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Kaya mayroon kaming ngayon "Ito ang teksto 2," tama? 363 00:15:16,810 --> 00:15:21,560 At kami ay pagpunta upang makita na kung i-reload namin pahina, kung ano ang iyong pupuntahan namin upang mahanap ang 364 00:15:21,560 --> 00:15:23,067 ay hindi namin gonna find-- 365 00:15:23,067 --> 00:15:24,150 Allison BUCHHOLTZ-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 Tomas REIMERS: Oo. 367 00:15:24,983 --> 00:15:27,570 Kami ay pagpunta upang mahanap ang isang "Ito ang teksto 1, "at" Ito ang teksto 2. " 368 00:15:27,570 --> 00:15:28,650 >> Allison BUCHHOLTZ-AU: At ang kaibig-ibig dilaw na kulay. 369 00:15:28,650 --> 00:15:31,066 >> Tomas REIMERS: At makikita mo ang na ang aming tagapili ngayon, 370 00:15:31,066 --> 00:15:34,940 na nalalapat sa p, o mga talata, naaapektuhan ang dalawang iyan, 371 00:15:34,940 --> 00:15:38,700 dahil pareho ng mga ito matugunan ang mga kondisyon na ang mga ito ay parehong isang p tag. 372 00:15:38,700 --> 00:15:40,360 Na ginagawang kabuuang kahulugan. 373 00:15:40,360 --> 00:15:43,340 Kaya ang tanong ay, na rin, kung ano kung gusto naming lamang makakuha ng isa? 374 00:15:43,340 --> 00:15:46,350 Kaya nang eksakto tulad ng sinasabi Allison, mayroon kaming dalawang iba pang mga paraan upang gawin iyon. 375 00:15:46,350 --> 00:15:47,320 Pupunta ako sa magsimula sa id. 376 00:15:47,320 --> 00:15:48,405 >> Allison BUCHHOLTZ-AU: Magsimula tayo may id Hayaan. 377 00:15:48,405 --> 00:15:50,405 >> Tomas REIMERS: At kapwa ng mga ito ay mga katangian. 378 00:15:50,405 --> 00:15:53,200 Kaya umiiral ang mga katangian sa HTML. 379 00:15:53,200 --> 00:15:55,600 At ano ang mga ito ay isang bagay na magdagdag ka 380 00:15:55,600 --> 00:15:58,840 sa loob ng na tag na hiwalay sa name tag. 381 00:15:58,840 --> 00:16:01,301 Kaya maaari kang magkaroon ng maramihang mga katangian. 382 00:16:01,301 --> 00:16:01,800 Oo? 383 00:16:01,800 --> 00:16:03,950 >> Allison BUCHHOLTZ-AU: lamang ako ay pagpunta sasabihin, mula sa iyong halimbawa mula sa PSET 7, 384 00:16:03,950 --> 00:16:06,650 kung ang alinman sa mong subukang i-align mga bagay sa sentro, 385 00:16:06,650 --> 00:16:08,550 maaaring nagamit mo "Text align = center." 386 00:16:08,550 --> 00:16:10,550 At napansin mo ito malamang Dapat ay nakasentro 387 00:16:10,550 --> 00:16:12,650 ang iyong teksto o sa iyong navigation bar. 388 00:16:12,650 --> 00:16:15,499 Kaya na rin lang ng katangian na maaari mong maging pamilyar sa iyo. 389 00:16:15,499 --> 00:16:18,040 Tomas REIMERS: Mayroong isang bungkos ng mga katangian na makikita mo. 390 00:16:18,040 --> 00:16:18,539 Oo. 391 00:16:18,539 --> 00:16:21,250 Tulad ng magandang reference sa PSET 7. 392 00:16:21,250 --> 00:16:23,150 Mayroon kaming id. 393 00:16:23,150 --> 00:16:25,080 Maaari ka ring magkaroon klase, mga bagay na katulad nito. 394 00:16:25,080 --> 00:16:27,250 Ang nag-iisang tag maaaring magkaroon ng maraming mga katangian. 395 00:16:27,250 --> 00:16:33,140 Kaya nagsisimula sa id, magpanggap na namin sa nais na magkaroon ng isang id of-- Hindi ko alam. 396 00:16:33,140 --> 00:16:35,140 Susubukan naming tumawag ito espesyal, dahil ang isang ito, hindi namin 397 00:16:35,140 --> 00:16:37,867 pagpunta sa gawing bold, at guhit sa ilalim, at kahit anong. 398 00:16:37,867 --> 00:16:39,950 Allison BUCHHOLTZ-AU: Ito ay gonna maging napaka-espesyal na. 399 00:16:39,950 --> 00:16:42,360 Tomas REIMERS: Kaya ito isa, mayroon kaming id espesyal na. 400 00:16:42,360 --> 00:16:48,140 Kaya ang paraan upang piliin na iyon, pagkatapos, ay sa main.css, sa halip na magkaroon ng isang p tag, 401 00:16:48,140 --> 00:16:51,500 gawin mo #special, OK? 402 00:16:51,500 --> 00:16:55,538 At na pinipili ang bagay na may id na espesyal. 403 00:16:55,538 --> 00:16:57,295 Gumawa ba ito pakiramdam sa lahat? 404 00:16:57,295 --> 00:16:57,920 Madla: Oo. 405 00:16:57,920 --> 00:16:59,110 Tomas REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Kaya ngayon kung pumunta namin pabalik, ipapakita namin see-- naku. 407 00:17:04,440 --> 00:17:06,240 Oo. 408 00:17:06,240 --> 00:17:09,460 Susubukan naming makita na ito lamang Pinipili ang isa na may id na espesyal. 409 00:17:09,460 --> 00:17:10,622 Oo? 410 00:17:10,622 --> 00:17:11,900 Mga tunog cool. 411 00:17:11,900 --> 00:17:12,570 Oo. 412 00:17:12,570 --> 00:17:15,456 >> Madla: Maaari isang bagay na mayroon isang katangian ng parehong mga klase at isang id? 413 00:17:15,456 --> 00:17:16,359 >> Tomas REIMERS: Oo. 414 00:17:16,359 --> 00:17:16,900 Madla: OK. 415 00:17:16,900 --> 00:17:20,887 At pagkatapos ay kung ano ang mangyayari kung pagkatapos ay bigyan ka ng ito ng ilang mga panuntunan sa CSS na sumasalungat? 416 00:17:20,887 --> 00:17:21,970 Tomas REIMERS: Oo naman. 417 00:17:21,970 --> 00:17:23,940 Talagang Kami ay pagpunta pag-usapan iyon. 418 00:17:23,940 --> 00:17:31,890 Kaya nang eksakto kung ano ang iyong pagkuha sa, maaari mo ring magkaroon ng mga klase. 419 00:17:31,890 --> 00:17:36,380 Kaya sabihin magpanggap ako nagkaroon tatlong talata at ako 420 00:17:36,380 --> 00:17:38,730 Nais na style ang unang dalawang ngunit hindi sa ikatlong. 421 00:17:38,730 --> 00:17:42,850 Well, ang iyong unang ideya ay maaaring, well, ako maaaring bigyan lamang ang pangalawang isa sa isang id. 422 00:17:42,850 --> 00:17:45,590 Ngunit hindi mo magagawa, dahil sa isang id, nang eksakto tulad ng sinasabi Allison, 423 00:17:45,590 --> 00:17:47,330 ay dapat na natatangi. 424 00:17:47,330 --> 00:17:50,860 >> Kaya sa halip na sa isang id na, kung ano ang Maaaring gamitin ay maaari mong gamitin ang isang klase. 425 00:17:50,860 --> 00:17:57,880 At isang class-- kung ano ang nagbibigay-daan ito mo lang gawin ay isa lamang sinasabi, 426 00:17:57,880 --> 00:17:59,610 ito ay pagmamay-ari bilang bahagi ng isang grupo. 427 00:17:59,610 --> 00:18:02,410 Sa kasong ito, ang aming grupo ay tinatawag na Special. 428 00:18:02,410 --> 00:18:06,500 At kung ano ang pagpunta naming gawin pagkatapos ay kami ay pagpunta sa say-- sa halip na libra, 429 00:18:06,500 --> 00:18:08,070 kami ay pagpunta sa gumamit ng tuldok. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 At mapansin na ang pound at tuldok umiiral lamang sa loob ng CSS file, 432 00:18:11,950 --> 00:18:12,797 hindi sa loob ng HTML. 433 00:18:12,797 --> 00:18:13,880 Allison BUCHHOLTZ-AU: Oo. 434 00:18:13,880 --> 00:18:15,185 Mahalagang pagkakaiba. 435 00:18:15,185 --> 00:18:17,510 >> Tomas REIMERS: Mayroon akong Nagkaroon kaya magkano ang pakikibaka, 436 00:18:17,510 --> 00:18:23,990 dahil ko bang ilagay ang hash sa HTML at pagkatapos ay nadama lamang nakababagod para sa isang mahabang panahon. 437 00:18:23,990 --> 00:18:27,470 Tingnan kung paano ito pumipili ng parehong ang mga may klase na? 438 00:18:27,470 --> 00:18:28,210 Ayos. 439 00:18:28,210 --> 00:18:29,950 >> Ngayon, mga bagay na maaaring magkaroon ng maramihang mga klase. 440 00:18:29,950 --> 00:18:32,790 Ipagpalagay natin na nais kong gawin ang unang dalawang magkaroon ng isang background ng dilaw 441 00:18:32,790 --> 00:18:36,770 at ang dalawa ay may pangalawang isang kulay ng bughaw. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Hindi ko talaga alam kung bakit ko gusto nais upang gawin iyon, ngunit maaari ko. 444 00:18:39,735 --> 00:18:42,401 >> Allison BUCHHOLTZ-AU: Maaaring hindi inirerekumenda ito para sa iyong website. 445 00:18:42,401 --> 00:18:43,880 Ngunit para sa aming mga layunin, makikita ito gawin. 446 00:18:43,880 --> 00:18:46,294 >> Tomas REIMERS: Hindi isang mahusay na scheme ng kulay. 447 00:18:46,294 --> 00:18:49,210 Allison BUCHHOLTZ-AU: Well, dilaw at bughaw ang aking mga mataas na mga kulay ng paaralan. 448 00:18:49,210 --> 00:18:50,947 Hindi ko alam, bagaman. 449 00:18:50,947 --> 00:18:53,530 Tomas REIMERS: Allison ng mataas paaralan ay may isang mahusay na scheme ng kulay. 450 00:18:53,530 --> 00:18:54,520 [Tawa] 451 00:18:54,520 --> 00:18:59,120 Kaya pagkatapos ay kung ano ang maaari naming tumawag ito Hinahayaan ng tawagan this-- kaya kami ay may mga espesyal na 452 00:18:59,120 --> 00:19:00,030 at mayroon Pretty namin. 453 00:19:00,030 --> 00:19:02,405 Iminumungkahi ko, para sa ito, ginagamit mo marami pang mga malarawan na pangalan. 454 00:19:02,405 --> 00:19:05,820 Allison BUCHHOLTZ-AU: Oo, nais ko tumawag ito, tulad ng, dilaw o asul. 455 00:19:05,820 --> 00:19:08,314 >> Tomas REIMERS: Hindi kami talagang gumagawa ng tunay na website, 456 00:19:08,314 --> 00:19:09,730 na ang dahilan kung bakit hindi namin ginagawa iyon. 457 00:19:09,730 --> 00:19:11,521 Ngunit kung ikaw talaga ay nagkaroon ng isang tunay na website, mo 458 00:19:11,521 --> 00:19:16,220 maaaring mayroon, tulad ng, header artikulo, nilalaman ng artikulo, unang salita, 459 00:19:16,220 --> 00:19:21,920 mga bagay tulad na, na nagbibigay-daan sa iyo na maging mas mapaglarawan. 460 00:19:21,920 --> 00:19:23,550 Ang mga ito ay talagang tulad lamang ng mga variable. 461 00:19:23,550 --> 00:19:28,390 Dapat nilang napangalanan sa isang paraan kung saan maaari, like-- oo, sa gayon. 462 00:19:28,390 --> 00:19:29,470 Perpekto. 463 00:19:29,470 --> 00:19:30,480 >> Kaya kulay ng background. 464 00:19:30,480 --> 00:19:35,920 At pagkatapos kami ay pagpunta sa say-- kaya ang paraan upang baguhin ang kulay ay "color." lamang 465 00:19:35,920 --> 00:19:38,412 At kami ay pagpunta sa gawin itong asul. 466 00:19:38,412 --> 00:19:40,150 Iyon ay cool. 467 00:19:40,150 --> 00:19:42,640 Kaya ngayon mayroon kaming ang dalawang unang may mga espesyal na. 468 00:19:42,640 --> 00:19:45,972 Susunod isang pupuntahan may "class = kaakit-akit." 469 00:19:45,972 --> 00:19:49,180 Allison BUCHHOLTZ-AU: At pagkatapos ay ipapakita sa iyo Gusto upang idagdag ang "medyo" sa isa gitna. 470 00:19:49,180 --> 00:19:49,971 Tomas REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 At pagkatapos ay sa gitna ng isa, upang magdagdag ng "maganda," kung ano ang mangyayari 472 00:19:52,970 --> 00:19:56,880 ay ikaw ay may espasyo. 473 00:19:56,880 --> 00:19:59,800 Kaya ang katangian ng klase ay isang listahan na espasyo ng kuwit 474 00:19:59,800 --> 00:20:02,450 ng lahat ng mga klase na nalalapat sa tag na iyon. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Hindi ito tulad ng isang ito ay kabilang sa ang ilang mga uri ng espesyal na klase na tinatawag na 477 00:20:05,750 --> 00:20:07,180 "Espesyal, espasyo, medyo." 478 00:20:07,180 --> 00:20:10,870 Ito ay kabilang sa dalawang classes-- espesyal at kaakit-akit. 479 00:20:10,870 --> 00:20:12,492 Oo? 480 00:20:12,492 --> 00:20:14,360 Ayos. 481 00:20:14,360 --> 00:20:17,010 >> At pagkatapos ay kung tiningnan namin sa kung ano ang mangyayari, kami ay 482 00:20:17,010 --> 00:20:21,850 pagpunta upang makita ang unang isa ay dilaw na background, itim na teksto. 483 00:20:21,850 --> 00:20:22,450 Pangalawa one-- 484 00:20:22,450 --> 00:20:26,160 >> Allison BUCHHOLTZ-AU: --has bold dilaw na background na may asul na teksto. 485 00:20:26,160 --> 00:20:29,330 At ang aming huling isa lamang ay ang asul na teksto na namin na nakatalaga dito. 486 00:20:29,330 --> 00:20:30,870 >> Tomas REIMERS: cool? 487 00:20:30,870 --> 00:20:32,491 Paano gumagana ang tagapili? 488 00:20:32,491 --> 00:20:32,990 Kahanga-hanga. 489 00:20:32,990 --> 00:20:34,720 >> Allison BUCHHOLTZ-AU: Huwag nais naming pag-usapan ang conflict sa ngayon pagkatapos? 490 00:20:34,720 --> 00:20:35,780 >> Tomas REIMERS: Kaya oo. 491 00:20:35,780 --> 00:20:36,310 Oo naman. 492 00:20:36,310 --> 00:20:38,380 Kaya kung ano ang mangyayari kung magkaroon ng isang hindi pagkakasundo, tama? 493 00:20:38,380 --> 00:20:44,740 Magpanggap na ang una Hayaan nagse-set up ng isang bagay like-- 494 00:20:44,740 --> 00:20:47,240 Allison BUCHHOLTZ-AU: Baka nagbabago ang isang ito sa background? 495 00:20:47,240 --> 00:20:48,090 Tomas REIMERS: Oo. 496 00:20:48,090 --> 00:20:51,699 Kaya kami ay pagpunta sa gawin "medyo" baguhin ang background na salmon. 497 00:20:51,699 --> 00:20:54,740 Allison BUCHHOLTZ-AU: Ikaw lamang ang may lahat ng mga mahusay na kulay sa araw na ito, Tomas. 498 00:20:54,740 --> 00:20:55,573 Tomas REIMERS: Oo. 499 00:20:55,573 --> 00:20:58,200 Dahil nakita ko ang maaari kong gamitin ang salmon bilang isang tunay na kulay. 500 00:20:58,200 --> 00:21:00,270 Kaya namin lamang ng pagpunta sa gawin iyon. 501 00:21:00,270 --> 00:21:01,770 Sa tingin ko rin Sunset ay isang tunay na kulay. 502 00:21:01,770 --> 00:21:03,103 Madla: Sunset ay isang tunay na kulay? 503 00:21:03,103 --> 00:21:04,572 Allison BUCHHOLTZ-AU: subukan natin ito Hayaan. 504 00:21:04,572 --> 00:21:07,735 Tomas REIMERS: Pagkatapos demo dahil lang sa kasong ito makikialam up, 505 00:21:07,735 --> 00:21:08,943 Hindi ko nais na pag-debug. 506 00:21:08,943 --> 00:21:11,580 Upang malaman namin ang salmon ay isang tunay na kulay. 507 00:21:11,580 --> 00:21:15,626 Kaya ang anumang mga hula sa kung ano ang nangyayari sa mangyayari? 508 00:21:15,626 --> 00:21:17,522 >> Allison BUCHHOLTZ-AU: Anumang ideya? 509 00:21:17,522 --> 00:21:20,002 >> Madla: [hindi marinig]. 510 00:21:20,002 --> 00:21:20,920 >> Tomas REIMERS: Oo. 511 00:21:20,920 --> 00:21:22,150 Kaya mo nakuha ko akmang-akma. 512 00:21:22,150 --> 00:21:24,930 Talaga, ito ay tumatagal ng huling panuntunan na ito ay ibinigay. 513 00:21:24,930 --> 00:21:27,860 >> Allison BUCHHOLTZ-AU: Kaya ito ay kung saan cascading ay magkakabisa. 514 00:21:27,860 --> 00:21:31,080 >> Tomas REIMERS: Kaya tandaan kung paano namin nagkaroon na Lumalagaslas na mga Pilas ng Estilo? 515 00:21:31,080 --> 00:21:33,660 Kaya sa pamamagitan ng na, uri ng namin ibig sabihin mayroon kaming ng grupo ng mga panuntunan 516 00:21:33,660 --> 00:21:37,115 na nalalapat sa tuktok ng bawat isa, at maaari rin nilang i-override ng bawat isa. 517 00:21:37,115 --> 00:21:39,380 >> Allison BUCHHOLTZ-AU: Kaya kahit anong sa ibaba 518 00:21:39,380 --> 00:21:41,540 ito ay sasapaw ang kahit anong sa itaas. 519 00:21:41,540 --> 00:21:45,842 Maaari kang magkaroon ng mga patakaran na ganap magkaila isang bagay muna. 520 00:21:45,842 --> 00:21:48,300 Iyon ang dahilan kung bakit din nais na maging Mag-ingat kapag ikaw ay estilo, 521 00:21:48,300 --> 00:21:51,465 kaya hindi ka paglikha ng mga panuntunan na saan ka ganap na pinakamahalaga. 522 00:21:51,465 --> 00:21:53,340 >> Tomas REIMERS: O siguro mo gustong patungan panuntunan. 523 00:21:53,340 --> 00:21:53,920 >> Allison BUCHHOLTZ-AU: O siguro mong gawin. 524 00:21:53,920 --> 00:21:54,300 Oo. 525 00:21:54,300 --> 00:21:57,175 >> Tomas REIMERS: magpanggap na mayroon kang isang klase na nalalapat sa karamihan ng mga bagay, 526 00:21:57,175 --> 00:22:01,220 ngunit sabihin nating gusto mong baguhin ang Kulay ng background sa pula at ang font 527 00:22:01,220 --> 00:22:03,140 timbang na naka-bold para sa karamihan mga bagay, ngunit para sa isa, 528 00:22:03,140 --> 00:22:06,098 gusto mo lamang ang kulay ng background maging pula ngunit gusto lahat ng iba pang 529 00:22:06,098 --> 00:22:09,990 ari-arian, maaari mong gawin ang isang bagay tulad ng "font-weight = normal," 530 00:22:09,990 --> 00:22:12,760 na kung saan ay pagkatapos ay i-undo na naka-bold pagbabago. 531 00:22:12,760 --> 00:22:14,480 Oo? 532 00:22:14,480 --> 00:22:17,250 Muli, ang pinakamahusay na paraan, sa palagay ko Sinabi ni Allison ito, ay ensayo pa lamang. 533 00:22:17,250 --> 00:22:18,080 >> Allison BUCHHOLTZ-AU: e-eksperimento. 534 00:22:18,080 --> 00:22:20,090 >> Tomas REIMERS: Kasanayan, pagsasagawa, kasanayan, at eksperimento. 535 00:22:20,090 --> 00:22:22,950 Alam ko ng maraming mga tao na sa tingin CSS ay isa lamang ng maraming hula-at-check 536 00:22:22,950 --> 00:22:25,580 sa pagtatapos ng araw, kung saan kung Gusto mo bang gawin something-- tulad ng, 537 00:22:25,580 --> 00:22:27,663 mayroon kang isang magaspang na ideya, ngunit marahil kailangan pa rin 538 00:22:27,663 --> 00:22:31,390 subukan ito upang tiyakin na alam mo kung ano ang mukhang. 539 00:22:31,390 --> 00:22:34,482 >> Madla: Kapag naka-a-apply klase, higit sa isang 540 00:22:34,482 --> 00:22:37,339 sa parehong talata o seksyon, ginagawa nito 541 00:22:37,339 --> 00:22:39,505 anong pagkakasunud-sunod bagay na maaari mong -type ang mga ito sa mga panipi? 542 00:22:39,505 --> 00:22:40,992 >> Tomas REIMERS: Hindi, hindi sa lahat. 543 00:22:40,992 --> 00:22:45,764 >> Allison BUCHHOLTZ-AU: Ano ang mahalaga ay ang pagkakasunud-sunod sa loob ng iyong style sheet CSS. 544 00:22:45,764 --> 00:22:47,430 Madla: Maaari mo bang ulitin ang tanong? 545 00:22:47,430 --> 00:22:50,680 Tomas REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 Allison BUCHHOLTZ-AU: Sa loob ng klase, kapag naka nagbibigay sa mga klase 547 00:22:53,990 --> 00:22:56,964 sa isang bagay sa HTML, ang ito mahalaga na pagkakasunud-sunod ang mga ito sa? 548 00:22:56,964 --> 00:22:58,130 Hindi mahalaga ang pagkakasunod-sunod. 549 00:22:58,130 --> 00:23:02,915 Kung ano ang mahalaga ay ang pagkakasunud-sunod ng mga tagapili ng klase sa loob ng iyong CSS, 550 00:23:02,915 --> 00:23:04,306 sa loob ng iyong style sheet. 551 00:23:04,306 --> 00:23:06,982 >> Tomas REIMERS: Sound magandang? 552 00:23:06,982 --> 00:23:08,532 >> Allison BUCHHOLTZ-AU: kaibig-ibig. 553 00:23:08,532 --> 00:23:11,539 >> Tomas REIMERS: At pagkatapos ay kami ay pagpunta upang magpatuloy to-- 554 00:23:11,539 --> 00:23:13,330 Allison BUCHHOLTZ-AU: Ano ang mayroon kami susunod? 555 00:23:13,330 --> 00:23:14,245 Nakakalimutan ko. 556 00:23:14,245 --> 00:23:16,087 Oh, mayroon lamang namin ang mga halimbawa. 557 00:23:16,087 --> 00:23:17,295 Ngunit uri ng tapos na namin ang mga iyon. 558 00:23:17,295 --> 00:23:18,990 Tapos na namin ang mga halimbawa sa mabilisang. 559 00:23:18,990 --> 00:23:20,540 >> Tomas REIMERS: makakuha kami sa pagsamahin ang tagapili sa lalong madaling panahon. 560 00:23:20,540 --> 00:23:22,790 >> Allison BUCHHOLTZ-AU: Oh, makuha namin upang pagsamahin ang tagapili. 561 00:23:22,790 --> 00:23:25,260 Tomas REIMERS: Kaya ilang mga halimbawa ay mayroon kaming 562 00:23:25,260 --> 00:23:29,630 # Dog-- pound, o hashtag, o octothorpe, o anumang 563 00:23:29,630 --> 00:23:32,050 na nais mong tawagan that-- matalim. 564 00:23:32,050 --> 00:23:34,875 >> Allison BUCHHOLTZ-AU: Biglang aso. 565 00:23:34,875 --> 00:23:36,470 >> Tomas REIMERS: Pagkatapos mayroon kang .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Isang bagay ay may id ng aso, mayroon lamang isang aso sa pahina. 568 00:23:41,600 --> 00:23:43,870 Isang bagay ay may id ng pusa, mayroon lamang isang pusa. 569 00:23:43,870 --> 00:23:45,665 Maaaring may maraming mga alagang hayop sa pahina. 570 00:23:45,665 --> 00:23:47,570 Iyon ang dahilan kung bakit namin ibinigay na mga klase. 571 00:23:47,570 --> 00:23:48,740 Mayroon kang isang halimbawa ng p. 572 00:23:48,740 --> 00:23:50,490 At pagkatapos ay sa gayon ang isa sa mga huling halimbawa, na 573 00:23:50,490 --> 00:23:53,790 ay isang bagay na hindi pa namin usapan tungkol sa, ay kung ano ang mangyayari kapag pagsamahin mo ang mga ito. 574 00:23:53,790 --> 00:23:54,580 Kaya p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Kaya para sa na, sabihin bumalik sa code at ipakilala another-- oo. 577 00:24:02,950 --> 00:24:04,290 Kaya muli dito. 578 00:24:04,290 --> 00:24:04,850 >> Allison BUCHHOLTZ-AU: ko parang ito ay really-- 579 00:24:04,850 --> 00:24:08,105 tulad lamang ng pagtingin sa mga halimbawa Talagang ang paraan upang matuto ito. 580 00:24:08,105 --> 00:24:09,360 Kaya na kung anong ginagawa namin. 581 00:24:09,360 --> 00:24:14,030 >> Tomas REIMERS: Kaya ipaalam magpanggap na namin nais lamang upang piliin ang teksto 2, i-right? 582 00:24:14,030 --> 00:24:16,530 Kaya nga tayo ay hindi maaaring gawin na may id. 583 00:24:16,530 --> 00:24:19,620 Well, maaari naming gawin na gamit ang isang id, ngunit ito ay walang id. 584 00:24:19,620 --> 00:24:22,490 Maaari ba akong magdagdag ng isa, ngunit ng magpanggap ipaalam na hindi ko nais upang magdagdag ng isa 585 00:24:22,490 --> 00:24:24,910 o ito ay mayroon nang ibang bagay. 586 00:24:24,910 --> 00:24:26,516 Hindi ko kayang gawin iyon na may mga iyon. 587 00:24:26,516 --> 00:24:28,870 Tag ay hindi talagang natatangi, tama? 588 00:24:28,870 --> 00:24:30,670 At hindi rin ay ang klase. 589 00:24:30,670 --> 00:24:32,314 Ngunit maaari mong pagsamahin ang mga bagay na ito. 590 00:24:32,314 --> 00:24:35,230 Sabihin nating gusto naming gawin ang isang bagay na kung saan ay angkop lamang sa mga bagay na 591 00:24:35,230 --> 00:24:39,420 may klase espesyal at kung saan ay mayroon medyo ang klase. 592 00:24:39,420 --> 00:24:48,150 >> Kaya ano ang maaari mong gawin ay sa main.css, Maaari mong sabihin, ang unang tanggalin ito hayaan. 593 00:24:48,150 --> 00:24:50,240 Maaari mong pagsamahin ang mga ito. 594 00:24:50,240 --> 00:24:51,430 Kaya maaari mong gawin .special. 595 00:24:51,430 --> 00:24:52,110 Walang espasyo. 596 00:24:52,110 --> 00:24:54,770 Lamang .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Ano ang ibig sabihin nito ay ang isang bagay na kung saan ay parehong espesyal at kaakit-akit. 598 00:25:00,550 --> 00:25:01,900 Ba na magkaroon ng kahulugan? 599 00:25:01,900 --> 00:25:04,190 At kung pumunta namin dito, kung ano na iyong pupuntahan upang makita 600 00:25:04,190 --> 00:25:09,734 ay nalalapat lamang ang panuntunan na ito sa ikalawa, na may parehong mga iyon. 601 00:25:09,734 --> 00:25:11,400 At maaari mong gawin iyon para sa maraming bagay. 602 00:25:11,400 --> 00:25:13,270 Maaari mong say-- sabihin magpanggap Nais kong lamang 603 00:25:13,270 --> 00:25:18,300 upang gawin ang mga bagay na mayroon ang klase medyo at alin ang ring ng tag talata. 604 00:25:18,300 --> 00:25:19,920 Kaya p.pretty. 605 00:25:19,920 --> 00:25:23,585 Ng magpanggap na nagkaroon ako Hayaan isang bagay na medyo sa katawan tag. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Maaari ko bang patakbuhin ang at ako Maaari makita na ito ay lamang 608 00:25:28,490 --> 00:25:32,720 pagpunta sa nalalapat sa mga bagay na talata na may klase medyo. 609 00:25:32,720 --> 00:25:35,650 At maaari mong pagsamahin ang mga ito, talaga, ng marami ayon sa gusto mo. 610 00:25:35,650 --> 00:25:38,580 Sa gayon ay maaari lamang ilagay ang mga ito nang magkakasama. 611 00:25:38,580 --> 00:25:39,604 Ba na magkaroon ng kahulugan? 612 00:25:39,604 --> 00:25:41,770 Allison BUCHHOLTZ-AU: Kaya ang ganitong uri ng Mas kapaki-pakinabang 613 00:25:41,770 --> 00:25:45,490 kapag, Sinasabi ng mas maaga Tomas, siguro mayroon kang isang napaka-komplikadong website, 614 00:25:45,490 --> 00:25:48,050 at mayroon ka ng maraming ng mga panuntunang ito na nakasulat, 615 00:25:48,050 --> 00:25:51,170 at kailangan mo lang pagsamahin ang dalawang mula sa bago. 616 00:25:51,170 --> 00:25:55,350 Tulad ng sa halip ng pagsusulat ng isang buo mga bagong tagapili at pagbabago doon, 617 00:25:55,350 --> 00:25:58,592 Maaari mo lamang pagsamahin ang mga ito kung saan ito nakapatong. 618 00:25:58,592 --> 00:26:00,670 >> Tomas REIMERS: O mo Maaaring mahanap out-- minsan 619 00:26:00,670 --> 00:26:04,290 mayroong isang klase na Ginagawang asul kulay ng font ng tulad ng, 620 00:26:04,290 --> 00:26:06,740 at mayroong isa pang klase na Ginagawa ang mga asul na background. 621 00:26:06,740 --> 00:26:07,840 At na hindi lamang ang gagana. 622 00:26:07,840 --> 00:26:10,924 Kaya ka magsulat ng isang espesyal na kaso, kung saan, like-- ngunit kung mayroon itong kapwa, ano ang iyong 623 00:26:10,924 --> 00:26:13,548 pagpunta sa gawin ay na iyong pupuntahan gawin ang isa sa lilim ng kulay asul 624 00:26:13,548 --> 00:26:15,310 at ang isang ito ang iba pang mga lilim ng kulay asul. 625 00:26:15,310 --> 00:26:15,580 Mag-right? 626 00:26:15,580 --> 00:26:17,955 >> Allison BUCHHOLTZ-AU: Magandang para sa mga uri ng mga pagbubukod. 627 00:26:17,955 --> 00:26:21,220 Tomas REIMERS: Kaya sa isipin ang tungkol sa mga problema 628 00:26:21,220 --> 00:26:25,000 na maaaring lumabas dahil kapag pagsamahin mo ang mga ito. 629 00:26:25,000 --> 00:26:27,020 Ayos. 630 00:26:27,020 --> 00:26:29,692 Kaya pabalik sa aming mga pagtatanghal. 631 00:26:29,692 --> 00:26:31,400 Allison BUCHHOLTZ-AU: Humihingi kami ng halos doon. 632 00:26:31,400 --> 00:26:34,022 Tomas REIMERS: At Huminto sa pagkonekta. 633 00:26:34,022 --> 00:26:36,494 Allison BUCHHOLTZ-AU: Oh, hindi. 634 00:26:36,494 --> 00:26:39,125 Allison BUCHHOLTZ-AU: CS sa sa opisina, internet napupunta pababa. 635 00:26:39,125 --> 00:26:40,360 Oh, ang balintunay. 636 00:26:40,360 --> 00:26:45,620 >> Tomas REIMERS: Kaya sa kabutihang-palad, maaari naming ipakita walang internet, hulaan ko, 637 00:26:45,620 --> 00:26:47,380 dahil mayroon kaming ang lahat ng mga slide dito. 638 00:26:47,380 --> 00:26:49,304 Kaya ipaalam makipag-usap tungkol sa relasyon ng mga tag. 639 00:26:49,304 --> 00:26:50,470 Allison BUCHHOLTZ-AU: I-right. 640 00:26:50,470 --> 00:26:52,660 Kaya lamang uri ng pagpunta -off ng kung ano ang sinabi Tomas, 641 00:26:52,660 --> 00:26:54,180 ito ay isa lamang paraan upang gawin ito. 642 00:26:54,180 --> 00:26:57,840 Kaya mayroon kaming ilang mga magulang tagapili ng bata selector. 643 00:26:57,840 --> 00:27:02,815 Kaya sa halimbawa dito, mayroon kaming ilang mga katawan na may isang klase navbar, pindutan class. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> Tomas REIMERS: Oh, paumanhin. 646 00:27:03,990 --> 00:27:06,180 >> Allison BUCHHOLTZ-AU: At talaga, kung ano ang ibig sabihin nito 647 00:27:06,180 --> 00:27:11,070 ay piliin ang lahat ng mga bata, tulad ng lahat ng mga uri ng mga tagapili, 648 00:27:11,070 --> 00:27:13,040 sa loob ng magulang tagapili. 649 00:27:13,040 --> 00:27:16,004 At ang mga ito ay ang tanging mga bago kailanman ito ay pagpunta upang ilapat sa. 650 00:27:16,004 --> 00:27:17,755 Hindi ko alam kung magkaroon ng isang mas mahusay na paraan of-- 651 00:27:17,755 --> 00:27:19,504 Tomas REIMERS: Kaya ko hulaan ang paraan upang isipin 652 00:27:19,504 --> 00:27:22,440 tungkol sa ito ay matandaan kung paano bago uri ng namin gustong ilagay ang mga ito nang magkakasama. 653 00:27:22,440 --> 00:27:26,340 At pagkatapos ay nangangahulugan na ang isang elemento na tumutugma sa lahat ng mga ito. 654 00:27:26,340 --> 00:27:29,530 Ano ito ay sinasabi ay, ako gusto mo upang tumugma sa lahat ng bagay 655 00:27:29,530 --> 00:27:33,220 sa loob ng some-- gusto ko iyo upang makahanap ng selector. 656 00:27:33,220 --> 00:27:35,670 At pagkatapos ay sa loob na, gusto ko mo upang tumugma sa mga bagong bagay. 657 00:27:35,670 --> 00:27:36,170 Mag-right? 658 00:27:36,170 --> 00:27:40,900 Kaya sa CSS, lahat ng ito ay tungkol sa isang uri ng kawalan ng kakayahang tumugma sa mga item na ito. 659 00:27:40,900 --> 00:27:43,050 At maaari mong subukan upang tumugma sa mga item sa loob iba pang mga item. 660 00:27:43,050 --> 00:27:46,510 >> Kaya sabihin aktwal na gawin ang isang halimbawa, at sa tingin namin na kailangan linawin. 661 00:27:46,510 --> 00:27:53,090 Kaya sabihin magpanggap na mayroon kami espesyal, espesyal na maganda, kahit anong. 662 00:27:53,090 --> 00:27:55,690 At pagkatapos ay mayroon kaming isang link, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Kaya tandaan, ang isang ay isang link. 665 00:28:02,370 --> 00:28:03,900 Hindi ito ng pagpunta sa pumunta sa kahit saan. 666 00:28:03,900 --> 00:28:11,500 At kami ay pagpunta sa bigyan ito ang link na klase, hulaan ko. 667 00:28:11,500 --> 00:28:13,335 Bigyan natin ito ng Hayaang class-- ninyo ako ng ideya. 668 00:28:13,335 --> 00:28:14,460 Allison BUCHHOLTZ-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 Tomas REIMERS: Coo-- sabihin pumunta ito sa klase kaakit-akit. 670 00:28:16,420 --> 00:28:16,930 Bakit hindi? 671 00:28:16,930 --> 00:28:17,971 >> Allison BUCHHOLTZ-AU: OK. 672 00:28:17,971 --> 00:28:23,040 Tomas REIMERS: Kaya karapatan medyo ngayon bagay 673 00:28:23,040 --> 00:28:26,000 ay pagpunta sa gawin ang background asul, kulay ng background ng salmon. 674 00:28:26,000 --> 00:28:27,969 Iyon ang may katuturan. 675 00:28:27,969 --> 00:28:28,760 At kung gagawin namin this-- 676 00:28:28,760 --> 00:28:29,620 >> Allison BUCHHOLTZ-AU: Gusto mo bang magdagdag ng teksto 677 00:28:29,620 --> 00:28:31,078 kaya ang hyperlink talaga nagpapakita up? 678 00:28:31,078 --> 00:28:35,088 Tomas REIMERS: Iyon ay magiging isang mahusay na tawag. 679 00:28:35,088 --> 00:28:37,921 Allison BUCHHOLTZ-AU: 'Sanhi karapatan ngayon lamang namin gonna walang makukuha. 680 00:28:37,921 --> 00:28:39,690 Tomas REIMERS: Kaya ito ay isang link. 681 00:28:39,690 --> 00:28:42,202 "Ito ay isang link." 682 00:28:42,202 --> 00:28:45,820 Oh, at ito ay pagpunta upang maging isa pang link. 683 00:28:45,820 --> 00:28:47,280 Bigyan natin ito sa klase Hayaan ang "cool." 684 00:28:47,280 --> 00:28:50,295 Tama ka. 685 00:28:50,295 --> 00:28:50,795 Ayos. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Kaya ngayon kami ay pagpunta sa grab ito. 688 00:28:56,010 --> 00:28:57,269 Kami ay pagpunta sa magtapon ng isa. 689 00:28:57,269 --> 00:28:59,060 Mayroon kaming isa sa espesyal na tag, at din namin 690 00:28:59,060 --> 00:29:01,150 Magiging isa sa mga kaakit-akit na tag. 691 00:29:01,150 --> 00:29:05,449 At ngayon kung ano ang namin ang pagpunta sa gawin ay kami ay pagpunta sa gawin cool-- 692 00:29:05,449 --> 00:29:06,490 kung ano ang gusto namin itong gawin? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 Allison BUCHHOLTZ-AU: Maaari ba kaming gawin itong mas malaking? 695 00:29:12,180 --> 00:29:13,800 Tomas REIMERS: bigyan natin ito ng hangganan Hayaan. 696 00:29:13,800 --> 00:29:14,840 Allison BUCHHOLTZ-AU: maaari naming border. 697 00:29:14,840 --> 00:29:15,673 Tomas REIMERS: Oo. 698 00:29:15,673 --> 00:29:18,560 Kaya kami ay pagpunta sa gawin ang isang bagay tulad ng, hangganan is-- at nagpapaumanhin kami 699 00:29:18,560 --> 00:29:20,971 pagpunta sa ipaliwanag ito lahat sa isang segundo. 700 00:29:20,971 --> 00:29:21,470 Para sa now-- 701 00:29:21,470 --> 00:29:24,592 >> Allison BUCHHOLTZ-AU: Upang ang modelo na kahon. 702 00:29:24,592 --> 00:29:27,300 Tomas REIMERS: Ngunit para sa ngayon, hindi namin lamang ng pagpunta sa bigyan ito ng isang hangganan. 703 00:29:27,300 --> 00:29:29,580 Kaya ano ang ibig sabihin na ikaw ay pagpunta upang makita ang mga link na ito. 704 00:29:29,580 --> 00:29:32,788 At ka ng pagpunta upang makita na mayroon silang mga ito, tulad ng, pangit itim na hangganan, na 705 00:29:32,788 --> 00:29:33,820 ay cool. 706 00:29:33,820 --> 00:29:34,500 >> Allison BUCHHOLTZ-AU: Ang aming website ay kaya kaakit-akit. 707 00:29:34,500 --> 00:29:35,333 >> Tomas REIMERS: Oo. 708 00:29:35,333 --> 00:29:38,930 Ang aming website ay kahanga-hanga. 709 00:29:38,930 --> 00:29:41,585 Kaya ang dalawang mga link, at lumilitaw ang mga ito. 710 00:29:41,585 --> 00:29:44,160 Ngayon magpanggap na ko sa nais lamang na gawin ito 711 00:29:44,160 --> 00:29:50,072 kung ito ay hindi sa loob ng isang bagay na kung saan ay may isang background ng salmon. 712 00:29:50,072 --> 00:29:52,280 Kaya tandaan na ang isang ito May background ng salmon, 713 00:29:52,280 --> 00:29:54,000 dahil ito ay klase ng kaakit-akit. 714 00:29:54,000 --> 00:29:59,777 >> Ngunit nais naming sabihin na cools lamang na espesyal na, wala sa klase ay nasa klase 715 00:29:59,777 --> 00:30:02,890 maganda, ay dapat magkaroon ng hangganan na iyon. 716 00:30:02,890 --> 00:30:12,549 Well, ano ang maaari mong gawin ay sa iyo Maaaring sabihin, .special, espasyo, .cool. 717 00:30:12,549 --> 00:30:15,590 At kung ano na ang ginagawa, kapag sa tingin mo tungkol dito, ay isa lamang ito sinasabi, 718 00:30:15,590 --> 00:30:19,530 OK, mahanap ako ng lahat ng bagay na tumutugma sa espesyal na. 719 00:30:19,530 --> 00:30:24,104 Pagkatapos ay sa loob ng mga tag na iyon, hanapin sa akin ang lahat ng bagay na ay malamig-lamig. 720 00:30:24,104 --> 00:30:27,270 Allison BUCHHOLTZ-AU: Kaya isa pang paraan na maaaring maging handa na upang isipin ang tungkol ito, 721 00:30:27,270 --> 00:30:29,810 nagdadala ito pabalik sa C, ay tulad lamang ang ideya ng saklaw. 722 00:30:29,810 --> 00:30:34,020 Kaya kapag mayroon kang ilang mga tagapili, tulad ng mga 723 00:30:34,020 --> 00:30:38,460 na namin na aming pinagsusumikapan para sa bago ito, ang iyong buong pahina ng web, ang lahat ng iyong HTML 724 00:30:38,460 --> 00:30:40,180 nasa loob ng iyong saklaw, tama? 725 00:30:40,180 --> 00:30:43,090 Ngunit kapag mayroon kaming mga relasyon magulang-anak, 726 00:30:43,090 --> 00:30:47,130 ito ay gaya ng kung ikaw ay paliitin down na kung saan naghahanap ka sa isang partikular na lugar, 727 00:30:47,130 --> 00:30:50,540 parang, tulad ng, naka-namin ang pagtingin sa loob sa halip ng isang partikular na pag-andar 728 00:30:50,540 --> 00:30:52,007 sa aming buong file. 729 00:30:52,007 --> 00:30:55,090 Madla: Kaya sa na sa isip, gagawin ito na mattered kung nagkaroon kami changed-- 730 00:30:55,090 --> 00:30:56,423 Allison BUCHHOLTZ-AU: Ang order? 731 00:30:56,423 --> 00:30:59,320 Madla: --the klase sa CSS sa .cool, espasyo, .special? 732 00:30:59,320 --> 00:31:01,153 Allison BUCHHOLTZ-AU: Oo, dahil pagkatapos na 733 00:31:01,153 --> 00:31:04,420 sasabihin, saklaw ito sa lahat ng bagay na may cool na, 734 00:31:04,420 --> 00:31:07,235 at pagkatapos ay tumingin sa kung ano ang has-- Ibig kong sabihin, tulad ng, sa kasong ito, 735 00:31:07,235 --> 00:31:08,860 Hindi sa tingin ko ay nagbago ito dito. 736 00:31:08,860 --> 00:31:10,318 >> Tomas REIMERS: Kung namin sinabi kung ano? 737 00:31:10,318 --> 00:31:10,906 Sorry. 738 00:31:10,906 --> 00:31:12,660 >> Allison BUCHHOLTZ-AU: Kung tayo saklaw ito sa palamig at pagkatapos ay 739 00:31:12,660 --> 00:31:14,550 tumingin para sa mga bagay sa labas ng espesyal na, magiging pareho, talagang. 740 00:31:14,550 --> 00:31:16,260 >> Tomas REIMERS: Kaya ito ay hindi magiging. 741 00:31:16,260 --> 00:31:16,590 >> Allison BUCHHOLTZ-AU: Ito gagawin hindi? 742 00:31:16,590 --> 00:31:17,590 Oh, oh na rin. 743 00:31:17,590 --> 00:31:18,090 Ako ay mali. 744 00:31:18,090 --> 00:31:21,480 >> Tomas REIMERS: Kaya ang dahilan ito ay different-- karaniwang mistake-- 745 00:31:21,480 --> 00:31:27,140 ay na sa ngayon lamang ang link ay cool, di ba? 746 00:31:27,140 --> 00:31:32,176 Sa tingin ko ang aking katanungan sa iyo guys ay, ano sa pahinang ito ay tumutugma sa mga .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Mayroong dalawang mga tag dito, tama? 749 00:31:38,340 --> 00:31:39,770 Alin ang isang ito at ang isang ito. 750 00:31:39,770 --> 00:31:40,590 Ang parehong tumugma cool. 751 00:31:40,590 --> 00:31:42,200 Wala pa gumagana. 752 00:31:42,200 --> 00:31:46,460 Kaya kung sinabi sa iyo, .cool, espasyo, .special, kung ano ang iyong pagpunta sa sabihin ay, 753 00:31:46,460 --> 00:31:48,824 sa loob ng mga tag na ito, ano ang mga espesyal na? 754 00:31:48,824 --> 00:31:49,865 Allison BUCHHOLTZ-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Iyon ay kung ano ang it-- karapatan. 756 00:31:51,800 --> 00:31:52,310 Dahil ito ay tulad ng isang bagay na lamang dito. 757 00:31:52,310 --> 00:31:53,310 >> Tomas REIMERS: Kaya pipili na wala. 758 00:31:53,310 --> 00:31:56,530 >> Allison BUCHHOLTZ-AU: Sapagkat may espesyal, hindi namin sa loob ng mga tag na ito dito. 759 00:31:56,530 --> 00:31:57,971 >> Tomas REIMERS: Yaong at mga. 760 00:31:57,971 --> 00:31:58,512 Madla: OK. 761 00:31:58,512 --> 00:31:58,920 Kaya mga tag mula sa mga inaabangan ang panahon iwa? 762 00:31:58,920 --> 00:31:59,740 >> Tomas REIMERS: Oo. 763 00:31:59,740 --> 00:32:01,150 Ba na magkaroon ng kahulugan? 764 00:32:01,150 --> 00:32:03,685 Paano ito ay isa lamang sinusubukan upang paliitin ang saklaw. 765 00:32:03,685 --> 00:32:04,810 Allison BUCHHOLTZ-AU: Oo. 766 00:32:04,810 --> 00:32:06,870 Sa tingin ko na marahil ang pinakamadaling paraan upang isipin ang tungkol dito. 767 00:32:06,870 --> 00:32:09,270 >> Tomas REIMERS: Kaya nakita namin na ito, at nakita namin na ito parehong tumugma sa espesyal na. 768 00:32:09,270 --> 00:32:11,400 At pagkatapos ay hinihingi namin, sa loob ng mga guys, kung ano ang cool? 769 00:32:11,400 --> 00:32:12,941 At sa loob ng isang ito, cool na isa ito. 770 00:32:12,941 --> 00:32:14,500 Sa loob ng isang ito, walang ay malamig-lamig. 771 00:32:14,500 --> 00:32:16,250 Kaya ito ay ang tanging tag na nananatiling. 772 00:32:16,250 --> 00:32:20,112 >> Allison BUCHHOLTZ-AU: Sapagkat cool na Nasa loob lamang ang mga tag ng doon. 773 00:32:20,112 --> 00:32:21,070 Tomas REIMERS: Mismong. 774 00:32:21,070 --> 00:32:22,403 At ano ang mga espesyal na sa loob ng mga? 775 00:32:22,403 --> 00:32:22,930 Wala. 776 00:32:22,930 --> 00:32:25,270 Ngayon, ano ang magiging ko sabihin ay kung walang espasyo, 777 00:32:25,270 --> 00:32:29,880 ka nagtatanong kung ano ang cool na at special-- o kung ano Kahanga at mga espesyal na, tama? 778 00:32:29,880 --> 00:32:35,370 Kung sinasabi mo .special.pretty, na katulad ng .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Dahil kung ano ang pag-alis ng laman ay nagtatanong ay, kapag sinabi mong .special, 780 00:32:39,220 --> 00:32:40,970 ka nagtatanong, OK, kung alin ang mga espesyal? 781 00:32:40,970 --> 00:32:43,780 At pagkatapos ng mga, na alin ang mga kaakit-akit na din, 782 00:32:43,780 --> 00:32:47,010 kung saan ay ang parehong, grammar, bilang ng pagtatanong, kung ano ang maganda, 783 00:32:47,010 --> 00:32:49,500 at pagkatapos ay ng mga, ano ang mga espesyal na rin? 784 00:32:49,500 --> 00:32:50,000 Mag-right? 785 00:32:50,000 --> 00:32:53,099 Ito ay ang pagkakaiba ng kung ano ang sa loob ng kung ano ang. 786 00:32:53,099 --> 00:32:53,640 Madla: OK. 787 00:32:53,640 --> 00:32:54,473 Tomas REIMERS: Oo. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Kahanga-hanga. 790 00:32:58,030 --> 00:33:00,426 Kaya sa na sa isip then-- 791 00:33:00,426 --> 00:33:01,800 >> Allison BUCHHOLTZ-AU: Sa tingin ko ang aming huling bagay ay (SA Fancy British accent) 792 00:33:01,800 --> 00:33:02,510 ang modelo na kahon. 793 00:33:02,510 --> 00:33:05,992 >> Tomas REIMERS: Ang box-- [CHUCKLES] Gustung-gusto ko ang paraan sabi ni Allison na iyon. 794 00:33:05,992 --> 00:33:06,950 Kaya ang modelo box na bagay. 795 00:33:06,950 --> 00:33:09,644 >> Allison BUCHHOLTZ-AU: Mayroon lamang isang kahon, kukunin ko na maging iyong modelo box. 796 00:33:09,644 --> 00:33:11,310 Tomas REIMERS: Kaya ipaalam makipag-usap tungkol sa na. 797 00:33:11,310 --> 00:33:14,070 Kaya ngayon na ginugol kami ng maraming ng panahon ng pakikipag-usap tungkol sa mga tagapili. 798 00:33:14,070 --> 00:33:16,944 Sa pamamagitan ng ngayon, ikaw guys ay marahil, tulad ng, Masters ng selectors-- alam mo na, 799 00:33:16,944 --> 00:33:21,510 kung paano eksaktong piliin ang nilalaman na Gusto mo upang manipulahin sa iyong screen. 800 00:33:21,510 --> 00:33:24,740 >> Kaya ngayon ang tanong ay, kung paano eksaktong maaari mong manipulahin ito? 801 00:33:24,740 --> 00:33:27,010 Kaya tingin ko ang pinaka-basic paraan upang isipin ang tungkol na 802 00:33:27,010 --> 00:33:30,294 ay, well, kung ano eksakto ay isang sangkap sa CSS? 803 00:33:30,294 --> 00:33:32,585 Ginugol kami ng maraming oras pinag-uusapan, ano ng tag, 804 00:33:32,585 --> 00:33:36,140 o kung ano ay ang pinakapangunahing representasyon ng tag na ito? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Ang isang mahusay na paraan upang isipin ang tungkol sa iyon ay, kung ano ang hugis ay salmon? 807 00:33:45,170 --> 00:33:47,295 Ano ang hugis, tulad ng, ang salmon kulay ng background? 808 00:33:47,295 --> 00:33:47,880 >> Madla: Ito ay isang rektanggulo. 809 00:33:47,880 --> 00:33:49,040 >> Tomas REIMERS: Ito ay isang parihaba, tama? 810 00:33:49,040 --> 00:33:50,956 >> Allison BUCHHOLTZ-AU: Ay hindi isang kahanga-hangang gawa tanong. 811 00:33:50,956 --> 00:33:51,870 [Tawa] 812 00:33:51,870 --> 00:33:54,670 >> Tomas REIMERS: Hindi sinusubukan upang linlangin ka guys ito late. 813 00:33:54,670 --> 00:33:57,510 Kaya mayroon kaming ito parihaba. 814 00:33:57,510 --> 00:33:59,140 At ang mga tag ay isang p, i-right? 815 00:33:59,140 --> 00:34:02,280 Nang sa gayon ay nagbibigay sa amin ng mahusay na paniniwala na ang mga talata 816 00:34:02,280 --> 00:34:07,440 ay kinakatawan bilang isang parihaba, sa man lamang sa isip ng browser, na 817 00:34:07,440 --> 00:34:08,715 ito ay. 818 00:34:08,715 --> 00:34:11,423 >> Allison BUCHHOLTZ-AU: Ibig kong sabihin, mga browser ay karaniwang hugis-parihaba, 819 00:34:11,423 --> 00:34:13,440 kaya ang may katuturan. 820 00:34:13,440 --> 00:34:18,750 >> Tomas REIMERS: Ang ideya dito ay na ang lahat ng mga tag sa loob ng CSS 821 00:34:18,750 --> 00:34:21,790 ay kinakatawan bilang isang parihaba. 822 00:34:21,790 --> 00:34:25,699 At ang bawat parihaba ay may apat na mga bahagi ayon sa CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Mayroon kang mga aktwal na nilalaman. 824 00:34:27,830 --> 00:34:29,644 Iyon ang dahilan kung saan naroroon ang teksto. 825 00:34:29,644 --> 00:34:30,470 >> Allison BUCHHOLTZ-AU: Siguro ang iyong larawan. 826 00:34:30,470 --> 00:34:31,303 >> Tomas REIMERS: Oo. 827 00:34:31,303 --> 00:34:33,860 Mayroon kang padding, na ilan lang uri ng white space. 828 00:34:33,860 --> 00:34:35,085 Pagkatapos mayroon kang isang hangganan. 829 00:34:35,085 --> 00:34:37,710 At pagkatapos ay mayroon kang margin, na ay white space sa labas ng na. 830 00:34:37,710 --> 00:34:39,460 Nang sa gayon ay ginagawang walang kahulugan ng sinuman, kaya kami ay 831 00:34:39,460 --> 00:34:42,500 pagpunta sa makipag-usap tungkol na para sa isang segundo. 832 00:34:42,500 --> 00:34:47,570 Kaya dito mismo, kung ano ang pagpunta naming gawin ay kami ay pagpunta upang lumikha ng ilang mga divs, OK? 833 00:34:47,570 --> 00:34:48,420 Mawalang galang na habang I-- 834 00:34:48,420 --> 00:34:51,506 >> Allison BUCHHOLTZ-AU: pakiramdam ko dapat naming ilagay ang isang cute na larawan sa. 835 00:34:51,506 --> 00:34:52,520 >> Tomas REIMERS: namin talagang dapat. 836 00:34:52,520 --> 00:34:53,389 >> Allison BUCHHOLTZ-AU: Pakiramdam ko ay tulad ng lahat ng tao 837 00:34:53,389 --> 00:34:54,870 maaaring makinabang mula sa isang cute na larawan, ang lahat. 838 00:34:54,870 --> 00:34:56,774 >> Tomas REIMERS: Maaari ba kaming lahat ng benepisyo mula sa a-- 839 00:34:56,774 --> 00:34:57,648 >> Madla: Oo, sigurado. 840 00:34:57,648 --> 00:34:58,790 Tomas REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 Kaya dapat naming ilagay ang isang nakatutuwa larawan sa isang lugar. 842 00:35:02,254 --> 00:35:05,295 Allison BUCHHOLTZ-AU: Pakiramdam ko ay tulad ng isang Maaaring maging kapaki-pakinabang cute na kuneho sa ngayon. 843 00:35:05,295 --> 00:35:06,190 Tomas REIMERS: Oo naman. 844 00:35:06,190 --> 00:35:06,950 Allison BUCHHOLTZ-AU: Pagtatapos ng linggo. 845 00:35:06,950 --> 00:35:07,390 Magkaroon ng isang bagay adorab-- 846 00:35:07,390 --> 00:35:08,520 >> Tomas REIMERS: Paano labanan ang isang kuting? 847 00:35:08,520 --> 00:35:09,220 >> Allison BUCHHOLTZ-AU: Isang kuting ang gumagana, masyadong. 848 00:35:09,220 --> 00:35:11,300 >> Tomas REIMERS: Mahusay, dahil mayroong isang site para sa iyon. 849 00:35:11,300 --> 00:35:12,300 Ito ay tinatawag na PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 Allison BUCHHOLTZ-AU: Iyon ay mahusay. 851 00:35:14,719 --> 00:35:15,510 Tomas REIMERS: Oo. 852 00:35:15,510 --> 00:35:18,040 Allison BUCHHOLTZ-AU: lang para sa, tulad ng, mga larawan ng placeholder sa iyong website. 853 00:35:18,040 --> 00:35:18,914 Tomas REIMERS: MM-Hm. 854 00:35:18,914 --> 00:35:21,520 Mayroon ding PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 At mayroong PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> Allison BUCHHOLTZ-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Talagang? 858 00:35:25,350 --> 00:35:28,190 >> Tomas REIMERS: Oh, hindi namin may internet access dito. 859 00:35:28,190 --> 00:35:29,875 >> Allison BUCHHOLTZ-AU: [GROANS] 860 00:35:29,875 --> 00:35:30,375 Kalunus-lunos. 861 00:35:30,375 --> 00:35:32,333 Tomas REIMERS: Kung hindi man, Gusto ko ipakita sa iyo guys 862 00:35:32,333 --> 00:35:33,870 kung paano upang ilagay ang mga larawan sa iyong website. 863 00:35:33,870 --> 00:35:36,370 Kami ay pagpunta sa subukan upang makakuha ng ito nagtatrabaho bago naming pumunta. 864 00:35:36,370 --> 00:35:38,660 Ngunit sa ngayon, hindi namin lamang pagpunta sa makipag-usap sa mga kulay pagkatapos. 865 00:35:38,660 --> 00:35:39,820 Gusto naming ilagay ang mga larawan ng kittens-- 866 00:35:39,820 --> 00:35:40,210 >> Allison BUCHHOLTZ-AU: ginawa namin. 867 00:35:40,210 --> 00:35:43,110 >> Tomas REIMERS: --the internet ni down para sa mga sandali pagiging. 868 00:35:43,110 --> 00:35:47,820 Kaya mayroon kaming dalawang divs, at nagpapaumanhin kami pagpunta sa bigyan ang mga ito ng dalawang mga id. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Kami ay pagpunta sa tumawag ito "Unang" at "pangalawang." 871 00:35:56,760 --> 00:36:01,184 Kaya id = "muna." 872 00:36:01,184 --> 00:36:02,850 At kami ay pagpunta upang mabigyan sila ng dalawang kulay. 873 00:36:02,850 --> 00:36:08,424 Kaya paano pumili kami ng isang bagay may id ng "first"? 874 00:36:08,424 --> 00:36:09,840 Allison BUCHHOLTZ-AU: Dot o hash? 875 00:36:09,840 --> 00:36:10,730 Madla: Biglang. 876 00:36:10,730 --> 00:36:12,940 Tomas REIMERS: Biglang, perpekto. 877 00:36:12,940 --> 00:36:14,950 Biglang, hash, kahit anong we-- 878 00:36:14,950 --> 00:36:15,680 >> Allison BUCHHOLTZ-AU: Maraming mga bagay na dapat tawagan ito. 879 00:36:15,680 --> 00:36:16,430 >> Tomas REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Kami ay pagpunta sa manirahan sa hashtag, at na kung ano ang iyong pupuntahan namin upang pumunta sa. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> Allison BUCHHOLTZ-AU: Hashtag. 883 00:36:20,735 --> 00:36:22,340 >> Tomas REIMERS: Kaya unang hashtag iyon. 884 00:36:22,340 --> 00:36:24,506 >> Allison BUCHHOLTZ-AU: Kaya maaari mong tweet ang seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag cool. 886 00:36:27,582 --> 00:36:29,040 Tomas REIMERS: Hashtag mahusay. 887 00:36:29,040 --> 00:36:30,730 Allison BUCHHOLTZ-AU: Hashtag mahusay, oo. 888 00:36:30,730 --> 00:36:31,480 Tomas REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Kaya mayroon kaming "unang" at "pangalawang." 890 00:36:33,660 --> 00:36:37,697 Kaya una sa lahat, kami ay pagpunta sa may ng isang kulay ng background ng pula. 891 00:36:37,697 --> 00:36:39,030 Allison BUCHHOLTZ-AU: Uh, colon. 892 00:36:39,030 --> 00:36:40,281 Tomas REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 Allison BUCHHOLTZ-AU: Makikita ko ba ang iyong lugar-checker. 894 00:36:42,281 --> 00:36:43,960 Tomas REIMERS: Allison ay nakuha sa akin. 895 00:36:43,960 --> 00:36:45,830 Background-color ng blue-- 896 00:36:45,830 --> 00:36:46,810 >> Tomas REIMERS: Lila! 897 00:36:46,810 --> 00:36:47,726 >> Tomas REIMERS: Lila. 898 00:36:47,726 --> 00:36:48,830 Allison BUCHHOLTZ-AU: Oo. 899 00:36:48,830 --> 00:36:50,630 Ang aking mga paboritong kulay lilang, ang at hindi pa namin ginamit ito. 900 00:36:50,630 --> 00:36:51,546 >> Tomas REIMERS: Lila. 901 00:36:51,546 --> 00:36:53,361 Allison BUCHHOLTZ-AU: Lila. 902 00:36:53,361 --> 00:36:53,860 Na gumagana. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> Tomas REIMERS: Kaya hindi namin pagpunta sa may dalawang divs. 905 00:36:59,880 --> 00:37:01,654 Ang mga ito ay magiging ganap na walang laman. 906 00:37:01,654 --> 00:37:03,070 Dapat malamang kami na magkaroon ng ilang teksto. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Kaya "unang" ay magiging "HELLO." 909 00:37:09,815 --> 00:37:10,940 At ang "pangalawang" ay say-- 910 00:37:10,940 --> 00:37:11,110 >> Allison BUCHHOLTZ-AU: Paalam. 911 00:37:11,110 --> 00:37:12,514 >> Madla: - "mundo." 912 00:37:12,514 --> 00:37:14,122 Kumusta, paalam. 913 00:37:14,122 --> 00:37:16,580 Allison BUCHHOLTZ-AU: Nakita ko ang mga ito sa konsiyerto ang iba pang mga linggo. 914 00:37:16,580 --> 00:37:17,705 Tomas REIMERS: Ang Beatles? 915 00:37:17,705 --> 00:37:20,242 Allison BUCHHOLTZ-AU: Para sa reals. 916 00:37:20,242 --> 00:37:21,200 Ang mga ito ay hindi na mahusay. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Hindi ko gusto ito. 919 00:37:24,750 --> 00:37:26,060 >> Tomas REIMERS: Mayroon kaming "HELLO" at "Paalam." 920 00:37:26,060 --> 00:37:29,102 At muli, CSS ay hindi lamang kahanga-hangang, dahil kinikilala nito ang aming mga kulay. 921 00:37:29,102 --> 00:37:30,810 Hindi kailangang maging -alala na sila umiiral. 922 00:37:30,810 --> 00:37:33,194 Ginagawa nila. 923 00:37:33,194 --> 00:37:35,130 >> Allison BUCHHOLTZ-AU: umiiral ang mga ito. 924 00:37:35,130 --> 00:37:39,560 >> Tomas REIMERS: Kaya CSS sa tingin ko ay 255 salita upang makipag-usap tungkol sa kulay. 925 00:37:39,560 --> 00:37:42,986 Kung maaari mong isipin ang isang kulay sa labas mga 255, tulad ng, ako ay maging impressed. 926 00:37:42,986 --> 00:37:44,110 Allison BUCHHOLTZ-AU: Oo. 927 00:37:44,110 --> 00:37:45,560 Sa tingin ko na maaaring mayroon ka guys lamang dumating sa kanan pagkatapos. 928 00:37:45,560 --> 00:37:47,727 >> Tomas REIMERS: Kaya dito, makikita mo na mayroon kami ng dalawang mga kahon 929 00:37:47,727 --> 00:37:49,143 karapatan sa tuktok ng bawat isa, tama? 930 00:37:49,143 --> 00:37:50,200 HELLO at paalam. 931 00:37:50,200 --> 00:37:51,460 >> Allison BUCHHOLTZ-AU: Walang puwang sa pagitan. 932 00:37:51,460 --> 00:37:53,390 Lang nila smooshed karapatan sa tuktok ng bawat isa. 933 00:37:53,390 --> 00:37:55,973 >> Tomas REIMERS: Kaya ang unang bagay na Sa tingin ko dapat naming makipag-usap tungkol sa 934 00:37:55,973 --> 00:38:02,960 ay hinahayaan ka din na say-- ng oo. 935 00:38:02,960 --> 00:38:08,020 Kaya ay kumakatawan sa CSS ang mga ito bilang isang uri ng mga kahon. 936 00:38:08,020 --> 00:38:10,100 At bilang mga kahon, ang mga ito ng nilalaman. 937 00:38:10,100 --> 00:38:14,540 At ang nilalaman sa ngayon ay isang uri ng ang HELLO o ang paalam at iyon ito. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Kaya isa sa mga unang bagay na Maaari gawin ay maaari kang magdagdag ng padding. 940 00:38:19,790 --> 00:38:25,610 Padding sabi kung magkano ang puwang dapat itong umalis sa bawat panig. 941 00:38:25,610 --> 00:38:29,200 Kaya sabihin nating gusto kong sabihin 10 pixels sa bawat gilid. 942 00:38:29,200 --> 00:38:31,234 At ako ay mag-aral na sa isang segundo. 943 00:38:31,234 --> 00:38:33,150 Allison BUCHHOLTZ-AU: Ang lahat ng mga bagay na ito dito 944 00:38:33,150 --> 00:38:36,980 ay magiging halos sa pixels para sa natitirang bahagi ng seminar. 945 00:38:36,980 --> 00:38:40,980 Ikaw ay pagpunta upang makita na ito ay may ilang espasyo sa paligid nito, tama? 946 00:38:40,980 --> 00:38:46,360 Kaya kung ano ang hindi mo nakikita dito ay mayroong ito invisible uri ng padding 947 00:38:46,360 --> 00:38:49,600 sa bawat gilid, na sinasabi, tulad ng, OK, mayroon kang ang iyong kahon ng content-- 948 00:38:49,600 --> 00:38:51,680 >> Allison BUCHHOLTZ-AU: Gusto mo upang hilahin na lamang ang siyasatin elemento? 949 00:38:51,680 --> 00:38:53,659 >> Tomas REIMERS: Oo, iyon ay isang magandang ideya. 950 00:38:53,659 --> 00:38:56,700 Allison BUCHHOLTZ-AU: Gayundin, nakahanap ako na siyasatin ang elemento ay isang mahusay na paraan 951 00:38:56,700 --> 00:39:01,280 upang malaman kung ang isang bagay ay pagpunta mali, isang bagay na hindi inaasahang mangyayari, 952 00:39:01,280 --> 00:39:04,570 inspecting ang mga tag at makita kung ano ang ito ay gaya-o-overwrite ay kapaki-pakinabang. 953 00:39:04,570 --> 00:39:05,940 >> Tomas REIMERS: Kaya hindi ako sigurado kung maaari makita ang kulay na ito sa iyo guys. 954 00:39:05,940 --> 00:39:06,470 Maaari mo? 955 00:39:06,470 --> 00:39:10,120 Makikita mo ang padding sa uri ng gilid. 956 00:39:10,120 --> 00:39:13,410 At pagkatapos mong makita ang aktwal na nilalaman na kulay bughaw, tama? 957 00:39:13,410 --> 00:39:16,820 Kaya iyon ang napaka Mga pangunahing kaalaman ng modelo box. 958 00:39:16,820 --> 00:39:17,674 Mayroon kang nilalaman. 959 00:39:17,674 --> 00:39:18,590 Pagkatapos ay mayroon kang padding. 960 00:39:18,590 --> 00:39:20,440 >> Madla: Bakit hindi ka lamang gamitin ang kahon sa loob the-- 961 00:39:20,440 --> 00:39:21,606 >> Allison BUCHHOLTZ-AU: I-right. 962 00:39:21,606 --> 00:39:24,745 Dahil lang sa ito pagpili ngayon ang elemento. 963 00:39:24,745 --> 00:39:26,050 >> Tomas REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Iba pang mga bagay. 965 00:39:27,060 --> 00:39:29,780 Kaya ipaalam makipag-usap tungkol na padding utos para sa isang segundo. 966 00:39:29,780 --> 00:39:36,380 Kaya sa CSS, sukat kailangan upang magkaroon ng isang yunit. 967 00:39:36,380 --> 00:39:39,740 Kaya mayroon ka munang ang halaga. 968 00:39:39,740 --> 00:39:41,460 Kaya sa kasong ito, sinabi namin ang 10. 969 00:39:41,460 --> 00:39:44,780 At pagkatapos ay ang kasunod na namin ang sinabi ay pixel, px. 970 00:39:44,780 --> 00:39:49,160 Iba pang mga maaaring mayroon ka ay mga bagay tulad ng sentimetro, pulgada. 971 00:39:49,160 --> 00:39:51,367 Maaari mong gawin ang mga bagay gusto, ano ang 10 pulgada? 972 00:39:51,367 --> 00:39:52,700 At ito ay magiging katawa-tawa. 973 00:39:52,700 --> 00:39:52,990 >> Allison BUCHHOLTZ-AU: Oh, batang lalaki. 974 00:39:52,990 --> 00:39:53,460 >> Madla: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> Tomas AT Allison: Oo. 976 00:39:54,460 --> 00:39:57,840 Tomas REIMERS: Kaya na ang lahat ng padding. 977 00:39:57,840 --> 00:39:59,255 Pupunta ako sa bumalik sa pixels. 978 00:39:59,255 --> 00:40:01,754 >> Allison BUCHHOLTZ-AU: Mga pixel may posibilidad na magkaroon, tulad ng, sa pamantayan. 979 00:40:01,754 --> 00:40:04,589 Kapag tumingin ka sa maraming mga website, karamihan ay gumagana ang mga ito sa pixels. 980 00:40:04,589 --> 00:40:07,755 Tomas REIMERS: Kaya ka pagpunta upang makita ang alinman pixels-- ang iba pang mga nakikita mo 981 00:40:07,755 --> 00:40:13,952 ay em, na isang em ay katumbas ng taas ng font 982 00:40:13,952 --> 00:40:15,160 na kasalukuyan mong ginagamit. 983 00:40:15,160 --> 00:40:16,201 >> Allison BUCHHOLTZ-AU: mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 Tomas REIMERS: Ito ay isang mahusay na paraan upang sabihin, tulad ng, gusto kong ng maraming espasyo bilang aking font 986 00:40:20,740 --> 00:40:21,514 ay pagkuha. 987 00:40:21,514 --> 00:40:23,180 Allison BUCHHOLTZ-AU: Hindi mo ba alam na. 988 00:40:23,180 --> 00:40:25,747 Matuto ka ng isang bagay bagong araw-araw. 989 00:40:25,747 --> 00:40:27,955 Tomas REIMERS: Mayroong isang maraming mga sukat sa CS. 990 00:40:27,955 --> 00:40:29,260 Iminumungkahi ko mong tingnan ang mga ito. 991 00:40:29,260 --> 00:40:32,122 Para sa lahat ng iyong mga kaso, sa tingin ko pixels ay dapat sapat. 992 00:40:32,122 --> 00:40:33,830 At hindi rin sila kung ano na iyong pupuntahan upang makita 993 00:40:33,830 --> 00:40:36,520 sa karamihan ng mga halimbawa tapos online. 994 00:40:36,520 --> 00:40:38,320 Kaya makikita iwanan namin ito sa pixels. 995 00:40:38,320 --> 00:40:42,420 >> Maaari ka ring, dapat kong say-- kaya padding set ng lahat ng mga paddings. 996 00:40:42,420 --> 00:40:49,789 Maaari mo ring gawin ang isang bagay tulad ng "Padding-top" upang lamang set-- 997 00:40:49,789 --> 00:40:52,080 Allison BUCHHOLTZ-AU: Baka susuriin namin ang aming "HELLO" pabalik. 998 00:40:52,080 --> 00:40:55,480 Tomas REIMERS: --to-set lamang ang padding sa itaas at wala ng iba pa. 999 00:40:55,480 --> 00:40:59,560 Kaya ang apat na utos ay padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 at padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> Allison BUCHHOLTZ-AU: Tulad Gusto mong asahan para sa isang kahon. 1002 00:41:02,470 --> 00:41:03,530 >> Tomas REIMERS: Oo. 1003 00:41:03,530 --> 00:41:05,240 Wala masyadong mabaliw doon. 1004 00:41:05,240 --> 00:41:08,230 Ba na magkaroon ng kahulugan? 1005 00:41:08,230 --> 00:41:11,990 Kaya na padding. 1006 00:41:11,990 --> 00:41:14,110 Pupunta ako upang i-set ang lahat ng ang paddings bumalik sa 10. 1007 00:41:14,110 --> 00:41:17,010 At pagkatapos ay ako pupunta sa paglipat sa hangganan. 1008 00:41:17,010 --> 00:41:21,130 >> Kaya kung ano ang hangganan ay ay hangganan ang isang kakatwang mga utos. 1009 00:41:21,130 --> 00:41:24,450 Ito ay tumatagal ng isang uri ng tatlong bagay nang sabay-sabay. 1010 00:41:24,450 --> 00:41:28,930 Kaya ang una ay kung gaano kalaki ang mo gusto mo itong maging bilang isang pagsukat. 1011 00:41:28,930 --> 00:41:30,662 Muli, tanging gumagamit ako ng pixel. 1012 00:41:30,662 --> 00:41:32,620 At ang huling bagay ako dapat idagdag sa mga sukat 1013 00:41:32,620 --> 00:41:35,270 ang isang bagay na hindi kailangan ng yunit ay 0. 1014 00:41:35,270 --> 00:41:37,390 Ito ay talagang tama upang mabigyan 0 isang yunit, 1015 00:41:37,390 --> 00:41:41,940 dahil 0 ay 0 kabuuan pulgada, pixel, sentimetro, kahit anong. 1016 00:41:41,940 --> 00:41:43,960 Ito ay nangangahulugan na ang lahat lamang 0, tama? 1017 00:41:43,960 --> 00:41:46,710 Kaya una mong bigyan ito ng pagsukat. 1018 00:41:46,710 --> 00:41:48,650 >> Pagkatapos mong bigyan ito ang estilo. 1019 00:41:48,650 --> 00:41:49,869 Kaya Pupunta ako sa sabihin ang "matatag." 1020 00:41:49,869 --> 00:41:51,410 At kami makipag-usap tungkol sa kung ano ang ibig sabihin nito ay. 1021 00:41:51,410 --> 00:41:54,290 At pagkatapos ay sa wakas, bigyan mo ito ng isang kulay. 1022 00:41:54,290 --> 00:41:56,850 Kaya Pupunta ako sa sabihin ang "itim." 1023 00:41:56,850 --> 00:41:59,637 At ang mga ito ay ang lahat ng bagay hindi namin ngayon nakikita, maliban sa mga estilo, 1024 00:41:59,637 --> 00:42:00,720 ngunit kami ay makipag-usap tungkol sa na. 1025 00:42:00,720 --> 00:42:04,120 Kaya nakita mo guys sukat, at iyong nakita na kulay. 1026 00:42:04,120 --> 00:42:10,410 At ano ang mangyayari ay na makuha namin ito gandang itim na hangganan sa paligid nito, tama? 1027 00:42:10,410 --> 00:42:11,620 Ikaw guys makita kung paano namin ginawa iyon? 1028 00:42:11,620 --> 00:42:12,760 >> Madla: Oo. 1029 00:42:12,760 --> 00:42:14,850 >> Tomas REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Kaya kung ano ang na? 1031 00:42:17,370 --> 00:42:19,160 Kaya una sa lahat, isang pixel. 1032 00:42:19,160 --> 00:42:20,880 Iyan ay hindi na dapat patunayan sapat, tama? 1033 00:42:20,880 --> 00:42:23,254 Tulad ng, ito ay isang pixel kapal. 1034 00:42:23,254 --> 00:42:26,170 O magiging isang pixel, ngunit ako ay naka-zoom in, kaya kaunti higit pa 1035 00:42:26,170 --> 00:42:26,490 kaysa doon. 1036 00:42:26,490 --> 00:42:27,967 >> Allison BUCHHOLTZ-AU: At kami ay ito resolution TV katawa-tawa. 1037 00:42:27,967 --> 00:42:29,460 >> Tomas REIMERS: Oo. 1038 00:42:29,460 --> 00:42:33,640 Maaari mong gawin itong mas malaki, mas maliit, kahit anong. 1039 00:42:33,640 --> 00:42:35,630 Kaya narito ang isang dalawang-pixel na hangganan. 1040 00:42:35,630 --> 00:42:38,810 Makikita mo ito nang dalawang beses bilang makapal. 1041 00:42:38,810 --> 00:42:40,172 Susunod na bagay na mayroon kang ay kulay. 1042 00:42:40,172 --> 00:42:41,130 Iyan ay hindi kawili-wili. 1043 00:42:41,130 --> 00:42:42,710 Hindi ako pupunta upang makipag-usap tungkol sa na, talaga. 1044 00:42:42,710 --> 00:42:45,110 >> Allison BUCHHOLTZ-AU: Ngunit ang estilo Maaaring maging lamang ng kaunti kawili-wili. 1045 00:42:45,110 --> 00:42:45,980 >> Tomas REIMERS: Oo. 1046 00:42:45,980 --> 00:42:48,560 Kaya istilo, may mga ilang mga na ako makita ginamit karaniwang. 1047 00:42:48,560 --> 00:42:55,690 Solid unang isa sa tabi ng isang tao may mga tuldok, at dashed huling ng isang tao. 1048 00:42:55,690 --> 00:42:59,290 At dito ay puno. 1049 00:42:59,290 --> 00:43:02,980 Makikita mo na ang mga ito ay ng grupo ng mga tuldok, i-right? 1050 00:43:02,980 --> 00:43:09,030 Ang isang mahusay na paraan upang uri ng makakuha ng magandang border pagpunta, gitling din medyo popular. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> Allison BUCHHOLTZ-AU: At pagkatapos ay siyempre, ako 1053 00:43:13,600 --> 00:43:16,660 sigurado maraming iba pang mga mga istilo na maaari kang makakuha ng. 1054 00:43:16,660 --> 00:43:20,000 At mayroon kaming isang mahusay na hanay ng mga link sa dulo para sa iyo guys 1055 00:43:20,000 --> 00:43:23,470 sa uri ng bumasang mabuti at tingnan ang higit cool na CSS. 1056 00:43:23,470 --> 00:43:25,954 >> Tomas REIMERS: At pagkatapos ay ang huling bagay, kami ay 1057 00:43:25,954 --> 00:43:27,870 pagpunta sa makipag-usap tungkol sa mga modelong na kahon tunay mabilis. 1058 00:43:27,870 --> 00:43:30,070 Oh, at pagkatapos ay hangganan, nang eksakto tulad ng padding, 1059 00:43:30,070 --> 00:43:33,270 mayroon ka ring mga bagay tulad ng hangganan-kaliwa, kanang border, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, na nagbibigay-daan sa iyo upang makakuha ng sa isang tiyak na hangganan. 1061 00:43:37,590 --> 00:43:40,650 Kaya narito lamang ang hangganan kaliwa natukoy. 1062 00:43:40,650 --> 00:43:43,060 Sinusuportahan ba na may katuturan? 1063 00:43:43,060 --> 00:43:46,170 >> Allison BUCHHOLTZ-AU: Ito ay isang cool na paraan upang bigyang-diin ang mga bagay o magdagdag 1064 00:43:46,170 --> 00:43:47,545 mga linya sa pagitan ng iba't ibang mga elemento. 1065 00:43:47,545 --> 00:43:48,670 Tomas REIMERS: Oo naman. 1066 00:43:48,670 --> 00:43:50,940 Kaya na ang aming mga hangganan. 1067 00:43:50,940 --> 00:43:52,790 At margin huling ng isang tao. 1068 00:43:52,790 --> 00:43:55,892 Tulad ng padding margin ng maliban sa hindi ito within-- 1069 00:43:55,892 --> 00:43:57,975 Allison BUCHHOLTZ-AU: Ito ay hindi sa paligid ng iyong elemento 1070 00:43:57,975 --> 00:44:00,840 pero sa totoo paligid ng buong kahon na na-namin ang nakakakita. 1071 00:44:00,840 --> 00:44:02,770 >> Tomas REIMERS: Oo. 1072 00:44:02,770 --> 00:44:04,090 Sinabi nito Allison perpektong. 1073 00:44:04,090 --> 00:44:07,550 Ito ay hindi, tulad ng, sa loob ng iyong elemento, ito ay sa paligid ng buong box. 1074 00:44:07,550 --> 00:44:10,900 Iyon ay nangangahulugang ang mga bagay tulad ng background ay hindi nalalapat dito. 1075 00:44:10,900 --> 00:44:13,550 At isa lamang ang sinasabi, tulad ng, hindi ko nais anumang bagay 1076 00:44:13,550 --> 00:44:15,230 sa ganitong karaming espasyo para sa akin. 1077 00:44:15,230 --> 00:44:17,470 Kaya tulad dito mayroon kaming isang margin ng 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 Kaya wala sa loob ng 10 pixels Dapat na susunod sa akin. 1079 00:44:23,100 --> 00:44:26,210 Iyon ang uri ng nito puwang ngunit uri ng hindi. 1080 00:44:26,210 --> 00:44:29,215 Kaya iyon ang napaka Mga pangunahing kaalaman ng modelo box. 1081 00:44:29,215 --> 00:44:30,090 Ba na magkaroon ng kahulugan? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Mahusay, cool. 1084 00:44:34,550 --> 00:44:35,800 Allison BUCHHOLTZ-AU: Kahanga-hanga. 1085 00:44:35,800 --> 00:44:37,890 Kaya ngayon tingin ko namin lamang Mayroon aming cool na mapagkukunan 1086 00:44:37,890 --> 00:44:41,220 na isasaalang-alang namin sa iyo guys sa pamamagitan ng masyadong mabilis. 1087 00:44:41,220 --> 00:44:44,815 At kami actually-- na rin, kailangang kami pa internet? 1088 00:44:44,815 --> 00:44:47,860 >> Tomas REIMERS: Sabihin makita kung ang maaari kong buksan up-- 1089 00:44:47,860 --> 00:44:50,040 hayaan makita lang sa akin kung ako maaaring makakuha ng mabilis na internet 1090 00:44:50,040 --> 00:44:53,317 habang Allison uusap tungkol sa anumang bagay Gusto ni na makipag-usap tungkol sa Allison. 1091 00:44:53,317 --> 00:44:55,150 Allison BUCHHOLTZ-AU: Kaya basically-- gagawin ko hindi 1092 00:44:55,150 --> 00:44:57,930 malaman kung ano pa ang maaari kong sabihin sa puntong ito. 1093 00:44:57,930 --> 00:45:01,340 Ngunit ang mga ito ay ilang talagang magandang mga mapagkukunan. 1094 00:45:01,340 --> 00:45:04,629 Ito ang mga iyon Tomas at nagamit ko 1095 00:45:04,629 --> 00:45:06,420 at tayo talaga ginagamit upang Prep para dito. 1096 00:45:06,420 --> 00:45:09,940 W3Schools ay isa na kayo Dapat na nakita guys bago. 1097 00:45:09,940 --> 00:45:12,440 Inirerekumenda namin ito para sa isang maraming bagay sa CSS. 1098 00:45:12,440 --> 00:45:15,060 Alam ko inirerekomenda ko ito sa ang aking mga seksyon sa lahat ng oras. 1099 00:45:15,060 --> 00:45:21,050 >> Isa sa mga magagandang bagay ay tumutulong ito nagpapahintulot sa iyo na uri ng gulo sa CSS 1100 00:45:21,050 --> 00:45:23,830 at makita ang mga pagbabago agad sa ito, 1101 00:45:23,830 --> 00:45:25,920 tulad ng, i-double window tingnan na ito ay may. 1102 00:45:25,920 --> 00:45:29,980 Kaya hindi mo kailangang mag-alala tungkol sa set up ng iyong sariling mga web page, 1103 00:45:29,980 --> 00:45:33,090 o pagse-set up vhost sa iyong lokal na appliance at lokal na host, 1104 00:45:33,090 --> 00:45:34,980 at pagkuha ng lahat ng mga bagay-bagay na gumagana. 1105 00:45:34,980 --> 00:45:36,830 Ito ay naka-embed sa loob ng pahinang karapatan. 1106 00:45:36,830 --> 00:45:39,042 >> At ito ay may mga maliliit mga aralin na maaari mong 1107 00:45:39,042 --> 00:45:40,750 pumunta sa pamamagitan upang matuto higit pa tungkol sa mga tagapili, 1108 00:45:40,750 --> 00:45:44,610 o matutunan ang tungkol sa pagpapatakbo ng iyong font, o isang background, o isang imahe. 1109 00:45:44,610 --> 00:45:46,990 At mayroon kang mga biglaan resulta na iyong 1110 00:45:46,990 --> 00:45:49,310 Hindi mo na kailangang gawin ang anumang iba pang mga prep trabaho para sa. 1111 00:45:49,310 --> 00:45:51,060 Kaya mahal ko W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Ito ay hindi kapani-paniwala. 1113 00:45:51,960 --> 00:45:52,670 Gumagana ito? 1114 00:45:52,670 --> 00:45:52,950 >> Tomas REIMERS: Oo. 1115 00:45:52,950 --> 00:45:53,720 Hindi, hindi ito. 1116 00:45:53,720 --> 00:45:55,636 Gusto mo sa akin upang subukan at i-restart ang aking computer? 1117 00:45:55,636 --> 00:45:56,410 O nais naming to-- 1118 00:45:56,410 --> 00:46:01,490 >> Allison BUCHHOLTZ-AU: Ibig kong sabihin, na rin, ito ay magiging online na rin. 1119 00:46:01,490 --> 00:46:02,740 Ang lahat ng mga slide ay magiging online. 1120 00:46:02,740 --> 00:46:05,470 Kaya masidhing kong inirerekumendang lamang ginagawa ang mga. 1121 00:46:05,470 --> 00:46:07,880 >> Ito ay mahusay na bilang lamang tulad ng isang impostor sheet. 1122 00:46:07,880 --> 00:46:10,690 Ito ay lamang ang lahat ng mga pangunahing utos na mayroon ka. 1123 00:46:10,690 --> 00:46:13,070 Ito ay mahusay na kapag ikaw ay unang nagsisimula sa iyong website. 1124 00:46:13,070 --> 00:46:15,080 Dahil siguro hindi mo gusto Gusto upang makapunta sa lahat 1125 00:46:15,080 --> 00:46:17,355 ang tunay na kutuhin magaspang disenyo-ng mabibigat na bagay. 1126 00:46:17,355 --> 00:46:20,230 Kailangan mo lamang i-format ito sa paraang na uri ng saysay at kalooban 1127 00:46:20,230 --> 00:46:21,490 gawin para sa ngayon. 1128 00:46:21,490 --> 00:46:23,580 At kung mo ba talagang upang makapunta sa ito, alam ko 1129 00:46:23,580 --> 00:46:27,240 ito ay, tulad ng, isa sa Paboritong mga sanggunian Tomas iyon. 1130 00:46:27,240 --> 00:46:30,130 Kami ay gumagamit ng ito sa prep, at ito ay hindi kapani-paniwala. 1131 00:46:30,130 --> 00:46:33,030 Ito ang Developer mula sa Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> Tomas REIMERS: Kaya Mozilla ay ang mga tao na gumawa ng Firefox. 1133 00:46:36,490 --> 00:46:40,290 At ito ay lamang ang kanilang sariling mga developer sanggunian, na sa palagay ko ay kahanga-hanga. 1134 00:46:40,290 --> 00:46:44,870 At ito ay isang kahanga-hangang listahan ng mga mapagkukunan. 1135 00:46:44,870 --> 00:46:45,530 Kaya have-- namin 1136 00:46:45,530 --> 00:46:48,060 >> Allison BUCHHOLTZ-AU: At pagkatapos ay ang huling tala ay 1137 00:46:48,060 --> 00:46:50,120 kapag sinusubukan mong -disenyo ng iyong website, 1138 00:46:50,120 --> 00:46:53,550 gumuhit ng inspirasyon mula sa mga bagay na sa tingin mo ay kaakit-akit. 1139 00:46:53,550 --> 00:46:56,340 Inspecting ang elemento, inspecting ang source code 1140 00:46:56,340 --> 00:46:59,370 ay maaaring maging napaka-kapaki-pakinabang para sa pagsubok upang malaman kung 1141 00:46:59,370 --> 00:47:02,080 kung paano Estilo iyong sariling website. 1142 00:47:02,080 --> 00:47:04,540 >> Madalas, nararamdaman kong ang pinakamahusay na paraan, bukod sa pag-eeksperimento, 1143 00:47:04,540 --> 00:47:06,290 ay upang tumingin lamang sa mga bagay na medyo. 1144 00:47:06,290 --> 00:47:09,810 Tingin ko ito ay talagang mahirap lamang uri ng desenyo ng mga bagay sa iyong sariling, 1145 00:47:09,810 --> 00:47:11,090 lalo na sa simula. 1146 00:47:11,090 --> 00:47:14,740 Kaya mangyaring tumingin sa mga website na masiyahan ka naghahanap sa. 1147 00:47:14,740 --> 00:47:16,880 Alamin kung bakit ang mga ito sumasamo sa iyo. 1148 00:47:16,880 --> 00:47:19,170 At pagkatapos ay huwag mag-atubiling subukan at magtiklop iyon. 1149 00:47:19,170 --> 00:47:20,410 >> Tomas REIMERS: I-right. 1150 00:47:20,410 --> 00:47:23,120 Kahit na tulad ng mga website tulad nito, maaari mong makita ang 1151 00:47:23,120 --> 00:47:25,460 mayroong tiyak isang div sa itaas. 1152 00:47:25,460 --> 00:47:29,920 At pagkatapos ay mayroon kang isa pang div sa loob dito, na CSS mahusay. 1153 00:47:29,920 --> 00:47:32,480 At pagkatapos ay mayroon kang isang bungkos ng mga link dito. 1154 00:47:32,480 --> 00:47:34,770 Kung mo ba talagang siyasatin lamang mga elemento, maaari mong ayusin ng 1155 00:47:34,770 --> 00:47:38,520 simulan upang makita kung ano ang ginagawa ng mga website ganito ang hitsura, at kung paano maaari ako 1156 00:47:38,520 --> 00:47:40,493 muling likhain na kung Nais kong. 1157 00:47:40,493 --> 00:47:41,890 Ba na magkaroon ng kahulugan? 1158 00:47:41,890 --> 00:47:43,670 Kaya mayroon lamang namin ang tatlong minuto ang natitira. 1159 00:47:43,670 --> 00:47:46,380 Kaya katanungan? 1160 00:47:46,380 --> 00:47:47,650 Anumang ng mga ito? 1161 00:47:47,650 --> 00:47:48,350 Oo. 1162 00:47:48,350 --> 00:47:50,780 >> Madla: Para sa mga kulay parihaba kung paano gagawin, mo 1163 00:47:50,780 --> 00:47:53,499 have-- kung hindi mo ito gusto pagpunta sa buong pahina, maaaring 1164 00:47:53,499 --> 00:47:56,400 ginawa mo ito tumawid lamang kalahati ng mga pahina o lamang ng teksto? 1165 00:47:56,400 --> 00:47:59,660 >> Tomas REIMERS: Oo, talagang. 1166 00:47:59,660 --> 00:48:02,780 Kaya hayaan mo akong makita talaga. 1167 00:48:02,780 --> 00:48:04,670 Mayroon akong dalawang mga ideya. 1168 00:48:04,670 --> 00:48:07,265 Kaya una sa lahat, mo Maaari ring gamitin percents. 1169 00:48:07,265 --> 00:48:08,140 >> Madla: talaga? 1170 00:48:08,140 --> 00:48:11,260 >> Allison BUCHHOLTZ-AU: Kaya ang isang bagay upang hanapin ang kaugnay na pagpoposisyon. 1171 00:48:11,260 --> 00:48:13,385 Ito ay isang bagay na namin walang oras upang makakuha ng in sa, 1172 00:48:13,385 --> 00:48:16,392 ngunit ito ay isang bagay ko talagang inirerekumenda sa iyo guys check out. 1173 00:48:16,392 --> 00:48:17,580 >> Tomas REIMERS: Kaya percents. 1174 00:48:17,580 --> 00:48:21,524 At makita kung paano namin ginawa ito % 50 lang ng lapad? 1175 00:48:21,524 --> 00:48:24,190 Allison BUCHHOLTZ-AU: Kung talaga alam ang bilang ng mga pixel, 1176 00:48:24,190 --> 00:48:25,780 maaari kang maging mas tumpak na paraan na. 1177 00:48:25,780 --> 00:48:27,200 Maaari mong magbiyolin sa paligid dito. 1178 00:48:27,200 --> 00:48:27,700 Ngunit 50%. 1179 00:48:27,700 --> 00:48:31,970 Kung kami ay upang baguhin ang laki ng aming mga browser, Gusto ito gawin itong mas maliit. 1180 00:48:31,970 --> 00:48:35,250 >> Tomas REIMERS: Well, ito ay talaga 50% ngayon, sa tingin ko. 1181 00:48:35,250 --> 00:48:38,820 Ito ay 50%, at pagkatapos ay ang margin ay naidagdag na sa iyon. 1182 00:48:38,820 --> 00:48:40,100 May ng maraming quirks CSS. 1183 00:48:40,100 --> 00:48:43,195 Kaya ngayon ito ay 50% ng lapad ng pahina. 1184 00:48:43,195 --> 00:48:46,860 Ngunit tandaan na mayroon kang 10 pixels kinuha mula sa bawat panig. 1185 00:48:46,860 --> 00:48:49,700 Kaya kung ikaw ay upang ilipat ang laban kaliwang gilid ng browser, 1186 00:48:49,700 --> 00:48:51,550 pagkatapos ay hitsura nito ay magiging tulad ng 50%. 1187 00:48:51,550 --> 00:48:53,884 Muli, tulad ng sinabi ko, CSS maaari maging ng maraming hula-at-check. 1188 00:48:53,884 --> 00:48:56,049 Tulad ng, sa tingin mo ng isang bagay ay pagpunta sa kumilos sa isang paraan, 1189 00:48:56,049 --> 00:48:57,805 ngunit behaves ito ng isang ganap na kakaiba paraan. 1190 00:48:57,805 --> 00:48:59,420 >> Allison BUCHHOLTZ-AU: At makakuha ka ng mas mahusay na lamang, 1191 00:48:59,420 --> 00:49:02,020 at makakuha ka lamang ng mas mahusay na Swersey para sa ito bilang ilipat mo sa kahabaan. 1192 00:49:02,020 --> 00:49:02,730 >> Tomas REIMERS: At ay makakakuha ng mas masahol pa at mas masahol pa. 1193 00:49:02,730 --> 00:49:03,496 Kaya talagang isang lahi lamang. 1194 00:49:03,496 --> 00:49:05,454 >> Allison BUCHHOLTZ-AU: Iyon ang sobrang nagbibigay-pag-asa. 1195 00:49:05,454 --> 00:49:07,070 Gusto naming ang mga ito upang i CSS. 1196 00:49:07,070 --> 00:49:08,810 >> Tomas REIMERS: CSS ay kahanga-hanga. 1197 00:49:08,810 --> 00:49:10,354 Tandaan na iyon. 1198 00:49:10,354 --> 00:49:11,020 Iba pang mga tanong? 1199 00:49:11,020 --> 00:49:14,297 >> Allison BUCHHOLTZ-AU: Ang isang bagay. 1200 00:49:14,297 --> 00:49:14,880 Ano pa? 1201 00:49:14,880 --> 00:49:15,140 Ayos. 1202 00:49:15,140 --> 00:49:15,690 >> Tomas REIMERS: Kahanga-hanga. 1203 00:49:15,690 --> 00:49:18,523 >> Allison BUCHHOLTZ-AU: Well, kung guys may anumang mga katanungan sa ibang pagkakataon, 1204 00:49:18,523 --> 00:49:20,919 Ikinalulungkot namin palaging magagamit bilang bawat dati. 1205 00:49:20,919 --> 00:49:22,960 Maaring makita ang ilang mga sa atin para sa pangwakas na proyekto 1206 00:49:22,960 --> 00:49:24,280 at talagang sa hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> Tomas REIMERS: Oo naman. 1208 00:49:25,200 --> 00:49:25,720 At sa patas. 1209 00:49:25,720 --> 00:49:26,560 >> Allison BUCHHOLTZ-AU: At sa patas. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> Tomas REIMERS: Tumingin inaabangan ang panahon na Nakikita sa lahat ng iyong awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> Allison BUCHHOLTZ-AU: Susubukan naming makita lahat ng iyong mga kahanga-hangang mga website 1213 00:49:29,420 --> 00:49:30,572 na magiging maganda. 1214 00:49:30,572 --> 00:49:32,780 Tomas REIMERS: maaari mong palaging makita, tulad ng, mga website 1215 00:49:32,780 --> 00:49:36,234 na nagkaroon, tulad ng, ang mahusay na CSS at pagkatapos ay tulad ng mga taong hindi subukang gawin CSS. 1216 00:49:36,234 --> 00:49:39,150 Allison BUCHHOLTZ-AU: Gayundin, ang isa pang bagay, isa pang bagay upang tumingin sa 1217 00:49:39,150 --> 00:49:40,445 ay Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Kaya Bootstrap ay napakahusay. 1219 00:49:41,805 --> 00:49:42,240 >> Tomas REIMERS: Google na kung you-- 1220 00:49:42,240 --> 00:49:43,573 >> Allison BUCHHOLTZ-AU: Google ito. 1221 00:49:43,573 --> 00:49:44,340 Ito ay hindi kapani-paniwala. 1222 00:49:44,340 --> 00:49:45,620 Magugustuhan mo ito. 1223 00:49:45,620 --> 00:49:48,000 At ngayon na ikaw ay may pangunahing pag-unawa ng CSS, 1224 00:49:48,000 --> 00:49:50,340 Makikita ito gumawa ng maraming higit pang mga kahulugan. 1225 00:49:50,340 --> 00:49:50,890 Kahanga-hanga. 1226 00:49:50,890 --> 00:49:51,480 Salamat, guys. 1227 00:49:51,480 --> 00:49:53,330 >> Tomas REIMERS: Salamat sa iyo kaya magkano. 1228 00:49:53,330 --> 00:49:54,219