>> [Hudba hrať]
ALLISON Buchholtz-AU: Tak sme v podstate len tak
vám dať námety CSS, pretože vieme,
že to nie sú zahrnuté vo všetkých sekciách.
A naozaj chceme, aby sa ubezpečil, že ste chlapci majú tento nástroj k dispozícii,
pretože má schopnosť robiť Vaše webové stránky vyzerajú oveľa krajšie.
>> A ak ste budovanie internetovej stránky, a potom pravdepodobne budete chcieť, aby to pekne.
Myslím, že nemusíte, ale ja by som to navrhnúť. [Smiech]
Ak chcete, aby užívatelia používať, môžete chcete, aby to trochu [nepočuteľné].
Takže budeme snažiť dať len niektoré základné nástroje a porozumenie,
tak, že keď idete von, a ty si skúma veci o CSS,
to nie je kompletný blábol, ako CSS niekedy byť.
>> TOMAS REIMERS: Jo.
Allison to povedal celkom dobre.
Takže myslím, že prvá vec, ktorú Začať by sa malo, je to, čo je CSS?
Takže CSS je úžasné.
CSS--
>> ALLISON Buchholtz-AU: To je názov nášho seminára.
>> TOMAS REIMERS: Jo.
Je naozaj dôležité, aby chápete, že do tej doby.
Ak máte len odniesť jedno vec, je to, že CSS, ak úžasné.
Two je CSS je skratka pre Kaskádové štýly.
Takže vo svojom jadre, CSS je štýlov, čo znamená,
to vám umožní štýl webovú stránku.
A potom, čo to znamená, že je spôsob, ako pridať štýl na vaše webové stránky.
Takže štýl, máme na mysli všetko to nie je structural--
takže veci ako farby, pozadie obrazy, hranice, rovnako ako, polstrovanie,
okraje.
Budeme hovoriť o tom, čo všetko znamená, že v trochu.
>> Takže sme proste šli dopredu a otvoril oba tieto v gedit.
Tak toto je index.html.
A to je main.css.
Takže main.css nemá nič.
ALLISON Buchholtz-AU: No štýl tak ďaleko.
TOMAS REIMERS: Žiadne.
A ako uvidíte, že je to naozaj škaredý miesto.
ALLISON Buchholtz-AU: Je to len obyčajný.
TOMAS REIMERS: Jo.
Jo, nie je to škaredé, je to len minimalistické.
A potom tu máme index.html.
A tak rýchlo rekapitulácia HTML, Allison,
chcete len hovoriť o stránke?
>> ALLISON Buchholtz-AU: Jo.
Tak samozrejme, máme HTML tag, ktorý práve mená HTML súboru.
Máme hlavičky tu, s CSS Awesomeness, which-- pokiaľ sa vrátiť.
Kde je to?
>> TOMAS REIMERS: Oh.
Jo, môžete vidieť.
ALLISON Buchholtz-AU: A všimnite si hlavičky
Je to karta hlavička až sem.
A potom "Hello, world!" je text, ktorý sme práve
zobrazenie na webe strana, ktorá je-- vrátiť.
Späť.
Čo je práve v našom tele here-- obyčajný text.
Tiež jedna vec Všimnite si, keď sa pozriete tu,
Tomas prešiel na tieto dvaja z nášho snímky.
Takže ak máte k dispozícii všetky Tri z nich, že si v poriadku.
Môžu byť v ľubovoľnom poradí chcú.
Čo je najdôležitejšie je práve to máte každý z týchto troch vecí.
>> TOMAS REIMERS: cool.
Pridať typu doc?
ALLISON Buchholtz-AU: Jo.
TOMAS REIMERS: Jo.
Super.
ALLISON Buchholtz-AU: Zdá sa, moja mikrofóny ma nemajú radi.
TOMAS REIMERS: Oh, dajte nám chvíľku len zatiaľ čo Allison prepne sa na jej mikrofón.
Tak jo.
Takže máme hlavnú stránku.
Je to trochu nestylované.
Nemáme moc.
Práve sme sa v podstate text.
Máme štýlov.
Máme titul.
Takže len holé kosti komponenty vytvoriť webové stránky.
>> Takže sa tam, poďme hovoriť o tom, čo je CSS
a ako to vyzerá, a to všetko.
Takže pre that--
ALLISON Buchholtz-AU: Späť na sklíčka.
TOMAS REIMERS: Späť na sklíčka.
A Allison môže prevziať.
>> ALLISON Buchholtz-AU: Woo.
OK.
Takže vo vašom súbore CSS, budeš mať
Mnoho z týchto vecí s názvom voliča.
To bude len Základom vášho súboru CSS.
Je to len bude veľa z nich.
Tak voliča.
To je len všeobecná anatómia.
Chystáme sa prejsť príklady, pretože ak vy nikdy
sledoval moju časť, mám pocit, ako veci v abstraktnej
nie je naozaj zmysel.
Je vždy pomôže vidieť príklady.
>> Takže máme nejaké voliča.
To bude nejaký identifikátor to, čo chceme, štýl aplikovať.
A potom môžeme mať akýkoľvek súbor pravidiel a hodnôt.
Takže voliča, že by ste mohli vidieť by mohlo byť niečo ako telo,
alebo odseku s P, alebo hlavičky, alebo čokoľvek,
čo chcete, aby vaše HTML tagy byť.
>> Takže v tomto prípade máme telo.
A máme nejaké pravidlo, čo zodpovedá
k čomu váš štýl sa týka.
Takže v tomto prípade máme farbu pozadia a hmotnosť font.
Tak to sa zmení pozadie čohokoľvek
v každom tele tagu nášho súboru HTML.
A že to bude dávať to táto svetlomodrá hodnota.
>> Takže to bude robiť pozadia svetlo modrá.
A potom sa niečo vo vnútri tela bude mať váhu písma odvážne.
Takže to len tak tučné všetky naše textu.
A to je len jeden volič.
Ale môžete mať veľmi veľa z nich.
A keď budeme ukázať neskôr, trochu viac o tom, ako
že práca a viac príkladov tam.
Čokoľvek chcete pridať?
>> TOMAS REIMERS: Nie.
Allison to mám.
My len tak rozrezať Príkladom Na našom príklade stránkach.
Tak si to vlastne vziať.
Je to perfektné.
Tak som len tak skopírovať a vložiť že priamo do nášho main.css súboru.
A ja ju uložiť.
A potom sme sa spustiť.
Takže okrajová poznámka, jeden z najviac frustrujúca vecí
je, ak nechcete uložiť súbor, a potom, rovnako ako, obnovte stránku
a podobne, prečo nie je Zmena sa deje?
To sa stáva.
Tak tu sme videli, že sme naše Webové stránky svetlo modré pozadie
a niektoré tučne textu.
>> Mal by som tiež spomenúť, ak máte chlapci majú otázky týkajúce sa čokoľvek
robíme, neváhajte sa nás zastaviť a opýtajte sa nás.
Sme úplne ochotní do poľa otázky.
>> ALLISON Buchholtz-AU: Je zrejmé, že sa CSS, všetko stavia na seba.
Takže ak jedna vec nie je zmysel teraz, my
nechceme, aby vás zaboriť neskôr.
>> TOMAS REIMERS: Tak poďme druh pitvať to.
Takže chcete začať s prepínačom tu?
>> ALLISON Buchholtz-AU: Jo.
Ako som hovoril predtým, telo je len naša voliča tu.
Takže keď sa vrátime na našu index-- Ah.
>> TOMAS REIMERS: Čo som proste zavrel.
Dajte mi chvíľku.
Takže Súbor, Otvoriť, index.html.
ALLISON Buchholtz-AU: cool.
Takže ak si všimnete tu, my majú tieto telesné značky, nie?
Takže volič práve odpovedá tagy, že hovoríme o.
Takže telo tu.
Takže to, čo hovoríme, je všechno-- sa môžeme vrátiť?
Želám si, aby som mohol ako sa dotknúť displeja.
Bolo by to oveľa chladnejšie.
>> V tých, ktoré tak niečo tagy tela, ktoré sme videli
bol len, ako, text, a telo všeobecne
sa týka, ako, pozadie.
Ak ste niekedy chceli, aby zmeniť pozadie,
že to bude v tagu body.
Len má tieto pravidlá, ktoré platia pre ne.
>> Takže ak by sme mali ísť do index.html a- v skutočnosti,
môžeme mať niečo mimo telo?
Ak by sme mali, ako, zápätie alebo niečo by sa nemala vzťahovať na to.
Ale niečo vo vnútri Tieto značky BODY sa deje
byť ovplyvnené týmto orgánom Volič, ktorý sme urobili.
Takže ak ste sa písať niečo iné there--
>> TOMAS REIMERS: Poďme drive, že domov.
Takže ak sme mali div-- tak to je len ďalší tag môžete mať.
Chystám sa ju zavrieť.
Alebo urobme to odsek.
Tak p znamená odseku.
A v tomto bode.
A potom som povedal: "To je text."
Super.
A potom som sa toto pravidlo platí pre bod miesto tela.
Uvidíte, ako sa to vzťahuje len na novovytvorený bod, vpravo,
nie celá vec.
Dáva to zmysel?
>> ALLISON Buchholtz-AU: Tak to je všetko telo,
ale teraz naše voliča len odpovedá odseku.
Takže sme proste odvážny a modrej pre tento konkrétny odseku,
pretože to je jediná vec, ktorý je uzavretý v tagu p.
>> TOMAS REIMERS: Dáva to zmysel triediť o tom, ako sa veci zapuzdrenie iných vecí?
ALLISON Buchholtz-AU: Tiež, rovnako hovoriť, ako, jeden z najlepších spôsobov, ako
naozaj zoznámiť sa tak s CSS Je jednoducho robiť veci, ako je toto,
proste to vyskúšať.
Je to veľmi jednoduché niečo písať out, hit Aktualizovať, a uvidíme, čo sa stane.
A ako u väčšiny SK, experimentovanie môže často
viesť k oveľa lepšej intuitívne porozumenie.
Ešte viac ako nás len, rád, hovorím s tebou.
>> TOMAS REIMERS: Rozhodne 100% sa zhodujú v tomto bode.
Takže keď sa vrátime k tomu, začnime pitevnej presne to, čo títo dvaja robia.
Takže máme dve pravidlá v tejto oblasti.
Takže prvá z nich je farba pozadia.
A vidíte, že sme sa nastaviť rovnajúcej sa hodnote, svetlo modré.
>> Takže v CSS, CSS je triediť veľmi voľne o tom, ako
máte možnosť definovať farbu.
Takže si môžete definovať podľa mena.
Môžete si tiež urobiť niečo ako "červená".
A potom, ak sa vrátime k tomu, uvidíte, že je pozadie červené.
Môžete tiež získať really-- Myslím si, že je dosť kreatívny s tým,
nie?
>> ALLISON Buchholtz-AU: I myslíte, že môžete použiť hex.
Nie?
>> TOMAS REIMERS: Jo.
Takže môžete použiť hex.
Ale ja si myslím name-múdry.
Nie sú tam?
ALLISON Buchholtz-AU: Môžete to urobiť celkom málo.
Skoro rovnako ako väčšina farieb, ktoré ste môže name-- rád, myslím, že losos je jeden.
>> TOMAS REIMERS: Budeme skúsiť lososa.
ALLISON Buchholtz-AU: I myslíte, že Chartreuse je tam.
TOMAS REIMERS: Jo.
Vidíš?
Takže si je dosť kreatívny.
>> ALLISON Buchholtz-AU: Vy mohol dostať docela kreatívne.
Ako, ak si môžete myslieť názov farby, je to asi tam.
Ak naozaj chcete v pohode detail, môžete ísť hex.
>> TOMAS REIMERS: Jo.
Tak šestnástkové.
Ak vy spomeniete, to späť zo starého pset, Image Obnoviť,
vy ste musel riešiť s týmito hex hodnotami.
A tak nejako zhrnúť, čo to je, hex má tri hodnoty uložené v ňom.
Takže je to v skupinách po dvoch krokoch.
Prvé dva predstavujú červený hodnotu.
Druhý predstavuje green hodnotu.
A posledná je modrá?
>> Takže FF stane reprezentovať hexadecimálny 255.
Máte teda 255 červená, 255 green, a 0 pre modrú.
A hodnoty sa pohybujú medzi 0 a 255.
>> Divákov: Right.
Takže v podstate by sme mohli hľadať internet pre akúkoľvek farbu chceme,
a identifikovať skutočne známy Farebné spektrum combo,
a potom by sme mohli dať do?
ALLISON Buchholtz-AU: Presne tak.
Máte teda skoro úplnú kontrolu cez farby chcete v CSS.
Budeme hovoriť o obrázky na pozadí neskôr?
Alebo chceme robiť, že?
>> TOMAS REIMERS: Jo.
Presne tak.
Takže prvé, aby ukázal, že červená a zelená je žltá.
A ak budete potrebovať nejaké pomoc pri hľadaní toho, vy
Môže Google niečo ako "výber farby."
ALLISON Buchholtz-AU: Oh, je to tak dobre.
Milujem Výber farby.
>> TOMAS REIMERS: colorpicker.com je toho dobrým príkladom.
A tu, uvidíte, že máte full Photoshop, ako výber farby.
>> ALLISON Buchholtz-AU: Mm-hm.
Tiež v pohode, čo ste môžu vytvárať farebné schéma
takže nemáte, ako nezlučiteľná farby.
TOMAS REIMERS: A potom tu je hexadecimálny hodnota tu hore.
Takže si môžete vždy nájsť na internete v podstate miesta na získanie hodnoty hex z.
Nie je to tak nejako, že rovnako, ako sme vidieť farby sveta v číslach.
Je to viac, že ​​sme ísť on-line a zistiť, aké farby chceme,
a potom sa číslo nadol.
Vzhľadom k tomu, že je to len rýchle spôsob, ako sa odkazovať na veci v CS.
>> ALLISON Buchholtz-AU: A potom je tu also--
Zabudol som presný názov webu.
Ale je tu určite, ja premýšľať, niečo od Adobe
ktorý generuje farebné schémy pre vás, čo je naozaj v pohode, pretože ste
definitely--, že je to niekedy ťažké prísť na to,
oh, ak chcem použiť túto farbu, čo by mohlo byť užitočné ďalšie jeden
použiť inde na svojom webe, rád, aby bolo pekné a súdržná.
>> TOMAS REIMERS: Allison je hovorí o jeden spoločností Adobe s názvom Kuler, myslím.
To je K-U-L-E-R.
ALLISON Buchholtz-AU: Myslím, že áno.
Som si istý, že je to jedno.
>> TOMAS REIMERS: Môj obľúbený má vždycky Farebná schéma Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Ktorá je now--
>> ALLISON Buchholtz-AU: Ach, to je nádhera.
>> TOMAS REIMERS: A vy možno v podstate povedať, rovnako ako,
Chcem tri farby vedľa seba.
A potom sa poďme urobiť niečo pekného.
A potom sa môžete dostať príklad na čo by to mohlo vyzerať.
A potom, ak podržíte nad žiadnym je, to vám dáva hodnotu hexadecimálne.
>> Takže len ako dobrý spôsob, ako začať premýšľať o farebných schém
alebo aké farby do webovej stránky môže ísť dobre dohromady.
Vzhľadom k tomu, že môže byť prekvapivo nie je tak jednoduché vybrať, ako si myslíte.
A potom ďalšie super vec Vždy som našiel o tomto webe
je, ak trafíte príklady, to bude Ukážte, čo príklad webové stránky
môže vyzerať ako pomocou tohto farebnej schémy.
Každopádne.
>> Späť na skutočné CSS.
ALLISON Buchholtz-AU: Ale samozrejme, my poznať tieto odkazy by mohli byť užitočné.
TOMAS REIMERS: Nie, oni Určite môže byť užitočný.
Takže druhé pravidlo, Allison?
>> ALLISON Buchholtz-AU: Jo.
Druhé pravidlo je jednoducho zodpovedá nášmu písmo.
Takže váha písmo je tak nejako of-- takže hmotnosť by
byť, ak chcete, rovnako, ako, normálne, alebo podobne, tenšie písma,
alebo v tomto prípade, rovnako ako, tučne.
Som zabudol.
Čo je to, ak ste chceli to-- je tam tenšie, než len ako normálne?
TOMAS REIMERS: nemám vlastne vedieť, či tam je tenší.
ALLISON Buchholtz-AU: Zabudol som.
Hmotnosť tak font sme typicky stačí použiť k tučným písmom.
Ak chcete naozaj do to, budeme vám ukázať.
W3Schools má všetky rôzne veci, ktoré môžete urobiť pre písma.
Ale v podstate, ak ste niekedy chceli nič meniť o písmo,
to vždy bude, ako, font-niečo.
Takže to bude podobne, font-family, ak ste sa snaží zmeniť aktuálny typ.
Bude to font-štýl, ak vás Chcete, aby sa to ako kurzívou,
alebo kurzíva, alebo ktovie čo ešte.
Alebo dokonca font-color, ak sme chceli zmeniť.
>> TOMAS REIMERS: Jo.
Takže si môžete zmeniť.
A tak nejako len preto, aby rekapitulácia teraz, takže môžete
vidieť, že máme volič tu.
Máme tieto zložené zátvorky.
A potom tu máme pravidlá oddelený bodkočiarkami.
Dáva to zmysel?
Jo?
Super.
Takže v prípade, že je good--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Poďme hovoriť konkrétne o aké voliča máme.
"Pretože teraz máme tak nejako jednoducho zobrazené značky.
Ale vy mohli vidieť to vierohodne.
Povedzme, že máte dva odseky na stránke a vy
Chcete mať možnosť štýlu jeden, ale nie druhej,
nemusíte len chcete obmedziť sami musieť používať rôzne skutočné HTML
tagy dať im rôzne štýly.
>> Takže máme tri základné typy selektorov.
ALLISON Buchholtz-AU: Jo.
Takže máme značku, čo je to, čo sme hovorili o práve teraz.
Takže to je niečo ako vaše telo alebo p.
A potom máme triedu, čo je keď sme to definovať, v našom súbore CSS,
to vždy bude bodka, bez ohľadu na Chcete názov vašej triedy byť.
A to sa môže týkať viac vecí.
>> Povedzme, že máte päť odsekov a dvaja z troch z nich
Treba štylizovaný rovnaké, by ste použiť triedu na neho.
A to je len spôsob, ako to urobiť.
Dáme vám príklad ak to naozaj ukáže.
Ale ak ste mali potrebné nejaký štítok p, po nej by píšete,
trieda sa rovná na akomkoľvek tried Ak chcete sa na neho vzťahujú.
Takže trieda voliča bez ohľadu na ktoré chceme aplikovať na tejto konkrétnej odseku,
by sme mohli len písať takhle.
Samozrejme, myslím si príklad bude oveľa konkrétnejšie.
>> Druhý máme je id, ktorý budeme označovať
s hash, alebo libru, alebo hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON Buchholtz-AU: Octothorpe.
To funguje, taky.
A to je potrebné byť naozaj jedinečná.
Mala by sa vzťahovať iba na Jedna vec na vašej stránke.
Takže nech už je to konkrétny bod, alebo nejaký predmet v zozname, alebo čokoľvek,
to by malo byť jedinečné.
A rovnakým spôsobom, ktorý sme práve hovoria, rovnako ako, class = "Class1 Class2,"
to môže byť len id všetkého, čo máme.
TOMAS REIMERS: Jo.
Takže poďme určite hovoriť o príklady tu.
A ja som jednoducho ísť do toho ponoriť rovno späť do kódu.
Takže poďme sa pozrieť na našu HTML.
A tak sme teraz mať jeden odsek.
To je textu.
Ja som jednoducho ísť na zmenu za to. "To je text, 1."
A potom budeme majú "To je text, 2."
>> ALLISON Buchholtz-AU: druhý.
TOMAS REIMERS: Jo.
Takže teraz máme "To je text, 2," že jo?
A budeme vidieť, že ak by sme preložiť stránka, čo budeme hľadať
ich budeme find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Jo.
Chystáme sa nájsť "To je Text 1 "a" To je text, 2. "
>> ALLISON Buchholtz-AU: A out krásna žltá farba.
>> TOMAS REIMERS: A uvidíte že našich voličov práve teraz,
ktorá sa vzťahuje na p je, alebo body, ovplyvňuje oba,
preto, že obaja spĺňajú podmienka, že sú obaja tag p.
To dáva zmysel.
Otázkou teda je, no, čo Ak by sme chceli dostať len jeden?
Tak presne tak, ako Allison hovoril, máme ďalšie dva spôsoby, ako to urobiť.
Chystám sa začať s id.
>> ALLISON Buchholtz-AU: Začnime s id.
>> TOMAS REIMERS: A obaja z nich sú atribúty.
Takže atribúty existujú v HTML.
A to, čo je, je niečo, čo pridať
vnútri značky, ktorá je oddelene od názvu značky.
Takže môžete mať viac atribútov.
Jo?
>> ALLISON Buchholtz-AU: Ja sa len tak povedať, z vášho príkladu z pset 7,
ak niekto z vás sa snaží zladiť veci do centra,
ste mohli využiť "Text align = centrum."
A vy ste si toho nevšimol asi mal stred
Váš text alebo navigačný panel.
Tak to je práve tiež atribút že by ste mohli byť oboznámení s.
TOMAS REIMERS: Je tu partia atribútov, ktoré uvidíte.
Jo.
Ako dobrý odkazom na pset 7.
Máme id.
Môžete tiež mať trieda, veci, ako je tento.
Jeden tag môže mať mnoho atribútov.
Takže počnúc id, poďme predstierať, že sme Chcete mať id of-- neviem.
Nazveme to zvláštne, pretože toto, sme
chystá urobiť odvážny, a zdôrazniť, a čokoľvek.
ALLISON Buchholtz-AU: Je to to bude super špeciálny.
TOMAS REIMERS: Tak toto jeden, máme id špeciál.
Takže spôsob, ako vybrať, potom je V main.css, skôr než mať značku p,
robíte #special, OK?
A že vyberie tá vec s id špeciál.
Má to zmysel pre každého?
Divákov: Áno.
TOMAS REIMERS: cool.
Takže teraz, ak sa vrátime, budeme see-- Ups.
Jo.
Uvidíme, že to len vyberá jedna s id špeciál.
Jo?
Znie to v pohode.
Áno.
>> Divákov: Môže niečo mať atribút ako triedy a id?
>> TOMAS REIMERS: Áno.
Divákov: OK.
A čo sa potom stane, keď potom dať to niektoré pravidlá CSS, že konflikt?
TOMAS REIMERS: Presne tak.
My určite o tom hovoriť.
Tak presne to, čo ste dostávali u, môžete mať aj triedy.
Takže poďme predstierať, že som mal tri odseky a ja
chcel štýl prvý dva, ale nie tretí.
No, vaša prvá myšlienka môže byť, no, ja mohol dať druhý id.
Ale nemôžeš, pretože id, presne tak, ako Allison hovoril,
musí byť jedinečné.
>> Takže namiesto toho, id, to, čo ste môžete použiť, je môžete použiť triedu.
A class-- aké to dovoľuje môžete urobiť, je v podstate hovoria,
to patrí ako súčasť skupiny.
V tomto prípade, sa naša skupina sa nazýva Special.
A to, čo budeme robiť, je potom budeme say-- skôr než libru,
budeme používať bodku.
OK?
A všimnite si, že libra a bodka existujú iba v súbore CSS,
nie sú v HTML.
ALLISON Buchholtz-AU: Áno.
Dôležitý rozdiel.
>> TOMAS REIMERS: Mám toľko boj,
preto, že som dal hash do HTML a potom už len cítil hlúpo na dlhú dobu.
Pozrite sa, ako to vyberá obaja tie s danou triedu?
Super.
>> Teraz, čo môže mať viac tried.
Povedzme, že som chcel, aby sa ako prvý dve majú zázemie žltý
a druhý dvaja majú font farba modrá.
OK.
Ja naozaj neviem, prečo by som sa mal chcem urobiť, ale môžem.
>> ALLISON Buchholtz-AU: nemusia odporúčaný pre vaše webové stránky.
Ale pre naše účely, bude to robiť.
>> TOMAS REIMERS: To nie je dobrý farebnú schému.
ALLISON Buchholtz-AU: No, žltý a modré sú mojej vysokej školy farby.
Ja neviem, ale.
TOMAS REIMERS: Allison je vysoká škola mala veľký farebnú schému.
[SMIECH]
Takže to, čo by sme mohli nazvať to je Hovorme tohle-- takže máme špeciálny
a máme Pretty.
Navrhujem, na to, môžete použiť oveľa viac opisná mená.
ALLISON Buchholtz-AU: Jo, ja by som Nazývam to, ako, žltej alebo modrej.
>> TOMAS REIMERS: Nie sme naozaj robiť skutočné webové stránky,
čo je dôvod, prečo sme nerobíme to.
Ale ak ste skutočne mal skutočnú webové stránky, môžete
môže mať, rovnako ako, článok hlavičky, Obsah článku, prvé slovo,
podobné veci, ktoré umožňujú aby si bol oveľa výstižnejší.
Sú to naozaj len ako premenné.
Mali by byť pomenované tak, kde môžete, like-- jo, ako taký.
Perfect.
>> Tak farbu pozadia.
A potom budeme say-- tak spôsob, ako zmeniť farbu, je jednoducho "farba".
A budeme robiť to modré.
To je v pohode.
Takže teraz máme Prvé dve majú zvláštne.
Ďalšie, kto to bude mať "class = pekná."
ALLISON Buchholtz-AU: A potom budete Ak chcete pridať "pekne" na strednej.
TOMAS REIMERS: Jo.
A potom do prostrednej, pridať "dosť", čo sa stane
ich stačí priestor.
Takže atribútu class je zoznam priestor oddelený
zo všetkých tried ktoré sa vzťahujú k tomuto tagu.
OK?
Nie je to ako tohle patrí k nejaký špeciálny triedu s názvom
"Zvláštne, vesmírnych, pekný."
Patrí k dvom classes-- zvláštne a dosť.
Ano?
Super.
>> A potom keď sa pozrieme na to, čo sa deje, sme
bude vidieť, že prvý, kto má žlté pozadie, čierny text.
Druhá one--
>> ALLISON Buchholtz-AU: --has bold žlté pozadie s modrým textom.
A naša posledná človek musí modrý text, ktorý sme priradili k nej.
>> TOMAS REIMERS: cool?
Ako selektory fungujú?
Desivý.
>> ALLISON Buchholtz-AU: Chceme hovoriť o konflikte teraz teda?
>> TOMAS REIMERS: Tak jo.
Presne tak.
Takže to, čo sa stane, keď vás majú konflikt, nie?
Predstavme si, že prvý nastaví niečo like--
ALLISON Buchholtz-AU: Možno, že tohle zmení pozadie?
TOMAS REIMERS: Jo.
Takže budeme robiť "pekne" zmeniť pozadie na lososa.
ALLISON Buchholtz-AU: Ste len s všetky veľké farby dnes, Tomas.
TOMAS REIMERS: Jo.
Pretože som zistil, že môžem použiť lososa ako skutočné farby.
Takže sme len robiť to.
Tiež si myslím, Sunset je skutočná farba.
Divákov: Sunset je skutočná farba?
ALLISON Buchholtz-AU: Skúsime to.
TOMAS REIMERS: Po tejto ukážke len preto, že v prípade, že skazí,
Nechcem byť ladenie.
Takže vieme, losos je skutočná farba.
Takže nejaké dohady o čo sa bude diať?
>> ALLISON Buchholtz-AU: Nejaký nápad?
>> Divákov: [nepočuteľné].
>> TOMAS REIMERS: Jo.
Takže si to mám úplne v poriadku.
V podstate, to trvá Posledné pravidlo, že to bolo dané.
>> ALLISON Buchholtz-AU: Tak toto je kde kaskádových nadobudne platnosť.
>> TOMAS REIMERS: Tak Pamätám si, ako sme sa mal ten kaskádových štýlov?
Takže to, že sme trochu na mysli že máme veľa pravidiel
ktoré sa uplatňujú na seba, a môžu tiež potlačiť navzájom.
>> ALLISON Buchholtz-AU: Tak čo je v spodnej časti
prepíše, čo je na vrchole.
Tie by mohli mať pravidlá, ktoré úplne negovať niečo vopred.
To je tiež dôvod, prečo chcete byť opatrní, keď ste styling,
takže nie ste vytvárať pravidlá, ktoré ste len celkom prevažujúci.
>> TOMAS REIMERS: Alebo možno budete chcem prepísať pravidlá.
>> ALLISON Buchholtz-AU: Alebo možno áno.
Áno.
>> TOMAS REIMERS: Predstav si, že máte trieda, ktorá sa vzťahuje na väčšinu vecí,
ale povedzme, že chcete zmeniť farba pozadia na červenú a písmo
hmotnosť bold pre väčšinu veci, ale pre jedného,
chcete len farbu pozadia byť červená, ale chcete, všetky ostatné
vlastnosti, si to mohol urobiť niečo ako "font-weight = normálny,"
ktorý by potom vrátiť túto odvážnu zmenu.
Jo?
Opäť platí, že najlepší spôsob, ako si myslím, že Allison povedal, že je len prax.
>> ALLISON Buchholtz-AU: experimentovanie.
>> TOMAS REIMERS: Prax, prax, praxe, a experiment.
Viem, že veľa ľudí, ktorí si myslia CSS je len veľa hádať-a-Check
Na konci dňa, ak je v prípade Ak chcete urobiť something-- rád,
máte približnú predstavu, ale stále pravdepodobne potrebovať
to vyskúšať, aby sa uistil, Viete, ako to vyzerá.
>> Divákov: Ak sa uchádzate triedy, viac než jedno
na rovnakom bode alebo sekcie, robí to
ohľadu na to, v akom poradí môžete zadajte ich do úvodzoviek?
>> TOMAS REIMERS: Nie, vôbec nie.
>> ALLISON Buchholtz-AU: Záleží na tom, objednávka priamo vo Vašom CSS štýlov.
Divákov: Mohli by ste zopakovať otázku?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: V triedy, keď dávate triedy
na niečo v HTML, robí záleží na tom, ktorý poradí, v akom sú v?
Nezáleží na tom, na objednávku.
Na čom záleží, je poradie trieda voličov vo vašej CSS,
priamo vo Vašom štýlov.
>> TOMAS REIMERS: Znie to dobre?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: A potom budeme pokračovať v to--
ALLISON Buchholtz-AU: Čo máme ďalej?
Som zabudol.
Oh, musíme len príklady.
Ale my sme trochu urobil ty.
Urobili sme príklady za chodu.
>> TOMAS REIMERS: Dostávame sa kombinovať selektorov čoskoro.
>> ALLISON Buchholtz-AU: Oh, dostaneme kombinovať selektorov.
TOMAS REIMERS: Tak trochu príklady ich máme
# Dog-- libra, alebo hashtag, alebo octothorpe, alebo čokoľvek
Ak chcete volať that-- ostré.
>> ALLISON Buchholtz-AU: Sharp pes.
>> TOMAS REIMERS: Potom máte .pets.
Niečo má id psa, je tu len jeden pes na stránke.
Niečo má id mačka, je tu len jedna mačka.
Tam môže byť veľa domácich zvierat na stránke.
To je dôvod, prečo sme dali, že tried.
Máte príklad s.
A potom, aby jeden z Posledný príklad, ktorý
je niečo, čo sme nehovorili o, je to, čo sa stane, keď ich budete kombinovať.
Tak p.pets.
>> Takže za to, vráťme sa do kód a zaviesť another-- jo.
Tak tu.
>> ALLISON Buchholtz-AU: I pocit, že je to really--
ako práve pozerá skrz príkladoch je skutočne spôsob, ako sa naučiť.
Tak to je to, čo robíme.
>> TOMAS REIMERS: Tak poďme predstierať, že sme len chcete vybrať text 2, nie?
Tak sme rozhodne nemôžeme tomu, že s id.
No, mohli by sme robiť, že sa id, ale to nemá ID.
Mohol by som pridať jeden, ale poďme predstierať že som nechcel pridať jednu
alebo to už má niečo iné.
Nemôžem to urobiť s tým.
Tag rozhodne nie je ojedinelý, že jo?
A ani je trieda.
Ale môžete kombinovať tieto veci.
Povedzme, že sme chceli urobiť niečo ktorá sa vzťahuje len na veci, ktoré
majú triedy špeciál a ktoré majú triedu dosť.
>> Takže to, čo môžete urobiť, je v main.css, môžete povedať, poďme najprv zmazať.
Môžete kombinovať tieto.
Takže si môžete urobiť Zvláštny.
No space.
Len .special.pretty.
Čo to znamená, že je niečo, čo čo je ako zvláštne a dosť.
Dáva to zmysel?
A keď pôjdeme sem, čo budete vidieť
je toto pravidlo platí len pre Druhý, ktorý má ako z nich.
A vy môžete urobiť, že na veľa vecí.
Môžete say-- poďme len predstierať, že som sa chcel
robiť veci, ktoré majú triedu pekný a ktoré sú tiež značka bod.
Tak p.pretty.
Poďme predstierať, že som mal niečo celkom na telo značky.
OK?
Môžem bežať a ja Je vidieť, že je to len
bude vzťahovať na veci, ktoré sú body s triedou pekné.
A môžete kombinovať tieto, v podstate, ako toľko, koľko chcete.
Takže si stačí dať ich dohromady.
Dáva to zmysel?
ALLISON Buchholtz-AU: Tak tento druh je oveľa užitočnejšie
kedy, Tomas hovoril skôr, možno Máte veľmi zložitý webové stránky,
a vy už máte veľa týchto pravidiel písaných,
a stačí kombinujú dva z predtým.
Ako miesto písania celok nových voličov a meniace sa to tam,
stačí skombinovať tam, kde sa prekrýva.
>> TOMAS REIMERS: Alebo Možno zistíte, out-- niekedy
je tu ešte jedna trieda, ktorá robí fontu farba ako modrá,
a je tu ďalšia trieda, ktorá robí pozadí modrej.
A to jednoducho nebude fungovať.
Takže si napísať osobitný prípad, kedy, like-- ale ak to má ako, to, čo ste
robiť, je budete , Aby to jeden tento odtieň modrej
a ten to ďalší odtieň modrej.
Je to tak?
>> ALLISON Buchholtz-AU: Dobrý pre tie druhy výnimiek.
TOMAS REIMERS: Tak, aby premýšľať o problémoch
ktoré by mohli nastať, keď je kombinovať.
Super.
Takže späť k našej prezentácii.
ALLISON Buchholtz-AU: Už sme skoro tam.
TOMAS REIMERS: A zastavil pripájanie.
ALLISON Buchholtz-AU: Oh, no.
ALLISON Buchholtz-AU: CS na kancelária, internet ide dole.
Oh, irónie.
>> TOMAS REIMERS: Takže našťastie môžeme predloží bez internetu, myslím,
pretože máme všetky zábery tu.
Takže poďme hovoriť o vzťah značiek.
ALLISON Buchholtz-AU: Right.
Takže len tak ísť off z toho, čo povedal Tomáš,
je to len iný spôsob, ako to urobiť.
Takže máme nejaký rodič volič s voličom dieťa.
Takže v tomto prípade tu máme nejaké Telo s triedou navigačné lišty, tlačidlá trieda.
Ah.
>> TOMAS REIMERS: Oh, prepáč.
>> ALLISON Buchholtz-AU: A v podstate, čo to znamená
je vybrať všetky deti, rovnako ako všetkých týchto druhov selektorov,
v tejto materskej voliča.
A to sú len tie, to niekedy bude aplikovať.
Ja neviem, či vás majú lepší spôsob of--
TOMAS REIMERS: Tak som Asi spôsob, ako myslieť
o tom je spomenúť skôr, ako my Niečo ako dať ich dohromady.
A potom to znamená, že jeden prvok čo zodpovedá všetky tieto.
Čo to hovorí je, že som Chcem, aby si, aby zodpovedali všetko
v some-- Chcem vám nájsť volič.
A potom v to, chcem vám, aby zodpovedali nové veci.
Je to tak?
Takže v CSS, je to všetko o trochu je schopný prispôsobiť tieto položky.
A môžete sa pokúsiť, aby zodpovedali položky v rámci inej položky.
>> Tak poďme vlastne robiť príklad, a myslíme si, že to objasniť.
Takže poďme predstierať, že máme zvláštne, špeciálna pekný, čokoľvek.
A potom máme odkaz, OK?
Takže pamätajte, že je spojenie.
Nie je to ísť kamkoľvek.
A budeme sa ho link trieda, myslím.
Poďme si dať na class-- mi nápad.
ALLISON Buchholtz-AU: cool.
TOMAS REIMERS: Coo-- poďme go to trieda celkom.
Prečo nie?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: Tak hneď teraz krásne veci
sa chystá urobiť pozadie modré, farba pozadia z lososa.
To dáva zmysel.
A ak budeme robiť tohle--
>> ALLISON Buchholtz-AU: Ak chcete pridať text,
takže hypertextový odkaz skutočne objaví?
TOMAS REIMERS: To by bolo dobré volanie.
ALLISON Buchholtz-AU: "Pretože pravý teraz sme len tak nedostanú nič.
TOMAS REIMERS: Tak toto je odkaz.
"To je spojenie."
Jo, a to sa deje byť ďalší odkaz.
Poďme dať triedu "cool".
Máš pravdu.
Super.
Takže teraz budeme chytiť to.
Budeme hodiť jeden.
Máme jeden v špeciálny tag, a my tiež
budú mať jeden v krásnej tagu.
A práve teraz, čo budeme urobiť, je budeme robiť cool--
čo chceme robiť?
ALLISON Buchholtz-AU: Môžeme to väčšie?
TOMAS REIMERS: Poďme dať mu hranice.
ALLISON Buchholtz-AU: Mohli by sme hranice.
TOMAS REIMERS: Jo.
Takže budeme robiť niečo ako, cezhraničná je-- a my sme
bude to vysvetliť všetko v sekunde.
Pre now--
>> ALLISON Buchholtz-AU: K modelu boxu.
TOMAS REIMERS: Ale teraz sme len tak, aby to hranice.
Takže to, čo to znamená, je, že ste uvidí tieto odkazy.
A budete vidieť, že majú Títo, ako škaredé čierne okraje, ktoré
je v pohode.
>> ALLISON Buchholtz-AU: Naše webové stránky je tak celkom.
>> TOMAS REIMERS: Jo.
Naše webové stránky sú úžasné.
Takže tieto dva sú odkazy, a oni sa objaví.
Teraz poďme predstierať, že Chcela to urobiť len
ak to nie je v niečom ktorý mal pozadie lososa.
Takže pamätajte, že tento má zázemie lososa,
preto, že je z triedy pekné.
>> Ale my chceme povedať, že iba ochladzuje ktoré sú v triede zvláštne, nie v triede
pekný, by mal mať túto hranicu.
No, čo môžete urobiť, je vás Dá sa povedať, Zvláštny, priestor, .cool.
A čo že to robí, keď si myslíte, o tom, je to v podstate hovorí,
OK, nájdi mi všetko ktorý zodpovedá zvláštne.
Potom sa v rámci týchto značiek, nájsť mi všetko, čo je v pohode.
ALLISON Buchholtz-AU: Tak iný spôsob, ako ktoré by mohli byť dobré premýšľať o tom,
uvedenie späť do C, je rovnako ako myšlienku rozsahu.
Takže keď budete mať nejaký Volič, ako tie,
že sme pracovali pre pred tým, Celá vaše webové stránky, všetky vaše HTML
je priamo vo Vašom rozsahu, že jo?
Ale keď máme tieto rodič-dieťa vzťahy,
Je to ako keby ste zúženie, kde hľadáte konkrétne miesto,
ako keď, ako, pozeráme do špecifickú funkciu, miesto
celej našej súboru.
Divákov: Tak s tým na mysli, by to záležalo, keby sme mali changed--
ALLISON Buchholtz-AU: Poradie?
Divákov: --the trieda v CSS k .cool, miesto, Zvláštny?
ALLISON Buchholtz-AU: Áno, pretože potom to
by sa povedať, priestor to Všetko, čo má v pohode,
a potom sa pozrite na to, čo has-- Myslím, že rovnako ako v tomto prípade,
Ja si nemyslím, že by to zmenil.
>> TOMAS REIMERS: Keby sme povedali to, čo?
Prepáčte.
>> ALLISON Buchholtz-AU: keby sme Rozsah vychladnúť a potom
pozrite sa na veci zo špeciálnej, to by bolo rovnaké, v skutočnosti.
>> TOMAS REIMERS: Takže by to nebolo.
>> ALLISON Buchholtz-AU: To by nie?
Oh, oh dobre.
Ja som zle.
>> TOMAS REIMERS: Takže dôvod to je different-- bežné mistake--
je, že práve teraz len link je v pohode, nie?
Myslím, že moja otázka na vás chalani, je, čo na tejto stránke je doplnená .cool?
K dispozícii sú dva tagy tu, nie?
Čo je to jedno a to jeden.
Obaja zápas v pohode.
Nič iné robí.
Takže ak ste povedal, .cool, miesto, Zvláštny, čo ste chcel povedať, je,
v rámci týchto značiek, čo je zvláštne?
ALLISON Buchholtz-AU: Hm.
To je to, čo to-- pravdu.
Vzhľadom k tomu, že je to, ako by to niečo, čo tu.
>> TOMAS REIMERS: Tak to vyberie nič.
>> ALLISON Buchholtz-AU: vzhľadom k tomu, s zvláštne, že sme v rámci týchto značiek tu.
>> TOMAS REIMERS: Ty a ty.
Divákov: OK.
Takže tí tagy z lomítkom?
>> TOMAS REIMERS: Áno.
Dáva to zmysel?
Ako je to v podstate sa snaží zúžiť rozsah.
ALLISON Buchholtz-AU: Jo.
Myslím si, že je to asi Najjednoduchší spôsob, ako o tom premýšľať.
>> TOMAS REIMERS: Tak sme našli, a sme našli obaja uzavreté zvláštne.
A potom sme sa pýtate, v rámci títo chlapci, čo je v pohode?
A v rámci tejto jednej, toto je v pohode.
V tomto druhom, nič to v pohode.
Tak toto je jediná značka, ktorá zostáva.
>> ALLISON Buchholtz-AU: vzhľadom k tomu, v pohode je práve v týchto niekoľkých tam značky.
TOMAS REIMERS: Presne tak.
A čo je zvláštne v nich?
Nič.
A teraz, čo poviem, je v prípade, že nebol žiadny priestor,
sa pýtate, čo je v pohode a special-- alebo to, čo je krásne a zvláštne, že jo?
Ak poviete .special.pretty, že je to rovnako ako .pretty.special.
>> Pretože to, čo odstráni priestor je pýta sa, keď hovoríte Zvláštny,
pýtate, OK, ktoré z nich sú zvláštne?
A potom sa z tých, ktoré z nich sú tiež dosť,
ktorý je rovnaký, gramaticky, ako žiadať o to, čo je dosť,
a potom z tých, čo je aj špeciálna?
Je to tak?
Je to rozdiel čo je vo vnútri, čo je.
Divákov: OK.
TOMAS REIMERS: Jo.
Desivý.
Takže s tým na mysli then--
>> ALLISON Buchholtz-AU: Myslím si, že naša posledná to je (v luxusnej britským prízvukom)
Model box.
>> TOMAS REIMERS: box-- [zasmeje sa] Milujem spôsob, akým Allison hovorí, že.
Takže na box modelu vec.
>> ALLISON Buchholtz-AU: Stačí sa box, budem váš model box.
TOMAS REIMERS: Tak poďme o tom hovoriť.
Takže teraz sme strávili veľa času hovorí o voliča.
Teraz, vy ste asi, ako, majstri selectors-- viete,
Ako presne vybrať obsah, ktorý Ak chcete manipulovať na obrazovke.
>> Takže teraz je otázka, ako presne ho manipulovať?
Takže myslím, že najzákladnejšie spôsob, ako premýšľať o tom
Je dobre, čo presne je element v CSS?
Sme strávili veľa času hovorí, čo je tag,
alebo to, čo je najzákladnejšie reprezentácie značku?
>> Dobrý spôsob, ako premýšľať o to znamená, že to, čo je tvar losos?
Aký tvar je, rovnako ako, losos-farebné pozadie?
>> Divákov: Je to obdĺžnik.
>> TOMAS REIMERS: Je to obdĺžnik, nie?
>> ALLISON Buchholtz-AU: Nebol chyták.
[SMIECH]
>> TOMAS REIMERS: Nesnaží prinútiť vás chlapci to neskoro.
Takže máme tento obdĺžnik.
A značka je p, že jo?
Tak, že nám dáva dobrý Viera, že bod
je reprezentovaný ako obdĺžnik, na aspoň v mysli prehliadača, ktorý
to je.
>> ALLISON Buchholtz-AU: Myslím, prehliadače sú zvyčajne obdĺžnikové,
tak to dáva zmysel.
>> TOMAS REIMERS: Nápad tu je že všetky značky v CSS
sú reprezentované ako obdĺžnik.
A každý obdĺžnik má štyri časti podľa CSS, OK?
Máte skutočný obsah.
To je miesto, kde sa text nachádza.
>> ALLISON Buchholtz-AU: Možno, že váš obrázok.
>> TOMAS REIMERS: Jo.
Máte polstrovanie, čo je len nejaká biele miesta.
Potom budete mať okraj.
A potom budete mať rezervu, ktorá je biely priestor mimo neho.
Takže nemá zmysel pre každého, takže sme
hovoriť o tom na chvíľu.
Tak tu, čo budeme robiť sa budeme vytvárať nejaké divy, OK?
Ospravedlňte ma, keď ja-
>> ALLISON Buchholtz-AU: pocit, že by som rád by sme mali dať roztomilý obrázok.
>> TOMAS REIMERS: Rozhodne sme mali.
>> ALLISON Buchholtz-AU: Mám pocit, že každý
by mohli ťažiť z roztomilý obrázok, to je všetko.
>> TOMAS REIMERS: Môžeme prospech z je--
>> Publikum: Áno, jasné.
TOMAS REIMERS: OK, v pohode.
Takže sme mali dať roztomilý obrázok niekam.
ALLISON Buchholtz-AU: Mám pocit, že roztomilý zajačik môže byť užitočné práve teraz.
TOMAS REIMERS: Iste.
ALLISON Buchholtz-AU: Koniec týždňa.
Mať niečo adorab--
>> TOMAS REIMERS: Ako zápas mačiatko?
>> ALLISON Buchholtz-AU: Mačiatko funguje, taky.
>> TOMAS REIMERS: Cool, pretože je tu miesto pre to.
Hovorí sa tomu PlaceKitten.
ALLISON Buchholtz-AU: To je skvelé.
TOMAS REIMERS: Áno.
ALLISON Buchholtz-AU: Len pre, ako, zástupné obrázky na svoje webové stránky.
TOMAS REIMERS: Mm-hm.
K dispozícii je tiež PlacePuppy.
A je tu PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Naozaj?
>> TOMAS REIMERS: Oh, my nie majú prístup k internetu tu.
>> ALLISON Buchholtz-AU: [narieka]
Tragický.
TOMAS REIMERS: V opačnom prípade, Chcel by som ukázať vám chlapci
ako dať obrázky na svoje webové stránky.
Budeme sa snažiť, aby si to práce, než budeme musieť ísť.
Ale teraz, sme len hovoriť v farbách tej doby.
Chceme dať fotky z kittens--
>> ALLISON Buchholtz-AU: sme urobili.
>> TOMAS REIMERS: --the internet je dole pre túto chvíľu je.
Takže máme dve divy, a my sme dám im dve ID.
Budeme ju nazývať "Prvý" a "druhej".
Takže id = "ako prvý."
A budeme sa im dve farby.
Tak ako sme sa vybrať niečo s id "prvý"?
ALLISON Buchholtz-AU: Dot alebo hash?
Divákov: Sharp.
TOMAS REIMERS: Sharp, perfektné.
Sharp, hash, bez ohľadu na we--
>> ALLISON Buchholtz-AU: Veľa vecí sa to nazvať.
>> TOMAS REIMERS: OK.
Budeme sa usadiť na hashtag, a to je to, čo sme ísť s.
OK?
>> ALLISON Buchholtz-AU: hashtag.
>> TOMAS REIMERS: Takže hashtag je prvý.
>> ALLISON Buchholtz-AU: Tak môžete tweet seminar--
hashtag CSS, hashtag v pohode.
TOMAS REIMERS: hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, áno.
TOMAS REIMERS: OK.
Takže máme "prvej" a "druhej".
Takže najprv, budeme mať Farba na červenom pozadí.
ALLISON Buchholtz-AU: Uh, hrubého čreva.
TOMAS REIMERS: Jo.
ALLISON Buchholtz-AU: Budem tvoj spot-checker.
TOMAS REIMERS: Allison to ma dostal.
Background-color of blue--
>> TOMAS REIMERS: Purple!
>> TOMAS REIMERS: Purple.
ALLISON Buchholtz-AU: Áno.
Purple moja obľúbená farba, a my sme nevyužili ešte.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
To funguje.
>> TOMAS REIMERS: Takže sme bude mať dva divy.
Sú to bude úplne prázdny.
Asi by sme mali mať nejaký text.
Takže "prvý" bude "HELLO".
A "druhý", bude say--
>> ALLISON Buchholtz-AU: Goodbye.
>> Divákov: - "WORLD".
Dobrý deň, zbohom.
ALLISON Buchholtz-AU: Videl som je v zhode druhý týždeň.
TOMAS REIMERS: The Beatles?
ALLISON Buchholtz-AU: pre reálnych čísel.
Sú to nie je tak veľký.
Nemám to rád.
>> TOMAS REIMERS: Máme "HELLO" a "Zbohom."
A opäť, CSS je jednoducho úžasné, preto, že uznáva naše farby.
Nemusíte sa ani obávať, že existujú.
Oni robia.
>> ALLISON Buchholtz-AU: existujú.
>> TOMAS REIMERS: Takže CSS Myslím si, že má 255 slov hovoriť o farbe.
Ak si myslíte, že na farby vonku tých 255, rovnako ako, budem dojem.
ALLISON Buchholtz-AU: Jo.
Myslím si, že chlapci môžu mať len prísť hneď po.
>> TOMAS REIMERS: Tak tu, uvidíte, máme dve krabice
priamo na seba, nie?
HELLO a zbohom.
>> ALLISON Buchholtz-AU: Neexistuje žiadny priestor medzi nimi.
Iba situovali priamo na seba.
>> TOMAS REIMERS: Takže prvá vec, ktorú Myslím, že by sme si mali pohovoriť o
je poďme tiež say-- jo.
Takže CSS predstavuje je ako druh krabíc.
A ako boxy, majú obsah.
A obsah práve teraz je trochu HELLO alebo na rozlúčku a to je všetko.
OK?
>> Takže jedným z prvých vecí, ktorú môžete urobiť, je môžete pridať polstrovanie.
Polstrovanie hovorí, ako veľký priestor mal by nechať na každej strane.
Tak povedzme, že chcem povedať 10 pixelov na každej strane.
A ja sa pitvať, že v druhom.
ALLISON Buchholtz-AU: Všetky tieto veci tu
sa bude hlavne v pixeloch pre zvyšok semináre.
Budeš vidieť, že to má nejaký priestor okolo nej, že jo?
Takže to, čo nechcete vidieť tú je tu táto neviditeľná druh čalúnenia
na každej strane, ktorý hovorí, rovnako ako, OK, máte box content--
>> ALLISON Buchholtz-AU: Chcete len vytiahnuť prehliadnuť prvok?
>> TOMAS REIMERS: Jo, to je dobrý nápad.
ALLISON Buchholtz-AU: Tiež som zistil, že kontrolovať element je dobrý spôsob, ako
zistiť, či sa niečo deje zle, sa stane niečo neočakávané,
kontrolu tagy a vidieť, čo Je to ako prepísanie je užitočné.
>> TOMAS REIMERS: Takže si nie som istý, ak vy môžete vidieť túto farbu.
Môžeš?
Uvidíte tento polstrovanie na druhu hrany.
A potom vidíte aktuálne Obsah v modrej, nie?
Tak to je veľmi základy modelu boxu.
Máš obsah.
Potom máte polstrovanie.
>> Divákov: Prečo nie len pomocou poľa vnútri the--
>> ALLISON Buchholtz-AU: Right.
Vzhľadom k tomu, je to len výber element práve teraz.
>> TOMAS REIMERS: Jo.
Ostatné veci.
Takže poďme sa o tom hovoriť Príkaz polstrovanie na sekundu.
Takže v CSS, meranie musí mať jednotku.
Takže najprv máte čiastku.
Takže v tomto prípade sme povedali 10.
A potom ten budúci sme si povedali, je pixelov px.
Ďalšie tie, ktoré by mohli mať sa veci, ako centimetroch, palcoch.
Môžete robiť veci páčia, to, čo je 10 palcov?
A to bude smiešne.
>> ALLISON Buchholtz-AU: Oh, chlapče.
>> Divákov: Whoa.
>> TOMAS A ALLISON: Jo.
TOMAS REIMERS: Tak to je všetko výplň.
Chystám sa vrátiť do pixelov.
>> ALLISON Buchholtz-AU: Pixels bývajú, rovnako ako, normy.
Keď sa pozriete na veľa webových stránok, väčšinou pracujú v pixeloch.
TOMAS REIMERS: Takže vy budete vidieť buď pixels-- tie ostatné, ktoré vidíte
je em, čo je jedna em je rovnajúcu sa výške písma
ktorý práve používate.
>> ALLISON Buchholtz-AU: MM.
TOMAS REIMERS: Je to dobrý spôsob, ako povedať, ako, chcem toľko miesta ako môj písmo
je brať.
ALLISON Buchholtz-AU: Nevedel som, že.
Naučíte sa niečo nové každý deň.
TOMAS REIMERS: Existuje Mnoho meraní v SK.
Odporúčam vám je vyhľadať.
Pre všetky vaše prípady, myslím, že pixelov by mala byť dostatočná.
A sú to tiež to, čo budete vidieť
vo väčšine príkladov, uzavretá on-line.
Tak sme to nechať na pixelov.
>> Môžete si tiež, mal by som say-- tak polstrovanie súpravy všetky z vypchávky.
Môžete si tiež urobiť niečo podobné "Padding-top" len set--
ALLISON Buchholtz-AU: Možno, že budeme si naše "ahoj" späť.
TOMAS REIMERS: --to stačí nastaviť polstrovanie na hornej a nič iného.
Takže štyri príkazy sú padding-top, padding-bottom, padding-vľavo,
a padding-right.
>> ALLISON Buchholtz-AU: Rovnako ako by ste očakávať, že pre krabice.
>> TOMAS REIMERS: Jo.
Nič tam taky blázon.
Dáva to zmysel?
Tak to je výplň.
Budem ak pre všetky na vypchávky späť na 10.
A potom budem pohybovať na hranici.
>> Takže to, čo je hranica je hranica je divný povel.
Trvá to akési tri veci naraz.
Takže prvá je, ako veľký ste chcem, aby to bolo ako meranie.
Opäť som iba pomocou pixelov.
A posledná vec, ktorú som mali pridať do merania
je jedna vec, ktorá nepotrebuje jednotku je 0.
Je to vlastne nesprávne dať 0 jednotky,
pretože je 0 0 cez palce, pixelov, centimetre, čokoľvek.
To všetko len znamená 0, je to tak?
Takže najprv sa mu dať merania.
>> Potom si to dať štýl.
Takže som chcel povedať, "pevné".
A budeme hovoriť o tom, čo to znamená.
A potom konečne, to vám dať farbu.
Takže som chcel povedať, "čierny".
A to sú všetko veci, ktoré sme teraz nevidel, s výnimkou pre štýl,
ale budeme o tom hovoriť.
Takže vy ste videli merania, a vy ste videli farby.
A čo sa stane, je, že sme si to pekné čierne rámček okolo nej, že jo?
Vy ste vidieť, ako sme to urobili, že?
>> Divákov: Áno.
>> TOMAS REIMERS: cool.
Takže to, čo je to?
Takže v prvom rade, je to jeden pixel.
To je evidentné dosť, nie?
Rovnako ako je to jeden pixel tučný.
Alebo to bude jeden pixel, ale ja som priblíženie, takže je to trochu viac
než to.
>> ALLISON Buchholtz-AU: A máme tento smiešny televízne rozlíšenie.
>> TOMAS REIMERS: Jo.
Môžete robiť to väčšie, menšie, čokoľvek.
Tak tu je dva-pixel hranice.
Uvidíte, že je to dvakrát tak silný.
Ďalšia vec, ktorú máme, je farba.
To nie je zaujímavé.
Nebudem hovoriť o tom, naozaj.
>> ALLISON Buchholtz-AU: Ale štýl môže byť len trochu zaujímavé.
>> TOMAS REIMERS: Jo.
Takže štýlu, sú tie málo že vidím bežne používa.
Prvý z nich je pevné, ďalší One bodkovaného, ​​a posledná je prerušovaný.
A tu je posiata.
Uvidíte, že sú banda bodiek, že jo?
Dobrý spôsob, ako sa trochu dostať pekný hranicu deje, pomlčky sú tiež docela populárne.
>> ALLISON Buchholtz-AU: A potom samozrejme, že som
si istý, že je veľa ďalšej štýly, ktoré môžete získať.
A máme veľkú sadu odkazy na konci pre vás
na druh prehliadnuť a pozrite sa na viac chladnom CSS.
>> TOMAS REIMERS: A potom posledná vec, my sme
hovoriť o box modely naozaj rýchlo.
Jo, a potom sa hranice, rovnako ako výplň,
Máte tiež veci ako border-left, border-right, border-top,
border-bottom, ktorý vám umožní aby sa v určitom hranicu.
Tak tu je to len border vľavo definované.
Má to zmysel?
>> ALLISON Buchholtz-AU: To je v pohode spôsob, ako zdôrazniť veci alebo pridať
čiary medzi rôznymi prvkami.
TOMAS REIMERS: Presne tak.
Tak to je naša hranica.
A posledná je marža.
Ako výplň Okraj okrem toho, že to nie je within--
ALLISON Buchholtz-AU: Je to Nie je asi svojom živle
ale v skutočnosti po celej box, že sme boli svedkami.
>> TOMAS REIMERS: Jo.
Allison povedal dokonale.
Nie je to, ako, vnútri prvok, to je po celom poli.
To znamená, že veci ako pozadie sa na neho nevzťahuje.
A to v podstate hovorí, ako, nechcem nič
V tomto veľa priestoru pre mňa.
Tak ako máme tu rozpätie 10 obrazových bodov.
Do 10 obrazových bodov Takže nič by mal byť vedľa mňa.
Je to druh jeho priestoru, ale trochu nie.
Tak to je veľmi základy modelu boxu.
Dáva to zmysel?
Cool, v pohode.
ALLISON Buchholtz-AU: Úžasné.
Takže teraz, že sme práve máme naše skvelé zdroje
že budeme trvať chlapci cez veľmi rýchlo.
A budeme actually-- dobre, máme ešte k internetu?
>> TOMAS REIMERS: Poďme zistiť, či môžem otvoriť up--
dovoľte mi, aby som zistil, či by som môže dostať na internet rýchlo
zatiaľ čo Allison hovorí o niečom Allison chce hovoriť.
ALLISON Buchholtz-AU: Tak basically-- nemám
viem, čo ešte môžem povedať, v tomto bode.
Ale to sú len niektoré naozaj dobré zdroje.
Sú to tie, ktoré Tomas a som použil
a že sme vlastne používa na prípravu pre toto.
W3Schools je ten, ktorý vás chlapci by sa nevideli.
Odporúčame pre Veľa vecí sa CSS.
Viem, že ju odporúčam môj úsek po celú dobu.
>> Jedným z veľkých vecí, je to tak vám umožní druhu si s CSS
a vidieť zmeny okamžite v tom,
ako, double-okno zobraziť, že to má.
Takže nemusíte mať strach o vytvorenie vlastnej webovej stránky,
alebo zriadenie vhost vo vašom miestne zariadenia a miestnej hostiteľ,
a ako sa všetky tie veci prácu.
To je zakotvený priamo v rámci stránky.
>> A to má táto málo lekcie, ktoré môžete
prejsť sa učiť Viac informácií o voliča,
alebo sa dozvedieť o manipulácii so font, alebo pozadia, alebo obraz.
A máte k dispozícii nasledujúce Okamžité výsledky, ktoré ste
Nemusíte robiť žiadne ďalšie prep práce pre.
Tak som rád W3Schools.
Je to báječné.
Funguje to?
>> TOMAS REIMERS: Jo.
Nie, to nie je.
Chceš, aby som to skúsiť a reštartovať počítač?
Alebo chceme to--
>> ALLISON Buchholtz-AU: Myslím, no, to bude aj on-line.
Všetky snímky budú online.
Tak som len vrelo odporúčam robiť to.
>> To je skvelé, ako len ako ťahák.
Je to všetko len základné príkazy, ktoré máte.
Je to skvelé, keď ste prvýkrát začína svoje webové stránky.
Vzhľadom k tomu, možno, že nie Chcete sa dostať do všetkých
real natvrdlý kostrbata Design ťažké veci.
Stačí len, aby ju naformátovať v ceste Tento druh má zmysel a vôľu
robiť v súčasnej dobe.
A ak naozaj chcete aby sa do nej dostať, ja viem,
to je, ako jeden z Tomas obľúbené odkazy.
Sme ho používate prep, a to je báječné.
To je pre vývojárov z Mozilly.
>> TOMAS REIMERS: Tak Mozilla sú ľudia, ktorí robia Firefox.
A to je len ich vlastné developer referencie, čo myslím, že je úžasné.
A to má nádherný zoznam zdrojov.
Tak sme have--
>> ALLISON Buchholtz-AU: A potom posledná poznámka
keď sa snažíte dizajn svojich webových stránok,
čerpať inšpiráciu z vecí že si myslíte, že sú dosť.
Kontrola prvok, kontrolu zdrojového kódu
môže byť super užitočný že sa snaží prísť na to,
ako na štýl svoje vlastné internetové stránky.
>> Často mám pocit, že najlepšie cesta, okrem experimentovanie,
Je len na pohľad veci, ktoré sú dosť.
Zistil som, že je to naozaj ťažké, aby práve druh navrhovať veci na vlastnú päsť,
najmä na začiatku.
Takže prosím, pozrite sa na webové stránky že si môžete vychutnať pri pohľade na.
Zistiť, čo robí je apelovať na vás.
A potom neváhajte pokúsiť sa zopakovať to.
>> TOMAS REIMERS: Right.
Dokonca aj ako webové stránky takto, môžete vidieť
tam je určite div hore.
A potom máte iný div vnútri tu, čo je CSS Awesomeness.
A potom máte veľa odkazov tu.
Ak ste naozaj len kontrolovať prvky, môžete tak nejako
začať vidieť, čo robiť webové stránky vyzerať, a ako môžem
znova, že keby som chcel.
Dáva to zmysel?
Takže máme len ľavej tri minúty.
Tak na niečo spýtať?
Niektorý z nich?
Áno.
>> Divákov: pre farbu obdĺžnik, ako by ste
have-- ak ste nechceli ju ísť cez celú stránku, mohol
Urobil si to ísť cez len polovica stránky, alebo len text?
>> TOMAS REIMERS: Jo, určite.
Tak sa ukážte v skutočnosti.
Mám dve myšlienky.
Takže v prvom rade, budete možno tiež použiť percent.
>> Divákov: Naozaj?
>> ALLISON Buchholtz-AU: Takže niečo vyhľadať je relatívna umiestnenie.
Je to niečo, čo sme nemajú čas sa dostať do,
ale je to niečo, čo som rozhodne Odporúčame mimo kontroly vy.
>> TOMAS REIMERS: So percenta.
A pozrite sa, ako sa nám to podarilo len 50% šírky?
ALLISON Buchholtz-AU: Ak sa vám skutočne poznať počet obrazových bodov,
si môžete byť presnejšie týmto spôsobom.
Môžete si hrať sa s ním.
Ale 50%.
Keď sme boli na veľkosť nášho prehliadača, to by bolo menšie.
>> TOMAS REIMERS: No, je to v podstate 50% práve teraz, myslím.
Je to o 50%, a potom marže bol pridaný k tomu.
CSS má veľa vtipov.
Takže teraz je to 50% šírky stránky.
Ale nezabudnite, že máte 10 pixelov odoberá z každej strany.
Takže ak ste mali navrhnúť, aby proti ľavý okraj prehliadača,
potom to bude vyzerať, ako 50%.
Opäť, rovnako ako som povedal, CSS byť veľa hádať-and-check.
Rovnako ako si myslíš, že sa niečo bude správať jedným smerom,
ale to sa chová úplne inak.
>> ALLISON Buchholtz-AU: A práve múdrejší,
a vy len získať lepší intuícia na to, ako budete pohybovať okolo.
>> TOMAS REIMERS: A dostane horšie a horšie.
Takže je to naozaj len závod.
>> ALLISON Buchholtz-AU: To je super povzbudivé.
Chceme, aby ako CSS.
>> TOMAS REIMERS: CSS je úžasné.
Pamätajte si, že.
Ďalšie otázky?
>> ALLISON Buchholtz-AU: jedna vec.
Ešte niečo?
Super.
>> TOMAS REIMERS: Úžasné.
>> ALLISON Buchholtz-AU: No, ak máte chlapci majú nejaké otázky neskôr,
sme vždy k dispozícii podľa zvyčajne.
Budete pravdepodobne vidieť niektoré z nás na záverečných prác
a rozhodne na hackathon.
>> TOMAS REIMERS: Presne tak.
A na veľtrhu.
>> ALLISON Buchholtz-AU: A na veľtrhu.
Oh.
>> TOMAS REIMERS: Môžete sa tešiť na vidieť všetky vaše awesome--
>> ALLISON Buchholtz-AU: Uvidíme všetky vaše úžasné webovej stránky
že bude krásne.
TOMAS REIMERS: môžete vždy vidieť, rovnako ako, webové stránky
kto mal, ako, dobrý CSS a potom rovnako ako tí, ktorí nemali snažiť urobiť CSS.
ALLISON Buchholtz-AU: Tiež ďalšie vec, jedna vec sa pozrieť do
je Bootstrapping.
Takže Bootstrap je skvelý.
>> TOMAS REIMERS: Google, že ak you--
>> ALLISON Buchholtz-AU: Google to.
Je to báječné.
Budete milovať.
A teraz, že ste základná znalosť CSS,
Bude to oveľa väčší zmysel.
Desivý.
Vďaka, chlapci.
>> TOMAS REIMERS: Ďakujem moc.