>> [Muziciranja]
ALLISON BUCHHOLTZ-AU: Pa mi smo zapravo samo ide
da vam oronuloj CSS, jer znamo
da nije bio pokriven u svim sekcijama.
I doista želimo biti sigurni da ste dečki su ovaj alat na raspolaganju,
jer ima sposobnost da Vaše web stranice izgledaju puno ljepše.
>> A ako ste izgradnju web stranice, a zatim vjerojatno želite da bude lijepa.
Mislim, ne morate to, ali ja bih ga predlažemo. [Smijeh]
Ako želite da korisnici ga koristiti, možda ćete želim da malo [nečujan] napraviti.
Tako ćemo pokušati dati samo neke osnovne alate i razumijevanje,
tako da kad idete van, a vi ste istraživanje stvari o CSS,
to nije kompletan gluposti, kao što su CSS ponekad biti.
>> TOMAS REIMERS: Da.
Allison je rekao prilično dobro.
Zato mislim da je prva stvar koju trebao početi s ono što je CSS?
Dakle, CSS je strašan.
CSS--
>> ALLISON BUCHHOLTZ-AU: To je Ime našeg seminara.
>> TOMAS REIMERS: Da.
To je jako važno da se shvatite da je do tada.
Ako ste samo oduzima jedan stvar, to je da su CSS, ako strašan.
Dva je CSS je kratica za Cascading Style Sheets.
Dakle, u svojoj srži, CSS je style sheet, što znači
to vam omogućuje da se stil web stranice.
I što onda to znači, da je način za dodavanje stila na vaše web stranice.
Dakle po stilu, što znači sve da ne structural--
tako stvari kao što su boja, pozadina slike, granice, kao što je, padding,
marže.
Mi ćemo razgovarati o tome što Sve to znači da je u malo.
>> Dakle, upravo smo otišli naprijed i otvori i onih u gedit.
Dakle, to je index.html.
I to je main.css.
Dakle main.css nema ništa.
ALLISON BUCHHOLTZ-AU: Ne stil dosad.
TOMAS REIMERS: Nema.
I kao što ćete vidjeti, to je stvarno ružno mjesto.
ALLISON BUCHHOLTZ-AU: To je jednostavno.
TOMAS REIMERS: Da.
Da, to nije ružna, to je samo minimalistički.
I onda ovdje imamo index.html.
I tako za brzo rekapitulacija HTML, Allison,
Želite li samo razgovarati o stranici?
>> ALLISON BUCHHOLTZ-AU: Da.
Dakle, očito, imamo HTML tag, koji je upravo imena HTML datoteke.
Mi imamo zaglavlje ovdje, s CSS Fantastičnosti, which-- ako se vrati.
Gdje je to?
>> TOMAS REIMERS: Oh.
Da, možete vidjeti.
ALLISON BUCHHOLTZ-AU: I obavijest zaglavlje
ovo tab header pravu ovdje.
A onda "Zdravo, svijet!" je Tekst koji smo upravo
prikazivanje na webu stranica, koji is-- vratiti.
Natrag.
Koji je samo u našem tijelu here-- običan tekst.
Također, jedna stvar primijetiti, ako pogledate ovdje,
Tomas prebacio do njih dva iz naše slajd.
Dakle, dokle god imate sve tri od njih, vi ste u redu.
Oni mogu biti bez obzira kako oni žele.
Ono što je najvažnije je upravo to Imate li svaki od tih tri stvari.
>> TOMAS REIMERS: Cool.
Dodaj doc tip?
ALLISON BUCHHOLTZ-AU: Da.
TOMAS REIMERS: Da.
Cool.
ALLISON BUCHHOLTZ-AU: Očito, Moje MIC ne vole me.
TOMAS REIMERS: Oh, dajte nam samo sek dok je Allison prebacuje joj mikrofon.
Pa da.
Dakle, mi imamo glavnu stranicu.
To je vrsta unstyled.
Nemamo puno.
Mi jednostavno imamo u osnovi tekst.
Imamo stilu list.
Imamo naslov.
Dakle, samo goli kostiju Komponente napraviti web stranicu.
>> Dakle od tamo, neka je razgovarati o tome što je CSS
a kako to izgleda, a sve to.
Tako je za that--
ALLISON BUCHHOLTZ-AU: Natrag na slajdovima.
TOMAS REIMERS: Povratak na slajdovima.
I Allison može preuzeti.
>> ALLISON BUCHHOLTZ-AU: Woo.
OK.
Tako je u svom CSS datoteku, ti si idući u morati
Mnoge od tih stvari zove selektora.
To će biti samo Temelj Vašeg CSS datoteke.
To samo će biti puno i puno njih.
Dakle, za odabir.
To je samo opći anatomije.
Mi ćemo proći kroz primjeri, jer ako nikada dečki
gledao moj dio, ja osjećam kao i stvari u sažetak
ne stvarno smisla.
To uvijek pomaže da se vidi primjere.
>> Dakle, imamo neke izbornik.
To će biti neki identifikator ono što želimo stil primijeniti na.
A onda možemo imati bilo skup pravila i vrijednosti.
Tako selektora da bi mogli vidjeti Možda nešto poput tijela,
ili stav s P, ili zaglavlja, ili bilo što drugo,
što god želite HTML oznake biti.
>> Dakle, u ovom slučaju, imamo tijelo.
I mi imamo neke pravilo, što to odgovara
to što je vaš stil se odnosi na.
Dakle, u ovom slučaju, imamo boja pozadine i fonta težine.
Dakle, to će se promijeniti pozadina svega
u svakom tijelu oznaku našeg HTML datoteke.
I to će dati je to svjetlo plava vrijednost.
>> Dakle, to će biti pozadina svijetlo plava.
A onda ništa u tijelu će imati težinu fonta podebljano.
Dakle, to je samo ide da bold sve naše teksta.
A to je samo jedan selektor.
Ali što bi moglo imati vrlo mnogo njih.
A što idemo pokazati kasnije, malo više u tome
da radi i više primjera tamo.
Sve što želite dodati?
>> TOMAS REIMERS: Ne
Allison je dobio.
Mi samo će smanjiti se Primjer ovdje na našim stranicama primjer.
Tako ćemo zapravo uzeti.
To je savršena.
Pa ja sam samo ću kopirati i zalijepiti to pravo u našu main.css datoteku.
I ja ću ga spasiti.
A onda ćemo ga pokrenuti.
Dakle strani bilješku, jedan od najviše frustriraju stvari
je ako ne spremiti datoteku, a onda si, kao, učitajte stranicu,
i slično, zašto ne Promjena se događa?
To se događa.
Dakle, ovdje smo vidjeli da smo napravili naš web svijetlo plava pozadina
a neke podebljane tekst.
>> Također treba napomenuti, ako vas Dečki su pitanja o bilo čemu
radimo, molimo Vas slobodno nas zaustaviti i pitati nas.
Mi smo u potpunosti spremni na polju pitanja.
>> ALLISON BUCHHOLTZ-AU: Očito, s CSS, sve gradi na sebe.
Dakle, ako jedna stvar ne smisla sada, mi
Ne želim da vas bog dolje kasnije.
>> TOMAS REIMERS: Tako ćemo vrsta secirati ovo.
Dakle, želite pokrenuti s izbornikom ovdje?
>> ALLISON BUCHHOLTZ-AU: Da.
Kao što sam rekao prije, tijelo je samo naš selektor ovdje.
Dakle, ako se vratimo u našu index-- ah.
>> TOMAS REIMERS: Koji sam samo zatvorio.
Daj mi trenutak.
Dakle File, Open, index.html.
ALLISON BUCHHOLTZ-AU: Cool.
Dakle, ako primijetite ovdje smo ima tih tijela oznake, zar ne?
Dakle, selektor upravo odgovara oznake koje pričaju.
Dakle, tijelo ovdje.
Dakle, ono što si rekao je everything-- možemo vratiti?
Volio bih da mogu jednostavno kao i dodirnite zaslon.
Bilo bi puno hladnije.
>> Dakle, sve u roku od onih tijela oznake, koje smo vidjeli
je samo, kao što je, tekst, i tijelo u cjelini
odnosi se, kao što je, na pozadini.
Ako ste ikada željeli promijeniti pozadinu,
koja će biti u tijelu oznaku.
Samo je ta pravila primjenjuju na njih.
>> Dakle, ako smo ići na index.html and-- zapravo,
možemo imati nešto izvan tijela?
Ako smo imali, kao što je, podnožja ili nešto, što se ne bi primjenjivala na to.
No, sve u roku od ti tijelo oznake ide
biti pogođeni ovim tijelom Selektor da smo napravili.
Dakle, ako ste bili na tip nešto drugo there--
>> TOMAS REIMERS: Ajmo voziti taj dom.
Dakle, ako smo imali div--, tako da je Samo još jedna oznaka možete imati.
Ja ću ga zatvoriti.
Ili ćemo napraviti ovu stavku.
Dakle, p stoji za stavku.
I u toj točki.
I onda sam rekao: "Ovo je tekst."
Cool.
I onda sam napravio ovo pravilo primjenjuje se na stavak umjesto tijela.
Vidjet ćete kako se odnosi samo na Novoosnovana stavka, pravo,
Nije cijela stvar.
Je li to smisla?
>> ALLISON BUCHHOLTZ-AU: Dakle, to je sve tijelo,
ali sada je naš selektor jednostavno odgovara stavku.
Tako smo samo hrabar i plava za ovu specifičnu stavku,
jer to je jedina stvar koja je zatvorena u p oznaku.
>> TOMAS REIMERS: Da li to smisla sortiranje kako stvari ukratko opisali druge stvari?
ALLISON BUCHHOLTZ-AU: Također, samo reći, kao što su, jedan od najboljih načina
stvarno se ugodno s CSS je to samo učiniti stvari kao što je ovaj,
samo ga isprobati.
To je vrlo jednostavno upisati nešto out, udario Refresh, i vidjeti što će se dogoditi.
A što je s većinom CS, eksperimentiranje može često
dovesti do puno bolje intuitivno razumijevanje.
Čak i više nego nas samo, kao što su, u razgovoru s vama.
>> TOMAS REIMERS: Apsolutno 100% slažu po tom pitanju.
Dakle, ako se vratimo na to, krenimo seciranje upravo ono što su njih dvojica raditi.
Dakle, imamo dva pravila o tome.
Dakle, prvi je boja pozadine.
A vidite da smo ga postavili jednaka vrijednost, svijetlo plave.
>> Tako je u CSS, CSS je vrsta vrlo labave o tome
ti si dopustio da se definirati boju.
Tako da ih možete definirati po imenu.
Također možete napraviti nešto poput "crvene".
A onda, ako se vratimo na to, vidjet ćete da je pozadina crvena.
Također možete dobiti really-- Mislim vas Možete dobiti prilično kreativni s tim,
Ne možeš?
>> ALLISON BUCHHOLTZ-AU: I mislim da možete koristiti hex.
Ne mogu ti?
>> TOMAS REIMERS: Da.
Dakle, možete koristiti hex.
Ali mislim name-mudar.
Ne postoji?
ALLISON BUCHHOLTZ-AU: Možete napraviti dosta.
Prilično slično kao i većina boje koje može name-- slično, mislim losos je jedan.
>> TOMAS REIMERS: ćemo probati losos.
ALLISON BUCHHOLTZ-AU: I mislim Chartreuse je tamo.
TOMAS REIMERS: Da.
Vidi?
Na taj način možete dobiti prilično kreativni.
>> ALLISON BUCHHOLTZ-AU: Vi mogao dobiti prilično kreativni.
Kao, ako se možete sjetiti Naziv boji, to je vjerojatno tamo.
Ako zaista želite u redu detalj, možete ići hex.
>> TOMAS REIMERS: Da.
Tako heksadecimalni.
Ako ti dečki zapamtite ovo natrag sa starog PSET, slike Obnova,
ti dečki morali nositi s tim hex vrijednosti.
I nekako se rekapitulacija onoga koji je, hex ima tri vrijednosti pohranjene u njemu.
Tako je to u skupinama od dva koracima.
Prva dvojica predstavljaju crvenu vrijednost.
Drugi predstavlja zeleni vrijednost.
I posljednja je plava?
>> Pa FF dogodi da predstavlja heksadecimalni 255.
Dakle, imate 255 crveni, 255 zelena i plava za 0.
A vrijednosti u rasponu između 0 i 255.
>> PUBLIKA: Tako je.
Pa u biti, možemo tražiti Internet za bilo koje boje želimo,
i utvrditi stvarno-poznati Spektar boja kombinirani,
a onda bismo mogli staviti u?
ALLISON BUCHHOLTZ-AU: Točno.
Dakle, imate jako puno potpunu kontrolu više boja želite roku CSS.
Hoćemo li razgovarati o tome slike za pozadinu kasnije?
Ili ne želimo učiniti?
>> TOMAS REIMERS: Da.
Apsolutno.
Tako je prvi, samo da bi pokazali da crvena i zelena žuta.
A ako vam treba neki pomoć u pronalaženju to,
Može li Google nešto kao što je "boja berač."
ALLISON BUCHHOLTZ-AU: Oh, to je tako dobro.
Volim boju.
>> TOMAS REIMERS: colorpicker.com je dobar primjer.
I ovdje, vidjet ćete da imate full Photoshop-poput boja berač.
>> ALLISON BUCHHOLTZ-AU: Mm-hm.
Također, cool stvari su ti može generirati sheme boja
tako da ne morate, kao što su, sukobljavajući boje.
TOMAS REIMERS: I onda Ovdje je hex vrijednost se ovdje.
Dakle, uvijek možete pronaći na internetu osnovi mjesta da biste dobili hex vrijednosti od.
To nije neka vrsta koja je upravo, kao što smo vidim boje u svijetu u brojkama.
To je više da idemo na internetu i naći ono što boju želimo,
a onda se broj prema dolje.
Jer to je samo jako jednostavno Način na referentne stvari u CS.
>> ALLISON BUCHHOLTZ-AU: A tu je i also--
Zaboravio sam točan naziv web stranice.
No, tu je svakako, ja mislim, nešto iz Adobea
koja generira sheme boja za vas, što je stvarno cool, jer vas
definitely-- to ponekad Teško je shvatiti,
oh, ako želite koristiti ovu boju, ono što bi moglo biti još jedan koristan
koristiti drugdje na mom mjestu bi, kao, čine ga lijepo i kohezivna.
>> TOMAS REIMERS: Allison pričaju jedan Adobe nazvao Kuler *, mislim.
To je K-U-L-E-R.
ALLISON BUCHHOLTZ-AU: Mislim da je.
Prilično sam siguran da je on.
>> TOMAS REIMERS: Moja omiljena je Uvijek je shema boja dizajner.
>> ALLISON BUCHHOLTZ-AU: Ooh.
>> TOMAS REIMERS: Koji je now--
>> ALLISON BUCHHOLTZ-AU: Ah, to je lijepo.
>> TOMAS REIMERS: I može zapravo reći, kao što je,
Želim tri boje jedni pored drugih.
A onda neka je učiniti nešto lijepo.
A onda možete doći primjer od onoga što bi moglo izgledati.
A onda, ako prelazite preko bilo kojeg ih, to vam daje hex vrijednosti.
>> Tako je samo kao dobar način za početak razmišljam o sheme boja
ili ono što boje na web stranici Možda idu dobro zajedno.
Budući da može biti iznenađujuće Nije lako pokupiti što mislite.
A onda druga super stvar Uvijek sam pronašao o ovoj stranici
je li pogoditi Primjeri, to će pokazati što je primjer web stranice
Možda izgleda kao da se pomoću sheme boja.
U svakom slučaju.
>> Natrag na stvarni CSS.
ALLISON BUCHHOLTZ-AU: Ali očito smo znam ti reference mogu biti korisne.
TOMAS REIMERS: Ne, oni svakako može biti od pomoći.
Dakle, u drugom pravilu, Allison?
>> ALLISON BUCHHOLTZ-AU: Da.
Drugo pravilo je jednostavno odgovara našoj fonta.
Dakle, font težina je samo vrsta of-- tako težina bi
se ako želite baš, kao što su, normalno ili, kao što je, tanji fontove,
ili, u ovom slučaju, kao što je, podebljano.
Zaboravio sam.
Što je, ako ste htjeli it-- postoji tanja jedan od samo, kao što je, normalno?
TOMAS REIMERS: ja zapravo ne Znaš li postoji tanja jedan.
ALLISON BUCHHOLTZ-AU: Zaboravio sam.
Težina Dakle font smo obično samo koristiti za bold.
Ako želite da se stvarno u da, mi ćemo vam pokazati.
W3Schools ima sve drugačije stvari koje možete učiniti za fontove.
No, u osnovi, ako ste ikada željeli promijeniti ništa o fontu,
to je uvijek će biti, kao što su, font-nešto.
Dakle, to će biti kao što je, font-obitelj, ako ste pokušava promijeniti stvarni tip.
To će biti font-style, ako vas želim to učiniti kao rukopisni,
ili kurziv ili sitnica.
Ili čak font-color, ako htjeli smo to promijeniti.
>> TOMAS REIMERS: Yup.
Dakle, možete promijeniti.
I nekako samo rekapitulacija sada, tako da možete
vidim da imamo odabir ovdje.
Imamo ove vitičastim zagradama.
I onda imamo pravila omeđena zarezom.
Je li to smisla?
Da?
Cool.
Dakle, ako je to good--
>> ALLISON BUCHHOLTZ-AU: Povratak.
TOMAS REIMERS: Razgovarajmo posebno o tome kakvu selektora imamo.
Jer upravo sada imamo vrsta samo pokazali oznake.
Ali ti dečki mogli vidjeti vjerojatnim.
Recimo da imate dvije točke na stranici i vama
želite biti u mogućnosti stila jedna, no s druge strane,
ne samo želite da se ograničiti morati koristiti različite stvarne HTML
oznake da im daju različite stilove.
>> Dakle, imamo tri osnovne vrste selektora.
ALLISON BUCHHOLTZ-AU: Da.
Dakle, imamo oznaku, što je ono Razgovarali smo o tome u ovom trenutku.
Dakle, to je vrsta kao što vaše tijelo ili p.
I onda imamo klasu, koja je kad smo ga definirali u našoj CSS datoteku,
to je uvijek će biti točka, što god Želite naziv razredu biti.
A to se može primijeniti na više stvari.
>> Recimo da imate pet stavaka i dvoje njih troje
treba stil isti, što bi se primjenjivala klase na njega.
A to je samo način na koji ćemo to učiniti.
Mi ćemo vam dati primjer gdje je to zapravo pokazuje prema gore.
Ali, ako ste imali možda neki tag p, nakon njega, što će pisati,
klase jednaka bez obzira nastavu Želite li prijaviti na njega.
Dakle, bez obzira klase selektora da mi žele primijeniti na konkretnom stavka,
samo smo mogli napisati ovako.
Naravno, mislim da je primjer učinit će to puno konkretniji.
>> Drugi smo je id, koji se označavaju
s hash ili funta, ili hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON BUCHHOLTZ-AU: Octothorpe.
To radi, previše.
A ovo stvarno treba biti jedinstven.
Oni trebaju primjenjivati ​​samo na jedna stvar na svojoj stranici.
Znači li to posebna stavka, ili neki predmet na popisu, ili bilo što,
to bi trebao biti jedinstven.
I na isti način na koji smo upravo kažu, kao što su, class = "Class1 Klasa 2,"
to samo može biti id god imamo.
TOMAS REIMERS: Da.
Tako ćemo popričati O primjerima ovdje.
A ja sam samo ide roniti ravno natrag u kodu.
Pa pogledajmo naše HTML.
I tako smo sada imamo jednu točku.
Ovo je tekst.
Samo ću se mijenjati to. "Ovo je tekst 1."
A onda ćemo imaju "Ovo je tekst 2."
>> ALLISON BUCHHOLTZ-AU: drugi.
TOMAS REIMERS: Yup.
Dakle, sada imamo "Ovo je tekst 2," zar ne?
A mi ćemo vidjeti da li ćemo učitati stranica, što ćemo naći
je ćemo find--
ALLISON BUCHHOLTZ-AU: Ooh.
TOMAS REIMERS: Da.
Idemo pronaći "Ovo je tekst 1 "i" Ovo je tekst 2. "
>> ALLISON BUCHHOLTZ-AU: I kako lijepu žutu boju.
>> TOMAS REIMERS: I vi ćete vidjeti da je naš selektor upravo sada,
koji se odnosi na p-a, ili stavci, utječe na oboje,
jer obojica susret uvjet da su oba p oznaka.
To čini ukupno smisla.
Dakle, pitanje je, dobro, što Ako bismo htjeli dobiti samo jedan?
Dakle, baš kao što je Allison je rekao: imamo još dva načina kako to učiniti.
Ja ću početi s id.
>> ALLISON BUCHHOLTZ-AU: Počnimo s id.
>> TOMAS REIMERS: A i od njih su atributi.
Tako atributi postoje u HTML.
A što su se nešto što ste dodali
unutar oznaku koja je odvojiti od naziva oznake.
Dakle, možete imati više atributa.
Da?
>> ALLISON BUCHHOLTZ-AU: Upravo sam bio idući Naime, iz svog primjera iz PSET 7,
Ako itko od vas pokušavaju uskladiti stvari na centru,
možda ste koristili "Tekst align = centar."
A što je primijetio vjerojatno trebali su u središtu
tekst ili navigacijski bar.
Dakle, to je samo i atribut da bi mogli biti upoznati s.
TOMAS REIMERS: Postoji hrpa atributa koji ćete vidjeti.
Da.
Kao dobar odnosu na PSET 7.
Imamo id.
Također možete imati klase, stvari kao što je ovaj.
Jedan tag može imati mnoge atribute.
Dakle, počevši s id, neka mi se pretvarati Želite imati id of-- ne znam.
Mi ćemo ga nazvati posebna, jer je ovaj, mi smo
će napraviti podebljano, a naglasiti, a što god.
ALLISON BUCHHOLTZ-AU: to je Biti će super posebna.
TOMAS REIMERS: Pa to jedan, imamo id posebnim.
Dakle, način odabira koji je, dakle, U main.css, nego imati p oznaku,
vi #special, OK?
I da odabire stvar s posebnim id.
Da li to smisla svima?
PUBLIKA: Da.
TOMAS REIMERS: Cool.
Pa sad, ako smo se vratiti, ćemo see-- ups.
Da.
Vidjet ćemo da je to samo bira jedan s id posebnim.
Da?
Zvuči super.
Da.
>> PUBLIKA: Može li se nešto morati atribut obje klase i id?
>> TOMAS REIMERS: Da.
PUBLIKA: OK.
A što se onda događa ako onda dati to neka pravila CSS taj sukob?
TOMAS REIMERS: Apsolutno.
Mi smo definitivno ide razgovarati o tome.
Dakle, upravo ono što su dobivanje na, što također može imati nastavu.
Tako ćemo se pretvarati da je imao tri stavke i ja
Želio stil prvi dva, ali ne treći.
Pa, prva ideja može biti, dobro, ja može samo dati drugi id.
Ali ne mogu, jer je id, baš kao što je Allison je rekao:
mora biti jedinstven.
>> Dakle, umjesto ID, ono što možete koristiti je možete koristiti klase.
I class-- što omogućuje što učiniti je zapravo reći,
to spada kao dio skupine.
U tom slučaju, naša grupa naziva Special.
A što ćemo učiniti onda je ćemo say-- nego funta,
ćemo koristiti točku.
OK?
I obavijest da funta i točka postoje samo u CSS datoteke,
Ne u HTML.
ALLISON BUCHHOLTZ-AU: Da.
Važna razlika.
>> TOMAS REIMERS: Imam imao toliko borbe,
zato sam stavio mljeveno meso u HTML i onda samo osjećao glupo za dugo vremena.
Pogledajte kako se odabire oba one s tom razredu?
Cool.
>> Sada, stvari može imati više klase.
Recimo da sam htjela napraviti prvi dvojica imaju pozadinu žute
a druga dva su Boja slova plave.
OK.
Ja stvarno ne znam zašto sam želim učiniti, ali ja mogu.
>> ALLISON BUCHHOLTZ-AU: ne bi ga preporučuje za vaše web stranice.
No, za naše potrebe, to će učiniti.
>> TOMAS REIMERS: Nije Dobar izbor boja.
ALLISON BUCHHOLTZ-AU: Pa, žuta i plava su mi visoki boje škola.
Ne znam, ipak.
TOMAS REIMERS: Allison je visoka Škola je imala veliku shemu boja.
[Smijeh]
Pa što onda možemo nazvati ovo Nazovimo this-- pa imamo posebne
i imamo lijepo.
Predlažem, za to, koristite mnogo više opisne imena.
ALLISON BUCHHOLTZ-AU: Da, ja bih nazvati to, kao što je, žuta ili plava.
>> TOMAS REIMERS: Mi nismo stvarno realno web stranice,
što je razlog zašto mi ne radimo to.
Ali ako stvarno imao pravi web stranice,
možda, kao što je, članak header, Sadržaj članka, prva riječ,
slične stvari, koje omogućuju da se puno više opisno.
To su zapravo samo kao varijable.
Oni bi trebali biti imenovan na način gdje možete, like-- da, kao takve.
Savršeno.
>> Dakle, boja pozadine.
A onda ćemo say-- tako način za promjenu boje je samo "boja."
I mi ćemo učiniti ono plavo.
To je super.
Tako sada imamo Prva dva su posebna.
Sljedeći će imaju "class = lijepa."
ALLISON BUCHHOLTZ-AU: I onda ćeš želite dodati "prilično" na sredini jedan.
TOMAS REIMERS: Yup.
A onda na srednji, dodati "lijepo", što će se dogoditi
je li samo jedan prostor.
Dakle, u klasi atribut je popis prostor odvojen
svih klasa koji se odnose na tu oznaku.
OK?
To nije kao što je ovaj jedan pripada nekakav poseban razred zove
"Posebno, prostor, lijepa."
Ona pripada dva classes-- posebna i lijepa.
Da?
Cool.
>> A onda, ako ćemo gledati na ono što se događa, da smo
ćemo vidjeti da je prvi od njih ima žuta pozadina, crni tekst.
Drugo one--
>> ALLISON BUCHHOLTZ-AU: --has bold žuta pozadina sa plavim tekstom.
I naša posljednja je upravo plavi tekst koji smo mu pripadaju.
>> TOMAS REIMERS: Cool?
Kako selektora raditi?
Awesome.
>> ALLISON BUCHHOLTZ-AU: Da li želimo govoriti o sukobu sad onda?
>> TOMAS REIMERS: Pa da.
Apsolutno.
Dakle, što se događa ako u sukobu, zar ne?
Ajmo se pretvarati prvi postavlja nešto like--
ALLISON BUCHHOLTZ-AU: Možda ovo mijenja pozadinu?
TOMAS REIMERS: Da.
Tako ćemo napraviti "lijepe" promijeniti pozadinu losos.
ALLISON BUCHHOLTZ-AU: Ti si samo s Svi su veliki boje i danas, Tomas.
TOMAS REIMERS: Da.
Zato sam saznala da mogu koristiti losos kao pravi boje.
Dakle, mi smo samo će to učiniti.
Također mislim Sunset je realna boja.
PUBLIKA: Sunset je stvarna boja?
ALLISON BUCHHOLTZ-AU: Ajmo probati.
TOMAS REIMERS: Nakon ovog demo Upravo zbog toga, u slučaju da zabrljati gore,
Ne želim da se za ispravljanje pogrešaka.
Dakle, mi znamo losos je stvarna boja.
Dakle, bilo nagađanja o što će se dogoditi?
>> ALLISON BUCHHOLTZ-AU: Bilo koji ideja?
>> PUBLIKA: [nečujan].
>> TOMAS REIMERS: Da.
Tako da je dobio to točno.
U osnovi, to traje Posljednji pravilo da je dano.
>> ALLISON BUCHHOLTZ-AU: Dakle, ovo je gdje je kaskadno stupa na snagu.
>> TOMAS REIMERS: Pa sjetite se kako smo morao da kaskadno stilova?
Tako da smo vrsta znače da imamo hrpu pravila
koji se primjenjuju na vrhu svake druge, a Oni također mogu se međusobno poništavaju.
>> ALLISON BUCHHOLTZ-AU: Pa sve što je na dnu
će nadjačati sve što je na vrhu.
Mogli su pravila koja je u potpunosti negirati nešto unaprijed.
To je također razlog zašto želite biti oprezni kada ste styling,
tako da ne stvaraju pravila koja ti si samo potpuno nadjačavanje.
>> TOMAS REIMERS: Ili možda želite prepisati pravila.
>> ALLISON BUCHHOLTZ-AU: Ili možda ne.
Da.
>> TOMAS REIMERS: Pretvarajte se da imate klase koja se odnosi na većinu stvari,
ali recimo da želite promijeniti boja pozadine kako crvena i font
masa za bold za većinu stvari, ali za jednu,
želite samo boju pozadine biti crvena, ali želite sve druge
svojstva, što bi mogao učiniti nešto kao što su "font-weight = normalno"
što bi onda poništiti taj podebljano promjene.
Da?
Opet, najbolji način, mislim Allison je rekao da, samo je vježbati.
>> ALLISON BUCHHOLTZ-AU: Pokusi.
>> TOMAS REIMERS: praksa, praksa, praksa, i eksperiment.
Znam puno ljudi koji misle CSS je samo puno pogodite-i-ček
na kraju dana, pri čemu, ako želite učiniti something-- kao,
imate grubu ideju, ali još uvijek vjerojatno trebati
isprobati kako bi bili sigurni znate kako to izgleda.
>> PUBLIKA: Kada se prijavljujete klase, više od jednog
na istoj točki ili dio, zar ne
obzira kako biste se upišite ih u navodnike?
>> TOMAS REIMERS: Ne, uopće ne.
>> ALLISON BUCHHOLTZ-AU: Ono što je važno je Kako bi u svom CSS style sheet.
PUBLIKA: Možete li ponoviti pitanje?
TOMAS REIMERS: Oh.
ALLISON BUCHHOLTZ-AU: Unutar klase, kada ste dajući nastavu
nešto u HTML, ne to bitno kojim redoslijedom oni u?
Nije važno nalog.
Ono što je važno je redoslijed klase selektora unutar vašeg CSS,
u svom stilu list.
>> TOMAS REIMERS: Zvuči dobro?
>> ALLISON BUCHHOLTZ-AU: Lovely.
>> TOMAS REIMERS: I onda ćemo nastaviti to--
ALLISON BUCHHOLTZ-AU: Što smo sada?
Zaboravio sam.
Oh, samo mi imamo primjere.
Ali mi smo vrsta učinili oni.
Mi smo učinili primjere u letu.
>> TOMAS REIMERS: Mi se kombinirati selektora uskoro.
>> ALLISON BUCHHOLTZ-AU: Oh, smo dobili kombinirati selektora.
TOMAS REIMERS: Pa neka Primjeri je imamo
# Dog-- funta, ili hashtag, ili octothorpe, ili što god
Želite li pozvati that-- oštra.
>> ALLISON BUCHHOLTZ-AU: Oštar pas.
>> TOMAS REIMERS: Onda imate .pets.
Nešto ima id psa, postoji samo jedan pas na stranici.
Nešto ima ID Mačka, postoji samo jedna mačka.
Postoji svibanj biti mnogo kućnih ljubimaca na stranici.
Zato smo dali da nastave.
Imate primjer str.
I onda tako jedan od Posljednji primjer koji
nešto nismo razgovarali o tome, je ono što se događa kad ih kombinirati.
Tako p.pets.
>> Tako da, vratimo se broj i uvesti another-- Da.
Tako se ovdje.
>> ALLISON BUCHHOLTZ-AU: I Osjećam kao što je to really--
kao što samo gleda kroz primjere stvarno način da saznate ovaj.
Dakle, to je ono što mi radimo.
>> TOMAS REIMERS: Pa neka mi se pretvarati Samo želim da odaberete tekst 2, zar ne?
Dakle, mi svakako ne može učiniti s id.
Pa, što smo mogli učiniti da s id, ali to nema id.
Mogao bih dodati, ali neka je pretvarati da nisam htio dodati jednu
ili je već nešto drugo.
Ja to ne mogu učiniti s tim.
Tag definitivno nije jedinstven, zar ne?
A niti je klasa.
No, možete kombinirati te stvari.
Recimo da smo htjeli napraviti nešto koji se odnosi samo na ono što
imaju klase poseban i koje su klase lijepo.
>> Dakle, ono što možete učiniti u main.css, možete reći, neka prvi izbrisati ovaj.
Možete kombinirati ove.
Dakle, što možete učiniti .special.
Nema prostora.
Samo .special.pretty.
Što to znači nešto koji je i posebna i lijepa.
Je li to smisla?
A ako ćemo ići ovdje, ono ti si idući u vidjeti
to pravilo vrijedi samo za Drugi, koji ima i onih.
A vi možete učiniti za puno stvari.
Možete say-- neka je pretvarati Samo sam htjela
raditi stvari koje imaju klasu lijepu a koji su također stavak oznaka.
Tako p.pretty.
Ajmo se pretvarati da sam imala nešto lijepo o oznakama tijelu.
OK?
Ja mogu pokrenuti ovo i ja vidi se da je to samo
će se primjenjivati ​​na stvari koje su stavci s razredom lijepo.
A možete kombinirati ove, Uglavnom, koliko god želite.
Tako možete samo ih staviti zajedno.
Je li to smisla?
ALLISON BUCHHOLTZ-AU: Pa Ova vrsta je više koristan
kada, Tomas je govorio ranije, možda imate jako komplicirano web stranice,
a vi već imate mnogo ovih pravila pisanih,
a vi samo trebate kombiniraju dva od prije.
Kao i umjesto pisanja cjelinu Novi selektor i mijenja tu,
možete samo kombinirati ih gdje se preklapa.
>> TOMAS REIMERS: Ili si možda naći out-- ponekad
postoji jedna klasa koja čini fontova boje poput plave,
a tu je još jedna klasa koja čini pozadini plavo.
A to jednostavno neće raditi.
Tako ćete napisati poseban slučaj, gdje je, like-- ali ako ima i, što si
učiniti je da ćeš To treba tu nijansu plave
a ovo je jedan taj drugi nijansu plave.
Pravo?
>> ALLISON BUCHHOLTZ-AU: Dobar za one vrste iznimki.
TOMAS REIMERS: Tako se razmišljati o problemima
koje bi mogle nastati ako ih kombinirati.
Cool.
Dakle, natrag na naše prezentacije.
ALLISON BUCHHOLTZ-AU: Mi smo skoro tamo.
TOMAS REIMERS: I prestao povezivanje.
ALLISON BUCHHOLTZ-AU: Oh, ne.
ALLISON BUCHHOLTZ-AU: CS na ured, internet ide prema dolje.
Oh, ironija.
>> TOMAS REIMERS: Znači sreću, možemo predstaviti bez interneta, pretpostavljam,
jer imamo sve slajdove ovdje.
Dakle, pričajmo o Odnos oznake.
ALLISON BUCHHOLTZ-AU: Pravo.
Dakle, samo vrsta ide od onoga što je rekao Tomas,
ovo je samo još jedan način da to učinite.
Dakle, imamo neke roditelja 'Sa selektor djeteta.
Dakle, u ovom primjeru ovdje, imamo neke Tijelo s klase Navbaru, Button klase.
Ah.
>> TOMAS REIMERS: Oh, ispričavam se.
>> ALLISON BUCHHOLTZ-AU: I osnovi, što to znači
je odabrati sve djece, kao što su sve ove vrste selektora,
unutar ovog izbornika matične.
I one su jedine što je ikad će podnijeti zahtjev za.
Ne znam je li vama imaju bolji način of--
TOMAS REIMERS: Pa ja Valjda način razmišljati
o tome se sjećam prije kako smo vrsta kao što su ih stavili zajedno.
A onda to znači da jedan element koji odgovara svim tim.
Što to govori, ja Želim da odgovaraju sve
u some-- želim ćete pronaći selektor.
A onda unutar toga, želim prilagodbu nove stvari.
Pravo?
Tako je u CSS, to je sve o vrsta biti u mogućnosti kako bi se slagala ove stavke.
I vi možete pokušati uskladiti stavke unutar drugih predmeta.
>> Tako ćemo doista napraviti primjer, i mi mislimo da ćemo pojasniti.
Tako ćemo se pretvarati smo posebni, Posebno lijepa, što god.
I onda imamo vezu, OK?
Tako zapamtite, je veza.
To neće ići nigdje.
I mi ćemo dati klase veza, valjda.
Budimo se dati class-- mi dati ideju.
ALLISON BUCHHOLTZ-AU: Cool.
TOMAS REIMERS: COO- neka je go to klasa lijepo.
Zašto ne?
>> ALLISON BUCHHOLTZ-AU: OK.
TOMAS REIMERS: Pa sada lijepe stvari
ćemo napraviti pozadinu plava, boja pozadine lososa.
To ima smisla.
A ako mi ne this--
>> ALLISON BUCHHOLTZ-AU: Želite li dodati tekst
pa hipervezu zapravo pokazuje se?
TOMAS REIMERS: Da bilo bi dobro poziva.
ALLISON BUCHHOLTZ-AU: Jer pravo Sada smo samo će dobiti ništa.
TOMAS REIMERS: Dakle, ovo je link.
"To je karika."
Oh, i to se događa biti još jedan link.
Dajmo mu klasu "cool".
Ti si u pravu.
Cool.
Dakle, sada ćemo zgrabiti to.
Idemo baciti jedan.
Imamo jedan u Posebna oznaka, a mi također
će imati jedan u prilično oznaku.
A sada ono što ćemo to je da ćemo napraviti cool--
Što želimo to učiniti?
ALLISON BUCHHOLTZ-AU: Možemo to napraviti veći?
TOMAS REIMERS: Dajmo joj granice.
ALLISON BUCHHOLTZ-AU: Mogli smo granicu.
TOMAS REIMERS: Da.
Tako ćemo učiniti nešto kao što su, granični is-- a mi smo
će objasniti sve u sekundi.
Za now--
>> ALLISON BUCHHOLTZ-AU: Da box modelu.
TOMAS REIMERS: Ali za sada, mi smo Upravo će to dati granicu.
Dakle, što to znači da ste će vidjeti ove linkove.
I ti ćeš vidjeti da su ti, kao, ružne crne granice, koje
je super.
>> ALLISON BUCHHOLTZ-AU: Naša web stranica je tako lijepo.
>> TOMAS REIMERS: Da.
Naša web stranica je strašan.
Dakle, ove dvije su linkovi, a što se pojavljuju.
Sada ćemo se pretvarati I Samo je želio učiniti
Ako to nije u nečemu koji je imao pozadinu lososa.
Dakle, ne zaboravite da je ovaj ima pozadinu lososa,
jer je u klasi lijepo.
>> Ali mi želimo reći da se samo hladi koji su se u razredu posebna, a ne u razredu
lijepa, treba imati tu granicu.
Pa, što možete učiniti je li Može se reći, .special, prostor, .cool.
A što da radi, kada mislite o tome, to je zapravo govori:
OK, nađi mi sve koji odgovara posebna.
Onda unutar tih oznaka, pronašli ja sve što je cool.
ALLISON BUCHHOLTZ-AU: Pa još jedan način da bi bilo dobro razmisliti o tome,
to se vraćamo na C, je kao i ideja o opsegu.
Dakle, kada imate neke Selektor, poput onih
koje smo radili za ovo prije, cijeli web stranice, sve HTML
je unutar vašeg dosega, zar ne?
No, kada smo to odnosa roditelj-dijete,
to je kao da ste sužavanje gdje ste u potrazi za određenom mjestu,
kao da je, kao što je, mi smo u potrazi roku Umjesto određenu funkciju
naše cijele datoteke.
PUBLIKA: Dakle, s tim na umu, bi to su važni, ako smo imali changed--
ALLISON BUCHHOLTZ-AU: red?
PUBLIKA: --the klase u CSS da .cool, prostor, .special?
ALLISON BUCHHOLTZ-AU: Da, jer je tada
bih, opseg ga sve što je cool,
a zatim pogled na ono što has-- Mislim, kao što je, u ovom slučaju,
Ne mislim da bi se to promijenilo.
>> TOMAS REIMERS: Ako mi je rekla što?
Oprostite.
>> ALLISON BUCHHOLTZ-AU: Ako ćemo Opseg se da se ohladi, a zatim se
tražiti stvari iz posebne, bilo bi isto, zapravo.
>> TOMAS REIMERS: Pa to ne bi bilo.
>> ALLISON BUCHHOLTZ-AU: ne bi?
Oh, oh dobro.
Ja sam u krivu.
>> TOMAS REIMERS: Pa razlog to je different-- uobičajeno mistake--
je da je sada samo Link je super, zar ne?
Mislim da moje pitanje kako ti dečki se, što na ovoj stranici usklađena .cool?
Postoje dvije oznake ovdje, zar ne?
Koji je to jedan i to je jedan.
Oba odgovarati kul.
Ništa drugo ne.
Dakle, ako ste rekli, .cool, prostor, .special, što ćeš reći,
unutar tih oznaka, što je posebna?
ALLISON BUCHHOLTZ-AU: Hm.
To je ono što it-- pravu.
Jer to je kao da ovdje samo nešto.
>> TOMAS REIMERS: Pa to odabire ništa.
>> ALLISON BUCHHOLTZ-AU: Dok s Posebno, mi smo unutar tih oznaka ovdje.
>> TOMAS REIMERS: Oni i one.
PUBLIKA: OK.
Dakle, oni oznake iz kosu crtu?
>> TOMAS REIMERS: Da.
Je li to smisla?
Kako je to zapravo pokušava suziti opseg.
ALLISON BUCHHOLTZ-AU: Da.
Mislim da je to vjerojatno Najlakši način da se razmisli o tome.
>> TOMAS REIMERS: Dakle našli smo ovo, te otkrili smo to i odgovara posebna.
I onda tražimo, u roku ovi momci, ono što je cool?
I u tom jednom, ovo je super.
Unutar ove, ništa je super.
Dakle, to je samo oznaka koja ostaje.
>> ALLISON BUCHHOLTZ-AU: Dok kul je samo u tim od tamo tagova.
TOMAS REIMERS: Točno.
A ono što je posebno u onima?
Ništa.
Sada, ono što ću reći Ako nema prostora,
pitate što je cool i special-- ili ono što je lijepo i posebna, zar ne?
Ako kažeš .special.pretty, to je isto kao .pretty.special.
>> Zato što je uklanjanje prostor je pita se, kad kažem .special,
pitate, OK, koje su posebna?
A onda od onih koji Oni su također prilično,
što je isto, gramatički, što pitate, što je lijepo,
i onda od onih, što je također posebna?
Pravo?
To je razlika što je u tome što je.
PUBLIKA: OK.
TOMAS REIMERS: Da.
Awesome.
Dakle, s tim na umu then--
>> ALLISON BUCHHOLTZ-AU: Mislim da je naš zadnji Stvar je (u fancy britanskim naglaskom)
model kutije.
>> TOMAS REIMERS: box-- [nasmijao] Volim način Allison kaže da je.
Tako je model kutije stvar.
>> ALLISON BUCHHOLTZ-AU: Samo kutija, ja ću biti vaš model kutija.
TOMAS REIMERS: Tako ćemo razgovarati o tome.
Dakle, sada smo proveli puno vremena govori o selektora.
Do sada, ti dečki su vjerojatno, kao što je, majstori selectors-- znate,
Kako točno odabrati sadržaj koji Želite manipulirati na zaslonu.
>> Dakle, sada je pitanje, kako točno mogu li ga manipulirati?
Pa valjda najosnovnijih način da misle o tome
je, dobro, što je točno je element u CSS?
Mi smo proveli puno vremena Riječ je o, što je oznaka,
ili ono što je najosnovnije prikaz oznake?
>> Dobar način da mislite o tome to jest, ono što je oblik lososa?
Što oblik, kao što je, boje lososa pozadinu?
>> PUBLIKA: To je pravokutnik.
>> TOMAS REIMERS: To je pravokutnik, zar ne?
>> ALLISON BUCHHOLTZ-AU: Nije trik pitanje.
[Smijeh]
>> TOMAS REIMERS: Ne pokušavam ti trik dečki ovako kasno.
Dakle, imamo pravokutnik.
A oznaka p, zar ne?
Tako da nam daje dobar uvjerenje da stavak
predstavljen kao pravokutnik na barem u mislima preglednika, koji
to je.
>> ALLISON BUCHHOLTZ-AU: Mislim, preglednici su obično pravokutnog,
tako da ima smisla.
>> TOMAS REIMERS: Ideja je da se ovdje da su sve oznake u CSS
su zastupljeni kao pravokutnik.
I svaki pravokutnik ima četiri Dijelovi prema CSS, OK?
Imate stvarni sadržaj.
To je mjesto gdje se nalazi tekst.
>> ALLISON BUCHHOLTZ-AU: Možda tvoja slika.
>> TOMAS REIMERS: Da.
Imate padding, koji je samo neka vrsta bijelog prostora.
Tada ćete imati granice.
I onda imaš maržu, što je bijeli prostor izvan toga.
Tako da nema smisla za svakoga, tako da smo
će govoriti o tome da je za sekundu.
Dakle ovdje, što ćemo učiniti se da ćemo stvoriti neke DIVs, OK?
Ispričavam se, dok I--
>> ALLISON BUCHHOLTZ-AU: Osjećam se sviđa trebamo staviti slatku sliku u.
>> TOMAS REIMERS: Mi svakako treba.
>> ALLISON BUCHHOLTZ-AU: Osjećam se kao i svi
mogao imati koristi od slatka slika, to je sve.
>> TOMAS REIMERS: Možemo svi imaju koristi od A-
>> PUBLIKA: Da, naravno.
TOMAS REIMERS: OK, super.
Tako smo trebali staviti slatka slika negdje.
ALLISON BUCHHOLTZ-AU: Osjećam se kao slatka kunić može biti korisno upravo sada.
TOMAS REIMERS: Naravno.
ALLISON BUCHHOLTZ-AU: Kraj tjedna.
Imati nešto adorab--
>> TOMAS REIMERS: Kako bout mačića?
>> ALLISON BUCHHOLTZ-AU: Mačić radi, previše.
>> TOMAS REIMERS: Cool, jer Tu je mjesto za to.
To se zove PlaceKitten.
ALLISON BUCHHOLTZ-AU: To je super.
TOMAS REIMERS: Da.
ALLISON BUCHHOLTZ-AU: Samo, kao što su, Slike rezervirano mjesto na svoju web stranicu.
TOMAS REIMERS: Mm-hm.
Tu je također PlacePuppy.
A tu je PlaceBacon.
>> ALLISON BUCHHOLTZ-AU: PlaceBacon?
Stvarno?
>> TOMAS REIMERS: Oh, mi ne imaju pristup internetu ovdje.
>> ALLISON BUCHHOLTZ-AU: [uzdiše]
Tragična.
TOMAS REIMERS: Inače, Ja bih vam pokazati dečki
Kako staviti slike u vaše web stranice.
Mi ćemo pokušati dobiti ovaj raditi prije nego moramo ići.
No, za sada, mi smo samo će govoriti u bojama tada.
Želimo staviti slike kittens--
>> ALLISON BUCHHOLTZ-AU: Napravili smo.
>> TOMAS REIMERS: --the internet-a dolje za trenutak postojanja.
Dakle, imamo dvije DIVs, a mi smo će im dvije IDS.
Mi ćemo ga nazvati "Prvi" i "drugi".
Dakle id = "Prva".
A mi ćemo im dati dvije boje.
Pa kako ćemo odabrati nešto s id od "prvi"?
ALLISON BUCHHOLTZ-AU: Dot ili mljeveno meso?
PUBLIKA: Sharp.
TOMAS REIMERS: Sharp, savršena.
Sharp, mljeveno meso, što god we--
>> ALLISON BUCHHOLTZ-AU: Mnogo stvari nazvati.
>> TOMAS REIMERS: OK.
Idemo riješiti na hashtag, a to je ono što ćemo ići s.
OK?
>> ALLISON BUCHHOLTZ-AU: hashtag.
>> TOMAS REIMERS: Pa hashtag prvi.
>> ALLISON BUCHHOLTZ-AU: Pa možete cvrkut seminar--
hashtag CSS, hashtag cool.
TOMAS REIMERS: hashtag fantastičnosti.
ALLISON BUCHHOLTZ-AU: Hashtag fantastičnosti, da.
TOMAS REIMERS: OK.
Tako smo "prvi" i "drugi".
Tako je prvi, idemo imati Boja pozadine crveno.
ALLISON BUCHHOLTZ-AU: Uh, debelog crijeva.
TOMAS REIMERS: Yup.
ALLISON BUCHHOLTZ-AU: Ja ću biti vaša točka-checker.
TOMAS REIMERS: Allison je dobio mene.
Pozadina-boja blue--
>> TOMAS REIMERS: Ljubičasta!
>> TOMAS REIMERS: Purple.
ALLISON BUCHHOLTZ-AU: Da.
Purple je moja omiljena boja, a nismo ga koristili još.
>> TOMAS REIMERS: Violet.
ALLISON BUCHHOLTZ-AU: Violet.
To radi.
>> TOMAS REIMERS: Tako smo će imati dva DIVs.
Oni će biti potpuno prazna.
Vjerojatno smo trebali imati neki tekst.
Dakle, "prvi" će biti "Halo."
I "druga" će say--
>> ALLISON BUCHHOLTZ-AU: Zbogom.
>> PUBLIKA: - "svijet."
Pozdrav, zbogom.
ALLISON BUCHHOLTZ-AU: Vidjela sam ih u dogovoru drugi tjedan.
TOMAS REIMERS: The Beatles?
ALLISON BUCHHOLTZ-AU: Za Reals.
Oni nisu veliki.
Ne sviđa mi se to.
>> TOMAS REIMERS: Imamo "Hello" i "zbogom."
A opet, CSS je samo strašan, jer prepoznaje naše boje.
Ne trebaju ni brinuti da oni postoje.
Oni su učinili.
>> ALLISON BUCHHOLTZ-AU: Oni postoje.
>> TOMAS REIMERS: Pa CSS mislim ima 255 riječi govoriti o boji.
Ako se možete sjetiti boje izvana onih 255, kao što je, ja ću biti impresioniran.
ALLISON BUCHHOLTZ-AU: Da.
Mislim da ti dečki mogu imati Upravo se u odmah nakon.
>> TOMAS REIMERS: Pa evo, vidjet ćete da imamo dvije kutije
Pravo na vrhu svake druge, zar ne?
Pozdrav i zbogom.
>> ALLISON BUCHHOLTZ-AU: Nema prostora između.
Samo su si smooshed Pravo na vrhu svake druge.
>> TOMAS REIMERS: Pa prva stvar Mislim da bismo trebali razgovarati o tome
je neka je i say-- Da.
Dakle CSS ih predstavlja kao svojevrsno kutije.
I kao što je kutija, imaju sadržaje.
A sadržaj sada je vrsta HELLO ili zbogom i to je to.
OK?
>> Dakle, jedna od prvih stvari koje možete učiniti je možete dodati padding.
Padding kaže koliko prostora to bi trebalo ostaviti na svakoj strani.
Tako recimo želim reći 10 piksela na svakoj strani.
A ja ću secirati da u sekundi.
ALLISON BUCHHOLTZ-AU: Sve ove stvari ovdje
će biti uglavnom u pikselima za ostatak seminara.
Ti ćeš vidjeti da ima prostor oko njega, zar ne?
Dakle, ono što ne vidite ovdje ima Ovaj nevidljivi vrsta obloga
na svakoj strani, koja kaže, kao što su, OK, imate svoju kutiju content--
>> ALLISON BUCHHOLTZ-AU: Želite li samo podići uvida elementa?
>> TOMAS REIMERS: Da, to je dobra ideja.
ALLISON BUCHHOLTZ-AU: Isto tako, ne mogu naći da provjerite element je dobar način
shvatiti ako se nešto događa pogrešno, nešto neočekivano dogodi,
Uvidom u oznake i vidjeti što to je kao prepisana je korisno.
>> TOMAS REIMERS: Pa nisam siguran Ako vi možete vidjeti ovu boju.
Može li?
Vidjet ćete ovaj padding o vrsti ruba.
I onda vidiš stvarni Sadržaj u plavo, zar ne?
Dakle, to je vrlo Osnove kutije modela.
Imate sadržaja.
Tada imate padding.
>> PUBLIKA: Zašto jednostavno ne koristiti okvir unutar the--
>> ALLISON BUCHHOLTZ-AU: Pravo.
Jer to je samo da odaberete Element sada.
>> TOMAS REIMERS: Yup.
Ostale stvari.
Dakle, pričajmo o tome padding naredba za sekundu.
Tako je u CSS, mjerenja trebaju imati jedinicu.
Dakle, prvo morate iznos.
Dakle, u ovom slučaju, mi smo, rekao je 10.
A onda sljedeći mi smo, rekao je piksela, px.
Ostali one možda imaju su stvari kao što su centimetara, inča.
Možete napraviti stvari kao što su, što je 10 centimetara?
I to će biti smiješno.
>> ALLISON BUCHHOLTZ-AU: Oh, boy.
>> PUBLIKA: Hej.
>> TOMAS i Allison: Da.
TOMAS REIMERS: Pa to je sve padding.
Ja ću se vratiti u piksela.
>> ALLISON BUCHHOLTZ-AU: Pikseli imaju tendenciju da se, kao što je, na standardu.
Kad pogledate puno web stranice, oni uglavnom rade u pikselima.
TOMAS REIMERS: Znači ti si idući u vidjeti bilo pixels-- one druge koje vidite
ih se, što je jedan em je jednaka visini fonta
koje trenutno koristite.
>> ALLISON BUCHHOLTZ-AU: mm.
TOMAS REIMERS: To je dobar način za reći, kao što, želim što više prostora mog fonta
je uzimanje.
ALLISON BUCHHOLTZ-AU: Nisam znao da je.
Možete naučiti nešto novo svaki dan.
TOMAS REIMERS: Postoji Puno mjerenja u CS.
Predlažem vam da ih gledate.
Za sve svoje slučajeve, mislim piksela bi trebao biti dovoljan.
I oni su također ono ti si idući u vidjeti
U većini primjera radi online.
Tako ćemo ga ostaviti na piksela.
>> Također možete, trebam say-- tako padding postavlja sve od paddings.
Također možete napraviti nešto slično "Padding-top" samo set--
ALLISON BUCHHOLTZ-AU: Možda ćemo dobiti naš "Hello" leđa.
TOMAS REIMERS: --to jednostavno postavljanje padding na vrhu i ništa drugo.
Tako su četiri naredbe padding-top, padding-bottom, padding-lijevo,
i padding-desno.
>> ALLISON BUCHHOLTZ-AU: Baš kao što je što se i očekuje za kutiju.
>> TOMAS REIMERS: Da.
Ništa previše lud tamo.
Je li to smisla?
Tako da je padding.
Ja ću postaviti sve U paddings natrag do 10.
A onda ću prijeći na granici.
>> Dakle, ono što je granica Granica je čudno naredbe.
Potrebno je svojevrsni tri stvari odjednom.
Dakle, prva je kako veliki želim da bude kao mjerenje.
Opet, ja sam se samo pomoću piksela.
I zadnje što sam treba dodati i mjerenja
je jedna stvar koja ne treba jedinicu 0.
To je zapravo pogrešna dati 0 a jedinicu,
jer 0 0 diljem inča, piksela, centimetara, što god.
To sve samo znači 0, zar ne?
Dakle, prvo što su dali mjerenja.
>> Tada ćete da je to stil.
Zato ću reći "čvrste".
A mi ćemo govoriti o tome što to znači.
I onda na kraju, dati joj boju.
Zato ću reći "crno".
A to su sve stvari koje smo sada vidjela, osim za stil,
ali mi ćemo govoriti o tome.
Dakle, vi ste vidjeli mjerenja, a vi ste vidjeli boje.
A što se događa je da bi to Lijepo crni obrub oko njega, zar ne?
Vi vidite kako je to učinio?
>> PUBLIKA: Da.
>> TOMAS REIMERS: Cool.
Dakle, što je to?
Dakle, prije svega, to je jedan piksel.
To je očita dovoljno, zar ne?
Kao, to je debela jedan piksel.
Ili da će to biti jedan piksel, ali ja sam zumira, tako da je malo više
od toga.
>> ALLISON BUCHHOLTZ-AU: I mi imamo to smiješno razlučivosti TV.
>> TOMAS REIMERS: Da.
Možete ga napraviti veći, manja, što god.
Dakle, ovdje je dva piksela granične.
Vidjet ćete da je dvostruko debela.
Sljedeća stvar koju morate se boje.
To nije interesantno.
Neću govoriti O tome, zapravo.
>> ALLISON BUCHHOLTZ-AU: Ali stil možda samo malo zanimljivo.
>> TOMAS REIMERS: Da.
Dakle stilu, postoji nekoliko onih da vidim koristi često.
Prvi je kruta, sljedeći je točkasta, a posljednji je isprekidana.
I ovdje se nižu.
Vidjet ćete da su oni hrpa točkica, zar ne?
Dobar način da se nekako dobiti lijep granice ide, crtice su također prilično popularni.
>> ALLISON BUCHHOLTZ-AU: I onda, naravno, ja sam
sigurno ima dosta druge stilova koje možete dobiti.
I mi imamo veliki set linkovi na kraju za vama
to vrsta prostudirati i pogledati još hladnoj CSS.
>> TOMAS REIMERS: I onda posljednja stvar, mi smo
će govoriti o kutija modeli vrlo brzo.
Oh, a zatim granicom, baš kao padding,
imate i stvari kao što su border-lijevo, desno-border, granični-top,
border-bottom, koji vam omogućuju doći na određenu granicu.
Dakle, ovdje je samo granični napustio definirane.
Da li to smisla?
>> ALLISON BUCHHOLTZ-AU: To je super način istaknuti stvari ili dodavanje
linije između različitih elemenata.
TOMAS REIMERS: Apsolutno.
Dakle, to je naša granična.
I posljednji provizije.
Margin je kao padding osim što ne within--
ALLISON BUCHHOLTZ-AU: to je Ne oko elementa
ali zapravo oko cijelog okvir koji smo vidjeli.
>> TOMAS REIMERS: Da.
Allison je rekao savršeno.
To nije, kao što je, unutar vašeg Element, to je oko cijelog okvira.
To znači da stvari kao što su Pozadina se ne odnose na nju.
I to u osnovi kaže, kao, ne želim ništa
U tom mnogo prostora za mene.
Dakle, kao što ovdje imamo marža od 10 piksela.
Dakle, ništa u roku od 10 piksela trebao biti uz mene.
To je vrsta njegova prostor, ali nekako ne.
Dakle, to je vrlo Osnove kutije modela.
Je li to smisla?
Cool, cool.
ALLISON BUCHHOLTZ-AU: Awesome.
Pa sad mislim da smo upravo imamo kul resurse
da ćemo vas odvesti dečki kroz vrlo brzo.
A mi ćemo actually-- dobro, imamo internet još?
>> TOMAS REIMERS: Pokušajmo vidjeti ako ja mogu otvoriti up--
dopustite mi samo da vidim mogu dobiti internet brže
dok je Allison govori ni o čemu Allison želi razgovarati o tome.
ALLISON BUCHHOLTZ-AU: Tako basically-- Ne znam
Znaš što još mogu reći u ovom trenutku.
No, to su neki stvarno dobri izvori.
To su oni koji su Tomas i ja imati koristi
i da smo zapravo koristi se pripremite za to.
W3Schools je onaj koji vam dečki trebali su prije vidjeli.
Mi ga preporučujemo za Puno stvari s CSS.
Znam da ga preporučiti Moj poglavlje svih vremena.
>> Jedna od velikih stvari je da je to vam omogućuje da se takve zbrke s CSS
i vidjeti promjene trenutno je u tome,
kao što su, dvostruko prozor vidjeli da ima.
Dakle, ne morate brinuti o postavljanje vlastite web stranice,
ili postavljanje vhost u svoj Lokalni aparata i lokalni domaćin,
i uzimajući sve to raditi.
Ona je ugrađena desno unutar stranice.
>> I to je to malo lekcije koje možete
proći kako bi naučili Više o selektora,
ili saznali više o mijenjanju vašeg font, ili u pozadini, ili slika.
A što su ove trenutna rezultati koje ćete
ne morate učiniti bilo drugi prep raditi.
Zato volim W3Schools.
To je nevjerojatan.
Je li to raditi?
>> TOMAS REIMERS: Da.
Ne, to nije.
Želite li isprobati i ponovno pokrenuti moje računalo?
Ili želimo to--
>> ALLISON BUCHHOLTZ-AU: Mislim, dobro, to će također biti online.
Svi slajdovi će biti online.
Dakle, samo sam visoko preporučiti to radiš.
>> To je velik kao samo kao Cheat list.
To je samo sve osnovne naredbe koje imate.
To je super kad ste prvi put počinje vaše web stranice.
Jer možda ne želim ulaziti u sve
real gnjidama istrajan dizajn teške stvari.
Vi samo trebate ga oblikovati na način koja vrsta ima smisla i volje
to za sada.
A ako stvarno želiš da se u nju, znam
To je, kao što je jedan od Tomas omiljeni reference.
Bili smo ga koristite za prep, a to je nevjerojatan.
To je Developer iz Mozilla.
>> TOMAS REIMERS: Pa Mozilla smo ljudi koji čine Firefox.
I to je samo njihov vlastiti programer reference, što mislim da je super.
I to je divno Popis sredstava.
Tako smo have--
>> ALLISON BUCHHOLTZ-AU: I onda posljednja bilješka
kad pokušavate dizajn vaše web stranice,
izvući inspiraciju iz stvari da li da se lijepo.
Provjera element, Uvidom u izvorni kod
može biti super korisna pokušali odgonetnuti
Kako stil vlastite web stranice.
>> Često osjećam kao najbolji način, osim eksperimentiranja,
je samo pogledati stvari koje su lijepe.
Smatram da je jako teško jednostavno vrsta dizajn stvari na svoje,
pogotovo u početku.
Zato molimo pogledati web stranice da ćete uživati ​​gledajući.
Shvatiti ono što čini ih pozivajući se na vas.
A onda slobodno pokušati ponoviti to.
>> TOMAS REIMERS: Pravo.
Čak i kao web- kao što je ovaj, možete vidjeti
Tu je svakako div na vrhu.
A onda imaš još jedan div roku Ovdje, što je CSS fantastičnosti.
I onda imaš hrpu linkova ovdje.
Ako ste zapravo samo provjeriti elementi, možete sortirati od
početi vidjeti što napraviti web stranice izgledaju i kako se mogu
ponovno da ako sam htjela.
Je li to smisla?
Dakle, imamo samo tri minute lijevo.
Dakle pitanja?
Svaki od njih?
Da.
>> PUBLIKA: za boju pravokutnik, kako ti bi
have-- ako to nije htio ide preko cijele stranice, mogli
što su je ići preko samo pola stranica ili samo tekst?
>> TOMAS REIMERS: Da, apsolutno.
Dakle, dopustite mi da vidim stvari.
Imam dvije ideje.
Dakle, prije svega, što Također možete koristiti postotaka.
>> PUBLIKA: Stvarno?
>> ALLISON BUCHHOLTZ-AU: Tako nešto pogledati je relativna pozicioniranje.
To je nešto što smo nemaju vremena da se u,
ali to je nešto što svakako Preporučujem ti dečki checking out.
>> TOMAS REIMERS: Dakle postotaka.
I vidjeti kako smo to napravili Samo 50% širine?
ALLISON BUCHHOLTZ-AU: Ako vas zapravo zna broj piksela,
možete biti precizniji na taj način.
Možete gusle okolo s njim.
No, 50%.
Ako smo bili na veličinu naše preglednik, da bi ga manje.
>> TOMAS REIMERS: Pa, to je zapravo 50% upravo sada, mislim.
To je 50%, a zatim marža je dodao da da.
CSS ima puno Igra riječima.
Dakle, sada je to 50% širine stranice.
Ali ne zaboravite da imate 10 piksela skinut sa svake strane.
Dakle, ako ste bili da se presele da protiv lijevi rub pregledniku,
onda će izgledati za 50%.
Opet, kao što sam rekao, CSS mogu biti puno pogodite-i-ček.
Kao, mislite da nešto nije u će se ponašati na jedan način,
ali se ponaša potpuno drugačiji način.
>> ALLISON BUCHHOLTZ-AU: A vi samo dobiti pametniji,
a vi samo dobiti bolje Intuicija za to kao što premjestiti zajedno.
>> TOMAS REIMERS: I dobiva gore i gore.
Dakle, to je zapravo samo utrka.
>> ALLISON BUCHHOLTZ-AU: To je super ohrabrujuće.
Želimo im da vole CSS.
>> TOMAS REIMERS: CSS je strašan.
Ne zaboravite da.
Ostala pitanja?
>> ALLISON BUCHHOLTZ-AU: jedna stvar.
Bilo što drugo?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON BUCHHOLTZ-AU: Pa, ako vas Dečki imate bilo kakvih pitanja kasnije,
mi smo uvijek na raspolaganju, kao i obično.
Vjerojatno ćete vidjeti neke Od nas za završne projekte
i svakako na hackathon.
>> TOMAS REIMERS: Apsolutno.
I na sajmu.
>> ALLISON BUCHHOLTZ-AU: I na sajmu.
Oh.
>> TOMAS REIMERS: Radujte se vidim sve svoje awesome--
>> ALLISON BUCHHOLTZ-AU: Vidjet ćemo sve svoje strašan web stranice
koja će biti lijepa.
TOMAS REIMERS: Uvijek možete vidjeti, kao što je, na web
koji je, kao, dobro CSS i zatim kao i oni koji nisu ni pokušali učiniti CSS.
ALLISON BUCHHOLTZ-AU: Također, još jedna stvar, još jedna stvar gledati u
je pokretački.
Dakle Bootstrap je super.
>> TOMAS REIMERS: Google da ako you--
>> ALLISON BUCHHOLTZ-AU: Google je.
To je nevjerojatan.
Vi ćete ga vole.
A sada da imate Osnovno razumijevanje CSS,
to će napraviti puno više smisla.
Awesome.
Hvala, momci.
>> TOMAS REIMERS: Hvala vam toliko.