[MUSIC nagpe-play] 

DOUG LLOYD: Kaya sabihin kumuha ng isa pang video na makipag-usap tungkol sa isa pang wika. Oras na ito namin makipag-usap tungkol sa CSS. Kaya CSS, na kung saan ay maikli para sa Cascading Style Sheet, ay isa pang wika na ginagamit namin kapag ang paggawa sa mga website. Isipin ito tulad nito. Kung HTML ay kung ano ang ginagamit namin upang ayusin ang nilalamang gusto naming ilagay sa aming pahina, CSS ay ang tool na kami ay karaniwang gamitin upang i-customize kung paano titingnan ng aming website, at kung paano ang karanasan ng gumagamit tunay ay, nakikipag-ugnayan sa aming website. 

Katulad sa HTML, CSS ay hindi isang programming language. Hindi nito ay may lohika. Hindi nito ay may mga variable. Hindi nito ay may anumang uri ng na dumaloy kaugnay na mga bagay na ginagawa C. Ito ay isang estilo ng wika. At syntax nito ay medyo simple, at naglalarawan lamang kung paano ang mga elemento ng aming page ay mayroon ilang mga HTML ay dapat na mabago elemento. Sa layong iyon, kung hindi mo pa pa napanood aming mga video sa HTML, o ikaw ay hindi bihasa sa HTML pangkalahatan, ikaw maaaring gusto mong kumuha ng isang pagtingin sa na una, dahil ito diskusyon ng CSS ay pagpunta sa depende sa ilang kaalaman ng HTML. 

Kaya dito ay isang tunay na simple CSS stylesheet. Kahit na hindi mo kailanman nakaprograma sa CSS bago, Ako ay medyo sigurado maaari mong malaman kung ano mismo ang ibig stylesheet. Ano ang ginagawa nito? Well, inilapat sa katawan ng ating web pahina, ang lahat ng bagay sa pagitan ng mga body tag sa aming HTML, at itinatakda nito ang kulay ng background ng pahina na sa asul. Well, ito ay isang napaka-simpleng stylesheet. Ito ay talagang napaka-pantao friendly na wika, CSS. Kaya kahit na hindi mo na ginagamit ito bago, ikaw ay malamang na maaaring hulaan kung ano na ang ginawa. Sa katunayan, kung puno na kami ng isang pahina, na kung saan ang ito stylesheet ay naka-embed sa anumang paraan, ang kulay ng background ng aming mga pahina ng gagawin maging kulay bughaw, at hindi ang karaniwang puti. 

Kaya paano namin bumuo ng stylesheet? Well una, kami ay may sa kilalanin ang isang selector. Sa nakaraang halimbawa, selector na katawan. Pagkatapos kami ay may isang bukas na kulot suhay, at hindi namin pagpunta sa magsimula ng pagtukoy sa stylesheet para selector na. Sa pagitan ng mga kulot tirante, namin lamang magkaroon ng isang listahan ng mga pangunahing mga pares ng halaga. Ang nakaraang halaga ng pares ay kulay ng background asul tuldok-kuwit, ngunit kami ay maaaring makagawa ng higit pa at higit pa ng mga ito. Ikaw ay maaaring magkaroon ng maramihang mga bagay ng pag-aaplay sa na tag, na selector katawan. Ang bawat isa sa mga ito ay pinaghihiwalay ng isang tuldok-kuwit, at ang tawag namin sa bawat isa sa kanila isang deklarasyon, isang CSS deklarasyon. Kapag tapos na kami sa lahat ng mga estilo namin nais na mag-aplay sa mga partikular na tag, kami na lang ng pagsasara kulot suhay upang tapusin ang stylesheet, at kami ay tapos ng pagtukoy sa stylesheet para sa partikular na selector. 

Ano ang ilang mga karaniwang katangian ng CSS? Well, baka gusto mong ilagay isang hangganan sa paligid ng isang bagay. Kaya maaari mong sabihin, hangganan, na ang iyong mga susi, at pagkatapos ang iyong mga halaga ay magiging, kung ano ang estilo, kulay, at lapad gusto mo ito upang maging. Kaya maaari maging isang solid estilo linya, ang isang tuldok-tuldok na linya, ang isang dashed linya, isang linya ridge, na kung saan ay may alun-alon linya. Siguro gusto mong magkaroon ng ito maging asul o itim o berde. Siguro gusto mo ito upang maging 1 o 2 o 10 na lapad. Maaari mong tukuyin ang lahat ng mga bagay. Baka nais mong itakda ang background kulay ng iyong pahina sa isang partikular na paraan. Na nakita namin na, ang pagtatakda ng background ng katawan upang maging asul. 

Pagkatapos ay maaari mong gamitin ang isang key word, kaya ito ay may tiyak na mga kulay CSS na nakapaloob sa mga ito, asul, berde, black, isang napaka-simpleng kulay alam namin. Ngunit maaari mo ring tukuyin ang anumang mga hex color na gusto mo. Pagpapabalik na mga kulay ay maaaring kinilala sa pamamagitan ng isang hanay ng mga tatlong hex numero mula 0 hanggang 255, rg at b, ang pula, berde, at asul na component. At upang maaari naming tukuyin ang anumang kulay na gusto namin sa pamamagitan ng, sa halip ng paggamit ng asul o berde o itim, gamit pound at pagkatapos ay anim na numero ng hex, at na magbibigay sa amin ang kulay ng anim na digit. Kaya na ang kulay ng background. 

Mayroon din kaming mga foreground kulay, na kung saan ay karaniwang magiging ang teksto ng iyong pahina. At maaari mong parehas gawin iyon sa key word at o anim na digit hex. Kaya maaari mong tukuyin ang anumang kulay mo gusto para sa teksto ng iyong pahina laban sa isang partikular kulay ng background, hanggang sa itaas. Maaari mo ring baguhin at pakikitungo may font, at ang paraan ng text ay nai-render sa pahina. 

Kaya maaari mong baguhin ang laki ng iyong font. Maaari mong gamitin ang mga pangunahing mga salita, tulad ng mga dagdag na, dagdag na maliit, o xx maliit, o medium, malaki, at iba pa. Maaari mong gamitin ang mga nakapirming punto, 10 point, 12 point, at iba pa. Maaari mong gamitin ang mga porsyento, 80%, 20%, kung saan ang 100% ang default na font laki, na kung saan ay karaniwang pagpunta sa isang bagay tulad ng 11 o 12 puntos. O maaari mong kahit base ito off sa mga pinaka-kamakailan-lamang na laki ng font. Kung sinulat mo lamang ng isang bagay at alam mo kung ano ang nais mo ay para sa mga ito upang maging mas maliit, ngunit hindi mo alam kung ano mismo ang laki mo gusto mo itong maging, well, maaari mo lamang sabihin, laki ng font na mas maliit. At ito ay base off ng, lamang hanggang sa itaas, ito ay ang laki ng font. At maaari kang makakuha ng mas maliit o mas malaki. Kaya mayroong maraming iba't ibang mga paraan upang tukuyin ang laki ng font. 

Maaari mo ring tukuyin kung ano ang font family na gusto mo. Kung mayroon kang isang partikular na pangalan, may isang paraan sa CSS-- hindi namin pagpunta sa makipag-usap tungkol sa mga ito here-- upang tukuyin ang isang tiyak na takdang font at i-embed ang mga ito sa iyong pahina. Maaari mo ring gamitin ang mga generic na mga pangalan. May isang pulutong ng mga web ligtas na mga font na paunang natukoy na sa CSS. At kung ikaw ay isang gumagamit ng Microsoft Office sa huling 20 taon, ikaw ay malamang na pamilyar sa isang pulutong ng mga web ligtas na mga font nagagawa, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, at iba pa. Ang mga ito ay itinuturing ang lahat ng mga web ligtas na mga font. At talagang, bahagi ng dahilan na sila ay dumating na ay dapat gamitin upang gumawa ng web-- bawat pahina nagkaroon ng access sa mga ito ang default na hanay ng mga font may iba't ibang serifs, at ang lahat ng ito stuff font hindi kami makakuha ng sa, ngunit ang mga ito ay karaniwang naa-access sa iyong CSS, kahit na hindi mo gusto sa kabilang banda tukuyin ang mga font. Sa wakas, maaari mong ihanay ang iyong teksto, sa halip na ito sa, sa pamamagitan ng default, nakahanay sa kaliwa, maaari mong align ito sa kanan, o maaari mong align ito nakasentro, o Pantay upang ito ay pindutin ang parehong mga gilid. Kaya ang mga ay ang lahat ng mga opsyon na magagamit mo upang baguhin kung ano ang hitsura ng iyong teksto tulad ng, at kung paano ito ipinapakita sa iyong pahina. 

Ang iyong tagapili hindi kailangang maging tags lamang. Dati Nakita namin ang isang body tag selector, at tag selector ay hindi hitsura na lang. Pangalanan mo ang isang tag, at pagkatapos ay sa iyo tukuyin ang isang stylesheet para sa tag na iyon. Ngunit maaari mo ring gawin ang isang bagay tinatawag na isang selector ID. Isang selector ID mukhang medyo katulad. Ngunit paunawa, na ngayon ay hindi ako gamit isang HTML tag, gumagamit ako, sa kasong ito, #unique, o hash natatanging. Kung isipin ang mo mula sa aming video sa HTML, usapan natin tungkol sa kung paano mga tag ay maaaring magkaroon ng mga katangian. 

At sa isang katangian na nalalapat na medyo marami ang lahat ng mga tag na HTML, ngunit hindi namin makipag-usap tungkol dito, ay isang bagay na tinatawag na isang ID tag. Kaya ito partikular na CSS gagawin mailalapat lamang sa HTML tag na may isang napaka-tukoy na ID, na iyong pangalang. Kaya kung mayroon kang isang lugar sa iyong code, sa isang lugar sa iyong HTML file, ang isang tag at ikaw tukuyin bilang isang attribute sa na tag, ID ay katumbas ng mga natatanging, ito partikular na stylesheet dito ay mailalapat lamang sa pagitan ng na tag sa ID ng natatanging. 

Maaari mo ring gawin ang isang bagay tinatawag na isang klase selector. Kaya sa karagdagan sa pagkakaroon ID katangian, maaari mo ring magdagdag ng isang attribute ng klase na mga tag na HTML. At kapag gumamit ka ng isang attribute class, maaaring ito ay inilalapat sa maramihang mga tag. Kaya kung mayroon kang ilang mga bagay na ay katulad na, baka gusto mong sabihin, buksan ang tag blah, blah, blah, blah, class katumbas mag-aaral. At pagkatapos ay ang partikular na stylesheet ay mag-aplay sa bawat tag na klase ay mag-aaral. Sa kasong ito, nais naming i-set ang kulay ng background sa yellow, at gusto naming i-set opacity, na ay isang tag na hindi namin pag-uusapan, ngunit ang trato lamang sa kung paano transparent isang bagay ay, sa 70%, sa kasong ito. 

Mayroong dalawang mga opsyon para sa pagsulat stylesheet. Maaari mong isulat ang mga ito nang direkta sa iyong HTML pamamagitan ng paglalagay ng stylesheet sa pagitan ng mga tag ng estilo. At ang mga estilo ng mga tag ay pumunta sa loob ng ang ulo ng mga tag ng iyong web page. Ang marahil mas ginustong paraan upang gawin ito ay upang magsulat ng isang hiwalay na CSS file, at pagkatapos ay i-link ito sa iyong idokumento gamit link tags. Link tag, muli, ay naiiba mula sa mga hyperlink, kung isipin mo mula sa aming mga video ng isang HTML. At link tag ay kung paano namin pull sa hiwalay na mga file. Ito uri ng mga tulad ng katumbas ng ang #include para sa mga web programming. 

Kaya sabihin kumuha ng isang pagtingin sa table.html. Kung isipin ang mo mula sa aming HTML video, ako ay nagpakita isang halimbawa ng isang napaka simpleng pagpaparami mesa na tumingin pretty pangit, at baka may isang paraan upang gawin itong mas mahusay sa CSS, upang gawin itong tunay na hitsura mas katulad ng pagpaparami table, o isang bagay na ito ay hindi lamang natigil magkasama na walang aktwal na division sa pagitan ng mga hilera at ang mga haligi. Kaya ng tumuloy sa ipaalam CS50 IDE, at tingnan sa kung paano maaaring CSS, uri ng, mag-tweak kung ano ang namin na nagsimula sa dati, at gawin itong isang bagay na mas mahusay. 

Kaya hindi namin sa CS50 IDE ngayon, at kung hindi kilala, Makikita pull up kami sa mesa na pahina ng HTML. Table.html talaga lamang tumutukoy sa nilalaman ng isang multiple-- ito ay dapat na maging isang apat na sa pamamagitan ng apat na pagdami talahanayan. Ito ay medyo tapat. At gusto naming isipin na gagawin ito magmukhang medyo mahusay na nakaayos. Ngunit sa katunayan, kapag i-preview namin ang pahinang ito, nakita namin na ito ay uri ng pangit, di ba? Malinaw na namin mga hanay at haligi dito. Mayroong ilang mga uri ng paghihiwalay. Ngunit ito ay hindi isang makabuluhan paghihiwalay. Hindi namin ay aktwal na pagkuha ng masyadong maraming impormasyon dito. At walang paghihiwalay sa pagitan ng ang mga hanay at haligi sa mga tuntunin ng pahalang o patayong mga patakaran. Marahil namin ay maaaring gumawa ito tumingin ng isang maliit na piraso ng mas mahusay. Kaya sabihin subukan. Kaya ako pagpunta upang isara ang tab up dito. At ako pagpunta upang isara ang aking table.html, at ako ay may isa pang bersyon dito tinatawag table2.HTML. Susubukan naming buksan na up. Ang katawan ng pahina ay medyo marami ang parehong, ngunit binago ko ang isang maliit na piraso sa itaas. At kukunin ko na mag-scroll up dito. Pansinin na ang oras na ito, hindi ako gamit na naka-embed estilo ng mga tag. Binuksan ko ang isang tag ng estilo, at ako ngayon pagtukoy ng isang CSS stylesheet sa loob lamang ng ng mga ito. Mayroon akong isang stylesheet na nagsasabing, table. Iyon ang aking tag selector. Hindi ako gumagamit ng tuldok o hash, na kung saan Gusto ko ay ginagawa kung ako ay gumagamit ng isang ID o isang klase selector. Mayroon akong isang selector tag here-- table. Style na ito ay pagpunta sa mag-aplay sa bawat tag table. Tila gusto kong maglagay ng isa pixel ang lapad, solid asul na hangganan, sa loob ng aking table. Iyan tulad ng mga ito ay marahil matulungan ang sitwasyon, di ba? Kami ay pagpunta sa may maraming mas mahusay na mga bagay na tumingin. Kaya ito ay pinong. Stylistically, na ako lang naka-embed na aking stylesheet sa dito. Ito ay tiyak na isang katanggap-tanggap na paraan upang gawin ito. Tingnan natin kung ano ito mukhang Hayaan. Kaya kukunin ko na bumalik pababa dito, at Kukunin ko ay preview aking table2.HTML. Well, na hindi lubos kung ano ang nais ko, ngunit ito ay eksakto kung ano ang namin tinanong para sa. Sinabi namin na ito estilo ay pagpunta sa mag-aplay sa aming table. Ang aming mga talahanayan ay mayroon na ngayong isang pixel malawak, solid asul na hangganan sa paligid nito. Hindi namin ay aktwal na pagkuha ng sa mga cell ng talahanayan. Nagsisimula pa lamang kami sa table. Kaya pinag-aralan CSS. Ito ay inilalapat ng isang stylesheet sa aming table. Ngunit hindi pa masyadong gawin ano ang aming nais na gawin ito. Paano kami makakuha ng upang gawin kung ano ang gusto naming ito upang gawin? 

Well, sabihin kumuha ng isang pagtingin sa isa pa bersyon ng mga ito sa table3.HTML. Kaya lang ako pagpunta upang isara ang mga tab. Pupunta ako sa bumalik sa paglipas dito sa aking maghain tree, at buksan up table3.HTML. Muli, ito ay pagpunta upang tumingin medyo katulad dito sa simula. Ngunit paunawa, oras na ito, sa halip ng paggamit isang stylesheet naka-embed na mga karapatan sa doon, Pupunta ako mag-link sa isang stylesheet gamit ang tag na link. Kaya ako tila nagli-link sa isang stylesheet tinatawag tables.CSS, at ito rin ay katumbas ng stylesheet means-- lamang ng mabuti, kung ano ang file na ito na may kaugnayan sa kung ano ang Ako doing-- ay isang stylesheet na ako gamit para sa aking page. Kaya kung talagang gusto kong makita kung ano Ako ginagawa sa CSS dito, Kailangan ko bang pumunta bukas na table.CSS maghain rin. Kaya makikita namin bumalik sa paglipas dito muli sa aming file tree. May table.CSS. Susubukan naming pop ito bukas. Ngayon kami ay nakakakita ng isang maliit ng CSS. Tila, Mayroon akong isang pares ng mga bagay na nangyayari dito. Malas ko nais na ilagay ang isang limang pixel ang lapad, solid red hangganan, sa paligid ng aking table. Alam na namin na na-alis pumunta lamang sa perimeter. Nakita namin na sa table2.HTML. Sa bawat hilera, ako tila nais na tukuyin ang na ang mga taas ng hilera ay 50 pixels mataas. Kaya para sa bawat hilera, tandaan na kung ano ang ginagawa ng tr tag, Ako gumawa ito ng 50 pixels mataas. 

Panghuli, mayroon akong ang komentong ito. At ito ay kung paano namin gumawa ng mga komento sa CSS. Ito ay halos katulad sa sakupin block komento syntax slash star. Ang lahat ng mga text na gusto mo. Walang slash slash bagaman sa CSS. Para sa maikling inline komento, kami ay gamitin sa partikular na format dito. Mukhang ako ng paggawa ng isang pulutong ng mga bagay-bagay sa aking td mga tag. Tandaan td mga tag, o talahanayan data, na kung saan ay talagang lamang ang mga haligi sa loob ng ang aming mga hilera, at tila para sa bawat piraso ng data sa aking table, gusto ko upang itakda ang kulay ng background sa maging itim, ang kulay na puti, kulay ay kulay harapan. Kaya ito ay magiging ang teksto ng aking page. Gusto ko ng malaking font, 22 point font, at gusto kong ito upang maging ng pamilya ng font, Georgia. Kaya hindi ako pagpunta sa Mayroon ang default na font. Pupunta ako upang tukuyin Georgia, kung saan ay isa sa mga web ligtas na mga font na namin nakita bago. Gusto ko ang aking text na nakahanay May gitnang, sa gitna ng kahon, Hindi ko gusto ito upang iwanang nakahanay o kanan nakahanay. At gusto ko width aking column upang maging malawak na rin 50 pixels. Tingnan natin ang isang pagtingin sa kung ano ang ganito ang hitsura, at tingnan kung ito ay marahil isang pagpapabuti. Kaya ako pagpunta sa pumunta sa table3.HTML, na pagpapabalik, nagsasama table.CSS bilang isang link, at kami ay i-preview ito. Iyan ay isang pulutong mas mahusay, tama? Ito ay aktwal na nagsisimula sa hitsura ng isang maraming mas katulad ng pagdami talahanayan. Mayroon akong na red border sa paligid ng aking mga talahanayan ngunit ngayon Kami rin ay may tinukoy ko na bawat hilera ay 50 na lapad, o ito ay 50 pixels tall-- excuse me-- bawat haligi ay 50 na lapad. Ang data sa bawat haligi, at lamang ang data, ay may isang itim na background. Kaya na ang dahilan kung bakit ang mga puting linya ay may. Dahil ang mga puwang sa sa pagitan ng lahat ng mga cell, ito ay hindi isang hangganan sa at ng kanyang sarili, ito lamang Lamang ako ng pagpuno sa cells, na aktwal na gumagawa ng mga hangganan ng mga table, kung saan malas ay umiiral sa lahat ng kasama, ito ay lamang ng manipis na puting linya. Ngayon ang mga ito ay nakikita. Ngayon pop-off ang mga ito sa screen. At kaya ito ay isang napaka-simple stylesheet at nagamit ko ito, at ngayon ay mukhang ang aking mga talahanayan ng maraming higit pa tulad ng isang apat na sa pamamagitan ng apat na pagdami talahanayan, sa halip ng isang lamang ginulo gulo, kung saan lahat ng bagay ay malinaw na hanay at haligi, ngunit hindi sobrang mahusay na nakaayos. Kami ay talagang lamang scratching sa ibabaw ng kung ano ang maaari mong gawin sa CSS dito. Sa kabutihang palad ang mga babasahin CSS ay pretty tapat. Gagamitin mo ang ilan sa kanyang katangian, medyo madalas. Ang mga usapan natin ang tungkol mas maaga sa video na ito. Mayroong ilang mga na kayo marahil ay hindi gamitin ang lahat. At iyon ang masarap, masyadong. Ngunit alam lang, na mayroong isang pulutong ng mga babasahin sa labas doon. Kaya kahit na hindi namin ginawa masaklawan ang lahat ng bagay, tiyak na hindi ka na natitira sa iyong sarili. Ngunit CSS ay talagang masaya mag-eksperimento sa. At ako ay Matindi hinihikayat ka upang i-play sa paligid sa iyong mga web page, at makita kung paano ka maaaring gumawa ng mga ito hitsura at pakiramdam upang mapabuti ang user karanasan ng mga pagbisita sa iyong pahina. Ako Doug Lloyd. Ito ay CS50.