>> [MUSIK SPELA]
ALLISON Buchholtz-AU: So vi i princip bara att gå
för att ge dig en nedsliten av CSS, eftersom vi vet
att det inte var täckt i alla avsnitt.
Och vi vill verkligen se till att du killar har detta verktyg till ditt förfogande,
eftersom den har förmågan att göra dina webbplatser ser mycket sötare.
>> Och om du bygger en hemsida, sedan du förmodligen vill göra det ganska.
Jag menar, du behöver inte till, men jag skulle föreslå det. [Skrattar]
Om du vill att användarna ska använda den, kanske du vill göra det lite [OHÖRBAR].
Så vi kommer att försöka ge dig bara några grundläggande verktyg och förståelse,
så att när du går ut och du är forska saker om CSS,
det är inte komplett rotvälska, som CSS ibland vara.
>> TOMAS REIMERS: Yeah.
Allison sa det ganska bra.
Så jag antar att det första vi bör börja med är det som är CSS?
Så CSS är fantastisk.
CSS--
>> ALLISON Buchholtz-AU: Det är namnet på vårt seminarium.
>> TOMAS REIMERS: Yeah.
Det är verkligen viktigt att du förstår att då.
Om du bara tar bort en sak, det är att CSS om häftigt.
Två är CSS står för Cascading Style Sheets.
Så i sin kärna, är CSS en stilmall, som betyder
det tillåter dig att styla en webbsida.
Och sedan vad det betyder, det är en sätt att lägga stil till dina webbplatser.
Så genom stil, menar vi allt det är inte structural--
så saker som färger, bakgrund bilder, gränser, liksom, stoppning,
marginaler.
Vi ska tala om vad allt det innebär i en bit.
>> Så vi har bara gått vidare och öppnade både av dem upp i gedit.
Så det här är index.html.
Och detta är main.css.
Så main.css har ingenting.
ALLISON Buchholtz-AU: Nej stil hittills.
TOMAS REIMERS: Inga.
Och som du ser, det är en riktigt ful sajt.
ALLISON Buchholtz-AU: Det är bara vanlig.
TOMAS REIMERS: Yeah.
Ja, det är inte fult, det är bara minimalistiska.
Och så här har vi index.html.
Och så för en snabb resumé av HTML, Allison,
du vill bara prata om sidan?
>> ALLISON Buchholtz-AU: Yeah.
Så uppenbarligen har vi vår HTML tagg, som just namn HTML-fil.
Vi har vår header här, med CSS Awesomeness, which-- om du går tillbaka.
Var är det?
>> TOMAS REIMERS: Oh.
Ja, du kan se.
ALLISON Buchholtz-AU: Och märker sidhuvudet
är denna flik header rätt upp här.
Och sedan "Hej världen!" är den text som vi har bara
visning på webben sida, som är-- gå tillbaka.
Tillbaka.
Vilket är precis i vår kropp här-- oformaterad text.
Också en sak att märker, om man tittar här,
Tomas kopplas upp dessa två från vårt bildspel.
Så länge du har alla tre av dessa, du är bra.
De kan vara i vilken ordning som helst.
Vad är viktigast är just det du har vart och ett av dessa tre saker.
>> TOMAS REIMERS: Cool.
Lägg ett doc typ?
ALLISON Buchholtz-AU: Yeah.
TOMAS REIMERS: Yeah.
Cool.
ALLISON Buchholtz-AU: Tydligen mina mikrofoner inte gillar mig.
TOMAS REIMERS: Åh, ge oss en sekund bara medan Allison växlar ut hennes mikrofon.
Så ja.
Så vi har vår huvudsida.
Det finns en slags unstyled.
Vi har inte mycket.
Vi har bara i princip text.
Vi har formatmallen.
Vi har titeln.
Så bara bare-benfri komponenter göra en hemsida.
>> Så från det, låt oss tala om vad CSS är
och hur det ser ut och allt detta.
Så för that--
ALLISON Buchholtz-AU: Tillbaka till bilderna.
TOMAS REIMERS: Tillbaka till bilderna.
Och Allison kan ta över.
>> ALLISON Buchholtz-AU: Woo.
OK.
Så i ditt CSS-fil, du kommer att ha
en hel del av dessa saker som kallas väljare.
Det kommer bara att vara grundval av din CSS-fil.
Det kommer bara att bli massor av dessa.
Så väljaren.
Detta är bara den allmänna anatomin.
Vi kommer att gå igenom exempel, för om ni aldrig
såg min avdelning, jag känner mig liknande saker i det abstrakta
inte riktigt vettigt.
Det hjälper alltid att se exemplen.
>> Så vi har en del väljare.
Det kommer att bli lite identifierare för vad vi vill att stilen att gälla.
Och då kan vi ha någon uppsättning regler och värderingar.
Så väljare som du kan se kan vara något i stil med kroppen,
eller punkt med P, eller header, eller vad som helst,
vad du vill att dina HTML-taggar för att vara.
>> Så i det här fallet har vi kropp.
Och vi har några regeln, vilket motsvarar detta
vad din stil gäller.
Så i det här fallet har vi bakgrundsfärg och typsnitt vikt.
Så detta kommer att förändra bakgrund av vad som helst
inom varje organ tagg i vår HTML-fil.
Och det kommer att ge Det här ljusblå värde.
>> Så det kommer att göra det bakgrund ljusblå.
Och sedan något inom kroppen är kommer att ha ett typsnitt vikt fetstil.
Så det är bara att gå till djärva all vår text.
Och det här är bara en väljare.
Men du kan ha väldigt många av dessa.
Och som vi kommer att visa senare, lite mer i hur
att arbeten och fler exempel där.
Något du vill tillägga?
>> TOMAS REIMERS: Nej
Allison fick det.
Vi ska bara skära upp ett exempel här på vårt exempel sajt.
Så låt oss verkligen ta detta.
Den är perfekt.
Så jag ska bara kopiera och klistra in denna rätt in i vår main.css fil.
Och jag kommer att spara den.
Och då kommer vi köra den.
Så liten not, en av de mest frustrerande saker
är om du inte sparar en fil, och då du, liksom, ladda om sidan,
och liknande, varför inte förändringen som händer?
Det händer.
Så här såg vi att vi gjort vår hemsida en ljusblå bakgrund
och några fetstil.
>> Jag bör också nämna, om du killar har frågor om någonting
vi gör, är du välkommen fri att stoppa oss och fråga oss.
Vi är helt villiga till fält frågor.
>> ALLISON Buchholtz-AU: Självklart, med CSS, allt bygger på sig själv.
Så om en sak inte vettigt nu, vi
vill inte att för att mosse ner dig senare.
>> TOMAS REIMERS: Så låt oss slags dissekera denna.
Så vill du börja med väljaren här?
>> ALLISON Buchholtz-AU: Yeah.
Som jag sa tidigare, kropp är bara vår väljaren här.
Så om vi går tillbaka över till vår index-- ah.
>> TOMAS REIMERS: Vilket jag bara stängt.
Ge mig en sekund.
Så File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Så om du märker här, vi har dessa kropps taggar, eller hur?
Så väljaren bara motsvarar taggarna som vi pratar om.
Så kroppen just här.
Så vad vi säger är everything-- kan vi gå tillbaka?
Jag önskar att jag kunde bara som trycker på skärmen.
Det skulle vara så mycket svalare.
>> Så något inom dem body-taggar, som vi såg
var precis, precis, texten, och kroppen i allmänhet
avser, liksom, bakgrunden.
Om du någonsin vill ändra bakgrunden,
det kommer att vara i en body-taggen.
Bara har dessa regler tillämpas på dem.
>> Så om vi skulle gå till index.html och-- faktiskt,
kan vi ha något utanför kroppen?
Om vi ​​hade, liksom, en sidfot eller något, skulle det inte gälla för detta.
Men något inom dessa kropps taggar kommer
att påverkas av detta organ väljare som vi har gjort.
Så om du skulle skriva något annat there--
>> TOMAS REIMERS: Låt oss att gör det.
Så om vi hade en div-- så det är bara en annan tagg som du kan ha.
Jag ska stänga den.
Eller låt oss göra detta till en punkt.
Så p står för punkt.
Och inom den punkten.
Och då säger jag, "Det här är texten."
Cool.
Och sedan gjorde jag denna regel gäller för en punkt i stället för kroppen.
Du får se hur det endast gäller den nybildade punkt, höger,
inte det hela.
Betyder det vettigt?
>> ALLISON Buchholtz-AU: Så det här är allt kroppen,
men nu vår väljaren bara motsvarar punkt.
Så vi har bara fet och blått för denna specifika punkt,
eftersom detta är det enda som är innesluten i p-taggen.
>> TOMAS REIMERS: Låter det vettigt sorterar av hur saker kapsla annat?
ALLISON Buchholtz-AU: Också, precis säga, liksom, ett av de bästa sätten
att verkligen få bekväm med CSS är att bara göra saker som detta,
bara prova det.
Det är väldigt enkelt att skriva något ut, slog Refresh, och se vad som händer.
Och som med de flesta CS, experimenterande kan ofta
leda till en mycket bättre intuitiv förståelse.
Ännu mer så än oss bara, gillar, pratar med dig.
>> TOMAS REIMERS: Absolut 100% överens på den punkten.
Så om vi går tillbaka till detta, låt oss börja dissekera exakt vad dessa två gör.
Så vi har två regler om detta.
Så det första en är bakgrundsfärg.
Och du ser att vi har satt det lika med ett värde, ljusblå.
>> Så i CSS, är CSS sorterar av mycket löst om hur
du är tillåtet att definiera färgen.
Så du kan definiera dem vid namn.
Du kan också göra något som "röd".
Och sedan om vi går tillbaka till detta, du ser att bakgrunden är röd.
Du kan också få really-- Jag tror att du kan bli ganska kreativ med detta,
kan inte du?
>> ALLISON Buchholtz-AU: Jag tror att du kan använda hex.
Kan inte du?
>> TOMAS REIMERS: Yeah.
Så du kan använda hex.
Men jag tänker namn-wise.
Finns det inte?
ALLISON Buchholtz-AU: Du kan göra en hel del.
Ganska mycket som de flesta färger som du kan name-- ut, jag tror lax är en.
>> TOMAS REIMERS: Vi ska försöka lax.
ALLISON Buchholtz-AU: Jag tror chartreuse är där.
TOMAS REIMERS: Yeah.
Se?
Så du kan få ganska kreativ.
>> ALLISON Buchholtz-AU: Du kunde få ganska kreativ.
Liksom, om du kan tänka på färgnamn, är det förmodligen där.
Om du verkligen vill ha fina detalj, kan du gå hex.
>> TOMAS REIMERS: Yeah.
Så hexadecimalt.
Om ni kommer ihåg detta tillbaka från din gamla PSET, Bild Recover,
ni haft att göra med dessa hexvärdena.
Och sorts att sammanfatta vad som är, hex har tre värden som lagrats i den.
Så det är i grupper om två steg.
De två första representerar det röda värdet.
Den andra en representerar det gröna värdet.
Och den sista är blå?
>> Så FF råkar representera en hexadecimal 255.
Så du har 255 röda, 255 grön, och 0 för blått.
Och värden varierar mellan 0 och 255.
>> PUBLIK: Höger.
Så i huvudsak, kunde vi söker internet för vilken färg vi vill,
och identifiera faktiskt känt färgspektrum combo,
och då kunde vi lägga den i?
ALLISON Buchholtz-AU: Exakt.
Så du har ganska mycket full kontroll över de färger du vill inom CSS.
Ska vi prata om bakgrundsbilder senare?
Eller vill vi göra det?
>> TOMAS REIMERS: Yeah.
Absolut.
Så först, bara för att visa att rött och grönt är gul.
Och om du behöver lite hjälp med att hitta detta, du
kan Google något som "färgväljaren."
ALLISON Buchholtz-AU: Åh, det är så bra.
Jag älskar färgväljaren.
>> TOMAS REIMERS: colorpicker.com är ett bra exempel.
Och här ser du att du har en full Photoshop-liknande färgväljaren.
>> ALLISON Buchholtz-AU: Mm-hm.
Även de coola saker är du kan generera färgscheman
så att du inte behöver, liknande, kolliderar färger.
TOMAS REIMERS: Och sedan Här är hex värdet här uppe.
Så du kan alltid hitta på nätet i grunden platser för att få hex värdet från.
Det är inte sortera av det precis, precis, vi se färgerna i världen i antal.
Det är mer att vi går online och hitta vilken färg vi vill,
och sedan ta tal nedåt.
Eftersom det är bara en riktigt lätt sätt att referera saker i CS.
>> ALLISON Buchholtz-AU: Och sedan finns det also--
Jag glömmer det exakta namnet på webbplatsen.
Men det är definitivt, jag tänka, något från Adobe
som genererar färgscheman för dig, vilket är riktigt coolt, eftersom du
definitely-- det ibland svårt att räkna ut,
åh, om jag vill använda denna färg, vad som kan vara en annan användbar en
att använda någon annanstans på min webbplats till, liknande, gör det trevligt och sammanhängande.
>> TOMAS REIMERS: Allisons pratar om ett av Adobe heter Kuler, tror jag.
Det är K-U-L-E-R.
ALLISON Buchholtz-AU: Jag tror det.
Jag är ganska säker på att det är den.
>> TOMAS REIMERS: Min favorit har alltid varit Color Scheme Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Vilket är now--
>> ALLISON Buchholtz-AU: Ah, är detta vackra.
>> TOMAS REIMERS: Och du kan i princip säga, liksom,
Jag vill tre färger bredvid varandra.
Och sedan ska vi göra något trevligt.
Och då kan du få ett exempel om vad som skulle kunna se ut.
Och sedan om du hovrar över någon av dem, det ger dig hex värdet.
>> Så precis som ett bra sätt att börja funderar färgscheman
eller vilka färger på en webbplats kan gå bra ihop.
Eftersom det kan vara förvånansvärt inte så lätt att plocka som du tror.
Och sedan den andra cool sak Jag har alltid funnit om denna webbplats
är om du träffar Exempel, det ska visa vad ett exempel webbplats
kan se ut med hjälp av den färgschema.
Hur som helst.
>> Tillbaka till själva CSS.
ALLISON Buchholtz-AU: Men självklart, vi vet dessa referenser kan vara användbara.
TOMAS REIMERS: Nej, de definitivt kan vara till hjälp.
Så den andra regeln, Allison?
>> ALLISON Buchholtz-AU: Yeah.
Den andra regeln är bara motsvarar vår teckensnitt.
Så textvikt är bara typ of-- så att vikten skulle
vara om du vill bara, liksom, normala eller liknande, tunnare typsnitt,
eller i detta fall, liksom, djärvt.
Jag glömmer.
Vad är det om du ville det-- är där ett tunnare än bara, liksom, normalt?
TOMAS REIMERS: Jag gör faktiskt inte veta om det är en tunnare.
ALLISON Buchholtz-AU: jag glömmer.
Så textvikt vi vanligtvis bara använda för fet.
Om du vill komma riktigt in Det kommer vi att visa dig.
W3Schools har alla de olika saker du kan göra för teckensnitt.
Men i grund och botten, om du någonsin vill att ändra något om typsnitt,
det alltid kommer att vara, liknande, font-någonting.
Så det blir som, font-family om du är försöka förändra den aktuella typen.
Det blir font-style om du vill göra det som kursiv,
eller kursiv stil, eller whatnot.
Eller till och med font-färg, om Vi ville ändra på det.
>> TOMAS REIMERS: Japp.
Så du kan ändra på det.
Och sorts bara resumé nu, så du kan
ser att vi har väljaren här uppe.
Vi har dessa klammerparenteser.
Och då har vi regler avgränsas med semikolon.
Betyder det vettigt?
Yeah?
Cool.
Så om det är good--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Låt oss tala specifikt om vilken typ av väljare som vi har.
"Orsak just nu vi har sorts just visat taggar.
Men ni kunde se det rimliga.
Säg att du har två stycken på en sida och du
vill kunna stil en men inte den andra,
du inte bara vill begränsa dig att behöva använda olika faktiska HTML
taggar för att ge dem olika stilar.
>> Så vi har tre grundläggande typer av selektorer.
ALLISON Buchholtz-AU: Yeah.
Så vi har taggen, vilket är vad Vi har pratat om just nu.
Så det är ungefär som din kropp eller p.
Och då har vi klass, vilket är När vi definierar det i vår CSS-fil,
Det kommer alltid att pricka, oavsett du vill ha namnet på din klass ska vara.
Och detta kan gälla för flera saker.
>> Säg att du har fem stycken och två av tre av dem
måste formaterad på samma, skulle du använda en klass till det.
Och detta är bara hur vi gör det.
Vi ska ge er ett exempel på där detta faktiskt visar upp.
Men om du hade kanske några tagg p, efter det, skulle du skriva,
klass är lika oavsett klasser du vill använda för det.
Så oavsett klass väljare som vi vill att gälla för denna specifika punkt,
Vi kunde bara skriva så här.
Naturligtvis tror jag ett exempel kommer att göra det mycket mer konkret.
>> Den andra har vi är id, som vi betecknar
med en hash, eller pund, eller hashtag.
TOMAS REIMERS: octothorpe.
ALLISON Buchholtz-AU: octothorpe.
Det funkar också.
Och detta borde verkligen vara unik.
De bör endast gälla en sak på din sida.
Så oavsett om det är en viss punkt, eller något objekt i en lista, eller vad,
detta bör vara unikt.
Och på samma sätt som vi bara säga, liksom, class = "Class1 Class2,"
Detta kan bara vara id vad vi har.
TOMAS REIMERS: Yeah.
Så låt oss definitivt prata om exempel här.
Och jag kommer bara att dyka rakt tillbaka in i koden.
Så låt oss titta på vårt HTML.
Och så vi just nu har en punkt.
Detta är en text.
Jag kommer bara att ändra det. "Det här är text 1."
Och sedan ska vi ha en "Det här är texten 2."
>> ALLISON Buchholtz-AU: Second ett.
TOMAS REIMERS: Japp.
Så vi har nu "Detta är text 2," rätt?
Och vi kommer att se att om vi ladda om sidan, vad vi ska hitta
är vi ska find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Yeah.
Vi kommer att hitta en "Det här är text 1, "och" Det här är texten 2. "
>> ALLISON Buchholtz-AU: Och ut vackra gula färg.
>> TOMAS REIMERS: Och du ser att vår väljaren just nu,
som gäller för p-talet, eller stycken, drabbar dem båda,
eftersom båda möta förutsättning att de är både en p-tagg.
Det känns självklart.
Så frågan är, ja, vad om vi ville bara få en?
Så precis som Allison sa, vi har två andra sätt att göra det.
Jag ska börja med id.
>> ALLISON Buchholtz-AU: Låt oss börja med id.
>> TOMAS REIMERS: Och båda av dessa är attribut.
Så attribut finns i HTML.
Och vad de är är något som du lägger
inuti taggen som är separat från taggnamnet.
Så du kan ha flera attribut.
Yeah?
>> ALLISON Buchholtz-AU: Jag tänkte bara att säga, från din ex från PSET 7,
Om någon av er försöker rikta saker till centrum,
du kanske har använt "Text align = center."
Och du märkt det förmodligen borde ha centrerat
din text eller din navigeringsfältet.
Så det är bara också ett attribut att du kanske känner till.
TOMAS REIMERS: Det finns ett gäng av attribut som du ser.
Yeah.
Liksom bra referens till PSET 7.
Vi har id.
Du kan också ha klass, saker som detta.
En enda tagg kan ha många attribut.
Så börjar med id, låt oss låtsas att vi vill ha ett id of-- jag vet inte.
Vi kallar det speciella, eftersom detta är vi
kommer att göra djärva och stryka, och vad som helst.
ALLISON Buchholtz-AU: Det är kommer bli super speciell.
TOMAS REIMERS: Så detta en, har vi id speciell.
Så sättet för att välja det, då är i main.css, snarare än att ha en p-tagg,
du gör #special, OK?
Och som väljer det sak med id speciell.
Innebär detta vettigt för alla?
PUBLIK: Ja.
TOMAS REIMERS: Cool.
Så nu om vi går tillbaka, vi see-- hoppsan.
Yeah.
Vi får se att det bara väljer den med id speciell.
Yeah?
Låter coolt.
Ja.
>> PUBLIK: Kan något ha en attribut av både klass och ett id?
>> TOMAS REIMERS: Ja.
PUBLIK: OK.
Och vad händer om du sedan ge det vissa regler i CSS som konflikten?
TOMAS REIMERS: Absolut.
Vi definitivt kommer att prata om det.
Så exakt vad du fick på, kan du också ha klasser.
Så låt oss låtsas att jag hade tre stycken och jag
ville att styla den första två men inte den tredje.
Tja, kanske din första idé vara, ja, jag kunde bara ge den andra ett id.
Men du kan inte, eftersom ett id, precis som Allison sa,
måste vara unikt.
>> Så istället för ett id, vad du kan använda är att du kan använda en klass.
Och en class-- vad den tillåter du behöver göra är i princip säga,
Detta hör som en del av en grupp.
I det här fallet, vår grupp kallas Special.
Och vad vi ska göra då är vi ska säga-- stället pund,
vi kommer att använda punkt.
OK?
Och märker att pundet och dot existerar endast inom CSS-filen,
inte i HTML.
ALLISON Buchholtz-AU: Ja.
Viktig skillnad.
>> TOMAS REIMERS: Jag har hade så mycket kamp,
eftersom jag satte hash i HTML och sedan bara kändes dumt länge.
Se hur det väljer båda de med den klassen?
Cool.
>> Nu kan saker har flera klasser.
Låt oss säga att jag ville göra det första två har en bakgrund av gul
och den andra två har en teckenfärg i blått.
OK.
Jag vet inte riktigt varför jag skulle vill göra det, men jag kan.
>> ALLISON Buchholtz-AU: Might inte rekommenderas det för din hemsida.
Men för våra syften, kommer den att göra.
>> TOMAS REIMERS: Det är inte en bra färgschema.
ALLISON Buchholtz-AU: Tja, gul och blått är min skola färger.
Jag vet inte, dock.
TOMAS REIMERS: Allison höga Skolan hade en stor färgschema.
[LAUGHTER]
Så vad vi kan kalla detta är Låt oss kalla this-- så vi har Special
och vi har nätt.
Jag föreslår, för detta använder du mycket mer beskrivande namn.
ALLISON Buchholtz-AU: Ja, det skulle jag kalla detta, liksom, gul eller blå.
>> TOMAS REIMERS: Vi är inte verkligen göra en riktig hemsida,
vilket är anledningen till att vi inte gör det.
Men om du verkligen hade en verklig webbplats, du
kan ha, liksom, artikelrubrik, artikelns innehåll, första ordet,
sånt, som tillåter du att vara mycket mer beskrivande.
Dessa är verkligen precis som variabler.
De bör namnges på ett sätt där du kan, like-- yeah, som sådan.
Perfect.
>> Så bakgrundsfärg.
Och sedan ska vi säga-- så sätt att ändra färg är bara "färg."
Och vi kommer att göra det blå.
Det är coolt.
Så nu har vi två första har speciella.
Nästa man kommer att har "class = pretty."
ALLISON Buchholtz-AU: Och sedan du kommer vill lägga "pretty" till den mittersta.
TOMAS REIMERS: Japp.
Och sedan till den mittersta, att lägga "pretty" vad händer
är du bara ha ett utrymme.
Så klassattribut är ett utrymme separerad lista
av alla klasser som gäller för den taggen.
OK?
Det är inte så här man tillhör någon form av särskild klass som kallas
"Special, utrymme, söt."
Det tillhör två classes-- speciell och vacker.
Ja?
Cool.
>> Och sedan om vi ser på vad som händer, vi är
kommer att se till att första har gul bakgrund, svart text.
Andra en--
>> ALLISON Buchholtz-AU: --has fetstil gul bakgrund med blå text.
Och vår sista man har bara blå text som vi tilldelats.
>> TOMAS REIMERS: Cool?
Hur väljare fungerar?
Grymt.
>> ALLISON Buchholtz-AU: Vill vi prata om konflikten nu då?
>> TOMAS REIMERS: Så ja.
Absolut.
Så vad händer om du ha en konflikt, eller hur?
Låt oss låtsas den första sätter upp något like--
ALLISON Buchholtz-AU: Kanske här ändrar bakgrunden?
TOMAS REIMERS: Yeah.
Så vi ska göra "pretty" ändra bakgrunden till laxen.
ALLISON Buchholtz-AU: Du är bara med alla de stora färgerna i dag, Tomas.
TOMAS REIMERS: Yeah.
Eftersom jag fick veta att jag kan använder lax som en riktig färg.
Så vi kommer bara att göra det.
Jag tycker också Sunset är en riktig färg.
PUBLIK: Sunset är en riktig färg?
ALLISON Buchholtz-AU: Låt oss prova.
TOMAS REIMERS: Efter denna demo bara för att i fall det förstör,
Jag vill inte bli felsökning.
Så vi vet lax är en riktig färg.
Så några gissningar om vad som kommer att hända?
>> ALLISON Buchholtz-AU: Någon idé?
>> PUBLIK: [OHÖRBAR].
>> TOMAS REIMERS: Yeah.
Så du fick det helt rätt.
I grund och botten, det tar den sista regeln att den gavs.
>> ALLISON Buchholtz-AU: Så det här är där kaskad träder i kraft.
>> TOMAS REIMERS: Så minns hur vi hade att kaskadstilmallar?
Så genom att vi slags menar att vi har ett gäng regler
som tillämpas på toppen av varandra, och de kan också åsidosätta varandra.
>> ALLISON Buchholtz-AU: So oavsett s nedtill
åsidosätter vad är i toppen.
Du kunde ha regler som helt negera något i förväg.
Det är också därför du vill vara försiktig när du är styling,
så att du inte skapar regler som du bara helt tvingande.
>> TOMAS REIMERS: Eller kanske du vill skriva över reglerna.
>> ALLISON Buchholtz-AU: Eller kanske du gör.
Ja.
>> TOMAS REIMERS: Låtsas att du har en klass som gäller för det mesta,
men låt oss säga att du vill ändra bakgrundsfärg till rött och teckensnitt
vikt fetstil för de flesta saker, men för en,
du bara vill att bakgrundsfärgen att vara röd, men du vill att alla andra
egenskaper, kan du göra något liknande "font-weight = normal,"
vilket skulle då ångra det djärva förändring.
Yeah?
Återigen, det bästa sättet, tror jag Allison sa det, är bara träna.
>> ALLISON Buchholtz-AU: Experiment.
>> TOMAS REIMERS: Öva, öva, praxis, och experimentera.
Jag vet att många människor som tror CSS är bara en massa gissning-och-check
i slutet av dagen, där om du vill göra something-- liknande,
Har du en ungefärlig uppfattning, men du fortfarande förmodligen behöva
att prova för att se du vet hur det ser ut.
>> PUBLIK: När du ansöker klasser, mer än en
till samma stycke eller avsnitt, det gör det
Oavsett vilken ordning du kan skriver dem i citat?
>> TOMAS REIMERS: Nej, inte alls.
>> ALLISON Buchholtz-AU: Det viktiga är beställningen inom din CSS-formatmall.
PUBLIK: Kan du upprepa frågan?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: Inom klass, när du ger klasser
till något i HTML, gör det någon roll vilken ordning de är i?
Det spelar ingen roll ordern.
Det viktiga är ordningen på klassväljare inom din CSS,
inom din stilmall.
>> TOMAS REIMERS: Ljud bra?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: Och sedan vi ska fortsätta att--
ALLISON Buchholtz-AU: Vad har vi nästa?
Jag glömmer.
Åh, vi har bara exempel.
Men vi har sorts gjort dem.
Vi har gjort exempel i farten.
>> TOMAS REIMERS: Vi får kombinera väljarna snart.
>> ALLISON Buchholtz-AU: Åh, vi får kombinera väljare.
TOMAS REIMERS: Så vissa exempel är att vi har
# Dog-- pund, eller hashtag, eller octothorpe, eller vad
du vill ringa that-- skarp.
>> ALLISON Buchholtz-AU: Sharp hund.
>> TOMAS REIMERS: Då har du .pets.
Något har ett id av hund, det finns bara en hund på sidan.
Något har en id katt, det finns bara en katt.
Det kan finnas många husdjur på sidan.
Det är därför vi gav det klasser.
Du har ett exempel på s.
Och sedan så en av de sista exemplet, som
är något vi inte har pratat om, är vad som händer när du kombinerar dem.
Så p.pets.
>> Så för det, låt oss gå tillbaka till kod och införa another-- ja.
Så tillbaka hit.
>> ALLISON Buchholtz-AU: Jag känns som det här är really--
som bara tittar genom exempel är verkligen sättet att lära sig detta.
Så det är vad vi gör.
>> TOMAS REIMERS: Så låt oss låtsas att vi bara vill markera text 2, eller hur?
Så vi kan definitivt inte göra det med ett id.
Tja, vi kan göra det med en id, men det har inte ett id.
Jag skulle kunna lägga till en, men låt oss låtsas att jag inte vill lägga en
eller redan har något annat.
Jag kan inte göra det med det.
Taggen är definitivt inte unikt, rätt?
Och inte heller är klassen.
Men du kan kombinera dessa saker.
Låt oss säga att vi ville göra något som endast gäller för saker som
har klassen särskilda och som har klassen söt.
>> Så vad du kan göra är i main.css, du kan säga, låt oss först ta bort det här.
Du kan kombinera dessa.
Så du kan göra .special.
Inget utrymme.
Bara .special.pretty.
Vad det betyder är något vilket är både speciell och vacker.
Betyder det vettigt?
Och om vi går här, vad du kommer att se
är denna regel gäller endast för andra en, som har båda dessa.
Och du kan göra det för en massa saker.
Du kan säga-- låt oss låtsas att jag bara ville
att göra saker som har klassen ganska och som också är ett stycke tagg.
Så p.pretty.
Låt oss låtsas att jag hade något ganska på taggen kroppen.
OK?
Jag kan köra och jag kan se att det är bara
kommer att gälla för det som är stycken med klassen ganska.
Och du kan kombinera dessa, princip, så många du vill.
Så du kan bara sätta ihop dem.
Betyder det vettigt?
ALLISON Buchholtz-AU: So detta är mer användbar typ av
när, var Tomas sade tidigare, kanske du har en mycket komplicerad hemsida,
och du redan har en hel del av dessa regler skrivna,
och du behöver bara kombinera två från förr.
Som istället för att skriva ett helt nya väljare och ändra det där,
Du kan bara kombinera dem där den överlappar.
>> TOMAS REIMERS: Eller du kanske hittar out-- ibland
det finns en klass som gör typsnitt färg som blå,
och det finns en annan klass som gör bakgrunden blå.
Och som bara inte kommer att fungera.
Så du skriver ett specialfall, där, like-- men om den har både, vad du är
kommer att göra är att du kommer att gör här en här blå nyans
och här denna andra blå nyans.
Rätt?
>> ALLISON Buchholtz-AU: Bra för dessa typer av undantag.
TOMAS REIMERS: Så för att tänker på problem
som kan uppstå när man kombinerar dem.
Cool.
Så tillbaka till vår presentation.
ALLISON Buchholtz-AU: Vi är nästan där.
TOMAS REIMERS: Och det har slutat att ansluta.
ALLISON Buchholtz-AU: Åh, nej.
ALLISON Buchholtz-AU: CS på kontoret, internet går ner.
Åh, ironin.
>> TOMAS REIMERS: Så lyckligtvis vi kan presentera utan internet, antar jag,
eftersom vi har alla bilderna här.
Så låt oss tala om förhållandet för taggar.
ALLISON Buchholtz-AU: Rätt.
Så bara typ att gå off av vad Tomas sagt,
Detta är bara ett annat sätt att göra det.
Så vi har några förälder väljare med ett barn väljare.
Så i detta exempel här, har vi några kropp med en klass navbar, klass knappen.
Ah.
>> TOMAS REIMERS: Åh, förlåt.
>> ALLISON Buchholtz-AU: Och grunden, vad detta betyder
är markera alla barnen, som alla dessa typer av väljare,
inom denna förälder väljare.
Och de är de enda det någonsin kommer att gälla för.
Jag vet inte om du har ett bättre sätt of--
TOMAS REIMERS: Så jag gissa sätt att tänka
om detta är ihåg innan hur vi sorts gillar sätta ihop dem.
Och då det innebär ett element som matchar alla dessa.
Vad detta säger är, jag vill du matcha allt
inom some-- jag vill dig att hitta en väljare.
Och sedan inom det, jag vill ha dig att matcha nya saker.
Rätt?
Så i CSS, handlar det om sorts att kunna matcha dessa poster.
Och du kan försöka matcha poster inom andra objekt.
>> Så låt oss faktiskt göra ett exempel, och vi tror att det kommer att förtydliga.
Så låt oss låtsas att vi har speciella, speciell söt, oavsett.
Och sedan har vi en länk, OK?
Så kom ihåg, en är en länk.
Det kommer inte att gå någonstans.
Och vi kommer att ge den klassen länken, antar jag.
Låt oss ge den class-- ge mig en idé.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: Coo-- låt oss går det klass söt.
Varför inte?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: Så just nu vackra saker
kommer att göra bakgrunden blå, bakgrundsfärg på lax.
Det är vettigt.
Och om vi gör this--
>> ALLISON Buchholtz-AU: Vill du lägga till text
så hyperlänken visar faktiskt upp?
TOMAS REIMERS: Att skulle vara ett bra samtal.
ALLISON Buchholtz-AU: "Orsak höger nu är vi bara gonna får ingenting.
TOMAS REIMERS: Så det här är en länk.
"Det här är en länk."
Åh, och detta kommer att vara en annan länk.
Låt oss ge den klassen "cool."
Du har rätt.
Cool.
Så just nu ska vi ta tag i detta.
Vi kommer att kasta en.
Vi har en i speciell tagg, och vi också
kommer att ha en i den vackra taggen.
Och just nu vad vi ska göra är att vi ska göra cool--
Vad vill vi att det ska göra?
ALLISON Buchholtz-AU: Kan vi göra den större?
TOMAS REIMERS: Låt oss ge det en gräns.
ALLISON Buchholtz-AU: Vi kunde gränsar.
TOMAS REIMERS: Yeah.
Så vi kommer att göra något liknande, gräns är-- och vi är
kommer att förklara allt detta i en sekund.
För now--
>> ALLISON Buchholtz-AU: Till rutan modellen.
TOMAS REIMERS: Men nu är vi bara kommer att ge det en gräns.
Så vad det betyder är att du är kommer att se dessa länkar.
Och du kommer att se att de har Dessa, liksom, fula svarta kanter, vilket
är coolt.
>> ALLISON Buchholtz-AU: Vår hemsida är så söt.
>> TOMAS REIMERS: Yeah.
Vår hemsida är fantastisk.
Så dessa två är länkar, och de verkar.
Nu låtsas jag bara ville göra det här
om det inte var inom något som hade en bakgrund av lax.
Så kom ihåg att detta har en bakgrund av lax,
eftersom det är av klass söt.
>> Men vi vill säga att endast kyler vilket är i klass speciell, inte i klass
söt, bör ha den gränsen.
Tja, vad du kan göra är att du kan säga, .special, utrymme, Kyla.
Och vad det gör, när du tror om det, är det i princip säger,
OK, hitta mig allt som matchar speciellt.
Sen inom dessa taggar, hitta mig allt som är coolt.
ALLISON Buchholtz-AU: Så ett annat sätt som kan vara bra att tänka på detta,
föra den tillbaka till C, är precis som tanken på omfattningen.
Så när du har lite väljare, som de
att vi har jobbat för innan detta, hela din webbsida, alla dina HTML
är inom din räckvidd, eller hur?
Men när vi har dessa förälder-barn relationer,
det är som om du minska ner där du är ute på en viss plats,
som om, liksom, vi ser inom en specifik funktion i stället
av hela vår fil.
PUBLIK: Så med det i åtanke, skulle Det har framhävde om vi hade changed--
ALLISON Buchholtz-AU: Ordningen?
PUBLIK: --Den klass i CSS att Kyla, utrymme, .special?
ALLISON Buchholtz-AU: Ja, för då att
skulle säga, omfattning det till allt som har svalt,
och sedan titta på vad has-- Jag menar, liksom, i det här fallet,
Jag tror inte att det skulle ha ändrat den.
>> TOMAS REIMERS: Om vi ​​hade sagt vad?
Ursäkta.
>> ALLISON Buchholtz-AU: Om vi omfattning det svalna och sedan
leta efter saker av speciella, Det skulle vara samma, faktiskt.
>> TOMAS REIMERS: Så det skulle inte vara.
>> ALLISON Buchholtz-AU: Det skulle inte?
Åh, jaha.
Jag har fel.
>> TOMAS REIMERS: Så anledningen det är different-- gemensam mistake--
är att just nu bara länken har svalt, eller hur?
Jag antar att min fråga till er är, vad på denna sida matchas av Kyla?
Det finns två taggar här, eller hur?
Vilket är den här och den här.
Båda matcha coolt.
Ingenting gör annat.
Så om du sa, Kyla, utrymme, .special, vad du ska säga är,
inom dessa taggar, vad är speciellt?
ALLISON Buchholtz-AU: Hm.
Det är vad det-- rätt.
Eftersom det är som bara något här.
>> TOMAS REIMERS: Så det väljer ingenting.
>> ALLISON Buchholtz-AU: skäl med speciell, vi inom dessa taggar här.
>> TOMAS REIMERS: De och dem.
PUBLIK: OK.
Så dessa taggar från snedstreck?
>> TOMAS REIMERS: Ja.
Betyder det vettigt?
Hur det är i princip försöker att begränsa omfattningen.
ALLISON Buchholtz-AU: Yeah.
Jag tror det är förmodligen den enklaste sättet att tänka på det.
>> TOMAS REIMERS: Så vi tyckte att det här, och Vi tyckte att det här både matchas speciell.
Och sedan är vi frågar, inom dessa killar, vad är hett?
Och inom den här, den här är coolt.
Inom den här, ingenting är coolt.
Så detta är den enda tagg som återstår.
>> ALLISON Buchholtz-AU: skäl coolt är bara inom dessa a-taggar där.
TOMAS REIMERS: Exakt.
Och vad som är speciellt inom de?
Ingenting.
Nu, vad jag kommer att säga är om det fanns inget utrymme,
du frågar vad som är coolt och special-- eller vad är ganska och speciellt, eller hur?
Om du säger .special.pretty, det är samma som .pretty.special.
>> För vad du tar bort utrymmet är frågar är, när du säger .special,
du frågar, OK, vilka som är speciellt?
Och sedan av dem, vilket dessa är också ganska,
som är densamma, grammatiskt, som frågar, vad är söt,
och sedan för dem, vad är också speciell?
Rätt?
Det är skillnaden i vad är inom det som är.
PUBLIK: OK.
TOMAS REIMERS: Yeah.
Grymt.
Så med det i åtanke then--
>> ALLISON Buchholtz-AU: Jag tror vår sista sak är (i Fancy brittisk accent)
rutan modellen.
>> Tomas REIMERS: Den box-- [småskrattar] Jag älskar hur Allison säger att.
Så rutmodellen sak.
>> ALLISON Buchholtz-AU: Bara ha en låda, jag ska vara din box modell.
TOMAS REIMERS: Så låt oss prata om det.
Så just nu har vi tillbringat en hel del tid att prata om väljare.
Vid det här laget, ni är förmodligen, liksom, mästare i selectors-- du vet,
exakt hur att välja det innehåll som du vill manipulera på skärmen.
>> Så nu är frågan, hur exakt kan du manipulera den?
Så jag antar att det mest grundläggande sätt att tänka på det
är, väl, vad exakt är ett led i CSS?
Vi har tillbringat mycket tid talar om, vad är en tagg,
eller vad är det mest grundläggande representation av en tagg?
>> Ett bra sätt att tänka på det vill säga vilken form är laxen?
Vilken form är, typ, lax-färgad bakgrund?
>> PUBLIK: Det är en rektangel.
>> TOMAS REIMERS: Det är en rektangel, eller hur?
>> ALLISON Buchholtz-AU: Var inte en kuggfråga.
[LAUGHTER]
>> TOMAS REIMERS: Inte försöker att lura er här sent.
Så vi har denna rektangel.
Och taggen är en p, eller hur?
Så det ger oss bra tron att punkt
representeras som en rektangel vid stone i sinnet av webbläsaren, vilket
det är.
>> ALLISON Buchholtz-AU: Jag menar, webbläsare är vanligtvis rektangulära,
så det är vettigt.
>> TOMAS REIMERS: Tanken här är att alla taggar inom CSS
representeras som en rektangel.
Och varje rektangel har fyra delar enligt CSS, OK?
Du har det faktiska innehållet.
Det är där texten ligger.
>> ALLISON Buchholtz-AU: Kanske din bild.
>> TOMAS REIMERS: Yeah.
Du har stoppning, vilket är bara något slags vitt utrymme.
Då har du en gräns.
Och då har du marginal, vilket är blank utanför detta.
Så det är meningslöst till någon, så vi är
kommer att tala om det för en sekund.
Så just här, vad vi ska göra är vi ska skapa några divar, OK?
Ursäkta mig medan I--
>> ALLISON Buchholtz-AU: Jag känner gillar Vi bör sätta en söt bild i.
>> TOMAS REIMERS: Vi definitivt borde.
>> ALLISON Buchholtz-AU: Jag känner mig som alla
kunde dra nytta av en gullig bild, är allt.
>> TOMAS REIMERS: Kan vi alla nytta av en--
>> PUBLIK: Ja, visst.
TOMAS REIMERS: OK, cool.
Så vi bör sätta en söt bild i någonstans.
ALLISON Buchholtz-AU: Jag känner mig som en söt kanin kan vara användbart just nu.
TOMAS REIMERS: Visst.
ALLISON Buchholtz-AU: Slutet av veckan.
Har något adorab--
>> TOMAS REIMERS: Hur skjutningen en kattunge?
>> ALLISON Buchholtz-AU: En kattunge fungerar också.
>> TOMAS REIMERS: Cool, eftersom det finns en plats för det.
Det kallas PlaceKitten.
ALLISON Buchholtz-AU: Det är utmärkt.
TOMAS REIMERS: Ja.
ALLISON Buchholtz-AU: Bara för, liksom, platshållare bilder i din webbplats.
TOMAS REIMERS: Mm-hm.
Det finns också PlacePuppy.
Och det finns PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Verkligen?
>> TOMAS REIMERS: Åh, det gör vi inte har tillgång till internet här.
>> ALLISON Buchholtz-AU: [stön]
Tragiskt.
TOMAS REIMERS: Annars, Jag skulle visa er
hur man sätter bilder på din webbplats.
Vi ska försöka få det här fungerar innan vi måste gå.
Men för nu, vi är bara kommer att tala i färger då.
Vi vill sätta bilder på kittens--
>> ALLISON Buchholtz-AU: Vi gjorde.
>> TOMAS REIMERS: --Den internets ner för tillfället är.
Så vi har två divar, och vi är kommer att ge dem två ids.
Vi kommer att kalla det "Första" och "andra".
Så id = "först."
Och vi kommer att ge dem två färger.
Så hur ska vi välja något med ett id "första"?
ALLISON Buchholtz-AU: Dot eller hash?
PUBLIK: Sharp.
TOMAS REIMERS: Sharp, perfekt.
Sharp, hash, oavsett we--
>> ALLISON Buchholtz-AU: Massor av saker att kalla det.
>> TOMAS REIMERS: OK.
Vi kommer att bosätta sig på hashtag, och det är vad vi kommer att gå med.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS REIMERS: Så hashtag första.
>> ALLISON Buchholtz-AU: So du kan twittra den seminar--
hashtag CSS, hashtag cool.
TOMAS REIMERS: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, ja.
TOMAS REIMERS: OK.
Så vi har "första" och "andra".
Så först, vi kommer att ha en bakgrundsfärg rött.
ALLISON Buchholtz-AU: Öh, kolon.
TOMAS REIMERS: Japp.
ALLISON Buchholtz-AU: Jag ska vara din plats-checker.
TOMAS REIMERS: Allisons fick mig.
Bakgrund-färg på blue--
>> TOMAS REIMERS: Lila!
>> TOMAS REIMERS: Lila.
ALLISON Buchholtz-AU: Ja.
Lila är min favoritfärg, och vi har inte använt den ännu.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
Det fungerar.
>> TOMAS REIMERS: Så vi är kommer att ha två divar.
De kommer att vara helt tomt.
Vi borde nog ha lite text.
Så "första" kommer att vara "HELLO".
Och det "andra" kommer säga--
>> ALLISON Buchholtz-AU: Adjö.
>> Publik: - "världen".
Hej, adjö.
ALLISON Buchholtz-AU: Jag såg dem i samförstånd den andra veckan.
TOMAS REIMERS: The Beatles?
ALLISON Buchholtz-AU: För Real.
De är inte så bra.
Jag gillar det inte.
>> TOMAS REIMERS: Vi har "Hej" och "GOODBYE."
Och återigen, är CSS bara awesome, eftersom det erkänner våra färger.
Behöver inte ens orolig att de existerar.
De gör.
>> ALLISON Buchholtz-AU: De finns.
>> TOMAS REIMERS: Så CSS tror jag har 255 ord för att prata om färg.
Om du kan tänka på en färg utanför de 255, som kommer jag att vara imponerad.
ALLISON Buchholtz-AU: Yeah.
Jag tror att ni kan ha precis kommit in rätt efter.
>> TOMAS REIMERS: Så här, ser du att vi har två lådor
ovanpå varandra, eller hur?
Hej och adjö.
>> ALLISON Buchholtz-AU: Det finns inget utrymme i mellan.
De är bara smooshed ovanpå varandra.
>> TOMAS REIMERS: Så det första Jag antar att vi borde prata om
är låt oss säga-- också ja.
Så CSS representerar dem som en slags lådor.
Och som boxar, de har innehåll.
Och innehållet är just nu sorts Hello eller adjö och det är det.
OK?
>> Så en av de första saker som du kan göra är att du kan lägga stoppning.
Padding säger hur mycket utrymme Det bör lämna på varje sida.
Så låt oss säga att jag vill ha sagt 10 pixlar på varje sida.
Och jag kommer att dissekera det i en sekund.
ALLISON Buchholtz-AU: Alla dessa saker här
kommer att vara mestadels i pixlar för resten av seminariet.
Du kommer att se att det har lite utrymme runt det, eller hur?
Så vad du inte ser här är att det finns denna osynliga sorts stoppning
på varje sida, som säger, liksom, OK, du har din låda med content--
>> ALLISON Buchholtz-AU: Vill du att bara dra upp inspektera elementet?
>> TOMAS REIMERS: Ja, det är en bra idé.
ALLISON Buchholtz-AU: Också, tycker jag att inspektera elementet är ett bra sätt
att räkna ut om något händer fel, något oväntat händer,
inspektera taggar och se vad det är som skrivs över är till hjälp.
>> TOMAS REIMERS: Så jag är inte säker om ni kan se här färgen.
Kan du?
Du ser den här stoppning på den typ av kanten.
Och sedan ser du den faktiska Innehållet i blått, eller hur?
Så det är mycket grunderna i rutan modellen.
Du har innehåll.
Då har du utfyllnad.
>> PUBLIK: Varför inte du bara Använd rutan inne the--
>> ALLISON Buchholtz-AU: Rätt.
Eftersom det bara att välja elementet just nu.
>> TOMAS REIMERS: Japp.
Andra saker.
Så låt oss prata om det stoppning kommando för en sekund.
Så i CSS, mätningar måste ha en enhet.
Så först måste beloppet.
Så i det här fallet har vi sagt 10.
Och sedan nästa vi har sagt är pixlar, px.
Andra som du kan ha är saker som centimeter, inches.
Du kan göra saker gillar, vad är 10 inches?
Och det kommer att bli löjligt.
>> ALLISON Buchholtz-AU: Åh, boy.
>> PUBLIK: Whoa.
>> TOMAS och Allison: Yeah.
TOMAS REIMERS: Så det är allt utfyllnad.
Jag kommer att gå tillbaka till pixlar.
>> ALLISON Buchholtz-AU: Pixlar tenderar att vara, liksom, standarden.
När man tittar på många webbplatser, de oftast arbetar i pixlar.
TOMAS REIMERS: Så du kommer att se antingen pixels-- de andra du ser
är em, som är en em är lika med höjden på typsnittet
som du för närvarande använder.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: Det är ett bra sätt att säga, gillar, jag vill ha så mycket utrymme som min typsnitt
är att ta.
ALLISON Buchholtz-AU: Visste inte att.
Man lär sig något nytt varje dag.
TOMAS REIMERS: Det finns en många mätningar i CS.
Jag föreslår att du leta upp dem.
För alla dina ärenden, tror jag pixlar bör räcka.
Och de är också vad du kommer att se
i de flesta exemplen göras online.
Så vi ska lämna det på pixlar.
>> Du kan också, ska jag säga-- så padding sätter alla av stoppningar.
Du kan också göra något liknande "Padding-top" att bara set--
ALLISON Buchholtz-AU: Kanske vi kommer att få vår "HELLO" tillbaka.
TOMAS REIMERS: --to bara ställa in stoppning på toppen och ingenting annat.
Så de fyra kommandona padding-top, padding-bottom, padding-vänster,
och stoppning-höger.
>> ALLISON Buchholtz-AU: Precis som du kan förvänta dig för en låda.
>> TOMAS REIMERS: Yeah.
Inget alltför galet där.
Betyder det vettigt?
Så det är stoppning.
Jag kommer att ställa alla de stoppningar tillbaka till 10.
Och då kommer jag att gå vidare till gränsen.
>> Så vad gränsen är är gränsen är en konstig kommando.
Det tar slags tre saker samtidigt.
Så det första är hur stor du vill att det ska vara som en mätning.
Igen, jag bara använder pixlar.
Och det sista jag bör lägga till mätningar
är det en sak som behöver inte en enhet är 0.
Det är faktiskt fel för att ge 0 en enhet,
eftersom 0 är 0 tvärs inches, pixlar, centimeter, oavsett.
Det hela betyder bara 0, eller hur?
Så första du ge det mätningen.
>> Då kan du ge den stilen.
Så jag kommer att säga "solid".
Och vi ska tala om vad det betyder.
Och sedan slutligen du ge det en färg.
Så jag kommer att säga "svart".
Och allt detta är saker vi har nu sett förut, med undantag för stil,
men vi ska prata om det.
Så ni har sett mätningar, och du har sett färger.
Och vad som händer är att vi får detta trevlig svart ram runt det, eller hur?
Ni ser hur vi gjorde det?
>> PUBLIK: Ja.
>> TOMAS REIMERS: Cool.
Så vad är det?
Så först av allt, det är en pixel.
Det är självklart nog, eller hur?
Precis, det är en pixel tjock.
Eller det skulle vara en pixel, men jag är zoomas in, så det är lite mer
än så.
>> ALLISON Buchholtz-AU: Och vi har detta löjliga upplösning TV.
>> TOMAS REIMERS: Yeah.
Du kan göra det större, mindre, vad som helst.
Så här är en två-pixel gränsen.
Du ser att det är dubbelt så tjock.
Nästa sak du har är färgen.
Det är inte intressant.
Jag tänker inte prata om det, egentligen.
>> ALLISON Buchholtz-AU: Men stilen kanske bara lite intressant.
>> TOMAS REIMERS: Yeah.
Så stil, det finns få sådana som jag ser som vanligen används.
Första ens fasta, nästa ens prickade, och den sista är streckad.
Och här är prickade.
Du ser att de är ett gäng prickar, eller hur?
Ett bra sätt att sorts få en fin gräns gå, streck är också ganska populärt.
>> ALLISON Buchholtz-AU: Och sedan naturligtvis, jag är
säker på att det finns många andra stilar som du kan få.
Och vi har en stor uppsättning länkar i slutet för er
till typ av granska och titta på mer cool CSS.
>> TOMAS REIMERS: Och sedan det sista är vi
kommer att tala om box modeller riktigt snabbt.
Åh, och sedan gränsen, precis som stoppning,
du har också saker som border-vänster, gräns-höger, border-top,
border-bottom, vilket gör att du för att komma åt en specifik gräns.
Så här är precis gränsen vänster definierad.
Betyder det vettigt?
>> ALLISON Buchholtz-AU: Det är en cool sätt att betona saker eller lägga
linjer mellan olika element.
TOMAS REIMERS: Absolut.
Så det är vår gräns.
Och den sista marginal.
Marginal är som stoppning förutom att det inte är within--
ALLISON Buchholtz-AU: Det är inte runt elementet
men faktiskt runt hela box som vi har sett.
>> TOMAS REIMERS: Yeah.
Allison sa det perfekt.
Det är inte, som, i din inslag, det är runt hela rutan.
Det betyder saker som bakgrunds gäller inte det.
Och det i princip säger, gillar, jag vill inte ha något
i denna mycket utrymme för mig.
Så som här har vi en marginal på 10 pixlar.
Så ingenting inom 10 pixlar bör vara bredvid mig.
Det är typ av dess utrymme men typ av inte.
Så det är mycket grunderna i rutan modellen.
Betyder det vettigt?
Cool, cool.
ALLISON Buchholtz-AU: Awesome.
Så nu tror jag att vi bara har våra häftiga resurser
att vi tar er genom mycket snabbt.
Och vi ska actually-- väl, har vi internet än?
>> TOMAS Reimers: Låt oss se om jag kan öppna up--
låt mig bara se om jag kan få internet snabbt
medan Allison berättar om någonting Allison vill prata om.
ALLISON Buchholtz-AU: Så basically-- jag inte
vet vad jag kan säga på denna punkt.
Men dessa är några riktigt bra resurser.
Dessa är de som Tomas och jag har använt
och att vi faktiskt används för att prep för detta.
W3Schools är en som du killar skulle ha sett förut.
Vi rekommenderar det för en massa saker med CSS.
Jag vet att jag rekommenderar det till min avsnitt hela tiden.
>> En av de stora saker är att det gör att du kan sorts bråka med CSS
och se ändringarna omedelbart i detta,
gillar, visa dubbelfönster som den har.
Så du behöver inte oroa dig ställa in din egen webbsida,
eller inrätta vhost i ditt lokala apparaten och lokala värden,
och att få allt det där fungerar.
Det är inbäddat rätt inom sidan.
>> Och det har dessa små lektioner som du kan
gå igenom för att lära mer om väljare,
eller lära sig om att manipulera din typsnitt, eller en bakgrund, eller en bild.
Och du har dessa momentana resultat som du
behöver inte göra något andra prep arbete för.
Så jag älskar W3Schools.
Det är fantastiskt.
Funkar det?
>> TOMAS REIMERS: Yeah.
Nej, det är inte.
Vill du att jag ska försöka och starta om datorn?
Eller vill vi ha att--
>> ALLISON Buchholtz-AU: Jag menar, väl, detta kommer också att vara på nätet.
Alla bilderna kommer att vara online.
Så jag bara starkt rekommendera att göra dessa.
>> Detta är stor som bara som en fusklapp.
Det är bara alla grundläggande kommandon som du har.
Det är bra när man är först börjat din webbplats.
Eftersom kanske du inte vill komma in alla
den verkliga nitty gritty design tunga grejer.
Du behöver bara formatera det på ett sätt den typen av vettigt och vilja
gör för närvarande.
Och om du verkligen vill att komma in i det, jag vet
detta är, liksom, en av Tomas favorit referenser.
Vi använde det till prep, och det är fantastiskt.
Det är den Utvecklare från Mozilla.
>> TOMAS REIMERS: Så Mozilla är de människor som gör Firefox.
Och det är bara deras egna utvecklare referens, vilket jag tycker är fantastisk.
Och den har en underbar lista över resurser.
Så vi have--
>> ALLISON Buchholtz-AU: Och sedan sista anmärkning är
när du försöker designa din webbplats,
hämtar inspiration från saker som du tycker är söt.
Inspektera element, inspektera källkoden
kan vara super bra för att försöka lista ut
hur man styla din egen webbplats.
>> Ofta känner jag mig som den bästa sätt, förutom experiment,
är bara att titta på saker som är ganska.
Jag tycker att det är verkligen svårt att bara sorts designa saker på egen hand,
speciellt i början.
Så snälla titta på webbsidor att du gillar att titta på.
Räkna ut vad som gör dem lockande för dig.
Och då gärna prova och replikera.
>> TOMAS REIMERS: Höger.
Även som webbplatser så här, kan man se
det finns definitivt en div i toppen.
Och då du har en annan div inom här, vilket är CSS Awesomeness.
Och så har du ett gäng länkar här.
Om du verkligen bara inspektera element, kan du sortera på
börja se vad gör hemsidor se ut, och hur kan jag
åter att om jag ville.
Betyder det vettigt?
Så vi har bara tre minuter kvar.
Så frågor?
Någon av dem?
Ja.
>> PUBLIK: För färgen rektangel, hur skulle du
have-- om du inte vill ha det går över hela sidan, kunde
du har gjort det går över bara halva sidan eller bara texten?
>> TOMAS REIMERS: Ja, absolut.
Så låt mig se faktiskt.
Jag har två idéer.
Så först av allt, du kan också använda procenthalter.
>> PUBLIK: Verkligen?
>> ALLISON Buchholtz-AU: Så något att slå upp är relativ positionering.
Det är något som vi har inte tid att komma in,
men det är något jag definitivt rekommenderar ni checkar ut.
>> TOMAS REIMERS: So PROCENT.
Och se hur vi gjorde det bara 50% av bredden?
ALLISON Buchholtz-AU: Om du faktiskt vet antalet pixlar,
du kan vara mer exakt på det sättet.
Du kan pilla runt med den.
Men 50%.
Om vi ​​skulle ändra storlek vår webbläsare, Det skulle göra det mindre.
>> TOMAS REIMERS: Tja, det är princip 50% just nu, tror jag.
Det är 50%, och sedan marginalen har lagts till det.
CSS har en hel del fel.
Så just nu är 50% av sidans bredd.
Men kom ihåg att du har 10 pixlar tas bort från varje sida.
Så om du skulle flytta det mot den vänstra kanten av webbläsaren,
då skulle det se ut 50%.
Igen, som jag sa, CSS kan vara en hel del gissning-och-check.
Liksom, du tror något är kommer att bete sig på ett sätt,
men den beter sig ett helt annat sätt.
>> ALLISON Buchholtz-AU: Och du bara få smartare,
och du bara få en bättre intuition för det som du flyttar längs.
>> TOMAS REIMERS: Och det blir värre och värre.
Så det är egentligen bara en tävling.
>> ALLISON Buchholtz-AU: Det är super uppmuntrande.
Vi vill att de ska vilja CSS.
>> TOMAS REIMERS: CSS är häftigt.
Kom ihåg det.
Övriga frågor?
>> ALLISON Buchholtz-AU: En sak.
Något annat?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Tja, om du killar har några frågor senare,
vi är alltid tillgängliga som vanligt.
Du kommer förmodligen se några av oss för slutprojekt
och definitivt på hackathon.
>> TOMAS REIMERS: Absolut.
Och på mässan.
>> ALLISON Buchholtz-AU: Och på mässan.
Oh.
>> TOMAS REIMERS: Ser fram emot att se alla dina awesome--
>> ALLISON Buchholtz-AU: Vi får se alla dina grymma webbplatser
som kommer att vara vacker.
TOMAS REIMERS: Du kan alltid se, liksom, de webbplatser
som hade, liksom, bra CSS och sedan som de som inte försöker göra CSS.
ALLISON Buchholtz-AU: Även en annan sak, en sak att undersöka
är Bootstrapping.
Så Bootstrap är stor.
>> TOMAS REIMERS: Google att om dig--
>> ALLISON Buchholtz-AU: Google det.
Det är fantastiskt.
Du kommer att älska det.
Och nu när du har en grundläggande förståelse för CSS,
det ska göra mycket mer känsla.
Grymt.
Tack, killar.
>> TOMAS REIMERS: Tack så mycket.