>> [MUSIC Playing]
ALLISON BUCHHOLTZ-AU: Pra ne jemi në thelb vetëm duke shkuar
për të ju jap një i lodhur e CSS, sepse ne e dimë
se ajo nuk ishte e mbuluar në të gjitha seksionet.
Dhe ne me të vërtetë dëshironi të bëni të sigurtë që ju të djema keni këtë mjet në dispozicionin tuaj,
sepse ajo ka aftësinë për të bërë faqet e internetit tuaj duken shumë prettier.
>> Dhe nëse ju jeni ndërtimin e një faqe interneti, atëherë ju ndoshta dëshironi të bëni atë goxha.
Unë do të thotë, ju nuk keni për të, por unë do të sugjeroj atë. [Qesh]
Nëse ju doni përdoruesit të përdorin atë, ju mund të duan të bëjnë atë një pak [e padëgjueshme].
Pra, ne jemi duke shkuar për të përpiqen dhe të ju jap vetëm disa mjete themelore dhe të kuptuarit,
kështu që kur ju shkoni jashtë dhe ju jeni hulumtimin gjëra për CSS,
ajo nuk është përfunduar dërdëllisje, si CSS ndonjëherë që të jetë.
>> Tomas Reimers: Po.
Allison tha atë mjaft mirë.
Kështu që unë mendoj se gjëja e parë i jemi duhet të fillojë me të është ajo që është CSS?
Pra, CSS është awesome.
CSS--
>> ALLISON BUCHHOLTZ-AU: Kjo është Emri i seminarit tonë.
>> Tomas Reimers: Po.
Është me të vërtetë e rëndësishme që ju e kuptoni që nga atëherë.
Nëse ju vetëm të marr me vete një të tillë gjë, kjo është se CSS nëse awesome.
Dy është CSS qëndron për Cascading Style Sheets.
Pra, në thelbin e vet, CSS është një fletë stil, do të thotë
kjo ju lejon të stilit një web faqe.
Dhe pastaj çfarë kjo do të thotë, kjo është një mënyrë për të shtuar stilin për faqet e internetit tuaj.
Pra me stil, ne do të thotë çdo gjë që nuk është structural--
kështu që gjëra të tilla si ngjyra, sfond images, kufijtë, si, mbushje,
kufijtë.
Ne do të flasim për çfarë të gjitha që do të thotë në një grimë.
>> Pra, ne kemi shkuar vetëm përpara dhe hapi të dy nga ata deri në gedit.
Pra, kjo është index.html.
Dhe kjo është main.css.
Pra main.css ka asgjë.
ALLISON BUCHHOLTZ-AU: Nuk ka stil deri tani.
Tomas Reimers: Asnjë.
Dhe si ju do të shihni, është e një vend me të vërtetë të shëmtuar.
ALLISON BUCHHOLTZ-AU: Është vetëm plain.
Tomas Reimers: Po.
Yeah, kjo nuk është e shëmtuar, kjo është vetëm minimalist.
Dhe atëherë këtu kemi index.html.
Dhe kështu për një të shpejtë radhitje e HTML, Allison,
ju doni të vetëm të flasim për faqe?
>> ALLISON BUCHHOLTZ-AU: Po.
Pra, natyrisht, ne kemi HTML tonë tag, i cili vetëm skedar HTML emrat.
Ne kemi header tonë këtu, me CSS Awesomeness, which-- në qoftë se ju shkoni përsëri.
Ku është ai?
>> Tomas Reimers: Oh.
Yeah, ju mund të shihni.
ALLISON BUCHHOLTZ-AU: Dhe vini re header
është ky tab header drejtë deri këtu.
Dhe pastaj "Hello, bota!" është teksti që ne kemi vetëm
shfaqur në web faqe, të cilat is-- kthehem.
Back.
E cila është vetëm në trupin tonë here-- të plain text.
Gjithashtu, një gjë për të vini re, në qoftë se ju shikoni këtu,
Tomas kaloi up këto dy nga rrëshqitje tonë.
Pra, për aq kohë sa ju keni të gjithë tre nga këto, ju jeni mirë.
Ata mund të jenë në çfarëdo mënyrë ata duan.
Çfarë është më e rëndësishme është vetëm që ju keni secili nga këto tre gjëra.
>> Tomas Reimers: Best.
Shto një lloj doc?
ALLISON BUCHHOLTZ-AU: Po.
Tomas Reimers: Po.
Ftohtë.
ALLISON BUCHHOLTZ-AU: Me sa duket, mics e mi nuk më pëlqen mua.
Tomas Reimers: Oh, na japin një sec vetëm ndërsa Allison ndizet nga mic e saj.
Pra, vërtet.
Pra, ne kemi faqen tonë kryesore.
Kjo është lloj i unstyled.
Ne nuk kemi shumë.
Ne vetëm duhet thelb tekstin.
Ne kemi fletë stil.
Ne kemi titullin.
Pra, vetëm të zhveshur-pa kockë komponentëve të bëni një faqe interneti.
>> Pra nga atje, le të flasim për atë që është CSS
dhe ajo që duket si dhe të gjithë se.
Pra, për that--
ALLISON BUCHHOLTZ-AU: Mbrapsht në slides.
Tomas Reimers: Kthehu tek slides.
Dhe Allison mund të marrë përsipër.
>> ALLISON BUCHHOLTZ-AU: Woo.
OK.
Pra, në dosjen tuaj CSS, ju jeni do të ketë
shumë nga këto gjëra quajtur selectors.
Kjo do të jetë vetëm Baza e dosjen tuaj CSS.
Është vetëm do të jenë të shumë dhe shumë e këto.
Pra përzgjedhës.
Kjo është vetëm anatomi përgjithësi.
Ne jemi duke shkuar për të shkuar nëpërmjet shembuj, sepse në qoftë se ju kurrë nuk djema
shikuar seksionin tim, unë ndihem si gjëra në abstrakt
vërtetë nuk ka kuptim.
Ajo gjithmonë i ndihmon për të parë shembuj.
>> Pra, ne kemi disa përzgjedhës.
Kjo do të jetë një identifikues për ajo që ne duam stil për të aplikuar për të.
Dhe atëherë ne mund të kemi ndonjë vendosur i rregullave dhe vlerave.
Pra selektorë që ju mund të shihni mund të jetë diçka si trup,
ose paragraf me P, ose header, ose çfarëdo,
çdo gjë që ju doni tags tuaj HTML që të jetë.
>> Pra në këtë rast, ne kemi trupin.
Dhe ne kemi disa rregull, që kjo korrespondon
për çfarë stilin tuaj vlen për të.
Pra në këtë rast, ne kemi ngjyra e sfondit dhe peshë font.
Pra, kjo do të ndryshojë sfond i ndonjë gjë
brenda çdo tag trupit të dosjes tonë HTML.
Dhe ajo do të jap ajo kjo vlerë dritë blu.
>> Kështu ajo do të bëjë sfond blu dritë.
Dhe pastaj çdo gjë brenda trupit është do të ketë një peshë font të guximshme.
Pra, kjo është vetëm do të guximshme të gjithë tekstin tonë.
Dhe kjo është vetëm një përzgjedhës.
Por ju mund të ketë shumë e shumë prej këtyre.
Dhe si ne jemi duke shkuar për të treguar më vonë, pak më shumë në mënyrën se si
që vepra dhe më shumë shembuj atje.
Çdo gjë që ju doni të shtoni?
>> Tomas Reimers: Jo.
Allison mori atë.
Ne jemi vetëm duke shkuar për të prerë deri një shembull këtu në faqen tonë shembull.
Pra, le të vërtetë të marrë këtë.
Është i përsosur.
Kështu që unë jam vetëm do të kopjoni dhe ngjisni se e drejta në dosjen tonë main.css.
Dhe unë jam duke shkuar për të shpëtuar atë.
Dhe pastaj ne do të drejtuar atë.
Pra shënim anë, një nga shumica e gjëra frustruese
është në qoftë se ju nuk ruani një skedar, dhe atëherë ju, si, rifreskoni faqen,
dhe si, pse nuk është Ndryshimi ndodh?
Kjo ndodh.
Pra, këtu kemi parë që kemi bërë tonë website një sfond të lehta blu
dhe disa tekst bolded.
>> Unë gjithashtu duhet të përmendim, në qoftë se ju djema keni pyetje në lidhje me ndonjë gjë
ne jemi duke bërë, ju lutem mos të lirë të na ndalojnë dhe na pyesin.
Ne jemi plotësisht të gatshëm me një arë tjetër pyetje.
>> ALLISON BUCHHOLTZ-AU: Natyrisht, me CSS, çdo gjë ndërton mbi veten.
Pra, nëse një gjë nuk e bën kuptim tani, ne
nuk duan që të ju bog poshtë më vonë.
>> Tomas Reimers: Pra, le të lloj pres këtë.
Pra, ju doni të filloni me përzgjedhës këtu?
>> ALLISON BUCHHOLTZ-AU: Po.
Si unë isha duke thënë më parë, trupi është vetëm përzgjedhës tonë këtu.
Pra, nëse ne do të shkojmë përsëri mbi të ah tonë index--.
>> Tomas Reimers: Cili unë sapo mbyllur.
Më jepni një të dytë.
Pra dokumentit, Open, index.html.
ALLISON BUCHHOLTZ-AU: Best.
Pra, në qoftë se ju të vini re këtu, ne kanë këto tags trupit, e drejtë?
Pra përzgjedhës vetëm korrespondon tags që ne jemi duke folur për.
Pra trupin e drejtë këtu.
Pra, ajo që ne jemi duke thënë është everything-- mund të kthehemi?
Uroj unë mund vetëm si të prekur ekranin.
Ajo do të jetë aq shumë pije freskuese.
>> Pra, çdo gjë brenda atyre tags trupit, që kemi parë
ishte vetëm, si, teksti, dhe trupi në përgjithësi
i referohet, si, sfond.
Nëse ju dëshironi ndonjëherë për të të ndryshuar sfond,
që do të jetë në një tag trupit.
Vetëm i ka këto rregulla aplikohen për ta.
>> Pra, në qoftë se ne ishim për të shkuar në index.html and-- në të vërtetë,
mund të kemi diçka jashtë trupit?
Nëse do të kishte, si, një futboll apo diçka, ajo nuk do të zbatohet për këtë.
Por çdo gjë brenda këto tags trupit është duke shkuar
për t'u prekur nga ky organ përzgjedhës që ne kemi bërë.
Pra, nëse ju do të tipit diçka tjetër there--
>> Tomas Reimers: Le të përzënë atë shtëpi.
Pra, në qoftë se kemi pasur një div-- kështu që është e vetëm një tag ju mund të keni.
Unë jam duke shkuar për të mbyllur atë.
Ose le të bëjnë këtë një paragraf.
Pra p qëndron për paragrafin.
Dhe brenda këtij paragrafi.
Dhe atëherë unë them: "Ky është teksti".
Ftohtë.
Dhe atëherë unë e bëri ky rregull zbatohet për a paragrafin vend të trupit.
Ju do të shihni se si kjo vlen vetëm për paragrafi i sapo formuar, e drejtë,
jo të gjithë gjë.
A ka kjo kuptim?
>> ALLISON BUCHHOLTZ-AU: Pra, kjo është e gjitha organ,
por tani përzgjedhës tonë vetëm korrespondon me paragrafin.
Pra, ne vetëm duhet të guximshme dhe blu për këtë paragraf të veçantë,
sepse kjo është e vetmja gjë që është i mbyllur brenda etiketë p.
>> Tomas Reimers: ka që e bëjnë kuptim lloj e si gjërat encapsulate gjëra të tjera?
ALLISON BUCHHOLTZ-AU: Gjithashtu, vetëm për të thënë, si, një nga mënyrat më të mira
për të vërtetë të marrë të rehatshme me CSS është të bëjë vetëm gjëra të tilla si kjo,
vetëm try it out.
Është shumë e thjeshtë për të tipit diçka jashtë, goditi Refresh, dhe shikoni se çfarë ndodh.
Dhe si me më CS, eksperimentimi mund shpesh
të çojë në një shumë më të mirë të kuptuarit intuitiv.
Edhe më shumë se ne vetëm, si, duke folur për ju.
>> Tomas Reimers: Absolutisht 100% dakord në këtë pikë.
Pra, në qoftë se ne të kthehemi në këtë, le të fillojë dissecting pikërisht ajo që këta të dy të bëni.
Pra, ne kemi dy rregulla për këtë.
Pra, e para është ngjyra e sfondit.
Dhe ju të shihni se ne kemi vendosur atë barabarte me nje vlere, blu lehta.
>> Pra në CSS, CSS është lloj e shumë e lirshme për mënyrën se si
ju jeni i lejuar për të përcaktuar ngjyrën.
Kështu që ju mund të përcaktojë ato me emër.
Ju gjithashtu mund të bëni diçka si "kuqe".
Dhe pastaj në qoftë se ne të kthehemi në këtë, ju do të shihni se sfondi është i kuq.
Ju gjithashtu mund të merrni really-- unë mendoj ty mund të merrni mjaft kreative me këtë,
nuk mund të ju?
>> ALLISON BUCHHOLTZ-AU: I mendoj se ju mund të përdorni magji.
Nuk mund të ju?
>> Tomas Reimers: Po.
Kështu që ju mund të përdorni magji.
Por unë jam duke menduar emri-i mençur.
A nuk janë atje?
ALLISON BUCHHOLTZ-AU: Ju mund të bëni mjaft pak.
Shumë e shumë si shumica e ngjyrave që ju mund name-- si, unë mendoj salmon është një.
>> Tomas Reimers: Ne jemi salmon gonna të përpiqet.
ALLISON BUCHHOLTZ-AU: I mendoj chartreuse është në atje.
Tomas Reimers: Po.
Shih?
Kështu që ju mund të merrni mjaft kreative.
>> ALLISON BUCHHOLTZ-AU: Ju mund të merrni mjaft kreative.
Si, në qoftë se ju mund të mendoni Emri i ngjyrës, është ndoshta në atje.
Nëse jeni të vërtetë dëshironi gjobë detaje, ju mund të shkoni magji.
>> Tomas Reimers: Po.
Pra heksadecimal.
Nëse ju djema mbani mend këtë përsëri nga PSET tuaj të vjetër, Image Recover,
ju djema dashur të merren me këto vlera magji.
Dhe lloj të radhitje asaj që është, magji ka tri vlerat e ruajtura në të.
Pra, kjo është në grupe prej dy increments.
Dy të parat përfaqësojnë vlerën e kuqe.
Një i dytë paraqet Vlera e gjelbër.
Dhe e fundit është blu?
>> Pra FF ndodh për të përfaqësuar një heksadecimal 255.
Pra, ju keni 255 kuqe, 255 e gjelbër, dhe 0 për blu.
Dhe vlerat variojnë midis 0 dhe 255.
>> AUDIENCA: E drejta.
Pra, në thelb, ne mund të kërkoni internet për çdo ngjyrë që duam,
dhe për të identifikuar faktikisht-njohur ngjyra spektrit combo,
dhe pastaj ne mund të vënë atë në?
ALLISON BUCHHOLTZ-AU: Pikërisht.
Pra, ju keni kontroll të shumë e shumë të plotë mbi ngjyrat që ju dëshironi brenda CSS.
A do të flasim për imazhe sfond më vonë?
Apo ne duam të bëjmë atë?
>> Tomas Reimers: Po.
Absolutisht.
Pra, së pari, vetëm për të treguar se të kuqe dhe të gjelbër është e verdhë.
Dhe në qoftë se keni nevojë për disa për ndihmë të gjetur këtë, ju
mund Google diçka si "mbledhës ngjyra."
ALLISON BUCHHOLTZ-AU: Oh, është kaq i mirë.
Unë dua Color Picker.
>> Tomas Reimers: colorpicker.com është një shembull i mirë.
Dhe këtu, ju do të shihni se ju keni një mbledhës të plotë ngjyra Photoshop-si.
>> ALLISON BUCHHOLTZ-AU: Mm-hm.
Gjithashtu, gjërat e ftohtë jeni ju mund të gjenerojnë skemat ngjyra
kështu që ju nuk e keni, si, përleshje ngjyra.
Tomas Reimers: Dhe pastaj këtu është vlera magji deri këtu.
Kështu që ju gjithmonë mund të gjeni në internet në thelb vende për të marrë vlerën magji nga.
Kjo nuk është lloj i vetëm që, si, ne shoh ngjyrat e botës në numër.
Është më shumë se ne të shkoni në internet dhe për të gjetur se çfarë ngjyre ne duam,
dhe pastaj të marrë numrin poshtë.
Për shkak se ajo është vetëm një të vërtetë e lehtë mënyrë për referencë gjërat në CS.
>> ALLISON BUCHHOLTZ-AU: Dhe pastaj nuk ka also--
I harroj emrin e saktë të faqes.
Por ka patjetër, unë mendoj, diçka nga Adobe
që gjeneron skemat ngjyra për ju, e cila është me të vërtetë e ftohtë, sepse ju
definitely-- është ndonjëherë vështirë të kuptoj,
oh, nëse unë dua që të përdorin këtë ngjyrë, çfarë mund të jetë një tjetër i dobishëm
për të përdorur diku tjetër në faqen time për të, si, e bëjnë atë të mirë dhe kohezive.
>> Tomas Reimers: Allison-së duke folur për një nga Adobe quajtur Kuler, unë mendoj.
Është K-U-L-E-R.
ALLISON BUCHHOLTZ-AU: Unë mendoj kështu.
Unë jam goxha i sigurt se është një.
>> Tomas Reimers: ime e preferuar ka qenë gjithmonë Skema Color Designer.
>> ALLISON BUCHHOLTZ-AU: Ooh.
>> Tomas Reimers: Cili është now--
>> ALLISON BUCHHOLTZ-AU: Ah, kjo është e bukur.
>> Tomas Reimers: Dhe ju mund të them se në thelb, si,
Unë dua tre ngjyra pranë njëri-tjetrit.
Dhe pastaj le të bëjë diçka të mirë.
Dhe pastaj ju mund të merrni një shembull e asaj që mund të duket si.
Dhe pastaj në qoftë se ju rri pezull mbi ndonjë nga ata, kjo ju jep vlerën magji.
>> Pra, vetëm si një mënyrë e mirë për të filluar duke menduar për skemat ngjyra
apo çfarë ngjyra në një faqe interneti mund të shkojnë mirë së bashku.
Për shkak se mund të jetë e habitshme jo aq e lehtë për të marr si ju mendoni.
Dhe pastaj gjë tjetër i ftohtë Unë e kam gjetur gjithmonë në lidhje me këtë faqe interneti
është në qoftë se ju goditi Shembuj, ajo do të tregojnë se çfarë një website shembull
mund të duket si duke përdorur këtë skemë të ngjyrave.
Anyway.
>> Kthehu në aktuale CSS.
ALLISON BUCHHOLTZ-AU: Por natyrisht, ne di këto referenca mund të jenë të dobishme.
Tomas Reimers: Jo, ata definitivisht mund të jetë e dobishme.
Pra sundimin e dytë, Allison?
>> ALLISON BUCHHOLTZ-AU: Po.
Rregulli i dytë është vetëm që korrespondon me font tonë.
Pra, pesha font është vetëm lloj of-- kështu peshë do
të jetë në qoftë se ju doni vetëm, si, normal ose, si, fonts hollë,
apo në këtë rast, si, të guximshme.
Unë harroj.
Çfarë është nëse do të donit it-- është atje një e hollë se vetëm, si, normal?
Tomas Reimers: Unë nuk bëj në të vërtetë di nëse ka një të hollë.
ALLISON BUCHHOLTZ-AU: I harroj.
Peshë kështu font ne në mënyrë tipike vetëm përdorni për të guximshme.
Nëse ju doni të merrni të vërtetë në ajo, ne jemi duke shkuar për të treguar ju.
W3Schools ka të gjitha të ndryshme gjëra që ju mund të bëni për fonts.
Por në thelb, në qoftë se ju doni ndonjëherë për të ndryshuar ndonjë gjë në lidhje me font,
ajo gjithmonë do të jetë, si, font-diçka.
Pra, kjo do të jetë si, font-familjes në qoftë se ju jeni duke u përpjekur të ndryshojë llojin aktuale.
Ajo do të jetë font-style në qoftë se ju doni të bëni atë si kursiv,
ose Italics, ose gjësend.
Ose edhe font-ngjyra, në qoftë se kemi dashur të ndryshojë këtë.
>> Tomas Reimers: Yup.
Kështu që ju mund të ndryshojë atë.
Dhe lloj i vetëm për të radhitje tani, kështu që ju mund të
të shohim se kemi selektorin e deri këtu.
Ne kemi këto formatimin e teksteve kaçurrel.
Dhe pastaj ne kemi rregulla përkufizuar nga pikpresje.
A ka kjo kuptim?
Vërtet?
Ftohtë.
Pra, nëse kjo është e good--
>> ALLISON BUCHHOLTZ-AU: Back.
Tomas Reimers: Le të flasim në mënyrë specifike për atë se çfarë selektorë kemi.
'Shkak tani ne kemi lloj i vetëm treguar tags.
Por ju djema mund të shohin atë bindës.
Thuaj ju keni dy paragrafë në një faqe dhe jush
duan të jenë në gjendje të stilit një por jo tjetri,
ju nuk e vetëm duan të kufizojnë veten për të duhet të përdor HTML ndryshme aktual
tags për t'i dhënë atyre stile të ndryshme.
>> Pra, ne kemi tre themelore Llojet e selektorë.
ALLISON BUCHHOLTZ-AU: Po.
Pra, ne kemi tag, i cili është çfarë ne kemi qenë duke folur për tani.
Pra, kjo është lloj i si trupin tuaj apo f.
Dhe pastaj ne kemi klasë, e cila është kur ne define atë në dosjen tonë CSS,
ajo është gjithmonë do të jetë dot, çfarëdo ju doni emrin e klasës tuaj të jetë.
Dhe kjo mund të aplikojnë për gjëra të shumta.
>> Thuaj ju keni pesë paragrafë dhe dy të tre prej tyre
duhet të vetëquajtur të njëjtën gjë, ju do të aplikoni një klasë me të.
Dhe kjo është vetëm mënyrë ne bëjmë atë.
Ne do të ju jap një shembull të ku ky fakt tregon deri.
Por në qoftë se keni pasur ndoshta disa tag p, pas saj, ju do të shkruani,
klasë është e barabartë me çfarëdo klasa ju doni të aplikoni për të.
Pra, çfarëdo Selectors e klasës që ne duam për të aplikuar në këtë paragraf të veçantë,
ne mund të shkruani vetëm si kjo.
Sigurisht, unë mendoj një shembull do ta bëjë shumë më konkret.
>> Një tjetër që kemi është id, që kemi treguar
me një hash, apo paund, ose hashtag.
Tomas Reimers: Octothorpe.
ALLISON BUCHHOLTZ-AU: Octothorpe.
Që punon, too.
Dhe kjo duhet të jetë me të vërtetë unik.
Ata duhet të zbatohet vetëm për një gjë në faqen tuaj.
Pra, nëse kjo është një paragraf të veçantë, ose disa pika në një listë, ose çfarëdo,
kjo duhet të jetë unik.
Dhe në të njëjtën mënyrë që ne vetëm them, si, klasë = "class1 class2"
kjo mund të jetë vetëm id e çdo gjë që ne kemi.
Tomas Reimers: Po.
Pra, le të flasim patjetër për shembuj këtu.
Dhe unë jam vetëm do të zhyten drejt përsëri në kodin.
Pra, le të shohim në HTML tonë.
Dhe kështu që ne tani kemi një paragraf.
Ky është teksti.
Unë jam vetëm duke shkuar për të modifikuar ajo. "Ky është teksti 1."
Dhe atëherë ne jemi duke shkuar për kanë një "Ky është teksti 2."
>> ALLISON BUCHHOLTZ-AU: dyti një.
Tomas Reimers: Yup.
Pra, ne tani kemi "Ky është teksti 2", e drejtë?
Dhe ne jemi duke shkuar për të parë se në qoftë se ne ringarkoni faqe, ajo që ne jemi duke shkuar për të gjetur
është që ne jemi gonna find--
ALLISON BUCHHOLTZ-AU: Ooh.
Tomas Reimers: Po.
Ne jemi duke shkuar për të gjetur një "Ky është Teksti 1, "dhe" Ky është teksti 2. "
>> ALLISON BUCHHOLTZ-AU: Dhe ngjyrë nga bukuroshe të verdhë.
>> Tomas Reimers: Dhe ju do të shihni se përzgjedhës tonë të drejtë tani,
e cila vlen për të p-së, ose paragrafë, ndikon në dy prej tyre,
sepse të dy ata takohen kusht që ata janë të dy një tag p.
Kjo ka kuptim të përgjithshëm.
Pra, pyetja është, mirë, çfarë në qoftë se ne të kërkuar për të vetëm të marrë një të tillë?
Pra tamam si Allison ishte duke thënë, ne kemi dy mënyra të tjera për të bërë atë.
Unë jam duke shkuar për të filluar me id.
>> ALLISON BUCHHOLTZ-AU: Le të fillojmë me id.
>> Tomas Reimers: Dhe të dy e këto janë atribute.
Pra atributet ekzistojnë në HTML.
Dhe ajo që ata janë, është diçka që ju të shtoni
brenda tag-un i cili është ndarë nga emri tag.
Kështu që ju mund të kenë atribute të shumta.
Vërtet?
>> ALLISON BUCHHOLTZ-AU: Unë kam qenë vetëm duke shkuar të thuhet, nga shembulli juaj nga PSET 7,
në qoftë se ndonjë nga ju të përpiqemi të lidhur gjërat në qendër,
ju mund të keni përdorur "Teksti lidhur = qendër."
Dhe keni vënë re atë ndoshta duhet të kishte përqëndruar
teksti juaj ose bar tuaj navigacion.
Pra, kjo është vetëm edhe një atribut që ju mund të jetë njohur me të.
Tomas Reimers: Ka një bandë e atributet që ju do të shihni.
Vërtet.
Ashtu si referencë e mirë për PSET 7.
Ne kemi id.
Ju gjithashtu mund të keni klasë, gjëra të tilla si kjo.
Një tag vetme mund të ketë shumë atribute.
Pra, duke filluar me id, le të pretendojë ne duan të kenë një id of-- unë nuk e di.
Ne do të thërrasë atë special, sepse ky, ne jemi
do të bëjë të guximshme, dhe nënvizoj, dhe çdo gjë.
ALLISON BUCHHOLTZ-AU: Është e gonna të jetë super i veçantë.
Tomas Reimers: Pra kjo një, ne kemi id vecanta.
Pra, mënyra për të zgjedhur atë, atëherë, është e në main.css, në vend se të ketë një kod p,
ju bëni #special, OK?
Dhe që zgjedh gjë me id speciale.
A ka kjo kuptim për të gjithë?
AUDIENCA: Po.
Tomas Reimers: Best.
Pra, tani në qoftë se ne do të shkojmë përsëri, ne do see-- uh.
Vërtet.
Ne do të shohim se ai vetëm zgjedh një me id speciale.
Vërtet?
Tinguj cool.
Po.
>> AUDIENCA: A mund të ketë diçka një atribut i të dy klasë dhe një id?
>> Tomas Reimers: Po.
AUDIENCA: OK.
Dhe pastaj çfarë ndodh në qoftë se ju atëherë jepni ajo disa rregulla në CSS se konflikti?
Tomas Reimers: Absolutisht.
Ne jemi definitivisht do për të folur për këtë.
Pra, pikërisht ajo që ju po merrnin në, ju gjithashtu mund të ketë klasa.
Pra, le të pretendojë kam pasur tre paragrafët dhe unë
donte të stilit parë dy por jo treti.
Well, ideja juaj i parë mund të jetë, mirë, unë mund të japin vetëm një të dytë një id.
Por ju nuk mund të, sepse një id, tamam si Allison ishte duke thënë,
duhet të jetë unik.
>> Pra, në vend të një id, çfarë ju mund të përdorin është që ju mund të përdorni një klasë.
Dhe një class-- çfarë ai i lejon ju të bëni është të thënë në thelb,
ky takon si pjese e nje grupi.
Në këtë rast, grupi ynë quhet e veçantë.
Dhe ajo që ne jemi duke shkuar për të bërë atëherë është ne jemi duke shkuar për say-- vend se paund,
ne jemi duke shkuar për të përdorur dot.
OK?
Dhe vini re se funt dhe dot ekzistojnë vetëm brenda file CSS,
jo brenda HTML.
ALLISON BUCHHOLTZ-AU: Po.
Dallim i rëndësishëm.
>> Tomas Reimers: Unë kam kishte aq shumë luftë,
sepse kam vënë hash në HTML dhe atëherë vetëm ndjerë budalla për një kohë të gjatë.
Shih se si ajo zgjedh të dy ato me atë klasë?
Ftohtë.
>> Tani, gjërat mund të ketë klasa të shumta.
Le të thonë se unë të kërkuar për të bërë së pari dy kanë një sfond të verdhë
dhe e dyta dy kanë një ngjyrë font e blu.
OK.
Unë vërtetë nuk e di pse unë do të doni të bëni atë, por unë mund të.
>> ALLISON BUCHHOLTZ-AU: nuk Mund rekomanduar atë për faqen tuaj te internetit.
Por për qëllimet tona, ajo do të bëjë.
>> Tomas Reimers: Kjo nuk është një skemë e mirë ngjyrë.
ALLISON BUCHHOLTZ-AU: E pra, të verdhë dhe blu janë ngjyrat e mia të larta shkollore.
Unë nuk e di, pse.
Tomas Reimers: Allison së lartë Shkolla kishte një skemë të madhe të ngjyrave.
[Qeshura]
Pra, atëherë çfarë mund të quajmë këtë është Le të thërrasë this-- kështu që ne kemi Speciale
dhe ne kemi Pretty.
Unë sugjeroj, për këtë, ju përdorni Emrat shumë më përshkruese.
ALLISON BUCHHOLTZ-AU: Po, unë do të e quajnë këtë, si, të verdhë ose blu.
>> Tomas Reimers: Ne nuk jemi të vërtetë të bërë një faqe interneti të vërtetë,
cila është arsyeja pse ne nuk jemi duke bërë atë.
Por në qoftë se ju në të vërtetë kishte një website të vërtetë, ju
mund të ketë, si, header artikull, Përmbajtja artikull, fjala e parë,
gjëra të tilla si kjo, të cilat lejojnë ju që të jetë shumë më përshkrues.
Këto janë me të vërtetë vetëm si variabla.
Ata duhet të jenë të emëruar në mënyrë të ku ju mund, like-- yeah, si i tillë.
Perfect.
>> Pra ngjyra e sfondit.
Dhe pastaj ne do të say-- kështu mënyrë për të ndryshuar ngjyrën është vetëm "ngjyrë".
Dhe ne jemi duke shkuar për të bërë atë blu.
Kjo është e ftohtë.
Pra, tani ne kemi dy të parët kanë të veçantë.
Një tjetër do të kanë "klasë = goxha."
ALLISON BUCHHOLTZ-AU: Dhe pastaj ju do të dua të shtoj "mjaft" me atë të mesme.
Tomas Reimers: Yup.
Dhe pastaj në atë të mesëm, për të shtuar "goxha," çfarë ndodh
është që ju vetëm duhet një hapësirë.
Pra atribut klasës është një listë hapësirë-ndara
të gjitha klasat e që zbatohen për atë tag.
OK?
Kjo nuk është si ky njeri i takon një lloj klase të veçantë të quajtur
"Special, hapësirë, goxha."
Ajo i përket dy classes-- të veçantë dhe të bukur.
Po?
Ftohtë.
>> Dhe pastaj, nëse ne shikojmë në atë që ndodh, ne jemi
do të shohim se i pari ka sfond të verdhë, teksti i zi.
One-- i dytë
>> ALLISON BUCHHOLTZ-AU: --has bold sfond të verdhë me tekst blu.
Dhe një jonë e fundit vetëm ka Teksti blu që ne të caktuar për të.
>> Tomas Reimers: Best?
Si punojnë Selectors?
Awesome.
>> ALLISON BUCHHOLTZ-AU: A duam të flasim për konfliktin tani atëherë?
>> Tomas Reimers: Pra, vërtet.
Absolutisht.
Pra, çfarë ndodh në qoftë se ju kanë një konflikt, apo jo?
Le të pretendojë një të parë krijon diçka like--
ALLISON BUCHHOLTZ-AU: Ndoshta kjo e ndryshon sfond?
Tomas Reimers: Po.
Pra, ne jemi duke shkuar për të bërë "goxha" të ndryshuar sfond salmon.
ALLISON BUCHHOLTZ-AU: Ju jeni vetëm me të gjitha ngjyrat e mëdha sot, Tomas.
Tomas Reimers: Po.
Sepse unë kuptova unë mund përdorni salmon si një ngjyrë të vërtetë.
Pra, ne jemi vetëm duke shkuar për të bërë këtë.
Unë gjithashtu mendoj Sunset është një ngjyrë e vërtetë.
AUDIENCA: Sunset është një ngjyrë e vërtetë?
ALLISON BUCHHOLTZ-AU: Le të provoni.
Tomas Reimers: Pas këtë demo vetëm për shkak se në rast ajo messes up,
Unë nuk dua të jenë të debugging.
Pra, ne e dimë salmon është një ngjyrë e vërtetë.
Kështu që çdo supozime mbi çfarë do të ndodhë?
>> ALLISON BUCHHOLTZ-AU: Çdo ide?
>> Audienca: [padëgjueshme].
>> Tomas Reimers: Po.
Kështu që ju mori atë saktësisht e drejtë.
Në thelb, ajo merr rregull e kaluar se ai është dhënë.
>> ALLISON BUCHHOLTZ-AU: Pra ky është ku Cascading hyn në fuqi.
>> Tomas Reimers: Pra, mbani mend se si ne kishte se Cascading Style Sheets?
Pra nga kjo, ne lloj të thotë se ne kemi një bandë e rregullave
që të aplikojnë në krye të njëri-tjetrit, dhe ata gjithashtu mund të pranoj njëri-tjetrin.
>> ALLISON BUCHHOLTZ-AU: Pra çfarëdo e në fund
do të shkel çdo gjë është në krye.
Ju mund të keni rregulla që plotësisht mohoj diçka paraprakisht.
Kjo është edhe arsyeja pse ju doni të jenë të të kujdesshëm kur ju jeni styling,
kështu që ju nuk jeni duke krijuar rregulla që ju jeni vetëm krejtësisht thelbësor.
>> Tomas Reimers: Apo ndoshta ju doni të prishësh rregullat.
>> ALLISON BUCHHOLTZ-AU: Apo ndoshta ju bëni.
Po.
>> Tomas Reimers: Pretendon ju keni një klasë e cila vlen për gjërat më të madhe,
por le të thonë se ju doni për të ndryshuar ngjyrë sfond të kuq dhe të font
peshë të guximshme për më gjëra, por për një,
ju doni vetëm ngjyrën e sfondit të jenë të kuqe por ju doni të gjithë tjetër
Pronat, ju mund të bëni diçka si "font-weight = normal"
i cili më pas do të prish këtë ndryshim të guximshme.
Vërtet?
Përsëri, mënyra më e mirë, unë mendoj Allison, tha ajo, është vetëm praktikë.
>> ALLISON BUCHHOLTZ-AU: Eksperimentimi.
>> Tomas Reimers: Praktika, praktikë, praktikë, dhe eksperiment.
Unë e di shumë njerëz që mendojnë CSS është vetëm një shumë e mend-dhe-check
në fund të ditës, ku nëse ju doni të bëni something-- si,
ju keni një ide të përafërt, por ju ende ndoshta duhet
për të provoni atë për t'u siguruar ju e dini se çfarë ajo duket si.
>> AUDIENCA: Kur ju jeni duke aplikuar klasa, më shumë se një
në të njëjtin paragraf ose seksion, e bën atë
marrë parasysh atë mënyrë që ju mund të llojin e tyre në thonjëza?
>> Tomas Reimers: Jo, jo në të gjitha.
>> ALLISON BUCHHOLTZ-AU: Ajo që ka rëndësi është rendi brenda fletë tuaj stil CSS.
AUDIENCA: A mund të përsëris pyetjen?
Tomas Reimers: Oh.
ALLISON BUCHHOLTZ-AU: Brenda e klasës, klasat, kur ju jeni duke i dhënë
diçka në HTML, bën ka rëndësi që rendi ata janë në?
Nuk ka rëndësi rendin.
Ajo që ka rëndësi është e rendit të Selectors të klasës brenda CSS tuaj,
brenda fletë tuaj stil.
>> Tomas Reimers: i mirë Sound?
>> ALLISON BUCHHOLTZ-AU: bukuroshe.
>> Tomas Reimers: Dhe pastaj ne jemi duke shkuar për të vazhduar to--
ALLISON BUCHHOLTZ-AU: Çfarë kemi pas?
Unë harroj.
Oh, ne vetëm kemi shembuj.
Por ne kemi bërë lloj i atyre.
Ne e kemi bërë shembuj të fluturojnë.
>> Tomas Reimers: Ne kemi marrë për të kombinoni shpejt të selectors.
>> ALLISON BUCHHOLTZ-AU: Oh, ne të merrni për të kombinuar selectors.
Tomas Reimers: Pra disa shembuj është që ne kemi
# Pound dog--, ose hashtag, ose octothorpe, apo çfarëdo
ju doni të telefononi that-- mprehtë.
>> ALLISON BUCHHOLTZ-AU: qen Sharp.
>> Tomas Reimers: Atëherë ju keni .pets.
Diçka ka një id e qenit, ka vetëm një qen në faqe.
Diçka ka një id të mace, ka vetëm një mace.
Nuk mund të jetë shumë kafshët shtëpiake në faqe.
Kjo është arsyeja pse ne kemi dhënë se klasa.
Ju keni një shembull të p.
Dhe pastaj kështu një nga Shembulli i fundit, që
është diçka që ne nuk kemi biseduar rreth, është ajo që ndodh kur ju të kombinuar ato.
Pra p.pets.
>> Kështu që për këtë, le të kthehemi në Kodi dhe futur another-- vërtet.
Pra, përsëri këtu.
>> ALLISON BUCHHOLTZ-AU: I të ndjehen si kjo është really--
si vetëm duke kërkuar përmes shembujve është me të vërtetë mënyra për të mësuar këtë.
Pra, kjo është ajo që ne jemi duke bërë.
>> Tomas Reimers: Pra, le të pretendojë ne vetëm dëshironi të zgjidhni tekstin 2, të drejtë?
Pra, ne definitivisht nuk mund bëni që me një id.
E pra, ne mund të bëjmë atë me një id, por ajo nuk ka një id.
Unë mund të shtoj një, por le të pretendojë se unë nuk dua të shtoj një të tillë
ose ajo tashmë ka diçka tjetër.
Unë nuk mund ta bëjë atë me këtë.
Tag nuk është aspak unik, e drejtë?
Dhe as është klasë.
Por ju mund të kombinohen këto gjëra.
Le të thonë se ne të kërkuar për të bërë diçka e cila vlen vetëm për gjërat që
kanë Special të klasës dhe të cilat kanë klasë goxha.
>> Pra, çfarë ju mund të bëni është në main.css, ju mund të them, le të parë të fshini këtë.
Ju mund të kombinohen këto.
Kështu që ju mund të bëni kushtet speciale.
Nuk ka hapësirë.
Vetëm .special.pretty.
Çfarë kjo do të thotë është diçka që është edhe i veçantë dhe mjaft.
A ka kjo kuptim?
Dhe në qoftë se ne do të shkojmë këtu, çfarë ju jeni do të shoh
është ky rregull vlen vetëm për dyta, e cila ka dy nga ato.
Dhe ju mund të bëni atë për shumë gjëra.
Ju mund të say-- le të pretendoj unë vetëm të kërkuar
për të bërë gjëra të cilat kanë të klasës goxha dhe të cilat janë gjithashtu një paragraf tag.
Pra p.pretty.
Le të pretendojë se kam pasur diçka mjaft në trup tag.
OK?
Unë mund të kandidojë këtë dhe unë mund të shihni se kjo është vetëm
do të zbatohet për gjëra të cilat janë të Paragrafët me klasën e bukur.
Dhe ju mund të kombinohen këto, në thelb, si shumë si ju dëshironi.
Kështu që ju mund vetëm të vënë ato së bashku.
A ka kjo kuptim?
ALLISON BUCHHOLTZ-AU: Pra ky lloj është më e dobishme
kur, Tomas u thënë më herët, ndoshta ju keni një faqe interneti shumë të komplikuar,
dhe ju tashmë keni një shumë i këtyre rregulla të shkruara,
dhe ju vetëm duhet të kombinohen dy nga para.
Ashtu si në vend të shkruar një tërësi përzgjedhës i ri dhe ndryshimin e tij atje,
vetëm ju mund të kombinohen ato ku ajo përputhet.
>> Tomas Reimers: Ose ju mund të gjeni out-- ndonjëherë
ka një klasë që bën ngjyra font-së si blu,
dhe ka një tjetër klasë që bën blu sfond.
Dhe kjo thjesht nuk do të funksionojë.
Pra, ju shkruaj një rast të veçantë, ku, like-- por në qoftë se ajo ka të dy, çfarë ju jeni
do të bëni është që ju jeni do të e bëjnë këtë një këtë hije e blu
dhe kjo e kjo hije tjetër e blu.
E drejtë?
>> ALLISON BUCHHOLTZ-AU: Mirë për ato llojet e përjashtimeve.
Tomas Reimers: Pra, për mendoj për problemet
që mund të lindin kur ju të kombinuar ato.
Ftohtë.
Pra, përsëri në prezantimin tonë.
ALLISON BUCHHOLTZ-AU: Ne jemi pothuajse atje.
Tomas Reimers: Dhe kjo ka ndaluar lidh.
ALLISON BUCHHOLTZ-AU: Oh, jo.
ALLISON BUCHHOLTZ-AU: CS në zyrë, internet shkon poshtë.
Oh, ironia.
>> Tomas Reimers: Pra për fat të mirë, ne mund të paraqesë pa internet, unë mendoj,
sepse ne kemi të gjitha slides këtu.
Pra, le të flasim për marrëdhënie e etiketave.
ALLISON BUCHHOLTZ-AU: E drejta.
Pra, vetëm lloj të shkuar off e asaj që tha Tomas,
kjo është vetëm një tjetër mënyrë për të bërë atë.
Pra, ne kemi disa prind përzgjedhës me një përzgjedhës fëmijëve.
Pra, në këtë shembull këtu, ne kemi disa Trupi me një navbar klasës, butonin klasë.
Ah.
>> Tomas Reimers: Oh, më vjen keq.
>> ALLISON BUCHHOLTZ-AU: Dhe në thelb, çfarë do të thotë kjo
është të zgjidhni të gjithë fëmijët, si të gjitha këto llojet e selektorë,
brenda këtij përzgjedhës mëmë.
Dhe ata janë të vetmit ajo ndonjëherë do të aplikojë për të.
Unë nuk e di nëse ju të ketë një mënyrë më të mirë of--
Tomas Reimers: Kështu që unë me mend rrugën për të menduar
lidhje me këtë është të mbani mend se si para ne lloj i pëlqen të vënë ato së bashku.
Dhe pastaj kjo do të thotë një element që ndeshjet të gjitha këto.
Çfarë kjo është thënë është, unë doni ju që të shkojë gjithçka
brenda some-- unë dua ju për të gjetur një përzgjedhës.
Dhe pastaj brenda se, unë dua ju që të shkojë me gjëra të reja.
E drejtë?
Pra në CSS, kjo është e gjitha në lidhje me lloj duke qenë në gjendje që të shkojë me këto objekte.
Dhe ju mund të provoni që të shkojë artikuj brenda sende të tjera.
>> Pra, le të bëjë në fakt një shembull, dhe ne mendojmë se do të qartësojë.
Pra, le të pretendojë ne kemi të veçantë, special goxha, çfarëdo.
Dhe pastaj ne kemi një lidhje, OK?
Pra mbani mend, a është një lidhje.
Kjo nuk do të shkojnë kudo.
Dhe ne jemi duke shkuar për të dhënë atë Lidhje klasë, I guess.
Le të jap atë e class-- më jepni një ide.
ALLISON BUCHHOLTZ-AU: Best.
Tomas Reimers: Coo-- le të shkoj kjo klasë goxha.
Përse jo?
>> ALLISON BUCHHOLTZ-AU: OK.
Tomas Reimers: Pra, gjërat tani goxha
do të bëjnë sfond blu, ngjyra e sfondit e salmon.
Kjo ka kuptim.
Dhe në qoftë se ne bëjmë this--
>> ALLISON BUCHHOLTZ-AU: A doni të shtoni tekstin
kështu hyperlink në të vërtetë tregon deri?
Tomas Reimers: Kjo do të ishte një thirrje e mirë.
ALLISON BUCHHOLTZ-AU: 'e drejtë Cause tani ne jemi vetëm gonna të merrni asgjë.
Tomas Reimers: Pra kjo është një lidhje.
"Kjo është një lidhje".
Oh, dhe kjo është duke shkuar të jetë një tjetër lidhje.
Le të dhënë atë të klasës "cool".
Ju jeni të drejtë.
Ftohtë.
Kështu që tani për tani ne jemi duke shkuar për të rrëmbyer këtë.
Ne jemi duke shkuar për të hedhur një të tillë.
Ne kemi një në tag special, dhe ne gjithashtu
do të kemi një në të bukur tag.
Dhe tani ajo që ne jemi duke shkuar për bëni është që ne jemi duke shkuar për të bërë cool--
çfarë ne duam që ajo të bëj?
ALLISON BUCHHOLTZ-AU: A mund ta bëjë atë më të mëdha?
Tomas Reimers: Le të jepte një kufi.
ALLISON BUCHHOLTZ-AU: Ne mund të kufirit.
Tomas Reimers: Po.
Pra, ne jemi duke shkuar për të bërë diçka si, is-- kufirit dhe ne jemi
shkuar për të shpjeguar këtë të gjithë në një të dytë.
Për now--
>> ALLISON BUCHHOLTZ-AU: Për modelin kuti.
Tomas Reimers: Por tani për tani, ne jemi vetëm duke shkuar për të dhënë atë një kufi.
Pra, çka do të thotë është se ju jeni do të shohim këto lidhje.
Dhe ju do të jeni për të parë se ata kanë këto, si, kufijtë shëmtuara të zeza, të cilat
është e ftohtë.
>> ALLISON BUCHHOLTZ-AU: Faqja jonë e internetit është aq e bukur.
>> Tomas Reimers: Po.
Faqja jonë e internetit është awesome.
Pra, këto dy janë lidhje, dhe ato shfaqen.
Tani le të pretendojë I vetëm të kërkuar për të bërë këtë
në qoftë se ajo nuk ishte brenda diçka e cila kishte një sfond të salmon.
Pra, mos harroni se ky ka një sfond të salmon,
sepse është i klasës të bukur.
>> Por ne duam të themi se vetëm fitilin të cilat janë në klasë të veçantë, jo në klasë
goxha, duhet të keni se kufirit.
E pra, çfarë ju mund të bëni është që ju Mund të them, kushtet speciale, hapësirë, .cool.
Dhe çfarë që e bën, kur ju mendoni për këtë, është ajo e në thelb duke thënë:
OK, gjeni mua çdo gjë që përputhet special.
Pastaj brenda atyre tags, gjeni mua çdo gjë që është e ftohtë.
ALLISON BUCHHOLTZ-AU: Pra, një mënyrë tjetër që mund të jetë e mirë për të menduar për këtë,
duke e çuar atë në C, është ashtu si idenë e fushës.
Pra, kur ju keni disa përzgjedhës, si ato
që ne kemi qenë duke punuar për para kësaj, tërë web faqen tuaj, të gjithë të HTML tuaj
është brenda fushëveprimit tuaj, apo jo?
Por, kur kemi këto marrëdhëniet prind-fëmijë,
kjo është si në qoftë se ju jeni duke ngushtimi ku ju jeni duke kërkuar për një vend të veçantë,
si në qoftë se, si, ne jemi duke shikuar brenda një funksion specifik në vend
i skedarit tonë të gjithë.
Audienca: Pra, me këtë në mendje, do të ajo të kishte rëndësi nëse ne kishim changed--
ALLISON BUCHHOLTZ-AU: Urdhri?
AUDIENCA: --the klasë në CSS të .cool, hapësirë, kushtet speciale?
ALLISON BUCHHOLTZ-AU: Po, sepse atëherë kjo
do të thoja, fushëveprimi atë për çdo gjë që ka të ftohtë,
dhe pastaj të shohim në çfarë has-- Unë do të thotë, si, në këtë rast,
Unë nuk mendoj se kjo do të kishte ndryshuar atë.
>> Tomas Reimers: Po të kishim thënë çfarë?
Më vjen keq.
>> ALLISON BUCHHOLTZ-AU: Nëse ne Shtrirja atë të ftohtë dhe pastaj
shikoni për gjëra nga i veçantë, ajo do të jetë e njëjtë, në të vërtetë.
>> Tomas Reimers: Pra, ajo nuk do të jetë.
>> ALLISON BUCHHOLTZ-AU: Kjo nuk do?
Oh, oh mirë.
Unë jam i gabuar.
>> Tomas Reimers: Pra arsyeja kjo është different-- mistake-- i zakonshëm
është se tani vetëm lidhje ka ftohtë, e drejtë?
I guess pyetja ime për ju djema është, çfarë në këtë faqe po kompletohet nga .cool?
Ka dy tags këtu, apo jo?
Cili është ky njeri dhe ky njeri.
Të dy ndeshje cool.
Asgjë tjetër bën.
Pra, nëse ju tha, .cool, hapësirë, kushtet speciale, ajo që ju jeni do të them është,
brenda këtyre tags, çfarë është e veçantë?
ALLISON BUCHHOLTZ-AU: Hm.
Kjo është ajo që it-- e drejtë.
Sepse kjo është si vetëm diçka këtu.
>> Tomas Reimers: Pra, ajo zgjedh asgjë.
>> ALLISON BUCHHOLTZ-AU: Ndërsa me të veçantë, ne jemi brenda këtyre tags këtu.
>> Tomas Reimers: Ata dhe ato.
AUDIENCA: OK.
Pra, këto tags nga sulmues çaj?
>> Tomas Reimers: Po.
A ka kjo kuptim?
Si është në thelb duke u përpjekur për të ngushtuar qëllimin.
ALLISON BUCHHOLTZ-AU: Po.
Unë mendoj se është ndoshta Mënyra më e lehtë për të menduar për këtë.
>> Tomas Reimers: Pra, kemi gjetur këtë, dhe kemi gjetur kjo të dy krahasohen veçantë.
Dhe atëherë ne jemi duke i kërkuar, brenda këta njerëz, çfarë është e ftohtë?
Dhe brenda këtij njërit, flladin e këtij dikujt.
Në kuadër të kësaj një, asgjë nuk është e ftohtë.
Pra, kjo është vetëm tag që mbetet.
>> ALLISON BUCHHOLTZ-AU: Ndërsa ftohtë është vetëm brenda këtyre a tags atje.
Tomas Reimers: Pikërisht.
Dhe çfarë është i veçantë brenda ato?
Asgjë.
Tani, ajo që unë do të them është në qoftë se nuk kishte hapësirë,
ju jeni duke i kërkuar se çfarë është e ftohtë dhe special-- apo çfarë është goxha dhe të veçanta, apo jo?
Nëse ju them .special.pretty, kjo është njëjtë si .pretty.special.
>> Sepse çfarë të hiqni hapësirë ​​është duke i kërkuar është, kur ju thoni kushtet speciale,
ju jeni duke kërkuar, OK, që ato janë të veçanta?
Dhe pastaj e atyre, që ato janë gjithashtu goxha,
cili është i njëjtë, gramatikisht, si pyetur, çfarë është goxha,
dhe pastaj nga ata, çfarë është edhe i veçantë?
E drejtë?
Kjo është diferenca e çfarë është brenda çfarë është.
AUDIENCA: OK.
Tomas Reimers: Po.
Awesome.
Pra, me këtë në mendje then--
>> ALLISON BUCHHOLTZ-AU: Unë mendoj kaluar ynë gjë është (IN dashuroj BRITISH Accent)
modeli kuti.
>> Tomas Reimers: box-- [Chuckles] Unë e dua mënyrën Allison thotë se.
Pra modelin kuti gjë.
>> ALLISON BUCHHOLTZ-AU: Vetëm kanë një kuti, unë do të jetë modeli juaj kuti.
Tomas Reimers: Pra, le të flasim për këtë.
Deri tani ne kemi shpenzuar shumë e kohës duke folur për selektorë.
Deri tani, ju djema ndoshta janë, si, mjeshtra të selectors-- ju e dini,
si për të zgjedhur saktësisht përmbajtjen që ju doni për të manipuluar në ekranin tuaj.
>> Pra, tani pyetja është, si saktësisht mund të manipulojnë atë?
Kështu që unë mendoj më themelore mënyrë për të menduar për atë
është, mirë, çfarë saktësisht është një element në CSS?
Ne kemi shpenzuar shumë kohë duke folur për, çfarë është një tag,
apo çfarë është më themelore përfaqësim i një tag?
>> Një mënyrë e mirë për të menduar për që është, çfarë formë është salmon?
Çfarë formë është, si, sfond salmon ngjyrë?
>> AUDIENCA: Kjo është një drejtkëndësh.
>> Tomas Reimers: Kjo është një drejtkëndësh, e drejtë?
>> ALLISON BUCHHOLTZ-AU: Nuk ishte një pyetje mashtrim.
[Qeshura]
>> Tomas Reimers: Jo duke u përpjekur për mashtrim ju djema kjo vonë.
Pra, ne e kemi këtë drejtkëndësh.
Dhe tag është një p, e drejtë?
Kështu që na jep të mira Besimi se paragrafi
është e përfaqësuar si një drejtkëndësh, në paktën në mendjen e shfletuesit, i cili
ajo është.
>> ALLISON BUCHHOLTZ-AU: Unë do të thotë, shfletues janë zakonisht drejtkëndëshe,
kështu që ka kuptim.
>> Tomas Reimers: Ideja këtu është se të gjithë tags brenda CSS
janë të përfaqësuara si një drejtkëndësh.
Dhe çdo drejtkëndësh ka katër pjesë sipas CSS, OK?
Ju keni përmbajtjen aktuale.
Kjo është ku teksti qëndron.
>> ALLISON BUCHHOLTZ-AU: Ndoshta foto e juaj.
>> Tomas Reimers: Po.
Ju kanë mbushje, i cili është vetëm një lloj hapësirë ​​të bardhë.
Atëherë ju keni një kufi.
Dhe pastaj ju keni diferencë, e cila është hapësirë ​​e bardhë jashtë e që.
Kështu që nuk ka kuptim për të gjithë, kështu që ne jemi
do të flasim për atë për një të dytë.
Pra të drejtë këtu, ajo që ne jemi duke shkuar për të bërë po ne jemi duke shkuar për të krijuar disa divs, OK?
Më falni ndërsa I--
>> ALLISON BUCHHOLTZ-AU: Ndjehem pëlqen ne duhet të vënë një foto të bukur në.
>> Tomas Reimers: Ne patjetër duhet.
>> ALLISON BUCHHOLTZ-AU: Ndjehem si gjithë të
mund të përfitojnë nga një foto e bukur, është e gjitha.
>> Tomas Reimers: A mund të të gjithë përfitojnë nga a--
>> AUDIENCA: Po, i sigurt.
Tomas Reimers: OK, cool.
Pra, ne duhet të vënë një cute foto në diku.
ALLISON BUCHHOLTZ-AU: Ndjehem si një lepur bukur mund të jetë e dobishme tani.
Tomas Reimers: Sigurisht.
ALLISON BUCHHOLTZ-AU: Fundi i javës.
Kanë diçka adorab--
>> Tomas Reimers: Si bout një kotele?
>> ALLISON BUCHHOLTZ-AU: Një kotele punon, too.
>> Tomas Reimers: Cool, sepse ka një vend për këtë.
Ajo që quhet PlaceKitten.
ALLISON BUCHHOLTZ-AU: Kjo është e madhe.
Tomas Reimers: Po.
ALLISON BUCHHOLTZ-AU: Vetëm për, si, images placeholder në faqen tuaj te internetit.
Tomas Reimers: Mm-hm.
Ka gjithashtu PlacePuppy.
Dhe nuk ka PlaceBacon.
>> ALLISON BUCHHOLTZ-AU: PlaceBacon?
Really?
>> Tomas Reimers: Oh, ne nuk bëjmë kanë qasje në internet këtu.
>> ALLISON BUCHHOLTZ-AU: [rënkimet]
Tragjike.
Tomas Reimers: Në rast të kundërt, Unë do të ju tregojnë djema
si për të vënë imazhet në faqen tuaj te internetit.
Ne jemi duke shkuar për të përpiqen për të marrë këtë pune para se ne duhet të shkojmë.
Por tani për tani, ne jemi vetëm do të flasim në ngjyra pastaj.
Ne duam të vënë fotot e kittens--
>> ALLISON BUCHHOLTZ-AU: Ne e bëmë.
>> Tomas Reimers: --the internet-së poshtë për momentin të qenë.
Pra, ne kemi dy divs, dhe ne jemi duke shkuar për t'i dhënë atyre dy IDS.
Ne jemi duke shkuar për të thirrur atë "I parë" dhe "i dytë".
Pra id = "parë".
Dhe ne jemi duke shkuar për t'i dhënë atyre dy ngjyra.
Pra, si nuk kemi të zgjidhni diçka me një id të "parë"?
ALLISON BUCHHOLTZ-AU: Dot apo hash?
AUDIENCA: Sharp.
Tomas Reimers: Sharp, të përsosur.
Sharp, hash, çfarëdo we--
>> ALLISON BUCHHOLTZ-AU: Shumë gjëra për të thirrur atë.
>> Tomas Reimers: OK.
Ne jemi duke shkuar për të zgjidhur më hashtag, dhe kjo është ajo që ne jemi duke shkuar për të shkuar me të.
OK?
>> ALLISON BUCHHOLTZ-AU: hashtag.
>> Tomas Reimers: Pra hashtag-së parë.
>> ALLISON BUCHHOLTZ-AU: Pra ju mund të cicëroj seminar--
CSS hashtag, hashtag cool.
Tomas Reimers: hashtag Awesomeness.
ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, po.
Tomas Reimers: OK.
Pra, ne kemi "e parë" dhe "të dytë."
Pra, së pari, ne do të kemi një ngjyrë sfond të kuq.
ALLISON BUCHHOLTZ-AU: Uh, zorrës së trashë.
Tomas Reimers: Yup.
ALLISON BUCHHOLTZ-AU: Do të jetë e juaj spot-checker.
Tomas Reimers: Allison-së mori mua.
Background-color i blue--
>> Tomas Reimers: Purple!
>> Tomas Reimers: Purple.
ALLISON BUCHHOLTZ-AU: Po.
Purple-së ngjyra ime e preferuar, dhe ne nuk e kanë përdorur atë ende.
>> Tomas Reimers: Violet.
ALLISON BUCHHOLTZ-AU: Violet.
Që punon.
>> Tomas Reimers: Pra, ne jemi do të ketë dy divs.
Ata do të jetë krejtësisht bosh.
Ne ndoshta duhet të ketë disa tekst.
Pra, "i parë" do të jetë "HELLO".
Dhe "i dytë" do të say--
>> ALLISON BUCHHOLTZ-AU: Mirupafshim.
>> AUDIENCA: - "WORLD."
Përshëndetje, lamtumirë.
ALLISON BUCHHOLTZ-AU: Pashë ata në koncert javë të tjera.
Tomas Reimers: The Beatles?
ALLISON BUCHHOLTZ-AU: Për reals.
Ata nuk janë që e madhe.
Unë nuk e pëlqen atë.
>> Tomas Reimers: Ne kemi "HELLO" dhe "Mirupafshim".
Dhe përsëri, CSS është vetëm awesome, sepse ajo njeh ngjyrat tona.
A nuk duhet të edhe shqetësohen se ato ekzistojnë.
Ata e bëjnë.
>> ALLISON BUCHHOLTZ-AU: Ato ekzistojnë.
>> Tomas Reimers: Pra CSS unë mendoj ka 255 fjalë për të folur për ngjyra.
Nëse ju mund të mendoni për një ngjyrë jashtë ato 255, si, unë do të impresionuar.
ALLISON BUCHHOLTZ-AU: Po.
Unë mendoj se ju djema mund të ketë të vijë vetëm në të drejtë pas.
>> Tomas Reimers: Pra këtu, ju do të shihni ne kemi dy kuti
e drejtë në krye të njëri-tjetrit, apo jo?
HELLO dhe lamtumirë.
>> ALLISON BUCHHOLTZ-AU: Nuk ka hapësirë ​​në mes.
Ata janë vetëm smooshed e drejtë në krye të njëri-tjetrit.
>> Tomas Reimers: Pra, gjëja e parë Unë mendoj që ne duhet të flasim për
është le të edhe say-- vërtet.
Pra, CSS paraqet ato si lloj të kutive.
Dhe si kuti, ata kanë përmbajtje.
Dhe përmbajtja e drejtë tani është lloj i HELLO ose Mirupafshim dhe kjo është ajo.
OK?
>> Pra, një nga gjërat e para që ju mund të bëni është që ju mund të shtoni mbushje.
Mbushje thotë hapësirë ​​sa më shumë ajo duhet të largohen në çdo anë.
Pra, le të thonë se unë dua të them 10 pixels në çdo anë.
Dhe unë do të pres që në një të dytë.
ALLISON BUCHHOLTZ-AU: Të gjitha këto gjëra këtu
do të jetë kryesisht në pixel për pjesën tjetër të seminarit.
Ju jeni do të shohim se ajo ka disa hapësira rreth tij, e drejtë?
Pra, çfarë ju nuk e shihni këtu është se ka ky lloj i padukshëm i mbushje
në çdo anë, e cila thotë, si, OK, ju keni kutinë tuaj të content--
>> ALLISON BUCHHOLTZ-AU: A doni për të vetëm të tërheq lart inspektojë element?
>> Tomas Reimers: Po, kjo është një ide e mirë.
ALLISON BUCHHOLTZ-AU: Gjithashtu, unë gjej që të inspektojë element është një mënyrë e mirë
të kuptoj se nëse diçka është duke shkuar gabuar, diçka e papritur ndodh,
inspektimin tags dhe duke parë atë kjo është si overwritten është e dobishme.
>> Tomas Reimers: Kështu që unë nuk jam i sigurt në qoftë se ju djema mund të shihni këtë ngjyrë.
Mund të ju?
Ju do të shihni këtë mbushje në llojin e buzë.
Dhe pastaj ju shihni aktual Përmbajtja në blu, e drejtë?
Pra, kjo është shumë e bazat e modelit kuti.
Ju keni përmbajtjen.
Pastaj ju keni mbushje.
>> AUDIENCA: Pse nuk ju vetëm përdorni kutinë brenda the--
>> ALLISON BUCHHOLTZ-AU: E drejta.
Për shkak se ajo është vetëm zgjedhjen element tani.
>> Tomas Reimers: Yup.
Gjëra të tjera.
Pra, le të flasim për atë komandë mbushje për një të dytë.
Pra, në CSS, matjet duhet të kemi një njësi.
Pra, së pari ju keni shumë.
Pra në këtë rast, ne kemi thënë 10.
Dhe pastaj një tjetër ne kemi thënë është pixels, px.
Ato të tjera ju mund të kemi janë gjëra të tilla si centimetra, inç.
Ju mund të bëni gjëra të pëlqen, çfarë është 10 inç?
Dhe kjo do të jetë qesharake.
>> ALLISON BUCHHOLTZ-AU: Oh, djalë.
>> AUDIENCA: Whoa.
>> Tomas DHE ALLISON: Po.
Tomas Reimers: Pra, kjo është e gjitha mbushje.
Unë jam duke shkuar për të shkuar mbrapa në pixels.
>> ALLISON BUCHHOLTZ-AU: Pixels priren të jenë, si, standardit.
Kur ju shikoni në një shumë e faqeve, ata kryesisht punojnë në pixel.
Tomas Reimers: Pra, ju jeni do të shoh ose pixels-- ato të tjera që shikoni
është em, e cila është një em është e barabartë me lartësinë e shkronjave
të cilat ju jeni duke përdorur.
>> ALLISON BUCHHOLTZ-AU: Mm.
Tomas Reimers: Kjo është një mënyrë e mirë për të thënë, si, unë dua sa më shumë hapësirë ​​si font tim
është duke marrë.
ALLISON BUCHHOLTZ-AU: A nuk e di se.
Ju mësoni diçka të re çdo ditë.
Tomas Reimers: Ka një shumë e matjeve në CS.
Unë sugjeroj që ju të shikoni ato.
Për të gjitha rastet e tua, unë mendoj pixels duhet të jetë i mjaftueshëm.
Dhe ata janë gjithashtu çfarë ju jeni do të shoh
në shumicën e shembujve të bërë online.
Pra, ne do të lënë atë në pixels.
>> Ju gjithashtu mund të, unë duhet të say-- kështu grupe mbushje gjitha të paddings.
Ju gjithashtu mund të bëjë diçka si "Padding-top" për të vetëm set--
ALLISON BUCHHOLTZ-AU: Ndoshta ne do të merrni tonë "Hello" shpinën.
Tomas Reimers: --to vetëm vendosur mbushje në krye dhe asgjë tjetër.
Pra të katër komandat janë mbushje-top, mbushje-fund, mbushje-la,
dhe mbushje të djathtë.
>> ALLISON BUCHHOLTZ-AU: Ashtu si ju do të presin për një kuti.
>> Tomas Reimers: Po.
Asgjë shumë i çmendur atje.
A ka kjo kuptim?
Kështu që është e mbushje.
Unë jam duke shkuar për të vendosur të gjithë të paddings mbrapa në 10.
Dhe atëherë unë jam duke shkuar për të lëvizur në kufi.
>> Pra, çfarë është kufiri është Kufiri është një komandë i pazakontë.
Ajo merr lloj të tre gjëra në të njëjtën kohë.
Pra, së pari është se si e madhe ju duan që ajo të jetë si një matje.
Përsëri, unë jam vetëm duke përdorur pixels.
Dhe gjëja e fundit që unë duhet të shtoni në matjet
është një gjë e cila nuk ka nevojë për një njësi është 0.
Kjo është në të vërtetë i gabuar për të dhënë 0 një njësi,
sepse 0 është 0 nëpër inç, pixels, centimetra, çfarëdo.
E gjitha do të thotë vetëm 0, e drejtë?
Pra, së pari ju t'i jepte matjes.
>> Pastaj ju dhënë atë stil.
Kështu që unë jam duke shkuar për të thënë "të ngurta".
Dhe ne do të flasim për atë që do të thotë.
Dhe pastaj së fundi, ju t'i jepte një ngjyrë.
Kështu që unë jam duke shkuar për të thënë "të zezë".
Dhe të gjitha këto janë gjëra që ne kemi tani parë më parë, me përjashtim të stilit,
por ne do të flasim për këtë.
Kështu që ju djema keni parë matje, dhe ju keni parë ngjyrat.
Dhe ajo që ndodh është që ne të merrni këtë Kufiri i bukur i zi rreth tij, e drejtë?
Ju djema të parë se si ne e bëmë këtë?
>> AUDIENCA: Po.
>> Tomas Reimers: Best.
Pra, çfarë është kjo?
Pra, para së gjithash, kjo është një pixel.
Kjo është e qartë sa duhet, apo jo?
Si, kjo është një pixel trasha.
Apo do të ishte një pixel, por unë jam i zoomed në, kështu që është pak më shumë
se kaq.
>> ALLISON BUCHHOLTZ-AU: Dhe ne kemi kjo rezolutë TV qesharake.
>> Tomas Reimers: Po.
Ju mund të bëjë atë më të mëdha, më të vogla, çfarëdo.
Kështu që këtu është një kufi dy-pixel.
Ju do të shihni se është dy herë më i trashë.
Gjë tjetër që ju duhet është ngjyra.
Kjo nuk është interesante.
Unë nuk jam duke shkuar për të folur për këtë, me të vërtetë.
>> ALLISON BUCHHOLTZ-AU: Por stil mund të jetë vetëm pak interesante.
>> Tomas Reimers: Po.
Pra stil, ka pak ato që unë shoh përdorur zakonisht.
Dikujt Parë e ngurta, njëra e ardhshme të me pika, dhe thye e dikujt të kaluar.
Dhe këtu është e pasur.
Ju do të shihni se ata janë të një bandë e dots, e drejtë?
Një mënyrë e mirë për të lloj të merrni një kufi të bukur shkuar, dashes janë gjithashtu goxha popullor.
>> ALLISON BUCHHOLTZ-AU: Dhe pastaj sigurisht, unë jam
i sigurt ka mjaft të tjera stilet që ju mund të merrni.
Dhe ne kemi një grup të madh të lidhjet në fund për ju djema
për të lloj të lexoj dhe shikoni në më ftohtë CSS.
>> Tomas Reimers: Dhe pastaj Gjëja e fundit, ne jemi
do të flasim për Modelet kuti vërtetë të shpejtë.
Oh, dhe pastaj të kufirit, tamam si mbushje,
ju gjithashtu keni gjëra të tilla si Kufiri-majtas, djathtas-kufitar, kufirit-top,
kufirit-fund, që të lejojë të ju për të marrë në një kufi të caktuar.
Kështu që këtu është vetëm kufi majtas-përcaktuar.
A që ka kuptim?
>> ALLISON BUCHHOLTZ-AU: Kjo është një cool mënyrë për të theksuar gjërat ose shtoni
Linjat mes elementeve të ndryshme.
Tomas Reimers: Absolutisht.
Pra, kjo është kufiri ynë.
Dhe diferencë e dikujt të kaluar.
Si mbushje diferencë-së përveç se nuk është within--
ALLISON BUCHHOLTZ-AU: Është e jo rreth elementit tuaj
por në të vërtetë e gjithë tëra të kuti që ne kemi qenë duke parë.
>> Tomas Reimers: Po.
Allison thotë fare mirë.
Kjo nuk është, si, brenda tuaj element, është rreth të gjithë kutinë.
Kjo do të thotë gjëra të tilla si background nuk zbatohen për të.
Dhe kjo në thelb thotë, si, unë nuk dua asgjë
në këtë hapësirë ​​shumë për mua.
Pra, si këtu ne kemi një diferencë prej 10 pixels.
Pra asgjë brenda 10 pixels duhet të jetë pranë meje.
Kjo është lloj i saj hapësirë ​​por lloj i jo.
Pra, kjo është shumë e bazat e modelit kuti.
A ka kjo kuptim?
Cool, cool.
ALLISON BUCHHOLTZ-AU: mbresëlënës.
Kështu që tani unë mendoj se ne vetëm kanë burime tona të ftohtë
se ne do të marrin ju djema përmes shumë shpejt.
Dhe ne do të actually-- mirë, nuk kemi internetin ende?
>> Tomas Reimers: Le të të shohim nëse unë mund të hapur up--
më lejoni vetëm të shohim nëse unë mund të merrni në internet shpejt
ndërsa Allison flet për ndonjë gjë Allison dëshiron të flas për.
ALLISON BUCHHOLTZ-AU: Pra basically-- unë nuk bëj
e di se çfarë tjetër unë mund të them në këtë pikë.
Por këto janë disa burime të vërtetë të mirë.
Këto janë ato që Tomas dhe unë kam përdorur
dhe se ne në të vërtetë përdoret për të prep për këtë.
W3Schools është një që ju djema duhet të keni parë më parë.
Ne e rekomandojmë atë për një shumë gjëra me CSS.
Unë e di unë rekomandoj atë për të seksion ime gjithë kohën.
>> Një nga gjërat e mëdha është se ajo ju lejon të lloj të luajnë me CSS
dhe të shohim ndryshimet menjëherë në këtë,
si, me dy dritare të parë që ajo ka.
Pra, ju nuk duhet të shqetësohen për ngritjen e vet faqen tuaj web,
ose ngritjen vhost në tuaj aplikim lokal dhe host lokale,
dhe për të gjetur të gjitha këto gjëra të punës.
Ajo është ngulitur drejtë brenda faqes.
>> Dhe kjo ka këto pak Mësimet që ju mund të
shkoni nëpër të mësuar më shumë për selektorë,
ose të mësojnë për manipulimin tuaj font, apo një sfond, ose një imazh.
Dhe ju keni këto Rezultatet e menjëhershëm që ju
nuk keni për të bërë ndonjë punë të tjera të prep për.
Kështu që unë dua W3Schools.
Është i pabesueshëm.
A është duke punuar?
>> Tomas Reimers: Po.
Jo, nuk është.
A doni mua për të provoni dhe rinisni kompjuterin tim?
A duam ne të duam to--
>> ALLISON BUCHHOLTZ-AU: Unë do të thotë, mirë, kjo do të jetë online.
Të gjitha slides do të jetë online.
Kështu që unë vetëm të rekomandoj duke bërë këto.
>> Kjo është e madhe sa vetëm si një mashtrojnë fletë.
Është vetëm gjithë themelore urdhëron që ju keni.
Është e madhe kur ju jeni të parë duke filluar nga faqen tuaj te internetit.
Sepse ndoshta ju nuk e bëni doni të merrni në të gjitha
mortajë prej rëre i vërtetë dizajn-rëndë stuff.
Ju vetëm duhet të format atë në një mënyrë të se lloj i ka kuptim dhe vullnetin
të bërë për momentin.
Dhe në qoftë se ju vërtet doni për të marrë në të, unë e di
kjo është, si, njëri prej Referencat preferuar Tomás-së.
Ne ishim duke e përdorur atë për të prep, dhe është i pabesueshëm.
Është Zhvilluesish nga Mozilla.
>> Tomas Reimers: Pra Mozilla janë njerëzit që e bëjnë Firefox-in.
Dhe kjo është vetëm zhvilluesi i tyre referencë, e cila unë mendoj se është awesome.
Dhe kjo ka një mrekullueshme lista e burimeve.
Pra, ne have--
>> ALLISON BUCHHOLTZ-AU: Dhe pastaj shënim fundit është
kur ju jeni duke u përpjekur për të të hartuar faqen tuaj te internetit,
marrin frymëzim nga gjëra që ju mendoni se janë goxha.
Inspektuar element, inspektuar kodin burim
mund të jenë super të dobishme për duke u përpjekur të kuptoj se
se si të stilit faqen tuaj.
>> Shpesh, unë ndjehem si më i mirë mënyrë, përveç eksperimentimi,
është vetëm për të parë në gjëra që janë goxha.
Më duket e vërtetë e vështirë për të vetëm lloj i projektimit gjëra në tuaj,
veçanërisht në fillim.
Pra ju lutem shikoni në faqet e internetit që ju të gëzojnë duke kërkuar në.
Kuptoj se çfarë bën ata tërheqës për ju.
Dhe pastaj të ndjehen të lirë për të përpiqen dhe të përsëris se.
>> Tomas Reimers: E drejta.
Edhe si faqet e internetit si kjo, ju mund të shihni
ka patjetër një div në krye.
Dhe atëherë ju keni një tjetër div brenda këtu, e cila është CSS Awesomeness.
Dhe atëherë ju keni një bandë e lidhjeve këtu.
Nëse jeni të vërtetë vetëm të inspektojë elemente, ju mund të lloj nga
të fillojnë për të parë se çfarë të bëjë faqet e internetit duken si, dhe se si mund unë
rikrijuar se në qoftë se unë të kërkuar për të.
A ka kjo kuptim?
Pra, ne vetëm duhet tre minuta të mbetura.
Pra pyetje?
Ndonjë prej tyre?
Po.
>> AUDIENCA: Për ngjyra drejtkëndësh, si do të ju
have-- në qoftë se ju nuk e duan atë duke shkuar nëpër tërë faqen, do të mund
ju kanë bërë të shkojnë përtej vetëm gjysmë faqe apo vetëm teksti?
>> Tomas Reimers: Po, absolutisht.
Pra më lejoni të shohim në të vërtetë.
Unë kam dy ide.
Pra, para së gjithash, ju mund të përdorë gjithashtu edhe përqindjes.
>> AUDIENCA: Really?
>> ALLISON BUCHHOLTZ-AU: Pra diçka të kërkoni është pozicionuar relative.
Kjo është diçka që ne e nuk kanë kohë për të marrë në,
por kjo është diçka që unë patjetër rekomandoj ju djema checking out.
>> Tomas Reimers: percents Kështu.
Dhe të shohim se si ne e bëri atë vetëm 50% e gjeresise?
ALLISON BUCHHOLTZ-AU: Nëse ju në të vërtetë e di numrin e pixels,
ju mund të jenë më të saktë në këtë mënyrë.
Ju mund të shëndoshë rreth me të.
Por 50%.
Nëse ne do të ndrysho shfletuesin tonë, kjo do ta bënte atë më të vogla.
>> Tomas Reimers: pra, është e në thelb të 50% të drejtë tani, unë mendoj.
Kjo është 50%, dhe pastaj diferencë është shtuar për këtë.
CSS ka një shumë të quirks.
Deri tani kjo është 50% e faqes gjerësisë.
Por mos harroni se ju keni 10 pixels hequr nga çdo anë.
Pra, në qoftë se ju ishin të lëvizin atë kundër buzë e majtë të shfletuesit,
atëherë ajo do të duken si 50%.
Përsëri, si i tha, CSS mund të jetë një shumë e me mend-dhe-kontroll.
Si, ju mendoni se diçka është e do të sillen në një mënyrë,
por ajo sillet një mënyrë krejtësisht të ndryshme.
>> ALLISON BUCHHOLTZ-AU: Dhe ju vetëm të merrni më të zgjuar,
dhe ju vetëm të marrë një më të mirë intuitë për të si ju lëvizin së bashku.
>> Tomas Reimers: Dhe kjo merr më keq dhe më keq.
Pra, kjo është me të vërtetë vetëm një garë.
>> ALLISON BUCHHOLTZ-AU: Kjo është super inkurajues.
Ne duam që ata të pëlqen CSS.
>> Tomas Reimers: CSS është awesome.
Mos harroni se.
Pyetje të tjera?
>> ALLISON BUCHHOLTZ-AU: një gjë.
Çdo gjë tjetër?
Ftohtë.
>> Tomas Reimers: mbresëlënës.
>> ALLISON BUCHHOLTZ-AU: E pra, në qoftë se ju djema keni ndonjë pyetje më vonë,
ne jemi gjithmonë në dispozicion si për zakonisht.
Ju ndoshta do të shihni disa na i për projektet përfundimtare
dhe patjetër në hackathon.
>> Tomas Reimers: Absolutisht.
Dhe në panair.
>> ALLISON BUCHHOLTZ-AU: Dhe në panair.
Oh.
>> Tomas Reimers: Pres që të duke parë të gjithë e awesome-- tuaj
>> ALLISON BUCHHOLTZ-AU: Ne do të shohim të gjitha faqet e internetit tuaj awesome
që do të jetë e bukur.
Tomas Reimers: Ju mund gjithmonë shih, si, faqet e internetit
që kishte, si, CSS mirë dhe pastaj si ata që nuk kanë të përpiqet të bëjë CSS.
ALLISON BUCHHOLTZ-AU: Gjithashtu, një tjetër gjë, një gjë më shumë për të parë në
është Bootstrapping.
Pra bootstrap është e madhe.
>> Tomas Reimers: Google që nëse you--
>> ALLISON BUCHHOLTZ-AU: Google ajo.
Është i pabesueshëm.
Ju do të love it.
Dhe tani që ju keni një kuptim themelor i CSS,
ajo do të bëjë shumë më tepër kuptim.
Awesome.
Faleminderit, djema.
>> Tomas Reimers: Ju faleminderit aq shumë.