[Hudba hrát] ALLISON Buchholtz-AU: Tak jsme v podstatě jen tak vám dát náměty CSS, protože víme, že to nejsou zahrnuty ve všech sekcích. A opravdu chceme, aby se ujistil, že jste kluci mají tento nástroj k dispozici, protože má schopnost dělat Vaše webové stránky vypadají mnohem hezčí. 

A pokud jste budování internetové stránky, a pak pravděpodobně budete chtít, aby to pěkně. Myslím, že nemusíte, ale já bych to navrhnout. [Smích] Pokud chcete, aby uživatelé používat, můžete chcete, aby to trochu [neslyšitelné]. Takže budeme snažit dát jen některé základní nástroje a porozumění, tak, že když jdete ven, a ty jsi zkoumá věci o CSS, to není kompletní blábol, jako CSS někdy být. 

TOMAS REIMERS: Jo. Allison to řekl docela dobře. Takže myslím, že první věc, kterou Začít by se mělo, je to, co je CSS? Takže CSS je úžasné. CSS-- 

ALLISON Buchholtz-AU: To je název našeho semináře. 

TOMAS REIMERS: Jo. Je opravdu důležité, aby chápete, že do té doby. Máte-li jen odnést jedno věc, je to, že CSS, pokud úžasné. Two je CSS je zkratka pro Kaskádové styly. Takže ve svém jádru, CSS je stylů, což znamená, to vám umožní styl webovou stránku. A potom, co to znamená, že je způsob, jak přidat styl na vaše webové stránky. Takže styl, máme na mysli všechno to není structural-- takže věci jako barvy, pozadí obrazy, hranice, stejně jako, polstrování, okraje. Budeme mluvit o tom, co vše znamená, že v trochu. 

Takže jsme prostě šli dopředu a otevřel oba tyto v gedit. Tak tohle je index.html. A to je main.css. Takže main.css nemá nic. ALLISON Buchholtz-AU: No styl tak daleko. TOMAS REIMERS: Žádné. A jak uvidíte, že je to opravdu ošklivý místo. ALLISON Buchholtz-AU: Je to jen obyčejný. TOMAS REIMERS: Jo. Jo, není to ošklivé, je to jen minimalistické. A pak tady máme index.html. A tak rychle rekapitulace HTML, Allison, chcete jen mluvit o stránce? 

ALLISON Buchholtz-AU: Jo. Tak samozřejmě, máme HTML tag, který právě jména HTML souboru. Máme záhlaví tady, s CSS Awesomeness, which-- pokud se vrátit. Kde je to? 

TOMAS REIMERS: Oh. Jo, můžete vidět. ALLISON Buchholtz-AU: A všimněte si záhlaví Je to karta hlavička až sem. A pak "Hello, world!" je text, který jsme právě zobrazení na webu strana, která je-- vrátit. Zpět. Což je právě v našem těle here-- prostý text. Také jedna věc Všimněte si, když se podíváte tady, Tomas přešel na tyto dva z našeho snímku. Takže pokud máte k dispozici všechny Tři z nich, že jsi v pořádku. Mohou být v libovolném pořadí chtějí. Co je nejdůležitější je právě to máte každý z těchto tří věcí. 

TOMAS REIMERS: cool. Přidat typu doc? ALLISON Buchholtz-AU: Jo. TOMAS REIMERS: Jo. Super. ALLISON Buchholtz-AU: Zdá se, moje mikrofony mě nemají rádi. TOMAS REIMERS: Oh, dejte nám chvilku jen zatímco Allison přepne se na její mikrofon. Tak jo. Takže máme hlavní stránku. Je to trochu nestylované. Nemáme moc. Právě jsme se v podstatě text. Máme stylů. Máme titul. Takže jen holé kosti komponenty vytvořit webové stránky. 

Takže se tam, pojďme mluvit o tom, co je CSS a jak to vypadá, a to všechno. Takže pro that-- ALLISON Buchholtz-AU: Zpět na sklíčka. TOMAS REIMERS: Zpět na sklíčka. A Allison může převzít. 

ALLISON Buchholtz-AU: Woo. OK. Takže ve vašem souboru CSS, budeš mít Mnoho z těchto věcí s názvem voliče. To bude jen Základem vašeho souboru CSS. Je to jen bude spousta z nich. Tak voliče. To je jen obecná anatomie. Chystáme se projít příklady, protože pokud vy nikdy sledoval mou část, mám pocit, jako věci v abstraktní není opravdu smysl. Je vždy pomůže vidět příklady. 

Takže máme nějaké voliče. To bude nějaký identifikátor to, co chceme, styl aplikovat. A pak můžeme mít jakýkoli soubor pravidel a hodnot. Takže voliče, že byste mohli vidět by mohlo být něco jako tělo, nebo odstavce s P, nebo záhlaví, nebo cokoliv, co chcete, aby vaše HTML tagy být. 

Takže v tomto případě máme tělo. A máme nějaké pravidlo, což odpovídá k čemu váš styl se týká. Takže v tomto případě máme barvu pozadí a hmotnost font. Tak to se změní pozadí čehokoliv v každém těle tagu našeho souboru HTML. A že to bude dávat to tato světle modrá hodnota. 

Takže to bude dělat pozadí světle modrá. A pak se něco uvnitř těla bude mít váhu písma odvážné. Takže to jen tak tučné všechny naše textu. A to je jen jeden volič. Ale můžete mít velmi mnoho z nich. A když budeme ukázat později, trochu víc o tom, jak že práce a více příkladů tam. Cokoliv chcete přidat? 

TOMAS REIMERS: Ne. Allison to mám. My jen tak rozřezat Příkladem Na našem příkladu stránkách. Tak si to vlastně vzít. Je to perfektní. Tak jsem jen tak zkopírovat a vložit že přímo do našeho main.css souboru. A já ji uložit. A pak jsme se spustit. Takže okrajová poznámka, jeden z nejvíce frustrující věcí je, pokud nechcete uložit soubor, a pak, stejně jako, obnovte stránku a podobně, proč není Změna se děje? To se stává. Tak tady jsme viděli, že jsme naše Webové stránky světle modré pozadí a některé tučně textu. 

Měl bych také zmínit, pokud máte kluci mají dotazy týkající se cokoliv děláme, neváhejte se nás zastavit a zeptejte se nás. Jsme úplně ochotni do pole otázky. 

ALLISON Buchholtz-AU: Je zřejmé, že se CSS, vše staví na sebe. Takže pokud jedna věc není smysl teď, my nechceme, aby vás zabořit později. 

TOMAS REIMERS: Tak pojďme druh pitvat to. Takže chcete začít s přepínačem tady? 

ALLISON Buchholtz-AU: Jo. Jak jsem říkal předtím, tělo je jen naše voliče zde. Takže když se vrátíme na naši index-- Ah. 

TOMAS REIMERS: Což jsem prostě zavřel. Dejte mi chvilku. Takže Soubor, Otevřít, index.html. ALLISON Buchholtz-AU: cool. Takže pokud si všimnete tady, my mají tyto tělesné značky, ne? Takže volič právě odpovídá tagy, že mluvíme o. Takže tělo tady. Takže to, co říkáme, je všechno-- se můžeme vrátit? Přeji si, abych mohl jako se dotknout displeje. Bylo by to mnohem chladnější. 

V těch, které tak něco tagy těla, které jsme viděli byl jen, jako, text, a tělo obecně se týká, jako, pozadí. Pokud jste někdy chtěli, aby změnit pozadí, že to bude v tagu body. Jen má tato pravidla, která platí pro ně. 

Takže pokud bychom měli jít do index.html a- ve skutečnosti, můžeme mít něco mimo tělo? Pokud bychom měli, jako, zápatí nebo něco by se neměla vztahovat na to. Ale něco uvnitř Tyto značky BODY se děje být ovlivněny tímto orgánem Volič, který jsme udělali. Takže pokud jste se psát něco jiného there-- 

TOMAS REIMERS: Pojďme drive, že domov. Takže pokud jsme měli div-- tak to je jen další tag můžete mít. Chystám se ji zavřít. Nebo udělejme to odstavec. Tak p znamená odstavci. A v tomto bodě. A pak jsem řekl: "To je text." Super. A pak jsem se toto pravidlo platí pro bod místo těla. Uvidíte, jak se to vztahuje pouze na nově vytvořený bod, vpravo, ne celá věc. Dává to smysl? 

ALLISON Buchholtz-AU: Tak to je všechno tělo, ale teď naše voliče jen odpovídá odstavce. Takže jsme prostě odvážný a modré pro tento konkrétní odstavce, protože to je jediná věc, který je uzavřen v tagu p. 

TOMAS REIMERS: Dává to smysl třídit o tom, jak se věci zapouzdření jiných věcí? ALLISON Buchholtz-AU: Také, stejně říkat, jako, jeden z nejlepších způsobů, jak opravdu seznámit se tak s CSS Je prostě dělat věci, jako je toto, prostě to vyzkoušet. Je to velmi jednoduché něco psát out, hit Aktualizovat, a uvidíme, co se stane. A jako u většiny CS, experimentování může často vést k mnohem lepší intuitivní porozumění. Ještě víc než nás jen, rád, mluvím s tebou. 

TOMAS REIMERS: Rozhodně 100% se shodují v tomto bodě. Takže když se vrátíme k tomu, začněme pitevní přesně to, co tito dva dělají. Takže máme dvě pravidla v této oblasti. Takže první z nich je barva pozadí. A vidíte, že jsme se nastavit rovnající se hodnotě, světle modré. 

Takže v CSS, CSS je třídit velmi volně o tom, jak máte možnost definovat barvu. Takže si můžete definovat podle jména. Můžete si také udělat něco jako "červená". A pak, pokud se vrátíme k tomu, uvidíte, že je pozadí červené. Můžete také získat really-- Myslím si, že je dost kreativní s tím, ne? 

ALLISON Buchholtz-AU: I myslíte, že můžete použít hex. Ne? 

TOMAS REIMERS: Jo. Takže můžete použít hex. Ale já si myslím name-moudrý. Nejsou tam? ALLISON Buchholtz-AU: Můžete to udělat docela málo. Skoro stejně jako většina barev, které jste může name-- rád, myslím, že losos je jeden. 

TOMAS REIMERS: Budeme zkusit lososa. ALLISON Buchholtz-AU: I myslíte, že Chartreuse je tam. TOMAS REIMERS: Jo. Vidíš? Takže si je dost kreativní. 

ALLISON Buchholtz-AU: Vy mohl dostat docela kreativní. Jako, pokud si můžete myslet název barvy, je to asi tam. Pokud opravdu chcete v pohodě detail, můžete jít hex. 

TOMAS REIMERS: Jo. Tak šestnáctkové. Pokud vy vzpomenete, to zpátky ze starého pset, Image Obnovit, vy jste musel řešit s těmito hex hodnotami. A tak nějak shrnout, co to je, hex má tři hodnoty uložené v něm. Takže je to ve skupinách po dvou krocích. První dva představují červený hodnotu. Druhý představuje green hodnotu. A poslední je modrá? 

Takže FF stane reprezentovat hexadecimální 255. Máte tedy 255 červená, 255 green, a 0 pro modrou. A hodnoty se pohybují mezi 0 a 255. 

Diváků: Right. Takže v podstatě bychom mohli hledat internet pro jakoukoliv barvu chceme, a identifikovat skutečně známý Barevné spektrum combo, a pak bychom mohli dát do? ALLISON Buchholtz-AU: Přesně tak. Máte tedy skoro úplnou kontrolu přes barvy chcete v CSS. Budeme hovořit o obrázky na pozadí později? Nebo chceme dělat, že? 

TOMAS REIMERS: Jo. Přesně tak. Takže první, aby ukázal, že červená a zelená je žlutá. A pokud budete potřebovat nějaké pomoc při hledání toho, vy Může Google něco jako "výběr barvy." ALLISON Buchholtz-AU: Oh, je to tak dobře. Miluji Výběr barvy. 

TOMAS REIMERS: colorpicker.com je toho dobrým příkladem. A tady, uvidíte, že máte full Photoshop, jako výběr barvy. 

ALLISON Buchholtz-AU: Mm-hm. Také v pohodě, co jste mohou vytvářet barevné schéma takže nemáte, jako neslučitelná barvy. TOMAS REIMERS: A pak tady je hexadecimální hodnota tady nahoru. Takže si můžete vždy najít na internetu v podstatě místa k získání hodnoty hex z. Není to tak nějak, že stejně, jako jsme vidět barvy světa v číslech. Je to víc, že ​​jsme jít on-line a zjistit, jaké barvy chceme, a pak se číslo dolů. Vzhledem k tomu, že je to jen rychlé způsob, jak se odkazovat na věci v CS. 

ALLISON Buchholtz-AU: A pak je tu also-- Zapomněl jsem přesný název webu. Ale je tu určitě, já přemýšlet, něco od Adobe který generuje barevná schémata pro vás, což je opravdu v pohodě, protože jste definitely--, že je to někdy těžké přijít na to, oh, pokud chci použít tuto barvu, co by mohlo být užitečné další jeden použít jinde na svém webu, rád, aby bylo pěkné a soudržná. 

TOMAS REIMERS: Allison je mluví o jeden společností Adobe s názvem Kuler, myslím. To je K-U-L-E-R. ALLISON Buchholtz-AU: Myslím, že ano. Jsem si jistý, že je to jedno. 

TOMAS REIMERS: Můj oblíbený má vždycky Barevné schéma Designer. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS REIMERS: Která je now-- 

ALLISON Buchholtz-AU: Ach, to je nádhera. 

TOMAS REIMERS: A vy lze v podstatě říci, stejně jako, Chci tři barvy vedle sebe. A pak se pojďme udělat něco pěkného. A pak se můžete dostat příklad na co by to mohlo vypadat. A pak, pokud podržíte nad žádným je, to vám dává hodnotu hexadecimální. 

Takže jen jako dobrý způsob, jak začít přemýšlet o barevných schémat nebo jaké barvy do webové stránky může jít dobře dohromady. Vzhledem k tomu, že může být překvapivě není tak jednoduché vybrat, jak si myslíte. A pak další super věc Vždycky jsem našel o tomto webu je, pokud trefíte příklady, to bude Ukažte, co příklad webové stránky může vypadat jako pomocí tohoto barevného schématu. Každopádně. 

Zpět na skutečné CSS. ALLISON Buchholtz-AU: Ale samozřejmě, my znát tyto odkazy by mohly být užitečné. TOMAS REIMERS: Ne, oni Určitě může být užitečný. Takže druhé pravidlo, Allison? 

ALLISON Buchholtz-AU: Jo. Druhé pravidlo je prostě odpovídá našemu písmo. Takže váha písmo je tak nějak of-- takže hmotnost by být, pokud chcete, stejně, jako, normální, nebo podobně, tenčí písma, nebo v tomto případě, stejně jako, tučně. Jsem zapomněl. Co je to, pokud jste chtěli to-- je tam tenčí, než jen jako normální? TOMAS REIMERS: nemám vlastně vědět, jestli tam je tenčí. ALLISON Buchholtz-AU: Zapomněl jsem. Hmotnost tak font jsme typicky stačí použít k tučným písmem. Chcete-li opravdu do to, budeme vám ukázat. W3Schools má všechny různé věci, které můžete udělat pro písma. Ale v podstatě, pokud jste někdy chtěli nic měnit o písmo, to vždycky bude, jako, font-něco. Takže to bude podobně, font-family, pokud jste se snaží změnit aktuální typ. Bude to font-styl, pokud vás Chcete, aby se to jako kurzívou, nebo kurzíva, nebo kdoví co ještě. Nebo dokonce font-color, pokud jsme chtěli změnit. 

TOMAS REIMERS: Jo. Takže si můžete změnit. A tak nějak jen proto, aby rekapitulace teď, takže můžete vidět, že máme volič tady. Máme tyto složené závorky. A pak tu máme pravidla oddělený středníky. Dává to smysl? Jo? Super. Takže v případě, že je good-- 

ALLISON Buchholtz-AU: Back. TOMAS REIMERS: Pojďme mluvit konkrétně o jaké voliče máme. "Protože teď máme tak nějak prostě zobrazeny značky. Ale vy mohli vidět to věrohodně. Řekněme, že máte dva odstavce na stránce a vy Chcete mít možnost stylu jeden, ale ne druhé, nemusíte jen chcete omezit sami muset používat různé skutečné HTML tagy dát jim různé styly. 

Takže máme tři základní typy selektorů. ALLISON Buchholtz-AU: Jo. Takže máme značku, což je to, co jsme mluvili o právě teď. Takže to je něco jako vaše tělo nebo p. A pak máme třídu, což je když jsme to definovat, v našem souboru CSS, to vždycky bude tečka, bez ohledu na Chcete název vaší třídy být. A to se může týkat více věcí. 

Řekněme, že máte pět odstavců a dva ze tří z nich Je třeba stylizovaný stejné, byste použít třídu na něj. A to je jen způsob, jak to udělat. Dáme vám příklad pokud to opravdu ukáže. Ale pokud jste měli třeba nějaký štítek p, po ní by píšete, třída se rovná na jakémkoli tříd Chcete-li se na něj vztahují. Takže třída voliče bez ohledu na které chceme aplikovat na této konkrétní odstavce, bychom mohli jen psát takhle. Samozřejmě, myslím si příklad bude mnohem konkrétnější. 

Druhý máme je id, který budeme označovat s hash, nebo libru, nebo hashtag. TOMAS REIMERS: Octothorpe. ALLISON Buchholtz-AU: Octothorpe. To funguje, taky. A to je třeba být opravdu jedinečná. Měla by se vztahovat pouze na Jedna věc na vaší stránce. Takže ať už je to konkrétní bod, nebo nějaký předmět v seznamu, nebo cokoliv, to by mělo být jedinečné. A stejným způsobem, který jsme právě říkají, stejně jako, class = "Class1 class2," to může být jen id všeho, co máme. TOMAS REIMERS: Jo. Takže pojďme určitě mluvit o příklady zde. A já jsem prostě jít do toho ponořit rovnou zpátky do kódu. Takže pojďme se podívat na naši HTML. A tak jsme teď mít jeden odstavec. To je textu. Já jsem prostě jít na změnu za to. "To je text, 1." A pak budeme mají "To je text, 2." 

ALLISON Buchholtz-AU: druhý. TOMAS REIMERS: Jo. Takže nyní máme "To je text, 2," že jo? A budeme vidět, že pokud bychom přeložit stránka, co budeme hledat je budeme find-- ALLISON Buchholtz-AU: Ooh. TOMAS REIMERS: Jo. Chystáme se najít "To je Text 1 "a" To je text, 2. " 

ALLISON Buchholtz-AU: A out krásná žlutá barva. 

TOMAS REIMERS: A uvidíte že naše voliče právě teď, která se vztahuje na p je, nebo body, ovlivňuje oba, proto, že oba splňují podmínka, že jsou oba tag p. To dává smysl. Otázkou tedy je, no, co Pokud bychom chtěli dostat jen jeden? Tak přesně tak, jak Allison říkal, máme další dva způsoby, jak to udělat. Chystám se začít s id. 

ALLISON Buchholtz-AU: Začněme s id. 

TOMAS REIMERS: A oba z nich jsou atributy. Takže atributy existují v HTML. A to, co je, je něco, co přidat uvnitř značky, která je odděleně od názvu značky. Takže můžete mít více atributů. Jo? 

ALLISON Buchholtz-AU: Já se jen tak říci, z vašeho příkladu z pset 7, pokud někdo z vás se snaží sladit věci do centra, jste mohli využít "Text align = centrum." A vy jste si toho nevšiml asi měl střed Váš text nebo navigační panel. Tak to je právě také atribut že byste mohla být obeznámeni s. TOMAS REIMERS: Je tu parta atributů, které uvidíte. Jo. Jako dobrý odkazem na pset 7. Máme id. Můžete také mít třída, věci, jako je tento. Jeden tag může mít mnoho atributů. Takže počínaje id, pojďme předstírat, že jsme Chcete mít id of-- nevím. Nazveme to zvláštní, protože tohle, jsme chystá udělat odvážný, a zdůraznit, a cokoliv. ALLISON Buchholtz-AU: Je to to bude super speciální. TOMAS REIMERS: Tak tohle jeden, máme id speciál. Takže způsob, jak vybrat, pak je V main.css, spíše než mít značku p, děláte #special, OK? A že vybere ta věc s id speciál. Má to smysl pro každého? Diváků: Ano. TOMAS REIMERS: cool. Takže teď, pokud se vrátíme, budeme see-- Ups. Jo. Uvidíme, že to jen vybírá jedna s id speciál. Jo? Zní to v pohodě. Ano. 

Diváků: Může něco mít atribut jak třídy a id? 

TOMAS REIMERS: Ano. Diváků: OK. A co se pak stane, když pak dát to některá pravidla CSS, že konflikt? TOMAS REIMERS: Přesně tak. My určitě o tom mluvit. Tak přesně to, co jste dostávali u, můžete mít i třídy. Takže pojďme předstírat, že jsem měl tři odstavce a já chtěl styl první dva, ale ne třetí. No, vaše první myšlenka může být, no, já mohl dát druhý id. Ale nemůžeš, protože id, přesně tak, jak Allison říkal, musí být jedinečné. 

Takže místo toho, id, to, co jste můžete použít, je můžete použít třídu. A class-- jaké to dovoluje můžete udělat, je v podstatě říkají, to patří jako součást skupiny. V tomto případě, se naše skupina se nazývá Special. A to, co budeme dělat, je pak budeme say-- spíše než libru, budeme používat tečku. OK? A všimněte si, že libra a tečka existují pouze v souboru CSS, nejsou v HTML. ALLISON Buchholtz-AU: Ano. Důležitý rozdíl. 

TOMAS REIMERS: Mám tolik boj, proto, že jsem dal hash do HTML a pak už jen cítil hloupě na dlouhou dobu. Podívejte se, jak to vybírá oba ty s danou třídu? Super. 

Nyní, co může mít více tříd. Řekněme, že jsem chtěl, aby se jako první dvě mají zázemí žlutý a druhý dva mají font barva modrá. OK. Já opravdu nevím, proč bych se měl chci udělat, ale můžu. 

ALLISON Buchholtz-AU: nemusí doporučen pro vaše webové stránky. Ale pro naše účely, bude to dělat. 

TOMAS REIMERS: To není dobrý barevné schéma. ALLISON Buchholtz-AU: No, žlutý a modré jsou mé vysoké školy barvy. Já nevím, ale. TOMAS REIMERS: Allison je vysoká škola měla velký barevné schéma. [SMÍCH] Takže to, co bychom mohli nazvat to je Říkejme tohle-- takže máme speciální a máme Pretty. Navrhuji, na to, můžete použít mnohem více popisná jména. ALLISON Buchholtz-AU: Jo, já bych Nazývám to, jako, žluté nebo modré. 

TOMAS REIMERS: Nejsme opravdu dělat skutečné webové stránky, což je důvod, proč jsme neděláme to. Ale pokud jste skutečně měl skutečnou webové stránky, můžete může mít, stejně jako, článek záhlaví, Obsah článku, první slovo, podobné věci, které umožňují abys byl mnohem výstižnější. Jsou to opravdu jen jako proměnné. Měly by být pojmenovány tak, kde můžete, like-- jo, jako takový. Perfect. 

Tak barvu pozadí. A pak budeme say-- tak způsob, jak změnit barvu, je prostě "barva". A budeme dělat to modré. To je v pohodě. Takže teď máme První dvě mají zvláštní. Další, kdo to bude mít "class = hezká." ALLISON Buchholtz-AU: A pak budete Chcete-li přidat "pěkně" na střední. TOMAS REIMERS: Jo. A pak do prostřední, přidat "dost", co se stane je stačí prostor. Takže atributu class je seznam prostor oddělený ze všech tříd které se vztahují k tomuto tagu. OK? Není to jako tohle patří k nějaký speciální třídu s názvem "Zvláštní, vesmírných, pěkný." Patří ke dvěma classes-- zvláštní a dost. Ano? Super. 

A pak když se podíváme na to, co se děje, jsme bude vidět, že první, kdo má žluté pozadí, černý text. Druhá one-- 

ALLISON Buchholtz-AU: --has bold žluté pozadí s modrým textem. A naše poslední člověk musí modrý text, který jsme přiřadili k ní. 

TOMAS REIMERS: cool? Jak selektory fungují? Děsivý. 

ALLISON Buchholtz-AU: Chceme mluvit o konfliktu teď tedy? 

TOMAS REIMERS: Tak jo. Přesně tak. Takže to, co se stane, když vás mají konflikt, ne? Představme si, že první nastaví něco like-- ALLISON Buchholtz-AU: Možná, že tohle změní pozadí? TOMAS REIMERS: Jo. Takže budeme dělat "pěkně" změnit pozadí na lososa. ALLISON Buchholtz-AU: Jste jenom s všechny velké barvy dnes, Tomas. TOMAS REIMERS: Jo. Protože jsem zjistil, že mohu použít lososa jako skutečné barvy. Takže jsme jen dělat to. Také si myslím, Sunset je skutečná barva. Diváků: Sunset je skutečná barva? ALLISON Buchholtz-AU: Zkusíme to. TOMAS REIMERS: Po této ukázce jen proto, že v případě, že zkazí, Nechci být ladění. Takže víme, losos je skutečná barva. Takže nějaké dohady o co se bude dít? 

ALLISON Buchholtz-AU: Nějaký nápad? 

Diváků: [neslyšitelné]. 

TOMAS REIMERS: Jo. Takže si to mám úplně v pořádku. V podstatě, to trvá Poslední pravidlo, že to bylo dáno. 

ALLISON Buchholtz-AU: Tak tohle je kde kaskádových vstoupí v platnost. 

TOMAS REIMERS: Tak Pamatuji si, jak jsme se měl ten kaskádových stylů? Takže to, že jsme trochu na mysli že máme spoustu pravidel které se uplatňují na sebe, a mohou také potlačit navzájem. 

ALLISON Buchholtz-AU: Tak co je ve spodní části přepíše, co je na vrcholu. Ty by mohly mít pravidla, která zcela negovat něco předem. To je také důvod, proč chcete být opatrní, když jste styling, takže nejste vytvářet pravidla, která jste jen zcela převažující. 

TOMAS REIMERS: Nebo možná budete chci přepsat pravidla. 

ALLISON Buchholtz-AU: Nebo možná ano. Ano. 

TOMAS REIMERS: Představ si, že máte třída, která se vztahuje na většinu věcí, ale řekněme, že chcete změnit barva pozadí na červenou a písmo hmotnost bold pro většinu věci, ale pro jednoho, chcete pouze barvu pozadí být červená, ale chcete, všechny ostatní vlastnosti, jsi to mohl udělat něco jako "font-weight = normální," který by pak vrátit tuto odvážnou změnu. Jo? Opět platí, že nejlepší způsob, jak si myslím, že Allison řekl, že je jen praxe. 

ALLISON Buchholtz-AU: experimentování. 

TOMAS REIMERS: Praxe, praxe, praxe, a experiment. Vím, že hodně lidí, kteří si myslí CSS je jen hodně hádat-a-Check Na konci dne, je-li v případě Chcete-li udělat something-- rád, máte přibližnou představu, ale stále pravděpodobně potřebovat to vyzkoušet, aby se ujistil, Víte, jak to vypadá. 

Diváků: Pokud se ucházíte třídy, více než jedno na stejném bodě nebo sekce, dělá to ohledu na to, v jakém pořadí můžete zadejte je do uvozovek? 

TOMAS REIMERS: Ne, vůbec ne. 

ALLISON Buchholtz-AU: Záleží na tom, objednávka přímo ve Vašem CSS stylů. Diváků: Mohl byste zopakovat otázku? TOMAS REIMERS: Oh. ALLISON Buchholtz-AU: V třídy, když dáváte třídy na něco v HTML, dělá záleží na tom, který pořadí, v jakém jsou v? Nezáleží na tom, na objednávku. Na čem záleží, je pořadí třída voliče ve vaší CSS, přímo ve Vašem stylů. 

TOMAS REIMERS: Zní to dobře? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS REIMERS: A pak budeme pokračovat v to-- ALLISON Buchholtz-AU: Co máme dál? Jsem zapomněl. Oh, musíme jen příklady. Ale my jsme trochu udělal ty. Udělali jsme příklady za chodu. 

TOMAS REIMERS: Dostáváme se kombinovat selektorů brzy. 

ALLISON Buchholtz-AU: Oh, dostaneme kombinovat selektorů. TOMAS REIMERS: Tak trochu příklady je máme # Dog-- libra, nebo hashtag, nebo octothorpe, nebo cokoliv Chcete-li volat that-- ostré. 

ALLISON Buchholtz-AU: Sharp pes. 

TOMAS REIMERS: Pak máte .pets. Něco má id psa, je tu jen jeden pes na stránce. Něco má id kočka, je tu jen jedna kočka. Tam může být mnoho domácích zvířat na stránce. To je důvod, proč jsme dali, že tříd. Máte příklad s. A pak, aby jeden z Poslední příklad, který je něco, co jsme nemluvili o, je to, co se stane, když je budete kombinovat. Tak p.pets. 

Takže za to, vraťme se do kód a zavést another-- jo. Tak tady. 

ALLISON Buchholtz-AU: I pocit, že je to really-- jako právě dívá skrz příkladech je skutečně způsob, jak se naučit. Tak to je to, co děláme. 

TOMAS REIMERS: Tak pojďme předstírat, že jsme jen chcete vybrat text 2, ne? Tak jsme rozhodně nemůžeme tomu, že s id. No, mohli bychom dělat, že se id, ale to nemá ID. Mohl bych přidat jeden, ale pojďme předstírat že jsem nechtěl přidat jednu nebo to už má něco jiného. Nemohu to udělat s tím. Tag rozhodně není ojedinělý, že jo? A ani je třída. Ale můžete kombinovat tyto věci. Řekněme, že jsme chtěli udělat něco která se vztahuje pouze na věci, které mají třídy speciál a které mají třídu dost. 

Takže to, co můžete udělat, je v main.css, můžete říct, pojďme nejprve smazat. Můžete kombinovat tyto. Takže si můžete udělat .Zvláštní. No space. Jen .special.pretty. Co to znamená, že je něco, co což je jak zvláštní a dost. Dává to smysl? A když půjdeme sem, co budete vidět je toto pravidlo platí pouze pro Druhý, který má jak z nich. A vy můžete udělat, že na spoustu věcí. Můžete say-- pojďme jen předstírat, že jsem se chtěl dělat věci, které mají třídu pěkný a které jsou také značka bod. Tak p.pretty. Pojďme předstírat, že jsem měl něco docela na tělo značky. OK? Můžu běžet a já Je vidět, že je to jen bude vztahovat na věci, které jsou body s třídou pěkné. A můžete kombinovat tyto, v podstatě, jak tolik, kolik chcete. Takže si stačí dát je dohromady. Dává to smysl? ALLISON Buchholtz-AU: Tak tento druh je mnohem užitečnější kdy, Tomas říkal dříve, možná Máte velmi složitý webové stránky, a vy už máte hodně těchto pravidel psaných, a stačí kombinují dva z dříve. Jako místo psaní celek nové voliče a měnící se to tam, stačí zkombinovat tam, kde se překrývá. 

TOMAS REIMERS: Nebo Možná zjistíte, out-- někdy je tu ještě jedna třída, která dělá fontu barva jako modrá, a je tu další třída, která dělá pozadí modré. A to prostě nebude fungovat. Takže si napsat zvláštní případ, kdy, like-- ale pokud to má jak, to, co jste dělat, je budete , aby to jeden tento odstín modré a ten to další odstín modré. Je to tak? 

ALLISON Buchholtz-AU: Dobrý pro ty druhy výjimek. TOMAS REIMERS: Tak, aby přemýšlet o problémech které by mohly nastat, když je kombinovat. Super. Takže zpět k naší prezentaci. ALLISON Buchholtz-AU: Už jsme skoro tam. TOMAS REIMERS: A zastavil připojování. ALLISON Buchholtz-AU: Oh, no. ALLISON Buchholtz-AU: CS na kancelář, internet jde dolů. Oh, ironie. 

TOMAS REIMERS: Takže naštěstí můžeme předloží bez internetu, myslím, protože máme všechny snímky zde. Takže pojďme mluvit o vztah značek. ALLISON Buchholtz-AU: Right. Takže jen tak jít off z toho, co řekl Tomáš, je to jen jiný způsob, jak to udělat. Takže máme nějaký rodič volič s voličem dítě. Takže v tomto případě tady máme nějaké Tělo s třídou navigační lišty, tlačítka třída. Ah. 

TOMAS REIMERS: Oh, promiň. 

ALLISON Buchholtz-AU: A v podstatě, co to znamená je vybrat všechny děti, stejně jako všech těchto druhů selektorů, v této mateřské voliče. A to jsou jen ty, to někdy bude aplikovat. Já nevím, jestli vás mají lepší způsob of-- TOMAS REIMERS: Tak jsem Asi způsob, jak myslet o tom je vzpomenout dříve, jak my Něco jako dát je dohromady. A pak to znamená, že jeden prvek což odpovídá všechny tyto. Co to říká je, že jsem Chci, abys, aby odpovídaly všechno v some-- Chci vám najít volič. A pak v to, chci vám, aby odpovídaly nové věci. Je to tak? Takže v CSS, je to všechno o trochu je schopen přizpůsobit tyto položky. A můžete se pokusit, aby odpovídaly položky v rámci jiné položky. 

Tak pojďme vlastně dělat příklad, a myslíme si, že to vyjasnit. Takže pojďme předstírat, že máme zvláštní, speciální pěkný, cokoliv. A pak máme odkaz, OK? Takže pamatujte, že je spojení. Není to jít kamkoliv. A budeme se jej link třída, myslím. Pojďme si dát na class-- mi nápad. ALLISON Buchholtz-AU: cool. TOMAS REIMERS: Coo-- pojďme go to třída docela. Proč ne? 

ALLISON Buchholtz-AU: OK. TOMAS REIMERS: Tak hned teď krásné věci se chystá udělat pozadí modré, barva pozadí z lososa. To dává smysl. A pokud budeme dělat tohle-- 

ALLISON Buchholtz-AU: Chcete-li přidat text, takže hypertextový odkaz skutečně objeví? TOMAS REIMERS: To by bylo dobré volání. ALLISON Buchholtz-AU: "Protože pravý teď jsme jen tak nedostanou nic. TOMAS REIMERS: Tak tohle je odkaz. "To je spojení." Jo, a to se děje být další odkaz. Pojďme dát třídu "cool". Máš pravdu. Super. Takže teď budeme chytit to. Budeme hodit jeden. Máme jeden v speciální tag, a my také budou mít jeden v krásné tagu. A právě teď, co budeme udělat, je budeme dělat cool-- co chceme dělat? ALLISON Buchholtz-AU: Můžeme to větší? TOMAS REIMERS: Pojďme dát mu hranice. ALLISON Buchholtz-AU: Mohli bychom hranice. TOMAS REIMERS: Jo. Takže budeme dělat něco jako, přeshraniční je-- a my jsme bude to vysvětlit vše ve vteřině. Pro now-- 

ALLISON Buchholtz-AU: K modelu boxu. TOMAS REIMERS: Ale teď jsme jen tak, aby to hranice. Takže to, co to znamená, je, že jste uvidí tyto odkazy. A budete vidět, že mají Tito, jako ošklivé černé okraje, které je v pohodě. 

ALLISON Buchholtz-AU: Naše webové stránky je tak docela. 

TOMAS REIMERS: Jo. Naše webové stránky jsou úžasné. Takže tyto dva jsou odkazy, a oni se objeví. Nyní pojďme předstírat, že Chtěla to udělat jen pokud to není v něčem který měl pozadí lososa. Takže pamatujte, že tenhle má zázemí lososa, proto, že je z třídy hezké. 

Ale my chceme říci, že pouze ochlazuje které jsou ve třídě zvláštní, ne ve třídě pěkný, by měl mít tuto hranici. No, co můžete udělat, je vás Dá se říci, .Zvláštní, prostor, .cool. A co že to dělá, když si myslíte, o tom, je to v podstatě říká, OK, najdi mi vše který odpovídá zvláštní. Pak se v rámci těchto značek, najít mi všechno, co je v pohodě. ALLISON Buchholtz-AU: Tak jiný způsob, jak které by mohly být dobré přemýšlet o tom, uvedení zpět do C, je stejně jako myšlenku rozsahu. Takže když budete mít nějaký Volič, jako ty, že jsme pracovali pro před tím, Celá vaše webové stránky, všechny vaše HTML je přímo ve Vašem rozsahu, že jo? Ale když máme tyto rodič-dítě vztahy, Je to jako kdyby jste zúžení, kde hledáte konkrétní místo, jako když, jako, díváme do specifickou funkci, místo celé naší souboru. Diváků: Tak s tím na mysli, by to záleželo, kdybychom měli changed-- ALLISON Buchholtz-AU: Pořadí? Diváků: --the třída v CSS k .cool, místo, .Zvláštní? ALLISON Buchholtz-AU: Ano, protože pak to by se říci, prostor to Všechno, co má v pohodě, a pak se podívejte na to, co has-- Myslím, že stejně jako v tomto případě, Já si nemyslím, že by to změnil. 

TOMAS REIMERS: Kdybychom řekli to, co? Promiňte. 

ALLISON Buchholtz-AU: kdybychom Rozsah vychladnout a poté podívejte se na věci ze speciální, to by bylo stejné, ve skutečnosti. 

TOMAS REIMERS: Takže by to nebylo. 

ALLISON Buchholtz-AU: To by ne? Oh, oh dobře. Já jsem špatně. 

TOMAS REIMERS: Takže důvod to je different-- běžné mistake-- je, že právě teď jen link je v pohodě, ne? Myslím, že moje otázka na vás kluci, je, co na této stránce je doplněna .cool? K dispozici jsou dva tagy tady, ne? Což je to jedno a to jeden. Oba zápas v pohodě. Nic jiného dělá. Takže pokud jste řekl, .cool, místo, .Zvláštní, co jste chtěl říct, je, v rámci těchto značek, co je zvláštní? ALLISON Buchholtz-AU: Hm. To je to, co to-- pravdu. Vzhledem k tomu, že je to, jako by to něco, co zde. 

TOMAS REIMERS: Tak to vybere nic. 

ALLISON Buchholtz-AU: vzhledem k tomu, s zvláštní, že jsme v rámci těchto značek zde. 

TOMAS REIMERS: Ty a ty. Diváků: OK. Takže ti tagy z lomítkem? 

TOMAS REIMERS: Ano. Dává to smysl? Jak je to v podstatě se snaží zúžit rozsah. ALLISON Buchholtz-AU: Jo. Myslím si, že je to asi Nejjednodušší způsob, jak o tom přemýšlet. 

TOMAS REIMERS: Tak jsme našli, a jsme našli oba uzavřeno zvláštní. A pak jsme se ptáte, v rámci tihle kluci, co je v pohodě? A v rámci této jedné, tohle je v pohodě. V tomto druhém, nic to v pohodě. Tak tohle je jediná značka, která zůstává. 

ALLISON Buchholtz-AU: vzhledem k tomu, v pohodě je právě v těchto několika tam značky. TOMAS REIMERS: Přesně tak. A co je zvláštní v nich? Nic. A teď, co řeknu, je v případě, že nebyl žádný prostor, se ptáte, co je v pohodě a special-- nebo to, co je krásné a zvláštní, že jo? Pokud řeknete .special.pretty, že je to stejně jako .pretty.special. 

Protože to, co odstraní prostor je ptá se, když říkáte .Zvláštní, ptáte, OK, které z nich jsou zvláštní? A pak se z těch, které z nich jsou také dost, který je stejný, gramaticky, jak žádat o to, co je dost, a pak z těch, co je i speciální? Je to tak? Je to rozdíl co je uvnitř, co je. Diváků: OK. TOMAS REIMERS: Jo. Děsivý. Takže s tím na mysli then-- 

ALLISON Buchholtz-AU: Myslím si, že naše poslední to je (v luxusní britským přízvukem) Model box. 

TOMAS REIMERS: box-- [zasměje se] Miluji způsob, jakým Allison říká, že. Takže na box modelu věc. 

ALLISON Buchholtz-AU: Stačí se box, budu váš model box. TOMAS REIMERS: Tak pojďme o tom mluvit. Takže teď jsme strávili hodně času mluví o voliče. Nyní, vy jste asi, jako, mistři selectors-- víte, Jak přesně vybrat obsah, který Chcete-li manipulovat na obrazovce. 

Takže teď je otázka, jak přesně jej manipulovat? Takže myslím, že nejzákladnější způsob, jak přemýšlet o tom Je dobře, co přesně je element v CSS? Jsme strávili spoustu času mluví, co je tag, nebo to, co je nejzákladnější reprezentace značku? 

Dobrý způsob, jak přemýšlet o to znamená, že to, co je tvar losos? Jaký tvar je, stejně jako, losos-barevné pozadí? 

Diváků: Je to obdélník. 

TOMAS REIMERS: Je to obdélník, ne? 

ALLISON Buchholtz-AU: Nebyl chyták. [SMÍCH] 

TOMAS REIMERS: Nesnaží přimět vás kluci to pozdě. Takže máme tento obdélník. A značka je p, že jo? Tak, že nám dává dobrý Víra, že bod je reprezentován jako obdélník, na alespoň v mysli prohlížeče, který to je. 

ALLISON Buchholtz-AU: Myslím, prohlížeče jsou obvykle obdélníkové, tak to dává smysl. 

TOMAS REIMERS: Nápad tady je že všechny značky v CSS jsou reprezentovány jako obdélník. A každý obdélník má čtyři části podle CSS, OK? Máte skutečný obsah. To je místo, kde se text nachází. 

ALLISON Buchholtz-AU: Možná, že váš obrázek. 

TOMAS REIMERS: Jo. Máte polstrování, což je jen nějaká bílá místa. Pak budete mít okraj. A pak budete mít rezervu, která je bílý prostor mimo něj. Takže nemá smysl pro každého, takže jsme mluvit o tom na chvíli. Tak tady, co budeme dělat se budeme vytvářet nějaké divy, OK? Omluvte mě, když já- 

ALLISON Buchholtz-AU: pocit, že bych rád bychom měli dát roztomilý obrázek. 

TOMAS REIMERS: Rozhodně jsme měli. 

ALLISON Buchholtz-AU: Mám pocit, že každý by mohly těžit z roztomilý obrázek, to je všechno. 

TOMAS REIMERS: Můžeme prospěch z je-- 

Publikum: Jo, jasně. TOMAS REIMERS: OK, v pohodě. Takže jsme měli dát roztomilý obrázek někam. ALLISON Buchholtz-AU: Mám pocit, že roztomilý zajíček může být užitečné právě teď. TOMAS REIMERS: Jistě. ALLISON Buchholtz-AU: Konec týdne. Mít něco adorab-- 

TOMAS REIMERS: Jak zápas kotě? 

ALLISON Buchholtz-AU: Kotě funguje, taky. 

TOMAS REIMERS: Cool, protože je tu místo pro to. Říká se tomu PlaceKitten. ALLISON Buchholtz-AU: To je skvělé. TOMAS REIMERS: Ano. ALLISON Buchholtz-AU: Jen pro, jako, zástupné obrázky na své webové stránky. TOMAS REIMERS: Mm-hm. K dispozici je také PlacePuppy. A je tu PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Opravdu? 

TOMAS REIMERS: Oh, my ne mají přístup k internetu zde. 

ALLISON Buchholtz-AU: [naříká] Tragický. TOMAS REIMERS: V opačném případě, Chtěl bych ukázat vám kluci jak dát obrázky na své webové stránky. Budeme se snažit, aby si to práce, než budeme muset jít. Ale teď, jsme jen mluvit v barvách té doby. Chceme dát fotky z kittens-- 

ALLISON Buchholtz-AU: jsme udělali. 

TOMAS REIMERS: --the internet je dolů pro tuto chvíli je. Takže máme dvě divy, a my jsme dám jim dvě ID. Budeme ji nazývat "První" a "druhé". Takže id = "jako první." A budeme se jim dvě barvy. Tak jak jsme se vybrat něco s id "první"? ALLISON Buchholtz-AU: Dot nebo hash? Diváků: Sharp. TOMAS REIMERS: Sharp, perfektní. Sharp, hash, bez ohledu na we-- 

ALLISON Buchholtz-AU: Spousta věcí se to nazvat. 

TOMAS REIMERS: OK. Budeme se usadit na hashtag, a to je to, co jsme jít s. OK? 

ALLISON Buchholtz-AU: hashtag. 

TOMAS REIMERS: Takže hashtag je první. 

ALLISON Buchholtz-AU: Tak můžete tweet seminar-- hashtag CSS, hashtag v pohodě. TOMAS REIMERS: hashtag Awesomeness. ALLISON Buchholtz-AU: Hashtag Awesomeness, ano. TOMAS REIMERS: OK. Takže máme "první" a "druhé". Takže nejprve, budeme mít Barva na červeném pozadí. ALLISON Buchholtz-AU: Uh, tlustého střeva. TOMAS REIMERS: Jo. ALLISON Buchholtz-AU: Budu tvůj spot-checker. TOMAS REIMERS: Allison to mě dostal. Background-color of blue-- 

TOMAS REIMERS: Purple! 

TOMAS REIMERS: Purple. ALLISON Buchholtz-AU: Ano. Purple moje oblíbená barva, a my jsme nevyužili ještě. 

TOMAS REIMERS: Violet. ALLISON Buchholtz-AU: Violet. To funguje. 

TOMAS REIMERS: Takže jsme bude mít dva divy. Jsou to bude úplně prázdný. Asi bychom měli mít nějaký text. Takže "první" bude "HELLO". A "druhý", bude say-- 

ALLISON Buchholtz-AU: Goodbye. 

Diváků: - "WORLD". Dobrý den, sbohem. ALLISON Buchholtz-AU: Viděl jsem je ve shodě druhý týden. TOMAS REIMERS: The Beatles? ALLISON Buchholtz-AU: pro reálných čísel. Jsou to není tak velký. Nemám to rád. 

TOMAS REIMERS: Máme "HELLO" a "Sbohem." A opět, CSS je prostě úžasné, proto, že uznává naše barvy. Nemusíte se ani obávat, že existují. Oni dělají. 

ALLISON Buchholtz-AU: existují. 

TOMAS REIMERS: Takže CSS Myslím si, že má 255 slov mluvit o barvě. Pokud si myslíte, že na barvy venku těch 255, stejně jako, budu dojem. ALLISON Buchholtz-AU: Jo. Myslím si, že kluci mohou mít jen přijít hned po. 

TOMAS REIMERS: Tak tady, uvidíte, máme dvě krabice přímo na sebe, ne? HELLO a sbohem. 

ALLISON Buchholtz-AU: Neexistuje žádný prostor mezi nimi. Jenom situovali přímo na sebe. 

TOMAS REIMERS: Takže první věc, kterou Myslím, že bychom si měli promluvit o je pojďme také say-- jo. Takže CSS představuje je jako druh krabic. A jak boxy, mají obsah. A obsah právě teď je trochu HELLO nebo na rozloučenou a to je vše. OK? 

Takže jedním z prvních věcí, kterou můžete udělat, je můžete přidat polstrování. Polstrování říká, jak velký prostor měl by nechat na každé straně. Tak řekněme, že chci říct 10 pixelů na každé straně. A já se pitvat, že v druhém. ALLISON Buchholtz-AU: Všechny tyto věci zde se bude hlavně v pixelech pro zbytek semináře. Budeš vidět, že to má nějaký prostor kolem ní, že jo? Takže to, co nechcete vidět tu je tu tato neviditelná druh čalounění na každé straně, který říká, stejně jako, OK, máte box content-- 

ALLISON Buchholtz-AU: Chcete jen vytáhnout prohlédnout prvek? 

TOMAS REIMERS: Jo, to je dobrý nápad. ALLISON Buchholtz-AU: Také jsem zjistil, že kontrolovat element je dobrý způsob, jak zjistit, zda se něco děje špatně, se stane něco neočekávaného, kontrolu tagy a vidět, co Je to jako přepsání je užitečné. 

TOMAS REIMERS: Takže si nejsem jistý, jestliže vy můžete vidět tuto barvu. Můžeš? Uvidíte tento polstrování na druhu hrany. A pak vidíte aktuální Obsah v modré, ne? Tak to je velmi základy modelu boxu. Máš obsah. Pak máte polstrování. 

Diváků: Proč ne jen pomocí pole uvnitř the-- 

ALLISON Buchholtz-AU: Right. Vzhledem k tomu, je to jen výběr element právě teď. 

TOMAS REIMERS: Jo. Ostatní věci. Takže pojďme se o tom mluvit Příkaz polstrování na vteřinu. Takže v CSS, měření musí mít jednotku. Takže nejprve máte částku. Takže v tomto případě jsme řekli 10. A pak ten příští jsme si řekli, je pixelů px. Další ty, které by mohly mít se věci, jako centimetrech, palcích. Můžete dělat věci líbí, to, co je 10 palců? A to bude směšné. 

ALLISON Buchholtz-AU: Oh, chlapče. 

Diváků: Whoa. 

TOMAS A ALLISON: Jo. TOMAS REIMERS: Tak to je všechno výplň. Chystám se vrátit do pixelů. 

ALLISON Buchholtz-AU: Pixels bývají, stejně jako, normy. Když se podíváte na spoustu webových stránek, většinou pracují v pixelech. TOMAS REIMERS: Takže vy budete vidět buď pixels-- ty ostatní, které vidíte je em, což je jedna em je rovnající se výšce písma který právě používáte. 

ALLISON Buchholtz-AU: MM. TOMAS REIMERS: Je to dobrý způsob, jak říct, jako, chci tolik místa jako můj písmo je brát. ALLISON Buchholtz-AU: Nevěděl jsem, že. Naučíte se něco nového každý den. TOMAS REIMERS: Existuje Mnoho měření v CS. Doporučuji vám je vyhledat. Pro všechny vaše případy, myslím, že pixelů by měla být dostatečná. A jsou to také to, co budete vidět ve většině příkladů, uzavřená on-line. Tak jsme to nechat na pixelů. 

Můžete si také, měl bych say-- tak polstrování soupravy všechny z vycpávky. Můžete si také udělat něco podobného "Padding-top" jen set-- ALLISON Buchholtz-AU: Možná, že budeme si naše "ahoj" zpět. TOMAS REIMERS: --to stačí nastavit polstrování na horní a nic jiného. Takže čtyři příkazy jsou padding-top, padding-bottom, padding-vlevo, a padding-right. 

ALLISON Buchholtz-AU: Stejně jako byste očekávat, že pro krabice. 

TOMAS REIMERS: Jo. Nic tam taky blázen. Dává to smysl? Tak to je výplň. Budu-li pro všechny na vycpávky zpět na 10. A pak budu pohybovat na hranici. 

Takže to, co je hranice je hranice je divný povel. Trvá to jakési tři věci najednou. Takže první je, jak velký jste chci, aby to bylo jako měření. Opět jsem pouze pomocí pixelů. A poslední věc, kterou jsem měli přidat do měření je jedna věc, která nepotřebuje jednotku je 0. Je to vlastně nesprávné dát 0 jednotky, protože je 0 0 přes palce, pixelů, centimetry, cokoliv. To vše jen znamená 0, je to tak? Takže nejprve se mu dát měření. 

Pak si to dát styl. Takže jsem chtěl říct, "pevné". A budeme mluvit o tom, co to znamená. A pak konečně, to vám dát barvu. Takže jsem chtěl říct, "černý". A to jsou všechno věci, které jsme teď neviděl, s výjimkou pro styl, ale budeme o tom mluvit. Takže vy jste viděli měření, a vy jste viděli barvy. A co se stane, je, že jsme si to pěkné černé rámeček kolem ní, že jo? Vy jste vidět, jak jsme to udělali, že? 

Diváků: Ano. 

TOMAS REIMERS: cool. Takže to, co je to? Takže v první řadě, je to jeden pixel. To je evidentní dost, ne? Stejně jako je to jeden pixel tlustý. Nebo to bude jeden pixel, ale já jsem přiblížení, takže je to trochu víc než to. 

ALLISON Buchholtz-AU: A máme tento směšný televizní rozlišení. 

TOMAS REIMERS: Jo. Můžete dělat to větší, menší, cokoliv. Tak tady je dva-pixel hranice. Uvidíte, že je to dvakrát tak silný. Další věc, kterou máme, je barva. To není zajímavé. Nebudu mluvit o tom, opravdu. 

ALLISON Buchholtz-AU: Ale styl může být jen trochu zajímavé. 

TOMAS REIMERS: Jo. Takže stylu, jsou ty málo že vidím běžně používá. První z nich je pevné, další One tečkované, a poslední je přerušovaný. A tady je poseta. Uvidíte, že jsou banda teček, že jo? Dobrý způsob, jak se trochu dostat pěkný hranici děje, pomlčky jsou také docela populární. 

ALLISON Buchholtz-AU: A pak samozřejmě, že jsem si jistý, že je spousta další styly, které můžete získat. A máme velkou sadu odkazy na konci pro vás na druh prohlédnout a podívejte se na více chladném CSS. 

TOMAS REIMERS: A pak poslední věc, my jsme mluvit o box modely opravdu rychle. Jo, a pak se hranice, stejně jako výplň, Máte také věci jako border-left, border-right, border-top, border-bottom, který vám umožní aby se v určitém hranici. Tak tady je to jen border vlevo definované. Má to smysl? 

ALLISON Buchholtz-AU: To je v pohodě způsob, jak zdůraznit věci nebo přidat čáry mezi různými prvky. TOMAS REIMERS: Přesně tak. Tak to je naše hranice. A poslední je marže. Jako výplň Okraj kromě toho, že to není within-- ALLISON Buchholtz-AU: Je to Není asi svém živlu ale ve skutečnosti po celé box, že jsme byli svědky. 

TOMAS REIMERS: Jo. Allison řekl dokonale. Není to, jako, uvnitř prvek, to je po celém poli. To znamená, že věci jako pozadí se na něj nevztahuje. A to v podstatě říká, jako, nechci nic V tomto hodně prostoru pro mě. Tak jako máme tady rozpětí 10 obrazových bodů. Do 10 obrazových bodů Takže nic by měl být vedle mě. Je to druh jeho prostoru, ale trochu ne. Tak to je velmi základy modelu boxu. Dává to smysl? Cool, v pohodě. ALLISON Buchholtz-AU: Úžasné. Takže teď, že jsme právě máme naše skvělé zdroje že budeme trvat kluci přes velmi rychle. A budeme actually-- dobře, máme ještě k internetu? 

TOMAS REIMERS: Pojďme zjistit, jestli můžu otevřít up-- dovolte mi, abych zjistil, jestli bych může dostat na internet rychle zatímco Allison hovoří o něčem Allison chce mluvit. ALLISON Buchholtz-AU: Tak basically-- nemám vím, co ještě můžu říct, v tomto bodě. Ale to jsou jen některé opravdu dobré zdroje. Jsou to ty, které Tomas a jsem použil a že jsme vlastně používá na přípravu pro toto. W3Schools je ten, který vás kluci by se neviděli. Doporučujeme pro Spousta věcí se CSS. Vím, že ji doporučuji můj úsek po celou dobu. 

Jedním z velkých věcí, je to tak vám umožní druhu si s CSS a vidět změny okamžitě v tom, jako, double-okno zobrazit, že to má. Takže nemusíte mít strach o vytvoření vlastní webové stránky, nebo zřízení vhost ve vašem místní zařízení a místní hostitel, a jak se všechny ty věci práci. To je zakotven přímo v rámci stránky. 

A to má tato málo lekce, které můžete projít se učit Více informací o voliče, nebo se dozvědět o manipulaci se font, nebo pozadí, nebo obraz. A máte k dispozici následující Okamžité výsledky, které jste Nemusíte dělat žádné další prep práce pro. Tak jsem rád W3Schools. Je to báječné. Funguje to? 

TOMAS REIMERS: Jo. Ne, to není. Chceš, abych to zkusit a restartovat počítač? Nebo chceme to-- 

ALLISON Buchholtz-AU: Myslím, no, to bude i on-line. Všechny snímky budou online. Tak jsem jen vřele doporučuji dělat to. 

To je skvělé, jak jen jako tahák. Je to všechno jen základní příkazy, které máte. Je to skvělé, když jste poprvé začíná své webové stránky. Vzhledem k tomu, možná, že ne Chcete se dostat do všech real natvrdlý kostrbatý Design těžké věci. Stačí jen, aby ji naformátovat v cestě Tento druh má smysl a vůli dělat v současné době. A pokud opravdu chcete aby se do ní dostat, já vím, to je, jako jeden z Tomas oblíbené odkazy. Jsme jej používáte prep, a to je báječné. To je pro vývojáře z Mozilly. 

TOMAS REIMERS: Tak Mozilla jsou lidé, kteří dělají Firefox. A to je jen jejich vlastní developer reference, což myslím, že je úžasné. A to má nádherný seznam zdrojů. Tak jsme have-- 

ALLISON Buchholtz-AU: A pak poslední poznámka když se snažíte design svých webových stránek, čerpat inspiraci z věcí že si myslíte, že jsou dost. Kontrola prvek, kontrolu zdrojového kódu může být super užitečný že se snaží přijít na to, jak na styl své vlastní internetové stránky. 

Často mám pocit, že nejlepší cesta, kromě experimentování, Je jen na pohled věci, které jsou dost. Zjistil jsem, že je to opravdu těžké, aby právě druh navrhovat věci na vlastní pěst, zejména na začátku. Takže prosím, podívejte se na webové stránky že si můžete vychutnat při pohledu na. Zjistit, co dělá je apelovat na vás. A pak neváhejte pokusit se zopakovat to. 

TOMAS REIMERS: Right. Dokonce i jako webové stránky takhle, můžete vidět tam je určitě div nahoře. A pak máte jiný div uvnitř tady, což je CSS Awesomeness. A pak máte spoustu odkazů zde. Pokud jste opravdu jen kontrolovat prvky, můžete tak nějak začít vidět, co dělat webové stránky vypadat, a jak můžu znovu, že kdybych chtěl. Dává to smysl? Takže máme jen levé tři minuty. Tak na něco zeptat? Některý z nich? Ano. 

Diváků: pro barvu obdélník, jak byste have-- pokud jste nechtěli ji jít přes celou stránku, mohl Udělal jsi to jít přes pouze polovina stránky, nebo jen text? 

TOMAS REIMERS: Jo, určitě. Tak se ukažte ve skutečnosti. Mám dvě myšlenky. Takže v první řadě, budete lze také použít procent. 

Diváků: Opravdu? 

ALLISON Buchholtz-AU: Takže něco vyhledat je relativní umístění. Je to něco, co jsme nemají čas se dostat do, ale je to něco, co jsem rozhodně Doporučujeme mimo kontrolu vy. 

TOMAS REIMERS: So procenta. A podívejte se, jak se nám to povedlo jen 50% šířky? ALLISON Buchholtz-AU: Pokud se vám skutečně znát počet obrazových bodů, si můžete být přesnější tímto způsobem. Můžete si hrát si s ním. Ale 50%. Když jsme byli na velikost našeho prohlížeče, to by bylo menší. 

TOMAS REIMERS: No, je to v podstatě 50% právě teď, myslím. Je to o 50%, a pak marže byl přidán k tomu. CSS má spoustu vtípků. Takže teď je to 50% šířky stránky. Ale nezapomeňte, že máte 10 pixelů odebírá z každé strany. Takže pokud jste měli navrhnout, aby proti levý okraj prohlížeče, pak to bude vypadat, jako 50%. Opět, stejně jako jsem řekl, CSS být hodně hádat-and-check. Stejně jako si myslíš, že se něco bude chovat jedním směrem, ale to se chová úplně jinak. 

ALLISON Buchholtz-AU: A právě chytřejší, a vy jen získat lepší intuice na to, jak budete pohybovat kolem. 

TOMAS REIMERS: A dostane horší a horší. Takže je to opravdu jen závod. 

ALLISON Buchholtz-AU: To je super povzbudivé. Chceme, aby jako CSS. 

TOMAS REIMERS: CSS je úžasné. Pamatujte si, že. Další otázky? 

ALLISON Buchholtz-AU: jedna věc. Ještě něco? Super. 

TOMAS REIMERS: Úžasné. 

ALLISON Buchholtz-AU: No, pokud máte kluci mají nějaké otázky později, jsme vždy k dispozici podle obvykle. Budete pravděpodobně vidět některé z nás na závěrečných prací a rozhodně na Hackathon. 

TOMAS REIMERS: Přesně tak. A na veletrhu. 

ALLISON Buchholtz-AU: A na veletrhu. Oh. 

TOMAS REIMERS: Můžete se těšit na vidět všechny vaše awesome-- 

ALLISON Buchholtz-AU: Uvidíme všechny vaše úžasné webové stránky že bude krásné. TOMAS REIMERS: můžete vždy vidět, stejně jako, webové stránky kdo měl, jako, dobrý CSS a pak stejně jako ti, kteří neměli snažit udělat CSS. ALLISON Buchholtz-AU: Také další věc, jedna věc se podívat do je Bootstrapping. Takže Bootstrap je skvělý. 

TOMAS REIMERS: Google, že pokud you-- 

ALLISON Buchholtz-AU: Google to. Je to báječné. Budete milovat. A teď, že jste základní znalost CSS, Bude to mnohem větší smysl. Děsivý. Díky, kluci. 

TOMAS REIMERS: Děkuji moc.