>> [MUZIKO Ludante]
Allison BUCHHOLTZ-AU: Do ni esence nur tuj
por doni al vi resumo de CSS, ĉar ni scias
kiu ne estis kovrita en ĉiuj sekcioj.
Kaj ni vere volas certigi ke vi infanoj havas tiun ilon je via dispono,
ĉar ĝi havas la kapablon fari via retejoj aspektas multe pli bela.
>> Kaj se vi konstruas retejon, tiam Vi probable volas fari ĝin bela.
Mi volas diri, vi ne devas, sed mi ŝatus sugesti ĝin. [Ridadoj]
Se vi volas uzantoj uzi ĝin, vi eble volas fari ĝin iom [inaudible].
Do ni tuj provi kaj doni al vi nur iuj bazaj iloj kaj scio,
por ke kiam vi eliras kaj vi estas enketante aferojn pri CSS,
ĝi ne estas kompletigi stultaĵoj, kiel CSS kelkfoje esti.
>> Tomáš REIMERS: Yeah.
Allison diris lin sufiĉe bone.
Do mi supozas ke la unua afero ni devus komenci kun estas kio estas CSS?
Do CSS estas imponega.
CSS--
>> Allison BUCHHOLTZ-AU: Tio estas la nomo de nia seminario.
>> Tomáš REIMERS: Yeah.
Estas vere grava ke vi komprenas, ke per tiam.
Se vi nur forpreni unu afero, estas ke CSS se awesome.
Du estas CSS staras por CSS.
Do en sia kerno, CSS estas stilo folio, signifo
ĝi permesas stiligi retpaĝo.
Kaj tiam kion tio signifas, estas vojo aldoni stilo al via reteja.
Do laŭ stilo, ni signifi ĉiun tio ne structural--
tiel aĵoj kiel koloroj, fono bildoj, limoj, kiel, kompletigo,
randoj.
Ni parolos pri kia ĉiuj kiu signifas en iom.
>> Do ni jhus antaŭenirinta kaj malfermis ambaŭ de tiuj en gedit.
Do tiu estas index.html.
Kaj jen estas main.css.
Do main.css havas nenion.
Allison BUCHHOLTZ-AU: Neniu stilo ĝis nun.
Tomáš REIMERS: Neniu.
Kaj kiel vi vidos, estas vere malbela ejo.
Allison BUCHHOLTZ-AU: Estas nur ebenaĵo.
Tomáš REIMERS: Yeah.
Yeah, ne malbelan, estas nur minimalista.
Kaj tiam tie ni havas index.html.
Kaj tial por rapida recap de HTML, Allison,
vi volas nur paroli pri la paĝo?
>> Allison BUCHHOLTZ-AU: Yeah.
Do evidente, ni havas niajn HTML etikedo, kiu ĵus nomoj HTML dosiero.
Ni havas niajn kaplinio tie, kun CSS Awesomeness, which-- se vi reiru.
Kie estas kiu?
>> Tomáš REIMERS: Ho.
Yeah, vi povas vidi.
Allison BUCHHOLTZ-AU: Kaj rimarki la kaplinio
Estas ĉi langeton kaplinio dekstra supren tie.
Kaj tiam "Saluton, mondo!" Estas la teksto kiun ni ĵus
montri en la reto paĝo, kiu is-- reiri.
Reen.
Kiu estas ĵus en nia korpo here-- la nura teksto.
Ankaŭ, unu afero rimarkos, se vi rigardas tie,
Tomas ŝanĝis tiujn du el niaj diapozitivo.
Do kiel longe kiel vi havas ĉiujn tri de ĉi tiuj, vi estas bela.
Ili povas esti en ajna ordo ili volas.
Kio estas plej grava estas ĝuste tiu vi havas ĉiun de tiuj tri aferoj.
>> Tomáš REIMERS: Cool.
Aldoni doc tipo?
Allison BUCHHOLTZ-AU: Yeah.
Tomáš REIMERS: Yeah.
Cool.
Allison BUCHHOLTZ-AU: Ŝajne, miaj mics ne ŝatas min.
Tomáš REIMERS: Ho, donu al ni sek simple dum Allison ŝanĝas siajn mic.
Do jes.
Do ni havas nian ĉefan paĝo.
Estas speco de unstyled.
Ni ne havas multe.
Ni simple devas esence tekston.
Ni havas la stilo folio.
Ni havas la titolon.
Do nur nudajn-boned komponantoj fari retejon.
>> Tuj kiam de tie, ni paroli pri kio CSS estas
kaj kia gxi aspektas kaj ĉiuj de tiu.
Do por that--
Allison BUCHHOLTZ-AU: Reen al la diapozitivoj.
Tomáš REIMERS: Reen al la diapozitivoj.
Kaj Allison povas transpreni.
>> Allison BUCHHOLTZ-AU: Woo.
Akcepti.
Do en via CSS-dosiero, vi tuj devos
multaj tion nomis selectores.
Tio simple estu la Surbaze de via CSS dosiero.
Ĝi simple tuj estos sunaj kaj multaj de ĉi tiuj.
Do seleccionador.
Tiu estas ĝuste la ĝenerala anatomio.
Ni intencas iri tra ekzemploj, ĉar se vi uloj neniam
rigardis miajn sekcio, mi sentas aferojn en la abstrakta
ne vere havas sencon.
Ĝi ĉiam helpas al vidi la ekzemplojn.
>> Do ni havas iujn seleccionador.
Tio tuj estos iu ensalutilo por kion ni volas ke la stilo apliki al.
Kaj tiam ni povas havi ajnan aro de reguloj kaj valoroj.
Do selectores ke vi povus vidi povus esti io kiel korpo,
aŭ alineo kun P, aŭ kaplinio, aŭ kio ajn,
kion vi volas vian HTML etikedoj esti.
>> Do en ĉi tiu kazo, ni havas korpon.
Kaj ni havas iun regulon, kiu ĉi respondas
por kio via stilo koncernas.
Do en ĉi tiu kazo, ni havas fona koloro kaj tiparo pezo.
Do tiu tuj ŝanĝos la fono de io
ene ajna korpo etikedo de nia HTML dosiero.
Kaj ĝi tuj donu tio ĉi lumo blua valoro.
>> Do ĝi estas tuj faros la fona lumo blua.
Kaj poste ion ene korpo estas tuj havos tiparo pezo kuraĝa.
Do ĝi estas nur tuj aŭdaca nian tutan tekston.
Kaj tiu estas ĝuste unu seleccionador.
Sed vi povus havi tre multajn el tiuj.
Kaj kiel ni iras por montri poste, iom pli pri kiel
ke verkojn kaj pli ekzemploj tie.
Io ajn vi volas aldoni?
>> Tomáš REIMERS: No.
Allison havas ĝin.
Ni nur tuj tranĉis kontrauxulon Ekzemple ĉi tie en nia ekzemplo ejo.
Do ni reale preni ĉi.
Estas perfekta.
Do mi simple tuj kopii kaj alglui tiu rajto en nian main.css dosiero.
Kaj Mi iros por savi ĝin.
Kaj tiam ni kuros ĝin.
Do flanka noto, unu el la plej frustra aferojn
estas se vi ne konservi dosieron kaj tiam vi, kiel, reŝarĝi la paĝon,
kaj kiel, kial ne la ŝanĝo okazas?
Okazas.
Do jen ni ekvidis ke ni faris nian retejo lumo blua fono
kaj iuj bolded tekston.
>> Mi devus mencii ankaŭ, se vi infanoj havas demandojn pri io ajn
ni faras, bonvolu libera halti nin kaj petu ni.
Ni estas tute preta al kampo demandoj.
>> Allison BUCHHOLTZ-AU: Evidente, kun CSS, ĉiu agas sur si.
Do se oni ion ne sencon nun, ni
ne volas ke al Ciénaga vin malsupren poste.
>> Tomáš REIMERS: Do ni speco de elsekigi ĉi.
Do vi volas komenci kun la seleccionador tie?
>> Allison BUCHHOLTZ-AU: Yeah.
Kiel mi diris antaŭe, la korpo estas nur nia seleccionador tie.
Do se ni reiru al nia index-- ah.
>> Tomáš REIMERS: Kiun mi simple fermis.
Donu al mi duan.
Do dosiero, Malferma, index.html.
Allison BUCHHOLTZ-AU: Cool.
Do se vi rimarkos tie, ni havas tiujn korpo etikedoj, dekstra?
Do la seleccionador simple respondas al la etikedoj kiun ni parolas.
Do korpo rajton tie.
Do kion ni diras estas everything-- povas foriros?
Se mi povus simple kiel tuŝi la ekrano.
Estus tiel varmege.
>> Do io ene de tiuj korpo etikedoj, kiujn ni vidis
Estis ĝuste, kiel, la teksto, kaj la korpon ĝenerale
referencas al, kiel, la fono.
Se vi iam volas ŝanĝi la fonon,
ke tuj estos en korpo etikedo.
Suficas tiuj reguloj aplikitaj al ili.
>> Do se ni devis iri al index.html kaj- efektive,
ni povas havi ion eksteren de la korpo?
Se ni havus, kiel, oni footer aŭ io, ĝi ne aplikas al ĉi.
Sed io ene tiuj korpo etikedoj tuj
esti tuŝita de ĉi tiu korpo selector kiu ni faris.
Do se vi volus tajpi ion alian there--
>> Tomáš REIMERS: Ni aŭtu tiu hejmo.
Do se ni havis div-- tiel ke estas nur alia etikedo vi povas havi.
Mi tuj fermos ĝin.
Aŭ ni faru ĉi alineon.
Do p staras por alineo.
Kaj ene de tiu paragrafo.
Kaj tiam mi diros: "Tio estas teksto".
Cool.
Kaj poste mi faris tiun regulon apliki al paragrafo anstataŭ la korpo.
Vi vidos kiel ĝi aplikiĝas nur al la ĵus formita alineo, dekstra,
Ne la tuta afero.
Ĉu tio havas sencon?
>> Allison BUCHHOLTZ-AU: Do tiu estas tuta korpo,
sed nun nia seleccionador simple respondas al la paragrafo.
Do ni simple devos aŭdaca kaj blua por tiu specifa alineo,
ĉar tio estas la nura afero ke estas enfermita ene la p etikedo.
>> Tomáš REIMERS: Ĉu tio havas sencon speco de kiel aferoj encapsular aliaj aferoj?
Allison BUCHHOLTZ-AU: Ankaŭ, nur diri, kiel, unu el la plej bonaj manieroj
por vere akiri komforta kun CSS Estas al nur faru aĵojn kiel tiu,
nur elprovi.
Estas tre simpla por tajpi ion el, batis Refresh, kaj vidu kio okazas.
Kaj kiel kun la plimulto CS, eksperimentado povas ofte
konduki al multe pli bone intuicia kompreno.
Ankoraŭ pli ol ni nur, kiel, parolante al vi.
>> Tomáš REIMERS: Absolute 100% konsentas sur tiu punkto.
Do se ni reiru al tiu, ni komencu dissecting ĝuste kio tiuj du fari.
Do ni havas du regulojn pri tio.
Do la unua estas fonkoloro.
Kaj vi vidas, ke ni starigis gxin egala al valoro, lumo blua.
>> Do en CSS CSS estas speco de tre sueltos pri kiel
vi rajtas difini koloron.
Do vi povas difini ilin laŭnome.
Vi povas ankaŭ fari ion kiel "ruĝa."
Kaj tiam se ni reiru al tiu, vi vidos ke la fono estas ruĝa.
Vi povas ankaŭ preni really-- mi pensas vi povas akiri bela creativas kun ĉi,
ĉu ne?
>> Allison BUCHHOLTZ-AU: Mi pensas vi povas uzi deksesumajn.
Ĉu ne?
>> Tomáš REIMERS: Yeah.
Do vi povas uzi deksesumajn.
Sed mi pensas nomo-saĝa.
Ĉu ne ekzistas?
Allison BUCHHOLTZ-AU: Vi povas fari sufiĉe da.
Pli malpli kiel plej kolorojn kiujn vi povas name-- kiel, mi opinias salmo estas unu.
>> Tomáš REIMERS: Ni estas gonna try salmo.
Allison BUCHHOLTZ-AU: Mi pensas Chartreuse estas en tie.
Tomáš REIMERS: Yeah.
Vidu?
Do vi povas akiri belan creativo.
>> Allison BUCHHOLTZ-AU: Vi povis akiri sufiĉe creativo.
Kiel, se vi povas pensi pri la koloro nomo, estas probable en tie.
Se vi vere volas fajna detalo, vi povas iri deksesumajn.
>> Tomáš REIMERS: Yeah.
Do deksesuma.
Se vi uloj memori ĉi reen de via malnova PSET, Bildo rekuperi,
vi uloj devis trakti kun tiuj deksesumajn valorojn.
Kaj ia por recap kio tio estas, Hex havas tri valoroj stokitaj en ĝi.
Do estas en grupoj de du pliigoj.
La unuaj du reprezentas la ruĝan valoron.
La dua unu reprezentas la verda valoro.
Kaj la lasta estas blua?
>> Do FF okazas por reprezenti deksesuma 255.
Do vi havas 255 kolorigitaj 255 verda, kaj 0 por blua.
Kaj valoroj varias inter 0 kaj 255.
>> Publiko: Rajto.
Do esence, ni povus serĉi interreto por ajna koloro ni volas,
kaj identigi la reale konata koloro spektro combo,
kaj tiam ni povus meti ĝin en?
Allison BUCHHOLTZ-AU: Ekzakte.
Do vi havas preskaux kompleta kontrolo super la kolorojn vi volas ene CSS.
Ĉu ni iros al paroli pri fono bildoj poste?
Aŭ ĉu ni volas fari tion?
>> Tomáš REIMERS: Yeah.
Absolute.
Do unue, nur por montri ke ruĝa kaj verda estas flava.
Kaj se vi bezonas iun helpi trovi tion, vi
povas Google ion kiel "kolorŝanĝilo."
Allison BUCHHOLTZ-AU: Ho, ĝi estas tiel bona.
Mi amas Koloro Picker.
>> Tomáš REIMERS: colorpicker.com Estas bona ekzemplo.
Kaj tie, vi vidos ke vi havas plena Photoshop-similaj kolorŝanĝilo.
>> Allison BUCHHOLTZ-AU: Hmm.
Ankaŭ, la malvarmeta aĵoj estas vi povas generi koloro skemoj
por ke vi ne havas, kiel, clashing koloroj.
Tomáš REIMERS: Kaj poste jen la deksesuma valoron supren tie.
Do vi povas ĉiam trovi en linio esence lokoj por ricevi la deksesuma valoro de.
Ĝi estas ne ia ke ĝuste, kiel ni vidi la kolorojn de la mondo en nombroj.
Estas pli ke ni iru en linio kaj trovi kion koloro ni volas,
kaj tiam preni la nombron malsupren.
Ĉar estas nur vere facila maniero referencas aĵojn en CS.
>> Allison BUCHHOLTZ-AU: Kaj tiam tie estas also--
Mi forgesis la ĝustan nomon de la ejo.
Sed tie definitive, mi pensas, iu el Adobo
kiu generas koloro skemoj por vi, kiu estas vere malvarmeta, ĉar vi
definitely-- estas kelkfoje malfacile diveni,
ho, se mi volas uzi tiun koloron, kio povus esti alia utila
uzi aliloke sur mia retejo por, kiel, igi ĝin bela kaj kohera.
>> Tomáš REIMERS: Allison la parolas unu por Adobo nomita Kuler, mi pensas.
Estas K-U-L-E-R.
Allison BUCHHOLTZ-AU: Mi pensas tiel.
Mi estas sufiĉe certa, ke estas unu.
>> Tomáš REIMERS: Mia preferata havas ĉiam Koloro Skemo Designer.
>> Allison BUCHHOLTZ-AU: Ooh.
>> Tomáš REIMERS: Kiu estas now--
>> Allison BUCHHOLTZ-AU: Ha, ĉi tio estas belega.
>> Tomáš REIMERS: Kaj vi povas esence diras, kiel,
Mi volas tri koloroj apud la alia.
Kaj tiam ni fari ion bela.
Kaj tiam vi povas akiri ekzemplon de kion tio povus aspekti.
Kaj tiam se vi ŝvebi super iu el ili donas vin la deksesumajn valoro.
>> Do ĝuste kiel bona maniero por starti pensante pri koloro skemoj
aŭ kion kolorojn en retejo povus iri bone kune.
Ĉar kiu povas esti surprize Ne tiel facila elekti kiel vi pensas.
Kaj tiam la aliaj malvarmeta afero Mi ĉiam trovis pri la ejo
estas se vi batis Ekzemploj, ĝi malebligos montri kion ekzemplo paĝaro
povus aspekti uzante tiu koloro skemon.
Ĉiuokaze.
>> Reen al la reala CSS.
Allison BUCHHOLTZ-AU: Sed evidente, ni konas tiujn referencoj povus esti utila.
Tomáš REIMERS: Ne, ili definitive povas esti helpema.
Do la dua regulo, Allison?
>> Allison BUCHHOLTZ-AU: Yeah.
La dua regulo estas nur responda al nia tiparo.
Do tiparo pezo estas simple speco of-- tiel la pezo volus
esti se vi deziras simple, kiel, normala aŭ, kiel, maldika tiparoj,
aŭ en tiu kazo, kiel, aŭdaca.
Mi forgesas.
Kio, se vi volis it-- estas tie maldika ol simple, kiel, normala?
Tomáš REIMERS: Ne vere se estas pli maldika unu.
Allison BUCHHOLTZ-AU: Mi forgesos.
Do tiparo pezo ni tipe nur uzi por aŭdaca.
Se vi volas ricevi vere en ĝin, ni montros al vi.
W3Schools havas ĉiujn malsamajn tion vi povas fari por tiparoj.
Sed esence, se vi iam volas ŝanĝi nenion pri tiparo,
ĝi estas ĉiam tuj estos, kiel, tiparo-io.
Do estos kiel, tiparo-familio se vi estas klopodi ŝanĝi la realan tipon.
Estos tiparo-stilon, se vi volas fari ĝin kiel kursivon,
aŭ kursivo, aŭ whatnot.
Aŭ eĉ font-koloron, se ni volis ŝanĝi tion.
>> Tomáš REIMERS: Yup.
Do vi povas ŝanĝi tion.
Kaj speco de simple recap nun, por ke vi povu
vidi, ke ni havas la seleccionador supren tie.
Ni havas tiujn frizita krampoj.
Kaj tiam ni havas regularon limigita de punktokomojn.
Ĉu tio havas sencon?
Yeah?
Cool.
Do se tiu estas good--
>> Allison BUCHHOLTZ-AU: Back.
Tomáš REIMERS: Ni parolu specife pri kia selectores ni havas.
'Venigu ĝuste nun ni ia ĝuste montrata etikedoj.
Sed vi uloj povis vidi ĝin kredebla.
Diru vi havas du alineojn en paĝo kaj vi
deziras povos stilo unu sed ne la alian,
vi ne nur volas limigi vin mem devos uzi malsamajn reala HTML
etikedoj doni ilin malsamaj stiloj.
>> Do ni havas tri bazajn tipoj de selectores.
Allison BUCHHOLTZ-AU: Yeah.
Do ni havas etikedon, kiu estas kiu ni parolis pri rajton nun.
Do jen speco de kiel via korpo aŭ p.
Kaj tiam ni havas klason, kiu estas kiam oni difinas ĝin en nia CSS-dosiero,
ĝi estas ĉiam tuj estos streketo ajn Vi volas la nomon de via klaso esti.
Kaj tiu povas apliki al multnombraj aĵoj.
>> Diru vi havas kvin alineoj kaj du el la tri el ili
bezonas esti styled la sama, vi aplikus klason al ĝi.
Kaj tiu estas ĝuste la vojon ni fari ĝin.
Ni donos al vi ekzemplon de kie ĉi efektive montras supren.
Sed se vi havus eble iuj etikedo p, post ĝi, vi skribus,
klaso egalas ajn klasoj vi volas apliki al ĝi.
Do ajn klaso selectores ke ni volas apliki al tiu specifa alineo,
ni povus simple skribi kiel ĉi.
Kompreneble, mi pensas ekzemplo faros ĝin multe pli konkreta.
>> La alia unu ni havi estas identigilo, kiu ni signifi
kun hash, aŭ funto, aŭ hashtag.
Tomáš REIMERS: Octothorpe.
Allison BUCHHOLTZ-AU: Octothorpe.
Tio funkcias, tro.
Kaj tion oni devus vere esti unika.
Ili devus nur aplikos al unu aferon en vian paĝon.
Do ĉu tio estas specifa alineo, aŭ iu ero en listo, aŭ kio ajn,
ĉi devus esti unika.
Kaj en la sama maniero kiun ni ĵus diru, kiel, class = "class1 class2"
tiu povas esti nur identigilo de kiom ni havas.
Tomáš REIMERS: Yeah.
Do ni certe parolos pri ekzemplojn ĉi tie.
Kaj mi simple tuj plonĝi rekte reen en la kodo.
Do ni rigardu nian HTML.
Kaj tiel ni nun havas unu paragrafon.
Jen teksto.
Mi nur tuj modifos ĝin. "Tio estas teksto 1."
Kaj tiam ni tuj havi "Jen teksto 2."
>> Allison BUCHHOLTZ-AU: Dua unu.
Tomáš REIMERS: Yup.
Do ni nun havas "Tio estas teksto 2," ĉu ne?
Kaj ni tuj vidas ke se ni reŝarĝi la paĝon, kion ni tuj trovos
Estas ni estas gonna find--
Allison BUCHHOLTZ-AU: Ooh.
Tomáš REIMERS: Yeah.
Ni intencas trovi "Tiu estas teksto 1 "kaj" Tio estas teksto 2. "
>> Allison BUCHHOLTZ-AU: Kaj el bela flava koloro.
>> Tomáš REIMERS: Kaj vi vidos ke nia seleccionador nun,
kiu aplikiĝas al p La, aŭ paragrafoj, tuŝas ilin ambaŭ,
ĉar ili ambaŭ renkonti la kondiĉo ke ili estas ambaŭ p-etikedo.
Tio faras entute sencon.
Do la demando estas, nu, kio se ni volis nur akiri unu?
Do ĝuste kiel Allison estis diranta, ni havos du aliaj manieroj por fari tion.
Mi tuj komencos kun identigilo.
>> Allison BUCHHOLTZ-AU: Komencu kun identigilo.
>> Tomáš REIMERS: Kaj ambaŭ de tiuj estas atributoj.
Do atributoj ekzistas en HTML.
Kaj kio estas estas iu kiu vi aldonas
en la etikedo, kiu estas apartigi de la etikedo nomo.
Do vi povas havi plurajn atributojn.
Yeah?
>> Allison BUCHHOLTZ-AU: Mi ĵus estis diri, de via ekzemplo de PSET 7
se iu el vi provas vicigi tion al la centro,
vi eble uzis "Text align = centro."
Kaj vi rimarkis tion probable devus esti centrita
via teksto aŭ via stango de navigacio.
Do tio estas nur ankaŭ atributo ke vi povus esti familiara kun.
Tomáš REIMERS: Ekzistas faskon de atributoj kiujn vi vidos.
Yeah.
Kiel bona referenco al PSET 7.
Ni havas identigilo.
Vi povas ankaŭ havi klaso, aĵoj kiel tiu.
Sola etikedo povas havi multajn atributojn.
Do startanta kun identigilo, ni ŝajnigi ni deziras havi identigilo of-- Mi ne scias.
Ni nomas ĝin speciala, ĉar ĉi tiu, ni estas
tuj fari aŭdacan, kaj substreki, kaj kio ajn.
Allison BUCHHOLTZ-AU: Estas gonna esti súper speciala.
Tomáš REIMERS: Do tiu unu, ni havos identigilo speciala.
Do la vojo por elekti tiun, do, estas en main.css, anstataŭ havi p etikedo,
vi faru #special, OK?
Kaj kiu selektas la aferon kun identigilo speciala.
Ĉu tio havas sencon por ĉiuj?
Publiko: Yeah.
Tomáš REIMERS: Cool.
Do nun, se ni prokrastos, ni see-- Whoops.
Yeah.
Ni vidos ke ĝi nur selektu la unu kun identigilo speciala.
Yeah?
Sonoj malvarmeta.
Jes.
>> Publiko: Ĉu io havas Atributo de ambaŭ klasoj kaj identigilo?
>> Tomáš REIMERS: Jes.
Publiko: OK.
Kaj tiam kio okazas se vi tiam donu ĝin iuj reguloj en CSS tiu konflikto?
Tomáš REIMERS: Absolute.
Ni definitive iri paroli pri tio.
Do ĝuste kion vi fartas je, vi ankaŭ povas havi klasojn.
Do ni ŝajnigi mi havis tri paragrafoj kaj mi
volis stiligi la unua du sed ne la tria.
Nu, via unua ideo povas esti, nu, mi povus simple doni la dua unu kun identigilo.
Sed vi ne povas, ĉar identigilo, ekzakte kiel Allison estis diranta,
devas esti unika.
>> Do anstataŭ identigilo, kion vi povas uzi estas vi povas uzi klaso.
Kaj class-- kio permesas Vi devas fari estas esence diras,
tiu apartenas kiel parto de grupo.
En ĉi tiu kazo, nia grupo nomas Speciala.
Kaj kion ni faros tiam estas ni tuj say-- anstataŭ funto,
ni iras al uzi dot.
OK?
Kaj rimarki ke la funto kaj skalara nur ekzisti ene de la CSS-dosiero,
Ne ene de la HTML.
Allison BUCHHOLTZ-AU: Jes.
Grava distingo.
>> Tomáš REIMERS: Mi havas havis tiom baraktas,
ĉar mi metis la hash en la HTML kaj tiam nur sentis stulta por longa tempo.
Rigardu kiel ĝi selektas ambaŭ tiuj kun tiu klaso?
Cool.
>> Nun, la aĵoj povas havi multoblajn klasojn.
Diru Mi volis fari la unuan du havas fonon de flava
kaj la dua du havas tiparon koloro de bluo.
Akcepti.
Mi ne vere scias, kial mi tute volas fari tion, sed mi povas.
>> Allison BUCHHOLTZ-AU: Might ne rekomendis ĝin por via retpaĝaro.
Sed por nia celo, ĝi tion faros.
>> Tomáš REIMERS: Ne bona koloro skemon.
Allison BUCHHOLTZ-AU: Nu, flava kaj bluaj estas miaj gimnaziaj koloroj.
Mi ne scias, kvankam.
Tomáš REIMERS: Allison la alta lernejo havis grandan koloro skemon.
[Ridado]
Tial kion ni povas nomi ĉi estas Ni nomas this-- do ni havos Speciala
kaj ni havas Pretty.
Mi sugestas, por tio, oni uzas multe pli priskriba nomojn.
Allison BUCHHOLTZ-AU: Yeah, mi volus nomas tiun, kiel, flavaj aŭ bluaj.
>> Tomáš REIMERS: Ni ne vere fari veran retejon,
tial ni ne faras tion.
Sed se vi reale havis realan retejo, vi
povus havi, kiel, artikolo kaplinio, artikolo enhavo, unua vorto,
aĵoj kiel tiu, kiu permesas vi estos multe pli priskriba.
Ili estas vere ĝuste kiel variabloj.
Ili devus esti enoficigita en maniero kie Vi povas, like-- yeah, kiel tia.
Perfekta.
>> Do fonkoloro.
Kaj tiam ni tuj say-- tiel la maniero ŝanĝi koloron havas nur "koloro."
Kaj ni tuj faros ŝin blua.
Tio estas malvarmeta.
Do nun ni havas la unuaj du havas specialan.
Apud unu Iĝos havas "class = bela."
Allison BUCHHOLTZ-AU: Kaj poste vi volas aldoni "bela" al la meza.
Tomáš REIMERS: Yup.
Kaj tiam al la meza, aldoni "bela," kio okazas
Estas vi nur havas spacon.
Do la klaso atributon estas spaco-disigita listo
de ĉiuj klasoj kiuj aplikas al tiu etikedo.
OK?
Ne kiel ĉi tiu apartenas al ian specialan klason nomita
"Speciala, spaco, belan."
Ĝi apartenas al du classes-- speciala kaj bela.
Jes?
Cool.
>> Kaj tiam se ni rigardas je kio okazas, ni estas
tuj vidi, ke la unua havas flava fono, nigra teksto.
Dua one--
>> Allison BUCHHOLTZ-AU: --has aŭdaca flava fono kun bluaj tekston.
Kaj nia lasta suficas la blua teksto kiun ni atribuas al ĝi.
>> Tomáš REIMERS: Cool?
Kiom selectores labori?
Imponega.
>> Allison BUCHHOLTZ-AU: Ĉu ni volas paroli pri la konflikto nun do?
>> Tomáš REIMERS: Do yeah.
Absolute.
Do kio okazas se vi havi konflikton, ĉu ne?
Ni ŝajnigi la unua Establas io like--
Allison BUCHHOLTZ-AU: Eble ĉi tiu ŝanĝas la fonon?
Tomáš REIMERS: Yeah.
Do ni tuj faros "bela" ŝanĝi la fonon al salmo.
Allison BUCHHOLTZ-AU: Vi estas prava koncerne cxiujn grandajn koloroj hodiaŭ, Tomas.
Tomáš REIMERS: Yeah.
Ĉar mi trovis ekstere mi povas uzi salmon kiel reala koloro.
Do ni nur tuj faros.
Mi ankaŭ pensas Sunsubiro estas reala koloro.
Publiko: Sunsubiro estas vera koloro?
Allison BUCHHOLTZ-AU: Ni provu ĝin.
Tomáš REIMERS: Post tiu demo ĝuste ĉar en kazo salatojn supren,
Mi ne volas esti elpurigi.
Do ni scias salmo estas vera koloro.
Do ajna divenoj pri kio okazos?
>> Allison BUCHHOLTZ-AU: Ajna ideo?
>> Publiko: [inaudible].
>> Tomáš REIMERS: Yeah.
Do vi havas ĝin ĝuste.
Esence, ĝi prenas la lasta regulo ke estis donita.
>> Allison BUCHHOLTZ-AU: Do tiu estas kie kaskadan venas en efikon.
>> Tomáš REIMERS: Do memoru kiom ni havis tiun CSS?
Do, per tio, ni ia signifi ke ni havas aron da reguloj
kiuj aplikas sur supro de unu la alian, kaj Ili povas ankaŭ nuligi reciproke.
>> Allison BUCHHOLTZ-AU: Do ajn, cxe la malsupro
superstiros ajn estas ĉe la supro.
Vi povus havi regulojn kiuj tute neas ion antemano.
Tio estas ankaŭ kial oni volas esti zorgema kiam vi estas stilo,
, do vi ne kreas regulojn kiuj vi nur tute supera.
>> Tomáš REIMERS: Aŭ eble vi ĉu volas anstataŭigi reguloj.
>> Allison BUCHHOLTZ-AU: Aŭ eble vi faru.
Jes.
>> Tomáš REIMERS: Pretend vi havas klaso kiu aplikas al plej aĵoj,
sed diru vi volas ŝanĝi la fonkoloro al ruĝa kaj la tiparo
pezo al aŭdaca por plej aĵoj, sed por unu,
vi nur volas la fonkoloro esti ruĝaj sed vi volas ĉiuj aliaj
propraĵoj, vi povus fari ion kiel "font-pezo = normala"
kiuj devus tiam malfari ke aŭdaca ŝanĝon.
Yeah?
Denove, la bona maniero, mi pensas Allison diris, estas nur praktiki.
>> Allison BUCHHOLTZ-AU: eksperimentadoj.
>> Tomáš REIMERS: Praktiko, praktiko, praktiko, kaj eksperimento.
Mi konas multajn personojn kiuj pensas CSS estas ĝuste multajn divenon-kaj-ĉeko
ĉe la fino de la tago, kie se vi deziras fari something-- kiel,
vi havas aspran ideon, sed Vi ankoraŭ probable bezonas
provi gxin por certigi Vi scias kia gxi aspektas.
>> Publiko: Kiam vi aplikanta klasoj, pli ol unu
al la sama paragrafo aŭ sekcio, ĉu
afero kiu ordo vi povas tajpu ilin en la citiloj?
>> Tomáš REIMERS: Ne, tute ne.
>> Allison BUCHHOLTZ-AU: Kio gravas estas la ordon ene de via CSS stilo folio.
Publiko: Ĉu vi povus ripeti la demandon?
Tomáš REIMERS: Ho.
Allison BUCHHOLTZ-AU: Ene klaso, kiam vi donante klasoj
al iu en la HTML, faras gravas kiu ordo ili estas en?
Ne gravas la ordo.
Kio gravas estas la maniero de la klaso selectores ene via CSS,
ene de via stilo folio.
>> Tomáš REIMERS: Sono bona?
>> Allison BUCHHOLTZ-AU: Lovely.
>> Tomáš REIMERS: Kaj poste ni tuj daŭrigi to--
Allison BUCHHOLTZ-AU: Kion ni havas nun?
Mi forgesas.
Ho, ni nur devas ekzemploj.
Sed ni specon de farita tiujn.
Ni jam faris ekzemplojn sur la muŝo.
>> Tomáš REIMERS: ni atingos kombini la selectores frue.
>> Allison BUCHHOLTZ-AU: Ho, ni preni kombini selectores.
Tomáš REIMERS: Do iuj ekzemploj estas ni havas
# Dog-- funto, aŭ hashtag, aŭ octothorpe, aŭ kion ajn
vi volas nomi that-- akra.
>> Allison BUCHHOLTZ-AU: Sharp hundo.
>> Tomáš REIMERS: Tiam vi havas .pets.
Io havas identigilo de hundo, ekzistas nur unu hundon sur la paĝo.
Io havas identigilo de kato, ekzistas nur unu katon.
Povas esti multaj dorlotbestoj sur la paĝo.
Tial ni donadis klasoj.
Vi havas ekzemplon de p.
Kaj poste venis unu el la lasta ekzemplo, kiun
estas io ni ne raportis, estas kio okazas kiam vi kombini ilin.
Do p.pets.
>> Do por ke, ni reiros al la kodo kaj enkonduki another-- yeah.
Do reen tie.
>> Allison BUCHHOLTZ-AU: Mi sentas kiel ĉi estas really--
kiel simple rigardante tra ekzemploj estas vere la vojon por lerni ĉi.
Do, tio estas kion ni faras.
>> Tomáš REIMERS: Do ni ŝajnigi ni nur volas elekti teksto 2, ĉu ne?
Do ni certe ne povas faru tion kun identigilo.
Nu, ni povus fari tion kun identigilo, sed ne havas identigilo.
Mi povus aldoni la unuan, sed ni ŝajnigi ke mi ne volas aldoni unu
aŭ ĝi jam havas ion alian.
Mi ne povas fari tion kun tiu.
La etikedo estas definitive ne unika, dekstra?
Kaj nek estas la klaso.
Sed vi povas kombini tion.
Supozu ke ni volis fari iun kiun nur koncernas aferojn
havi la klason speciala kaj kiu havas la klason bela.
>> Do kion vi povas fari estas en main.css, vi povas diri, ni unue forigi ĉi.
Vi povas kombini tiujn.
Do vi povas fari .special.
Neniu spaco.
Nur .special.pretty.
Kion tio signifas estas io kiu estas ambaŭ speciala kaj bela.
Ĉu tio havas sencon?
Kaj se ni iros tien, kio vi tuj vidos
Estas ĉi tiu regulo validas nur por la dua, kiu havas ambaŭ el tiuj.
Kaj vi povas fari tion por multaj aferoj.
Vi povas say-- ni ŝajnigi Mi nur volis
fari aferojn kiujn havas la klason bela kaj kiuj estas ankaŭ alineo etikedo.
Do p.pretty.
Ni pretendi ke mi havis io bela sur la etikedo korpo.
OK?
Mi povas kuri ĉi kaj mi povas vidi ke ĝi estas nur
tuj apliki al tio, kio estas paragrafoj kun la klaso belan.
Kaj vi povas kombini tiujn, esence, kion vi volas.
Do vi povas simple kunmeti ilin.
Ĉu tio havas sencon?
Allison BUCHHOLTZ-AU: Do tiu speco de estas pli utila
kiam, Tomas diris antaŭe, eble vi havas tre komplika retejo,
kaj oni jam havas multon de tiuj reguloj skribitaj,
kaj vi nur bezonas kombini du de antaŭe.
Ŝati anstataŭ verki tutajn nova seleccionador kaj ŝanĝante ĝin tie,
vi povas simple kombini ili kie koincidas.
>> Tomáš REIMERS: Aŭ vi trovu out-- kelkfoje
ekzistas unu klaso kiu faras tiparo la koloro kiel bluaj,
kaj tie estas alia klaso kiun faras la fono blua.
Kaj tio simple ne funkcias.
Do vi skribu speciala kazo, kie, like-- sed se ĝi havas ambaŭ, kion vi estas
tuj fari estas vi tuj fari ĉi tiu ĉi nuanco de blua
kaj ĉi tiu ĉi tiu alia nuanco de bluo.
Dekstra?
>> Allison BUCHHOLTZ-AU: Bona por tiuj specoj de esceptoj.
Tomáš REIMERS: Do al pensi problemoj
kiuj povus ekesti kiam vi kombini ilin.
Cool.
Do reen al nia prezento.
Allison BUCHHOLTZ-AU: Ni estas preskaŭ tie.
Tomáš REIMERS: Kaj haltis konektiĝi.
Allison BUCHHOLTZ-AU: Ho, ne.
Allison BUCHHOLTZ-AU: CS ĉe la oficejo, Interreto iras malsupren.
Ho, la ironio.
>> Tomáš REIMERS: Do feliĉe, ni povas prezenti sen la interreto, mi supozas,
ĉar ni havas ĉiujn diapozitivoj tie.
Do ni parolu pri la interrilato de etikedoj.
Allison BUCHHOLTZ-AU: Rajto.
Do ĝuste speco de iri ekstere de kio Tomas diris,
tiu estas nur alia maniero de fari ĝin.
Do ni havas iujn patro Selektilo kun infano seleccionador.
Do en ĉi tiu ekzemplo tie, ni havas kelkajn korpo kun klaso navbar, klaso butonon.
Ah.
>> Tomáš REIMERS: Ho, pardonon.
>> Allison BUCHHOLTZ-AU: Kaj esence, kion tio signifas
Estas elekti ĉiujn de la infanoj, kiel ĉiuj tiuj specoj de selectores,
ene tiu gepatra seleccionador.
Kaj tiuj estas la solaj ĝi iam tuj apliki al.
Mi ne scias ĉu vi havi bonan vojon of--
Tomáš REIMERS: Do mi Versxajne la maniero pensi
pri tio memoras antaŭ kiom Ni speco de kiel meti ilin kune.
Kaj tiam tiu signifas unu elemento kiu koincidas ĉiuj tiuj.
Kio ĉi estas diranta estas, mi Want You parigi ĉiun
ene some-- mi volas vin trovi selector.
Kaj tiam ene de tiu, mi volas vi parigi novajn aĵojn.
Dekstra?
Do en CSS, ĉio pri ia povante kongruas tiujn erojn.
Kaj vi povas provi por kongrui erojn ene aliajn erojn.
>> Do ni vere faras ekzemplon, kaj ni pensas ke tion klarigi.
Do ni ŝajnigi ni havas speciala, speciala ĉarma, kion ajn.
Kaj tiam ni havas ligilon, OK?
Do memoru, a estas ligilo.
Ĝi estas ne tuj iros ie.
Kaj ni tuj doni ĝin la klaso ligilo, mi supozas.
Ni donu al ĝi la class-- doni al mi ideon.
Allison BUCHHOLTZ-AU: Cool.
Tomáš REIMERS: Coo-- ni iru al ĝi la klaso bela.
Kial ne?
>> Allison BUCHHOLTZ-AU: OK.
Tomáš REIMERS: Do nun Pretty Things
Tuj Faros la fono blua, fonkoloro de salmo.
Tio havas sencon.
Kaj se ni faras this--
>> Allison BUCHHOLTZ-AU: Ĉu vi volas aldoni tekston
tial la hiperligilo efektive montras supren?
Tomáš REIMERS: Tio estus bona alvoko.
Allison BUCHHOLTZ-AU: 'Afero dekstra nun ni nur gonna akiri nenion.
Tomáš REIMERS: Do Jen ligilo.
"Jen ligilo."
Ho, kaj tiu tuj kiel alian ligilon.
Ni donu al ĝi la klaso "malvarmeta."
Vi pravas.
Cool.
Do ĝuste nun ni iras ekpreni ĉi.
Ni intencas ĵeti unu.
Ni havas unu en la speciala etikedo, kaj ni ankaŭ
tuj havos en la bela tag.
Kaj nun kion ni tuj fari estas ni tuj faros cool--
kion ni volas ke faras?
Allison BUCHHOLTZ-AU: Ĉu ni povas fari ĝin pli granda?
Tomáš REIMERS: Ni donu al ĝi limon.
Allison BUCHHOLTZ-AU: Ni povus limo.
Tomáš REIMERS: Yeah.
Do ni tuj fari ion kiel, limo is-- kaj ni
tuj klarigos ĉi ĉiujn en unu sekundo.
Por now--
>> Allison BUCHHOLTZ-AU: Por la skatolo modelo.
Tomáš REIMERS: Sed nuntempe, ni estas nur tuj donos ĝin limo.
Do kion tio signifas estas ke vi estas tuj vidos tiujn ligilojn.
Kaj vi tuj vidos, ke ili havas tiujn, kiel, malbela nigra limoj, kiuj
estas malvarmeta.
>> Allison BUCHHOLTZ-AU: Nia retejo estas tre ĉarma.
>> Tomáš REIMERS: Yeah.
Nia retejo estas imponega.
Tiuj du estas ligiloj, kaj ili aperas.
Nun ni ŝajnigi min nur volis fari ĉi
se ĝi ne estis ene ion kiu havis fonon de salmo.
Do memoru ke ĉi tiu havas fonon de salmo,
ĉar ĝi estas de klaso belan.
>> Sed ni volas diri ke nur malvarmigas kio estas en klaso speciala, ne en klaso
belaj, devus havi tiun limon.
Nu, kion vi povas fari estas vi povas diri, .special, spaco, .cool.
Kaj kion tio cxi tio farigxis, kiam vi pensas pri ĝi, estas ĝi estas esence dirante:
OK, trovi min ĉiun kiu kongruas speciala.
Tiam ene de tiuj etikedoj, serĉi Min ĉio tio malvarmeta.
Allison BUCHHOLTZ-AU: Do alia maniero kiuj povus esti bonaj por pensi pri tio,
alportante ŝin reen al C, estas ĝuste kiel la ideo de atingo.
Do kiam oni havas iun seleccionador, kiel tiuj
ke ni estis laborante por antaŭ tiu, via tuta TTT paĝon, ĉiuj de via HTML
estas inter viaj atingo, dekstre?
Sed kiam ni havas tiujn patro-filo interrilatoj,
estas kvazaŭ vi striktante malsupren kie vi serĉas al specifa loko,
kvazaŭ, kiel, ni serĉas ene specifa funkcio anstataŭ
de nia tuta dosiero.
Publiko: Tiel kun tiu en menso, volus ĝi jam importis se ni havis changed--
Allison BUCHHOLTZ-AU: La ordo?
Publiko: --La klaso en CSS al .cool, spaco, .special?
Allison BUCHHOLTZ-AU: Jes, ĉar tiam tiu
dirus, medio al ĉiu kiu havas cool,
kaj tiam rigardi kion has-- Mi volas diri, kiel, en tiu kazo,
Mi ne kredas ke estus ŝanĝinta ĝin.
>> Tomáš REIMERS: Se ni diris kion?
Pardonu.
>> Allison BUCHHOLTZ-AU: Se ni medio malvarmigi kaj tiam
serĉi aferojn ekster specialaj, estus la samaj, fakte.
>> Tomáš REIMERS: Do ne estus.
>> Allison BUCHHOLTZ-AU: estus ne?
Ho, ho bone.
Mi malpravas.
>> Tomáš REIMERS: Do la kialo ĝi estas different-- komuna mistake--
estas ke nun nur la ligilo havas cool, dekstra?
Mi supozas mia demando al vi uloj estas, Kio en tiu paĝo parigitaj per .cool?
Estas du etikedoj ĉi tie, ĉu ne?
Kiu estas ĉi tiu kaj ĉi tiu.
Ambaŭ kongruas malvarmeta.
Nenio alia.
Do se vi diris, .cool, spaco, .special, kion vi intencas diri estas,
ene de tiuj etikedoj, kio estas speciala?
Allison BUCHHOLTZ-AU: Hm.
Tion it-- pravas.
Ĉar estas kiel ĵus ion tie.
>> Tomáš REIMERS: Do ĝi selektas nenion.
>> Allison BUCHHOLTZ-AU: dum kiu kun specialaj, ni estas en tiuj etikedoj tie.
>> Tomáš REIMERS: Tiuj kaj tiuj.
Publiko: OK.
Do tiuj etikedoj de la antaŭen slash?
>> Tomáš REIMERS: Jes.
Ĉu tio havas sencon?
Kiel ĝi estas esence provante mallarĝigi medion.
Allison BUCHHOLTZ-AU: Yeah.
Mi kredas ke tio estas probable la plej facila vojo pensi pri ĝi.
>> Tomáš REIMERS: Do ni trovis cxi, kaj ni trovis ĉi ambaŭ parigitaj speciala.
Kaj tiam ni mendas, ene tiuj knaboj, kio estas malvarmeta?
Kaj ene de ĉi tiu, ĉi onia malvarmeta.
Ene ĉi tiu, nenio estas malvarmeta.
Do tiu estas la ununura etikedo kiu restas.
>> Allison BUCHHOLTZ-AU: Dum malvarmeta estas ĝuste ene de tiuj oni etikedoj tie.
Tomáš REIMERS: Ekzakte.
Kaj kio estas speciala ene de tiuj?
Nenio.
Nun, kion mi diras estas se ne estis spaco,
vi demandas kio estas malvarmeta kaj special-- aŭ kio estas bela kaj speciala, ĉu ne?
Se vi diras .special.pretty, jen la sama kiel .pretty.special.
>> Pro kio foriganta la spaco estas petante estas, kiam vi diras .special,
vi demandas, OK, , kiuj estas speciala?
Kaj poste el tiuj, kiuj aĵoj estas ankaŭ bela,
kio estas la samo, gramatike, kiel demandante, kio estas bela,
kaj tiam de tiuj, kio estas ankaŭ specialaj?
Dekstra?
Estas la diferenco de kio estas ene de kio estas.
Publiko: OK.
Tomáš REIMERS: Yeah.
Imponega.
Do kun tiu en menso then--
>> Allison BUCHHOLTZ-AU: mi kredas nia lasta afero estas (en fantaziaj brita akcento)
la skatolo modelo.
>> Tomáš REIMERS: La box-- [sonoj] Mi amas la vojon Allison diras tion.
Do la skatolo modelo afero.
>> Allison BUCHHOLTZ-AU: Nur havi skatolo, mi estos via skatolo modelo.
Tomáš REIMERS: Do ni parolu pri tio.
Do ĝuste nun ni pasigis multe el tempo parolante pri selectores.
Per nun, vi uloj estas probable, kiel, majstroj de selectors-- vi scias,
kiel ĝuste elekti la enhavon kiu vi volas manipuli en via ekrano.
>> Do nun la demando estas, kiom ĝuste povas vin manipuli ĝin?
Do mi supozas ke la plej baza maniero pensi ke
estas, nu, kion ekzakte estas ero en CSS?
Ni pasigis multan tempon raportante, kio estas etikedo,
kia estas la plej baza prezento de etikedon?
>> Bona maniero pensi Tio estas, kio formo estas salmo?
Kio formo estas, kiel, la salmo-kolorita fono?
>> Publiko: Estas rektangulo.
>> Tomáš REIMERS: Estas rektangulo, dekstra?
>> Allison BUCHHOLTZ-AU: Ne estis lertaĵo demando.
[Ridado]
>> Tomáš REIMERS: Ne provas trompi vi uloj tiu postrestas.
Do ni havas ĉi rektangulo.
Kaj la etikedo estas p, dekstra?
Por ke ĝi donas al ni bonan kredo, ke la alineo
estas reprezentita kiel rektangulo, je almenaŭ en la menso de la navegador, kiu
ĝi estas.
>> Allison BUCHHOLTZ-AU: mi volas diri, retumiloj estas tipe rektangula,
sekve ĝi havas sentita.
>> Tomáš REIMERS: La ideo tie estas ke ĉiuj etikedoj ene CSS
estas reprezentitaj kiel ortangulo.
Kaj ĉiu rektangulo havas kvar partoj laŭ CSS, OK?
Vi havas la fakta enhavo.
Tie estas kie la teksto troviĝas.
>> Allison BUCHHOLTZ-AU: Eble via foto.
>> Tomáš REIMERS: Yeah.
Vi havas kompletigon, kiu estas nur ia blanka spaco.
Tiam vi havas limon.
Kaj tiam vi havas randon, kiu Estas blanka spaco ekster tiu.
Por ke ne havas sentita al ĉiu, do ni estas
tuj parolos pri tio dum sekundo.
Do ĉi tie, kion ni faros Estas ni iras al krei iuj divs, OK?
Pardonu min dum I--
>> Allison BUCHHOLTZ-AU: Mi sentas ŝatas ni devus meti cute bildo en.
>> Tomáš REIMERS: Ni definitive devus.
>> Allison BUCHHOLTZ-AU: Mi sentas min kiel ĉiu
povis profitigi de cute bildo, estas ĉio.
>> Tomáš REIMERS: Povas ĉiuj profitigas de a--
>> Publiko: Yeah, certa.
Tomáš REIMERS: OK, malvarmeta.
Do ni devus meti cute Bildo en ie.
Allison BUCHHOLTZ-AU: mi sentas min kiel cute kuniklo povas esti utila nun.
Tomáš REIMERS: Sure.
Allison BUCHHOLTZ-AU: Fino de la semajno.
Havi ion adorab--
>> Tomáš REIMERS: Kiamaniere bout katido?
>> Allison BUCHHOLTZ-AU: A katido laboras, tro.
>> Tomáš REIMERS: Cool, ĉar tie estas loko por tio.
Ĝi nomas PlaceKitten.
Allison BUCHHOLTZ-AU: Tio estas granda.
Tomáš REIMERS: Jes.
Allison BUCHHOLTZ-AU: Nur por, kiel, lokokupilon bildoj en via retejo.
Tomáš REIMERS: Hmm.
Ekzistas ankaŭ PlacePuppy.
Kaj estas PlaceBacon.
>> Allison BUCHHOLTZ-AU: PlaceBacon?
Vere?
>> Tomáš REIMERS: Ho, ni ne havas retkonekton tie.
>> Allison BUCHHOLTZ-AU: [ĝemoj]
Tragika.
Tomáš REIMERS: Alie Mi montrus vin infanoj
kiel meti bildojn en via paĝo.
Ni tuj provos atingi ĉi laborante antaŭ ni devas iri.
Sed nuntempe, ni ĵus tuj parolos en koloroj tiam.
Ni volas enmeti bildojn de kittens--
>> Allison BUCHHOLTZ-AU: Ni faris.
>> Tomáš REIMERS: --La Interreta malsupren por la momento estante.
Do ni havas du divs, kaj ni estas tuj donos ilin du ids.
Ni tuj nomas ĝin "Unua" kaj "dua."
Do id = "unua".
Kaj ni tuj doni ilin du koloroj.
Nu do kiel ni elektu ion kun identigilo de "unue"?
Allison BUCHHOLTZ-AU: Dot aŭ hash?
Publiko: Sharp.
Tomáš REIMERS: Akra, perfekta.
Sharp, hash, kion ajn we--
>> Allison BUCHHOLTZ-AU: Multaj eventoj nomi ĝin.
>> Tomáš REIMERS: OK.
Ni intencas starigi en la hashtag, kaj ke estas kion ni tuj iru kun.
OK?
>> Allison BUCHHOLTZ-AU: hashtag.
>> Tomáš REIMERS: Do hashtag unua.
>> Allison BUCHHOLTZ-AU: Do vi povas tuitear la seminar--
hashtag CSS hashtag malvarmeta.
Tomáš REIMERS: hashtag awesomeness.
Allison BUCHHOLTZ-AU: Hashtag awesomeness, jes.
Tomáš REIMERS: OK.
Do ni havas "unua" kaj "dua."
Do unue, ni tuj devos fona koloro de ruĝa.
Allison BUCHHOLTZ-AU: Uh, dupunkto.
Tomáš REIMERS: Yup.
Allison BUCHHOLTZ-AU: Mi estos via loko kontrolilo.
Tomáš REIMERS: Allison sukcese min.
Fono-koloro de blue--
>> Tomáš REIMERS: Purpura!
>> Tomáš REIMERS: Purple.
Allison BUCHHOLTZ-AU: Jes.
Purpura de mia koloro favorito, kaj ni ne uzis ĝin ankoraŭ.
>> Tomáš REIMERS: Violet.
Allison BUCHHOLTZ-AU: Violet.
Tio funkcias.
>> Tomáš REIMERS: Do ni estas tuj havos du divs.
Ili tuj estos plene malplena.
Ni devus probable havas iun tekston.
Do "unua" tuj estos "SALUTON".
Kaj la "dua" estos say--
>> Allison BUCHHOLTZ-AU: Adiaŭ.
>> Publiko: - "MONDO".
Saluton, adiaŭ.
Allison BUCHHOLTZ-AU: mi vidis ilin en koncerto la alia semajno.
Tomáš REIMERS: The Beatles?
Allison BUCHHOLTZ-AU: Por reelaj nombroj.
Ili ne estas tiu granda.
Mi ne ŝatas ĝin.
>> Tomáš REIMERS: Ni havas "SALUTON" kaj "Goodbye."
Kaj denove, CSS estas ĝuste awesome, ĉar ĝi rekonas nian kolorojn.
Ne necesas eĉ maltrankviligi ke ekzistas.
Ili faros.
>> Allison BUCHHOLTZ-AU: ili ekzistas.
>> Tomáš REIMERS: Do CSS Furaĝo havas 255 vortoj por paroli pri koloro.
Se vi pensus al koloro ekstere tiuj 255, kiel mi estos impresitaj.
Allison BUCHHOLTZ-AU: Yeah.
Mi pensas vi uloj povas havi nur enveni tuj post.
>> Tomáš REIMERS: Do jen, vi vidos ni havas du skatoloj
rajto sur supro de unu la alian, ĉu ne?
Saluton kaj adiaŭ.
>> Allison BUCHHOLTZ-AU: Mankas spaco en inter.
Ili estas nur smooshed rajto sur supro de unu la alian.
>> Tomáš REIMERS: Do la unua afero Mi supozas ke ni devus paroli pri
Estas ni ankaŭ say-- yeah.
Do CSS reprezentas ilin kiel speco de skatoloj.
Kaj kiel skatoloj, ili havas enhavon.
Kaj la enhavo nun estas ia la SALUTON aŭ la adiaŭ kaj tio estas ĝi.
OK?
>> Do unu el la unuaj aferoj kiujn vi povas fari estas vi povas aldoni kompletigon.
Kompletigo diras kiom spaco ĝi devus forlasi ambaŭflanke.
Do diru mi volas diri 10 rastrumeroj ambaŭflanke.
Kaj Mi elsekigi ke en dua.
Allison BUCHHOLTZ-AU: Ĉiuj de ĉi tiuj aferoj tie
tuj estos plejparte en rastrumeroj por la resto de la seminario.
Vi tuj vidos ke ĝi havas iu spaco ĉirkaŭ ĝi, ĉu ne?
Do, kion vi ne vidas ĉi tie estas ke estas tiu nevidebla ia kompletigo
ambaŭflanke, kio diras, kiel, OK, vi havas vian vazon content--
>> Allison BUCHHOLTZ-AU: Ĉu vi volas ricevi justan elsxiros inspekti elemento?
>> Tomáš REIMERS: Yeah, tio estas bona ideo.
Allison BUCHHOLTZ-AU: Ankaŭ, mi trovas ke la inspekti elemento estas bona maniero
elkompreni se io okazas erara, io neatendita okazas,
inspektinte la etikedoj kaj vidante kion estas kiel anstataŭigi ĝin estas helpema.
>> Tomáš REIMERS: Do mi ne certas se vi uloj povas vidi ĉi koloro.
Ĉu vi?
Vi vidos ĉi kompletigo en la varo de latero.
Kaj tiam oni vidas la realan enhavo en blua, dekstra?
Do tio estas la tre Bazaj de la skatolo modelo.
Vi havas enhavon.
Tiam vi havas kompletigon.
>> Publiko: Kial ne simple uzi la skatolo interne the--
>> Allison BUCHHOLTZ-AU: Rajto.
Ĉar estas nur elektanta la elemento nun.
>> Tomáš REIMERS: Yup.
Aliaj aĵoj.
Do ni parolu pri tio kompletigo komando dum sekundo.
Do en CSS mezuradojn bezonas havi unuecon.
Do unue vi havas la kvanton.
Do en ĉi tiu kazo, ni diris 10.
Kaj tiam la proksima ni diris estas rastrumeroj, px.
Aliaj aĵoj vi povus havi estas aferojn kiel centimetroj, coloj.
Vi povas fari tion ŝatas, kio estas 10 coloj?
Kaj ĝi tuj estos ridinda.
>> Allison BUCHHOLTZ-AU: Ho, knabo.
>> Publiko: Halt.
>> Tomás kaj Allison: Yeah.
Tomáš REIMERS: Do jen ĉio kompletigon.
Mi tuj reiri al rastrumeroj.
>> Allison BUCHHOLTZ-AU: pixeles inklinas esti, same kiel, la normo.
Kiam vi rigardas multajn retejojn, Ili plejparte laboras en rastrumeroj.
Tomáš REIMERS: Do vi tuj vidos ĉu pixels-- la aliaj aĵoj vi vidas
estas em, kiu estas unu em estas egala al la alteco de la tiparo
kion vi nuntempe uzanta.
>> Allison BUCHHOLTZ-AU: Mm.
Tomáš REIMERS: Estas bona maniero por diri, kiel, mi volas tiom da spaco kiel mia tiparo
estas prenante.
Allison BUCHHOLTZ-AU: ne sciis tion.
Vi lernas ion novan ĉiutage.
Tomáš REIMERS: Estas multajn mezuradojn en CS.
Mi sugestas ke vi rigardu ilin.
Pro viaj kazoj, mi pensas rastrumeroj devus esti sufiĉa.
Kaj ili estas ankaŭ kio vi tuj vidos
en la plimulto de ekzemploj farita en linio.
Do ni lasos ĝin ĉe rastrumeroj.
>> Vi povas ankaŭ, mi devus say-- tiel kompletigo aroj ĉiuj paddings.
Vi povas ankaŭ fari ion kiel "Kompletigon-top" je justaj set--
Allison BUCHHOLTZ-AU: Eble ni ricevos nian "SALUTON" dorso.
Tomáš REIMERS: --to momento subiris la kompletigon sur la supro kaj nenio alia.
Do la kvar comandos estas kompletigo-supro, kompletigo-fundo, kompletigo-maldekstra,
kaj kompletigon-rajton.
>> Allison BUCHHOLTZ-AU: Just like atendite por skatolo.
>> Tomáš REIMERS: Yeah.
Nenio tro freneza tie.
Ĉu tio havas sencon?
Do kiu estas kompletigo.
Mi iras al starigis la tutan la paddings reen al 10.
Kaj poste mi iros pluveturi al bordo.
>> Do kio bordo estas estas limo estas bizara komando.
Ĝi prenas ia tri aferojn samtempe.
Do la unua estas kiel granda vi volas ke tio estu kiel mezurado.
Denove, Mi nur uzante rastrumeroj.
Kaj la lasta afero mi devus aldoni al mezuradojn
Estas la sola afero, kiun ne bezonas unuo estas 0.
Estas vere malĝusta doni 0 unueco,
ĉar 0 estas 0 trans coloj, rastrumeroj, centimetroj, kion ajn.
Ĉiu simple signifas 0, dekstra?
Do unue vi donos gxin al gxia arangxo.
>> Tiam vi donos al ĝi la stilo.
Do mi intencis diri "solida".
Kaj ni parolos pri kion tio signifas.
Kaj poste persiste, vi donas al ĝi koloron.
Do mi intencis diri "nigra."
Kaj jen estas cxio ni nun vidis antaŭe, krom stilo,
sed ni parolos pri tio.
Do vi infanoj vidis mezuradojn, kaj vi vidis kolorojn.
Kaj kio okazas estas ni preni ĉi bela nigra limo ĉirkaŭ ĝi, ĉu ne?
Vi ĉiuj vidos kiel ni faradis?
>> Publiko: Yeah.
>> Tomáš REIMERS: Cool.
Do kio estas tio?
Do unue: ĝi estas unu bildero.
Tio estas mem-evidenta sufiĉe, dekstra?
Kiel, ĝi estas unu rastrumero dika.
Aŭ ĝi estus unu rastrumero, sed mi estas zomita en, do estas iomete pli
ol tio.
>> Allison BUCHHOLTZ-AU: Kaj ni havas tiu ridinda distingivo TV.
>> Tomáš REIMERS: Yeah.
Vi povas fari ĝin pli granda, malgranda, kio ajn.
Do jen du-pixel limo.
Vi vidos estas duoble pli dika.
Lin sekva kiu havas estas koloro.
Tio ne interesa.
Mi ne iras paroli pri kiuj, vere.
>> Allison BUCHHOLTZ-AU: Sed la stilo mem justa iom interesa.
>> Tomáš REIMERS: Yeah.
Do stilo, estas malmultaj aĵoj kiun mi vidas uzitaj komune.
Unua onia solida, apud onia punktita, kaj la lasta la strekitan.
Kaj tie estas ŝprucita.
Vi vidos ke ili estas faskon de dots, dekstra?
Bona maniero ia akiri belan limo irante, streketoj estas ankaŭ bela popularaj.
>> Allison BUCHHOLTZ-AU: Kaj tiam kompreneble mi estas
certe estas multaj aliaj stiloj kiuj vi povas akiri.
Kaj ni havas grandan aron de ligoj fine por vi uloj
al speco de peruse kaj rigardi pli malvarmeta CSS.
>> Tomáš REIMERS: Kaj poste la lasta afero, ni estas
tuj parolos pri la skatolo modeloj reala rapida.
Ah, kaj tiam limo, ekzakte kiel kompletigo,
vi ankaŭ havas aĵojn kiel limo-maldekstra, limo-dekstra, limo-top,
limo-fundo, kiu permesas vin akiri je specifa limo.
Do jen nur la limo maldekstrema difinita.
Ĉu tio havas sencon?
>> Allison BUCHHOLTZ-AU: Estas malvarmeta maniero reliefigi aĵoj aŭ aldonu
linioj inter malsamaj elementoj.
Tomáš REIMERS: Absolute.
Do jen nia landlimo.
Kaj la lasta la rando.
Rando Estas kiel kompletigo krom ĝi ne estas within--
Allison BUCHHOLTZ-AU: Estas ne ĉirkaŭ via ero
sed reale ĉirkaŭ la tuta skatolo kiu ni venas vidante.
>> Tomáš REIMERS: Yeah.
Allison diris ĝin perfekte.
Ne, kiel interne via elemento, ĝi estas ie la tuta skatolo.
Tio signifas tion kiel fono ne aplikas al ĝi.
Kaj ĝi esence diras, kiel, mi ne volas ion
en ĉi tre spaco por mi.
Do kiel tie ni havas marĝenon de 10 rastrumeroj.
Do nenio ene 10 rastrumeroj estu apud mi.
Tio estas speco de lia spaco sed speco de ne.
Do tio estas la tre Bazaj de la skatolo modelo.
Ĉu tio havas sencon?
Cool, malvarmeta.
Allison BUCHHOLTZ-AU: Awesome.
Do nun mi kredas ke ni ĵus havas niaj malvarmetaj rimedoj
ke ni prenos vin infanoj tra tre rapide.
Kaj ni actually-- bone, ni havas interreton ankoraŭ?
>> Tomáš REIMERS: Ni vidi se mi povas malfermi up--
lasu min nur vidi se mi povas akiri interreto rapide
dum Allison parolas pri io Allison volas paroli.
Allison BUCHHOLTZ-AU: Do basically-- mi ne
scias kion alian mi povas diri en ĉi tiu punkto.
Sed tiuj estas iuj vere bonajn rimedojn.
Ili estas tiuj, kiuj Tomas kaj mi uzis
kaj ke ni reale kutimi Prep por tiu.
W3Schools estas unu ke vi infanoj devus esti vidinta antaŭe.
Ni rekomendas gxin kiel Multon per CSS.
Mi scias mi rekomendas ĝin al miaj sekcio tutan tempon.
>> Unu el la grandaj aferoj estas ke ĝi permesas al speco de salato kun CSS
kaj vidi la ŝanĝojn instantáneamente en ĉi,
kiel, duobla fenestro vidi ke ĝi havas.
Do vi ne devas maltrankviligi agordo de via propra retpaĝo,
aŭ starigadon vhost en via loka aparato kaj loka gastiganto,
kaj prenantaj ĉiuj kiuj stuff laborista.
Ĝi estas enigita dekstra ene de la paĝo.
>> Kaj ĝi havas tiuj malgranduloj lecionojn kiujn vi povas
trairu lerni pli pri selectores,
aŭ lerni pri manipulanta via tiparo, aŭ fono, aŭ bildo.
Kaj vi havas tiujn instantáneo rezultoj kiujn vi
ne devas fari ajnan aliaj prep laboro por.
Do mi amas W3Schools.
Estas fabela.
Ĉu funkcias?
>> Tomáš REIMERS: Yeah.
Ne, tio ne.
Ĉu vi deziras min provi kaj restartigi mian komputilon?
Aux cxu ni volas to--
>> Allison BUCHHOLTZ-AU: mi volas diri, Nu, tiu ankaŭ estos en linio.
Ĉiuj diapozitivoj estos rete.
Do mi simple ege rekomendas faranta tiujn.
>> Tiu estas granda kiel justa kiel Gvidfolio.
Estas nur cxiujn bazajn ordonas ke vi havas.
Estas granda kiam vi unue startanta ekster via retpaĝaro.
Ĉar eble vi ne volas ricevi en ĉiujn
la reala nitty aspra dezajno-pezaj aĵoj.
Vi nur bezonas formati gxin en maniero tian sencoplena kaj volo
fari provizore.
Kaj se vi vere volas eniri en ĝin, mi konas
tio estas, kiel, unu el Tomas favorito referencoj.
Ni uzis ĝin por prep, kaj ĝi estas fabela.
Estas la desarrollador de Mozilla.
>> Tomáš REIMERS: Do Mozilla estas la personoj kiuj faras Firefox.
Kaj estas ĝuste ilia propra desarrollador referenco, kiu miaopinie estas imponega.
Kaj ĝi havas mirindan lerta de rimedoj.
Do ni have--
>> Allison BUCHHOLTZ-AU: Kaj tiam lasta noto estas
kiam vi provas desegni via retejo,
inspiriĝi de aferoj ke vi pensas estas bela.
Inspektinte la elemento, inspektinte la fontkodo
povas esti súper utila por provi elkompreni
kiom stiligi vian propran retejon.
>> Ofte, mi sentas kiel la pli bona vojo, krom experimentación,
Estas nur por rigardi proprajxon bela.
Mi trovas ĝin vere malfacile simple speco de desegni aferojn sur via propra,
precipe en la komenco.
Do bonvolu rigardi retejoj ke vi ĝuas rigardante.
Elkompreni kiel faras ili vokas al Vi.
Kaj tiam bonvolu provu repliki ke.
>> Tomáš REIMERS: Rajto.
Eĉ kiel retejoj kiel tiu, vi povas vidi
tie estas definitive div ĉe la supro.
Kaj tiam vi havas alian div ene tie, kio estas CSS awesomeness.
Kaj tiam vi havas faskon da ligiloj ĉi tien.
Se vi vere nur inspekti elementoj vi povas ordigi de
komenci vidi kion fari retejoj aspekti, kaj kiel mi povos
rekrei se mi volus.
Ĉu tio havas sencon?
Do ni nur havas tri minutoj maldekstre.
Do demandojn?
Ĉiuj el ili?
Jes.
>> Publiko: Por la koloro rektangulo, Kiel vi
have-- se vi ne volas ĝin irante tra la tuta paĝo, povus
vi faris gxin transiri nur duono de la paĝo aŭ simple la teksto?
>> Tomáš REIMERS: Yeah, absolute.
Do lasu min vidi reale.
Mi havas du ideojn.
Do unue: vi povas ankaŭ uzi por cent.
>> Publiko: Really?
>> Allison BUCHHOLTZ-AU: Do io suprenrigardi estas relativa posicionamiento.
Estas iu kiun ni ne havas tempon por eniri,
sed estas iu kiu definitive rekomendas infanoj ekiras.
>> Tomáš REIMERS: Do por cent.
Kaj vidi kiel ni faris ĝin nur 50% de la larĝa?
Allison BUCHHOLTZ-AU: Se vi efektive scias la numeron de píxeles,
vi povas esti pli preciza ol vojo.
Vi povas Fiddle kun ĝi.
Sed 50%.
Se ni estus regrandigi nia navegador, ĝi igus ĝin pli malgranda.
>> Tomáš REIMERS: Nu, estas esence 50% nun, mi pensas.
Estas 50%, kaj poste la randon estis aldonita al tiu.
CSS havas multan kapricoj.
Do nun tiu estas 50% de la paĝo larĝa.
Sed memoru ke vi havas 10 rastrumeroj deprenitaj de ĉiu flanko.
Do se vi estus movi kiu kontraŭ la brodas maldekstra de la navegador,
tiam aspektus kiel 50%.
Denove, kiel mi diris, CSS povas esti multaj divenon-kaj-ĉeko.
Kiel, vi pensas ion estas tuj konduti unu vojon,
sed kondutas tute malsame.
>> Allison BUCHHOLTZ-AU: Kaj vi simple akiri inteligenta,
kaj vi nur akiras pli bonan intuicio por ĝi kiel vi movas kune.
>> Tomáš REIMERS: Kaj plimalbonigas kaj pli malbone.
Do estas vere ĝuste raso.
>> Allison BUCHHOLTZ-AU: Tio estas súper kuraĝigaj.
Ni volas ilin ŝati CSS.
>> Tomáš REIMERS: CSS estas imponega.
Memoru tion.
Aliaj demandoj?
>> Allison BUCHHOLTZ-AU: La unu afero.
Ion alian?
Cool.
>> Tomáš REIMERS: Awesome.
>> Allison BUCHHOLTZ-AU: Nu, se vi infanoj havas demandojn poste,
ni estas ĉiam disponeblaj kiel po kutima.
Vi probable vidos iuj nin por fino projektoj
kaj definitive en la hackathon.
>> Tomáš REIMERS: Absolute.
Kaj en la foiro.
>> Allison BUCHHOLTZ-AU: Kaj en la foiro.
Oh.
>> Tomáš REIMERS: Rigardu antaŭen al vidante ĉiuj viajn awesome--
>> Allison BUCHHOLTZ-AU: Ni vidos ĉiuj viajn awesome retejoj
ke estos bela.
Tomáš REIMERS: Vi povas ĉiam vidu, kiel la retejoj
kiuj devis, kiel, nu CSS kaj tiam kiel tiuj kiuj ne provis fari CSS.
Allison BUCHHOLTZ-AU: Ankaŭ, alia aferon, unu pli afero enrigardi
estas bootstraping.
Do Bootstrap estas granda.
>> Tomáš REIMERS: Google kiu se you--
>> Allison BUCHHOLTZ-AU: Google ĝin.
Estas fabela.
Vi amos ĝin.
Kaj nun ke vi havas baza kompreno de CSS,
ĝi faros multe pli sentita.
Imponega.
Danke, knaboj.
>> Tomáš REIMERS: Dankon tiom.