>> [MUSIC SPILLE]
ALLISON Buchholtz-AU: So vi i utgangspunktet bare skal
for å gi deg en oversikt av CSS, fordi vi vet
at det ikke var dekket i alle seksjoner.
Og vi virkelig ønsker å være sikker på at du gutta har dette verktøy til disposisjon,
fordi den har evnen til å gjøre nettsteder ser mye penere.
>> Og hvis du bygger et nettsted, deretter du sannsynligvis ønsker å gjøre det pent.
Jeg mener, trenger du ikke å, men jeg vil foreslå det. [Ler]
Hvis du vil at brukerne skal bruke den, kanskje du ønsker å gjøre det litt [uhørbart].
Så vi kommer til å prøve og gi deg akkurat noen grunnleggende verktøy og forståelse,
slik at når du går ut, og du er forske ting om CSS,
det er ikke full vrøvl, som CSS noen ganger å være.
>> TOMAS Reimers: Yeah.
Allison sa det ganske godt.
Så jeg antar det første vi bør begynne med er det som er CSS?
Så CSS er kjempebra.
CSS--
>> ALLISON Buchholtz-AU: Det er navnet på vårt seminar.
>> TOMAS Reimers: Yeah.
Det er veldig viktig at du forstår at da.
Hvis du bare ta bort en ting, det er at CSS hvis awesome.
To er CSS står for Cascading Style Sheets.
Så i sin kjerne, er CSS et stilark, som betyr
det tillater deg å style en nettside.
Og så hva det betyr, er det en måte å legge stil til nettsteder.
Så ved stil, mener vi alt som ikke structural--
så ting som farger, bakgrunn bilder, grenser, som, padding,
marginer.
Vi skal snakke om hva alt som betyr i en bit.
>> Så vi har bare gått foran og åpnet begge disse opp i gedit.
Så dette er index.html.
Og dette er main.css.
Så main.css har ingenting.
ALLISON Buchholtz-AU: Ingen stil så langt.
TOMAS Reimers: Ingen.
Og som du ser, er det en virkelig stygg nettsted.
ALLISON Buchholtz-AU: Det er bare ren.
TOMAS Reimers: Yeah.
Ja, det er ikke stygg, det er bare minimalistisk.
Og så her har vi index.html.
Og så for en rask oppsummering av HTML, Allison,
du ønsker å bare snakke om den siden?
>> ALLISON Buchholtz-AU: Yeah.
Så åpenbart, har vi vår HTML tag, som bare navnene HTML-fil.
Vi har vår header her, med CSS Awesomeness, which-- hvis du går tilbake.
Hvor er det?
>> TOMAS Reimers: Oh.
Ja, du kan se.
ALLISON Buchholtz-AU: Og legg merke til overskriften
er denne kategorien header rett opp her.
Og deretter "Hei, verden!" er teksten som vi har bare
visning på nettet siden som er-- gå tilbake.
Tilbake.
Som er like i kroppen vår her-- ren tekst.
Også en ting til legge merke til, hvis du ser her,
Tomas slått opp disse to fra vår lysbilde.
Så så lenge du har alt tre av disse, du er fin.
De kan være i hvilken rekkefølge de ønsker.
Hva er viktigst er nettopp det du har hver av disse tre tingene.
>> TOMAS Reimers: Cool.
Legg en doc type?
ALLISON Buchholtz-AU: Yeah.
TOMAS Reimers: Yeah.
Cool.
ALLISON Buchholtz-AU: Tilsynelatende mine mikrofoner liker ikke meg.
TOMAS Reimers: Å, gi oss et sekund bare mens Allison bytter ut hennes mic.
Så ja.
Så vi har vår hovedside.
Det er slags unstyled.
Vi har ikke mye.
Vi har i utgangspunktet tekst.
Vi har stilark.
Vi har tittelen.
Så bare bare-boned komponenter lage en nettside.
>> Så derfra, la oss snakke om hva CSS er
og hvordan det ser ut og alt det der.
Så for at--
ALLISON Buchholtz-AU: Tilbake til lysbildene.
TOMAS Reimers: Tilbake til lysbildene.
Og Allison kan ta over.
>> ALLISON Buchholtz-AU: Woo.
OK.
Så i din CSS fil, du kommer til å ha
mange av disse tingene kalles velgere.
Det vil bare være det basis av din CSS fil.
Det er bare kommer til å være mye og mye av disse.
Så velgeren.
Dette er bare den generelle anatomi.
Vi kommer til å gå gjennom eksempler, fordi hvis dere aldri
så min del, jeg føler som ting i det abstrakte
vet egentlig ikke gir mening.
Det hjelper alltid å se eksemplene.
>> Så vi har litt velgeren.
Det kommer til å være noen identifikator for hva vi ønsker den stil som skal brukes.
Og så kan vi ha noen satt av regler og verdier.
Så velgere som du kan se kan være noe sånt kroppen,
eller avsnitt med P, eller header, eller hva,
hva du vil HTML-koder til å være.
>> Så i dette tilfellet, har vi kroppen.
Og vi har noen regel, som tilsvarer dette
til hva din stil gjelder.
Så i dette tilfellet, har vi bakgrunnsfarge og skrift vekt.
Så dette kommer til å endre På bakgrunn av hva som helst
innen noen kroppen tag av våre HTML-fil.
Og det kommer til å gi det denne lyseblå verdi.
>> Så det kommer til å gjøre det bakgrunn lyseblå.
Og så noe i kroppen er kommer til å ha en font vekt fet.
Så det er bare kommer til fet all vår tekst.
Og dette er bare ett velgeren.
Men du kan ha svært mange av disse.
Og som vi kommer til å vise senere, litt mer inn i hvordan
som fungerer og flere eksempler der.
Noe du vil legge til?
>> TOMAS Reimers: Nei.
Allison fikk den.
Vi er bare nødt til å kutte opp en eksempel her på vårt eksempel nettstedet.
Så la oss faktisk ta dette.
Det er perfekt.
Så jeg bare kommer til å kopiere og lime inn at rett inn i vår main.css fil.
Og jeg kommer til å redde den.
Og da vil vi kjøre den.
Så side note, en av de de fleste frustrerende ting
er hvis du ikke lagrer en fil, og så du, som, oppdater siden,
og lignende, hvorfor er ikke endringen skjer?
Det skjer.
Så her er vi så at vi gjorde vårt nettside en lys blå bakgrunn
og noen fet tekst.
>> Jeg bør også nevne, hvis du gutta har spørsmål om noe
vi gjør, kan du gjerne fritt til å stoppe oss og spør oss.
Vi er helt villig til feltet spørsmål.
>> ALLISON Buchholtz-AU: Selvfølgelig, med CSS, bygger alt på seg selv.
Så hvis en ting ikke fornuftig nå, vi
ønsker ikke at for å bog deg ned senere.
>> TOMAS Reimers: Så la oss slags dissekere dette.
Så ønsker du å starte med velger her?
>> ALLISON Buchholtz-AU: Yeah.
Som jeg sa før, kropp er bare vår velgeren her.
Så hvis vi går tilbake over til vår index-- ah.
>> TOMAS Reimers: Som jeg akkurat avsluttet.
Gi meg et sekund.
Så File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Så hvis du legger merke til her, vi har disse kroppen koder, ikke sant?
Så velgeren bare tilsvarer kodene som vi snakker om.
Slik at kroppen rett her.
Så det vi sier er everything-- kan vi gå tilbake?
Jeg skulle ønske jeg kunne bare som berører skjermen.
Det ville være så mye kulere.
>> Så noe innen de body-koder, som vi så
var bare, som, teksten, og kroppen for øvrig
refererer seg til, for eksempel, på bakgrunn.
Hvis du noen gang ønsker å endre bakgrunnen,
som kommer til å være i en body-koden.
Bare har disse reglene anvendes på dem.
>> Så hvis vi skulle gå til index.html og-- faktisk,
kan vi ha noe utsiden av kroppen?
Hvis vi hadde, som, en bunntekst eller noe, ville det ikke gjelde for dette.
Men noe innen disse kroppen kodene kommer
å bli påvirket av denne kroppen velger som vi har gjort.
Så hvis du skulle skrive noe annet det--
>> TOMAS Reimers: La oss kjøre det hjem.
Så hvis vi hadde en div-- så det er bare en annen tag du kan ha.
Jeg kommer til å lukke den.
Eller la oss gjøre dette til et avsnitt.
Så p står for ledd.
Og innenfor nevnte punkt.
Og så sier jeg: "Dette er tekst."
Cool.
Og da jeg laget denne regelen gjelder for et punkt i stedet for kroppen.
Du får se hvordan det gjelder bare for den nydannede ledd, høyre,
ikke hele greia.
Betyr det fornuftig?
>> ALLISON Buchholtz-AU: Så dette er alt kroppen,
men nå er vår velger bare tilsvarer ledd.
Så vi må bare fet og blå for denne spesifikke ledd
fordi dette er den eneste som befinner seg innenfor p-taggen.
>> TOMAS Reimers: Betyr det fornuftig sort av hvordan ting kapsle andre ting?
ALLISON Buchholtz-AU: Også, bare å si like, er en av de beste måter
å virkelig bli komfortabel med CSS er å bare gjøre ting som dette,
bare prøve det ut.
Det er veldig enkelt å skrive noe ut, traff Refresh, og se hva som skjer.
Og som med de fleste CS, eksperimentering kan ofte
fører til en mye bedre intuitiv forståelse.
Enda mer enn oss bare, lignende, snakker til deg.
>> TOMAS Reimers: Absolutely 100% enig på det punktet.
Så hvis vi går tilbake til dette, la oss starte dissekere nøyaktig hva disse to gjør.
Så vi har to regler om dette.
Så det første er bakgrunnsfarge.
Og du ser at vi har sett det lik en verdi, lyseblå.
>> Så i CSS, er CSS sort av veldig løs om hvordan
du har lov til å definere fargen.
Så du kan definere dem ved navn.
Du kan også gjøre noe sånt som "red."
Og så hvis vi går tilbake til dette, vil du se at bakgrunnen er rød.
Du kan også få really-- Jeg tror du kan bli ganske kreativ med dette,
kan ikke du?
>> ALLISON Buchholtz-AU: Jeg tror du kan bruke hex.
Kan ikke du?
>> TOMAS Reimers: Yeah.
Så du kan bruke hex.
Men jeg tenker navn-messig.
Er det ikke?
ALLISON Buchholtz-AU: Du kan gjøre ganske mange.
Ganske mye som de fleste farger som du kan name-- liker, tror jeg laks er ett.
>> TOMAS Reimers: Vi skal prøve laks.
ALLISON Buchholtz-AU: Jeg tror chartreuse er der inne.
TOMAS Reimers: Yeah.
Se?
Så du kan få ganske kreativ.
>> ALLISON Buchholtz-AU: Du kunne komme ganske kreativ.
Som, hvis du kan tenke på fargenavn, er det sannsynligvis der inne.
Hvis du virkelig vil ha fine detalj, kan du gå hex.
>> TOMAS Reimers: Yeah.
Så heksadesimale.
Hvis dere husker dette tilbake fra den gamle PSet, bilde Recover,
dere måtte forholde seg med disse hex verdier.
Og liksom for å oppsummere hva som er, hex har tre verdier som er lagret i den.
Så det er i grupper på to trinn.
De to første representerer den røde verdi.
Den andre representerer den grønne verdi.
Og den siste er blå?
>> Så FF skjer å representere en heksadesimal 255.
Så du har 255 rød, 255 grønn, og 0 for blå.
Og verdiene varierer mellom 0 og 255.
>> PUBLIKUM: Høyre.
Så egentlig kunne vi søke internett for noen farge vi ønsker,
og identifisere den faktisk kjente fargespekteret combo,
og da kunne vi sette den i?
ALLISON Buchholtz-AU: Nettopp.
Så du har ganske mye full kontroll i løpet av de fargene du ønsker innenfor CSS.
Skal vi snakke om bakgrunnsbilder senere?
Eller ønsker vi å gjøre det?
>> TOMAS Reimers: Yeah.
Absolutt.
Så først, bare for å vise at rødt og grønt er gul.
Og hvis du trenger noen hjelp til å finne dette, du
kan Google noe som "fargevelgeren."
ALLISON Buchholtz-AU: Åh, det er så bra.
Jeg elsker fargevelger.
>> TOMAS Reimers: colorpicker.com er et godt eksempel.
Og her, vil du se at du har en full Photoshop-lignende fargevelgeren.
>> ALLISON Buchholtz-AU: Mm-hm.
Også de kule tingene er du kan generere fargevalg
slik at du ikke har, lignende, kranglet farger.
TOMAS Reimers: Og så her er hex verdien opp her.
Så du kan alltid finne på nettet i utgangspunktet steder for å få den hex verdien fra.
Det er ikke sortere av som bare, som vi se fargene i verden i antall.
Det er mer at vi går online og finne hvilken farge vi ønsker,
og deretter ta nummeret ned.
Fordi det er bare en veldig enkel måte å referere ting i CS.
>> ALLISON Buchholtz-AU: Og så er det also--
Jeg glemmer det nøyaktige navnet på området.
Men det er definitivt, jeg tenke, noe fra Adobe
som genererer fargevalg for deg, som er kult, fordi du
definitely-- det noen ganger vanskelig å finne ut,
oh, hvis jeg ønsker å bruke denne fargen, hva som kan være en annen nyttig en
å bruke andre steder på nettstedet mitt til, lignende, gjøre det fint og sammenhengende.
>> TOMAS Reimers: Allisons snakker om ett av Adobe kalt Kuler, tror jeg.
Det er K-U-L-E-R.
ALLISON Buchholtz-AU: Jeg tror det.
Jeg er ganske sikker på at det er den ene.
>> TOMAS Reimers: Min favoritt har alltid vært Fargevalg Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS Reimers: Hvilken er now--
>> ALLISON Buchholtz-AU: Ah, dette er vakkert.
>> TOMAS Reimers: Og du kan i utgangspunktet si, som,
Jeg vil tre farger ved siden av hverandre.
Og så la oss gjøre noe hyggelig.
Og så kan du få et eksempel av hva som kan se ut.
Og så hvis du sveve over noen av dem, det gir deg den hex verdi.
>> Så akkurat som en god måte å starte tenker på fargevalg
eller hvilke farger på en nettside kan gå bra sammen.
Fordi det kan være overraskende ikke så lett å plukke som du tror.
Og deretter den andre kule ting Jeg har alltid funnet om dette området
er hvis du treffer Eksempler, det vil vise hva et eksempel nettside
kan se ut som du bruker som fargevalg.
Allikevel.
>> Tilbake til selve CSS.
ALLISON Buchholtz-AU: Men selvsagt, vi vet disse referansene kan være nyttig.
TOMAS Reimers: Nei, de definitivt kan være nyttig.
Så den andre regelen, Allison?
>> ALLISON Buchholtz-AU: Yeah.
Den andre regelen er bare som tilsvarer vår skrift.
Så font vekt er bare snill of-- slik at vekten ville
være hvis du bare ønsker, som, normal eller lignende, tynnere fonter,
eller i dette tilfellet, som, fet.
Jeg glemmer.
Hva er det hvis du ønsket it er det en tynnere en enn bare, som, normalt?
TOMAS Reimers: Jeg gjør faktisk ikke vet om det er en tynnere en.
ALLISON Buchholtz-AU: Jeg glemmer.
Så font vekt vi vanligvis bare bruk for fet.
Hvis du ønsker å komme virkelig inn det, vi skal vise deg.
W3Schools har alle de forskjellige ting du kan gjøre for skrifter.
Men innerst inne, hvis du noen gang ønsker å endre noe om skrift,
det alltid kommer til å være, aktig, font-noe.
Så det vil være like, font-family hvis du er prøver å endre den faktiske typen.
Det vil være font-style hvis du ønsker å gjøre det som kursiv,
eller kursiv, eller whatnot.
Eller enda font-farge, hvis vi ønsket å endre det.
>> TOMAS Reimers: Yup.
Så du kan endre det.
Og liksom bare til oppsummering nå, slik at du kan
se at vi har velgeren opp her.
Vi har disse klammeparentes.
Og så har vi regler avgrenset med semikolon.
Betyr det fornuftig?
Yeah?
Cool.
Så hvis det er bra--
>> ALLISON Buchholtz-AU: Back.
TOMAS Reimers: La oss snakke spesifikt om hva slags velgere vi har.
Fordi akkurat nå har vi liksom bare vist koder.
Men dere kunne se det plausibelt.
Fortell at du har to avsnitt på en side og du
ønsker å være i stand til å style en, men ikke den andre,
du ikke bare ønsker å begrense deg å måtte bruke forskjellig selve HTML
koder for å gi dem forskjellige stiler.
>> Så vi har tre grunnleggende typer velgere.
ALLISON Buchholtz-AU: Yeah.
Så vi har tag, som er det vi har snakket om akkurat nå.
Så det er litt som kroppen din eller p.
Og så har vi klassen, som er når vi definerer det i våre CSS-fil,
det alltid kommer til å være prikk, uansett du vil at navnet på klassen for å være.
Og dette kan gjelde for flere ting.
>> Fortell at du har fem avsnitt og to av de tre
trenger å bli stylet det samme, du ville gjelde en klasse til det.
Og dette er akkurat slik vi gjør det.
Vi vil gi deg et eksempel på hvor dette faktisk dukker opp.
Men hvis du hadde kanskje noen tag p, etter det, ville du skrive,
klasse er lik uansett klasser du ønsker å bruke på det.
Så uansett hva klassevelgere som vi ønsker å gjelde for denne spesifikke ledd
vi bare kunne skrive som dette.
Selvfølgelig, tror jeg et eksempel vil gjøre det mye mer konkret.
>> Den andre vi har er id, som vi betegner
med en hash, eller pund, eller hashtag.
TOMAS Reimers: Octothorpe.
ALLISON Buchholtz-AU: Octothorpe.
Som fungerer, også.
Og dette bør egentlig være unike.
De bør bare gjelde for en ting på siden din.
Så om det er en bestemt punkt, eller enkelte element i en liste, eller hva,
dette skal være unike.
Og på samme måte som vi bare si, liker, class = "class1 Klasse2"
dette kan bare være id av hva vi har.
TOMAS Reimers: Yeah.
Så la oss definitivt snakke om eksempler her.
Og jeg bare kommer til å dykke rett tilbake inn i koden.
Så la oss se på vår HTML.
Og så vi akkurat nå har ett ledd.
Dette er tekst.
Jeg kommer bare til å modifisere det. "Dette er tekst 1."
Og så skal vi har en "Dette er tekst 2."
>> ALLISON Buchholtz-AU: Second ett.
TOMAS Reimers: Yup.
Så vi har nå "Dette er tekst 2," ikke sant?
Og vi kommer til å se at hvis vi reload siden, hva vi kommer til å finne
er vi skal find--
ALLISON Buchholtz-AU: Ooh.
TOMAS Reimers: Yeah.
Vi kommer til å finne en "Dette er tekst 1, "og" Dette er tekst 2. "
>> ALLISON Buchholtz-AU: Og ut nydelig gul farge.
>> TOMAS Reimers: Og du vil se at vår velger akkurat nå,
som gjelder for p-tallet, eller avsnitt, påvirker både av dem,
fordi begge møte betingelse at de er både en p-taggen.
Det gjør total følelse.
Så spørsmålet er, vel, hva hvis vi ønsket å bare få en?
Så nøyaktig som Allison sa, vi har to andre måter å gjøre det.
Jeg kommer til å starte med id.
>> ALLISON Buchholtz-AU: La oss starte med id.
>> TOMAS Reimers: Og begge av disse er attributter.
Så attributter eksisterer i HTML.
Og hva de er er noe som du legger
inne i koden som er atskilt fra kodenavn.
Så du kan ha flere attributter.
Yeah?
>> ALLISON Buchholtz-AU: Jeg skulle bare å si, fra ditt eksempel fra PSet 7,
hvis noen av dere prøver å justere ting til sentrum,
du kan ha brukt "Tekst align = center."
Og du lagt merke til det sannsynligvis burde ha sentrert
din tekst eller navigasjonslinjen.
Så det er bare også et attributt at du kan bli kjent med.
TOMAS Reimers: Det er en haug av egenskaper som du vil se.
Yeah.
Som god referanse til PSet 7.
Vi har id.
Du kan også ha klasse, ting som dette.
En enkelt kode kan ha mange attributter.
Så starter med id, la oss late som vi ønsker å ha en id of-- jeg vet ikke.
Vi kaller det spesielle, fordi dette er vi
kommer til å lage fet, og understreke, og hva som helst.
ALLISON Buchholtz-AU: Det er skal være super spesiell.
TOMAS Reimers: Så dette ett, har vi id spesiell.
Så veien å velge det, så er i main.css, i stedet har en p-taggen,
du gjør #special, OK?
Og som velger ting med id spesiell.
Betyr dette fornuftig for alle?
PUBLIKUM: Yeah.
TOMAS Reimers: Cool.
Så nå hvis vi går tilbake, vi vil see-- whoops.
Yeah.
Vi får se at det bare velger den ene med id spesiell.
Yeah?
Høres kult.
Ja.
>> PUBLIKUM: Kan noe ha en attributt av både klasse og en id?
>> TOMAS Reimers: Ja.
PUBLIKUM: OK.
Og hva skjer hvis du deretter gi det noen regler i CSS at konflikten?
TOMAS Reimers: Absolutt.
Vi definitivt kommer å snakke om det.
Så nøyaktig hva du får på, kan du også ha klasser.
Så la oss late som jeg hadde tre avsnitt og jeg
ønsket å style den første to, men ikke det tredje.
Vel, kanskje din første idé være, vel, jeg kan bare gi den andre en id.
Men du kan ikke, fordi en id, akkurat som Allison sa,
må være unik.
>> Så i stedet for en id, hva du kan bruke er at du kan bruke en klasse.
Og en class-- hva det gjør du skal gjøre er i utgangspunktet si,
dette hører hjemme som en del av en gruppe.
I dette tilfelle, gruppen vår kalles Special.
Og hva skal vi gjøre da er vi kommer til å say-- snarere enn pund,
vi kommer til å bruke dot.
OK?
Og legg merke til at pundet og dot bare eksisterer innenfor CSS-filen,
ikke i HTML.
ALLISON Buchholtz-AU: Ja.
Viktig skille.
>> TOMAS Reimers: Jeg har hadde så mye kamp,
fordi jeg sette hasj i HTML og så bare følte dum for en lang tid.
Se hvordan den velger begge de med den klassen?
Cool.
>> Nå kan ting ha flere klasser.
La oss si at jeg ønsket å gjøre det første to har en bakgrunn av gult
og den andre har to en skriftfarge blå.
OK.
Jeg vet egentlig ikke hvorfor jeg hadde ønsker å gjøre det, men jeg kan.
>> ALLISON Buchholtz-AU: ikke Might anbefales det for ditt nettsted.
Men for vårt formål, det vil gjøre.
>> TOMAS Reimers: Det er ikke en god fargevalg.
ALLISON Buchholtz-AU: Vel, gul og blå er mine high school farger.
Jeg vet ikke, skjønt.
TOMAS Reimers: Allison høye Skolen hadde en flott fargevalg.
[Latter]
Så da hva vi kan kalle dette er La oss kalle dette-- så vi har Spesial
og vi har Pretty.
Jeg foreslår, for dette, bruker du mye mer beskrivende navn.
ALLISON Buchholtz-AU: Ja, ville jeg kalle dette, som, gul eller blå.
>> TOMAS Reimers: Vi er ikke virkelig gjøre en reell nettsted,
som er grunnen til at vi ikke gjør det.
Men hvis du faktisk hadde en skikkelig nettside, du
kan ha, som, artikkel header, Artikkelen innhold, første ord,
ting som det, som tillater du å være mye mer beskrivende.
Dette er egentlig akkurat som variabler.
De bør bli navngitt på en måte der du kan, like-- yeah, som sådan.
Perfekt.
>> Så bakgrunnsfarge.
Og så skal vi say-- så måte å endre fargen er bare "farge".
Og vi kommer til å gjøre det blå.
Det er kult.
Så nå har vi den to første har spesiell.
Neste kommer til å har "class = pen."
ALLISON Buchholtz-AU: og da vil ønsker å legge til "pen" til den midterste.
TOMAS Reimers: Yup.
Og deretter til den midterste, å legge til "pen", hva skjer
er du bare ha en plass.
Så klassen attributt er en space-separert liste
av alle klassene som gjelder for den koden.
OK?
Det er ikke som dette tilhører en slags spesiell klasse kalt
"Spesielle, plass, pen."
Den tilhører to classes-- spesiell og pen.
Ja?
Cool.
>> Og så hvis vi ser på hva som skjer, vi er
kommer til å se at første har gul bakgrunn, svart tekst.
Andre one--
>> ALLISON Buchholtz-AU: --has fet gul bakgrunn med blå tekst.
Og vår siste man bare har blå tekst som vi tildelt.
>> TOMAS Reimers: Kule?
Hvordan velgere jobbe?
Awesome.
>> ALLISON Buchholtz-AU: Ønsker vi å snakke om konflikten nå da?
>> TOMAS Reimers: Så ja.
Absolutt.
Så hva skjer hvis du har en konflikt, ikke sant?
La oss late som det første setter opp noe like--
ALLISON Buchholtz-AU: Kanskje denne endrer bakgrunnen?
TOMAS Reimers: Yeah.
Så vi kommer til å gjøre "pen" endre bakgrunnen til laks.
ALLISON Buchholtz-AU: Du er bare med alle de flotte fargene i dag, Tomas.
TOMAS Reimers: Yeah.
Fordi jeg fant ut kan jeg bruker laks som en ekte farge.
Så vi bare kommer til å gjøre det.
Jeg tror også Sunset er en ekte farge.
PUBLIKUM: Sunset er en ekte farge?
ALLISON Buchholtz-AU: La oss prøve det.
TOMAS Reimers: Etter denne demoen bare fordi i tilfelle søl opp det,
Jeg ønsker ikke å bli debugging.
Så vi vet laks er en ekte farge.
Så noen gjetninger på hva kommer til å skje?
>> ALLISON Buchholtz-AU: Noen ide?
>> PUBLIKUM: [uhørlig].
>> TOMAS Reimers: Yeah.
Så du fikk det helt riktig.
I utgangspunktet tar det siste regelen om at det ble gitt.
>> ALLISON Buchholtz-AU: Så dette er hvor gjennomgripende trer i kraft.
>> TOMAS Reimers: Så husk hvordan vi hadde som Cascading Style Sheets?
Så ved at vi på en måte bety at vi har en haug med regler
som gjelder på toppen av hverandre, og de kan også overstyre hverandre.
>> ALLISON Buchholtz-AU: So hva er på bunnen
vil overstyre alt som er på toppen.
Du kunne ha regler som helt negere noe på forhånd.
Det er også grunnen til at du ønsker å være forsiktig når du er styling,
slik at du ikke lage regler som du er bare helt overstyrer.
>> TOMAS Reimers: Eller kanskje du vil overskrive regler.
>> ALLISON Buchholtz-AU: Eller kanskje du gjør.
Ja.
>> TOMAS Reimers: Lat som om du har en klasse som gjelder de fleste ting,
men la oss si at du ønsker å endre bakgrunnsfargen til rød og skriften
vekt til fet for de fleste ting, men for en,
du bare vil bakgrunnsfargen å være rød, men du vil at alle de andre
egenskaper, kan du gjøre noe som "font-weight = normal,"
som da ville angre på at fet endring.
Yeah?
Igjen, den beste måten, tror jeg Allison sa det, er bare å øve.
>> ALLISON Buchholtz-AU: Eksperimentering.
>> TOMAS Reimers: Øve, øve, praksis, og eksperiment.
Jeg kjenner mange mennesker som tror CSS er bare en masse gjette-og-sjekk
ved slutten av dagen, der hvis du ønsker å gjøre something-- lignende,
du har en viss idé, men du fortsatt sannsynligvis trenger
å prøve det ut for å være sikker du vet hvordan det ser ut.
>> PUBLIKUM: Når du søker klasser, mer enn ett
til samme avsnitt eller avsnitt, gjør det
Uansett hvilken rekkefølge du kan skriv dem inn i anførselstegn?
>> TOMAS Reimers: Nei, ikke i det hele tatt.
>> ALLISON Buchholtz-AU: Det som teller er rekkefølgen i din CSS stilark.
PUBLIKUM: Kan du gjenta spørsmålet?
TOMAS Reimers: Oh.
ALLISON Buchholtz-AU: Innen klasse, når du gir klasser
til noe i HTML, gjør det noen rolle hvilken rekkefølge de er i?
Det spiller ingen rolle bestillingen.
Det som teller er den rekkefølgen av klassevelgere i din CSS,
innenfor stilarket.
>> TOMAS Reimers: Høres bra ut?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS Reimers: Og så vi kommer til å fortsette to--
ALLISON Buchholtz-AU: Hva har vi neste?
Jeg glemmer.
Åh, vi må bare eksempler.
Men vi har på en måte gjort de.
Vi har gjort eksempler på sparket.
>> TOMAS Reimers: Vi kommer til å kombinere velgere snart.
>> ALLISON Buchholtz-AU: Oh, vi kommer til å kombinere velgere.
TOMAS Reimers: Så noen eksempler er at vi har
# Dog-- pund, eller hashtag, eller octothorpe, eller hva
du ønsker å ringe at-- skarp.
>> ALLISON Buchholtz-AU: Sharp hund.
>> TOMAS Reimers: Da har du .pets.
Noe har en id av hund, det er bare en hund på siden.
Noe har en id av katt, det er bare en katt.
Det kan være mange kjæledyr på siden.
Det er derfor vi ga som klasser.
Du har et eksempel på s.
Og deretter slik at en av forrige eksempel, som
er noe vi ikke har snakket om, er hva som skjer når du kombinerer dem.
Så p.pets.
>> Så for det, la oss gå tilbake til den kode og introdusere another-- ja.
Så tilbake hit.
>> ALLISON Buchholtz-AU: Jeg føler at dette er really--
som bare ser gjennom eksempler er virkelig måten å lære dette.
Så det er det vi gjør.
>> TOMAS Reimers: Så la oss late som vi bare ønsker å velge tekst 2, ikke sant?
Så vi definitivt ikke kan gjøre det med en id.
Vel, vi kunne gjøre det med en id, men det har ikke en id.
Jeg kunne legge en, men la oss late at jeg ikke ønsker å legge til en
eller det allerede har noe annet.
Jeg kan ikke gjøre det med det.
Koden er definitivt ikke unik, ikke sant?
Og det er heller ikke den klassen.
Men du kan kombinere disse tingene.
La oss si at vi ønsket å gjøre noe som bare gjelder for ting som
har klassen spesiell og som har klassen pen.
>> Så hva du kan gjøre er i main.css, du kan si, la oss først slette dette.
Du kan kombinere disse.
Så du kan gjøre, spesiell.
Ingen plass.
Bare .special.pretty.
Hva det betyr er noe som er både spesiell og pen.
Betyr det fornuftig?
Og hvis vi går her, hva du kommer til å se
er denne regelen gjelder bare for andre, som har begge disse.
Og du kan gjøre det for mange ting.
Du kan say-- la oss late som jeg bare ønsket
å gjøre ting som har klassen pen og som også er et avsnitt tag.
Så p.pretty.
La oss late som jeg hadde noe pen på tag kroppen.
OK?
Jeg kan kjøre dette og jeg kan se at det er bare
kommer til å gjelde for ting som er avsnitt med klassen pen.
Og du kan kombinere disse, i utgangspunktet, så mange du vil.
Så du kan bare sette dem sammen.
Betyr det fornuftig?
ALLISON Buchholtz-AU: So denne typen er mer nyttig
da ble Tomas sa tidligere, kanskje du har en veldig komplisert nettside,
og du allerede har mye av disse reglene skrevet,
og du trenger bare å kombinere to fra før.
Som i stedet for å skrive en hel ny velgeren og endre det der,
du kan bare kombinere dem der den overlapper.
>> TOMAS Reimers: Eller du kan finne out-- noen ganger
det er en klasse som gjør font farge som blå,
og det er en annen klasse som gjør bakgrunnen blå.
Og som bare ikke vil fungere.
Så du skrive en spesiell sak, hvor, like-- men hvis den har begge deler, hva du er
kommer til å gjøre er du kommer til å gjør dette til en denne blåfargen
og dette denne annen nyanse av blått.
Høyre?
>> ALLISON Buchholtz-AU: Bra for slike unntak.
TOMAS Reimers: Så å tenke på problemer
som kan oppstå når du kombinerer dem.
Cool.
Så tilbake til vår presentasjon.
ALLISON Buchholtz-AU: Vi er nesten der.
TOMAS Reimers: Og det har sluttet å koble.
ALLISON Buchholtz-AU: Å, nei.
ALLISON Buchholtz-AU: CS på kontoret, går internett ned.
Oh, ironien.
>> TOMAS Reimers: Så heldigvis, kan vi presentere uten internett, antar jeg,
fordi vi har alle lysbildene her.
Så la oss snakke om det forholdet mellom tagger.
ALLISON Buchholtz-AU: Høyre.
Så bare slags kommer ut av hva Tomas sa,
dette er bare en annen måte å gjøre det.
Så vi har noen av foreldrene Velger med et barn velger.
Så i dette eksempelet her, har vi noen kroppen med en klasse navbar, klasse knappen.
Ah.
>> TOMAS Reimers: Oh, sorry.
>> ALLISON Buchholtz-AU: Og utgangspunktet, hva dette betyr
er å velge alle barna, som alle disse typer velgere,
innenfor denne forelderen velgeren.
Og de er de eneste som det noensinne kommer til å gjelde for.
Jeg vet ikke om du har en bedre måte of--
TOMAS Reimers: Så jeg gjette måte å tenke
om dette er huske før hvordan vi liksom som setter dem sammen.
Og så det betyr ett element som passer alle disse.
Hva dette sier er, jeg ønsker du å matche alt
innenfor some-- jeg ønsker du å finne en velger.
Og så i dette, jeg ønsker du å matche nye ting.
Høyre?
Så i CSS, det handler om liksom å være i stand til å matche disse elementene.
Og du kan prøve å matche elementer innenfor andre elementer.
>> Så la oss faktisk gjøre et eksempel, og vi tror at vil avklare.
Så la oss late som vi har spesielle, spesielt pen, uansett.
Og så har vi en link, OK?
Så husk, en er en link.
Det kommer ikke til å gå hvor som helst.
Og vi kommer til å gi den koblingen klasse, tror jeg.
La oss gi den class-- gi meg en idé.
ALLISON Buchholtz-AU: Cool.
TOMAS Reimers: Coo-- la oss går det klassen pen.
Hvorfor ikke?
>> ALLISON Buchholtz-AU: OK.
TOMAS Reimers: So akkurat nå pene ting
kommer til å gjøre bakgrunnen blå, bakgrunnsfargen til laks.
Det er fornuftig.
Og hvis vi gjør dette--
>> ALLISON Buchholtz-AU: Du vil legge til tekst gjør
så hyperkoblingen faktisk dukker opp?
TOMAS Reimers: At ville være en god samtale.
ALLISON Buchholtz-AU: Fordi retten nå er vi bare skal få ingenting.
TOMAS Reimers: Så dette er en kobling.
"Dette er en link."
Oh, og dette kommer å være en annen link.
La oss gi den klassen "cool".
Du har rett.
Cool.
Så akkurat nå vi kommer til å ta dette.
Vi kommer til å kaste en.
Vi har en i spesiell tag, og vi har også
kommer til å ha en i ganske tag.
Og akkurat nå hva vi skal gjøre er vi kommer til å gjøre cool--
hva gjør vi vil at den skal gjøre?
ALLISON Buchholtz-AU: Kan vi gjøre det større?
TOMAS Reimers: La oss gi det en grense.
ALLISON Buchholtz-AU: Vi kunne grensen.
TOMAS Reimers: Yeah.
Så vi kommer til å gjøre noe lignende, grensen er-- og vi er
kommer til å forklare dette i et sekund.
For now--
>> ALLISON Buchholtz-AU: Til boksmodellen.
TOMAS Reimers: Men for nå, vi er bare kommer til å gi det en grense.
Så hva det betyr er at du er kommer til å se disse linkene.
Og du kommer til å se at de har disse, som, stygge svarte kanter, som
er kult.
>> ALLISON Buchholtz-AU: Vår hjemmeside er så pen.
>> TOMAS Reimers: Yeah.
Vår hjemmeside er kjempebra.
Så disse to er lenker, og de vises.
Nå la oss late som jeg bare ønsket å gjøre dette
Hvis det ikke var noe innenfor som hadde en bakgrunn av laks.
Så husk at denne ene har en bakgrunn av laks,
fordi det er av klasse pen.
>> Men vi ønsker å si at bare kjøler som er i klasse spesiell, ikke i klassen
pen, bør ha som grenser.
Vel, hva du kan gjøre er du kan si,, spesiell, plass, .cool.
Og hva det gjør, når du tror om det, er det i utgangspunktet si,
OK, finne meg alt som passer spesielt.
Deretter innen disse kodene, finne meg alt som er kult.
ALLISON Buchholtz-AU: Så en annen måte som kan være bra å tenke på dette,
bringe den tilbake til C, er akkurat som ideen om omfanget.
Så når du har noen velgeren, som de
at vi har jobbet for før dette, hele web-side, alt av HTML
er innenfor virkeområdet, ikke sant?
Men når vi har disse foreldre-barn-relasjoner,
det er som om du er innsnevring ned der du leter til et bestemt sted,
som om likhet, vi ser innenfor en bestemt funksjon i stedet
av våre hele filen.
PUBLIKUM: Så med det i tankene, ville det har noen betydning hvis vi hadde changed--
ALLISON Buchholtz-AU: Ordren?
PUBLIKUM: --Det klasse i CSS å .cool, plass,, spesiell?
ALLISON Buchholtz-AU: Ja, fordi da at
vil si, omfang det til alt som har kule,
og deretter se på hva has-- Jeg mener, som, i dette tilfellet
Jeg tror ikke det ville ha endret det.
>> TOMAS Reimers: Hvis vi hadde sagt hva?
Unnskyld.
>> ALLISON Buchholtz-AU: Hvis vi omfang den avkjøles og deretter
se etter ting av spesielle, det ville være det samme, faktisk.
>> TOMAS Reimers: Så det ikke ville være.
>> ALLISON Buchholtz-AU: Det ville ikke?
Oh, oh well.
Jeg er galt.
>> TOMAS Reimers: Så grunnen det er different-- felles mistake--
er det akkurat nå bare koblingen har kule, ikke sant?
Jeg tror spørsmålet mitt til dere er, hva på denne siden er matchet av .cool?
Det er to tags her, ikke sant?
Som er denne og denne.
Begge matche kult.
Ingenting annet gjør.
Så hvis du sa, .cool, plass, , spesiell, hva du kommer til å si er,
innenfor disse kodene, hva er spesielt?
ALLISON Buchholtz-AU: Hm.
Det er det it-- riktig.
Fordi det er som bare noe her.
>> TOMAS Reimers: Så det velger ingenting.
>> ALLISON Buchholtz-AU: Mens med spesiell, vi er innenfor disse kodene her.
>> TOMAS Reimers: De og dem.
PUBLIKUM: OK.
Så disse kodene fra skråstrek?
>> TOMAS Reimers: Ja.
Betyr det fornuftig?
Hvordan det er i utgangspunktet prøver å begrense omfanget.
ALLISON Buchholtz-AU: Yeah.
Jeg tror det er trolig den enkleste måten å tenke på det.
>> TOMAS Reimers: Så vi fant dette, og vi fant dette både matchet spesiell.
Og så ber vi, innenfor disse gutta, hva som er kult?
Og innenfor denne, denne er kul.
Innenfor dette, er ikke noe kult.
Så dette er den eneste kode som gjenstår.
>> ALLISON Buchholtz-AU: Mens kult er bare innenfor disse noen koder der.
TOMAS Reimers: Nettopp.
Og hva som er spesielt innenfor de?
Ingenting.
Nå, hva jeg vil si er hvis det var ingen plass,
du spør hva som er kult og spesiell-- eller hva som er pen og spesielt, ikke sant?
Hvis du sier .special.pretty, det er det samme som .pretty.special.
>> Fordi det fjerne mellomrommet er spør er, når du sier, spesiell,
du spør, OK, hvilke som er spesielt?
Og så av dem, som de er også pen,
som er det samme, grammatisk, som spør, hva er pen,
og deretter av dem, hva er også spesiell?
Høyre?
Det er forskjellen på hva som er innenfor det som er.
PUBLIKUM: OK.
TOMAS Reimers: Yeah.
Awesome.
Så med det i tankene then--
>> ALLISON Buchholtz-AU: Jeg tror vår siste ting er (IN FANCY britisk aksent)
boksen modell.
>> TOMAS Reimers: Den box-- [humrer] Jeg elsker måten Allison sier det.
Så boksen modell ting.
>> ALLISON Buchholtz-AU: Bare ha en boks, vil jeg være din boks modell.
TOMAS Reimers: Så la oss snakke om det.
Så akkurat nå har vi brukt mye tid på å snakke om velgere.
Nå, dere er sannsynligvis, som, mestere av selectors-- du vet,
hvordan du nøyaktig velge innholdet som du ønsker å manipulere på skjermen.
>> Så nå er spørsmålet, hvordan nøyaktig kan du manipulere det?
Så jeg antar det mest grunnleggende måte å tenke på at
er, vel, hva er et element i CSS?
Vi har brukt mye tid snakker om, hva er en kode,
eller hva som er den mest grunnleggende representasjon av en kode?
>> En god måte å tenke på det vil si hvilken form er laks?
Hvilken form er, i likhet med den laks-farget bakgrunn?
>> PUBLIKUM: Det er et rektangel.
>> TOMAS Reimers: Det er et rektangel, ikke sant?
>> ALLISON Buchholtz-AU: Var ikke et lurespørsmål.
[Latter]
>> TOMAS Reimers: Ikke prøver å lure dere dette sent.
Så vi har denne rektangel.
Og tag er en p, ikke sant?
Slik som gir oss god troen på at avsnitt
er representert som et rektangel, i minst i sinnet av leseren, som
det er.
>> ALLISON Buchholtz-AU: Jeg mener, nettlesere er vanligvis rektangulære,
så det er fornuftig.
>> TOMAS Reimers: Ideen her er at alle kodene i CSS
er representert som et rektangel.
Og hver rektangel har fire deler i henhold til CSS, OK?
Du har det faktiske innholdet.
Det er der teksten ligger.
>> ALLISON Buchholtz-AU: Kanskje bildet ditt.
>> TOMAS Reimers: Yeah.
Du har polstring, som er bare en slags hvit plass.
Da har du en grense.
Og da har du margin, som er hvit plass utenfor det.
Så det gir ingen mening til noen, så vi er
kommer til å snakke om det for et sekund.
Så akkurat her, hva vi skal gjøre er vi kommer til å lage noen divs, OK?
Unnskyld meg mens I--
>> ALLISON Buchholtz-AU: Jeg har lyst vi bør sette en søt bilde i.
>> TOMAS Reimers: Vi definitivt burde.
>> ALLISON Buchholtz-AU: Jeg føler at alle
kunne dra nytte av en søt bilde, er tatt.
>> TOMAS Reimers: Kan vi alle dra nytte av a--
>> PUBLIKUM: Ja, klart det.
TOMAS Reimers: OK, kult.
Så vi bør sette en søt bilde i et eller annet sted.
ALLISON Buchholtz-AU: Jeg føler meg som en søte kaninen kan være nyttig akkurat nå.
TOMAS Reimers: Sure.
ALLISON Buchholtz-AU: Slutten av uken.
Har noe adorab--
>> TOMAS Reimers: Hvordan bout en kattunge?
>> ALLISON Buchholtz-AU: En kattunge fungerer også.
>> TOMAS Reimers: Cool, fordi det er et nettsted for det.
Det kalles PlaceKitten.
ALLISON Buchholtz-AU: Det er flott.
TOMAS Reimers: Ja.
ALLISON Buchholtz-AU: Bare for, som, eksempelbilder i ditt nettsted.
TOMAS Reimers: Mm-hm.
Det er også PlacePuppy.
Og det er PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Egentlig?
>> TOMAS Reimers: Å, gjør vi ikke har tilgang til internett her.
>> ALLISON Buchholtz-AU: [Stønner]
Tragisk.
TOMAS Reimers: Ellers Jeg ville vise dere
hvordan å sette bilder på nettstedet ditt.
Vi kommer til å prøve å få dette arbeider før vi må gå.
Men for nå, er vi bare kommer til å snakke i farger da.
Vi ønsker å sette bilder av kittens--
>> ALLISON Buchholtz-AU: Vi gjorde.
>> TOMAS Reimers: --Rommet Internetts ned for øyeblikket å være.
Så vi har to divs, og vi er kommer til å gi dem to IDer.
Vi kommer til å kalle det "Første" og "andre".
Så id = "først."
Og vi kommer til å gi dem to farger.
Så hvordan velger vi noe med en id av "første"?
ALLISON Buchholtz-AU: Dot eller hasj?
PUBLIKUM: Sharp.
TOMAS Reimers: Sharp, perfekt.
Sharp, hasj, uansett we--
>> ALLISON Buchholtz-AU: Mange ting å kalle det.
>> TOMAS Reimers: OK.
Vi kommer til å bosette seg på hashtag, og det er det vi kommer til å gå med.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS Reimers: Så hashtag første.
>> ALLISON Buchholtz-AU: So du kan tweet den seminar--
hashtag CSS, hashtag kult.
TOMAS Reimers: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, ja.
TOMAS Reimers: OK.
Så vi har "første" og "andre".
Så først, kommer vi til å ha en bakgrunnsfarge på rød.
ALLISON Buchholtz-AU: Uh, tykktarm.
TOMAS Reimers: Yup.
ALLISON Buchholtz-AU: Jeg skal være din spot-kontrolløren.
TOMAS Reimers: Allison fikk meg.
Background-color of blue--
>> TOMAS Reimers: Purple!
>> TOMAS Reimers: Purple.
ALLISON Buchholtz-AU: Ja.
Lilla er min favoritt farge, og vi har ikke brukt den ennå.
>> TOMAS Reimers: Violet.
ALLISON Buchholtz-AU: Violet.
Som fungerer.
>> TOMAS Reimers: Så vi er kommer til å ha to divs.
De kommer til å være helt tom.
Vi bør nok ha litt tekst.
Så "første" kommer til å være "HELLO".
Og "andre" vil say--
>> ALLISON Buchholtz-AU: Farvel.
>> PUBLIKUM: - "verden."
Hei, farvel.
ALLISON Buchholtz-AU: jeg så dem på konsert den andre uken.
TOMAS Reimers: The Beatles?
ALLISON Buchholtz-AU: For Reals.
De er ikke så stor.
Jeg liker det ikke.
>> TOMAS Reimers: Vi har "Hei" og "Farvel".
Og igjen, er CSS bare kjempebra, fordi den anerkjenner våre farger.
Trenger ikke å selv bekymre seg for at de eksisterer.
De gjør.
>> ALLISON Buchholtz-AU: De eksisterer.
>> TOMAS Reimers: Så CSS tror jeg har 255 ord til å snakke om farge.
Hvis du kan tenke på en farge utenfor de 255, som, vil jeg bli imponert.
ALLISON Buchholtz-AU: Yeah.
Jeg tror dere kan ha bare komme inn rett etter.
>> TOMAS Reimers: Så her, vil du se at vi har to bokser
rett oppå hverandre, ikke sant?
HELLO og farvel.
>> ALLISON Buchholtz-AU: Det er ingen plass i mellom.
De er bare smooshed rett oppå hverandre.
>> TOMAS Reimers: Så det første Jeg tror vi bør snakke om
er la oss say-- også ja.
Så CSS representerer dem som slags bokser.
Og som bokser, har de innhold.
Og innholdet er akkurat nå liksom HELLO eller GOODBYE og det er det.
OK?
>> Så en av de første tingene du kan gjøre er at du kan legge til padding.
Padding sier hvor mye plass det bør la på hver side.
Så la oss si jeg ønsker å si 10 piksler på hver side.
Og jeg vil dissekere det i et sekund.
ALLISON Buchholtz-AU: Alle disse tingene her
kommer til å være mest i piksler for resten av seminaret.
Du kommer til å se at det har litt plass rundt det, ikke sant?
Så hva du ikke ser her er det dette usynlig form for padding
på hver side, som sier, som, OK, du har din boks med content--
>> ALLISON Buchholtz-AU: Vil du å bare trekke opp inspisere element?
>> TOMAS Reimers: Ja, det er en god idé.
ALLISON Buchholtz-AU: Finn også jeg at inspisere elementet er en god måte
å finne ut om noe er å gå galt, noe uventet skjer,
inspisere kodene og se hva det er som skrives er nyttig.
>> TOMAS Reimers: Så jeg er ikke sikker hvis dere kan se denne fargen.
Kan du?
Du vil se denne padding på den slags kant.
Og så ser du den faktiske Innholdet i blått, ikke sant?
Så det er veldig grunnleggende i boksen modell.
Du har innhold.
Da har du polstring.
>> PUBLIKUM: Hvorfor ikke bare bruke boksen inne the--
>> ALLISON Buchholtz-AU: Høyre.
Fordi det er bare å velge elementet akkurat nå.
>> TOMAS Reimers: Yup.
Andre ting.
Så la oss snakke om det padding-kommandoen for et sekund.
Så i CSS, målinger må ha en enhet.
Så først må beløpet.
Så i dette tilfellet, har vi sa 10.
Og så den neste vi har sagt er piksler, px.
Andre som du måtte ha er ting som centimeter, inches.
Du kan gjøre ting liker, hva er 10 inches?
Og det kommer til å bli latterlig.
>> ALLISON Buchholtz-AU: Oh, gutt.
>> PUBLIKUM: Whoa.
>> TOMAS og Allison: Yeah.
TOMAS Reimers: Så det er all padding.
Jeg kommer til å gå tilbake til piksler.
>> ALLISON Buchholtz-AU: Pixels en tendens til å være, som, standarden.
Når du ser på en rekke nettsteder, de stort sett jobber i piksler.
TOMAS Reimers: Så du kommer til å se enten pixels-- de andre som du ser
er em, som er en em er lik høyden av skriften
som du nå bruker.
>> ALLISON Buchholtz-AU: Mm.
TOMAS Reimers: Det er en god måte å si, liker, jeg vil ha så mye plass som min font
er å ta.
ALLISON Buchholtz-AU: Visste ikke det.
Du lærer noe nytt hver dag.
TOMAS Reimers: Det er en Mange målinger i CS.
Jeg foreslår at du ser dem opp.
For alle dine saker, tror jeg piksler bør være tilstrekkelig.
Og de er også hva du kommer til å se
i de fleste eksemplene gjøres online.
Så vi lar det bli med piksler.
>> Du kan også, bør jeg say-- så padding sett alle de polstringer.
Du kan også gjøre noe sånt "Padding-top" å bare set--
ALLISON Buchholtz-AU: Kanskje vi får vår "HALLO" tilbake.
TOMAS Reimers: --to bare sette padding på toppen og ingenting annet.
Så de fire kommandoer er padding-top, padding-bottom, padding-venstre,
og padding-right.
>> ALLISON Buchholtz-AU: Akkurat som du forventer for en boks.
>> TOMAS Reimers: Yeah.
Ingenting er for gale der.
Betyr det fornuftig?
Så det er padding.
Jeg kommer til å sette alle de polstringer tilbake til 10.
Og så kommer jeg til å gå videre til grensen.
>> Så hva grensen er er Grensen er en merkelig kommando.
Det tar liksom tre ting på en gang.
Så det første er hvor stor du vil den skal være som en måling.
Igjen, jeg bare bruker piksler.
Og det siste jeg bør legge til målinger
er det én ting som trenger ikke en enhet er 0.
Det er faktisk feil for å gi en 0-enhet,
fordi 0 er 0 tvers inches, piksler, centimeter, uansett.
Det hele betyr bare 0, ikke sant?
Så først du gi den målingen.
>> Så du gir den stilen.
Så jeg kommer til å si "solid".
Og vi skal snakke om hva det betyr.
Og så til slutt, du gir den en farge.
Så jeg kommer til å si "svart".
Og disse er alle tingene vi har nå sett før, med unntak av stil,
men vi skal snakke om det.
Så dere har sett målinger, og du har sett farger.
Og det som skjer er vi få dette fin svart ramme rundt det, ikke sant?
Dere se hvordan vi gjorde det?
>> PUBLIKUM: Yeah.
>> TOMAS Reimers: Cool.
Så hva er det?
Så først av alt, det er én piksel.
Det er selvinnlysende nok, ikke sant?
Liker, er det én piksel tykk.
Eller det ville være én piksel, men jeg er zoomet inn, så det er litt mer
enn.
>> ALLISON Buchholtz-AU: Og vi har dette latterlig oppløsning TV.
>> TOMAS Reimers: Yeah.
Du kan gjøre den større, mindre, uansett.
Så her er en to-pixel grensen.
Du vil se det er dobbelt så tykk.
Neste ting du har er farge.
Det er ikke interessant.
Jeg kommer ikke til å snakke om det, egentlig.
>> ALLISON Buchholtz-AU: Men stilen kan være litt interessant.
>> TOMAS Reimers: Yeah.
Slik stil, er det få som at jeg ser brukes ofte.
Første ens solide, neste ens prikkete, og den siste er stiplet.
Og her er stiplet.
Du vil se at de er en haug med prikker, ikke sant?
En god måte å liksom få en fin ramme går, streker er også ganske populært.
>> ALLISON Buchholtz-AU: Og da selvfølgelig, jeg er
sikker på at det er mange andre stiler som du kan få.
Og vi har et flott utvalg av koblingene på slutten for dere
å slags lese og se på mer kjølig CSS.
>> TOMAS Reimers: Og så det siste, vi er
kommer til å snakke om det boks modeller virkelig rask.
Oh, og deretter grensen, akkurat som polstring,
du har også ting som border-left, border-right, border-top,
border-bottom, som lar deg å få på en bestemt grense.
Så her er bare grensen venstre-definert.
Betyr det fornuftig?
>> ALLISON Buchholtz-AU: Det er en kul måte å understreke ting eller legge til
linjer mellom ulike elementer.
TOMAS Reimers: Absolutt.
Så det er vår grense.
Og den siste ens margin.
Margin er som polstring bortsett fra at det ikke er within--
ALLISON Buchholtz-AU: Det er ikke rundt element
men faktisk rundt hele boksen som vi har vært vitne til.
>> TOMAS Reimers: Yeah.
Allison sa det perfekt.
Det er ikke, som, inni element, er det rundt hele boksen.
Det betyr at ting som bakgrunn gjelder ikke for det.
Og det sier i utgangspunktet, liker, jeg ønsker ikke noe
i dette mye plass for meg.
Så som her har vi en margin på 10 piksler.
Så ingenting innen 10 piksler bør være ved siden av meg.
Det er litt av sin plass, men slags ikke.
Så det er veldig grunnleggende i boksen modell.
Betyr det fornuftig?
Cool, kult.
ALLISON Buchholtz-AU: Awesome.
Så nå tror jeg vi bare har våre kule ressurser
at vi tar dere gjennom svært raskt.
Og vi vil actually-- godt, har vi internett ennå?
>> TOMAS Reimers: La oss se om jeg kan åpne opp--
la meg bare se om jeg kan få internett raskt
mens Allison snakker om noe Allison ønsker å snakke om.
ALLISON Buchholtz-AU: Så basically-- jeg ikke
vet ikke hva annet jeg kan si på dette punktet.
Men disse er noen virkelig gode ressurser.
Disse er de som Tomas og jeg har brukt
og at vi faktisk brukes til å prep for dette.
W3Schools er en som du Gutta skulle ha sett før.
Vi anbefaler det for en masse ting med CSS.
Jeg vet at jeg anbefaler det til min seksjon hele tiden.
>> En av de store tingene er at det lar deg slags rot med CSS
og se endringene momentant i dette,
som dobbeltvinduet vise at den har.
Så du trenger ikke å bekymre deg sette opp din egen nettside,
eller sette opp vhost i din lokale apparatet og lokale verten,
og få alle at ting fungerer.
Det er innebygd høyre på siden.
>> Og det har disse lite leksjoner som du kan
gå gjennom for å lære mer om velgere,
eller lære hvordan du manipulerer din font, eller en bakgrunn, eller et bilde.
Og du har disse øyeblikkelig resultater som du
trenger ikke å gjøre noe andre prep arbeid for.
Så jeg elsker W3Schools.
Det er fabelaktig.
Er det å jobbe?
>> TOMAS Reimers: Yeah.
Nei, det er ikke det.
Ønsker du meg til å prøve og starte datamaskinen på nytt?
Eller vil vi ha to--
>> ALLISON Buchholtz-AU: Jeg mener, vel, vil dette også være online.
Alle lysbildene vil være online.
Så jeg bare anbefale gjør disse.
>> Dette er flott som bare som en jukselapp.
Det er bare alle de grunnleggende kommandoer som du har.
Det er flott når du er først starte opp ditt nettsted.
Fordi kanskje du ikke ønsker å komme inn i det hele tatt
den virkelige nitty sandete design tunge ting.
Du trenger bare å formatere den på en måte den slags er fornuftig og vilje
gjøre for tiden.
Og hvis du virkelig ønsker å komme inn i det, jeg vet
Dette er, som en av Tomas favoritt referanser.
Vi bruker den til prep, og det er fabelaktig.
Det er den Utvikler fra Mozilla.
>> TOMAS Reimers: Så Mozilla er folk som gjør Firefox.
Og det er bare deres egen utvikleren referanse, som jeg tror er kjempebra.
Og det har en fantastisk liste over ressurser.
Så vi have--
>> ALLISON Buchholtz-AU: Og så siste notatet er
når du prøver å designe din webside,
henter inspirasjon fra ting som du synes er pen.
Inspisere element, inspisere kildekoden
kan være super nyttig for å prøve å finne ut
hvordan å style ditt eget nettsted.
>> Ofte føler jeg meg som den beste måte, i tillegg til eksperimentering,
er bare å se på ting som er pen.
Jeg synes det er veldig vanskelig å bare slags designe ting på egen hånd,
spesielt i begynnelsen.
Så vennligst se på nettsteder at du liker å se på.
Finne ut hva som gjør dem appellerer til deg.
Og da gjerne prøve og gjenskape det.
>> TOMAS Reimers: Høyre.
Selv liker nettsteder som dette, kan du se
det er definitivt en div på toppen.
Og da har du en annen div innen her, som er CSS Awesomeness.
Og da har du en haug med lenker her.
Hvis du virkelig bare inspisere elementer, kan du sortere på
begynne å se hva gjør nettsteder se ut, og hvordan kan jeg
gjenskape at hvis jeg ville.
Betyr det fornuftig?
Så vi har bare tre minutter igjen.
Så spørsmål?
Noen av dem?
Ja.
>> PUBLIKUM: For fargen rektangel, hvordan ville du
have-- hvis du ikke ønsker det går over hele siden, kan
du har gjort det går over bare halve siden eller bare teksten?
>> TOMAS Reimers: Ja, absolutt.
Så la meg se faktisk.
Jeg har to ideer.
Så først av alt, du kan også bruke prosentene.
>> PUBLIKUM: Virkelig?
>> ALLISON Buchholtz-AU: Så noe å slå opp er relativ posisjonering.
Det er noe som vi har ikke tid til å komme inn,
men det er noe jeg definitivt anbefaler dere å sjekke ut.
>> TOMAS Reimers: So prosentene.
Og se hvordan vi gjorde det bare 50% av bredden?
ALLISON Buchholtz-AU: Hvis du faktisk vet antall piksler,
du kan være mer presis på den måten.
Du kan fikle rundt med den.
Men 50%.
Hvis vi skulle endre størrelsen på nettleseren vår, det ville gjøre det mindre.
>> TOMAS Reimers: Vel, det er utgangspunktet 50% akkurat nå, tror jeg.
Det er 50%, og deretter margen har blitt lagt til det.
CSS har mange quirks.
Så akkurat nå er dette 50% av sidebredden.
Men husk at du har 10 piksler tatt ut fra hver side.
Så hvis du skulle flytte den mot venstre kant av nettleseren,
så ville det se ut som 50%.
Igjen, som jeg sa, CSS kan være mye gjetning-og-sjekk.
Liker, tror du at noe er kommer til å oppføre en måte,
men det opptrer en helt annen måte.
>> ALLISON Buchholtz-AU: Og du bare få smartere,
og du bare få en bedre intuisjon for det når du flytter sammen.
>> TOMAS Reimers: Og det blir verre og verre.
Så det er egentlig bare et løp.
>> ALLISON Buchholtz-AU: Det er super oppmuntrende.
Vi vil ha dem til å like CSS.
>> TOMAS Reimers: CSS er kjempebra.
Husk det.
Andre spørsmål?
>> ALLISON Buchholtz-AU: Den ene tingen.
Noe annet?
Cool.
>> TOMAS Reimers: Awesome.
>> ALLISON Buchholtz-AU: Vel, hvis du dere har noen spørsmål senere,
vi er alltid tilgjengelig som per vanlig.
Du vil sannsynligvis se noen av oss for endelig prosjekter
og definitivt på hackathon.
>> TOMAS Reimers: Absolutt.
Og på messen.
>> ALLISON Buchholtz-AU: Og på messen.
Oh.
>> TOMAS Reimers: Se frem til se alle dine awesome--
>> ALLISON Buchholtz-AU: Vi får se alle dine fantastiske nettsteder
som vil være vakker.
TOMAS Reimers: Du kan alltid se, som, nettsteder
som hadde, som, god CSS og deretter som de som ikke prøver å gjøre CSS.
ALLISON Buchholtz-AU: Også en annen ting, en ting til å se nærmere på
er bootstrapping.
Så Bootstrap er stor.
>> TOMAS Reimers: Google at hvis you--
>> ALLISON Buchholtz-AU: Google det.
Det er fabelaktig.
Du vil elske det.
Og nå som du har en grunnleggende forståelse av CSS,
det vil gjøre mye mer fornuftig.
Awesome.
Takk, folkens.
>> TOMAS Reimers: Takk så mye.