[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Ito ay CS50. - CS50.TV] 

Ngayon kami ay pakikipag-usap tungkol sa CSS o Cascading Style Sheet. 

Kaya kung ano eksakto ang CSS? Well, sabihin masira ang termino CSS down sa 2 bahagi: At Cascading Style Sheet. Cascading ay isang maliit na bit mas kumplikado, at ito ay isang bagay na tatalakayin namin sa isa pang video. Ngunit para sa starters, Style Sheet Sobra mga pahiwatig sa kung ano ang ginagawa ng CSS. Nagdadagdag ito ng mga estilo sa HTML ng isang web page, pagbabago ng kung paano ang mga web page aesthetically hitsura. Ang ibig sabihin nito ang lahat ng bagay mula sa mga font ng teksto sa pagpoposisyon ng nilalaman sa pahina 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. Maaari mo ring gawin nakatutuwang mga bagay tulad ng gumawa ng mga bagay-animate sa screen. 

Kaya paano namin gamitin ang CSS sa HTML? Dalhin ito mahirap na anyo site ko lang ang sinulat. Kung Rob ay tumingin sa mga site na ito sa ngayon, gusto niya marahil sabihin isang bagay tulad ng, "Wow! Aking panimula mukhang kasindak-sindak. Joseph, ikaw ay isang kahindik-hindik na designer." "Gamit ang default na font Times? Helvetica ay kaya magkano ang mas mahusay na." 

Kaya kung ano ang maaaring ang pinakasimpleng paraan upang ilapat ang estilo Nais ni Rob? Ang pinaka-halata na paraan ng maraming mga tao sa una ay nagsulat CSS ay upang ilagay ang tinatawag naming style na pahayag mismo sa element mismo gamit ang HTML katangian estilo. Ang isang estilo pahayag lamang binubuo ng mga ari-arian ng CSS sa HTML element na gusto naming baguhin sinundan ng tutuldok na sinusundan ng ang bagong mga halaga ng ari-arian at isang tuldok-kuwit sa dulo. Halimbawa, sabihin nating Rob Nais ng isang itim na hangganan sa paligid ng kanyang pagpapakilala. Kami unang ilagay ang estilo attribute sa mga ni Rob div dito pagkatapos ay sa loob ng double quotes maglagay ng CSS na pagpapahayag: "Border: 1px solid black;" Ang 1 pixel ay tumutukoy sa lapad ng border, solid ang tumutukoy sa estilo ng border, at ang kulay sa dulo kung ano ang tinutukoy ng kulay ang border ay. 

Kung gusto namin ng maraming mga estilo sa isang elemento, isulat ang mga pahayag sa pagkakasunud-sunod. Halimbawa, kung Rob Nais ng kanyang teksto ng header para sa Helvetica na may asul na background at mas maraming espasyo sa paligid ng teksto, maaari naming gawin ito: style = "font-family: Helvetica; background-kulay: bughaw; padding: 5px;" Ang huling semicolon ay talagang opsyonal, ngunit ang mga tao ay karaniwang panatilihin ito sa para sa kapakanan ng hindi pabago-bago. 

Susubukan naming i-save ang nagpapaliwanag ng ilan sa mga mas malamig at mas kumplikadong mga katangian ng CSS para sa isa pang video. Kung mayroon kang isang bagay sa isip, lang sa Pag-Google ang epekto nais mong sinusundan ng CSS marahil ay magbibigay sa iyo ng medyo magandang resulta. Ang mga cool na bagay ay na CSS ay medyo malawak, kaya logro ay kung mayroong anumang bagay na gusto mong gawin - sa loob ng dahilan - CSS ay maaaring marahil gawin ito. Tinatawag namin ang ganitong uri ng estilo inline na estilo. Ang mga elemento ng estilo ay, well, sa linya kasama ang mga tag ng pagsisimula. 

Para sa mga tao na talagang gustong maaayos, maaari kang magsimulang makakuha ng isang maliit na nainis sa kung paano maraming kalat na ito ang lahat ng mga hitsura. Isipin kung ikaw ay nagkaroon na gawin ito para sa bawat elemento sa pahina, plus ngayon ang iyong HTML at CSS ay lahat intermixed at cluttered. Gross, tama? Upang ayusin ito, ang mga tao kalaunan nagsimula sa pansing naghihiwalay sa kanilang mga HTML markup mula sa kanilang mga estilo ng CSS sa pamamagitan ng paggamit ng isang bagay na tinatawag na CSS tagapili. Tagapili ng CSS ay ginamit upang pumili elemento na kung saan ang pahayag ay inilapat. Ang isang selector na sinamahan ng isang listahan ng mga CSS na pahayag ay madalas tinutukoy bilang isang CSS panuntunan. Mga batas na ito ay ilagay sa pagitan ng bukas at isara ang mga tag na HTML estilo, madalas sa head ng dokumento. 

Ito ay lubhang mas madaling makita sa isang halimbawa, kaya sabihin magsimula sa pamamagitan ng paglikha ng isang simpleng panuntunan CSS. Una, sabihin ilagay ang mga tag ng estilo sa head section ng aming HTML. Susunod, ang tagapili. Sisimulan naming off sa pamamagitan ng paggamit ng isa sa mga pinakamadaling tagapili, ang hash simbolo, kung saan pipili ng isang HTML element sa pamamagitan nito ID ng katangian. Sa kasong ito namin piliin ang div na kumakatawan Rob ng panimula sa pamamagitan ng pag-type ng hash simbolo sinundan ng ID ng div, ang looban. Ngayon ang deklarasyon. Idagdag namin bukas at malapit tirante at shift ang naunang inline na pahayag sa Rob ni div sa loob ng mga tirante, i-refresh, at, cool, ni Rob intro ay mayroon pa ring isang itim na hangganan sa paligid nito minus ang maraming kalat depormidad inline. 

Ngayon, kung ano ang gusto naming piliin ang h1 sa loob ng Rob ng intro? Maaari mong isipin, "Sabihin maglagay ng isang ID sa ito at pagkatapos ay ilipat ang naunang mga estilo." Iyon ay gumagana, ngunit CSS ay may iba pang mga paraan ng pagpapaalam sa iyo piliin ang mga elemento pamamagitan ng paggamit ng kung ano ang tinatawag naming combinators upang makihalubilo sa simpleng tagapili. Halimbawa, ang isang whitespace character na maaaring magamit bilang isang combinator upang tukuyin ang lahat ng mga pagkakataon ng 1 selector na nakatira sa loob ng isa pang pili. Iyan maraming isang mas kumplikadong kaysa sa aktwal na ito ay. Narito ang isang halimbawa. Kami ay i-type # Rob, magdagdag ng isang puwang, at sundin ito sa isang h1, isa pang simpleng selector na tinatawag na tag selector na pumipili ng mga uri ng mga elemento tulad ng divs o talata. Ang espasyo ay pinagsasama ang aming 2 tagapili simple, ang lahat ng paglalapat ng pagdeklara ng CSS at ang kulot tirante sa mga tag h1 na naninirahan sa loob ng mga elemento na may id = "looban". Lamang para kumbinsihin sa iyo na ito ay gumagana, makikita ko bang baguhin ang kulay ng font sa puti, i-refresh, at, tumingin, ni Rob header na ngayon ang puti. 

Ang lahat ng ito sa trabaho napupunta upang ipakita na sa pamamagitan ng paggamit ng mga panuntunan sa halip ng mga inline na estilo maaari naming makakuha ng magkano ang mas malinis na code. Sa katunayan, kung ito style block ay nagsisimula sa pagkuha Medyo malaki, Maaari ko kahit na hilahin ang mga estilo out sa isang iba't ibang mga file ng sama-sama. 

Upang isama ang bagong file bilang CSS sa dokumentong ito kukunin ko na lang gamitin ang link na HTML tag ni. Narito ako na nagsasabi ito na ako nagli-link sa isang external style sheet, ang rel attribute, at tukuyin ang path sa file kasama ang aking href attribute. Ngayon ang aking HTML markup at CSS ay isinaayos mabuti sa ganap na nakahiwalay na file, na kung saan ay halos palaging ang paraan designer ginusto nagtatrabaho sa HTML at CSS. 

Sa kaso ikaw ay nagtataka, ang simpleng tagapili isama tagapili ng ID at tagapili ng tag tulad ng mga lang namin nakita pati na rin ang klase tagapili para sa pagpili ng mga elemento sa isang tiyak na klase, katangian tagapili para sa pagpili ng mga elemento sa pamamagitan ng iba pang mga katangian tulad ng uri = "radio" para sa input radio button, at pseudoselectors tulad ng hover at tumuon para sa pagtukoy ng estilo kapag ang pakikipag-ugnayan bang pagpasada ng mouse sa isang elemento magaganap. 

Ang mga karaniwang combinators isama whitespace para sa lahat ng mga bata at ang mga kuwit upang makilala ang tagapili. Ang iba ay maaaring nakatagpo ka isama ang arrow para sa direktang mga bata lamang, ang tilda para sa lahat ng kapatid na nangyari pagkatapos ng elemento, at ang plus sign para sa 1 kapatid na dumating pagkatapos na pagkatapos ng elemento. 

Sa pamamagitan ng pagsasama-sama ng mga tagapili at combinators, maaari mong palawakin ang hanay ng mga estilo maaari mong makamit sa isang pahina ng web at isulat ang CSS nang mas mahusay. Gamit lamang ng ilang mga linya ng CSS na nakikita mo sa akin ang pag-type dito, Maaari ba akong mabilis na gumawa ng isang bagay na ganito ang hitsura ng isang bagay na katulad nito. 

Ako Joseph, at ito ay CS50. 

[CS50.TV] 

Uh, kung saan ako magsisimula? Hayaan ang gawin sa akin na walang - [laughs] Okay. Magdagdag ng isang - Hayaan akong baguhin na paggamit ng mga salita. Ooh. Sorry.