[Musika nagpe-play] Allison BUCHHOLTZ-AU: Kaya talaga kami lamang ang pagpunta upang bigyan ka ng isang rundown ng CSS, dahil alam namin na ito ay hindi sakop sa lahat ng mga seksyon. At kami ba talagang makatiyak na guys mayroon ang tool na ito sa iyong pagtatapon, dahil mayroon itong kakayahan upang gumawa ng mga ang iyong website hitsura magkano prettier. At kung ikaw ay pagbuo ng isang website, at pagkatapos ay malamang na gusto upang gawing mas kaakit-akit. Ibig kong sabihin, hindi mo na kailangang, ngunit nais kong imungkahi ito. [LAUGHS] Kung gusto mong ang mga user na gamitin ito, maaari kang nais upang gawin itong isang maliit na [hindi marinig]. Kaya kami ay pagpunta sa subukan at bibigyan ka lang ilang mga pangunahing mga tool at pag-unawa, upang kapag kang pumunta out at ikaw ay pagsasaliksik ng mga bagay tungkol sa CSS, hindi ito makumpleto walang kuwentang, tulad ng CSS minsan upang maging. Tomas REIMERS: Oo. Sinabi nito Allison nang mahusay. Kaya hulaan ko ang unang bagay na namin dapat na magsimula sa ay kung ano ang CSS? Kaya CSS ay kahanga-hanga. CSS-- Allison BUCHHOLTZ-AU: Iyon ang pangalan ng aming seminar. Tomas REIMERS: Oo. Ito ay talagang mahalaga na Nauunawaan mo na sa pamamagitan ng pagkatapos. Kung mong gawin lamang ang layo ng isa bagay na ito, na CSS kung kahanga-hanga. Dalawang ay nakatayo CSS para sa Lumalagaslas na mga Pilas ng Estilo. Kaya sa core nito, CSS ay isang style sheet, na nangangahulugang pinapayagan ka nitong istilo isang web page. At pagkatapos ay kung ano ang ibig sabihin nito ay, ito ay isang paraan upang magdagdag ng estilo sa iyong website. Kaya sa pamamagitan ng estilo, ang ibig sabihin namin ang lahat ng bagay na hindi structural-- kaya mga bagay tulad ng mga kulay, background mga larawan, hangganan, tulad ng, padding, margin. Susubukan naming makipag-usap tungkol sa kung ano Nangangahulugan lahat na sa ilang sandali. Kaya nagbigay lamang nawala namin magpatuloy at Binuksan ang parehong mga up sa gedit. Kaya ito ay index.html. At ito ay main.css. Kaya main.css ay wala. Allison BUCHHOLTZ-AU: Walang estilo sa ngayon. Tomas REIMERS: Wala. At bilang makikita mo, ito ay isang talagang pangit site. Allison BUCHHOLTZ-AU: Ito ay lamang plain. Tomas REIMERS: Oo. Oo, ito ay hindi mainit ang ulo, ito lamang ay minimalist. At pagkatapos dito mayroon index.html namin. At kaya para sa mabilis na pagbabalik-tanaw ng HTML, Allison, Gusto mo bang makipag-usap lamang tungkol sa mga pahina? Allison BUCHHOLTZ-AU: Oo. Kaya malinaw naman, mayroon kaming HTML tag, na kung saan lamang ng mga pangalan HTML file. Mayroon kaming aming header dito, may CSS Mahusay, which-- kung pumunta ka pabalik. Saan na? Tomas REIMERS: Oh. Oo, maaari mong makita. Allison BUCHHOLTZ-AU: At mapansin ang header ang tab na header sa karapatang ito up dito. At pagkatapos ay ang "Hello, world!" ay ang teksto na mayroon kami lamang pagpapakita sa web pahina, na is-- bumalik. Bumalik. Aling ay isa lamang sa aming katawan here-- ang plain text. Gayundin, isang bagay na mapansin, kung tiningnan mo dito, Tomas lumipat up ang mga dalawang mula sa aming mga slide. Kaya hangga't mayroon ka ng lahat tatlong sa mga ito, ikaw ay multa. Maaari silang maging sa anumang pagkakasunud-sunod nila gusto. Ano ang pinakamahalaga lamang na mayroon kang bawat isa sa mga tatlong bagay. Tomas REIMERS: Cool. Magdagdag ng isang uri ng doc? Allison BUCHHOLTZ-AU: Oo. Tomas REIMERS: Oo. Ayos. Allison BUCHHOLTZ-AU: tila, aking mics hindi ako gusto. Tomas REIMERS: Oh, bigyan kami ng isang segundo lamang habang Allison Lilipat ang kanyang mic. Kaya oo. Kaya mayroon namin ang aming pangunahing pahina. Ito ay uri ng unstyled. Hindi namin magkano ang mayroon. Mayroon lang namin talaga ng teksto. Mayroon kaming mga style sheet. Mayroon kaming mga pamagat. Kaya lang walang kalaman-laman-walang buto mga bahagi gumawa ng isang website. Kaya mula doon, sabihin makipag-usap tungkol sa kung ano CSS ay at kung ano ang mukhang at ang lahat ng iyon. Kaya para that-- Allison BUCHHOLTZ-AU: Bumalik sa mga slide. Tomas REIMERS: Bumalik sa slide. At Allison ay maaaring umabot ng higit sa. Allison BUCHHOLTZ-AU: Woo. OK. Kaya sa iyong CSS file, ka ng pagpunta sa may ng maraming mga bagay na ito na tinatawag na tagapili. Iyon ay lamang maging batayan ng iyong CSS file. Lamang ito ay magiging maraming at maraming ng mga ito. Kaya tagapili. Ito ay lamang ng pangkalahatang anatomya. Kami ay pagpunta sa pumunta sa pamamagitan ng mga halimbawa, dahil kung hindi kailanman guys pinanood ang aking seksyon, nararamdaman ko tulad ng mga bagay sa abstract hindi talaga magkaroon ng kahulugan. Laging nakakatulong ito upang makita ang mga halimbawa. Kaya mayroon kaming ilang mga tagapili. Iyon ang nangyayari sa ilang mga identifier para sa kung ano ang gusto namin ang estilo na mag-aplay sa. At pagkatapos ay maaari kaming magkaroon ng anumang hanay ng mga patakaran at mga halaga. Kaya tagapili na maaari kang makakita ay maaaring maging isang bagay tulad ng katawan, o talata na may P, o header, o anumang, anumang nais mo ang iyong mga tag ng HTML upang maging. Kaya sa kasong ito, mayroon kaming katawan. At mayroon kaming ilang mga panuntunan, na kung saan ito ay tumutugon sa kung ano ang naaangkop sa iyong estilo. Kaya sa kasong ito, mayroon kaming kulay ng background at font timbang. Kaya ito ay pagpunta upang baguhin ang background ng anumang bagay sa loob ng anumang katawan na tag sa aming mga HTML file. At ito ang nangyayari upang bigyan ito sa ganitong mapusyaw na asul na halaga. Kaya ito ay pagpunta sa gawin ang background mapusyaw na asul. At pagkatapos ay anumang bagay sa loob ng katawan ay pagpunta sa magkaroon ng isang font timbang bold. Kaya lang pagpunta sa bold lahat ng aming mga teksto. At ito ang isa-pili lang. Ngunit maaari kang magkaroon ng napaka marami sa mga ito. At bilang namin ang pagpunta upang ipakita ang sa ibang pagkakataon, nang kaunti ang nalalaman sa kung paano na mga gawa at higit pang mga halimbawa doon. Anumang bagay na gusto mong idagdag? Tomas REIMERS: Hindi. Nakuha ko Allison. Lamang kami ng pagpunta upang i-cut up ng isang Halimbawa dito sa aming halimbawa site. Kaya sabihin aktwal na tumagal ito. Ito ay perpekto. Kaya ako lamang ng pagpunta sa kopyahin at i-paste ang karapatang iyon sa aming main.css file. At ako pagpunta sa i-save ito. At pagkatapos ay namin patakbuhin ito. Kaya gilid tala, ang isa sa mga pinaka-nakakabigo bagay ay kung hindi mo i-save ang isang file, at pagkatapos, tulad ng, i-reload ang pahina, at tulad ng, kung bakit hindi ang nangyayari pagbabago? Nangyayari ito. Kaya dito nakita namin na aming ginawa ang aming website mapusyaw na asul na background at ang ilan ay naka-bold na teksto. Dapat ko ring banggitin, kung guys may mga katanungan tungkol sa anumang bagay aming ginagawa, mangyaring huwag mag libreng upang ihinto sa amin at hilingin sa amin. Kami ay talagang gusto sa field katanungan. Allison BUCHHOLTZ-AU: Malinaw, na may CSS, ang lahat ng bagay ay nagbubuo mula sa sarili nito. Kaya kung ang isang bagay ay hindi magkaroon ng kahulugan ngayon, namin ayaw na sa lusak down ka sa ibang pagkakataon. Tomas REIMERS: Kaya sabihin uri ng pag-aralan ito. Kaya nais mong magsimula may selector dito? Allison BUCHHOLTZ-AU: Oo. Tulad ng sinasabi ko dati, katawan lamang ang aming tagapili dito. Kaya kung pumunta namin pabalik sa aming mga index-- ah. Tomas REIMERS: Aling ko lang sarado. Bigyan mo ako ng isang segundo. Kaya File, Buksan, index.html. Allison BUCHHOLTZ-AU: Cool. Kaya kung napansin mo dito, namin May mga body tag, tama? Kaya ang tagapili lamang tumutugon sa ang mga tag na pinag-uusapan natin ang tungkol. Kaya katawan dito mismo. Kaya kung ano ang iyong sinasabi namin ay everything-- maaari naming bumalik? Gusto ko ng dati ko lang tulad ng pindutin ang screen. Gusto itong maging kaya magkano ang mas malalamig. Kaya kahit ano sa loob ng mga katawan ng mga tag, na kung saan nakita natin ay isa lamang, tulad ng, ang teksto, at ang katawan sa pangkalahatan ay tumutukoy sa, tulad ng, sa background. Kung sakaling nais mong baguhin ang background, na magiging sa isang body tag. May mga panuntunang ito ilapat sa kanila lamang. Kaya kung kami ay upang pumunta sa index.html and-- talaga, Maaaring magkaroon kami ng isang bagay sa labas ng katawan? Kung nagkaroon kami, tulad ng, ang isang footer o isang bagay, hindi ito ay nalalapat sa ito. Ngunit kahit ano sa loob ang mga katawan ng mga tag ay pagpunta na naaapektuhan ng katawan tagapili na ginawa naming. Kaya kung ikaw ay i-type ibang bagay there-- Tomas REIMERS: humimok na bahay Hayaan. Kaya kung nagkaroon kami ng div-- kaya na isa lamang tag na maaari kang magkaroon ng. Pupunta ako upang isara ito. O kaya ay gumawa ito ng isang talata ipaalam. Kaya p ay kumakatawan sa talataan. At sa loob ng talata. At pagkatapos ay sinasabi ko, "Ito ang text." Ayos. At pagkatapos ay ginawa ko ang panuntunan na ito ay nalalapat sa isang talata sa halip ng katawan. Makikita mo kung paano ito ay nalalapat lamang sa ang bagong nabuo talata, kanan, hindi ang buong bagay. Ba na magkaroon ng kahulugan? Allison BUCHHOLTZ-AU: Kaya ito ay ang lahat ng katawan, ngunit ngayon ang aming tagapili lamang ay tumutugon sa talata. Kaya mayroon lamang namin ang naka-bold at asul para sa partikular na talata, dahil ito ay ang tanging bagay na nakapaloob sa loob ng p tag. Tomas REIMERS: Sinusuportahan ba na make kahulugan pag-uuri kung paano ang mga bagay encapsulate iba pang mga bagay? Allison BUCHHOLTZ-AU: Gayundin, lamang sasabihin, tulad ng, ang isa sa mga pinakamahusay na paraan upang makakuha ng talagang kumportable sa CSS ay gagawin lamang ng mga bagay na tulad nito, subukan lamang ito. Ito ay napaka-simpleng i-type ang isang bagay out, pindutin ang I-refresh, at tingnan kung ano ang mangyayari. At katulad ng karamihan sa CS, -e-eksperimento maaari madalas humantong sa isang mas mas mahusay na intuitive-unawa. Higit pang mga kaya kaysa sa amin lang, tulad ng, pakikipag-usap sa iyo. Tomas REIMERS: Oo naman 100% sumang-ayon sa puntong iyon. Kaya kung pumunta namin pabalik sa ito, ay magsisimulang ipaalam dissecting kung ano mismo ang dalawang gawin. Kaya mayroon kaming dalawang mga panuntunan ukol dito. Kaya ang una ay ang kulay ng background. At makikita mo na na-set namin ito katumbas ng halaga, mapusyaw na asul. Kaya sa CSS, CSS ay pag-uuri ng napaka hindi kabit-kabit tungkol sa kung paano pinapayagan ka upang tukuyin ang kulay. Kaya maaari mong tukuyin ang mga ito sa pamamagitan ng pangalan. Maaari mo ring gawin ang isang bagay tulad ng "pula." At pagkatapos kung pumunta namin pabalik sa ito, makikita mo na ang background ay pula. Maaari ka ring makakuha really-- tingin ko sa iyo maaaring makakuha ng medyo creative na may ito, hindi maaari mong? Allison BUCHHOLTZ-AU: ko Sa tingin maaari mong gamitin ang hex. Maaari mong hindi? Tomas REIMERS: Oo. Kaya maaari mong gamitin ang hex. Ngunit ako nag-iisip pangalan-matalino. Sigurado hindi doon? Allison BUCHHOLTZ-AU: Maaari mong gawin marami-dami. Halos tulad ng karamihan sa mga kulay na Maaari name-- tulad, sa palagay ko salmon ay isa. Tomas REIMERS: Humihingi kami ng gonna try salmon. Allison BUCHHOLTZ-AU: ko Sa tingin chartreuse ay nasa doon. Tomas REIMERS: Oo. Tingnan? Kaya maaari kang makakuha ng medyo creative. Allison BUCHHOLTZ-AU: mo maaaring makakuha ng medyo creative. Tulad ng, kung maaari mong isipin na ang pangalan ng kulay, ito ay marahil sa doon. Kung mo ba talagang fine detalyado, maaari kang pumunta hex. Tomas REIMERS: Oo. Kaya hexadecimal. Kung naaalala guys ito pabalik mula sa iyong lumang PSET, Ibalik muli ang Imahe, ka guys ay nagkaroon upang harapin may mga halagang ito hex. At uri ng pagbabalik-tanaw sa kung ano ang ibig sabihin, hex ay may tatlong mga halaga na naka-imbak sa loob nito. Kaya sa mga grupo ng mga dalawang-unti. Ang unang dalawang kumakatawan sa mga pulang halaga. Ang ikalawang isa ay kumakatawan sa ang berde na halaga. At ang huli ay asul? Kaya ang mangyayari FF upang kumatawan isang hexadecimal 255. Kaya mayroon kang 255 na pula, 255 berde, at 0 para sa asul. At ang range halaga sa pagitan ng 0 at 255. Madla: Mag-right. Kaya mahalagang, maaari naming maghanap sa internet para sa anumang kulay na gusto namin, at matukoy ang aktwal na-kilala Kulay ng spectrum combo, at pagkatapos ay maaari naming ilagay ito sa? Allison BUCHHOLTZ-AU: Mismong. Kaya ikaw ay may halos kumpletong kontrol sa ibabaw ng mga kulay na gusto mo sa loob ng CSS. Kami makapupunta sa makipag-usap tungkol sa mga larawan sa background sa ibang pagkakataon? O ang gusto naming gawin iyon? Tomas REIMERS: Oo. Oo naman. Kaya una, upang ipakita na pula at berde ay dilaw. At kung kailangan mo ng ilang ng tulong sa paghanap na ito, ikaw Maaari Google ng isang bagay tulad ng "tagapili ng kulay." Allison BUCHHOLTZ-AU: Oh, ito ay kaya maganda. Gustung-gusto ko Picker ng Kulay. Tomas REIMERS: colorpicker.com ay isang magandang halimbawa. At dito, makikita mo na mayroon kang isang buong Photoshop-tulad ng tagapili ng kulay. Allison BUCHHOLTZ-AU: MM-Hm. Gayundin, ang mga cool na bagay na ikaw ay Maaari bumuo ng scheme ng kulay upang hindi mo na kailangang, tulad ng, clashing kulay. Tomas REIMERS: At pagkatapos ay narito ang hex value dito. Kaya maaari mong laging mahanap ang mga online na talaga mga lugar upang makuha ang halaga ng hex mula sa. Hindi ito-uri-uriin ng na lang, tulad ng, namin makita ang mga kulay ng mundo sa mga numero. Mas na kami mag-online at makita kung ano ang kulay na gusto namin, at pagkatapos ay gawin ang mga numero pababa. Dahil lamang ng isang talagang madali paraan na banggitin ang mga bagay sa CS. Allison BUCHHOLTZ-AU: At pagkatapos ay mayroong also-- Nalimutan ko ang eksaktong pangalan ng site. Ngunit mayroong talagang, ako Sa tingin, isang bagay mula sa Adobe na binubuo ng mga scheme ng kulay para sa iyo, na kung saan ay talagang cool na, dahil hindi mo definitely-- minsan ito ay mahirap upang malaman kung, naku, kung gusto kong gamitin ang kulay na ito, kung ano ang maaaring maging isa pang kapaki-pakinabang ang isa gamitin sa ibang lugar sa aking site sa, tulad ng, gawing mas maganda at cohesive. Tomas REIMERS: Allison ng pakikipag-usap tungkol sa isa sa pamamagitan ng Adobe tinatawag Kuler, sa tingin ko. Ito ay K-U-L-e-R. Allison BUCHHOLTZ-AU: Sa tingin ko kaya. Ako ay medyo sigurado na ang isa. Tomas REIMERS: Aking mga paboritong ay palagi nang naging Kulay Scheme Designer. Allison BUCHHOLTZ-AU: Ooh. Tomas REIMERS: Alin ang now-- Allison BUCHHOLTZ-AU: Ah, ito ay maganda. Tomas REIMERS: At ka Maaari isa lamang sabihing, tulad ng, Gusto ko ng tatlong kulay sa tabi ng bawat isa. At gawin ang isang bagay na maganda pagkatapos ay hayaan. At pagkatapos ay maaari kang makakuha ng isang halimbawa ng kung ano na maaaring magmukhang. At pagkatapos ay kung mag-hover sa alinman sa mga mga ito, binibigyan ka nito ang halaga ng hex. Kaya bilang isang magandang paraan upang simulan ang nag-iisip tungkol sa mga scheme ng kulay o kung ano ang mga kulay sa isang website Baka pumunta maayos kung magkasama. Dahil na maaaring maging kahanga-hanga hindi bilang madaling upang pumili bilang sa tingin mo. At pagkatapos ay ang iba pang mga cool na bagay Na laging natagpuan ko ang tungkol sa site na ito ay kung pinindot ninyo ang mga halimbawa, ipapakita ito ipakita kung ano ang isang halimbawa website maaaring magmukhang gamit na scheme ng kulay. Pa Rin. Bumalik sa aktwal na CSS. Allison BUCHHOLTZ-AU: Ngunit malinaw naman, namin Alam maaaring maging kapaki-pakinabang ang mga sanggunian. Tomas REIMERS: Hindi, sila Siguradong ay maaaring maging kapaki-pakinabang. Kaya ang ikalawang panuntunan, Allison? Allison BUCHHOLTZ-AU: Oo. Ang ikalawang panuntunan lamang nakaayon sa aming mga font. Kaya timbang font ay uri lamang of-- kaya ang bigat ng gagawin maging kung gusto mo lang, gaya ng, normal o, tulad ng, thinner font, o sa kasong ito, tulad ng, naka-bold. Nakakalimutan ko. Ano ang kung nais mong it-- ay mayroong isang thinner isa pa, tulad ng, normal? Tomas REIMERS: gagawin ko hindi talaga alam kung may thinner isa. Allison BUCHHOLTZ-AU: ako makalimutan. Kaya timbang font ating kadalasang gamitin lamang para sa mga naka-bold. Kung nais mong makakuha ng talagang sa ito, kami ay pagpunta upang ipakita sa iyo. W3Schools mayroon ng lahat ng iba't ibang mga bagay na maaari mong gawin para sa mga font. Ngunit isa lamang, kung sakaling nais mong baguhin ang anumang tungkol sa font, palaging ito ay magiging, tulad ng, font-bagay. Kaya ito ay magiging tulad ng, font-family kung ikaw ay sa pagsubok na baguhin ang aktwal na uri. Ito ay font-style kung nais upang gawin itong tulad ng kursiba, o italics, o watnat. O kahit font-kulay, kung gusto naming baguhin iyon. Tomas REIMERS: Yup. Kaya maaari mong baguhin iyon. At uri ng lamang sa pagbabalik-tanaw ngayon, kaya maaari kang makita na mayroon up selector namin dito. Mayroon kaming mga kulot tirante. At pagkatapos ay mayroon kaming mga panuntunan delimited sa pamamagitan ng semicolon. Ba na magkaroon ng kahulugan? Oo? Ayos. Kaya kung iyon ang good-- Allison BUCHHOLTZ-AU: Bumalik. Tomas REIMERS: Hayaan ang partikular na makipag-usap tungkol sa kung anong uri ng mga tagapili na mayroon kami. 'Sanhi sa ngayon hindi namin uri ng ipinapakita lamang na mga tag. Ngunit ka guys ay maaaring makita ito maaaring mangyari. Sabihin nating mayroon kang dalawang mga talataan sa isang pahina at mo nais na ma-estilo isa ngunit hindi ang iba pang, hindi mo nais lamang upang limitahan ang iyong sarili magkaroon upang gamitin ang iba't ibang mga aktwal na HTML mga tag upang mabigyan sila ng iba't ibang estilo. Kaya mayroon kaming tatlong pangunahing mga uri ng tagapili. Allison BUCHHOLTZ-AU: Oo. Kaya mayroon kaming tag, na kung saan ay kung ano ang Na-uusapan natin ang tungkol sa ngayon. Kaya na uri ng tulad ng iyong katawan o p. At pagkatapos ay mayroon kaming klase, na kapag tinutukoy namin ito sa aming mga CSS file, palagi itong nangyayari na tuldok, ang anumang Gusto mo ang pangalan ng iyong klase na. At ito ay maaaring ilapat sa maramihang mga bagay. Sabihin nating mayroon ka ng limang talata at dalawang sa tatlong ng mga ito kailangang ma-istilong pareho, Gusto mong ilapat sa isang klase dito. At ito lamang ang paraan gawin namin ito. Bibigyan ka namin ng isang halimbawa ng kung saan talaga nagpapakita ito up. Ngunit kung mayroon kang siguro ilang tag na p, matapos na ito, nais mong isulat, klase ay katumbas ng kahit anong klase gusto mong ilapat dito. Kaya kahit anong tagapili ng klase na nais naming mag-apply sa mga tiyak na talata, maaari naming lamang magsulat tulad nito. Siyempre, sa palagay ko isang halimbawa Gagawing mas kongkreto. Ang iba pang isa na mayroon kami ay id, na magpakilala namin may hash, o pound, o hashtag. Tomas REIMERS: Octothorpe. Allison BUCHHOLTZ-AU: Octothorpe. Na gumagana, masyadong. At ang isang ito ay dapat talagang maging natatangi. Dapat nilang mailalapat lamang sa mga isang bagay sa iyong pahina. Kaya kung iyon ay isang partikular na talata, o ilang mga item sa isang listahan, o anumang, ito ay dapat natatangi. At sa parehong paraan na aming lamang sabihin, tulad ng, class = "class1 class2," ito ay maaari lamang maging id ng kahit anong mayroon kami. Tomas REIMERS: Oo. Kaya sabihin talagang makipag-usap tungkol sa mga halimbawa dito. At lamang ako ng pagpunta sa sumisid tuwid pabalik sa code. Kaya tingnan natin ang ating HTML ipaalam. At kaya namin ngayon ay may isang talata. Ito ay teksto. Lamang ako ng pagpunta sa baguhin ito. "Ito ang teksto 1." At pagkatapos kami ay pagpunta sa May "Ito ang teksto 2." Allison BUCHHOLTZ-AU: Ikalawa isa. Tomas REIMERS: Yup. Kaya mayroon kaming ngayon "Ito ang teksto 2," tama? At kami ay pagpunta upang makita na kung i-reload namin pahina, kung ano ang iyong pupuntahan namin upang mahanap ang ay hindi namin gonna find-- Allison BUCHHOLTZ-AU: Ooh. Tomas REIMERS: Oo. Kami ay pagpunta upang mahanap ang isang "Ito ang teksto 1, "at" Ito ang teksto 2. " Allison BUCHHOLTZ-AU: At ang kaibig-ibig dilaw na kulay. Tomas REIMERS: At makikita mo ang na ang aming tagapili ngayon, na nalalapat sa p, o mga talata, naaapektuhan ang dalawang iyan, dahil pareho ng mga ito matugunan ang mga kondisyon na ang mga ito ay parehong isang p tag. Na ginagawang kabuuang kahulugan. Kaya ang tanong ay, na rin, kung ano kung gusto naming lamang makakuha ng isa? Kaya nang eksakto tulad ng sinasabi Allison, mayroon kaming dalawang iba pang mga paraan upang gawin iyon. Pupunta ako sa magsimula sa id. Allison BUCHHOLTZ-AU: Magsimula tayo may id Hayaan. Tomas REIMERS: At kapwa ng mga ito ay mga katangian. Kaya umiiral ang mga katangian sa HTML. At ano ang mga ito ay isang bagay na magdagdag ka sa loob ng na tag na hiwalay sa name tag. Kaya maaari kang magkaroon ng maramihang mga katangian. Oo? Allison BUCHHOLTZ-AU: lamang ako ay pagpunta sasabihin, mula sa iyong halimbawa mula sa PSET 7, kung ang alinman sa mong subukang i-align mga bagay sa sentro, maaaring nagamit mo "Text align = center." At napansin mo ito malamang Dapat ay nakasentro ang iyong teksto o sa iyong navigation bar. Kaya na rin lang ng katangian na maaari mong maging pamilyar sa iyo. Tomas REIMERS: Mayroong isang bungkos ng mga katangian na makikita mo. Oo. Tulad ng magandang reference sa PSET 7. Mayroon kaming id. Maaari ka ring magkaroon klase, mga bagay na katulad nito. Ang nag-iisang tag maaaring magkaroon ng maraming mga katangian. Kaya nagsisimula sa id, magpanggap na namin sa nais na magkaroon ng isang id of-- Hindi ko alam. Susubukan naming tumawag ito espesyal, dahil ang isang ito, hindi namin pagpunta sa gawing bold, at guhit sa ilalim, at kahit anong. Allison BUCHHOLTZ-AU: Ito ay gonna maging napaka-espesyal na. Tomas REIMERS: Kaya ito isa, mayroon kaming id espesyal na. Kaya ang paraan upang piliin na iyon, pagkatapos, ay sa main.css, sa halip na magkaroon ng isang p tag, gawin mo #special, OK? At na pinipili ang bagay na may id na espesyal. Gumawa ba ito pakiramdam sa lahat? Madla: Oo. Tomas REIMERS: Cool. Kaya ngayon kung pumunta namin pabalik, ipapakita namin see-- naku. Oo. Susubukan naming makita na ito lamang Pinipili ang isa na may id na espesyal. Oo? Mga tunog cool. Oo. Madla: Maaari isang bagay na mayroon isang katangian ng parehong mga klase at isang id? Tomas REIMERS: Oo. Madla: OK. At pagkatapos ay kung ano ang mangyayari kung pagkatapos ay bigyan ka ng ito ng ilang mga panuntunan sa CSS na sumasalungat? Tomas REIMERS: Oo naman. Talagang Kami ay pagpunta pag-usapan iyon. Kaya nang eksakto kung ano ang iyong pagkuha sa, maaari mo ring magkaroon ng mga klase. Kaya sabihin magpanggap ako nagkaroon tatlong talata at ako Nais na style ang unang dalawang ngunit hindi sa ikatlong. Well, ang iyong unang ideya ay maaaring, well, ako maaaring bigyan lamang ang pangalawang isa sa isang id. Ngunit hindi mo magagawa, dahil sa isang id, nang eksakto tulad ng sinasabi Allison, ay dapat na natatangi. Kaya sa halip na sa isang id na, kung ano ang Maaaring gamitin ay maaari mong gamitin ang isang klase. At isang class-- kung ano ang nagbibigay-daan ito mo lang gawin ay isa lamang sinasabi, ito ay pagmamay-ari bilang bahagi ng isang grupo. Sa kasong ito, ang aming grupo ay tinatawag na Special. At kung ano ang pagpunta naming gawin pagkatapos ay kami ay pagpunta sa say-- sa halip na libra, kami ay pagpunta sa gumamit ng tuldok. OK? At mapansin na ang pound at tuldok umiiral lamang sa loob ng CSS file, hindi sa loob ng HTML. Allison BUCHHOLTZ-AU: Oo. Mahalagang pagkakaiba. Tomas REIMERS: Mayroon akong Nagkaroon kaya magkano ang pakikibaka, dahil ko bang ilagay ang hash sa HTML at pagkatapos ay nadama lamang nakababagod para sa isang mahabang panahon. Tingnan kung paano ito pumipili ng parehong ang mga may klase na? Ayos. Ngayon, mga bagay na maaaring magkaroon ng maramihang mga klase. Ipagpalagay natin na nais kong gawin ang unang dalawang magkaroon ng isang background ng dilaw at ang dalawa ay may pangalawang isang kulay ng bughaw. OK. Hindi ko talaga alam kung bakit ko gusto nais upang gawin iyon, ngunit maaari ko. Allison BUCHHOLTZ-AU: Maaaring hindi inirerekumenda ito para sa iyong website. Ngunit para sa aming mga layunin, makikita ito gawin. Tomas REIMERS: Hindi isang mahusay na scheme ng kulay. Allison BUCHHOLTZ-AU: Well, dilaw at bughaw ang aking mga mataas na mga kulay ng paaralan. Hindi ko alam, bagaman. Tomas REIMERS: Allison ng mataas paaralan ay may isang mahusay na scheme ng kulay. [Tawa] Kaya pagkatapos ay kung ano ang maaari naming tumawag ito Hinahayaan ng tawagan this-- kaya kami ay may mga espesyal na at mayroon Pretty namin. Iminumungkahi ko, para sa ito, ginagamit mo marami pang mga malarawan na pangalan. Allison BUCHHOLTZ-AU: Oo, nais ko tumawag ito, tulad ng, dilaw o asul. Tomas REIMERS: Hindi kami talagang gumagawa ng tunay na website, na ang dahilan kung bakit hindi namin ginagawa iyon. Ngunit kung ikaw talaga ay nagkaroon ng isang tunay na website, mo maaaring mayroon, tulad ng, header artikulo, nilalaman ng artikulo, unang salita, mga bagay tulad na, na nagbibigay-daan sa iyo na maging mas mapaglarawan. Ang mga ito ay talagang tulad lamang ng mga variable. Dapat nilang napangalanan sa isang paraan kung saan maaari, like-- oo, sa gayon. Perpekto. Kaya kulay ng background. At pagkatapos kami ay pagpunta sa say-- kaya ang paraan upang baguhin ang kulay ay "color." lamang At kami ay pagpunta sa gawin itong asul. Iyon ay cool. Kaya ngayon mayroon kaming ang dalawang unang may mga espesyal na. Susunod isang pupuntahan may "class = kaakit-akit." Allison BUCHHOLTZ-AU: At pagkatapos ay ipapakita sa iyo Gusto upang idagdag ang "medyo" sa isa gitna. Tomas REIMERS: Yup. At pagkatapos ay sa gitna ng isa, upang magdagdag ng "maganda," kung ano ang mangyayari ay ikaw ay may espasyo. Kaya ang katangian ng klase ay isang listahan na espasyo ng kuwit ng lahat ng mga klase na nalalapat sa tag na iyon. OK? Hindi ito tulad ng isang ito ay kabilang sa ang ilang mga uri ng espesyal na klase na tinatawag na "Espesyal, espasyo, medyo." Ito ay kabilang sa dalawang classes-- espesyal at kaakit-akit. Oo? Ayos. At pagkatapos ay kung tiningnan namin sa kung ano ang mangyayari, kami ay pagpunta upang makita ang unang isa ay dilaw na background, itim na teksto. Pangalawa one-- Allison BUCHHOLTZ-AU: --has bold dilaw na background na may asul na teksto. At ang aming huling isa lamang ay ang asul na teksto na namin na nakatalaga dito. Tomas REIMERS: cool? Paano gumagana ang tagapili? Kahanga-hanga. Allison BUCHHOLTZ-AU: Huwag nais naming pag-usapan ang conflict sa ngayon pagkatapos? Tomas REIMERS: Kaya oo. Oo naman. Kaya kung ano ang mangyayari kung magkaroon ng isang hindi pagkakasundo, tama? Magpanggap na ang una Hayaan nagse-set up ng isang bagay like-- Allison BUCHHOLTZ-AU: Baka nagbabago ang isang ito sa background? Tomas REIMERS: Oo. Kaya kami ay pagpunta sa gawin "medyo" baguhin ang background na salmon. Allison BUCHHOLTZ-AU: Ikaw lamang ang may lahat ng mga mahusay na kulay sa araw na ito, Tomas. Tomas REIMERS: Oo. Dahil nakita ko ang maaari kong gamitin ang salmon bilang isang tunay na kulay. Kaya namin lamang ng pagpunta sa gawin iyon. Sa tingin ko rin Sunset ay isang tunay na kulay. Madla: Sunset ay isang tunay na kulay? Allison BUCHHOLTZ-AU: subukan natin ito Hayaan. Tomas REIMERS: Pagkatapos demo dahil lang sa kasong ito makikialam up, Hindi ko nais na pag-debug. Upang malaman namin ang salmon ay isang tunay na kulay. Kaya ang anumang mga hula sa kung ano ang nangyayari sa mangyayari? Allison BUCHHOLTZ-AU: Anumang ideya? Madla: [hindi marinig]. Tomas REIMERS: Oo. Kaya mo nakuha ko akmang-akma. Talaga, ito ay tumatagal ng huling panuntunan na ito ay ibinigay. Allison BUCHHOLTZ-AU: Kaya ito ay kung saan cascading ay magkakabisa. Tomas REIMERS: Kaya tandaan kung paano namin nagkaroon na Lumalagaslas na mga Pilas ng Estilo? Kaya sa pamamagitan ng na, uri ng namin ibig sabihin mayroon kaming ng grupo ng mga panuntunan na nalalapat sa tuktok ng bawat isa, at maaari rin nilang i-override ng bawat isa. Allison BUCHHOLTZ-AU: Kaya kahit anong sa ibaba ito ay sasapaw ang kahit anong sa itaas. Maaari kang magkaroon ng mga patakaran na ganap magkaila isang bagay muna. Iyon ang dahilan kung bakit din nais na maging Mag-ingat kapag ikaw ay estilo, kaya hindi ka paglikha ng mga panuntunan na saan ka ganap na pinakamahalaga. Tomas REIMERS: O siguro mo gustong patungan panuntunan. Allison BUCHHOLTZ-AU: O siguro mong gawin. Oo. Tomas REIMERS: magpanggap na mayroon kang isang klase na nalalapat sa karamihan ng mga bagay, ngunit sabihin nating gusto mong baguhin ang Kulay ng background sa pula at ang font timbang na naka-bold para sa karamihan mga bagay, ngunit para sa isa, gusto mo lamang ang kulay ng background maging pula ngunit gusto lahat ng iba pang ari-arian, maaari mong gawin ang isang bagay tulad ng "font-weight = normal," na kung saan ay pagkatapos ay i-undo na naka-bold pagbabago. Oo? Muli, ang pinakamahusay na paraan, sa palagay ko Sinabi ni Allison ito, ay ensayo pa lamang. Allison BUCHHOLTZ-AU: e-eksperimento. Tomas REIMERS: Kasanayan, pagsasagawa, kasanayan, at eksperimento. Alam ko ng maraming mga tao na sa tingin CSS ay isa lamang ng maraming hula-at-check sa pagtatapos ng araw, kung saan kung Gusto mo bang gawin something-- tulad ng, mayroon kang isang magaspang na ideya, ngunit marahil kailangan pa rin subukan ito upang tiyakin na alam mo kung ano ang mukhang. Madla: Kapag naka-a-apply klase, higit sa isang sa parehong talata o seksyon, ginagawa nito anong pagkakasunud-sunod bagay na maaari mong -type ang mga ito sa mga panipi? Tomas REIMERS: Hindi, hindi sa lahat. Allison BUCHHOLTZ-AU: Ano ang mahalaga ay ang pagkakasunud-sunod sa loob ng iyong style sheet CSS. Madla: Maaari mo bang ulitin ang tanong? Tomas REIMERS: Oh. Allison BUCHHOLTZ-AU: Sa loob ng klase, kapag naka nagbibigay sa mga klase sa isang bagay sa HTML, ang ito mahalaga na pagkakasunud-sunod ang mga ito sa? Hindi mahalaga ang pagkakasunod-sunod. Kung ano ang mahalaga ay ang pagkakasunud-sunod ng mga tagapili ng klase sa loob ng iyong CSS, sa loob ng iyong style sheet. Tomas REIMERS: Sound magandang? Allison BUCHHOLTZ-AU: kaibig-ibig. Tomas REIMERS: At pagkatapos ay kami ay pagpunta upang magpatuloy to-- Allison BUCHHOLTZ-AU: Ano ang mayroon kami susunod? Nakakalimutan ko. Oh, mayroon lamang namin ang mga halimbawa. Ngunit uri ng tapos na namin ang mga iyon. Tapos na namin ang mga halimbawa sa mabilisang. Tomas REIMERS: makakuha kami sa pagsamahin ang tagapili sa lalong madaling panahon. Allison BUCHHOLTZ-AU: Oh, makuha namin upang pagsamahin ang tagapili. Tomas REIMERS: Kaya ilang mga halimbawa ay mayroon kaming # Dog-- pound, o hashtag, o octothorpe, o anumang na nais mong tawagan that-- matalim. Allison BUCHHOLTZ-AU: Biglang aso. Tomas REIMERS: Pagkatapos mayroon kang .pets. Isang bagay ay may id ng aso, mayroon lamang isang aso sa pahina. Isang bagay ay may id ng pusa, mayroon lamang isang pusa. Maaaring may maraming mga alagang hayop sa pahina. Iyon ang dahilan kung bakit namin ibinigay na mga klase. Mayroon kang isang halimbawa ng p. At pagkatapos ay sa gayon ang isa sa mga huling halimbawa, na ay isang bagay na hindi pa namin usapan tungkol sa, ay kung ano ang mangyayari kapag pagsamahin mo ang mga ito. Kaya p.pets. Kaya para sa na, sabihin bumalik sa code at ipakilala another-- oo. Kaya muli dito. Allison BUCHHOLTZ-AU: ko parang ito ay really-- tulad lamang ng pagtingin sa mga halimbawa Talagang ang paraan upang matuto ito. Kaya na kung anong ginagawa namin. Tomas REIMERS: Kaya ipaalam magpanggap na namin nais lamang upang piliin ang teksto 2, i-right? Kaya nga tayo ay hindi maaaring gawin na may id. Well, maaari naming gawin na gamit ang isang id, ngunit ito ay walang id. Maaari ba akong magdagdag ng isa, ngunit ng magpanggap ipaalam na hindi ko nais upang magdagdag ng isa o ito ay mayroon nang ibang bagay. Hindi ko kayang gawin iyon na may mga iyon. Tag ay hindi talagang natatangi, tama? At hindi rin ay ang klase. Ngunit maaari mong pagsamahin ang mga bagay na ito. Sabihin nating gusto naming gawin ang isang bagay na kung saan ay angkop lamang sa mga bagay na may klase espesyal at kung saan ay mayroon medyo ang klase. Kaya ano ang maaari mong gawin ay sa main.css, Maaari mong sabihin, ang unang tanggalin ito hayaan. Maaari mong pagsamahin ang mga ito. Kaya maaari mong gawin .special. Walang espasyo. Lamang .special.pretty. Ano ang ibig sabihin nito ay ang isang bagay na kung saan ay parehong espesyal at kaakit-akit. Ba na magkaroon ng kahulugan? At kung pumunta namin dito, kung ano na iyong pupuntahan upang makita ay nalalapat lamang ang panuntunan na ito sa ikalawa, na may parehong mga iyon. At maaari mong gawin iyon para sa maraming bagay. Maaari mong say-- sabihin magpanggap Nais kong lamang upang gawin ang mga bagay na mayroon ang klase medyo at alin ang ring ng tag talata. Kaya p.pretty. Ng magpanggap na nagkaroon ako Hayaan isang bagay na medyo sa katawan tag. OK? Maaari ko bang patakbuhin ang at ako Maaari makita na ito ay lamang pagpunta sa nalalapat sa mga bagay na talata na may klase medyo. At maaari mong pagsamahin ang mga ito, talaga, ng marami ayon sa gusto mo. Sa gayon ay maaari lamang ilagay ang mga ito nang magkakasama. Ba na magkaroon ng kahulugan? Allison BUCHHOLTZ-AU: Kaya ang ganitong uri ng Mas kapaki-pakinabang kapag, Sinasabi ng mas maaga Tomas, siguro mayroon kang isang napaka-komplikadong website, at mayroon ka ng maraming ng mga panuntunang ito na nakasulat, at kailangan mo lang pagsamahin ang dalawang mula sa bago. Tulad ng sa halip ng pagsusulat ng isang buo mga bagong tagapili at pagbabago doon, Maaari mo lamang pagsamahin ang mga ito kung saan ito nakapatong. Tomas REIMERS: O mo Maaaring mahanap out-- minsan mayroong isang klase na Ginagawang asul kulay ng font ng tulad ng, at mayroong isa pang klase na Ginagawa ang mga asul na background. At na hindi lamang ang gagana. Kaya ka magsulat ng isang espesyal na kaso, kung saan, like-- ngunit kung mayroon itong kapwa, ano ang iyong pagpunta sa gawin ay na iyong pupuntahan gawin ang isa sa lilim ng kulay asul at ang isang ito ang iba pang mga lilim ng kulay asul. Mag-right? Allison BUCHHOLTZ-AU: Magandang para sa mga uri ng mga pagbubukod. Tomas REIMERS: Kaya sa isipin ang tungkol sa mga problema na maaaring lumabas dahil kapag pagsamahin mo ang mga ito. Ayos. Kaya pabalik sa aming mga pagtatanghal. Allison BUCHHOLTZ-AU: Humihingi kami ng halos doon. Tomas REIMERS: At Huminto sa pagkonekta. Allison BUCHHOLTZ-AU: Oh, hindi. Allison BUCHHOLTZ-AU: CS sa sa opisina, internet napupunta pababa. Oh, ang balintunay. Tomas REIMERS: Kaya sa kabutihang-palad, maaari naming ipakita walang internet, hulaan ko, dahil mayroon kaming ang lahat ng mga slide dito. Kaya ipaalam makipag-usap tungkol sa relasyon ng mga tag. Allison BUCHHOLTZ-AU: I-right. Kaya lamang uri ng pagpunta -off ng kung ano ang sinabi Tomas, ito ay isa lamang paraan upang gawin ito. Kaya mayroon kaming ilang mga magulang tagapili ng bata selector. Kaya sa halimbawa dito, mayroon kaming ilang mga katawan na may isang klase navbar, pindutan class. Ah. Tomas REIMERS: Oh, paumanhin. Allison BUCHHOLTZ-AU: At talaga, kung ano ang ibig sabihin nito ay piliin ang lahat ng mga bata, tulad ng lahat ng mga uri ng mga tagapili, sa loob ng magulang tagapili. At ang mga ito ay ang tanging mga bago kailanman ito ay pagpunta upang ilapat sa. Hindi ko alam kung magkaroon ng isang mas mahusay na paraan of-- Tomas REIMERS: Kaya ko hulaan ang paraan upang isipin tungkol sa ito ay matandaan kung paano bago uri ng namin gustong ilagay ang mga ito nang magkakasama. At pagkatapos ay nangangahulugan na ang isang elemento na tumutugma sa lahat ng mga ito. Ano ito ay sinasabi ay, ako gusto mo upang tumugma sa lahat ng bagay sa loob ng some-- gusto ko iyo upang makahanap ng selector. At pagkatapos ay sa loob na, gusto ko mo upang tumugma sa mga bagong bagay. Mag-right? Kaya sa CSS, lahat ng ito ay tungkol sa isang uri ng kawalan ng kakayahang tumugma sa mga item na ito. At maaari mong subukan upang tumugma sa mga item sa loob iba pang mga item. Kaya sabihin aktwal na gawin ang isang halimbawa, at sa tingin namin na kailangan linawin. Kaya sabihin magpanggap na mayroon kami espesyal, espesyal na maganda, kahit anong. At pagkatapos ay mayroon kaming isang link, OK? Kaya tandaan, ang isang ay isang link. Hindi ito ng pagpunta sa pumunta sa kahit saan. At kami ay pagpunta sa bigyan ito ang link na klase, hulaan ko. Bigyan natin ito ng Hayaang class-- ninyo ako ng ideya. Allison BUCHHOLTZ-AU: Cool. Tomas REIMERS: Coo-- sabihin pumunta ito sa klase kaakit-akit. Bakit hindi? Allison BUCHHOLTZ-AU: OK. Tomas REIMERS: Kaya karapatan medyo ngayon bagay ay pagpunta sa gawin ang background asul, kulay ng background ng salmon. Iyon ang may katuturan. At kung gagawin namin this-- Allison BUCHHOLTZ-AU: Gusto mo bang magdagdag ng teksto kaya ang hyperlink talaga nagpapakita up? Tomas REIMERS: Iyon ay magiging isang mahusay na tawag. Allison BUCHHOLTZ-AU: 'Sanhi karapatan ngayon lamang namin gonna walang makukuha. Tomas REIMERS: Kaya ito ay isang link. "Ito ay isang link." Oh, at ito ay pagpunta upang maging isa pang link. Bigyan natin ito sa klase Hayaan ang "cool." Tama ka. Ayos. Kaya ngayon kami ay pagpunta sa grab ito. Kami ay pagpunta sa magtapon ng isa. Mayroon kaming isa sa espesyal na tag, at din namin Magiging isa sa mga kaakit-akit na tag. At ngayon kung ano ang namin ang pagpunta sa gawin ay kami ay pagpunta sa gawin cool-- kung ano ang gusto namin itong gawin? Allison BUCHHOLTZ-AU: Maaari ba kaming gawin itong mas malaking? Tomas REIMERS: bigyan natin ito ng hangganan Hayaan. Allison BUCHHOLTZ-AU: maaari naming border. Tomas REIMERS: Oo. Kaya kami ay pagpunta sa gawin ang isang bagay tulad ng, hangganan is-- at nagpapaumanhin kami pagpunta sa ipaliwanag ito lahat sa isang segundo. Para sa now-- Allison BUCHHOLTZ-AU: Upang ang modelo na kahon. Tomas REIMERS: Ngunit para sa ngayon, hindi namin lamang ng pagpunta sa bigyan ito ng isang hangganan. Kaya ano ang ibig sabihin na ikaw ay pagpunta upang makita ang mga link na ito. At ka ng pagpunta upang makita na mayroon silang mga ito, tulad ng, pangit itim na hangganan, na ay cool. Allison BUCHHOLTZ-AU: Ang aming website ay kaya kaakit-akit. Tomas REIMERS: Oo. Ang aming website ay kahanga-hanga. Kaya ang dalawang mga link, at lumilitaw ang mga ito. Ngayon magpanggap na ko sa nais lamang na gawin ito kung ito ay hindi sa loob ng isang bagay na kung saan ay may isang background ng salmon. Kaya tandaan na ang isang ito May background ng salmon, dahil ito ay klase ng kaakit-akit. Ngunit nais naming sabihin na cools lamang na espesyal na, wala sa klase ay nasa klase maganda, ay dapat magkaroon ng hangganan na iyon. Well, ano ang maaari mong gawin ay sa iyo Maaaring sabihin, .special, espasyo, .cool. At kung ano na ang ginagawa, kapag sa tingin mo tungkol dito, ay isa lamang ito sinasabi, OK, mahanap ako ng lahat ng bagay na tumutugma sa espesyal na. Pagkatapos ay sa loob ng mga tag na iyon, hanapin sa akin ang lahat ng bagay na ay malamig-lamig. Allison BUCHHOLTZ-AU: Kaya isa pang paraan na maaaring maging handa na upang isipin ang tungkol ito, nagdadala ito pabalik sa C, ay tulad lamang ang ideya ng saklaw. Kaya kapag mayroon kang ilang mga tagapili, tulad ng mga na namin na aming pinagsusumikapan para sa bago ito, ang iyong buong pahina ng web, ang lahat ng iyong HTML nasa loob ng iyong saklaw, tama? Ngunit kapag mayroon kaming mga relasyon magulang-anak, ito ay gaya ng kung ikaw ay paliitin down na kung saan naghahanap ka sa isang partikular na lugar, parang, tulad ng, naka-namin ang pagtingin sa loob sa halip ng isang partikular na pag-andar sa aming buong file. Madla: Kaya sa na sa isip, gagawin ito na mattered kung nagkaroon kami changed-- Allison BUCHHOLTZ-AU: Ang order? Madla: --the klase sa CSS sa .cool, espasyo, .special? Allison BUCHHOLTZ-AU: Oo, dahil pagkatapos na sasabihin, saklaw ito sa lahat ng bagay na may cool na, at pagkatapos ay tumingin sa kung ano ang has-- Ibig kong sabihin, tulad ng, sa kasong ito, Hindi sa tingin ko ay nagbago ito dito. Tomas REIMERS: Kung namin sinabi kung ano? Sorry. Allison BUCHHOLTZ-AU: Kung tayo saklaw ito sa palamig at pagkatapos ay tumingin para sa mga bagay sa labas ng espesyal na, magiging pareho, talagang. Tomas REIMERS: Kaya ito ay hindi magiging. Allison BUCHHOLTZ-AU: Ito gagawin hindi? Oh, oh na rin. Ako ay mali. Tomas REIMERS: Kaya ang dahilan ito ay different-- karaniwang mistake-- ay na sa ngayon lamang ang link ay cool, di ba? Sa tingin ko ang aking katanungan sa iyo guys ay, ano sa pahinang ito ay tumutugma sa mga .cool? Mayroong dalawang mga tag dito, tama? Alin ang isang ito at ang isang ito. Ang parehong tumugma cool. Wala pa gumagana. Kaya kung sinabi sa iyo, .cool, espasyo, .special, kung ano ang iyong pagpunta sa sabihin ay, sa loob ng mga tag na ito, ano ang mga espesyal na? Allison BUCHHOLTZ-AU: Hm. Iyon ay kung ano ang it-- karapatan. Dahil ito ay tulad ng isang bagay na lamang dito. Tomas REIMERS: Kaya pipili na wala. Allison BUCHHOLTZ-AU: Sapagkat may espesyal, hindi namin sa loob ng mga tag na ito dito. Tomas REIMERS: Yaong at mga. Madla: OK. Kaya mga tag mula sa mga inaabangan ang panahon iwa? Tomas REIMERS: Oo. Ba na magkaroon ng kahulugan? Paano ito ay isa lamang sinusubukan upang paliitin ang saklaw. Allison BUCHHOLTZ-AU: Oo. Sa tingin ko na marahil ang pinakamadaling paraan upang isipin ang tungkol dito. Tomas REIMERS: Kaya nakita namin na ito, at nakita namin na ito parehong tumugma sa espesyal na. At pagkatapos ay hinihingi namin, sa loob ng mga guys, kung ano ang cool? At sa loob ng isang ito, cool na isa ito. Sa loob ng isang ito, walang ay malamig-lamig. Kaya ito ay ang tanging tag na nananatiling. Allison BUCHHOLTZ-AU: Sapagkat cool na Nasa loob lamang ang mga tag ng doon. Tomas REIMERS: Mismong. At ano ang mga espesyal na sa loob ng mga? Wala. Ngayon, ano ang magiging ko sabihin ay kung walang espasyo, ka nagtatanong kung ano ang cool na at special-- o kung ano Kahanga at mga espesyal na, tama? Kung sinasabi mo .special.pretty, na katulad ng .pretty.special. Dahil kung ano ang pag-alis ng laman ay nagtatanong ay, kapag sinabi mong .special, ka nagtatanong, OK, kung alin ang mga espesyal? At pagkatapos ng mga, na alin ang mga kaakit-akit na din, kung saan ay ang parehong, grammar, bilang ng pagtatanong, kung ano ang maganda, at pagkatapos ay ng mga, ano ang mga espesyal na rin? Mag-right? Ito ay ang pagkakaiba ng kung ano ang sa loob ng kung ano ang. Madla: OK. Tomas REIMERS: Oo. Kahanga-hanga. Kaya sa na sa isip then-- Allison BUCHHOLTZ-AU: Sa tingin ko ang aming huling bagay ay (SA Fancy British accent) ang modelo na kahon. Tomas REIMERS: Ang box-- [CHUCKLES] Gustung-gusto ko ang paraan sabi ni Allison na iyon. Kaya ang modelo box na bagay. Allison BUCHHOLTZ-AU: Mayroon lamang isang kahon, kukunin ko na maging iyong modelo box. Tomas REIMERS: Kaya ipaalam makipag-usap tungkol sa na. Kaya ngayon na ginugol kami ng maraming ng panahon ng pakikipag-usap tungkol sa mga tagapili. Sa pamamagitan ng ngayon, ikaw guys ay marahil, tulad ng, Masters ng selectors-- alam mo na, kung paano eksaktong piliin ang nilalaman na Gusto mo upang manipulahin sa iyong screen. Kaya ngayon ang tanong ay, kung paano eksaktong maaari mong manipulahin ito? Kaya tingin ko ang pinaka-basic paraan upang isipin ang tungkol na ay, well, kung ano eksakto ay isang sangkap sa CSS? Ginugol kami ng maraming oras pinag-uusapan, ano ng tag, o kung ano ay ang pinakapangunahing representasyon ng tag na ito? Ang isang mahusay na paraan upang isipin ang tungkol sa iyon ay, kung ano ang hugis ay salmon? Ano ang hugis, tulad ng, ang salmon kulay ng background? Madla: Ito ay isang rektanggulo. Tomas REIMERS: Ito ay isang parihaba, tama? Allison BUCHHOLTZ-AU: Ay hindi isang kahanga-hangang gawa tanong. [Tawa] Tomas REIMERS: Hindi sinusubukan upang linlangin ka guys ito late. Kaya mayroon kaming ito parihaba. At ang mga tag ay isang p, i-right? Nang sa gayon ay nagbibigay sa amin ng mahusay na paniniwala na ang mga talata ay kinakatawan bilang isang parihaba, sa man lamang sa isip ng browser, na ito ay. Allison BUCHHOLTZ-AU: Ibig kong sabihin, mga browser ay karaniwang hugis-parihaba, kaya ang may katuturan. Tomas REIMERS: Ang ideya dito ay na ang lahat ng mga tag sa loob ng CSS ay kinakatawan bilang isang parihaba. At ang bawat parihaba ay may apat na mga bahagi ayon sa CSS, OK? Mayroon kang mga aktwal na nilalaman. Iyon ang dahilan kung saan naroroon ang teksto. Allison BUCHHOLTZ-AU: Siguro ang iyong larawan. Tomas REIMERS: Oo. Mayroon kang padding, na ilan lang uri ng white space. Pagkatapos mayroon kang isang hangganan. At pagkatapos ay mayroon kang margin, na ay white space sa labas ng na. Nang sa gayon ay ginagawang walang kahulugan ng sinuman, kaya kami ay pagpunta sa makipag-usap tungkol na para sa isang segundo. Kaya dito mismo, kung ano ang pagpunta naming gawin ay kami ay pagpunta upang lumikha ng ilang mga divs, OK? Mawalang galang na habang I-- Allison BUCHHOLTZ-AU: pakiramdam ko dapat naming ilagay ang isang cute na larawan sa. Tomas REIMERS: namin talagang dapat. Allison BUCHHOLTZ-AU: Pakiramdam ko ay tulad ng lahat ng tao maaaring makinabang mula sa isang cute na larawan, ang lahat. Tomas REIMERS: Maaari ba kaming lahat ng benepisyo mula sa a-- Madla: Oo, sigurado. Tomas REIMERS: OK, cool. Kaya dapat naming ilagay ang isang nakatutuwa larawan sa isang lugar. Allison BUCHHOLTZ-AU: Pakiramdam ko ay tulad ng isang Maaaring maging kapaki-pakinabang cute na kuneho sa ngayon. Tomas REIMERS: Oo naman. Allison BUCHHOLTZ-AU: Pagtatapos ng linggo. Magkaroon ng isang bagay adorab-- Tomas REIMERS: Paano labanan ang isang kuting? Allison BUCHHOLTZ-AU: Isang kuting ang gumagana, masyadong. Tomas REIMERS: Mahusay, dahil mayroong isang site para sa iyon. Ito ay tinatawag na PlaceKitten. Allison BUCHHOLTZ-AU: Iyon ay mahusay. Tomas REIMERS: Oo. Allison BUCHHOLTZ-AU: lang para sa, tulad ng, mga larawan ng placeholder sa iyong website. Tomas REIMERS: MM-Hm. Mayroon ding PlacePuppy. At mayroong PlaceBacon. Allison BUCHHOLTZ-AU: PlaceBacon? Talagang? Tomas REIMERS: Oh, hindi namin may internet access dito. Allison BUCHHOLTZ-AU: [GROANS] Kalunus-lunos. Tomas REIMERS: Kung hindi man, Gusto ko ipakita sa iyo guys kung paano upang ilagay ang mga larawan sa iyong website. Kami ay pagpunta sa subukan upang makakuha ng ito nagtatrabaho bago naming pumunta. Ngunit sa ngayon, hindi namin lamang pagpunta sa makipag-usap sa mga kulay pagkatapos. Gusto naming ilagay ang mga larawan ng kittens-- Allison BUCHHOLTZ-AU: ginawa namin. Tomas REIMERS: --the internet ni down para sa mga sandali pagiging. Kaya mayroon kaming dalawang divs, at nagpapaumanhin kami pagpunta sa bigyan ang mga ito ng dalawang mga id. Kami ay pagpunta sa tumawag ito "Unang" at "pangalawang." Kaya id = "muna." At kami ay pagpunta upang mabigyan sila ng dalawang kulay. Kaya paano pumili kami ng isang bagay may id ng "first"? Allison BUCHHOLTZ-AU: Dot o hash? Madla: Biglang. Tomas REIMERS: Biglang, perpekto. Biglang, hash, kahit anong we-- Allison BUCHHOLTZ-AU: Maraming mga bagay na dapat tawagan ito. Tomas REIMERS: OK. Kami ay pagpunta sa manirahan sa hashtag, at na kung ano ang iyong pupuntahan namin upang pumunta sa. OK? Allison BUCHHOLTZ-AU: Hashtag. Tomas REIMERS: Kaya unang hashtag iyon. Allison BUCHHOLTZ-AU: Kaya maaari mong tweet ang seminar-- hashtag CSS, hashtag cool. Tomas REIMERS: Hashtag mahusay. Allison BUCHHOLTZ-AU: Hashtag mahusay, oo. Tomas REIMERS: OK. Kaya mayroon kaming "unang" at "pangalawang." Kaya una sa lahat, kami ay pagpunta sa may ng isang kulay ng background ng pula. Allison BUCHHOLTZ-AU: Uh, colon. Tomas REIMERS: Yup. Allison BUCHHOLTZ-AU: Makikita ko ba ang iyong lugar-checker. Tomas REIMERS: Allison ay nakuha sa akin. Background-color ng blue-- Tomas REIMERS: Lila! Tomas REIMERS: Lila. Allison BUCHHOLTZ-AU: Oo. Ang aking mga paboritong kulay lilang, ang at hindi pa namin ginamit ito. Tomas REIMERS: Lila. Allison BUCHHOLTZ-AU: Lila. Na gumagana. Tomas REIMERS: Kaya hindi namin pagpunta sa may dalawang divs. Ang mga ito ay magiging ganap na walang laman. Dapat malamang kami na magkaroon ng ilang teksto. Kaya "unang" ay magiging "HELLO." At ang "pangalawang" ay say-- Allison BUCHHOLTZ-AU: Paalam. Madla: - "mundo." Kumusta, paalam. Allison BUCHHOLTZ-AU: Nakita ko ang mga ito sa konsiyerto ang iba pang mga linggo. Tomas REIMERS: Ang Beatles? Allison BUCHHOLTZ-AU: Para sa reals. Ang mga ito ay hindi na mahusay. Hindi ko gusto ito. Tomas REIMERS: Mayroon kaming "HELLO" at "Paalam." At muli, CSS ay hindi lamang kahanga-hangang, dahil kinikilala nito ang aming mga kulay. Hindi kailangang maging -alala na sila umiiral. Ginagawa nila. Allison BUCHHOLTZ-AU: umiiral ang mga ito. Tomas REIMERS: Kaya CSS sa tingin ko ay 255 salita upang makipag-usap tungkol sa kulay. Kung maaari mong isipin ang isang kulay sa labas mga 255, tulad ng, ako ay maging impressed. Allison BUCHHOLTZ-AU: Oo. Sa tingin ko na maaaring mayroon ka guys lamang dumating sa kanan pagkatapos. Tomas REIMERS: Kaya dito, makikita mo na mayroon kami ng dalawang mga kahon karapatan sa tuktok ng bawat isa, tama? HELLO at paalam. Allison BUCHHOLTZ-AU: Walang puwang sa pagitan. Lang nila smooshed karapatan sa tuktok ng bawat isa. Tomas REIMERS: Kaya ang unang bagay na Sa tingin ko dapat naming makipag-usap tungkol sa ay hinahayaan ka din na say-- ng oo. Kaya ay kumakatawan sa CSS ang mga ito bilang isang uri ng mga kahon. At bilang mga kahon, ang mga ito ng nilalaman. At ang nilalaman sa ngayon ay isang uri ng ang HELLO o ang paalam at iyon ito. OK? Kaya isa sa mga unang bagay na Maaari gawin ay maaari kang magdagdag ng padding. Padding sabi kung magkano ang puwang dapat itong umalis sa bawat panig. Kaya sabihin nating gusto kong sabihin 10 pixels sa bawat gilid. At ako ay mag-aral na sa isang segundo. Allison BUCHHOLTZ-AU: Ang lahat ng mga bagay na ito dito ay magiging halos sa pixels para sa natitirang bahagi ng seminar. Ikaw ay pagpunta upang makita na ito ay may ilang espasyo sa paligid nito, tama? Kaya kung ano ang hindi mo nakikita dito ay mayroong ito invisible uri ng padding sa bawat gilid, na sinasabi, tulad ng, OK, mayroon kang ang iyong kahon ng content-- Allison BUCHHOLTZ-AU: Gusto mo upang hilahin na lamang ang siyasatin elemento? Tomas REIMERS: Oo, iyon ay isang magandang ideya. Allison BUCHHOLTZ-AU: Gayundin, nakahanap ako na siyasatin ang elemento ay isang mahusay na paraan upang malaman kung ang isang bagay ay pagpunta mali, isang bagay na hindi inaasahang mangyayari, inspecting ang mga tag at makita kung ano ang ito ay gaya-o-overwrite ay kapaki-pakinabang. Tomas REIMERS: Kaya hindi ako sigurado kung maaari makita ang kulay na ito sa iyo guys. Maaari mo? Makikita mo ang padding sa uri ng gilid. At pagkatapos mong makita ang aktwal na nilalaman na kulay bughaw, tama? Kaya iyon ang napaka Mga pangunahing kaalaman ng modelo box. Mayroon kang nilalaman. Pagkatapos ay mayroon kang padding. Madla: Bakit hindi ka lamang gamitin ang kahon sa loob the-- Allison BUCHHOLTZ-AU: I-right. Dahil lang sa ito pagpili ngayon ang elemento. Tomas REIMERS: Yup. Iba pang mga bagay. Kaya ipaalam makipag-usap tungkol na padding utos para sa isang segundo. Kaya sa CSS, sukat kailangan upang magkaroon ng isang yunit. Kaya mayroon ka munang ang halaga. Kaya sa kasong ito, sinabi namin ang 10. At pagkatapos ay ang kasunod na namin ang sinabi ay pixel, px. Iba pang mga maaaring mayroon ka ay mga bagay tulad ng sentimetro, pulgada. Maaari mong gawin ang mga bagay gusto, ano ang 10 pulgada? At ito ay magiging katawa-tawa. Allison BUCHHOLTZ-AU: Oh, batang lalaki. Madla: Whoa. Tomas AT Allison: Oo. Tomas REIMERS: Kaya na ang lahat ng padding. Pupunta ako sa bumalik sa pixels. Allison BUCHHOLTZ-AU: Mga pixel may posibilidad na magkaroon, tulad ng, sa pamantayan. Kapag tumingin ka sa maraming mga website, karamihan ay gumagana ang mga ito sa pixels. Tomas REIMERS: Kaya ka pagpunta upang makita ang alinman pixels-- ang iba pang mga nakikita mo ay em, na isang em ay katumbas ng taas ng font na kasalukuyan mong ginagamit. Allison BUCHHOLTZ-AU: mm. Tomas REIMERS: Ito ay isang mahusay na paraan upang sabihin, tulad ng, gusto kong ng maraming espasyo bilang aking font ay pagkuha. Allison BUCHHOLTZ-AU: Hindi mo ba alam na. Matuto ka ng isang bagay bagong araw-araw. Tomas REIMERS: Mayroong isang maraming mga sukat sa CS. Iminumungkahi ko mong tingnan ang mga ito. Para sa lahat ng iyong mga kaso, sa tingin ko pixels ay dapat sapat. At hindi rin sila kung ano na iyong pupuntahan upang makita sa karamihan ng mga halimbawa tapos online. Kaya makikita iwanan namin ito sa pixels. Maaari ka ring, dapat kong say-- kaya padding set ng lahat ng mga paddings. Maaari mo ring gawin ang isang bagay tulad ng "Padding-top" upang lamang set-- Allison BUCHHOLTZ-AU: Baka susuriin namin ang aming "HELLO" pabalik. Tomas REIMERS: --to-set lamang ang padding sa itaas at wala ng iba pa. Kaya ang apat na utos ay padding-top, padding-bottom, padding-left, at padding-right. Allison BUCHHOLTZ-AU: Tulad Gusto mong asahan para sa isang kahon. Tomas REIMERS: Oo. Wala masyadong mabaliw doon. Ba na magkaroon ng kahulugan? Kaya na padding. Pupunta ako upang i-set ang lahat ng ang paddings bumalik sa 10. At pagkatapos ay ako pupunta sa paglipat sa hangganan. Kaya kung ano ang hangganan ay ay hangganan ang isang kakatwang mga utos. Ito ay tumatagal ng isang uri ng tatlong bagay nang sabay-sabay. Kaya ang una ay kung gaano kalaki ang mo gusto mo itong maging bilang isang pagsukat. Muli, tanging gumagamit ako ng pixel. At ang huling bagay ako dapat idagdag sa mga sukat ang isang bagay na hindi kailangan ng yunit ay 0. Ito ay talagang tama upang mabigyan 0 isang yunit, dahil 0 ay 0 kabuuan pulgada, pixel, sentimetro, kahit anong. Ito ay nangangahulugan na ang lahat lamang 0, tama? Kaya una mong bigyan ito ng pagsukat. Pagkatapos mong bigyan ito ang estilo. Kaya Pupunta ako sa sabihin ang "matatag." At kami makipag-usap tungkol sa kung ano ang ibig sabihin nito ay. At pagkatapos ay sa wakas, bigyan mo ito ng isang kulay. Kaya Pupunta ako sa sabihin ang "itim." At ang mga ito ay ang lahat ng bagay hindi namin ngayon nakikita, maliban sa mga estilo, ngunit kami ay makipag-usap tungkol sa na. Kaya nakita mo guys sukat, at iyong nakita na kulay. At ano ang mangyayari ay na makuha namin ito gandang itim na hangganan sa paligid nito, tama? Ikaw guys makita kung paano namin ginawa iyon? Madla: Oo. Tomas REIMERS: Cool. Kaya kung ano ang na? Kaya una sa lahat, isang pixel. Iyan ay hindi na dapat patunayan sapat, tama? Tulad ng, ito ay isang pixel kapal. O magiging isang pixel, ngunit ako ay naka-zoom in, kaya kaunti higit pa kaysa doon. Allison BUCHHOLTZ-AU: At kami ay ito resolution TV katawa-tawa. Tomas REIMERS: Oo. Maaari mong gawin itong mas malaki, mas maliit, kahit anong. Kaya narito ang isang dalawang-pixel na hangganan. Makikita mo ito nang dalawang beses bilang makapal. Susunod na bagay na mayroon kang ay kulay. Iyan ay hindi kawili-wili. Hindi ako pupunta upang makipag-usap tungkol sa na, talaga. Allison BUCHHOLTZ-AU: Ngunit ang estilo Maaaring maging lamang ng kaunti kawili-wili. Tomas REIMERS: Oo. Kaya istilo, may mga ilang mga na ako makita ginamit karaniwang. Solid unang isa sa tabi ng isang tao may mga tuldok, at dashed huling ng isang tao. At dito ay puno. Makikita mo na ang mga ito ay ng grupo ng mga tuldok, i-right? Ang isang mahusay na paraan upang uri ng makakuha ng magandang border pagpunta, gitling din medyo popular. Allison BUCHHOLTZ-AU: At pagkatapos ay siyempre, ako sigurado maraming iba pang mga mga istilo na maaari kang makakuha ng. At mayroon kaming isang mahusay na hanay ng mga link sa dulo para sa iyo guys sa uri ng bumasang mabuti at tingnan ang higit cool na CSS. Tomas REIMERS: At pagkatapos ay ang huling bagay, kami ay pagpunta sa makipag-usap tungkol sa mga modelong na kahon tunay mabilis. Oh, at pagkatapos ay hangganan, nang eksakto tulad ng padding, mayroon ka ring mga bagay tulad ng hangganan-kaliwa, kanang border, border-top, border-bottom, na nagbibigay-daan sa iyo upang makakuha ng sa isang tiyak na hangganan. Kaya narito lamang ang hangganan kaliwa natukoy. Sinusuportahan ba na may katuturan? Allison BUCHHOLTZ-AU: Ito ay isang cool na paraan upang bigyang-diin ang mga bagay o magdagdag mga linya sa pagitan ng iba't ibang mga elemento. Tomas REIMERS: Oo naman. Kaya na ang aming mga hangganan. At margin huling ng isang tao. Tulad ng padding margin ng maliban sa hindi ito within-- Allison BUCHHOLTZ-AU: Ito ay hindi sa paligid ng iyong elemento pero sa totoo paligid ng buong kahon na na-namin ang nakakakita. Tomas REIMERS: Oo. Sinabi nito Allison perpektong. Ito ay hindi, tulad ng, sa loob ng iyong elemento, ito ay sa paligid ng buong box. Iyon ay nangangahulugang ang mga bagay tulad ng background ay hindi nalalapat dito. At isa lamang ang sinasabi, tulad ng, hindi ko nais anumang bagay sa ganitong karaming espasyo para sa akin. Kaya tulad dito mayroon kaming isang margin ng 10 pixels. Kaya wala sa loob ng 10 pixels Dapat na susunod sa akin. Iyon ang uri ng nito puwang ngunit uri ng hindi. Kaya iyon ang napaka Mga pangunahing kaalaman ng modelo box. Ba na magkaroon ng kahulugan? Mahusay, cool. Allison BUCHHOLTZ-AU: Kahanga-hanga. Kaya ngayon tingin ko namin lamang Mayroon aming cool na mapagkukunan na isasaalang-alang namin sa iyo guys sa pamamagitan ng masyadong mabilis. At kami actually-- na rin, kailangang kami pa internet? Tomas REIMERS: Sabihin makita kung ang maaari kong buksan up-- hayaan makita lang sa akin kung ako maaaring makakuha ng mabilis na internet habang Allison uusap tungkol sa anumang bagay Gusto ni na makipag-usap tungkol sa Allison. Allison BUCHHOLTZ-AU: Kaya basically-- gagawin ko hindi malaman kung ano pa ang maaari kong sabihin sa puntong ito. Ngunit ang mga ito ay ilang talagang magandang mga mapagkukunan. Ito ang mga iyon Tomas at nagamit ko at tayo talaga ginagamit upang Prep para dito. W3Schools ay isa na kayo Dapat na nakita guys bago. Inirerekumenda namin ito para sa isang maraming bagay sa CSS. Alam ko inirerekomenda ko ito sa ang aking mga seksyon sa lahat ng oras. Isa sa mga magagandang bagay ay tumutulong ito nagpapahintulot sa iyo na uri ng gulo sa CSS at makita ang mga pagbabago agad sa ito, tulad ng, i-double window tingnan na ito ay may. Kaya hindi mo kailangang mag-alala tungkol sa set up ng iyong sariling mga web page, o pagse-set up vhost sa iyong lokal na appliance at lokal na host, at pagkuha ng lahat ng mga bagay-bagay na gumagana. Ito ay naka-embed sa loob ng pahinang karapatan. At ito ay may mga maliliit mga aralin na maaari mong pumunta sa pamamagitan upang matuto higit pa tungkol sa mga tagapili, o matutunan ang tungkol sa pagpapatakbo ng iyong font, o isang background, o isang imahe. At mayroon kang mga biglaan resulta na iyong Hindi mo na kailangang gawin ang anumang iba pang mga prep trabaho para sa. Kaya mahal ko W3Schools. Ito ay hindi kapani-paniwala. Gumagana ito? Tomas REIMERS: Oo. Hindi, hindi ito. Gusto mo sa akin upang subukan at i-restart ang aking computer? O nais naming to-- Allison BUCHHOLTZ-AU: Ibig kong sabihin, na rin, ito ay magiging online na rin. Ang lahat ng mga slide ay magiging online. Kaya masidhing kong inirerekumendang lamang ginagawa ang mga. Ito ay mahusay na bilang lamang tulad ng isang impostor sheet. Ito ay lamang ang lahat ng mga pangunahing utos na mayroon ka. Ito ay mahusay na kapag ikaw ay unang nagsisimula sa iyong website. Dahil siguro hindi mo gusto Gusto upang makapunta sa lahat ang tunay na kutuhin magaspang disenyo-ng mabibigat na bagay. Kailangan mo lamang i-format ito sa paraang na uri ng saysay at kalooban gawin para sa ngayon. At kung mo ba talagang upang makapunta sa ito, alam ko ito ay, tulad ng, isa sa Paboritong mga sanggunian Tomas iyon. Kami ay gumagamit ng ito sa prep, at ito ay hindi kapani-paniwala. Ito ang Developer mula sa Mozilla. Tomas REIMERS: Kaya Mozilla ay ang mga tao na gumawa ng Firefox. At ito ay lamang ang kanilang sariling mga developer sanggunian, na sa palagay ko ay kahanga-hanga. At ito ay isang kahanga-hangang listahan ng mga mapagkukunan. Kaya have-- namin Allison BUCHHOLTZ-AU: At pagkatapos ay ang huling tala ay kapag sinusubukan mong -disenyo ng iyong website, gumuhit ng inspirasyon mula sa mga bagay na sa tingin mo ay kaakit-akit. Inspecting ang elemento, inspecting ang source code ay maaaring maging napaka-kapaki-pakinabang para sa pagsubok upang malaman kung kung paano Estilo iyong sariling website. Madalas, nararamdaman kong ang pinakamahusay na paraan, bukod sa pag-eeksperimento, ay upang tumingin lamang sa mga bagay na medyo. Tingin ko ito ay talagang mahirap lamang uri ng desenyo ng mga bagay sa iyong sariling, lalo na sa simula. Kaya mangyaring tumingin sa mga website na masiyahan ka naghahanap sa. Alamin kung bakit ang mga ito sumasamo sa iyo. At pagkatapos ay huwag mag-atubiling subukan at magtiklop iyon. Tomas REIMERS: I-right. Kahit na tulad ng mga website tulad nito, maaari mong makita ang mayroong tiyak isang div sa itaas. At pagkatapos ay mayroon kang isa pang div sa loob dito, na CSS mahusay. At pagkatapos ay mayroon kang isang bungkos ng mga link dito. Kung mo ba talagang siyasatin lamang mga elemento, maaari mong ayusin ng simulan upang makita kung ano ang ginagawa ng mga website ganito ang hitsura, at kung paano maaari ako muling likhain na kung Nais kong. Ba na magkaroon ng kahulugan? Kaya mayroon lamang namin ang tatlong minuto ang natitira. Kaya katanungan? Anumang ng mga ito? Oo. Madla: Para sa mga kulay parihaba kung paano gagawin, mo have-- kung hindi mo ito gusto pagpunta sa buong pahina, maaaring ginawa mo ito tumawid lamang kalahati ng mga pahina o lamang ng teksto? Tomas REIMERS: Oo, talagang. Kaya hayaan mo akong makita talaga. Mayroon akong dalawang mga ideya. Kaya una sa lahat, mo Maaari ring gamitin percents. Madla: talaga? Allison BUCHHOLTZ-AU: Kaya ang isang bagay upang hanapin ang kaugnay na pagpoposisyon. Ito ay isang bagay na namin walang oras upang makakuha ng in sa, ngunit ito ay isang bagay ko talagang inirerekumenda sa iyo guys check out. Tomas REIMERS: Kaya percents. At makita kung paano namin ginawa ito % 50 lang ng lapad? Allison BUCHHOLTZ-AU: Kung talaga alam ang bilang ng mga pixel, maaari kang maging mas tumpak na paraan na. Maaari mong magbiyolin sa paligid dito. Ngunit 50%. Kung kami ay upang baguhin ang laki ng aming mga browser, Gusto ito gawin itong mas maliit. Tomas REIMERS: Well, ito ay talaga 50% ngayon, sa tingin ko. Ito ay 50%, at pagkatapos ay ang margin ay naidagdag na sa iyon. May ng maraming quirks CSS. Kaya ngayon ito ay 50% ng lapad ng pahina. Ngunit tandaan na mayroon kang 10 pixels kinuha mula sa bawat panig. Kaya kung ikaw ay upang ilipat ang laban kaliwang gilid ng browser, pagkatapos ay hitsura nito ay magiging tulad ng 50%. Muli, tulad ng sinabi ko, CSS maaari maging ng maraming hula-at-check. Tulad ng, sa tingin mo ng isang bagay ay pagpunta sa kumilos sa isang paraan, ngunit behaves ito ng isang ganap na kakaiba paraan. Allison BUCHHOLTZ-AU: At makakuha ka ng mas mahusay na lamang, at makakuha ka lamang ng mas mahusay na Swersey para sa ito bilang ilipat mo sa kahabaan. Tomas REIMERS: At ay makakakuha ng mas masahol pa at mas masahol pa. Kaya talagang isang lahi lamang. Allison BUCHHOLTZ-AU: Iyon ang sobrang nagbibigay-pag-asa. Gusto naming ang mga ito upang i CSS. Tomas REIMERS: CSS ay kahanga-hanga. Tandaan na iyon. Iba pang mga tanong? Allison BUCHHOLTZ-AU: Ang isang bagay. Ano pa? Ayos. Tomas REIMERS: Kahanga-hanga. Allison BUCHHOLTZ-AU: Well, kung guys may anumang mga katanungan sa ibang pagkakataon, Ikinalulungkot namin palaging magagamit bilang bawat dati. Maaring makita ang ilang mga sa atin para sa pangwakas na proyekto at talagang sa hackathon. Tomas REIMERS: Oo naman. At sa patas. Allison BUCHHOLTZ-AU: At sa patas. Oh. Tomas REIMERS: Tumingin inaabangan ang panahon na Nakikita sa lahat ng iyong awesome-- Allison BUCHHOLTZ-AU: Susubukan naming makita lahat ng iyong mga kahanga-hangang mga website na magiging maganda. Tomas REIMERS: maaari mong palaging makita, tulad ng, mga website na nagkaroon, tulad ng, ang mahusay na CSS at pagkatapos ay tulad ng mga taong hindi subukang gawin CSS. Allison BUCHHOLTZ-AU: Gayundin, ang isa pang bagay, isa pang bagay upang tumingin sa ay Bootstrapping. Kaya Bootstrap ay napakahusay. Tomas REIMERS: Google na kung you-- Allison BUCHHOLTZ-AU: Google ito. Ito ay hindi kapani-paniwala. Magugustuhan mo ito. At ngayon na ikaw ay may pangunahing pag-unawa ng CSS, Makikita ito gumawa ng maraming higit pang mga kahulugan. Kahanga-hanga. Salamat, guys. Tomas REIMERS: Salamat sa iyo kaya magkano.