[Speel van musiek] ALLISON Buchholtz-AU: So ons is basies net gaan te gee jy 'n oorsig van CSS, want ons weet dat dit nie gedek in al die afdelings. En ons wil regtig om seker te maak dat jy ouens het hierdie instrument tot jou beskikking, want dit het die vermoë om te maak jou webtuistes lyk baie mooier. 

En as jy 'n webwerf te bou, dan jy waarskynlik wil dit mooi te maak. Ek bedoel, jy hoef nie te, maar ek sal dit stel. [Lag] As jy wil hê dat gebruikers om dit te gebruik, kan jy wil dit 'n bietjie [onhoorbaar] te maak. So ons gaan om te probeer en gee jou net 'n paar basiese gereedskap en begrip, sodat wanneer jy gaan uit en jy navorsing dinge oor CSS, dit is nie 'n gebrabbel voltooi, soos CSS soms te wees. 

TOMAS Reimers: Ja. Allison sê dit baie goed. So ek dink die eerste ding wat ons moet begin met is wat CSS? So CSS is awesome. CSS-- 

ALLISON Buchholtz-AU: Dit is die naam van ons seminaar. 

TOMAS Reimers: Ja. Dit is regtig belangrik dat jy verstaan ​​dat deur toe. As jy net weg te neem een ding, dit is wat CSS as awesome. Twee is CSS staan ​​vir Cascading Style Sheets. So in sy kern, CSS is 'n styl blad, wat beteken dit kan jy 'n webblad te stileer. En dan wat dit beteken, is dit 'n manier styl te voeg tot jou webtuistes. So deur styl, bedoel ons alles dit is nie structural-- so goed soos kleure, agtergrond beelde, grense, soos, padding, marges. Ons sal praat oor wat al beteken dit dat in 'n bietjie. 

Dus het ons net vooruit gegaan en oopgemaak beide van diegene in gedit. So, dit is index.html. En dit is main.css. So main.css het niks. ALLISON Buchholtz-AU: Nee styl so ver. TOMAS Reimers: Geen. En as jy sien, dit is 'n baie lelike site. ALLISON Buchholtz-AU: Dit is net plain. TOMAS Reimers: Ja. Ja, dit is nie lelik nie, dit is net minimalistiese. En dan is hier ons index.html. En so is dit vir 'n vinnige herhaling van HTML, Allison, jy wil net praat oor die bladsy? 

ALLISON Buchholtz-AU: Ja. So natuurlik, ons het ons HTML tag, wat net name HTML-lêer. Ons het ons kop hier, met CSS Awesomeness, which-- as jy terug te gaan. Waar is dit? 

TOMAS Reimers: Oh. Ja, jy kan sien. ALLISON Buchholtz-AU: En kennis van die kop is hierdie blad kop reg hier. En dan "Hello, world!" is die teks wat ons het net vertoon op die web bladsy, wat is-- gaan terug. Terug. Wat net in ons liggaam here-- die plain text. Ook, een ding om te sien, as jy kyk hier, Tomas aangeskakel tot hierdie twee van ons gly. So lank as wat jy al drie van hierdie, jy is fyn. Hulle kan in enige volgorde wat hulle wil. Wat is die belangrikste is net dat jy het elk van die drie dinge. 

TOMAS Reimers: Cool. Voeg 'n doc tipe? ALLISON Buchholtz-AU: Ja. TOMAS Reimers: Ja. Cool. ALLISON Buchholtz-AU: Blykbaar, my mie hou nie my. TOMAS Reimers: O, gee ons 'n sekonde net terwyl Allison skakel haar mic. So ja. So het ons ons hoofblad. Dit is soort van unstyled. Ons het nie veel nie. Ons moet net basies teks. Ons het die styl vel. Ons het die titel. Dus net kaal sonder been komponente van 'n webwerf. 

So van daar af, laat ons praat oor wat CSS is en hoe dit lyk en al daardie. So vir that-- ALLISON Buchholtz-AU: Terug na die skyfies. TOMAS Reimers: Terug na die skyfies. En Allison kan oorneem. 

ALLISON Buchholtz-AU: Woo. OK. So in jou CSS-lêer, jy gaan te hê 'n baie van hierdie dinge genoem keurders. Dit sal net die basis van jou CSS-lêer. Dit is net gaan om te wees baie, baie van hulle nie. So selector. Dit is net die algemene anatomie. Ons gaan om te gaan deur middel van voorbeelde, want as jy ouens nooit gekyk my artikel, ek voel soos dinge in die abstrakte nie regtig sin maak nie. Dit help altyd die voorbeelde te sien. 

So ons het 'n paar selector. Dit gaan 'n paar identifiseerder vir om te wees wat ons wil hê dat die styl op. En dan kan ons enige het stel reëls en waardes. So keurders wat jy dalk sien dalk iets soos die liggaam wees, of paragraaf met P, of kop, of wat ook al, alles wat jy wil hê dat jou HTML tags te wees. 

So in hierdie geval, ons het die liggaam. En ons het 'n paar reël, wat dit stem ooreen na wat jou styl van toepassing is. So in hierdie geval, ons het agtergrond en font gewig. So dit gaan verander die agtergrond van enigiets binne 'n liggaam tag van ons HTML-lêer. En dit gaan om te gee dit hierdie ligblou waarde. 

So dit gaan die maak agtergrond ligblou. En dan enigiets binne liggaam is gaan 'n font gewig vet te hê. So dit is net gaan om te vet almal van ons teks. En dit is net een selector. Maar jy kan baie baie van hierdie. En as ons gaan om te wys later, 'n bietjie meer in hoe wat werk en meer voorbeelde is daar. Enigiets wat jy wil byvoeg? 

TOMAS Reimers: No. Allison het dit. Ons is maar net gaan om te sny 'n byvoorbeeld hier op ons voorbeeld site. So laat ons eintlik neem hierdie. Dit is ideaal. So ek is net gaan om te kopieer en plak daardie reg in ons main.css lêer. En ek gaan om dit te red. En dan sal ons dit loop. So kant nota, een van die mees frustrerende dinge word as jy nie 'n lêer stoor nie, en Dan moet jy, soos, herlaai die bladsy, en soos, hoekom is nie die verandering gebeur? Dit gebeur. So hier het ons gesien dat ons ons webwerf 'n ligte blou agtergrond en 'n paar vetdruk teks. 

Ek moet ook noem, as jy ouens het vrae oor enigiets ons doen, voel asseblief vry om ons te stop en vra ons. Ons is heeltemal bereid vrae aan akker. 

ALLISON Buchholtz-AU: Dit is duidelik dat, met CSS, alles bou op sigself. So as daar een ding doen nie sin maak nou, ons wil nie dat jy te bog later af. 

TOMAS Reimers: So laat soort dissekteer hierdie. So wil jy begin met die selector hier? 

ALLISON Buchholtz-AU: Ja. Soos ek voor sê, liggaam is net ons selector hier. So as ons gaan terug na ons index-- ah. 

TOMAS Reimers: Wat ek net gesluit. Gee my 'n tweede. So File, Open, index.html. ALLISON Buchholtz-AU: Cool. So as jy hier sien, het ons het hierdie liggaam tags, reg? So het die selector ooreenstem net die etikette wat ons praat. So lyk reg hier. So wat ons sê is everything-- kan ons teruggaan? Ek wens ek kon net soos raak die skerm. Dit sou so baie koeler. 

So iets binne daardie liggaam etikette, wat ons gesien was net soos die teks, en die liggaam in die algemeen verwys na, soos die agtergrond. As jy ooit wil verander die agtergrond, wat gaan om te wees in 'n liggaam tag. Net het hierdie reëls toegepas word vir hulle. 

So as ons om te gaan na index.html and-- eintlik, kan ons iets buite die liggaam? As ons gehad het, soos 'n footer of iets, sou dit nie van toepassing op hierdie. Maar enigiets binne hierdie liggaam tags gaan geraak word deur hierdie liggaam selector wat ons gemaak het. So as jy was om te tik iets anders there-- 

TOMAS Reimers: Kom ons ry dat die huis. So as ons 'n div-- so dit is net nog 'n tag wat jy kan hê. Ek gaan om dit te sluit. Of laat ons maak dit 'n paragraaf. So p staan ​​vir paragraaf. En binne daardie paragraaf. En dan sê ek: "Dit is die teks." Cool. En dan het ek hierdie reël van toepassing op 'n paragraaf in plaas van die liggaam. Jy sal sien hoe dit slegs van toepassing op die nuutgestigte paragraaf, regs, nie die hele ding. Maak dit sin maak? 

ALLISON Buchholtz-AU: So, dit is al die liggaam, Maar nou is ons selector net ooreenstem met die paragraaf. So het ons net vet en blou vir hierdie spesifieke paragraaf, want dit is die enigste ding wat wat is ingesluit in die p tag. 

TOMAS Reimers: Maak dit sin soort van hoe dinge omsluit ander dinge? ALLISON Buchholtz-AU: Ook, net om te sê, soos, een van die beste maniere om om werklik gemaklik met CSS is om net dinge doen soos hierdie, net probeer om dit uit. Dit is baie eenvoudig om iets te tik uit, getref verfris en kyk wat gebeur. En soos met die meeste CS, eksperimentering kan dikwels lei tot 'n veel beter intuïtiewe begrip. Selfs meer as ons net, soos, praat met jou. 

TOMAS Reimers: Absoluut 100% saamstem oor die punt. So as ons gaan terug na hierdie, laat ons begin dissektering presies wat die twee doen. So het ons twee reëls op hierdie punt. So het die eerste een is die agtergrond. En jy sien dat ons sit dit gelykstaande aan 'n waarde ligblou. 

So in CSS, CSS is 'n soort van baie los oor hoe jy mag kleur te definieer. So kan jy hulle definieer by die naam. Jy kan ook iets doen, soos "rooi." En dan as ons gaan terug na hierdie, sal jy sien dat die agtergrond is rooi. Jy kan ook really-- Ek dink jy kan 'n bietjie kreatiewe met hierdie, kan jy nie? 

ALLISON Buchholtz-AU: Ek dink jy kan blok gebruik. Kan jy nie? 

TOMAS Reimers: Ja. Sodat jy kan gebruik blok. Maar ek dink die naam-wyse. Is daar nie? ALLISON Buchholtz-AU: Jy kan 'n hele paar doen. Pretty much soos die meeste kleure wat jy kan name-- soos, ek dink salm is een. 

TOMAS Reimers: Ons gaan probeer salm. ALLISON Buchholtz-AU: Ek dink chartreuse is daar in. TOMAS Reimers: Ja. Sien? So jy kan 'n bietjie kreatief te wees. 

ALLISON Buchholtz-AU: Jy kon kry mooi kreatief. Soos, as jy kan dink van die kleur naam, is dit waarskynlik daar. As jy regtig wil fyn detail, kan jy gaan blok. 

TOMAS Reimers: Ja. So heksadesimale. As jy ouens onthou dit terug van jou ou PSET, Image herstel, julle ouens het om te gaan met hierdie blok waardes. En die soort van te recap wat dit is, blok het drie waardes gestoor in dit. Dus is dit in groepe van twee inkremente. Die eerste twee verteenwoordig die rooi waarde. Die tweede een verteenwoordig die groen waarde. En die laaste een is blou? 

So VF gebeur te verteenwoordig 'n heksadesimale 255. So jy het 255 rooi, 255 groen, en 0 vir blou. En waardes wissel tussen 0 en 255. 

GEHOOR: Right. So in wese, kan ons soek die internet vir enige kleur wat ons wil, en identifiseer die eintlik bekend kleur spektrum combo, en dan kan ons dit in? ALLISON Buchholtz-AU: Presies. So jy het pretty much volle beheer oor die kleure wat jy wil binne CSS. Gaan ons praat oor agtergrond beelde later? Of wil ons dit doen? 

TOMAS Reimers: Ja. Absoluut. So die eerste, net om te wys dat rooi en groen is geel. En as jy 'n paar help om hierdie, jy kan Google iets soos "kleur plukker." ALLISON Buchholtz-AU: O, dit is so goed. Ek is mal Color Picker. 

TOMAS Reimers: colorpicker.com is 'n goeie voorbeeld. En hier, sal jy sien dat jy 'n volle Photoshop-agtige kleur plukker. 

ALLISON Buchholtz-AU: MM-hm. Ook, die koel dinge wat jy kleur skemas kan genereer sodat jy nie het nie, soos, botsende kleure. TOMAS Reimers: En dan hier is die blok waarde hier. So kan jy altyd vind aanlyn basies plekke die blok waarde uit te kry. Dit is nie soort van dat net soos ons sien die kleure van die wêreld in getalle. Dit is meer as ons gaan aanlyn en vind watter kleur ons wil hê, en dan neem die nommer neer. Want dit is net 'n baie maklike manier om dinge te verwys in CS. 

ALLISON Buchholtz-AU: En dan is daar also-- Ek vergeet om die presiese naam van die site. Maar daar is beslis, ek dink, iets van Adobe wat verwek kleur skemas vir jou, Dit is regtig 'n koel, omdat jy definitely-- dit soms hard om uit te vind, O, as ek wil hierdie kleur te gebruik, wat kan 'n nuttige een wees elders gebruik op my site te, soos, maak dit mooi en samehangende. 

TOMAS Reimers: Allison se praat oor een deur Adobe genoem Kuler, dink ek. Dit is K-U-L-E-R. ALLISON Buchholtz-AU: Ek dink nie so nie. Ek is redelik seker dit is die een. 

TOMAS Reimers: My gunsteling het altyd Kleur Skema Designer. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS Reimers: Wat is now-- 

ALLISON Buchholtz-AU: Ag, dit is pragtig. 

TOMAS Reimers: En jy kan basies sê, soos, Ek wil drie kleure langs mekaar. En dan kom ons doen iets mooi. En dan kan jy 'n voorbeeld kry van wat dit lyk. En dan as jy hover oor enige van hulle, dit gee jou die blok waarde. 

So net so 'n goeie manier om te begin dink oor kleur skemas of watter kleure in 'n webwerf dalk ook saam te gaan. Want dit kan verbasend wees nie so maklik om af te haal as wat jy dink. En dan die ander cool ding Ek het nog altyd gevind Oor hierdie webwerf is as jy getref Voorbeelde, sal dit wys wat 'n voorbeeld webwerf kan lyk soos die gebruik van daardie kleur skema. In elk geval. 

Terug na die werklike CSS. ALLISON Buchholtz-AU: Maar natuurlik, ons weet hierdie verwysings kan nuttig wees. TOMAS Reimers: Nee, hulle beslis kan nuttig wees. So het die tweede reël, Allison? 

ALLISON Buchholtz-AU: Ja. Die tweede reël is net ooreenstem met ons font. So font gewig is net soort of-- so die gewig sou wees as jy net wil, soos, normale of, soos, dunner fonts, of in hierdie geval, soos, vet. Ek vergeet nie. Wat is die as jy wou it-- is daar 'n dunner een as net, soos, normaal? TOMAS Reimers: Ek doen dit nie eintlik weet as daar 'n dunner een. ALLISON Buchholtz-AU: ek vergeet. So font gewig ons gewoonlik net gebruik vir vet. As jy wil regtig in dit, ons gaan om jou te wys. W3Schools het al die verskillende dinge wat jy kan doen vir fonts. Maar basies, as jy ooit wil niks oor font te verander, dit is altyd gaan wees, soos, font-iets. So dit sal wees soos, font-family as jy probeer om die werklike tipe te verander. Dit sal font-style as jy wees dit wil maak soos lopende, of kursief, of iets anders. Of selfs font-kleur, indien ons wou dit te verander. 

TOMAS Reimers: Yup. So jy kan dit verander. En die soort van net om te herhaling nou, sodat jy kan sien dat ons die selector hier. Ons het hierdie krullerige draadjies. En dan het ons reëls afgebaken deur kommapunte. Maak dit sin maak? Ja? Cool. So as dit is good-- 

ALLISON Buchholtz-AU: Terug. TOMAS Reimers: Kom ons praat spesifiek oor watter soort van die keurders wat ons het. Want nou het ons het soort van net getoon tags. Maar julle ouens kon sien dit geloofwaardig. Sê jy het twee paragrawe op 'n bladsy en jy wil in staat wees om te styl een, maar nie die ander, jy nie net wil om jouself te beperk te hê verskillende werklike HTML te gebruik tags aan hulle te gee die verskillende style. 

So het ons drie basiese tipes keurders. ALLISON Buchholtz-AU: Ja. Dus het ons tag, en dit is wat ons het gepraat oor nou. So dit is soort van soos jou liggaam of p. En dan het ons klas, wat is wanneer ons dit definieer in ons CSS-lêer, dit is altyd gaan dot word, wat ook al jy wil die naam van jou klas te wees. En dit kan toepas om verskeie dinge. 

Sê jy het vyf paragrawe en twee van die drie van hulle moet dieselfde styl te word, sou jy 'n klas van toepassing is. En dit is net die manier waarop ons dit doen. Ons gee jou 'n voorbeeld van waar dit eintlik toon. Maar as jy dalk 'n paar tag p, nadat dit, sou jy skryf, klas gelyk wat klasse jy wil aansoek doen om dit te. Dus, wat die klas keurders wat ons wil om aansoek te doen om hierdie spesifieke paragraaf, ons kon net skryf soos hierdie. Van die kursus, ek dink 'n voorbeeld maak dit baie meer beton. 

Die ander een wat ons het is id, wat ons aandui met 'n hash, of pond, of hashtag. TOMAS Reimers: Octothorpe. ALLISON Buchholtz-AU: Octothorpe. Dit werk ook. En hierdie een moet regtig uniek wees. Hulle moet net van toepassing op een ding op jou bladsy. Dus, of dit is 'n spesifieke paragraaf, of 'n item in 'n lys, of wat ook al, dit moet uniek wees. En op dieselfde manier dat ons net sê, soos, class = "class1 CLASS2," dit kan net wees id van alles wat ons het. TOMAS Reimers: Ja. So laat ons beslis praat oor voorbeelde hier. En ek is net gaan om te duik reguit terug in die kode. So laat ons kyk na ons HTML. En so het ons nou een paragraaf. Dit is die teks. Ek is net gaan om te verander dit. "Dit is die teks 1." En dan gaan ons 'n "Dit is die teks 2." 

ALLISON Buchholtz-AU: Tweede een. TOMAS Reimers: Yup. So het ons nou '"Dit is die teks 2," reg? En ons gaan om te sien dat as ons herlaai die bladsy, wat ons gaan om te vind is ons gaan find-- ALLISON Buchholtz-AU: Ooh. TOMAS Reimers: Ja. Ons gaan vind 'n "Dit is teks 1 "en" Dit is die teks 2. " 

ALLISON Buchholtz-AU: En uit pragtige geel kleur. 

TOMAS Reimers: En jy sal sien dat ons selector nou, wat van toepassing is op p's, of paragrawe, wat beide van hulle, omdat beide van hulle voldoen aan die voorwaarde dat hulle is albei 'n p tag. Dit is sinvol. So die vraag is, wel, wat As ons wou net een kry? So presies soos Allison sê, Ons het twee ander maniere om dit te doen. Ek gaan om te begin met id. 

ALLISON Buchholtz-AU: Kom ons begin met id. 

TOMAS Reimers: En albei hierdie is eienskappe. So eienskappe bestaan ​​in HTML. En wat hulle is, is iets wat jy voeg binne-in die tag wat skei van die tag naam. So jy kan het veelvuldige eienskappe. Ja? 

ALLISON Buchholtz-AU: Ek was net gaan om te sê, van jou voorbeeld van PSET 7, Indien enige van julle probeer te bring dinge aan die sentrum, jy dalk gebruik het "Teks align = sentrum." En jy is dit waarskynlik opgemerk moet gesentreer het jou teks of jou navigasie bar. So dit is net ook 'n kenmerk dat jy vertroud is met al mag wees. TOMAS Reimers: Daar is 'n klomp van eienskappe wat jy sal sien. Ja. Soos goeie verwysing na PSET 7. Ons het id. Jy kan ook ' klas, dinge soos hierdie. 'N Enkele tag kan baie eienskappe. So begin met id, laat se voorgee ons wil 'n id of-- Ek weet nie te hê. Ons sal dit noem spesiale, want hierdie een, ons is gaan vet te maak, en onderstreep, en wat ook al. ALLISON Buchholtz-AU: Dis nou eers super spesiaal. TOMAS Reimers: So hierdie een, ons het id spesiaal. So het die manier om dit te kies, dan is in main.css, eerder as 'n p tag, jy doen #special, OK? En wat kies die ding met id spesiaal. Is dit sin maak vir almal? GEHOOR: Ja. TOMAS Reimers: Cool. So nou as ons gaan terug, ons sal see-- Oeps. Ja. Ons sal sien dat dit net kies die een met id spesiaal. Ja? Klink cool. Ja. 

GEHOOR: Kan iets het 'n kenmerk van beide die klas en 'n id? 

TOMAS Reimers: Ja. GEHOOR: OK. En dan wat gebeur as jy dan gee dit 'n paar reëls in CSS dat konflik? TOMAS Reimers: Absoluut. Ons gaan beslis om te praat oor dit. So presies wat jy is om op, kan jy ook 'klasse. So laat ons voorgee ek het drie paragrawe en ek wou die eerste om die styl twee, maar nie die derde. Wel, kan jou eerste idee wees, goed, ek kon net gee die tweede een 'n id. Maar jy kan nie, want 'n ID, presies soos Allison sê, moet uniek wees. 

So in plaas van 'n ID, wat jy kan gebruik, is jy 'n klas gebruik. En 'n class-- wat dit moontlik maak om te doen is basies sê, dit behoort as deel van 'n groep. In hierdie geval, ons groep is 'n spesiale genoem. En wat gaan ons dan doen is ons gaan say-- eerder as pond, ons gaan dot te gebruik. OK? En sien dat die pond en dot slegs binne die CSS-lêer bestaan ​​nie, nie binne die HTML. ALLISON Buchholtz-AU: Ja. Belangrike onderskeid. 

TOMAS Reimers: Ek het het soveel stryd, want ek het die hash in die HTML en dan net gevoel dom vir 'n lang tyd. Kyk hoe dit kies beide van die kinders met daardie klas? Cool. 

Nou, kan dinge het verskeie klasse. Kom ons sê ek wou die eerste te maak twee het 'n agtergrond van geel en die tweede twee het 'n lettertipe kleur van blou. OK. Ek weet nie regtig hoekom ek wil wil doen, maar ek kan. 

ALLISON Buchholtz-AU: dalk nie vir jou webwerf aanbeveel nie. Maar vir ons doeleindes, sal dit doen. 

TOMAS Reimers: Dit is nie 'n goeie kleur skema. ALLISON Buchholtz-AU: Wel, geel en blou is my hoërskool kleure. Ek weet nie, al is. TOMAS Reimers: Allison se hoë skool het 'n groot kleurskema. [Gelag] So dan wat ons kan noem dit ' Kom ons noem this-- sodat ons het 'n spesiale en ons het Pretty. Ek stel voor, want dit, jy gebruik veel meer beskrywende name. ALLISON Buchholtz-AU: Ja, ek wil noem dit, soos, geel of blou. 

TOMAS Reimers: Ons is nie werklik 'n ware webwerf, wat is die rede waarom ons nie om dit te doen. Maar as jy eintlik 'n ware webwerf, jy mag hê, soos, artikel kop, Artikel inhoud, eerste woord, dinge soos wat, wat toelaat dat jy baie meer beskrywende. Dit is regtig net soos veranderlikes. Hulle moet op 'n manier waar genoem word wat jy kan, like-- ja, as sodanig. Volmaak. 

So agtergrond. En dan gaan ons so die say-- manier om kleur te verander is net "kleur." En ons gaan dit blou te maak. Dit is cool. So nou het ons die eerste twee spesiale. Volgende een gaan het "class = mooi." ALLISON Buchholtz-AU: en dan sal jy wil byvoeg "mooi" aan die middelste een. TOMAS Reimers: Yup. En dan na die middelste, by te voeg "mooi," wat gebeur is jy net 'n ruimte. So die klas kenmerk is 'n ruimte-geskeide lys van al die klasse wat van toepassing is op daardie etiket. OK? Dit is nie soos hierdie een behoort te 'n soort van spesiale klas genoem "Spesiale, ruimte, mooi." Dit behoort aan twee classes-- spesiale en mooi. Ja? Cool. 

En dan as ons kyk wat gebeur, ons is gaan om te sien dat die eerste een het geel agtergrond, swart teks. Tweede one-- 

ALLISON Buchholtz-AU: --has vet geel agtergrond met 'n blou teks. En ons laaste een het net die blou teks wat ons aan hom opgedra. 

TOMAS Reimers: Cool? Hoe keurders werk? Awesome. 

ALLISON Buchholtz-AU: Het ons wil praat oor die konflik dan nou? 

TOMAS Reimers: So ja. Absoluut. So wat gebeur as jy het 'n konflik, reg? Kom ons maak die eerste een stel iets like-- ALLISON Buchholtz-AU: Miskien hierdie een verander die agtergrond? TOMAS Reimers: Ja. So ons gaan maak "mooi" verander die agtergrond te salm. ALLISON Buchholtz-AU: Jy is net met al die groot kleure vandag Tomas. TOMAS Reimers: Ja. Omdat ek uitgevind ek kan gebruik salm as 'n ware kleur. So ons is net gaan om dit te doen nie. Ek dink ook Sunset is 'n ware kleur. GEHOOR: Sunset is 'n ware kleur? ALLISON Buchholtz-AU: Kom ons probeer dit. TOMAS Reimers: Na hierdie demo net omdat in die geval is dit rommel op, Ek wil nie te wees debugging. So ons weet salm is 'n ware kleur. So enige raaiskote op wat gaan gebeur? 

ALLISON Buchholtz-AU: Enige idee? 

GEHOOR: [onhoorbaar]. 

TOMAS Reimers: Ja. So jy het dit presies reg. Eintlik is dit neem om die laaste reël dat dit gegee is. 

ALLISON Buchholtz-AU: So is dit waar waterval in werking tree. 

TOMAS Reimers: onthou So hoe ons gehad het dat die waterval style sheets? So deur daardie, ons soort beteken dat ons 'n klomp van die reëls wat van toepassing is op die top van mekaar, en hulle kan ook ignoreer mekaar. 

ALLISON Buchholtz-AU: So wat se aan die onderkant sal ignoreer net die aan die bokant. Jy kan reëls wat heeltemal het negeer iets vooraf. Dit is ook die rede waarom jy wil wees versigtig wanneer jy stilering, sodat jy nie die skep van reëls wat jy net heeltemal oorheersende. 

TOMAS Reimers: Of miskien het jy wil reëls te vervang. 

ALLISON Buchholtz-AU: Of miskien het jy te doen. Ja. 

TOMAS Reimers: Verbeel jou jy het 'n klas wat geld vir die meeste dinge, maar laat ons sê jy wil die te verander agtergrond tot rooi en die skrif gewig te vet vir die meeste dinge, maar vir een, jy wil net die agtergrond rooi te wees, maar jy wil al die ander eienskappe, kan jy iets doen soos "font-weight = normaal," wat dan ongedaan dat vet verandering. Ja? Weereens, die beste manier, ek dink Allison het gesê dit is net die praktyk. 

ALLISON Buchholtz-AU: Eksperimentering. 

TOMAS Reimers: Oefen, oefen, praktyk, en eksperimenteer. Ek weet 'n baie van die mense wat dink CSS is net 'n baie raaiskoot-en-tjek aan die einde van die dag, waar as jy wil something-- wil doen, jy het 'n idee nie, maar jy waarskynlik nog nodig dit uit te probeer om seker te maak jy weet hoe dit lyk. 

GEHOOR: Wanneer jy aansoek doen klasse, meer as een dieselfde paragraaf of artikel, beteken dit saak watter volgorde jy kan tik hulle in die aanhalings? 

TOMAS Reimers: Nee, glad nie. 

ALLISON Buchholtz-AU: Wat belangrik is, is die orde binne jou CSS style sheet. GEHOOR: Kan jy die vraag herhaal? TOMAS Reimers: Oh. ALLISON Buchholtz-AU: Binne klas, wanneer jy gee klasse na iets in die HTML, doen dit saak wat om hulle in? Dit maak nie saak aan die orde. Wat belangrik is, is aan die orde van die klas keurders binne jou CSS, binne jou style sheet. 

TOMAS Reimers: Sound goed? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS Reimers: En dan ons gaan om voort te gaan aan- ALLISON Buchholtz-AU: Wat doen ons nou? Ek vergeet nie. O, ons moet net voorbeelde. Maar ons het soort van gedoen om daardie. Ons het voorbeelde gedoen op die vlieg. 

TOMAS Reimers: Ons kry te kombineer die keurders gou. 

ALLISON Buchholtz-AU: Ag, kry ons keurders te kombineer. TOMAS Reimers: So 'n paar voorbeelde is ons # Dog-- pond, of hashtag, of octothorpe, of wat ook al jy wil that-- skerp te bel. 

ALLISON Buchholtz-AU: Skerp hond. 

TOMAS Reimers: Dan het jy .pets. Iets het 'n ID van die hond, daar is net een hond op die bladsy. Iets het 'n id van kat, daar is net een kat. Daar kan baie troeteldiere op die bladsy. Dit is hoekom ons gegee het dat die klasse. Jy het 'n voorbeeld van p. En dan so een van die laaste voorbeeld, wat is iets wat ons het nie gepraat oor, is wat gebeur wanneer jy kombineer hulle. So p.pets. 

So vir wat, laat ons gaan terug na die kode en stel another-- ja. So terug hier. 

ALLISON Buchholtz-AU: Ek voel soos hierdie is really-- soos net kyk deur voorbeelde is eintlik die manier om dit te leer. So dit is wat ons doen. 

TOMAS Reimers: So laat se voorgee ons wil net teks 2, reg om te kies? Sodat ons kan beslis nie doen met 'n id. Wel, ons kan dit doen met 'n id, maar dit het nie 'n ID. Ek kan 'n mens byvoeg, maar laat ons voorgee dat ek nie wil om een ​​te voeg of dit reeds iets anders. Ek kan dit nie doen nie met dit. Die merker is beslis nie uniek nie, reg? En nie een is die klas. Maar jy kan hierdie dinge kombineer. Kom ons sê ons wou iets te doen wat slegs van toepassing op dinge wat het die klas spesiale en wat die klas mooi. 

So, wat jy kan doen is in main.css, jy kan sê, laat ons eers verwyder nie. Jy kan kombineer hierdie. So jy kan doen .special. Geen spasie. Net .special.pretty. Wat dit beteken, is iets wat beide spesiale en mooi. Maak dit sin maak? En as ons hier gaan, wat jy gaan om te sien is hierdie reël slegs van toepassing op die tweede een, wat beide van hulle. En jy kan dit doen vir 'n baie van die dinge. Jy kan say-- laat asof ek wou net dinge wat die klas mooi te doen en wat ook 'n paragraaf tag. So p.pretty. Kom ons maak dat ek ' iets mooi op die etiket liggaam. OK? Ek kan hardloop en ek kan sien dat dit net gaan om aansoek te doen om dinge wat paragrawe met die klas mooi. En jy kan kombineer hierdie, basies, so veel as wat jy wil. So kan jy net sit hulle saam. Maak dit sin maak? ALLISON Buchholtz-AU: So hierdie soort is meer nuttig wanneer, was Tomas vroeër gesê, miskien jy het 'n baie ingewikkelde webwerf, en jy het reeds 'n baie van hierdie reëls geskryf is, en jy hoef net te kombineer twee van tevore. Soos in plaas van 'n hele skryf nuwe selector en daar om dit te verander, jy kan net kombineer hulle waar dit oorvleuel. 

TOMAS Reimers: Of jy kan soms vind out-- daar is een klas wat maak font kleur soos blou, en daar is 'n ander klas wat maak die agtergrond blou. En dat sal net nie werk nie. So jy 'n spesiale geval skryf, waar, like-- maar as dit het beide, wat jy gaan doen, is jy gaan om te maak hierdie een van hierdie skakering van blou en hierdie een van hierdie ander skakering van blou. Reg? 

ALLISON Buchholtz-AU: Goeie vir diegene soorte uitsonderings. TOMAS Reimers: So te dink oor probleme wat mag ontstaan ​​wanneer jy kombineer hulle. Cool. So terug na ons aanbieding. ALLISON Buchholtz-AU: Ons is amper daar. TOMAS Reimers: En dit het gestop verbind. ALLISON Buchholtz-AU: O, nee. ALLISON Buchholtz-AU: CS by die kantoor, internet gaan. O, die ironie. 

TOMAS Reimers: So gelukkig, kan ons aanbied sonder die internet, dink ek, want ons het al die skyfies hier. So laat ons praat oor die verhouding van etikette. ALLISON Buchholtz-AU: Right. So net soort van gaan af van wat Tomas gesê, dit is net 'n ander manier om dit te doen nie. So ons het 'n paar ouer selector met 'n kind op te gee. So in hierdie voorbeeld hier, ons het 'n paar liggaam met 'n klas navbar, klas knoppie. Ag. 

TOMAS Reimers: Ag, jammer. 

ALLISON Buchholtz-AU: En basies, wat dit beteken is kies al die kinders, soos al hierdie vorme van keurders, binne hierdie ouer selector. En dit is die enigstes dit ooit gaan om aansoek te doen om. Ek weet nie of jy het 'n beter manier of-- TOMAS Reimers: So ek raai die manier om te dink oor hierdie is onthou voor hoe ons soort van soos sit hulle saam. En dan beteken dit dat een element wat ooreenstem met al hierdie. Wat dit sê is, ek wil jy alles aan te pas binne some-- Ek wil jy 'n keurder te vind. En dan binne daardie, ek wil jy nuwe dinge aan te pas. Reg? So in CSS, dit is al oor die soort van in staat is om hierdie items aan te pas. En jy kan probeer om aan te pas items in ander items. 

So laat ons eintlik doen 'n voorbeeld, en ons dink dit sal verduidelik. So laat ons voorgee ons het 'n spesiale, spesiale mooi, wat ook al. En dan het ons 'n skakel, OK? So onthou, 'n is 'n skakel. Dit gaan nie om oral te gaan. En ons gaan om dit te gee die klas skakel, dink ek. Kom ons gee dit die class-- gee my 'n idee. ALLISON Buchholtz-AU: Cool. TOMAS Reimers: Coo-- laat gaan dit die klas mooi. Hoekom nie? 

ALLISON Buchholtz-AU: OK. TOMAS Reimers: So nou mooi dinge gaan die agtergrond te maak blou, agtergrond van die salm. Dit maak sin. En as ons dit doen this-- 

ALLISON Buchholtz-AU: Wil jy teks by te voeg so die hyperlink toon eintlik nie? TOMAS Reimers: Dit sou 'n goeie roep wees. ALLISON Buchholtz-AU: "Want reg nou is ons net gaan kry niks. TOMAS Reimers: So dit is 'n skakel. "Dit is 'n skakel." O ja, en dit gaan nog 'n skakel te wees. Kom ons gee dit die klas "cool." Jy is reg. Cool. So nou gaan ons hierdie aan te gryp. Ons gaan een te gooi. Ons het een in die spesiale tag, en ons het ook gaan een in die mooi tag te hê. En nou wat ons gaan doen, is ons gaan maak cool-- wat doen ons dit wil doen? ALLISON Buchholtz-AU: Kan ons maak dit groter? TOMAS Reimers: Kom ons gee dit 'n grens. ALLISON Buchholtz-AU: Ons kon grens. TOMAS Reimers: Ja. So ons gaan om iets te doen soos, grens is-- en ons is gaan om dit te verduidelik al in 'n tweede. Vir now-- 

ALLISON Buchholtz-AU: Om die boks model. TOMAS Reimers: Maar vir nou, ons is net gaan om dit 'n grens. So, wat dit beteken, is dat jy gaan hierdie skakels te sien. En jy gaan om te sien dat hulle hierdie, soos, lelike swart grense, wat is cool. 

ALLISON Buchholtz-AU: Ons webwerf is so mooi. 

TOMAS Reimers: Ja. Ons webwerf is awesome. So hierdie twee skakels, en dit verskyn. Nou laat maak asof ek net wou dit doen As dit nie binne iets wat 'n agtergrond van die salm. So onthou dat hierdie een het 'n agtergrond van die salm, want dit is van die klas mooi. 

Maar ons wil sê dat slegs afkoel wat in die klas spesiale, nie in die klas mooi, moet die grens. Wel, wat jy kan doen is jy kan sê, .special, ruimte, .cool. En wat dit doen, wanneer jy dink oor dit, is dit basies sê, OK, vind my alles wat ooreenstem met spesiale. Dan binne daardie etikette, vind my alles wat cool. ALLISON Buchholtz-AU: So 'n ander manier wat goed kan wees om te dink oor hierdie, bring dit terug na C, is net soos die idee van die omvang. So wanneer jy 'n paar selector, soos dié dat ons besig is om voor hierdie, jou hele web bladsy, al jou HTML is binne die bestek van jou, reg? Maar wanneer ons hierdie ouer-kind verhoudings, dit is asof jy die vernouing down waar jy soek na 'n spesifieke plek, asof, soos, ons binne soek 'n spesifieke funksie in plaas van ons hele lêer. GEHOOR: So met dit in gedagte, sou dit het saak gemaak as ons het changed-- ALLISON Buchholtz-AU: Die einde? GEHOOR: gemeld klas in CSS te .cool, ruimte, .special? ALLISON Buchholtz-AU: Ja, want dan is dit sou sê, omvang om dit te alles wat Modern, en dan kyk wat has-- Ek bedoel, soos in hierdie geval, Ek dink nie dit sou verander het nie. 

TOMAS Reimers: As ons sê wat? Jammer. 

ALLISON Buchholtz-AU: As ons omvang dit afkoel en dan kyk vir dinge uit spesiale, dit sou dieselfde wees nie, eintlik. 

TOMAS Reimers: So sal dit nie wees nie. 

ALLISON Buchholtz-AU: sou dit nie? O, oh well. Ek is verkeerd. 

TOMAS Reimers: So die rede dit is different-- algemene mistake-- is dat die reg nou net die skakel het koel, reg? Ek dink my vraag aan jou ouens is, wat op hierdie bladsy is gekoppel deur .cool? Daar is twee tags hier, reg? Wat is hierdie een en hierdie een. Beide pas cool. Niks anders nie. So as jy sê, .cool, ruimte, .special, wat jy gaan om te sê, is, binne hierdie etikette, wat is spesiaal? ALLISON Buchholtz-AU: Hm. Dit is wat it-- reg. Want dit is soos net iets hier. 

TOMAS Reimers: So dit kies niks. 

ALLISON Buchholtz-AU: AANGESIEN met spesiale, ons is binne hierdie tags hier. 

TOMAS Reimers: Diegene en diegene. GEHOOR: OK. So diegene tags uit slash? 

TOMAS Reimers: Ja. Maak dit sin maak? Hoe dit is basies probeer omvang te verfyn. ALLISON Buchholtz-AU: Ja. Ek dink dit is waarskynlik die maklikste manier om te dink oor dit. 

TOMAS Reimers: So ons het gevind dat hierdie, en ons het gevind dat hierdie twee ooreenstem spesiaal. En dan vra ons binne hierdie ouens, wat is cool? En binne hierdie een, hierdie een se cool. Binne hierdie een, niks is cool. So, dit is die enigste tag wat oorbly. 

ALLISON Buchholtz-AU: AANGESIEN koel is net binne hierdie 'n tags daar. TOMAS Reimers: Presies. En wat is spesiale binne daardie? Niks nie. Nou, wat sal ek sê, is As daar was geen ruimte, jy vra wat is koel en special-- of wat is mooi en spesiale, reg? As jy sê .special.pretty, dit is dieselfde as .pretty.special. 

Want wat die verwydering van die ruimte is vra is, wanneer jy sê .special, jy vra, OK, watter is spesiaal? En dan van daardie, wat kinders is ook redelik, wat dieselfde is, grammatikaal, as vra, wat is mooi, en dan van diegene, wat is ook 'n spesiale? Reg? Dit is die verskil van wat is binne wat is. GEHOOR: OK. TOMAS Reimers: Ja. Awesome. So met dit in gedagte then-- 

ALLISON Buchholtz-AU: Ek dink ons ​​laaste ding is (in fancy Britse aksent) die boks model. 

TOMAS Reimers: Die box-- [lag] Ek hou van die manier Allison sê dat. So die boks model ding. 

ALLISON Buchholtz-AU: Net ' 'n boks, sal ek jou boks model wees. TOMAS Reimers: So laat ons praat oor dat. So nou het ons het 'n baie van tyd praat oor keurders. Deur die nou, julle ouens is waarskynlik, soos, meesters van selectors-- jy weet, hoe om die presiese inhoud kies wat jy wil om te manipuleer op jou skerm. 

So nou is die vraag, hoe presies kan jy dit manipuleer? So ek dink die mees basiese manier om te dink oor wat is, wel, wat presies is 'n element in CSS? Ons het spandeer baie tyd praat, wat is 'n tag, of wat is die mees basiese voorstelling van 'n tag? 

'N goeie manier om te dink oor dat is, watter vorm is salm? Watter vorm is, soos die salm-gekleurde agtergrond? 

GEHOOR: Dit is 'n reghoek. 

TOMAS Reimers: Dit is 'n reghoek, reg? 

ALLISON Buchholtz-AU: Was nie 'n truuk vraag. [Gelag] 

TOMAS Reimers: Nie probeer om jou te mislei ouens hierdie laat. So ons het hierdie reghoek. En die tag is 'n p, reg? So dit gee ons 'n goeie oortuiging dat die paragraaf word voorgestel as 'n reghoek, by minste in die gees van die leser, wat dit is. 

ALLISON Buchholtz-AU: Ek bedoel, bruisers is tipies reghoekig, so dit maak sin. 

TOMAS Reimers: Die idee hier is dat al die tags binne CSS word voorgestel as 'n reghoek. En elke reghoek het vier dele volgens CSS, OK? Jy het die werklike inhoud. Dit is waar die teks lê. 

ALLISON Buchholtz-AU: Miskien is jou prentjie. 

TOMAS Reimers: Ja. Jy het padding, wat is net 'n soort van wit spasie. Dan het jy 'n grens. En dan moet jy marge, wat wit ruimte buite dit. So wat maak geen sin aan enigiemand, so ons is gaan om te praat oor wat vir 'n tweede. So reg hier, wat ons gaan doen is ons gaan 'n paar divs te skep, OK? Verskoon my terwyl I-- 

ALLISON Buchholtz-AU: Ek voel ons moet 'n oulike prentjie in te stel. 

TOMAS Reimers: Ons moet beslis. 

ALLISON Buchholtz-AU: Ek voel soos almal kan baat vind by 'n oulike prentjie, is al. 

TOMAS Reimers: Kan ons almal voordeel trek uit a-- 

GEHOOR: Ja, seker. TOMAS Reimers: OK, cool. So ons moet sit 'n oulike prentjie in iewers. ALLISON Buchholtz-AU: Ek voel soos 'n oulike bunny kan nou nuttig wees. TOMAS Reimers: Natuurlik. ALLISON Buchholtz-AU: Einde van die week. Iets adorab-- 

TOMAS Reimers: Hoe bout 'n katjie? 

ALLISON Buchholtz-AU: 'N katjie werk ook. 

TOMAS Reimers: Cool, want daar is 'n webwerf vir daardie. Dit is genoem PlaceKitten. ALLISON Buchholtz-AU: Dit is 'n groot. TOMAS Reimers: Ja. ALLISON Buchholtz-AU: Net vir, soos, plekhouer beelde in jou webwerf. TOMAS Reimers: MM-hm. Daar is ook PlacePuppy. En daar is PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Regtig? 

TOMAS Reimers: Ag, het ons dit nie doen nie hier toegang tot die internet. 

ALLISON Buchholtz-AU: [kreun] Tragies. TOMAS Reimers: Anders, Ek sou wys julle ouens hoe beelde om te sit in jou webwerf. Ons gaan om te probeer om dit te kry werk voordat ons het om te gaan. Maar vir nou, ons is net gaan om te praat in die kleure dan. Ons wil foto's van kittens-- te sit 

ALLISON Buchholtz-AU: Ons het. 

TOMAS Reimers: gemeld internet se af vir die oomblik dat. So het ons twee divs, en ons is gaan hulle te gee twee ids. Ons gaan om dit te noem "Eerste" en "tweede". So id = "eerste." En ons gaan hulle twee kleure te gee. So hoe iets kies ons met 'n ID van "eerste"? ALLISON Buchholtz-AU: Dot of hash? GEHOOR: Skerp. TOMAS Reimers: Sharp, volmaak. Skerp, hash, ongeag we-- 

ALLISON Buchholtz-AU: Baie van die dinge om dit te noem. 

TOMAS Reimers: OK. Ons gaan om te vestig op hashtag, en dit is wat ons gaan om te gaan met. OK? 

ALLISON Buchholtz-AU: hashtag. 

TOMAS Reimers: So hashtag se eerste. 

ALLISON Buchholtz-AU: So jy kan tweet die seminar-- hashtag CSS, hashtag cool. TOMAS Reimers: hashtag Awesomeness. ALLISON Buchholtz-AU: Hashtag Awesomeness, ja. TOMAS Reimers: OK. Dus het ons "eerste" en "tweede". So die eerste, ons gaan te hê 'n agtergrond kleur van rooi. ALLISON Buchholtz-AU: Uh, kolon. TOMAS Reimers: Yup. ALLISON Buchholtz-AU: Ek sal jou plek-checker wees. TOMAS Reimers: Allison se het my. Agtergrond-kleur van blue-- 

TOMAS Reimers: Purple! 

TOMAS Reimers Pers. ALLISON Buchholtz-AU: Ja. Pers se my gunsteling kleur, en ons het dit nie gebruik nie. 

TOMAS Reimers: Violet. ALLISON Buchholtz-AU: Violet. Dit werk. 

TOMAS Reimers: So is ons gaan twee divs te hê. Hulle gaan heeltemal leeg. Ons moet waarskynlik sommige teks. So "eerste" gaan wees "Hello." En die "tweede" sal say-- 

ALLISON Buchholtz-AU: Goodbye. 

GEHOOR: - "wêreld". Hallo, totsiens. ALLISON Buchholtz-AU: Ek het gesien hulle in die konsert die ander week. TOMAS Reimers: Die Beatles? ALLISON Buchholtz-AU: Vir reals. Hulle is nie so groot. Ek hou nie daarvan nie. 

TOMAS Reimers: Ons het "Hallo" en "totsiens." En weer, CSS is net awesome, want dit gee erkenning aan ons kleure. Hoef nie eens bekommerd dat hulle bestaan ​​nie. Hulle doen. 

ALLISON Buchholtz-AU: Hulle bestaan ​​nie. 

TOMAS Reimers: So CSS Ek dink het 255 woorde om te praat oor kleur. As jy kan dink van 'n kleur buite diegene 255, soos, ek sal beïndruk wees. ALLISON Buchholtz-AU: Ja. Ek dink jy ouens kan hê net kom in reg na. 

TOMAS Reimers: So hier, jy sal sien ons twee bokse reg op die top van mekaar, reg? Hallo en totsiens. 

ALLISON Buchholtz-AU: Daar is geen ruimte in tussen. Hulle is maar net smooshed reg op die top van mekaar. 

TOMAS Reimers: So die eerste ding Ek dink ons ​​moet praat oor is laat say-- ook ja. So CSS verteenwoordig hulle as 'n soort van bokse. En as bokse, hulle het inhoud. En die inhoud nou is 'n soort van Die Hello of die gegroet en dit is dit. OK? 

So een van die eerste dinge wat jy kan doen, is jy kan padding voeg. Padding sê hoeveel ruimte dit moet oorlaat aan 'n kant. So kom ons sê wat ek wil sê 10 pixels aan elke kant. En Ek sal dissekteer wat in 'n tweede. ALLISON Buchholtz-AU: Al hierdie dinge hier gaan meestal in pixels vir die res van die seminaar. Jy gaan om te sien dat dit 'n ruimte rondom dit, reg? So, wat jy nie hier sien nie is daar hierdie onsigbare soort van padding aan elke kant, wat sê, soos, OK, jy het jou boks van content-- 

ALLISON Buchholtz-AU: Wil jy net trek die inspekteer element? 

TOMAS Reimers: Ja, dis 'n goeie idee. ALLISON Buchholtz-AU: Ook vind ek dat die inspekteer element is 'n goeie manier om uit te vind of daar iets gaan verkeerd is, iets onverwags gebeur, inspekteer die etikette en sien wat dit is soos oorskryf is nuttig. 

TOMAS Reimers: So ek is nie seker As jy ouens kan sien hierdie kleur. Kan jy? Jy sal hierdie padding sien op die soort van voordeel. En dan sien jy die werklike inhoud in blou, reg? So wat is die baie basiese beginsels van die boks model. Jy het inhoud. Dan moet jy padding. 

GEHOOR: Hoekom doen jy nie net gebruik die boks binne the-- 

ALLISON Buchholtz-AU: Right. Want dit is net die keuse van die element nou. 

TOMAS Reimers: Yup. Ander dinge. So laat ons praat oor wat padding opdrag vir 'n tweede. So in CSS, metings moet 'n eenheid te hê. So die eerste wat jy het om die bedrag. So in hierdie geval, het ons gesê 10. En dan die volgende een ons het gesê is pixels, px. Ander mense wat jy kan hê is dinge soos sentimeter, duim. Wat jy kan doen dinge soos wat 10 duim? En dit gaan belaglik wees. 

ALLISON Buchholtz-AU: O, seun. 

GEHOOR: Whoa. 

TOMAS Allison: Ja. TOMAS Reimers: So dit is al wat padding. Ek gaan om terug te gaan na pixels. 

ALLISON Buchholtz-AU: Pixels is geneig om te wees, soos die standaard. As jy kyk na 'n baie van die webwerwe, hulle werk meestal in pixels. TOMAS Reimers: So jy gaan om te sien óf pixels-- die ander mense wat jy sien is em, wat een em is gelyk aan die hoogte van die font wat jy tans gebruik. 

ALLISON Buchholtz-AU: Mm. TOMAS Reimers: Dit is 'n goeie manier om te sê, soos ek wil soveel ruimte as my font neem. ALLISON Buchholtz-AU: Het nie geweet dat. Jy leer elke dag iets nuuts. TOMAS Reimers: Daar is 'n baie van metings in CS. Ek stel voor jy kyk hulle. Vir al jou gevalle, dink ek pixels behoort voldoende te wees. En dit is ook wat jy gaan om te sien in die meerderheid van voorbeelde gedoen online. So ons sal dit daar laat pixels. 

Jy kan ook, ek moet so say-- padding stelle al die paddings. Jy kan ook iets doen, soos "Padding-top" om net set-- ALLISON Buchholtz-AU: Miskien ons sal ons "hallo" terug te kry. TOMAS Reimers: --to net het die padding op die top en niks anders nie. Toe is die vier opdragte is padding-top, padding-bottom, padding-links, en padding-regs. 

ALLISON Buchholtz-AU: Net soos jy sou verwag vir 'n boks. 

TOMAS Reimers: Ja. Niks is te gek daar. Maak dit sin maak? So dit is padding. Ek gaan al stel die paddings terug na 10. En dan gaan ek aan te beweeg na die grens. 

So, wat grens is, is grens is 'n vreemde opdrag. Dit neem soort van drie dinge gelyktydig. So het die eerste is hoe groot jy dit wil wees as 'n meting. Weereens, ek is maar net die gebruik van pixels. En die laaste ding wat ek te metings moet voeg is die een ding wat nie 'n eenheid nodig is 0. Dit is eintlik foutief te gee 0 'n eenheid, want 0 0 regoor duim, pixels, sentimeter, wat ook al. Dit alles beteken net 0, reg? So die eerste wat jy dit gee die meting. 

Dan moet jy dit gee die styl. So ek gaan om te sê "soliede". En ons sal praat oor wat dit beteken. En dan laastens, jy gee dit 'n kleur. So ek gaan om te sê "swart." En dit is al die dinge wat ons het nou gesien voor, behalwe vir styl, maar ons sal praat oor dit. So julle ouens het gesien metings, en jy het gesien kleure. En wat gebeur is dat ons hierdie mooi swart grens rondom dit, reg? Julle sien hoe ons dit gedoen het? 

GEHOOR: Ja. 

TOMAS Reimers: Cool. So, wat is dit? So die eerste van alles, dit is 'n pixel. Dit is self-evident genoeg, reg? Soos dit is een pixel dik. Of dit sou een pixel wees, maar ek is ingezoomd, so dit is 'n bietjie meer as dit. 

ALLISON Buchholtz-AU: En ons het hierdie belaglike besluit TV. 

TOMAS Reimers: Ja. Jy kan dit maak groter, kleiner, wat ook al. So hier is 'n twee-pixel grens. Jy sal sien dit is twee keer so dik. Volgende ding wat jy het, is die kleur. Dit is nie interessant. Ek gaan nie om te praat oor wat, regtig. 

ALLISON Buchholtz-AU: Maar die styl dalk net 'n bietjie interessant. 

TOMAS Reimers: Ja. So styl, is daar min mense wat ek sien wat algemeen gebruik word. Eerste een se soliede, langs 'n mens se stippellyn, en die laaste een se verpletter. En hier is gesaai. Jy sal sien dat hulle 'n klomp van die punte, reg? 'N Goeie manier om te soort van 'n mooi grens gaan, aandagstrepe is ook redelik gewild. 

ALLISON Buchholtz-AU: En dan natuurlik, ek is seker daar is baie ander style wat jy kan kry. En ons het 'n groot versameling van skakels aan die einde vir julle soort nagaan en kyk na meer cool CSS. 

TOMAS Reimers: En dan die laaste ding, ons is gaan om te praat oor die box modelle ware vinnig. O ja, en dan die grens, presies soos padding, jy het ook dinge soos grens-links, grens-regs, grens-top, grens-bodem, wat toelaat dat jy te kry op 'n spesifieke grens. So hier is net die grens links-gedefinieerde. Doen wat sin maak? 

ALLISON Buchholtz-AU: Dit is 'n koel manier om dinge te beklemtoon of voeg lyne tussen die verskillende elemente. TOMAS Reimers: Absoluut. So dit is ons grens. En die laaste een se marge. Marge se soos padding behalwe dit is nie within-- ALLISON Buchholtz-AU: Dis nie om jou element maar eintlik rondom die hele boks wat ons het is te sien. 

TOMAS Reimers: Ja. Allison sê dit perfek. Dit is nie, soos, binne-in jou element, dit is om die hele boks. Dit beteken dinge soos agtergrond nie van toepassing op dit. En dit basies sê, soos ek wil nie iets in hierdie baie ruimte vir my. Dus, net soos hier het ons 'n marge van 10 pixels. So niks binne 10 pixels moet langs my. Dit is soort van sy ruimte, maar soort van nie. So wat is die baie basiese beginsels van die boks model. Maak dit sin maak? Cool, cool. ALLISON Buchholtz-AU: Awesome. So nou is ek dink ons ​​het net het ons koel hulpbronne dat ons sal julle ouens baie vinnig deur. En ons sal goed actually--, ons het internet nog? 

TOMAS Reimers: Kom ons sien as ek kan oopmaak up-- laat my net te sien as ek kan die internet vinnig terwyl Allison praat oor enigiets Allison wil om te praat oor. ALLISON Buchholtz-AU: So basically-- ek doen nie weet wat anders wat ek op hierdie punt kan sê. Maar hierdie is 'n paar regtig 'n goeie hulpbronne. Dit is mense wat Tomas en ek gebruik en dat ons eintlik gebruik te prep vir hierdie. W3Schools is een wat julle ouens moet gesien het voordat. Ons beveel dit vir 'n Baie van die dinge met CSS. Ek weet ek beveel dit aan my artikel al die tyd. 

Een van die groot dinge is dat dit kan jy soort van gemors met CSS en sien die veranderinge onmiddellik in hierdie, soos, dubbel-venster sien dat dit het. So jy hoef nie te bekommerd wees oor die opstel van jou eie webblad, of die opstel van 'vhost in jou plaaslike toestel en plaaslike gasheer, en om al daardie dinge werk. Dit is ingebed reg binne die bladsy. 

En dit het hierdie klein lesse wat jy kan gaan deur te leer meer oor keurders, of leer oor te manipuleer jou font, of 'n agtergrond of 'n beeld. En jy moet hierdie oombliklike resultate wat jy het geen te doen ander prep werk vir. So ek is lief vir W3Schools. Dit is geweldig. Is dit werk? 

TOMAS Reimers: Ja. Nee, dit is nie. Wil jy my te probeer en weer my rekenaar? Of wil ons aan- 

ALLISON Buchholtz-AU: Ek bedoel, Wel, dit sal ook aanlyn wees. Al die skyfies sal aanlyn wees. So het ek net raai wat hierdie. 

Dit is 'n groot as net soos 'n cheat sheet. Dis net al die basiese beveel wat jy het. Dit is 'n groot as jy eerste begin jou webwerf. Omdat miskien het jy dit nie doen nie wil kry in al die werklike nitty gritty ontwerp-swaar dinge. Jy moet net om dit te formatteer in 'n manier dat die soort van sin maak en wil doen vir die oomblik. En as jy regtig wil om te kry in dit, ek weet dit is, soos, een van Tomas se gunsteling verwysings. Ons is om dit te gebruik om prep, en dit is geweldig. Dit is die ontwikkelaar van Mozilla. 

TOMAS Reimers: So Mozilla is die mense wat Firefox maak. En dit is net hul eie ontwikkelaar verwysing, wat ek dink is awesome. En dit het 'n wonderlike lys van hulpbronne. Sodat ons have-- 

ALLISON Buchholtz-AU: En dan laaste noot is wanneer jy probeer om te ontwerp jou webwerf, trek inspirasie uit dinge wat jy dink is mooi. Inspeksie van die element, inspeksie van die bron-kode kan wees super nuttig om te probeer om uit te vind hoe om jou eie webwerf te stileer. 

Dikwels, ek voel soos die beste manier, behalwe eksperimentering, net om te kyk na dinge wat mooi. Ek vind dit is regtig moeilik om net soort van ontwerp dinge op jou eie, veral in die begin. So asseblief kyk na webwerwe wat jy geniet kyk. Uit te vind wat maak hulle 'n beroep op jou. En dan voel vry om probeer herhaal nie. 

TOMAS Reimers: Right. Selfs soos webwerwe soos hierdie, kan jy sien daar is beslis 'n div aan die bokant. En dan moet jy 'n ander div binne hier, wat is CSS Awesomeness. En dan moet jy 'n klomp van die skakels hier. As jy regtig net inspekteer elemente, kan jy sorteer van begin om te sien watter webtuistes doen lyk, en hoe kan ek herskep dat as ek wou. Maak dit sin maak? So het ons net drie minute verlaat. So vrae? Enige van hulle? Ja. 

GEHOOR: Vir die kleur reghoek, hoe sou jy have-- as jy nie wil hê om dit gaan oor die hele bladsy, kan julle het dit gaan oor net die helfte van die bladsy of net die teks? 

TOMAS Reimers: Ja, absoluut. So laat my sien eintlik. Ek het twee idees. So die eerste van alles, jy kan ook gebruik Procenten. 

GEHOOR: Regtig? 

ALLISON Buchholtz-AU: So iets om op te kyk, is relatiewe posisionering. Dit is iets wat ons nie tyd om te kry in het nie, maar dit is iets wat ek beslis beveel julle ouens uitcheck. 

TOMAS Reimers: So Procenten. En sien hoe ons dit gedoen het net 50% van die wydte? ALLISON Buchholtz-AU: As jy eintlik weet wat die aantal pixels, jy kan meer presies te wees dat die pad. Jy kan peuter met dit. Maar 50%. As ons ons leser te verander, Dit sou dit kleiner. 

TOMAS Reimers: Wel, dit is basies 50% nou, dink ek. Dit is 50%, en dan die marge is bygevoeg om dit. CSS het 'n baie eienaardighede. So nou is dit 50% van die bladsy breedte. Maar onthou dat jy 10 pixels geneem uit elke kant. So as jy was om te beweeg wat teen die linkerkant van die leser, dan sou dit lyk soos 50%. Weereens, soos ek gesê het, CSS kan 'n baie raaiskoot-en-tjek. Soos jy dink iets is gaan een manier om op te tree, maar dit optree 'n totaal ander manier. 

ALLISON Buchholtz-AU: En jy net slimmer, en jy net 'n beter intuïsie vir dit as jy beweeg langs. 

TOMAS Reimers: En dit erger en erger. So dit is eintlik net 'n wedloop. 

ALLISON Buchholtz-AU: Dit is super bemoedigend. Ons wil hulle CSS te hou. 

TOMAS Reimers: CSS is awesome. Onthou dat. Ander vrae? 

ALLISON Buchholtz-AU: Die een ding. Enigiets anders? Cool. 

TOMAS Reimers: Awesome. 

ALLISON Buchholtz-AU: Wel, as jy ouens enige vrae later, ons is altyd beskikbaar soos gewoonlik. Jy sal waarskynlik sien sommige van ons vir finale projekte en beslis op die hackathon. 

TOMAS Reimers: Absoluut. En teen die billike. 

ALLISON Buchholtz-AU: En op die beurs. Oh. 

TOMAS Reimers: Sien uit daarna om sien al jou awesome-- 

ALLISON Buchholtz-AU: Ons sal sien al jou ontsagwekkende webwerwe dat mooi wees. TOMAS Reimers: Jy kan altyd sien, soos die webwerwe wat moes, soos, goeie CSS en dan soos dié wat nie probeer om CSS te doen. ALLISON Buchholtz-AU: Ook 'n ander ding, een ding om te kyk na is Opstarten. So Skoenlus is groot. 

TOMAS Reimers: Google dat as you-- 

ALLISON Buchholtz-AU: Google dit. Dit is geweldig. Jy sal mal daaroor. En nou dat jy 'n basiese begrip van CSS, dit sal 'n baie meer sin maak nie. Awesome. Dankie, ouens. 

TOMAS Reimers: Baie dankie.