1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [CSS] 2 00:00:02,000 --> 00:00:04,810 [Joseph Ong - Harvard University] 3 00:00:04,810 --> 00:00:07,160 [Ito ay CS50. - CS50.TV] 4 00:00:07,160 --> 00:00:11,430 >> Ngayon kami ay pakikipag-usap tungkol sa CSS o Cascading Style Sheet. 5 00:00:11,430 --> 00:00:14,330 >> Kaya kung ano eksakto ang CSS? 6 00:00:14,330 --> 00:00:17,120 Well, sabihin masira ang termino CSS down sa 2 bahagi: 7 00:00:17,120 --> 00:00:19,510 At Cascading Style Sheet. 8 00:00:19,510 --> 00:00:23,900 Cascading ay isang maliit na bit mas kumplikado, at ito ay isang bagay na tatalakayin namin sa isa pang video. 9 00:00:23,900 --> 00:00:27,930 Ngunit para sa starters, Style Sheet Sobra mga pahiwatig sa kung ano ang ginagawa ng CSS. 10 00:00:27,930 --> 00:00:30,880 Nagdadagdag ito ng mga estilo sa HTML ng isang web page, 11 00:00:30,880 --> 00:00:33,720 pagbabago ng kung paano ang mga web page aesthetically hitsura. 12 00:00:33,720 --> 00:00:38,310 Ang ibig sabihin nito ang lahat ng bagay mula sa mga font ng teksto sa pagpoposisyon ng nilalaman sa pahina 13 00:00:38,310 --> 00:00:43,800 sa iba pang mga cool na bagay na tulad ng sa paggawa ng mga sulok ng isang kahon bilugan o pagdaragdag ng mga anino sa teksto. 14 00:00:43,800 --> 00:00:48,230 Maaari mo ring gawin nakatutuwang mga bagay tulad ng gumawa ng mga bagay-animate sa screen. 15 00:00:48,230 --> 00:00:51,700 >> Kaya paano namin gamitin ang CSS sa HTML? 16 00:00:51,700 --> 00:00:53,620 Dalhin ito mahirap na anyo site ko lang ang sinulat. 17 00:00:53,620 --> 00:00:57,290 Kung Rob ay tumingin sa mga site na ito sa ngayon, gusto niya marahil sabihin isang bagay tulad ng, 18 00:00:57,290 --> 00:01:01,730 "Wow! Aking panimula mukhang kasindak-sindak. Joseph, ikaw ay isang kahindik-hindik na designer." 19 00:01:01,730 --> 00:01:05,110 "Gamit ang default na font Times? Helvetica ay kaya magkano ang mas mahusay na." 20 00:01:05,110 --> 00:01:09,600 >> Kaya kung ano ang maaaring ang pinakasimpleng paraan upang ilapat ang estilo Nais ni Rob? 21 00:01:09,600 --> 00:01:13,530 Ang pinaka-halata na paraan ng maraming mga tao sa una ay nagsulat CSS 22 00:01:13,530 --> 00:01:17,470 ay upang ilagay ang tinatawag naming style na pahayag mismo sa element mismo 23 00:01:17,470 --> 00:01:20,560 gamit ang HTML katangian estilo. 24 00:01:20,560 --> 00:01:26,420 Ang isang estilo pahayag lamang binubuo ng mga ari-arian ng CSS sa HTML element na gusto naming baguhin 25 00:01:26,420 --> 00:01:32,140 sinundan ng tutuldok na sinusundan ng ang bagong mga halaga ng ari-arian at isang tuldok-kuwit sa dulo. 26 00:01:32,140 --> 00:01:36,600 Halimbawa, sabihin nating Rob Nais ng isang itim na hangganan sa paligid ng kanyang pagpapakilala. 27 00:01:36,600 --> 00:01:40,040 Kami unang ilagay ang estilo attribute sa mga ni Rob div dito 28 00:01:40,040 --> 00:01:43,830 pagkatapos ay sa loob ng double quotes maglagay ng CSS na pagpapahayag: 29 00:01:43,830 --> 00:01:47,880 "Border: 1px solid black;" 30 00:01:47,880 --> 00:01:52,480 Ang 1 pixel ay tumutukoy sa lapad ng border, solid ang tumutukoy sa estilo ng border, 31 00:01:52,480 --> 00:01:56,640 at ang kulay sa dulo kung ano ang tinutukoy ng kulay ang border ay. 32 00:01:56,640 --> 00:02:01,220 >> Kung gusto namin ng maraming mga estilo sa isang elemento, isulat ang mga pahayag sa pagkakasunud-sunod. 33 00:02:01,220 --> 00:02:05,650 Halimbawa, kung Rob Nais ng kanyang teksto ng header para sa Helvetica na may asul na background 34 00:02:05,650 --> 00:02:09,270 at mas maraming espasyo sa paligid ng teksto, maaari naming gawin ito: 35 00:02:09,270 --> 00:02:19,800 style = "font-family: Helvetica; background-kulay: bughaw; padding: 5px;" 36 00:02:22,150 --> 00:02:28,010 Ang huling semicolon ay talagang opsyonal, ngunit ang mga tao ay karaniwang panatilihin ito sa para sa kapakanan ng hindi pabago-bago. 37 00:02:28,010 --> 00:02:32,180 >> Susubukan naming i-save ang nagpapaliwanag ng ilan sa mga mas malamig at mas kumplikadong mga katangian ng CSS 38 00:02:32,180 --> 00:02:34,140 para sa isa pang video. 39 00:02:34,140 --> 00:02:38,780 Kung mayroon kang isang bagay sa isip, lang sa Pag-Google ang epekto nais mong sinusundan ng CSS 40 00:02:38,780 --> 00:02:41,590 marahil ay magbibigay sa iyo ng medyo magandang resulta. 41 00:02:41,590 --> 00:02:44,530 Ang mga cool na bagay ay na CSS ay medyo malawak, 42 00:02:44,530 --> 00:02:48,470 kaya logro ay kung mayroong anumang bagay na gusto mong gawin - sa loob ng dahilan - 43 00:02:48,470 --> 00:02:51,350 CSS ay maaaring marahil gawin ito. 44 00:02:51,350 --> 00:02:54,750 Tinatawag namin ang ganitong uri ng estilo inline na estilo. 45 00:02:54,750 --> 00:02:59,030 Ang mga elemento ng estilo ay, well, sa linya kasama ang mga tag ng pagsisimula. 46 00:02:59,030 --> 00:03:01,770 >> Para sa mga tao na talagang gustong maaayos, 47 00:03:01,770 --> 00:03:05,800 maaari kang magsimulang makakuha ng isang maliit na nainis sa kung paano maraming kalat na ito ang lahat ng mga hitsura. 48 00:03:05,800 --> 00:03:09,810 Isipin kung ikaw ay nagkaroon na gawin ito para sa bawat elemento sa pahina, 49 00:03:09,810 --> 00:03:13,690 plus ngayon ang iyong HTML at CSS ay lahat intermixed at cluttered. 50 00:03:13,690 --> 00:03:15,500 Gross, tama? 51 00:03:15,500 --> 00:03:21,110 Upang ayusin ito, ang mga tao kalaunan nagsimula sa pansing naghihiwalay sa kanilang mga HTML markup 52 00:03:21,110 --> 00:03:26,370 mula sa kanilang mga estilo ng CSS sa pamamagitan ng paggamit ng isang bagay na tinatawag na CSS tagapili. 53 00:03:26,370 --> 00:03:31,780 Tagapili ng CSS ay ginamit upang pumili elemento na kung saan ang pahayag ay inilapat. 54 00:03:31,780 --> 00:03:38,600 Ang isang selector na sinamahan ng isang listahan ng mga CSS na pahayag ay madalas tinutukoy bilang isang CSS panuntunan. 55 00:03:38,600 --> 00:03:43,260 Mga batas na ito ay ilagay sa pagitan ng bukas at isara ang mga tag na HTML estilo, 56 00:03:43,260 --> 00:03:46,120 madalas sa head ng dokumento. 57 00:03:46,120 --> 00:03:49,000 >> Ito ay lubhang mas madaling makita sa isang halimbawa, 58 00:03:49,000 --> 00:03:53,000 kaya sabihin magsimula sa pamamagitan ng paglikha ng isang simpleng panuntunan CSS. 59 00:03:53,000 --> 00:03:58,180 Una, sabihin ilagay ang mga tag ng estilo sa head section ng aming HTML. 60 00:03:58,180 --> 00:04:00,020 Susunod, ang tagapili. 61 00:04:00,020 --> 00:04:03,490 Sisimulan naming off sa pamamagitan ng paggamit ng isa sa mga pinakamadaling tagapili, ang hash simbolo, 62 00:04:03,490 --> 00:04:08,080 kung saan pipili ng isang HTML element sa pamamagitan nito ID ng katangian. 63 00:04:08,080 --> 00:04:11,850 Sa kasong ito namin piliin ang div na kumakatawan Rob ng panimula 64 00:04:11,850 --> 00:04:16,740 sa pamamagitan ng pag-type ng hash simbolo sinundan ng ID ng div, ang looban. 65 00:04:16,740 --> 00:04:18,579 Ngayon ang deklarasyon. 66 00:04:18,579 --> 00:04:24,090 Idagdag namin bukas at malapit tirante at shift ang naunang inline na pahayag sa Rob ni div 67 00:04:24,090 --> 00:04:26,880 sa loob ng mga tirante, i-refresh, 68 00:04:26,880 --> 00:04:34,160 at, cool, ni Rob intro ay mayroon pa ring isang itim na hangganan sa paligid nito minus ang maraming kalat depormidad inline. 69 00:04:34,160 --> 00:04:39,380 >> Ngayon, kung ano ang gusto naming piliin ang h1 sa loob ng Rob ng intro? 70 00:04:39,380 --> 00:04:44,400 Maaari mong isipin, "Sabihin maglagay ng isang ID sa ito at pagkatapos ay ilipat ang naunang mga estilo." 71 00:04:44,400 --> 00:04:48,760 Iyon ay gumagana, ngunit CSS ay may iba pang mga paraan ng pagpapaalam sa iyo piliin ang mga elemento 72 00:04:48,760 --> 00:04:53,490 pamamagitan ng paggamit ng kung ano ang tinatawag naming combinators upang makihalubilo sa simpleng tagapili. 73 00:04:53,490 --> 00:04:57,740 Halimbawa, ang isang whitespace character na maaaring magamit bilang isang combinator 74 00:04:57,740 --> 00:05:03,510 upang tukuyin ang lahat ng mga pagkakataon ng 1 selector na nakatira sa loob ng isa pang pili. 75 00:05:03,510 --> 00:05:06,630 Iyan maraming isang mas kumplikadong kaysa sa aktwal na ito ay. 76 00:05:06,630 --> 00:05:08,830 Narito ang isang halimbawa. 77 00:05:08,830 --> 00:05:13,900 Kami ay i-type # Rob, magdagdag ng isang puwang, at sundin ito sa isang h1, 78 00:05:13,900 --> 00:05:18,840 isa pang simpleng selector na tinatawag na tag selector na pumipili ng mga uri ng mga elemento 79 00:05:18,840 --> 00:05:21,200 tulad ng divs o talata. 80 00:05:21,200 --> 00:05:26,140 Ang espasyo ay pinagsasama ang aming 2 tagapili simple, ang lahat ng paglalapat ng pagdeklara ng CSS 81 00:05:26,140 --> 00:05:32,560 at ang kulot tirante sa mga tag h1 na naninirahan sa loob ng mga elemento na may id = "looban". 82 00:05:32,560 --> 00:05:38,290 Lamang para kumbinsihin sa iyo na ito ay gumagana, makikita ko bang baguhin ang kulay ng font sa puti, i-refresh, 83 00:05:38,290 --> 00:05:42,090 at, tumingin, ni Rob header na ngayon ang puti. 84 00:05:42,090 --> 00:05:47,510 >> Ang lahat ng ito sa trabaho napupunta upang ipakita na sa pamamagitan ng paggamit ng mga panuntunan sa halip ng mga inline na estilo 85 00:05:47,510 --> 00:05:50,510 maaari naming makakuha ng magkano ang mas malinis na code. 86 00:05:50,510 --> 00:05:53,900 Sa katunayan, kung ito style block ay nagsisimula sa pagkuha Medyo malaki, 87 00:05:53,900 --> 00:05:58,340 Maaari ko kahit na hilahin ang mga estilo out sa isang iba't ibang mga file ng sama-sama. 88 00:05:58,340 --> 00:06:05,120 >> Upang isama ang bagong file bilang CSS sa dokumentong ito kukunin ko na lang gamitin ang link na HTML tag ni. 89 00:06:05,120 --> 00:06:10,320 Narito ako na nagsasabi ito na ako nagli-link sa isang external style sheet, ang rel attribute, 90 00:06:10,320 --> 00:06:14,840 at tukuyin ang path sa file kasama ang aking href attribute. 91 00:06:14,840 --> 00:06:20,290 Ngayon ang aking HTML markup at CSS ay isinaayos mabuti sa ganap na nakahiwalay na file, 92 00:06:20,290 --> 00:06:26,090 na kung saan ay halos palaging ang paraan designer ginusto nagtatrabaho sa HTML at CSS. 93 00:06:26,090 --> 00:06:30,180 >> Sa kaso ikaw ay nagtataka, ang simpleng tagapili isama tagapili ng ID 94 00:06:30,180 --> 00:06:33,100 at tagapili ng tag tulad ng mga lang namin nakita 95 00:06:33,100 --> 00:06:38,610 pati na rin ang klase tagapili para sa pagpili ng mga elemento sa isang tiyak na klase, 96 00:06:38,610 --> 00:06:44,000 katangian tagapili para sa pagpili ng mga elemento sa pamamagitan ng iba pang mga katangian tulad ng uri = "radio" 97 00:06:44,000 --> 00:06:49,180 para sa input radio button, at pseudoselectors tulad ng hover at tumuon 98 00:06:49,180 --> 00:06:55,260 para sa pagtukoy ng estilo kapag ang pakikipag-ugnayan bang pagpasada ng mouse sa isang elemento magaganap. 99 00:06:55,260 --> 00:06:58,950 >> Ang mga karaniwang combinators isama whitespace para sa lahat ng mga bata 100 00:06:58,950 --> 00:07:02,080 at ang mga kuwit upang makilala ang tagapili. 101 00:07:02,080 --> 00:07:06,370 Ang iba ay maaaring nakatagpo ka isama ang arrow para sa direktang mga bata lamang, 102 00:07:06,370 --> 00:07:10,440 ang tilda para sa lahat ng kapatid na nangyari pagkatapos ng elemento, 103 00:07:10,440 --> 00:07:16,010 at ang plus sign para sa 1 kapatid na dumating pagkatapos na pagkatapos ng elemento. 104 00:07:16,010 --> 00:07:18,540 >> Sa pamamagitan ng pagsasama-sama ng mga tagapili at combinators, 105 00:07:18,540 --> 00:07:22,910 maaari mong palawakin ang hanay ng mga estilo maaari mong makamit sa isang pahina ng web 106 00:07:22,910 --> 00:07:25,050 at isulat ang CSS nang mas mahusay. 107 00:07:25,050 --> 00:07:28,370 Gamit lamang ng ilang mga linya ng CSS na nakikita mo sa akin ang pag-type dito, 108 00:07:28,370 --> 00:07:34,460 Maaari ba akong mabilis na gumawa ng isang bagay na ganito ang hitsura ng isang bagay na katulad nito. 109 00:07:34,460 --> 00:07:37,080 >> Ako Joseph, at ito ay CS50. 110 00:07:37,080 --> 00:07:39,260 >> [CS50.TV] 111 00:07:39,260 --> 00:07:40,780 >> Uh, kung saan ako magsisimula? 112 00:07:40,780 --> 00:07:44,140 Hayaan ang gawin sa akin na walang - [laughs] Okay. 113 00:07:44,140 --> 00:07:47,300 Magdagdag ng isang - Hayaan akong baguhin na paggamit ng mga salita. 114 00:07:50,580 --> 00:07:52,470 Ooh. Sorry.