>> [Zenelejátszási]
ALLISON Buchholtz-AU: Tehát Mi alapvetően csak megy
hogy adjak egy lepusztult A CSS, mert tudjuk,
hogy arra nem vonatkozott minden a szakaszok.
És valóban szeretnénk meggyőződni arról, hogy srácok ez az eszköz a rendelkezésére áll,
mert a képességét, hogy a weboldalak meg sokkal szebb.
>> És ha az épület egy honlapot, akkor akkor valószínűleg szeretné, hogy ez elég.
Úgy értem, nem kell, de én azt javaslom azt. [Nevet]
Ha azt szeretnénk, hogy a felhasználók, akkor talán szeretnénk, hogy ez egy kicsit [hallhatatlan].
Így fogunk próbálni, és hogy csak Néhány alapvető eszközök és megértést,
így ha kimegy, és te kutatása dolgokat CSS,
ez nem a teljes halandzsa, mint a CSS néha lenni.
>> TOMAS REIMERS: Igen.
Allison azt mondta, hogy elég jól.
Szóval azt hiszem, az első dolog, amit kell kezdeni, amit a CSS?
Tehát CSS félelmetes.
CSS--
>> ALLISON Buchholtz-AU: Ez a neve a mi szemináriumon.
>> TOMAS REIMERS: Igen.
Nagyon fontos, hogy érti, hogy addigra.
Ha csak elveszi az egyik dolog, az az, hogy CSS, ha félelmetes.
Kettő CSS jelentése Cascading Style Sheets.
Tehát a fő, CSS stíluslap, ami azt jelenti,
ez lehetővé teszi, hogy stílust egy web oldalon.
És akkor ez mit jelent, ez egy módja annak, hogy Új stílus a weboldalak.
Tehát a stílus, az értünk mindent ez nem structural--
így a dolgok, mint a színek, a háttér képek, határok, mint, padding,
különbözet.
Fogunk beszélni, hogy mit Mindez azt jelenti, egy kicsit.
>> Így már csak ment előre, és kinyitotta mind a két fel gedit.
Tehát ez az index.html.
És ez main.css.
Tehát main.css semmi.
ALLISON Buchholtz-AU: No stílust eddig.
TOMAS REIMERS: Nincs.
És mint majd látni, hogy ez egy nagyon csúnya helyszínen.
ALLISON Buchholtz-AU: ez csak sima.
TOMAS REIMERS: Igen.
Igen, ez nem csúnya, ez csak minimalista.
És akkor itt van index.html.
És így egy gyors bedugni a HTML, Allison,
akarod, hogy csak beszélni a lap?
>> ALLISON Buchholtz-AU: Igen.
Tehát nyilvánvaló, hogy mi van a HTML tag, amely csak neveket HTML fájlt.
Megvan a fejléc itt, CSS Awesomeness, which-- ha megy vissza.
Hol van ez?
>> TOMAS REIMERS: Oh.
Ja, láthatod.
ALLISON Buchholtz-AU: És észre a header
az ezen a lapon fejléc jobb itt.
És akkor "Hello, world!" van a szöveg, hogy az imént
megjelenítését az interneten oldal, amely ez-- vissza.
Vissza.
Ami csak a testünkben here-- a sima szöveg.
Az egy dolog, hogy észre, ha megnézi itt,
Tomas kapcsolni ezeket két a mi slide.
Tehát amíg megvan minden Ezek közül három, akkor minden rendben van.
Lehetnek bármilyen sorrendben akarnak.
Mi a legfontosabb az, hogy csak akkor e három dolgot.
>> TOMAS REIMERS: Cool.
Add a doc típusú?
ALLISON Buchholtz-AU: Igen.
TOMAS REIMERS: Igen.
Cool.
ALLISON Buchholtz-AU: Úgy látszik, én mikrofonok nem tetszik nekem.
TOMAS REIMERS: Ó, nekünk egy sec csak míg Allison kapcsol ki neki mic.
Szóval igen.
Szóval mi van a főoldalon.
Ez a fajta unstyled.
Nem kell sok.
Csak meg alapvetően szöveget.
Megvan a stíluslap.
Megvan a cím.
Tehát csak a csupasz csontú összetevők, hogy a honlapon.
>> Tehát onnan, hadd beszélni, mi CSS
és hogy néz ki, és minden adott.
Így hogy--
ALLISON Buchholtz-AU: Vissza a diák.
TOMAS REIMERS: Vissza a diák.
És Allison veheti át.
>> ALLISON Buchholtz-AU: Woo.
OK.
Tehát a CSS fájlban, fogsz is
egy csomó ilyen dolog úgynevezett választók.
Hogy majd csak lesz a alapján a CSS fájlban.
Ez csak lesz sok-sok ilyen.
Tehát választó.
Ez csak az általános anatómia.
Megyünk végig példák, mert ha ti nem
figyelte az én területem, úgy érzem, mint a dolgok absztrakt
Nem igazán van értelme.
Mindig segít, hogy lásd a példákat.
>> Így van némi választó.
Hogy lesz valamilyen azonosító számára mit akarunk a stílust a.
És akkor mi van bármilyen szabályok és értékek.
Tehát választók, hogy lehet látni Lehet, hogy valami hasonló testület,
vagy bekezdés a P, vagy a fejléc, vagy bármi,
amit akarsz a HTML tageket.
>> Tehát ebben az esetben, van teste.
És van néhány szabály, amely ennek megfelel
hogy milyen a stílusa vonatkozik.
Tehát ebben az esetben, van háttérszínt és font súlyú.
Tehát ez meg fog változni A háttérben semmit
bármely szervezetben tag a HTML fájlt.
És ez meg fog adni ez ennek a világoskék értéket.
>> Szóval ez megy, hogy a háttér világoskék.
És akkor bármit test Lesz egy font súlyú vastag.
Tehát csak fog bold minden kedves szöveget.
És ez csak egy választó.
De akkor is nagyon sok ilyen.
És ahogy megyünk megmutatni Később, egy kicsit abba, hogyan
ami működik, és több példa van.
Bármi, amit szeretne hozzáadni?
>> TOMAS REIMERS: No.
Allison megvan.
Mi csak fog vágni egy Például itt a példa oldal.
Úgyhogy tulajdonképpen ezt.
Ez tökéletes.
Szóval én csak fog másolás és beillesztés ez a jog a mi main.css fájlt.
És fogom menteni.
És akkor majd futtatni.
Tehát Mellékesen jegyzem meg, az egyik leginkább frusztráló dolog
Ha nincs, nem menti a fájlt, és akkor, mint az oldal újratöltődik,
és mint, hogy miért nem A változás történik?
Ez történik.
Tehát itt azt láttuk, hogy nem készült a mi website világoskék háttér
és néhány félkövér szöveget.
>> Azt is meg kell említenem, ha srácok kérdése van bármi
csinálunk, kérjük Ingyenes megállítani minket, és kérdezzétek meg.
Tuti hajlandók terepi kérdésekre.
>> ALLISON Buchholtz-AU: Nyilvánvaló, CSS, mindent épít magának.
Tehát, ha egy dolgot nem értelme most,
Nem akarom, hogy a mocsár le később.
>> TOMAS REIMERS: Akkor most fajta boncolgatni ezt a.
Szóval nem akarsz kezdeni A választó itt?
>> ALLISON Buchholtz-AU: Igen.
Ahogy mondtam korábban, test csak a mi választó itt.
Tehát ha visszamegyünk át, hogy az index-- ah.
>> TOMAS REIMERS: Amit csak zárt.
Adj egy másodpercet.
Szóval úgy, hogy megnyitja, index.html.
ALLISON Buchholtz-AU: Cool.
Tehát, ha azt veszi észre itt, ezeket a test címkék, ugye?
Szóval a választó csak megfelel A címkék beszélünk.
Tehát test itt.
Tehát mi azt mondjuk van everything-- mehetünk vissza?
Azt kívánom, hogy mint megérinteni a képernyőt.
Jó lenne, így sokkal hűvösebb.
>> Tehát bármit azokon belül test címkék, amit látott
volt csak, mint a szöveg, és a test általában
utal, mint a háttér.
Ha valaha szeretné változtatni a hátteret,
hogy lesz egy body tag.
Csak vannak ezek a szabályokat alkalmazzák rájuk.
>> Tehát ha voltunk menni index.html és-- valóban,
tehetünk valamit A testen kívül?
Ha lenne, mint a lábléc, vagy valamit, akkor nem vonatkozik erre.
De bármit ezek a test címkék fog
hogy érinti ez a testület kijelölõnek tettük.
Tehát, ha úgy döntesz, hogy írja valami mást there--
>> TOMAS REIMERS: Nézzük vezetni, hogy haza.
Tehát ha lenne egy div-- tehát ez csak egy újabb tag tiéd lehet.
Megyek, hogy lezárja azt.
Vagy csináljuk meg ezt a bekezdést.
Tehát p jelentése bekezdés.
És ezen belül a bekezdést.
És akkor azt mondom, "Ez a szöveg."
Cool.
És aztán csináltam ezt a szabályt alkalmazni kell egy bekezdést helyett a test.
Látni fogod, hogy ez is csak a Az újonnan alakult bekezdés, igaz,
Nem az egészet.
Van ennek értelme?
>> ALLISON Buchholtz-AU: Szóval ez az egész testben,
De most a választó csak megfelel a bekezdésben.
Ezért elég merész és kék külön erre a bekezdésre,
mert ez az egyetlen dolog amely zárt a p tag.
>> TOMAS REIMERS: Van ennek értelme sort A dolgok magukba egyéb dolgokat?
ALLISON Buchholtz-AU: Is, csak mondani, mint az egyik legjobb módja
hogy igazán kényelmes CSS az, hogy csak ilyen dolgokat csinálni,
Csak próbáld ki.
Ez nagyon egyszerű, hogy be valami out, hit Frissítés, és meglátjuk, mi történik.
És mint a legtöbb CS, kísérletezés gyakran
vezetnek sokkal jobb intuitív megértését.
Annál is inkább, mint mi, csak, szerű, hozzád beszélek.
>> TOMAS REIMERS: Abszolút 100% egyetért ebben a kérdésben.
Tehát ha visszamegyünk erre, kezdjük boncoló pontosan mi ez a két csinálni.
Tehát van két szabály ezzel kapcsolatban.
Tehát az első a háttér színét.
És látod, hogy eddig mi is ez egyenlő értékű, világoskék.
>> Tehát a CSS, CSS egyfajta A nagyon laza, hogyan
te szabad, hogy meghatározza a színt.
Szóval lehet meghatározni őket név szerint.
Azt is tenni valamit, mint a "vörös".
Majd ha megyünk vissza erre, látni fogod, hogy a háttérben a vörös.
Ön is kap really-- azt hiszem, tud elég kreatív ezzel,
nem tudsz?
>> ALLISON Buchholtz-AU: I gondolom tudod használni hex.
Nem tudsz?
>> TOMAS REIMERS: Igen.
Így használhatja hex.
De azt hiszem nevet és bölcs.
Nincsenek ott?
ALLISON Buchholtz-AU: Meg tudod csinálni jó néhány.
Nagyjából ugyanaz a legtöbb színt, amit lehet name--, mint, azt hiszem, lazac az egyik.
>> TOMAS REIMERS: Meg fogunk próbálni lazac.
ALLISON Buchholtz-AU: I gondolom Chartreuse van ott.
TOMAS REIMERS: Igen.
Látod?
Így kap elég kreatív.
>> ALLISON Buchholtz-AU: You lehetne még elég kreatív.
Mint, ha lehet gondolni a színes nevet, akkor talán ott.
Ha szeretné finom részletek, akkor mehet hex.
>> TOMAS REIMERS: Igen.
Tehát hexadecimális.
Ha a srácok emlékezni erre vissza a régi PSET, Kép helyreállítása,
srácok kellett küzdenie ezekkel hexa értéket.
És valami Emlékeztető, hogy mi az, hex három tárolt értékeket is.
Szóval ez a csoport két lépésekben.
Az első két képviselik a piros érték.
A második képvisel A zöld értékét.
És az utolsó egy kék?
>> Így FF történik, hogy képviselje hexadecimális 255.
Szóval van 255 piros, 255 zöld és 0 kék.
És a szélső értékek 0 és 255 között.
>> Közönség: Igen.
Tehát lényegében tudnánk keresni Az internet minden szín akarunk,
és meghatározza a ténylegesen ismert színskála combo,
és akkor tudnánk tegye?
ALLISON Buchholtz-AU: Pontosan.
Szóval van elég sok teljes ellenőrzése több mint kívánt színeket belül CSS.
Fogunk beszélni háttérképeket később?
Vagy akarunk csinálni?
>> TOMAS REIMERS: Igen.
Abszolút.
Tehát az első, csak hogy megmutassa, hogy piros és zöld sárga.
És ha szüksége van némi segítsen megtalálni ezt, akkor
Képes a Google valamit mint a "Color Picker."
ALLISON Buchholtz-AU: Ó, ez annyira jó.
Szeretem Color Picker.
>> TOMAS REIMERS: colorpicker.com Jó példa erre.
És itt, látni fogod, hogy van teljes Photoshop-szerű színválasztóból.
>> ALLISON Buchholtz-AU: Mm-hm.
Továbbá, a hűvös dolgok meg generálhat színes programok
így nem kell, szerű, csattogó színeket.
TOMAS REIMERS: És akkor itt a hexa értéket itt.
Így mindig lehet találni az online alapvetően helyek, ahol az hexadecimális értéket.
Ez nem valamiféle, hogy csak, mint mi látja a színeket a világ számokban.
Ez több, hogy mi megy online és megtalálja, amit színes akarunk,
majd számot vesszük le.
Mivel ez csak egy nagyon egyszerű formában férhetnek hozzá a dolgokat CS.
>> ALLISON Buchholtz-AU: És akkor ott van also--
Nem emlékszem a pontos nevét a helyszínen.
De van határozottan, gondolom, valamit Adobe
generáló színes programok az Ön számára, ami nagyon klassz, mert
definitely-- ez néha nehéz kitalálni,
Ó, ha azt akarom, hogy ezt a színt, mi lehet egy másik hasznos egy
használni máshol oldalamon, mint, hogy szép és összetartó.
>> TOMAS REIMERS: Allison beszél Egy Adobe nevű Kuler, azt hiszem.
Ez K-U-L-E-R.
ALLISON Buchholtz-AU: Azt hiszem, igen.
Biztos vagyok benne, hogy ez az egyetlen.
>> TOMAS REIMERS: Az én kedvencem, Mindig is színséma tervező.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Melyik now--
>> ALLISON Buchholtz-AU: Ah, ez gyönyörű.
>> TOMAS REIMERS: És te Alapvetően azt mondják, mint,
Azt akarom, három szín egymás mellett.
És akkor nézzük valami szépet.
És akkor kap egy példa Az, hogy ez mit nézhet.
És akkor, ha fölé viszi valamelyik őket, hogy megadja neked a hexa értéket.
>> Ahogyan tehát egy jó így kezdeni gondolkodni színes programok
vagy milyen színek egy website Lehet menni jól együtt.
Mert ez is meglepően nem olyan könnyű felvenni, mint gondolod.
És akkor a másik jó dolog Mindig találtam erről az oldalról
van, ha bejön példák, hogy lesz megmutatni, milyen példát honlapján
nézhet segítségével, hogy színséma.
Mindegy.
>> Vissza a tényleges CSS.
ALLISON Buchholtz-AU: De nyilvánvalóan meg Ismerem ezeket referenciák hasznos lehet.
TOMAS REIMERS: Nem, határozottan hasznos lehet.
Tehát a második szabály, Allison?
>> ALLISON Buchholtz-AU: Igen.
A második szabály csak megfelelő a font.
Tehát font súlya csak egyfajta of-- így a súly lenne
lennie, ha azt szeretnénk, csak, mint, normális vagy, mint a vékonyabb betűtípusok,
vagy ebben az esetben, mint merész.
Elfelejtem.
Mi a ha akarta it-- van Egy vékonyabb, mint, mondjuk, a normális?
TOMAS REIMERS: Igazából nem tudom, ha van egy vékonyabb.
ALLISON Buchholtz-AU: elfelejtem.
Tehát font súlyú mi jellemzően csak használja a merész.
Ha azt szeretnénk, hogy igazán a ez, megyünk, hogy mutassa meg.
W3Schools van a különböző dolog, amit tehetünk előírni.
De alapvetően, ha valaha megváltoztatni semmit font,
ez mindig lesz, mint font-valamit.
Így olyan lesz, mint, font-family ha próbál változtatni a tényleges típust.
Ez lesz a font-style, ha szeretnénk, hogy ez, mint a kurzív,
vagy dőlt, vagy miegymás.
Vagy akár font-color, ha akartunk változtatni.
>> TOMAS REIMERS: Aha.
Szóval lehet változtatni.
És a fajta csak a bedugni teremteni, így
látni, hogy mi van a választó itt.
Itt vannak ezek a kapcsos zárójelek.
És akkor mi van szabályok által határolt pontosvessző.
Van ennek értelme?
Igen?
Cool.
Így ha ez good--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Beszéljünk konkrétan arról, hogy milyen választók van.
Mert most mi már fajta csak látható címkék.
De ti is látni hihető.
Tegyük fel, hogy két bekezdés egy oldalon, és
azt szeretném tudni, hogy a stílus az egyik, de nem a többi,
nem csak azt, hogy fogja vissza magát hogy kell használni a különböző aktuális HTML
Címkék adni nekik különböző stílusokat.
>> Tehát van három alapvető típusú választók.
ALLISON Buchholtz-AU: Igen.
Tehát van tag, amely a mi mi már beszélünk most.
Szóval ez olyan, mint a tested, vagy p.
És akkor mi van osztály, amely amikor meghatározzák, hogy a mi CSS fájlban,
ez mindig lesz dot, bármi szeretné a nevét, az osztály is.
És ez vonatkozik a több dolgot.
>> Tegyük fel, hogy öt pontját és kettő a három közülük
kell stílusú ugyanazon, akkor alkalmazni egy osztályt is.
És ez még csak a módszer nem más.
Adunk egy példát ahol ez valóban felbukkan.
De ha már talán néhány tag p, utána, akkor írj,
class egyenlő bármi osztályok az alkalmazni kívánt rá.
Így bármi class választók, hogy szeretnénk hogy alkalmazni erre külön bekezdés,
tudnánk írni, mint ez.
Persze, azt hiszem, egy példa teszi sokkal konkrétabb.
>> A másik van az id, amely jelöljük
A kettőskereszt, vagy a font, vagy hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON Buchholtz-AU: Octothorpe.
Ez működik is.
És ez tényleg egyedi.
Ők csak azokra az Egy dolog az oldalon.
Tehát, hogy ez egy külön bekezdés, vagy valami listaelemet, vagy bármi,
ennek egyedinek kell lennie.
És ugyanúgy, hogy mi csak mondani, mint, class = "Class1 class2,"
ez csak legyen id bármilyen van.
TOMAS REIMERS: Igen.
Úgyhogy mindenképpen beszélni mintegy példák itt.
És én csak fog merülni egyenesen vissza a kódot.
Tehát nézzük meg mi HTML.
És így most van egy paragrafus.
Ez a szöveg.
Én csak megy, hogy módosítsa azt. "Ez a szöveg 1"
És akkor mi lesz Van egy "Ez a szöveg 2."
>> ALLISON Buchholtz-AU: második.
TOMAS REIMERS: Aha.
Szóval most már van "Ez a szöveg 2", igaz?
És fogunk látni, hogy ha reload Az oldal, mit fogunk találni
ez fogunk find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Igen.
Fogunk találni "Ez 1. szöveg ", és" ez a szöveg 2 "
>> ALLISON Buchholtz-AU: És out szép sárga színű.
>> TOMAS REIMERS: És látni fogod hogy a választó most,
amely vonatkozik a P, illetve bekezdések érinti mind a ketten,
mert mindketten megfelelnek a feltétellel, hogy mindketten egy p tag.
Hogy teljesen érthető.
A kérdés tehát az, nos, mit ha azt akartuk, hogy csak az kap egy?
Tehát pontosan olyan, mint Allison azt mondta, van két más módon is csinálni.
Megyek kezdeni id.
>> ALLISON Buchholtz-AU: Kezdjük id.
>> TOMAS REIMERS: És mind Ezek közül tulajdonságok.
Tehát attribútumok léteznek HTML.
És mik azok a valami, amit hozzá
belül a tag, amely elválhat a tag nevét.
Így van több tulajdonságot.
Igen?
>> ALLISON Buchholtz-AU: Csak azt akartam mondani, az Ön például PSET 7,
ha valakinek próbálja összehangolni dolgokat a központba,
lehet, hogy használt "Text align = center."
És akkor észrevette, hogy valószínűleg kellett volna középre
a szöveg vagy a navigációs sáv.
Szóval ez csak még egy attribútum hogy ismerős lehet.
TOMAS REIMERS: Van egy csomó Az attribútumok, hogy látni fogod.
Igen.
Mint jó referencia, hogy PSET 7.
Van id.
Azt is, hogy osztály, a dolgok, mint ez.
Egyetlen elemnél is sok attribútum.
Így kezdődik id, Tegyünk úgy, mintha mi szeretnénk, hogy egy id of-- Nem tudom.
Hívjuk meg a különleges, mert ez az egyik, mi vagyunk
megy, hogy merész, és hangsúlyozzák, és bármi.
ALLISON Buchholtz-AU: Ez lesz szuper.
TOMAS REIMERS: Tehát ez Egy, már id különleges.
Tehát az utat válassza ki, hogy akkor az, A main.css, ahelyett, hogy egy p tag,
te #special, OK?
És, hogy kiválasztja a dolog id különleges.
Van ennek értelme mindenkinek?
Közönség: Igen.
TOMAS REIMERS: Cool.
Tehát most ha visszamegyünk, mi csak-- Hoppá.
Igen.
Meglátjuk, hogy ez csak kiválasztja Az egyik id különleges.
Igen?
Jól hangzik.
Igen.
>> Közönség: Tud valamit van attribútum mindkét osztály és az id?
>> TOMAS REIMERS: Igen.
Közönség: OK.
És akkor mi történik, ha majd adni ez bizonyos szabályoktól CSS, hogy a konfliktus?
TOMAS REIMERS: Abszolút.
Mi határozottan fog beszélni róla.
Tehát pontosan mit is kapok a, akkor is van osztályokat.
Szóval mintha én volt három bekezdés és én
akarta, hogy stílus az első kettő, de nem a harmadik.
Nos, az első gondolata lehet, nos, Lehet, hogy csak így a második egy id.
De nem tudsz, mert az id, pontosan olyan, mint Allison azt mondta,
egyedinek kell lennie.
>> Így ahelyett, hogy egy id, amit Használhatja az akkor egy osztályban.
És a class-- mi ez lehetővé teszi Önnek tennie, hogy alapvetően azt mondják,
ez tartozik, mint egy csoport része.
Ebben az esetben, a mi csoport az úgynevezett Special.
És mit fogunk csinálni, akkor van fogunk say-- helyett font,
fogunk használni dot.
OK?
És észre, hogy a font és a dot csak létezik az CSS fájlban,
nem a HTML.
ALLISON Buchholtz-AU: Igen.
Fontos különbséget.
>> TOMAS REIMERS: Van volt annyira harc,
mert tettem a hash a HTML és Ezután csak úgy érezte, ostoba sokáig.
Nézze meg, hogyan választja ki mindkét az is, azzal osztály?
Cool.
>> Most, a dolgok több osztály is.
Mondjuk azt akartam, hogy az első Két van a háttérben a sárga
és a második kettő egy font színe kék.
OK.
Nem igazán tudom, miért teszem, ha akar csinálni, de én igen.
>> ALLISON Buchholtz-AU: lehet, hogy nem ajánlotta a honlapon.
De a mi szempontunkból, hogy megteszem.
>> TOMAS REIMERS: Nem Jó színséma.
ALLISON Buchholtz-AU: Nos, sárga és kék a gimnáziumi színek.
Nem tudom, mégis.
TOMAS REIMERS: Allison magas iskola volt egy nagy színséma.
[Nevetés]
Akkor mi tudjuk hívni ezt Nevezzük this-- így van Special
és mi van Pretty.
Azt javaslom, ehhez, akkor használd sokkal névvel.
ALLISON Buchholtz-AU: Igen, megtenném hívja ezt, mint a, sárga vagy kék.
>> TOMAS REIMERS: Nem vagyunk igazán, hogy egy valódi weboldal
ezért mi nem ezt teszem.
De ha valóban volt egy igazi website, akkor
Lehet, hogy, mondjuk, a cikk fejlécében, cikk tartalmát, első szó,
ilyesmi, amelyek lehetővé teszik, akkor sokkal találóbb.
Ezek tényleg mint változókat.
Ők meg kell nevezni olyan módon, ahol tudod, like-- igen, mint olyan.
Tökéletes.
>> Tehát a háttér színe.
És akkor mi lesz say-- így a módja annak, hogy változtatni színe csak "színes".
És fogunk tenni blue.
Ez jó.
Tehát most már a első két különleges.
Next sem fog van "class = elég."
ALLISON Buchholtz-AU: és akkor majd szeretné adni a "szép" a középsőt.
TOMAS REIMERS: Aha.
Majd a középső, felvenni "szép", hogy mi történik
ez csak van egy hely.
Tehát a class attribútum szóközzel elválasztott listája
Az összes osztály alkalmazandók erre a tag.
OK?
Nem mintha ez tartozik valamilyen speciális nevű osztályt
"Különleges, teret, elég."
Tartozik két classes-- különleges és szép.
Igen?
Cool.
>> Majd ha megnézzük mi történik, mi vagyunk
majd, hogy elsőnek sárga háttér, fekete szöveget.
Második one--
>> ALLISON Buchholtz-AU: --has bold sárga alapon kék szöveg.
És mi utolsót éppen az a kék szöveg, hogy mi van hozzárendelve.
>> TOMAS REIMERS: Cool?
Hogyan választók dolgozni?
Félelmetes.
>> ALLISON Buchholtz-AU: Akarunk beszélni a konfliktus most akkor?
>> TOMAS REIMERS: Szóval igen.
Abszolút.
Tehát mi történik, ha Van egy konfliktus, ugye?
Tegyünk úgy, mintha az első állít fel valamit like--
ALLISON Buchholtz-AU: Talán ez megváltoztatja a háttérben?
TOMAS REIMERS: Igen.
Így fogunk tenni "szép" változtatni a háttérben, a lazac.
ALLISON Buchholtz-AU: Te csak a minden nagyszerű színeket ma, Tomas.
TOMAS REIMERS: Igen.
Mert rájöttem tudok használja a lazac, mint egy igazi színes.
Szóval csak akkor fog csinálni.
Azt is gondolom, Sunset egy igazi színes.
Közönség: Sunset egy igazi színe?
ALLISON Buchholtz-AU: Próbáljuk meg.
TOMAS REIMERS: Miután ez a demó csak azért, mert abban az esetben, elrontja,
Nem akarom, hogy a hibakeresés.
Tehát tudjuk, hogy a lazac egy igazi színes.
Tehát minden találgatások on mi fog történni?
>> ALLISON Buchholtz-AU: Valami ötlet?
>> Közönség: [hallható].
>> TOMAS REIMERS: Igen.
Szóval van ez pontosan így van.
Alapvetően úgy utolsó szabály, hogy azt kapta.
>> ALLISON Buchholtz-AU: Tehát ez ahol lépcsőzetes hatályba lép.
>> TOMAS REIMERS: Úgy emlékszem, hogyan volt, hogy Cascading Style Sheets?
Tehát, hogy azt a fajta jelenti hogy van egy csomó szabályok
amely alkalmazni egymás tetejére, és ők is felül lehet egymást.
>> ALLISON Buchholtz-AU: Tehát bármi van az alján
felülírja bármi is legyen a tetején.
Lehetne szabályokat, amelyek teljesen tagadja valamit előre.
Ezért is akarsz lenni Vigyázzon, ha éppen a stílus,
szóval nem teremt szabályok te csak teljesen irányadó.
>> TOMAS REIMERS: Vagy talán nem akarja felülírni szabályokat.
>> ALLISON Buchholtz-AU: Vagy talán nem.
Igen.
>> TOMAS REIMERS: Csinálj úgy, hogy egy class amely a legtöbb dolog,
de mondjuk meg akarja változtatni a háttér színe a piros, a betűtípus
súlyt merész a legtöbb dolgokat, de egy,
Ha csak szeretné a háttérszínt hogy piros, de szeretnénk, ha minden más
tulajdonságait, akkor tehetne valamit mint a "font-weight = normális"
ami majd visszavonhatja, hogy a merész változás.
Igen?
Ismét a legjobb módja, azt hiszem, Allison azt mondta, csak gyakorolni.
>> ALLISON Buchholtz-AU: kísérletezés.
>> TOMAS REIMERS: gyakorlás, gyakorlás, gyakorlatot, és a kísérlet.
Tudom, hogy egy csomó ember, hogy úgy gondolja, CSS csak egy csomó találgatás és ellenőrzés
a végén a nap, ahol, ha akarsz csinálni, mint something--,
van egy durva ötlet, de Még mindig valószínűleg szükség
hogy próbálja ki, hogy győződjön meg arról Tudja, hogy néz ki.
>> Közönség: Amikor alkalmazása osztályok, több mint egy
hogy ugyanezen bekezdés vagy részben, nem igaz
számít, milyen célból, hogy a írja őket az idézőjelek?
>> TOMAS REIMERS: Nem, egyáltalán nem.
>> ALLISON Buchholtz-AU: Ami számít A rend a CSS stíluslap.
Közönség: Tudnál ismételje meg a kérdést?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: belül osztály, ha adsz osztályok
hogy valami a HTML, nem Számít, milyen sorrendben ők?
Nem számít, hogy a megrendelés.
Ami számít, az a sorrendben a osztály választók belül a CSS,
belül stíluslapja.
>> TOMAS REIMERS: jól hangzik?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: És akkor fogunk folytatni to--
ALLISON Buchholtz-AU: Mi van még?
Elfelejtem.
Ó, már csak példák.
De már egyfajta tenni azokat.
Tettünk példák menet közben.
>> TOMAS REIMERS: Kapunk egyesítik a választók hamarosan.
>> ALLISON Buchholtz-AU: Oh, jutunk, hogy összekapcsolják választók.
TOMAS REIMERS: Szóval néhány példák is vannak
# Dog-- font, vagy hashtag, vagy octothorpe, vagy bármi
a hívni kívánt hogy-- éles.
>> ALLISON Buchholtz-AU: Sharp kutya.
>> TOMAS REIMERS: Akkor van .pets.
Valami egy id kutya, már csak egy kutya az oldalon.
Valami van egy azonosítót macska, már csak egy macska.
Lehet, hogy sok háziállat az oldalon.
Ezért is adta, hogy az osztályok.
Van egy példa p.
És akkor így az egyik utolsó példa, amely
van valami, amit még nem beszéltünk, az, hogy mi történik, ha kombinálják őket.
Tehát p.pets.
>> Tehát, hogy menjünk vissza a kódot, és vezessen be another-- igen.
Szóval vissza ide.
>> ALLISON Buchholtz-AU: I érzem, ez az really--
mint a csak nézegette példák valóban a módja annak, hogy megtanulják ezt.
Szóval ez az, amit csinálunk.
>> TOMAS REIMERS: Akkor most úgy, mintha mi csak akar választani szöveg 2, ugye?
Így biztosan nem ezt megtenni egy id.
Nos, amit tehetünk, hogy egy id, de nincs id.
Azt is hozzá egyet, de most úgy, mintha hogy nem akartam, hogy adjunk egy
vagy ez már valami más.
Nem tudom, hogy ezzel.
A tag egyáltalán nem egyedi, nem igaz?
És az sem az osztály.
De akkor is össze ezeket a dolgokat.
Mondjuk akartam csinálni valamit amely csak a dolgok
az osztály különleges és amelyek az osztály elég.
>> Szóval, mit tehetünk a main.css, azt lehet mondani, nézzük először törölni ezt.
Ezek kombinálásával.
Szóval lehet csinálni .special.
Nincs hely.
Csak .special.pretty.
Ez azt jelenti, valamit amely egyszerre különleges és szép.
Van ennek értelme?
És ha mi megy itt, mit fogsz látni
ez a szabály csak az második, mindkettővel rendelkezik.
És meg tudod csinálni, hogy egy csomó dolgot.
Akkor say-- nézzük mintha én csak akartam
olyan dolgokat, amelyek az osztály elég és amelyek egyben a bekezdés címke.
Tehát p.pretty.
Tegyük fel, hogy meg kellett valami szép a tag szervezetben.
OK?
Tudom futtatni ezt és én Láthatjuk, hogy ez csak
fog alkalmazni a dolgokat, amelyek bekezdések az osztállyal elég.
És akkor össze ezeket, Alapvetően annyi, amennyit csak akar.
Így csak összerakni őket.
Van ennek értelme?
ALLISON Buchholtz-AU: Tehát ez a fajta is hasznosabb
amikor Tomas mondott korábban, talán Van egy nagyon bonyolult honlap,
és már van egy csomó E szabályok írt,
és akkor csak meg kell össze két korábbról.
Mint írása helyett egy egész Új választó és változó ott,
ha csak össze őket, ahol az átfedésben.
>> TOMAS REIMERS: Vagy Lehet találni out-- néha
van egy osztály, amely teszi font színe, mint a kék,
és van egy másik osztály, amely teszi a háttérben kék.
És ez csak nem fog működni.
Így írunk egy speciális eset, amikor, like-- de ha azt mind, mire vagy
eredménye, hogy meg fogsz hogy ez az egyik ez a kék árnyalat
és ez a másik kék árnyalatú.
Ugye?
>> ALLISON Buchholtz-AU: Jó azoknak típusú kivételek.
TOMAS REIMERS: Tehát, hogy gondolkodni problémák
hogy az esetleg, ha kombinálják őket.
Cool.
Szóval vissza a bemutatót.
ALLISON Buchholtz-AU: Már majdnem ott vagyunk.
TOMAS REIMERS: És ez leállt összekötő.
ALLISON Buchholtz-AU: Ó, nem.
ALLISON Buchholtz-AU: CS at az iroda, internet lemegy.
Ó, az iróniát.
>> TOMAS REIMERS: Szóval Szerencsére mi is bemutatni nélkül az interneten, azt hiszem,
mert mi minden diák itt.
Szóval beszéljünk a kapcsolata címkék.
ALLISON Buchholtz-AU: Így van.
Tehát csak ilyen megy off, amit Tomas mondta,
ez is csak egy módja annak, hogy csináld.
Így van némi szülői Selector a gyermek választó.
Tehát ebben a példában itt van néhány testét egy osztály navigációs panelen, class gombra.
Ah.
>> TOMAS REIMERS: Ó, sajnálom.
>> ALLISON Buchholtz-AU: És Alapvetően ez mit jelent
mint kiválasztani az összes gyermek, mint a az összes ilyen típusú választók,
ezen belül a szülő választó.
És ezek az egyetlenek, hogy valaha is alkalmazni kell.
Nem tudom, ha Van egy jobb módja of--
TOMAS REIMERS: Szóval kitalálni a módját, hogy úgy gondolja,
Minderről emlékszem előtt, hogyan azt a fajta, mint összerakni.
És akkor, hogy egyik elemét jelenti amely megfelel az összes ilyen.
Milyen ez mond, én akarom tőled, hogy megfeleljen mindent
belül some-- akarok megtalálni a választó.
Majd azon belül szeretném Önnek, hogy megfeleljen az új dolgokat.
Ugye?
Tehát a CSS, ez az egész a fajta hogy képes egyeztetni ezeket a tételeket.
És akkor megpróbálja összehangolni tételek belüli egyéb tételek.
>> Szóval valójában nem egy példa, és úgy gondoljuk, hogy majd tisztázni.
Úgyhogy úgy, mintha mi a különleges, Különleges csinos, bármi.
És akkor mi van egy link, OK?
Így emlékszik, egy olyan link.
Ez nem fog menni sehova.
És mi lesz, hogy ez osztály linket, azt hiszem.
Adjunk a class-- adjon nekem egy ötletet.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: Coo-- nézzük megy az osztály elég.
Miért nem?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: Tehát most szép dolgokat
megy, hogy a háttérben kék, háttér színe lazac.
Ennek van értelme.
És ha nem teszünk this--
>> ALLISON Buchholtz-AU: Szeretné, hogy szöveget
így a hivatkozás valójában azt mutatja fel?
TOMAS REIMERS: Ez lenne egy jó hívás.
ALLISON Buchholtz-AU: Mert jobb Most mi csak fog kapni semmit.
TOMAS REIMERS: Tehát ez a link.
"Ez egy link."
Ja, és ez lesz hogy egy másik link.
Adjunk az osztály "cool".
Igazad van.
Cool.
Akkor most mi lesz fogd ezt.
Fogunk dobni egy.
Van egy a speciális tag, és mi is
megy, hogy az egyik a szép tag.
És most mit fogunk tennie, hogy meg fogunk tenni cool--
mit is szeretnél csinálni?
ALLISON Buchholtz-AU: Elérjük, hogy nagyobb?
TOMAS REIMERS: Adjunk egy határon.
ALLISON Buchholtz-AU: tudtuk határon.
TOMAS REIMERS: Igen.
Így fogunk tenni valamit szerű, határon ez-- és mi vagyunk
elmagyarázom ez az egész egy másodperc alatt.
A now--
>> ALLISON Buchholtz-AU: A doboz modell.
TOMAS REIMERS: De most mi vagyunk csak úgy, hogy ez egy határon.
Tehát mit jelent az Ön fogja látni ezeket a linkeket.
És fogsz látni, hogy ezek, mint, csúnya fekete határok, amelyek
hűvös.
>> ALLISON Buchholtz-AU: Honlapunk olyan szép.
>> TOMAS REIMERS: Igen.
Honlapunk félelmetes.
Tehát ez a két linkek, és úgy tűnik.
Most mintha én Csak azt akartam, hogy ezt
ha nem belüli valamit amely a háttérben a lazac.
Úgy emlékszem, hogy ez az egy a háttérben a lazac,
mert az osztály elég.
>> De azt akarjuk mondani, hogy csak hűti amelyek az osztályban speciális, nem az osztályban
elég, kell, hogy határon.
Nos, mit tehetünk meg lehet mondani, .special, a tér, .cool.
És hogy ez mit csinál, ha úgy gondolja, róla, van ez lényegében azt mondja,
OK, meg nekem mindent amely megfelel a különleges.
Ezután a tag-ek, meg nekem mindent, ami jó.
ALLISON Buchholtz-AU: Tehát egy másik módja hogy jó lenne ezen elgondolkodni,
hozza vissza a C, a csakúgy, mint az ötlet hatálya.
Szóval, ha van némi választó, mint azok,
hogy mi már dolgozunk ezt megelőzően, a teljes weboldalt, ha minden HTML
belül van hatálya, ugye?
De ha már ezek a szülő-gyerek kapcsolat,
olyan, mintha te szűkül le, ahol szeretné elérni, hogy egy adott helyen,
mintha, mondjuk, keresünk belül egy adott funkció helyett
A mi egész fájlt.
Közönség: Tehát ezt szem előtt tartva, lenne ez számított volna, ha lenne changed--
ALLISON Buchholtz-AU: A rend?
Közönség: --A osztály CSS hogy .cool, a tér, .special?
ALLISON Buchholtz-AU: Igen, mert akkor, hogy
mondanám, hatályát, hogy minden, ami jó,
majd nézd meg, mi has-- Úgy értem, mint a jelen esetben,
Nem hiszem, hogy változott volna meg.
>> TOMAS REIMERS: Ha még mit mondott?
Bocsánat.
>> ALLISON Buchholtz-AU: Ha feladatot, akkor ez kihűlni, majd
vizsgálja meg a dolgokat ki külön, lenne az azonos, valójában.
>> TOMAS REIMERS: Tehát nem lenne.
>> ALLISON Buchholtz-AU: meg nem?
Ó, hát igen.
Tévedek.
>> TOMAS REIMERS: Tehát az ok ez different-- közös mistake--
az, hogy most csak a láncszemnek hűvös, ugye?
Azt hiszem, a kérdés, hogy a srácok is, mi ezen az oldalon párosul .cool?
Két címkék itt, ugye?
Melyik ez az egy és ez az egy.
Mindkét egyezik cool.
Semmi sem változott.
Tehát, ha azt mondta, .cool, a tér, .special, mit fogsz mondani,
belül ezeket a címkéket, mi a különleges?
ALLISON Buchholtz-AU: Hm.
Ez az, amit it-- jogot.
Mert ez olyan, mint most itt valami.
>> TOMAS REIMERS: Így kiválasztja semmit.
>> ALLISON Buchholtz-AU: mivel a Különleges vagyunk ezekben a címkék itt.
>> TOMAS REIMERS: Azok, valamint azoknak.
Közönség: OK.
Tehát azok a címkéket a perjel?
>> TOMAS REIMERS: Igen.
Van ennek értelme?
Hogyan ez alapvetően próbál szűk körben.
ALLISON Buchholtz-AU: Igen.
Azt hiszem, ez valószínűleg a legegyszerűbb módja annak, hogy gondolni.
>> TOMAS REIMERS: Így találtam rá erre, és találtuk ezt a két illesztett különleges.
És akkor kérünk belül ezek a srácok, mi a jó?
És ezen belül egy, ez hűvös.
Ezen belül az egyik, semmi sem jó.
Tehát ez az egyetlen tag marad.
>> ALLISON Buchholtz-AU: mivel hűvös csak ezen belül a címkék vannak.
TOMAS REIMERS: Pontosan.
És mi a különleges az említett?
Semmi.
Most, hogy mit fogok mondani, ha nem volt tér,
kérded, mi a jó és special-- vagy mi a szép és különleges, ugye?
Ha azt mondod .special.pretty, ez ugyanaz, mint a .pretty.special.
>> Mert ami eltávolítja a tér feltehet, amikor azt mondod .special,
kérsz, OK, melyek azok, amelyek különleges?
És akkor azok, amelyek szám is elég,
ami ugyanaz, nyelvtanilag, mivel arra kér, mi a szép,
majd azon, hogy mit is különleges?
Ugye?
Ez a különbség a mi belül mi.
Közönség: OK.
TOMAS REIMERS: Igen.
Félelmetes.
Így ezt szem előtt tartva then--
>> ALLISON Buchholtz-AU: Azt hiszem, az utolsó dolog (díszes brit akcentussal)
A doboz modell.
>> TOMAS REIMERS: A box-- [nevet] Imádom, ahogy Allison azt mondja, hogy.
Így a doboz modellt dolog.
>> ALLISON Buchholtz-AU: Just van egy doboz, én leszek a doboz modell.
TOMAS REIMERS: Szóval beszéljünk róla.
Akkor most mi már sokat időt beszélünk választók.
Mostanra, a srácok valószínűleg, mint, mesterei selectors-- tudod,
hogyan kell pontosan kijelöli a tartalmat, hogy azt szeretné, hogy manipulálják a képernyőn.
>> Tehát most az a kérdés, hogy hogyan Pontosan tudja manipulálni?
Szóval azt hiszem, a legalapvetőbb úgy is felfogható, hogy
van, nos, mi is pontosan egyik eleme a CSS?
Már töltött sok időt beszélünk, mi is az a tag,
vagy mi a legalapvetőbb ábrázolása egy tag?
>> Egy jó módja annak, hogy gondoljon azaz, hogy milyen állapotban van a lazac?
Milyen állapotban van, mint a lazacszínű háttérben?
>> Közönség: Ez egy téglalapot.
>> TOMAS REIMERS: Ez egy téglalapot, ugye?
>> ALLISON Buchholtz-AU: Nem volt egy trükkös kérdés.
[Nevetés]
>> TOMAS REIMERS: Nem próbál trükk, amit a srácok ilyen későn.
Így van ez a téglalap.
És a címke egy p, ugye?
Szóval ez ad nekünk jó hit, hogy a bekezdés
képviselteti magát, mint egy téglalap, a legalább az elme a böngésző, amely
ez.
>> ALLISON Buchholtz-AU: Úgy értem, böngészők jellemzően négyszögletű,
így van értelme.
>> TOMAS REIMERS: Itt az ötlet, hogy az összes címkét belül CSS
képviselteti magát, mint egy téglalap.
És minden téglalap négy részek szerint CSS, OK?
Megvan a tényleges tartalmat.
Ez az, ahol a szöveg rejlik.
>> ALLISON Buchholtz-AU: Lehet, hogy a kép.
>> TOMAS REIMERS: Igen.
Van padding, ami csak valami fehér térben.
Aztán van egy határ.
És akkor a ráta, amely fehér térben kívül, hogy.
Úgy, hogy nincs értelme senkinek, így vagyunk
fogok beszélni, hogy egy pillanatra.
Tehát itt van, mit fogunk csinálni a fogunk létrehozni néhány divs, OK?
Elnézést, miközben én--
>> ALLISON Buchholtz-AU: Úgy érzem, amit meg kell oldania egy aranyos képet.
>> TOMAS REIMERS: Azt mindenképpen kellene.
>> ALLISON Buchholtz-AU: Úgy érzem, mindenkinek
is részesülhetnek, aranyos kép, ez minden.
>> TOMAS REIMERS: Tudunk egyaránt előnyös a--
>> Közönség: Igen, persze.
TOMAS REIMERS: OK, hűvös.
Így kell tenni egy aranyos képet valahol.
ALLISON Buchholtz-AU: Úgy érzem, a aranyos nyuszi hasznos lehet most.
TOMAS REIMERS: Persze.
ALLISON Buchholtz-AU: A hét végére.
Van valami adorab--
>> TOMAS REIMERS: hogyan mérkőzés egy cica?
>> ALLISON Buchholtz-AU: A cica működik is.
>> TOMAS REIMERS: Cool, mert van egy telek, hogy.
Úgy hívják PlaceKitten.
ALLISON Buchholtz-AU: Ez nagyszerű.
TOMAS REIMERS: Igen.
ALLISON Buchholtz-AU: Just for hasonlóan, helykitöltő képek a honlapon.
TOMAS REIMERS: Mm-hm.
Van még PlacePuppy.
És ott van PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Tényleg?
>> TOMAS REIMERS: Ó, mi nem van internet-hozzáférés.
>> ALLISON Buchholtz-AU: [nyög]
Tragikus.
TOMAS REIMERS: Egyébként, Meg szeretném mutatni nektek
hogyan rakja képek a honlapon.
Megyünk, hogy próbálja meg ezt a munka előtt el kell mennünk.
De most, mi csak beszélni fog a színek akkor.
Azt akarjuk, hogy fel képeket a kittens--
>> ALLISON Buchholtz-AU: Megcsináltuk.
>> TOMAS REIMERS: --A internet le a pillanatban, hogy.
Tehát van két divs, és mi vagyunk fog nekik két azonosítókat.
Fogunk nevezni "Első" és "második".
Tehát id = "első".
És fogunk nekik két színben.
Szóval hogyan válassza ki valamit egy id "első"?
ALLISON Buchholtz-AU: Dot, vagy hash?
Közönség: Sharp.
TOMAS REIMERS: Sharp, tökéletes.
Sharp, hash, amit we--
>> ALLISON Buchholtz-AU: Sok mindenre nevezni.
>> TOMAS REIMERS: OK.
Fogunk rendezni hashtag, és ez az, amit meg fogunk menni.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS REIMERS: Tehát hashtag első.
>> ALLISON Buchholtz-AU: Tehát Akkor tweet az seminar--
hashtag CSS, hashtag cool.
TOMAS REIMERS: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, igen.
TOMAS REIMERS: OK.
Tehát van "első" és "második".
Tehát először fogunk van a háttér színe piros.
ALLISON Buchholtz-AU: Uh, vastagbél.
TOMAS REIMERS: Aha.
ALLISON Buchholtz-AU: Én leszek a spot-ellenőrző.
TOMAS REIMERS: Allison elkapott.
Background-color of blue--
>> TOMAS REIMERS: Purple!
>> TOMAS REIMERS: Purple.
ALLISON Buchholtz-AU: Igen.
Purple a kedvenc színem, és akkor még nem használtam még.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
Ez működik.
>> TOMAS REIMERS: így vagyunk megy, hogy két divs.
Mennek, hogy teljesen üres.
Meg kell valószínűleg valamilyen szöveget.
Tehát az "első" lesz "HELLO".
És a "második" lesz say--
>> ALLISON Buchholtz-AU: Goodbye.
>> Közönség: - "világban".
Helló, viszlát.
ALLISON Buchholtz-AU: Láttam őket koncerten a héten.
TOMAS REIMERS: The Beatles?
ALLISON Buchholtz-AU: A valós számok.
Ők nem olyan nagy.
Én nem szeretem.
>> TOMAS REIMERS: Van "Hello" és a "viszlát".
És ismét, CSS egyszerűen fantasztikus, mert felismeri a színeket.
Nem kell még attól tartanak, hogy léteznek.
Ők.
>> ALLISON Buchholtz-AU: léteznek.
>> TOMAS REIMERS: Szóval CSS Azt hiszem van 255 szót beszélni színe.
Ha ki tud találni egy színes külső azok, 255, mint én lesz ragadtatva.
ALLISON Buchholtz-AU: Igen.
Szerintem nektek is van csak jönnek után.
>> TOMAS REIMERS: Tehát itt, látni fogod, hogy van két doboz
közvetlenül egymás tetejére, ugye?
Hello, és viszlát.
>> ALLISON Buchholtz-AU: Nincs hely között.
Ők csak smooshed jobb tetején minden más.
>> TOMAS REIMERS: Tehát az első dolog, Azt hiszem, meg kell beszélni
van nézzük is say-- igen.
Tehát CSS őket, mint egyfajta dobozok.
És a dobozok, hogy van-tartalom.
És a tartalom most van valami A HELLO, vagy búcsú és ennyi.
OK?
>> Tehát az egyik első dolog, amit tehetünk, felveheti padding.
Padding mondja, hogy mennyi hely Nem hagyhat mindkét oldalon.
Tehát mondjuk azt akarom mondani, 10 pixel minden oldalon.
És én boncolgatni, hogy egy másodperc.
ALLISON Buchholtz-AU: Mindezek a dolgok itt
lesznek leginkább pixel A többi a szemináriumon.
Fogsz látni, hogy van Néhány körülötte, ugye?
Tehát mi nem látja itt van ez a láthatatlan valami padding
mindkét oldalán, amely azt mondja, szeret, OK, megvan a doboz content--
>> ALLISON Buchholtz-AU: Akarsz hogy csak húzza fel a Elem vizsgálata?
>> TOMAS REIMERS: Igen, ez egy jó ötlet.
ALLISON Buchholtz-AU: Azt is találni hogy az Elem vizsgálata egy jó módja
kitalálni, hogy ha valami megy rossz, valami váratlan történik,
ellenőrzésre a címkéket, és látta, hogy mi ez olyan, mint felülírt hasznos.
>> TOMAS REIMERS: Szóval nem vagyok benne biztos ha ti is látni ezt a színt.
Tud?
Látni fogod ezt a padding a fajta él.
És akkor lehet látni a tényleges tartalmat kék, ugye?
Szóval ez a nagyon alapjait a doboz modell.
Van tartalmát.
Akkor van padding.
>> Közönség: Miért nem csak használja a doboz belsejében a--
>> ALLISON Buchholtz-AU: Így van.
Mert ez csak kiválasztásával Az elem most.
>> TOMAS REIMERS: Aha.
Más dolog.
Szóval beszéljünk, hogy padding parancsot egy pillanatra.
Tehát a CSS, mérések szükség van egy egység.
Tehát először meg az összeget.
Tehát ebben az esetben, mindig azt mondták, 10.
És akkor a következő egy amit mondott, pixel, px.
Többinek lehet, hogy a dolgok, mint centiméter, hüvelyk.
Meg tudod csinálni a dolgokat, mint, mi 10 cm?
És ez lesz nevetséges.
>> ALLISON Buchholtz-AU: Oh, boy.
>> Közönség: Hűha.
>> TOMAS és Allison: Igen.
TOMAS REIMERS: Szóval ez minden padding.
Én megyek vissza képpont.
>> ALLISON Buchholtz-AU: Pixels általában, mint a standard.
Amikor ránézel egy csomó honlapok, Ezek többnyire dolgoznak pixel.
TOMAS REIMERS: Így fogsz látni vagy pixels-- más is látod
az em, ami az egyik em van egyenlő a magassága a betűtípus
Itt csak használ.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: Ez egy jó módja annak, hogy mondjam, mint szeretném annyi helyet, mint én font
van véve.
ALLISON Buchholtz-AU: Nem tudom, hogy.
Valami újat tanulni minden nap.
TOMAS REIMERS: Van Sok mérések CS.
Azt javaslom, nézz utána.
Mert minden esetben, azt hiszem, pixel elegendőnek kell lennie.
És ők is, mi fogsz látni
A legtöbb példa tenni az interneten.
Szóval majd hagyja azt képpont.
>> Azt is, azt kell say-- így padding-készletek minden paddings.
Azt is valami ilyesmit "Padding-top", hogy csak set--
ALLISON Buchholtz-AU: Talán mi lesz a "HELLO" vissza.
TOMAS REIMERS: --to csak meg a padding a tetején, és semmi más.
Így a négy parancsok padding-top, padding-bottom, padding-balra,
és padding-right.
>> ALLISON Buchholtz-AU: Akárcsak amit elvár egy dobozban.
>> TOMAS REIMERS: Igen.
Semmi sem túl őrült van.
Van ennek értelme?
Szóval ez padding.
Megyek be az összes A paddings vissza a 10.
És akkor fogok lépni a határt.
>> Tehát mi határ van határon egy furcsa parancsot.
Tart a fajta három dolgot egyszerre.
Szóval az első az, milyen nagy akarjuk, hogy legyen, mint a mérést.
Ismét én csak a pixel.
És az utolsó dolog, amit Hozzá kell mérések
az egyetlen dolog, ami nem kell egy egység 0.
Ez valójában helytelen hogy 0 egység,
mert a 0 = 0 egész hüvelyk, pixel, centiméter, mindegy.
Ez az egész csak azt jelenti, 0, ugye?
Tehát először ad ez a mérés.
>> Akkor add a stílus.
Így fogok mondani, hogy "szilárd".
És fogunk beszélni, hogy ez mit jelent.
És akkor végül, adsz neki egy színt.
Így fogok mondani, hogy "fekete".
És ezek mind olyan dolgok voltunk Most látott, kivéve a stílus,
de majd beszélni.
Szóval ti láttam mérések, És láttad, hogy a színek.
És mi történik, megkapjuk ezt Jó körüli fekete keret, igaz?
Látjátok, hogyan csinálta?
>> Közönség: Igen.
>> TOMAS REIMERS: Cool.
Szóval mi ez?
Tehát először is, ez az egyik pixel.
Ez magától értetődő, nemdebár?
Tetszik, ez az egyik pixel vastag.
Vagy ez lenne az egyik pixel, de én vagyok nagyított, így ez egy kicsit
annál.
>> ALLISON Buchholtz-AU: És mi van ez a nevetséges felbontású TV.
>> TOMAS REIMERS: Igen.
Akkor lehet, hogy nagyobb, kisebb, mindegy.
Tehát itt egy két pixel határon.
Látni fogod, hogy kétszer olyan vastag.
Következő dolog van a szín.
Ez nem érdekes.
Nem fogok beszélni arról, tényleg.
>> ALLISON Buchholtz-AU: De a stílus Lehet, hogy csak egy kicsit érdekes.
>> TOMAS REIMERS: Igen.
Tehát stílus, kevés is hogy látom általánosan használtak.
Először egy szolid, jövő ember pontozott, és az utolsó ember szaggatott.
És itt tarkítják.
Látni fogod, hogy ők egy csomó pontok, ugye?
Egy jó módja annak, hogy egyfajta kap egy szép határon megy, kötőjel is elég népszerű.
>> ALLISON Buchholtz-AU: És persze, én vagyok
arról van sok más stílusok, hogy lehet kapni.
És van egy nagy sor linkek végén a srácok
hogy milyen elolvassa és nézd meg még jó CSS.
>> TOMAS REIMERS: És akkor Az utolsó dolog, mi vagyunk
fog beszélni a box modell gyorsan.
Ja, majd határ, pontosan olyan, mint a zsákot,
Önnek is hasonló dolog van border-bal, border-jobb, border-top,
border-bottom, amely lehetővé teszi, hogy egy adott határon.
Tehát itt csak a szegély bal meghatározott.
Van ennek értelme?
>> ALLISON Buchholtz-AU: Ez egy jó módja annak, hogy hangsúlyozzák a dolgokat, vagy adjunk
vonalak különböző elemek között.
TOMAS REIMERS: Abszolút.
Szóval ez a határ.
És az utolsó árrése.
Margin mint a padding Kivéve, hogy nem within--
ALLISON Buchholtz-AU: Ez Nem körül elem
de valójában körül az egész box, hogy mi már látni.
>> TOMAS REIMERS: Igen.
Allison mondta, hogy tökéletesen.
Ez nem, mint, belül a eleme, ez mintegy az egész dobozt.
Ez azt jelenti, ilyeneket háttérben nem vonatkoznak rá.
És ez lényegében azt jelenti, szerű, nem akarok semmit
Ebben sok helyet nekem.
Szóval, mint itt van egy 10 pixeles margót.
Tehát semmi számított 10 pixel legyen mellettem.
Ez a fajta a teret, de a fajta nem.
Szóval ez a nagyon alapjait a doboz modell.
Van ennek értelme?
Hűvös, hideg.
ALLISON Buchholtz-AU: Awesome.
Tehát most azt hiszem épp most Megvan a hűvös erőforrások
hogy elviszlek srácok keresztül nagyon gyorsan.
És mi actually-- is, van még internet még?
>> TOMAS REIMERS: Nézzük hátha tudok megnyitni up--
hadd lássa, én kaphat internet gyorsan
míg Allison beszél másról, Allison akar beszélni.
ALLISON Buchholtz-AU: Tehát basically-- én nem
tudom, mi mást tudok mondani ezen a ponton.
De ezek egy része Nagyon jó források.
Ezek olyan is, hogy Tomas és én használtam
és hogy mi valójában használt felkészülni erre.
W3Schools az egyik, hogy Srácok, nem látott.
Ajánljuk a Sok dolgot CSS.
Tudom ajánlani tudom én részben minden alkalommal.
>> Az egyik legjobb dolog az, hogy lehetővé teszi, hogy egyfajta rendetlenség CSS
és látni a változásokat azonnal e,
mint a dupla-ablak nézet, hogy rendelkezik.
Szóval nem kell aggódni felállítása a saját weboldal,
vagy felállítása vhosthoz a helyi berendezésen és a helyi gépre,
és egyre minden ilyesmi munka.
Ez be van ágyazva a jobb oldalon belül.
>> És van ilyen kis tanulság, hogy tudsz
menjen át tanulni Többet választók,
vagy megismerhetik manipulálni a font, vagy a háttérben, vagy egy kép.
És akkor ezek a pillanatnyi eredményt, amit
Nem kell, hogy nem minden Más előkészítő munkát.
Szóval szeretem W3Schools.
Ez egyszerűen fantasztikus.
Működik?
>> TOMAS REIMERS: Igen.
Nem, nem az.
Akarod, hogy megpróbálja és indítsa újra a számítógépet?
Vagy akarunk to--
>> ALLISON Buchholtz-AU: Úgy értem, Nos, ez is az interneten.
Minden diák lesz online.
Szóval én csak nagyon ajánlom csinál ilyen.
>> Ez nagy, mint most mint egy puskát.
Ez csak az összes alapvető parancsokat, hogy van.
Jó, ha te vagy az első kezdik el a honlapon.
Mert talán nem szeretne bejutni az összes
az igazi tetves kavicsos tervezési-nehéz dolog.
Csak azt kell formázni, oly módon, ez a fajta van értelme és akarata
ezt egyelőre.
És ha igazán akar bejutni, tudom,
ez olyan, mint, az egyik Tomas kedvenc hivatkozásokat.
Voltunk használja, hogy prep, és ez mesés.
Ez a Developer a Mozilla.
>> TOMAS REIMERS: Tehát Mozilla Az emberek, akik Firefox.
És ez csak a saját fejlesztői hivatkozás, ami szerintem fantasztikus.
És van egy csodálatos milyen forrásokhoz.
Tehát have--
>> ALLISON Buchholtz-AU: És akkor az utolsó feljegyzés
ha akarsz a website design,
merítenek ihletet a dolgokat hogy úgy gondolja, elég.
Ellenőrzése az elem, ellenőrzésre a forráskód
lehet szuper hasznos hogy megpróbálta kitalálni,
hogyan stílus a saját honlapján.
>> Gyakran előfordul, hogy úgy érzem, a legjobb Így amellett, kísérletezés,
csak nézni dolgokat, amelyek elég.
Úgy vélem, hogy nagyon nehéz most fajta kialakítás a dolgokat a saját,
különösen az elején.
Ezért kérjük, nézd honlapok hogy örömmel nézi.
Kitalálni, mit tesz számukra vonzó az Ön számára.
És akkor nyugodtan megpróbálja lemásolni, hogy.
>> TOMAS REIMERS: Így van.
Még mint honlapok mint ez, akkor láthatjuk,
Van feltétlenül egy div tetején.
És akkor még egy div belül itt, ami CSS Awesomeness.
És akkor van egy csomó linket itt.
Ha tényleg csak ellenőrizni elemeket rendezheti a
kezdeni, hogy mit honlapok kinézni, és hogyan lehet
újra, hogy ha akartam.
Van ennek értelme?
Így csak három perc van hátra.
Tehát kérdése?
Minden közülük?
Igen.
>> Közönség: A színes téglalap, hogyan kíván
have--, ha nem akarja, megy az egész oldalt, lehetett
Sikerült menjen át csak Az oldal fele, vagy csak a szöveget?
>> TOMAS REIMERS: Igen, abszolút.
Szóval hadd lássam valójában.
Van két ötletet.
Tehát először is, akkor is használhatja százalékos.
>> Közönség: Tényleg?
>> ALLISON Buchholtz-AU: Tehát valami felnézni a relatív elhelyezése.
Ez valami olyasmi, amit nincs ideje, hogy bekerüljön,
de ez olyasmi, amit határozottan Javasoljuk, hogy a srácok megnézni.
>> TOMAS REIMERS: Tehát százalékos.
És látom, hogy megcsináltuk mindössze 50% a szélesség?
ALLISON Buchholtz-AU: Ha ténylegesen tudja a képpontok számát,
akkor pontosabb lehet, hogy így.
Akkor bajlódnia körül vele.
De 50%.
Ha volt, hogy átméretezni a böngészőt, ez teszi kisebb.
>> TOMAS REIMERS: Nos, ez Alapvetően 50% most, azt hiszem.
Ez 50%, majd a margin bővült, hogy.
CSS van egy csomó furcsa szokásai.
Szóval most ez 50% a lap szélességének.
De ne feledjük, hogy van 10 pixel levették, mindkét oldalról.
Így ha azt mozgatni, hogy ellen A bal szélén a böngészőt,
akkor úgy nézne ki 50%.
Ismét, mint mondtam, a CSS-t egy csomó találgatás és ellenőrzés.
Tetszik, úgy gondolja, valami fog viselkedni egy út,
de úgy viselkedik egy teljesen más módon.
>> ALLISON Buchholtz-AU: És ha csak kap okosabb,
és akkor csak kap egy jobb intuíció azt, ahogy mozognak.
>> TOMAS REIMERS: És ez rosszabb és rosszabb.
Szóval ez tényleg csak egy verseny.
>> ALLISON Buchholtz-AU: Ez szuper biztató.
Azt akarjuk, hogy CSS.
>> TOMAS REIMERS: CSS félelmetes.
Ne feledje, hogy.
Más kérdés?
>> ALLISON Buchholtz-AU: Az egy dolog.
Van még valami?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Hát, ha srácok bármilyen kérdése később,
mi mindig rendelkezésre, mint egy megszokott.
Akkor valószínűleg látni néhány közülünk végső projektek
és határozottan a hackathon.
>> TOMAS REIMERS: Abszolút.
És a vásáron.
>> ALLISON Buchholtz-AU: És a vásáron.
Oh.
>> TOMAS REIMERS: Várom, hogy látni az összes awesome--
>> ALLISON Buchholtz-AU: Meglátjuk Minden a félelmetes honlapok
hogy gyönyörű lesz.
TOMAS REIMERS: Bármikor lásd, mint a weboldalak
aki, mint a jó CSS ​​majd mint azok, akik nem próbálkozik CSS.
ALLISON Buchholtz-AU: Emellett egy másik a dolog, még egy dolog, hogy vizsgálja meg
a Bootstrapping.
Tehát Bootstrap nagyszerű.
>> TOMAS REIMERS: Google, hogy ha you--
>> ALLISON Buchholtz-AU: Google azt.
Ez egyszerűen fantasztikus.
Imádni fogod.
És most, hogy van egy alapvető ismereteket CSS,
ez lesz, hogy sokkal több értelme van.
Félelmetes.
Köszi, srácok.
>> TOMAS REIMERS: Köszönöm szépen.