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

Ngayon makikita na namin pakikipag-usap tungkol sa CSS o Cascading Sheet ng Estilo. 

Kaya kung ano ang eksaktong ay CSS? Well, sabihin masira ang terminong CSS pababa sa 2 bahagi: Cascading at Estilo Sheet. Cascading ay mas kumplikado ang ng kaunti, at ito ay isang bagay na tatalakayin namin sa ibang video. Ngunit para sa mga starters, Estilo Sheet napaka pahiwatig sa kung ano ang CSS ginagawa. Nagdadagdag ito ng mga estilo sa HTML ng isang web page, pagbabago ng kung paano ang web page aesthetically mukhang. Ito ay nangangahulugan na ang lahat mula sa font ng teksto sa pagpoposisyon ng nilalaman sa pahina sa iba pang mga cool na bagay tulad ng paggawa sa mga sulok ng isang kahon na bilugan o magdagdag ng mga anino sa teksto. Maaari ka ring gumawa ng mga nakatutuwang bagay tulad-animate ng mga bagay sa screen. 

Kaya paano namin gamitin ang CSS sa HTML? Ito mukhang mahinang site na sinulat ni ko lang. Kung Rob ay upang tumingin sa site na ito ngayon, gusto niya marahil sabihin ng isang bagay tulad ng, "Wow! Aking pagpapakilala ay mukhang kahila-hilakbot. Jose, ikaw ay isang kahindik-hindik na designer." "Gamit ang default na font Times? Helvetica ay kaya magkano ang mas mahusay." 

Kaya kung ano ang maaaring ang pinakasimpleng paraan upang ilapat ang estilo Rob nais? Ang pinaka-halata na paraan ng maraming mga tao sa una sinulat ni CSS ay ilagay kung ano ang tinatawag naming style pagdeklara ng karapatan sa mismong elemento gamit ang HTML attribute ng estilo. Ang style deklarasyon lamang binubuo ng CSS ari-arian ang mga elemento ng HTML gusto naming baguhin sinundan sa pamamagitan ng isang tutuldok na sinusundan ng ang bagong mga halaga ng ari-arian at may semicolon sa dulo. Halimbawa, sabihin nating Rob Nais ng isang itim na hangganan sa palibot ng kanyang pagpapakilala. Ilagay muna namin ang estilo katangian sa Rob ng div dito pagkatapos ay sa loob ng double quote maglagay ng CSS deklarasyon: "Border: 1px solid black;" Ang 1 pixel ay tumutukoy sa lapad ng hangganan, ang solid ang tumutukoy sa estilo ng hangganan, at ang kulay sa dulo Tinutukoy kung ano ang kulay ang border. 

Kung gusto namin ang maramihang mga estilo sa isang elemento, magsulat ng mga pagdeklara na ito sa pagkakasunud-sunod. Halimbawa, kung nais ng Rob ang kanyang teksto ng header sa Helvetica na may asul na background at mas maraming espasyo sa buong teksto, maaari naming gawin ito: style = "font-family: Helvetica; background-kulay: asul; padding: 5px;" Ang huling semicolon ay talagang opsyonal, ngunit ang mga tao ay karaniwang panatilihin ang mga ito sa para sa kapakanan ng pagkakapare-pareho. 

Susubukan naming i-save ang nagpapaliwanag ang ilan sa mga mas malalamig at mas kumplikadong mga katangian ng CSS para sa isa pang video. Kung mayroon kang isang bagay sa isip, Googling ang epekto na nais mo sinusundan ng CSS ay marahil magbibigay sa iyo ng medyo magandang resulta. Ang cool na bagay ay na ang CSS ay medyo malawak, kaya ang mga logro ay kung may kahit anong gusto mong gawin - sa loob ng dahilan - CSS ay maaaring marahil gawin ito. Tinatawag namin itong uri ng estilo ng inline estilo. Ang estilo ng elemento ay, maayos, sa linya na may tag ng pagsisimula. 

Para sa mga tao na talagang gusto na isinaayos, maaari mong simulan ang pagkuha ng isang maliit na nainis sa kung gaano magulo ito ang lahat ng hitsura. Isipin kung mayroon kang upang gawin ito para sa bawat elemento sa pahina, kasama ngayon ang iyong HTML at CSS ang lahat intermixed at cluttered. Gross, i-right? Upang ayusin ito, ang mga tao kalaunan nagsimula pansing sa naghihiwalay ang kanilang mga HTML markup mula sa kanilang mga CSS estilo sa pamamagitan ng paggamit ng isang bagay na tinatawag CSS tagapili. CSS mga tagapili ay ginagamit upang piliin ang mga elemento na pagdeklara ay inilapat. Isang selector na sinamahan ng isang listahan ng mga pagdeklara ng CSS ay kadalasang tinutukoy bilang isang CSS panuntunan. Ang mga batas na ito ay ilagay sa pagitan ng mga bukas at malapit na mga tag na HTML estilo, madalas sa ulo ng dokumento. 

Ito ay lubhang mas madaling makita sa isang halimbawa, kaya sabihin magsimula sa pamamagitan ng paglikha ng isang simpleng panuntunan ng CSS. Una, sabihin ilagay ang mga tag ng estilo sa head section ng aming mga HTML. Susunod, ang tagapili. Magsisimula kami sa pamamagitan ng paggamit ng isa ng ang pinakasimpleng tagapili, ang hash simbolo, kung saan pipili ng isang HTML na elemento ng ID attribute nito. Sa kasong ito, gagamitin namin piliin ang div na kumakatawan sa Rob ng panimula sa pamamagitan ng pag-type ang hash simbolo na sinusundan ng ID ng div, nakawan. Ngayon ang deklarasyon. Idagdag namin ang tirante bukas at malapit at shift ang aming mas maaga inline pagdeklara sa Rob ng div loob ng mga tirante, i-refresh, at, cool, Rob ng intro ay mayroon pa ring isang itim na hangganan sa paligid nito minus ang magulo pagkapangit inline. 

Ngayon, kung ano kung gusto naming piliin ang h1 sa loob ng Rob ng intro? Maaari mong isipin, "natin maglagay ng ID dito at pagkatapos ay ilipat ang aming mga mas maaga estilo." Na gumagana, ngunit CSS ay may iba pang mga paraan ng pagpapaalam mong piliin ang mga elemento sa 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 tagapili. Iyan maraming isang mas kumplikadong kaysa sa aktwal na ito ay. Narito ang isang halimbawa. Kami ay i-type ang # Rob, magdagdag ng espasyo, at sundin ang mga ito sa isang h1, isa pang simpleng tagapili na tinatawag na tag selector na pipili ng mga uri ng mga elemento tulad ng mga divs o talata. Espasyo Ang Pinagsasama aming 2 simpleng tagapili, paglalapat ng lahat ng mga pagdeklara ng CSS at ang kulot tirante sa mga tag ng h1 na nakatira sa loob ng mga elemento na may id = "nakawan". Lamang sa kumbinsihin na ito gumagana, kukunin ko na baguhin ang kulay ng font sa puti, i-refresh, at, tumingin, Rob ng header ngayon puti. 

Ang lahat ng ito gumagana napupunta upang ipakita na sa pamamagitan ng paggamit ng mga panuntunan sa halip ng mga inline na mga estilo maaari naming makakuha ng mas cleaner code. Sa katunayan, kung ang style block na ito ay nagsisimula ng kaunti malaki, Ko ring hilahin ang mga estilo sa isang iba't ibang mga file sa kabuuan. 

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

Sa kaso ikaw ay nagtataka, ang mga simpleng tagapili kasama ang mga tagapili ng ID at tag tagapili tulad ng mga lang namin nakita pati na rin ang tagapili ng klase para sa pagpili ng mga elemento na may ilang mga klase, attribute 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 mag-hover at tumuon para tumutukoy ng estilo kapag ang mga pakikipag-ugnayan bang pagpasada ng mouse sa isang elemento mangyari. 

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

Sa pamamagitan ng pagsasama ng mga tagapili at combinators, maaari mong palawakin ang hanay ng mga estilo na maaari mong makamit sa isang web page at isulat ang CSS mas mahusay. Sa lamang ng ilang mga linya ng CSS na nakikita mo sa akin ang pag-type dito, Ko mabilis na gumawa ng isang bagay tulad ng ito hitsura tulad ng isang bagay tulad nito. 

Ako Jose, at ito ay CS50. 

[CS50.TV] 

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