[Predvaja glasba] ALLISON BUCHHOLTZ-AU: Torej smo v bistvu šele tekoč da vam potek CSS, ker vemo, da ni bilo zajeto v vseh točkah. In res želimo, da poskrbite, da boste Fantje imajo to orodje na razpolago, saj ima sposobnost, da vaše spletne strani videti veliko lepša. 

In če ste izgradnjo spletne strani, potem boste verjetno želeli, da bi bilo lepo. Mislim, da vam ni treba, ampak jaz bi jo predlagam. [Smeh] Če želite uporabnikom, da ga uporabljate, boste morda želim, da bi bilo malo [neslišno]. Torej bomo poskušali vam daje samo nekaj osnovnih orodij in razumevanje, tako, da ko greš ven in si raziskujejo stvari o CSS, to ne izpolni žlobudranje, kot CSS včasih biti. 

TOMAS Reimers: Ja. Allison je dejal, zelo dobro. Torej, mislim, da prvo stvar, ki jo bi se morala začeti z, kaj je CSS? Torej, CSS je super. CSS-- 

ALLISON BUCHHOLTZ-AU: To je Ime našega seminarja. 

TOMAS Reimers: Ja. To je zelo pomembno, da boste razumeli, da je do takrat. Če ste vzeli le eno stran stvar, to je, da CSS če super. Dva je CSS stoji za Cascading Style Sheets. Torej, v svojem jedru, CSS slogi, kar pomeni, to vam omogoča, da stil spletno stran. In kaj potem to pomeni, da je način, da dodate slog na vaše spletne strani. Tako po slogu, mi pomeni vse da se ne structural-- tako stvari, kot so barve, ozadje slike, meje, kot so, oblazinjenje, marže. Bomo govorili o tem, kaj Vse to pomeni, da v malo. 

Torej smo pravkar šla naprej in odprt tako tistih v gedit. Torej, to je index.html. In to je main.css. Torej main.css nima nič. ALLISON BUCHHOLTZ-AU: Ne stil doslej. TOMAS Reimers: Nič. In kot boste videli, da je Res grdo mesto. ALLISON BUCHHOLTZ-AU: To je samo navaden. TOMAS Reimers: Ja. Ja, to ni grda, to je samo minimalističen. In potem tukaj imamo index.html. In tako za hitro Rekapitulacija HTML, Allison, želite samo govoriti o strani? 

ALLISON BUCHHOLTZ-AU: Ja. Torej je očitno, imamo HTML tag, ki je samo ime datoteke HTML. Mi imamo glavo tu, s CSS Awesomeness, which-- če greš nazaj. Kje pa je to? 

TOMAS Reimers: Oh. Ja, lahko vidite. ALLISON BUCHHOLTZ-AU: In opazil glavo je ta glava zavihek prav tukaj. In potem "Hello, world!" je Besedilo, ki imamo samo prikazovanje na spletu Stran, ki is-- iti nazaj. Nazaj. Ki je samo v našem telesu here-- v golo besedilo. Prav tako je ena stvar, da obvestilo, če pogledaš tukaj, Tomas vklopljen up to dva iz naše tobogan. Torej, dokler imate vse trije od njih, da ste v redu. So lahko v kateri koli da hočejo. Kaj je najbolj pomembno je le, da je imate vsak od teh treh stvari. 

TOMAS Reimers: Cool. Dodajte tipa doc? ALLISON BUCHHOLTZ-AU: Ja. TOMAS Reimers: Ja. Cool. ALLISON BUCHHOLTZ-AU: Očitno moje mikrofoni me ne všeč. TOMAS Reimers: Oh, dajte nam samo sekundo medtem Allison stikala ven ji mikrofon. Torej, ja. Torej imamo glavno stran. To je nekako unstyled. Nimamo veliko. Pravkar smo imeli v bistvu besedilo. Imamo slog stanja. Imamo naslov. Tako da samo golo odkoščeno komponente narediti spletno stran. 

Torej, od tu, govori o tem, kaj je CSS in kako izgleda in vse to. Torej za that-- ALLISON BUCHHOLTZ-AU: Nazaj na diapozitivih. TOMAS Reimers: Nazaj na diapozitivih. In Allison more prevzeti. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Torej, v vašem CSS datoteko, boste imeli Veliko teh stvari imenuje selektorje. To bo zgolj Osnova vašega CSS datoteko. To je le, da bo treba veliko in veliko njih. Tako selektor. To je le splošno anatomijo. Smo šli skozi Primeri, ker če vidva nikoli gledala moj oddelek, čutim kot stvari v abstraktni ne res ni smisla. To vedno pomaga, da si ogledate primere. 

Torej, imamo nekaj izbiro. To se dogaja, da nekateri oznaka kaj želimo slog uporablja za. In potem imamo lahko vsaka sklop pravil in vrednot. Torej, selektorjev, ki jih lahko vidite bi bilo kaj takega organa, ali točka s P, ali glave, ali karkoli, karkoli želite, da vaše HTML oznake biti. 

Torej, v tem primeru imamo telo. In imamo nekaj pravilo, ki to ustreza za kaj vaš stil velja. Torej v tem primeru smo barva ozadja in pisave teža. Torej, to se bo spremenilo ozadje ničesar v vsakem telesu tag naše HTML datoteke. In to se dogaja, da je ta svetlo modra vrednost. 

Tako se dogaja, da ozadje svetlo modra. In potem vse v telesu dogaja, da imajo težo pisave krepko. Torej, to je le, da bo krepko vse naše besedilo. In to je samo en selektor. Vendar bi lahko imeli zelo veliko od teh. In kot bomo pokazati kasneje malo več o tem, kako da dela in več primerov tam. Karkoli želite dodati? 

TOMAS Reimers: No. Allison je dobil. Mi smo le, da bo cut up primer tukaj na naši spletni strani npr. Torej, kaj je dejansko si to. To je popolna. Tako da sem le, da bo kopiraj in prilepi da je pravica na naši main.css datoteko. In jaz grem, da ga shranite. In potem ga bomo teči. Torej side note, eden najbolj frustrirajuće stvari je, če ne želite shraniti datoteko, in potem pa, kot, osvežite stran, in podobno, zakaj ni Sprememba se dogaja? To se zgodi. Torej, tukaj smo videli, da smo naše Spletna stran svetlo modro ozadje in nekaj krepko besedilo. 

Želel bi tudi omenil, če vas Fantje imajo vprašanja o ničemer delamo, vas prosimo, prosimo, da nas ustavite in vprašajte nas. Mi smo popolnoma pripravljeni na polje vprašanj. 

ALLISON BUCHHOLTZ-AU: Očitno je, da s CSS, vse gradi na sebi. Torej, če je ena stvar, ki ne smisla, zdaj smo Ne želim, da bi vas bog navzdol kasneje. 

TOMAS Reimers: Torej, kaj je vrsta secirati to. Torej hočeš, da začnete z ročico tukaj? 

ALLISON BUCHHOLTZ-AU: Ja. Kot sem rekel prej, telo je samo naš selektor tukaj. Torej, če se vrnemo čez našemu index-- ah. 

TOMAS Reimers: Katere sem zaprta. Daj mi trenutek. Torej Datoteka, Odpri, index.html. ALLISON BUCHHOLTZ-AU: Cool. Torej, če ste opazili, tu smo so te telesne oznake, kajne? Torej izbirnik le ustreza oznake, ki jih govoriš. Torej, telo tukaj. Torej, kaj pravite, je everything-- lahko gremo nazaj? Želim si, da bi lahko samo kot se dotaknete zaslona. To bi bilo tako veliko hladnejše. 

V tistih, ki tako vse telesni oznake, ki smo jih videli je bil samo, kot je besedilo, in telo na splošno se nanaša, kot je, v ozadju. Če boste kdaj želeli spremenite ozadje, da se dogaja, da se v telesu tag. Samo ima ta pravila, ki se uporabljajo zanje. 

Torej, če bi šel na index.html in-- dejansko, Lahko imamo nekaj zunaj telesa? Če bomo imeli, kot so, ali noga kaj, da ne bi uporabljale za to. Ampak, kaj v ti telo oznake se dogaja lahko vplivale na ta organ Selektor da smo naredili. Torej, če ste bili, da tip nekaj drugega there-- 

TOMAS Reimers: Recimo, da vozi domov. Torej, če smo imeli div--, tako da je samo še en tag lahko imate. Jaz grem, da ga zapre. Ali pa bo to točka. Torej p stoji za odstavek. In v tem odstavku. In potem sem rekel, "To je besedilo." Cool. In potem sem to pravilo velja za odstavek namesto telesa. Boste videli, kako se uporablja samo za Novonastala odstavek, desno, ni cela stvar. Ali to smiselno? 

ALLISON BUCHHOLTZ-AU: Torej je to vse telo, zdaj pa naš selektor samo ustreza točki. Torej imamo samo krepko in modro Za to specifično odstavka, ker je to edina stvar, ki je vgrajen v p tag. 

TOMAS Reimers: Ali je to smiselno sortiranje o tem, kako stvari zaobjeti druge stvari? ALLISON BUCHHOLTZ-AU: Prav tako, reči, kot so, eden od najboljših načinov res dobili udobno s CSS se samo stvari, kot je ta, Samo da ga preizkusite. To je zelo enostavno, da tip nekaj ven, hit Refresh, in glej kaj se zgodi. In tako kot pri večini CS, eksperimentiranje lahko pogosto vodi k veliko boljši intuitivno razumevanje. Še več, tako kot nas samo, podobno, se pogovarjam s tabo. 

TOMAS Reimers: Absolutely 100% se strinjajo o tem vprašanju. Torej, če se vrnemo k temu, začnimo secira, kaj ti dve storiti. Torej imamo dve pravila o tem. Torej prva je barva ozadja. In boste videli, da smo jo nastavite enaka vrednosti, svetlo modre barve. 

Torej, v CSS, CSS je neke zelo ohlapno o tem, kako ste dovoljeno določiti barvo. Tako da jih lahko opredeli z imenom. Prav tako lahko naredite nekaj takega kot "rdeče". In potem, če se vrnemo k temu, boste videli, da je v ozadju rdeče. Dobite lahko tudi really-- sem ti misliš lahko dobite zelo ustvarjalno s tem, ne? 

ALLISON BUCHHOLTZ-AU: I misliš, da lahko uporabite hex. Ne? 

TOMAS Reimers: Ja. Tako da lahko uporabite hex. Ampak jaz sem razmišljal ime pametno. Ali ni tam? ALLISON BUCHHOLTZ-AU: To lahko storite kar nekaj. Precej podobno kot večina barv, ki jih lahko name-- všeč, mislim, losos je eden. 

TOMAS Reimers: Mi boš poskusiti lososa. ALLISON BUCHHOLTZ-AU: I mislim chartreuse je tam. TOMAS Reimers: Ja. Oglejte? Tako da lahko dobite zelo ustvarjalni. 

ALLISON BUCHHOLTZ-AU: You bi lahko dobil zelo ustvarjalni. Všeč mi je, če si lahko zamislite ime barve, je to verjetno tam. Če res želite, fina Podatek, lahko greš hex. 

TOMAS Reimers: Ja. Torej, šestnajstiški. Če vidva ne pozabite, to nazaj iz starega PSET, Image zopet, vidva morala obravnavati s temi hex vrednosti. In nekako, da povzamem, kaj to je, heks ima tri vrednosti, shranjene v njem. Tako da je v skupinah dveh korakih. Prva dva predstavljata rdečo vrednost. Drugi predstavlja zeleno vrednost. In zadnja je modra? 

Torej FF se zgodi, da predstavljajo hexadecimal 255. Torej imaš 255 rdeč, 255 zelena, in 0 za modro. In vrednosti v razponu med 0 in 255. 

OBČINSTVO: Right. Torej v bistvu, lahko iščemo internet za vsako barvo želimo, in ugotoviti dejansko znano barva combo spekter, in potem bomo lahko dal noter? ALLISON BUCHHOLTZ-AU: Točno tako. Tako da boste imeli precej veliko popoln nadzor več barv želite v CSS. Bomo govorili o slike ozadja kasneje? Ali želimo to storiti? 

TOMAS Reimers: Ja. Absolutno. Torej prvič, samo za prikaz, da rdeča in zelena rumena. In če boste potrebovali nekaj pomoč pri iskanju tega vam Google lahko nekaj like "barvo izbirnik." ALLISON BUCHHOLTZ-AU: Oh, to je tako dobro. Ljubim Color Picker. 

TOMAS Reimers: colorpicker.com je dober primer. In tukaj, boste videli, da imate polna Photoshop podobno barvo izbirnik. 

ALLISON BUCHHOLTZ-AU: Mm-hm. Tudi, kul stvari so ti lahko ustvarjajo barvne sheme tako da ne boste imeli, kot nezdružljiva barve. TOMAS Reimers: In potem tukaj je hex vrednost tukaj. Tako da lahko vedno najdete na spletu v bistvu kraje, da bi dobili hex vrednost iz. To ni nekako, da samo, kot smo glej barve sveta v številkah. To je več, da gremo na spletu in ugotovite, kakšne barve želimo, in nato vzemite število navzdol. Saj to je samo zelo enostavno način, da se reference stvari v CS. 

ALLISON BUCHHOLTZ-AU: In potem je tu še also-- Pozabil sem točno ime spletne strani. Ampak tam je definitivno sem mislim, kaj Adobe ki ustvarja barvne sheme za vas, kar je res kul, ker vas definitely-- je včasih težko razbrati, oh, če želite uporabljati to barvo, kaj bi lahko bilo še eno koristno za uporabo drugje na mojem mestu, kot, da bi bilo lepo in kohezivna. 

TOMAS Reimers: Allison je govoril o ena Adobe Kuler imenuje, mislim. To je K-U-L-E-R. ALLISON BUCHHOLTZ-AU: Mislim, da ja. Sem prepričan, da je eden. 

TOMAS Reimers: Moja najljubša ima že od nekdaj Color Scheme Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS Reimers: Katera je now-- 

ALLISON BUCHHOLTZ-AU: Ah, to je lepo. 

TOMAS Reimers: In ti lahko v bistvu pomeni, kot je, Rad tri barve drug poleg drugega. In potem naredimo nekaj lepega. In potem lahko dobite zgled kaj bi to izgledal. In potem, če ste hover nad katerim koli jim, da vam daje vrednost hex. 

Torej, tako kot dober način za začetek razmišljanje o barvah ali kaj barve na spletni strani lahko gredo dobro skupaj. Ker to lahko presenetljivo ni tako enostavno, da poberem, kot si misliš. In potem druga kul stvar Vedno sem našel o tej spletni strani je, če ste zadeli Primeri, bo pokazati, kaj je primer spletne strani bi izgledal uporabo te barvne sheme. Kakorkoli že. 

Nazaj na dejansko CSS. ALLISON BUCHHOLTZ-AU: Ampak očitno smo vem bi te reference koristno. TOMAS Reimers: Ne, vsekakor lahko koristno. Torej drugo pravilo, Allison? 

ALLISON BUCHHOLTZ-AU: Ja. Drugo pravilo je le ustreza naši pisavi. Torej font teža je le nekako of-- da bi teža biti, če hočeš samo, kot je, normalno ali podobno, tanjše pisave ali je v tem primeru, kot je, krepko. Sem pozabil. Kaj je, če si hotel it-- obstaja tanjša eden od samo, kot je bila normalna? TOMAS Reimers: jaz pravzaprav ne vem, če obstaja ena tanjša. ALLISON BUCHHOLTZ-AU: sem pozabil. Torej font teža smo običajno preprosto uporabite za krepko. Če želite, da se res v to, bomo, da vam pokaže. W3Schools ima vse drugačno stvari, ki jih lahko naredite za pisave. Ampak v bistvu, če si kdaj želeli spremeniti ničesar o pisavi, to je vedno bo, podobno, font-nekaj. Torej bo to všeč, font-družine, če ste poskuša spremeniti dejansko vrsto. To bo font-style, če vas želim, da bi bilo tako kot Rukopisni, ali ležeče, ali malenkosti. Ali celo font-barve, če smo želeli spremeniti. 

TOMAS Reimers: Yup. Tako da lahko spremenite, da. In nekako, samo da Rekapitulacija zdaj, tako da lahko videli, da imamo izbiro tukaj. Imamo te zavite oklepaje. In potem imamo pravila omejen s podpičjem. Ali to smiselno? Ja? Cool. Torej, če je good-- 

ALLISON BUCHHOLTZ-AU: Back. TOMAS Reimers: Spregovorimo posebej o tem, kakšne selektorjev imamo. Ker zdaj smo jih nekako le pokazale oznake. Vendar pa bi vidva videli to verjetna. Recimo, da imate dve točki na strani in vas želijo, da bi lahko gostov ena druge pa ne, ne boste le želeli, da se omeji bi morali uporabiti drugačno dejansko HTML oznake, da se jim različne sloge. 

Torej imamo tri osnovne Vrste selektorjev. ALLISON BUCHHOLTZ-AU: Ja. Torej imamo oznako, ki je kaj smo se pogovarjali o tem zdaj. Torej, to je nekako kot vaše telo ali p. In potem imamo razred, ki je ko smo ga opredeli v našem CSS datoteko, to je vedno tekoč, da se dot, ne glede na hočeš ime vašega razredu biti. In to se lahko uporablja za več stvari. 

Recimo, da imate pet odstavkov in dva od treh od njih Treba je oblikovan enako, bi jih uporablja razred z njo. In to je samo način, kako to storiti. Mi vam bomo dali zgled kjer je to dejansko kaže navzgor. Ampak, če boste imeli morda nekaj tag p, po njej, bi napisali, Razred je enaka ne glede razredov želite uporabljati za to. Torej ne glede na razred selektorji, ki jih želimo ki se uporabljajo za ta posebni točki, smo lahko samo napisati, kot je ta. Seveda, mislim, zgled bo veliko bolj konkretno. 

Druga imamo je id, ki jih označujejo z hash ali funt, ali hashtag. TOMAS Reimers: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Ki dela, preveč. In ta bi morala biti res edinstven. Ti bi se morala uporabljati le za ena stvar, na vaši strani. Torej, ali je to posebna točka, ali nekatere postavka na seznamu, ali karkoli, to bi moralo biti edinstvena. In na enak način, kot smo pravkar reči, kot, class = "razreda 1 class2" To lahko samo id karkoli imamo. TOMAS Reimers: Ja. Tako da je vsekakor govori O primerov tukaj. In jaz sem le, da bo potop naravnost nazaj v kodo. Torej oglejmo naše HTML. In tako smo prav zdaj en odstavek. To je besedilo. Jaz sem le, da bo spreminjanje ga. "To je besedilo 1." In potem se bomo imajo "To je besedilo 2." 

ALLISON BUCHHOLTZ-AU: Druga ena. TOMAS Reimers: Yup. Tako imamo zdaj "To je besedilo 2," kajne? In bomo videli, če bomo osvežite strani, kar bomo našli se bomo find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS Reimers: Ja. Bomo našli "To je besedilo 1, "in" To je besedilo 2. " 

ALLISON BUCHHOLTZ-AU: In ven lepo rumeno barvo. 

TOMAS Reimers: In videli boste, da naš selektor prav zdaj, ki se uporablja za p je, ali odstavki, prizadene oba, ker sta oba izpolnjevati Pogoj, da oni tako p tag. To je popolnoma smiselna. Torej, vprašanje je, dobro, kaj če smo želeli, da bi dobili samo eno? Torej, točno tako kot Allison je rekel, imamo dve druge načine za to. Jaz bom za začetek z id. 

ALLISON BUCHHOLTZ-AU: Začnimo z id. 

TOMAS Reimers: In tako to so atributi. Torej obstajajo atributi v HTML. In kaj so se nekaj, da dodate znotraj oznake, ki je ločiti od imena oznake. Tako da lahko imate več atributov. Ja? 

ALLISON BUCHHOLTZ-AU: Pravkar sem se pravi, iz vašega primer iz PSET 7, če kdo od vas poskušali uskladiti spravil v sredini, ste morda uporabljajo "Text align = center." In ga opazili verjetno bi morala biti osredotočena vaše besedilo ali vaš navigacijski bar. Torej, to je samo tako atribut da vas bo morda poznate. TOMAS Reimers: Tam je kup od atributov, ki jih boste videli. Ja. Všeč mi je dobra referenca za PSET 7. Imamo id. Lahko tudi razred, stvari, kot je ta. Single tag ima lahko več atributov. Tako se začne z imenom, kaj je pretvarjati nahajamo želijo imeti id of-- ne vem. Imenovali jo bomo nekaj posebnega, ker je ta, da smo dogaja, da krepko in poudarjajo, in karkoli. ALLISON BUCHHOLTZ-AU: To je boš super posebnega. TOMAS Reimers: Torej, to ena, imamo id posebnega. Torej način za izbiro, potem je v main.css, namesto da imajo p oznako, vam #special, OK? In da se izbere stvar s id posebnega. Ali je to smiselno za vsakogar? OBČINSTVO: Ja. TOMAS Reimers: Cool. Torej, zdaj, če gremo nazaj, bomo see-- Ops. Ja. Bomo videli, da samo izbere eno z id posebnega. Ja? Sliši se kul. Da. 

OBČINSTVO: Ali lahko kaj imajo pripisovati tako razreda in id? 

TOMAS Reimers: Da. OBČINSTVO: OK. In kaj se potem zgodi, če si potem dal da nekatera pravila v CSS, da konflikt? TOMAS Reimers: Absolutno. Mi smo definitivno bo govoriti o tem. Torej, kaj točno so dobili na, lahko imate tudi pouk. Torej, kaj je pretvarjal, sem imel tri točke in jaz želel slog najprej dva, vendar ne tretje. No, morda vaša prva ideja je, dobro sem lahko samo dal drugi pa z id. Vendar ga ne more, ker je id, točno tako kot Allison je rekel, mora biti edinstvena. 

Torej, namesto id, kaj si lahko uporabite je, da lahko uporabite razred. In class-- kar omogoča vas, je v bistvu rekel, to pripada kot del skupine. V tem primeru, naša skupina se imenuje posebna. In kaj bomo storili, potem je bomo say-- namesto funta, bomo uporabili piko. OK? In opazil, da je funt in pika obstaja le v datoteki CSS, ne v HTML. ALLISON BUCHHOLTZ-AU: Da. Pomembna razlika. 

TOMAS Reimers: Imam imela toliko boj, ker sem dal hašiš v HTML in potem šele počutil neumno za dolgo časa. Oglejte si, kako se izbere oba tisti s tem razredu? Cool. 

Zdaj, stvari imajo lahko več razredov. Recimo, da sem si želel, da bi najprej dva imajo ozadje rumena in drugi imata Barva pisave modra. OK. Res ne vem, zakaj sem bi želite to storiti, vendar sem lahko. 

ALLISON BUCHHOLTZ-AU: morda ne ga priporočamo za vašo spletno stran. Ampak za naše namene, bo to naredil. 

TOMAS Reimers: Ne dobro barvno shemo. ALLISON BUCHHOLTZ-AU: No, rumena in modro so moji gimnaziji barve. Ne vem, čeprav. TOMAS Reimers: Allison je visoka Šola je imela odlično barvno shemo. [Smeh] Torej, kaj lahko rečemo da je to Recimo this-- tako imamo posebne in imamo Pretty. Predlagam, da za to, da uporabljate veliko bolj opisna imena. ALLISON BUCHHOLTZ-AU: Ja, jaz bi pokličite to, kot, rumena ali modra. 

TOMAS Reimers: Nismo res kar resnično spletno stran, ki je, zakaj mi ne gre to. Ampak, če ste dejansko imel pravo spletno stran, ki jih morda, podobno, članek glava, Članek vsebina, prva beseda, take stvari, ki omogočajo vam, da je veliko bolj opisna. To so res tako kot spremenljivke. Morajo biti poimenovane tako če lahko, like-- ja, kot je npr. Popolna. 

Tako da barva ozadja. In potem bomo tako say-- način, da spremenite barvo, je samo "barva". In bomo, da bi bilo modro. To je kul. Torej, zdaj imamo Prva dva imajo poseben. Naslednjič se dogaja, da imajo "class = lepa." ALLISON BUCHHOLTZ-AU: In potem boste želite dodati "precej" na srednji enega. TOMAS Reimers: Yup. In potem na srednji eno, dodati "lepa", kaj se zgodi je pa imate le prostor. Torej razrednega atributa je seznam prostor ločen vseh razredov ki se uporabljajo za to oznako. OK? To ni tako kot tale pripada nekakšen poseben razred imenuje "Posebna, prostor, lepo." Spada v dveh classes-- posebna in lepa. Ja? Cool. 

In potem, če se ozremo kaj se zgodi, da smo bomo videli, da je prva rumeno ozadje, črno besedilo. Drugi one-- 

ALLISON BUCHHOLTZ-AU: --has bold rumeno ozadje z modrim besedilom. In naša zadnja ima samo modro besedilo, ki smo mu dodeli. 

TOMAS Reimers: Cool? Kako selektorji deluje? Super. 

ALLISON BUCHHOLTZ-AU: Ali hočemo govorimo o konfliktu zdaj pa? 

TOMAS Reimers: Torej, ja. Absolutno. Torej, kaj se zgodi, če vas imajo konflikt, kajne? Oglejmo pretvarjati prvo ustanavlja nekaj like-- ALLISON BUCHHOLTZ-AU: Mogoče ta spreminja ozadje? TOMAS Reimers: Ja. Tako da bomo lahko "precej" spremenite ozadje lososa. ALLISON BUCHHOLTZ-AU: Ti si samo z vsi veliki barve so danes Tomas. TOMAS Reimers: Ja. Ker sem ugotovil, da sem lahko uporabite lososa kot pravi barvi. Tako da smo samo še za to. Prav tako menim, Sunset je realna barva. OBČINSTVO: Sunset je realna barva? ALLISON BUCHHOLTZ-AU: Poskusimo. TOMAS Reimers: Po tej demo samo zato, ker v primeru, da zamoči, Nočem, da bi razhroščevanje. Torej vemo, losos je realna barva. Torej vse ugibanja o kaj se bo zgodilo? 

ALLISON BUCHHOLTZ-AU: Kakšna ideja? 

OBČINSTVO: [neslišno]. 

TOMAS Reimers: Ja. Torej imaš to ravno prav. V bistvu, je potrebno zadnje pravilo, ki je bilo dano. 

ALLISON BUCHHOLTZ-AU: Torej, to je, kjer kaskadno začne veljati. 

TOMAS Reimers: Torej, se spomnite, kako smo je imel, da je kaskadno slogov? Torej s tem, da smo nekako pomeni da imamo kup pravil ki veljajo na vrhu vsake druge, in lahko tudi preglasi seboj. 

ALLISON BUCHHOLTZ-AU: Torej karkoli je na dnu bo razveljavila karkoli je na vrhu. Lahko bi imeli pravila, ki v celoti vnaprej izničijo nekaj. To je tudi razlog, da hočeš biti previdni, ko ste styling, da vam ne bo oblikovanje pravil, ki ste pravkar popolnoma nujni. 

TOMAS Reimers: Ali pa morda ne želite prepisati pravila. 

ALLISON BUCHHOLTZ-AU: Ali morda veš. Da. 

TOMAS Reimers: Pretvarjaj se, da imate razred, ki velja za večino stvari, ampak recimo, da želite spremeniti barva ozadja na rdeče in pisave teža za krepko za večino stvari, ampak za enega, želite le barvo ozadja da je rdeče barve, vendar želite, vse drugo lastnosti, lahko naredite nekaj kot "font-weight = normalno," ki bi nato razveljavite to drzno spremembo. Ja? Again, je najboljši način, mislim, Allison je dejal, da je samo vaditi. 

ALLISON BUCHHOLTZ-AU: Eksperimentiranje. 

TOMAS Reimers: Praksa, praksa, praksa, in eksperiment. Poznam veliko ljudi, ki mislijo CSS je le veliko ugibati-in-kontrola Na koncu dneva, če se uporablja želite storiti something-- všeč, imate grobo idejo, vendar še vedno verjetno morali poskusiti zagotoviti, veš, kako izgleda. 

OBČINSTVO: Ko ste uporabo razredi, več kot eno na isti točki ali oddelek, ga ne glede na to, kaj bi lahko jih vnesete v narekovajih? 

TOMAS Reimers: Ne, sploh ne. 

ALLISON BUCHHOLTZ-AU: Pomembno je, Da bi v vašem CSS slogi. OBČINSTVO: Bi lahko ponovite vprašanje? TOMAS Reimers: Oh. ALLISON BUCHHOLTZ-AU: Znotraj razred, ko si dajejo razredi da nekaj v HTML, ne je pomembno, kar bi oni v? Ni važno, vrstni red. Kar je pomembno, je vrstni red Razred selektorji v vašem CSS, v svojem slogu stanja. 

TOMAS Reimers: zvok dober? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS Reimers: In potem bomo še naprej to-- ALLISON BUCHHOLTZ-AU: Kaj imamo zdaj? Sem pozabil. Oh, imamo samo primere. Vendar smo nekako narediti tiste. Naredili smo primere na letenje. 

TOMAS Reimers: smo dobili združiti selektorje kmalu. 

ALLISON BUCHHOLTZ-AU: Oh, smo dobili združiti selektorje. TOMAS Reimers: Torej nekaj primerov je, da smo imeli # Dog-- funt, ali hashtag, ali octothorpe, ali karkoli želite poklicati that-- ostra. 

ALLISON BUCHHOLTZ-AU: Sharp pes. 

TOMAS Reimers: Potem imate .pets. Nekaj ​​ima id psa, obstaja samo en pes na strani. Nekaj ​​ima id mačka, tam je samo ena mačka. Obstajajo lahko veliko živali na stran. Zato smo dali da razredih. Imate primer str. In potem to eno izmed Zadnji primer, ki je nekaj, kar nismo govorili o tem, je tisto, kar se zgodi, ko jih združiti. Torej p.pets. 

Torej za to, pojdimo nazaj Koda in uvesti another-- ja. Torej nazaj. 

ALLISON BUCHHOLTZ-AU: I Počutim se, kot je to really-- kot samo gledaš skozi primere je res tako, da se naučijo to. Torej, to je tisto, kar počnemo. 

TOMAS Reimers: Torej, kaj je pretvarjati nahajamo samo želim, da izberete besedilo 2, kajne? Tako da bomo zagotovo ne more to, da z id. No, lahko to storimo s id, vendar nima id. Sem lahko dodate, vendar pa se pretvarjamo da nisem hotel dodati eno ali pa že nekaj drugega. Tega ne morem narediti, da se s tem. Tag definitivno ni edinstven, kajne? In niti ni razred. Vendar pa lahko združite te stvari. Recimo, da smo želeli narediti nekaj ki se uporablja samo za stvari, ki imajo razred Posebna in ki imajo razred lepa. 

Torej, kaj lahko naredite, je v main.css, lahko rekli, dajmo najprej izbrisati to. Lahko združite teh. Torej lahko storite .special. Ni prostora. Samo .special.pretty. Kaj to pomeni, da je nekaj ki je tako posebna in lepa. Ali to smiselno? In če gremo tukaj, kaj boste videli je to pravilo velja samo za Drugi, ki ima obe od teh. In lahko storite, da je za veliko stvari. Lahko say-- Dovolite pretvarjati, želel sem le za stvari, ki so razred lepa in ki so tudi odstavek tag. Torej p.pretty. Oglejmo pretvarjati, da sem imel kar precej na telesu traku. OK? Morem teči to in jaz lahko vidimo, da je le dogaja, da se uporabljajo za stvari, ki so odstavki z razredom lepa. In lahko kombinirate ti, v bistvu, kar hočeš. Tako da si lahko samo jih skupaj. Ali to smiselno? ALLISON BUCHHOLTZ-AU: Torej ta vrsta je bolj uporabno ko je Tomas je rekel že prej, morda imate zelo zapleten spletne strani, in že imate veliko teh pravil pisnih, in morate samo združiti dva od prej. Všeč mi je namesto pisanja cele Novi selektor in ga spreminja tam, lahko samo združiti jih, kjer se prekriva. 

TOMAS Reimers: Ali ste morda našli out-- včasih tam je en razred, ki naredi barva pisave, kot so modra, in tam je še en razred, ki naredi ozadje modro. In da le ne bo delovala. Torej si napisati poseben primer, kjer je, like-- če pa je tako, kaj ste tekoč storiti, je, da boš da tale ta odtenek modre in to je ta drugi odtenek modre. Kajne? 

ALLISON BUCHHOLTZ-AU: Good za tiste vrste izjem. TOMAS Reimers: Torej, da razmišljati o problemih da se lahko pojavijo, ko jih združiti. Cool. Torej, nazaj v našo predstavitev. ALLISON BUCHHOLTZ-AU: Mi smo skoraj tam. TOMAS Reimers: In je ustavil povezovanje. ALLISON BUCHHOLTZ-AU: Oh, ne. ALLISON BUCHHOLTZ-AU: CS na pisarna, internet gre dol. Oh, ironija. 

TOMAS Reimers: Torej, na srečo, smo lahko predstaviti brez interneta, mislim, ker imamo vse diapozitive tukaj. Torej, kaj je govoril o Razmerje med oznakami. ALLISON BUCHHOLTZ-AU: Right. Torej, samo nekako se dogaja off, kaj je rekel Tomas, To je samo še en način, da to storite. Torej, imamo nekaj staršev selektor s selektorjem otrok. Torej, v tem primeru tukaj, imamo nekaj telo z razreda orodni vrstici, gumb razred. Ah. 

TOMAS Reimers: Oh, oprostite. 

ALLISON BUCHHOLTZ-AU: In v bistvu, kaj to pomeni je izbrati vse otroke, kot vse te vrste selektorjev, v tej matični selektorjem. In tistih, ki so edine to je vedno dogaja, da se uporabljajo za. Ne vem, če vas imajo boljši način of-- TOMAS Reimers: Tako sem ugibati, kako razmišljati O tem se spomnim, kako pred smo nekako kot jih skupaj. In potem to pomeni, da en element ki ustreza vsem tem. Kaj je to rekel je, da sem želim si, da se ujemajo vse v some-- želim vam, da bi našli izbiro. In nato znotraj, da hočem ste, da se ujemajo nove stvari. Kajne? Torej, v CSS, to je vse o nekako pri čemer je lahko, da se te postavke. In lahko poskusite, da se ujemajo postavke v drugih postavkah. 

Torej, kaj je dejansko naredil zgled, in mislimo, da bomo pojasniti. Torej, kaj je pretvarjal, imamo nekaj posebnega, Posebno lepa, karkoli. In potem imamo povezavo, OK? Torej, ne pozabite, je povezava. To ne gre nikamor. In bomo, da ga Razred povezavo, se mi zdi. Kaj je to za njih class-- mi dala idejo. ALLISON BUCHHOLTZ-AU: Cool. TOMAS Reimers: Coo-- dovolimo, je razred precej iti. Zakaj ne? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS Reimers: Torej zdaj lepe stvari se dogaja, da bi ozadje modra, barva ozadja lososa. Da ima smisel. In če bomo this-- 

ALLISON BUCHHOLTZ-AU: Ali želite dodati besedilo tako hiperpovezave dejansko pokaže? TOMAS Reimers: That bi bilo dobro klic. ALLISON BUCHHOLTZ-AU: "Vzrok desno Zdaj smo pravkar boš dobil nič. TOMAS Reimers: Torej je ta povezava. "To je povezava". Oh, in to se dogaja biti druga povezava. Dajmo mu razred "cool". Imaš prav. Cool. Torej, zdaj se bomo, da zgrabite to. Bomo vrgel eno. Imamo eno v posebno oznako, in smo tudi se dogaja, da imajo eno v lepi oznako. In zdaj, kaj bomo storiti, je, da bomo lahko cool-- kaj želimo to storiti? ALLISON BUCHHOLTZ-AU: Lahko naredimo, večji? TOMAS Reimers: Dajmo to mejo. ALLISON BUCHHOLTZ-AU: Mi lahko meji. TOMAS Reimers: Ja. Tako da bomo nekaj storiti kot, meja is-- in smo dogaja, da to pojasni vse v sekundi. Za now-- 

ALLISON BUCHHOLTZ-AU: Za model polje. TOMAS Reimers: Ampak za zdaj, smo pravkar dogaja, da to mejo. Torej, kaj to pomeni, da ste dogaja, da se te povezave. In boste videli, da imajo ti, kot, grdi črni meje, ki je kul. 

ALLISON BUCHHOLTZ-AU: Naša spletna stran je tako lepa. 

TOMAS Reimers: Ja. Naša spletna stran je super. Torej, ta dva sta povezav, in se zdi. Zdaj pa se pretvarjamo I le želeli, da to storijo če ne bi bil v nečem ki je imela ozadje lososa. Torej, ne pozabite, da je to ena ima izkušnje z lososom ker je razred lepo. 

Vendar pa želimo povedati, da je le ohlaja ki so v razredu posebno ne v razredu lepa, bi morali imeti to mejo. Torej, kaj lahko storite, je, da lahko rečem, .special, prostor, .cool. In kaj, da počne, ko misliš, da o tem, je, da je v bistvu rekel, OK, najdi mi vse ki se ujema posebnega. Potem v temi oznakami, najdete me vse, kar je kul. ALLISON BUCHHOLTZ-AU: Torej še en način da bi bilo dobro, da razmišljajo o tem, ga pripelje nazaj do C, je tako kot idejo uporabe. Torej, če imate nekaj selektor, kot tiste, da bomo delali za pred tem, vaše celotno spletno stran, vse vaše HTML je v vašem področju, kajne? Toda, ko smo imeli ti staršev in otrok, odnosi, to je kot, če ste skrčila, kjer iščete na določenem kraju, kot da bi, tako kot smo iskali v posebna funkcija, namesto našega celotnega spisa. OBČINSTVO: Torej, s tem v mislih, bi to je važno, če smo imeli changed-- ALLISON BUCHHOLTZ-AU: Da? OBČINSTVO: --the razred v CSS da .cool, prostor, .special? ALLISON BUCHHOLTZ-AU: Da, ker potem bi rekel, da je obseg vse, kar je kul, in potem poglej kaj has-- Mislim, kot v tem primeru, Jaz ne mislim, da bi jo spremenili. 

TOMAS Reimers: Če bi mi povedal, kaj? Žal mi je. 

ALLISON BUCHHOLTZ-AU: Če bomo področje, da se ohladi in nato poglej stvari iz posebnega, to bi bilo isto, pravzaprav. 

TOMAS Reimers: Torej ne bi bilo. 

ALLISON BUCHHOLTZ-AU: To se ne bi? Oh, oh dobro. Motim. 

TOMAS Reimers: Torej razlog to je different-- skupno mistake-- je, da je zdaj le Povezava je kul, kajne? Mislim, da moje vprašanje, da vama je, kaj na tej strani, se ujema z .cool? Obstajata dve oznake tukaj, kajne? Ki je to eno in to. Obe ujemata cool. Nič drugega ne. Torej, če si rekel, .cool, prostor, .special, kaj boš rekel je, znotraj teh oznak, kaj je tako posebnega? ALLISON BUCHHOLTZ-AU: Hm. To je tisto, kar it-- prav. Ker je to, kot samo nekaj tukaj. 

TOMAS Reimers: Torej izbere ničesar. 

ALLISON BUCHHOLTZ-AU ker z posebnega, da smo v teh oznak tukaj. 

TOMAS Reimers: Tisti in tiste. OBČINSTVO: OK. Torej tiste oznake iz poševnica? 

TOMAS Reimers: Da. Ali to smiselno? Kako je to v bistvu poskuša omejiti obseg. ALLISON BUCHHOLTZ-AU: Ja. Mislim, da je verjetno Najlažji način, da razmišljajo o tem. 

TOMAS Reimers: Torej smo ugotovili, je to, in smo ugotovili, to oboje ujema posebnega. In potem smo se sprašuje, v ti fantje, kaj je kul? In v tem enem, tale je kul. Znotraj tega ena, nič ni kul. Torej je to samo oznaka, ki ostane. 

ALLISON BUCHHOLTZ-AU: ker je cool je samo znotraj teh oznak a tam. TOMAS Reimers: Točno tako. In kaj je posebnega v teh? Nič. Zdaj pa, kaj bom rekel, je če ne bi bilo prostora, vas vprašam, kaj je kul in special-- ali kaj je lepa in posebna, kajne? Če rečeš .special.pretty, da je Enako kot .pretty.special. 

Ker kaj odstranitvijo prostor je sprašuje se, ko rečeš .special, vas prosi, OK, katere so nekaj posebnega? In potem tistih, ki med njimi so tudi precej, ki je enaka, slovnično, kot sprašuje, kaj je lepo, in potem za tiste, kaj je tako posebnega? Kajne? To je razlika kaj je tisto, kar je znotraj. OBČINSTVO: OK. TOMAS Reimers: Ja. Super. Torej s tem v mislih then-- 

ALLISON BUCHHOLTZ-AU: Mislim, da je naša last stvar, ki je (v slikoviti britanskim naglasom) Model polje. 

TOMAS Reimers: box-- [smeh] Všeč mi je način Allison pravi, da je. Torej modela polje stvar. 

ALLISON BUCHHOLTZ-AU: Just imajo box, bom svoj model polje. TOMAS Reimers: Torej, kaj je govoril o tem. Torej, zdaj smo porabili veliko časa govorimo o selektorjev. Do sedaj, fantje so verjetno, kot so, mojstri selectors-- veste, kako točno izbrati vsebino, ki želite, da manipulirajo na zaslonu. 

Zdaj je vprašanje, kako točno jo lahko manipulira? Torej, mislim, najbolj osnovna način, da razmišljajo o tem, da je je dobro, kaj točno je element v CSS? Mi smo porabili veliko časa govoriš, kaj je tag, ali kaj je najbolj osnovna zastopanje tag? 

Dober način, da razmišljajo o to pomeni, da tisto, kar je oblika losos? Kaj oblika, kot je lososove barve ozadja? 

OBČINSTVO: To je pravokotnik. 

TOMAS Reimers: To je pravokotnik, kajne? 

ALLISON BUCHHOLTZ-AU: Ni bil trik vprašanje. [Smeh] 

TOMAS Reimers: Ne poskušam da vas napeljejo fantje to prepozno. Torej imamo to pravokotnik. In tag je p, kajne? Tako da nam daje dobro prepričanje, da odstavek je predstavljen kot pravokotnik, pri vsaj v mislih brskalnika, ki je. 

ALLISON BUCHHOLTZ-AU: Mislim, brskalniki so običajno pravokotne oblike, zato je smiselno. 

TOMAS Reimers: Ideja tukaj je, da vse oznake v CSS so zastopali pravokotnik. In vsak pravokotnik ima štiri deli v skladu s CSS, OK? Imate dejansko vsebino. To je, če besedilo leži. 

ALLISON BUCHHOLTZ-AU: Mogoče tvoja slika. 

TOMAS Reimers: Ja. Imate oblazinjenje, ki je samo nekakšen prazen prostor. Potem imate mejo. In potem imaš rezervo, ki je bel prostor izven tega. Tako da nima smisla za vsakogar, tako da smo bomo govorili o tem za sekundo. Torej, tukaj, kaj bomo storili se bomo ustvariti nekaj Divs, OK? Oprostite, medtem I-- 

ALLISON BUCHHOLTZ-AU: Počutim se rad moramo dal luštna sliko v. 

TOMAS Reimers: Vsekakor bi morala. 

ALLISON BUCHHOLTZ-AU: Počutim se, kot vsi bi lahko imele koristi od luštna slika, to je vse. 

TOMAS Reimers: Lahko smo vsi koristi od a-- 

OBČINSTVO: Ja, seveda. TOMAS Reimers: OK, kul. Torej bi morali dati luštna slika nekje. ALLISON BUCHHOLTZ-AU: Počutim se, kot srčkan zajček je lahko koristno sedaj. TOMAS Reimers: Seveda. ALLISON BUCHHOLTZ-AU: Konec tedna. Imajo nekaj adorab-- 

TOMAS Reimers: Kako bout mucek? 

ALLISON BUCHHOLTZ-AU: Mucek dela, preveč. 

TOMAS Reimers: Cool, ker tam je mesto za to. To se imenuje PlaceKitten. ALLISON BUCHHOLTZ-AU: To je super. TOMAS Reimers: Da. ALLISON BUCHHOLTZ-AU: Samo, kot so, placeholder slik v vaše spletne strani. TOMAS Reimers: Mm-hm. Tam je tudi PlacePuppy. In tam je PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Res? 

TOMAS Reimers: Oh, ne bomo imajo dostop do interneta tukaj. 

ALLISON BUCHHOLTZ-AU: [stokanje] Tragično. TOMAS Reimers: V nasprotnem primeru, Rad bi vam pokazal fantje kako postaviti slike na vaši spletni strani. Bomo poskušali dobiti to deluje, preden smo morali iti. Ampak za zdaj, smo pravkar bomo govorili v barvah takrat. Želimo, da dajo slike kittens-- 

ALLISON BUCHHOLTZ-AU: Nismo. 

TOMAS Reimers: --the internet je dol za trenutek počutje. Torej imamo dve Divs, in smo dogaja, da jim dva ids. Bomo ga pokličete "Prvi" in "drugi". Torej id = "prvi". In bomo, da jim dve barvi. Torej, kako bomo izbrali nekaj z id "prvi"? ALLISON BUCHHOLTZ-AU: Dot ali hash? OBČINSTVO: Sharp. TOMAS Reimers: Sharp, popolna. Sharp, hash, karkoli we-- 

ALLISON BUCHHOLTZ-AU: Veliko stvari je, da ga pokličete. 

TOMAS Reimers: OK. Bomo, da se usede na hashtag, in To je tisto, kar smo šli s. OK? 

ALLISON BUCHHOLTZ-AU: hashtag. 

TOMAS Reimers: Torej hashtag je prvi. 

ALLISON BUCHHOLTZ-AU: Torej lahko tweet seminar-- hashtag CSS, hashtag kul. TOMAS Reimers: hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, ja. TOMAS Reimers: OK. Torej imamo "prvi" in "drugo". Torej, najprej, da bomo imeli Barva ozadja rdeča. ALLISON BUCHHOLTZ-AU: Uh, kolona. TOMAS Reimers: Yup. ALLISON BUCHHOLTZ-AU: Jaz bom tvoj spot-checker. TOMAS Reimers: Allison me je dobil. Ozadje, barva blue-- 

TOMAS Reimers: Purple! 

TOMAS Reimers: Purple. ALLISON BUCHHOLTZ-AU: Da. Purple je moja najljubša barva, in smo ga še ne uporabljajo. 

TOMAS Reimers: Violet. ALLISON BUCHHOLTZ-AU: Violet. Da deluje. 

TOMAS Reimers: Torej smo dogaja, da imajo dve Divs. Oni bo popolnoma prazna. Mi bi verjetno morali imeti nekaj besedila. Torej, "prvi" se bo "HELLO". In "drugo", bo say-- 

ALLISON BUCHHOLTZ-AU: Goodbye. 

OBČINSTVO: - "WORLD". Pozdravljeni, zbogom. ALLISON BUCHHOLTZ-AU: Videl sem jim na koncertu drugi teden. TOMAS Reimers: The Beatles? ALLISON BUCHHOLTZ-AU: Za reals. Oni ne da veliko. Mi ni všeč. 

TOMAS Reimers: Imamo "HELLO" in "NASVIDENJE." In spet, CSS je samo super, saj se zaveda naše barve. Ni treba, da niti Skrbi jih, da obstajajo. Počnejo. 

ALLISON BUCHHOLTZ-AU: Oni obstajajo. 

TOMAS Reimers: Torej CSS Mislim, da ima 255 besed, ki bi govoril o barvi. Če si lahko zamislite barve zunaj tiste 255, kot je, bom navdušena. ALLISON BUCHHOLTZ-AU: Ja. Mislim, da vidva lahko pravkar prišel prav po njem. 

TOMAS Reimers: Torej, tukaj, boste videli, da imamo dva škatle prav na vrhu med seboj, kajne? HELLO in NASVIDENJE. 

ALLISON BUCHHOLTZ-AU: Ni prostora vmes. Oni samo smooshed prav na vrhu drug drugega. 

TOMAS Reimers: Torej prva stvar, Mislim, da bi morali govoriti o je pa tudi say-- ja. Tako da jih CSS predstavlja kot neke vrste škatel. In škatle, so vsebine. In vsebina sedaj je nekako HELLO ali NASVIDENJE in to je to. OK? 

Torej, ena od prvih stvari, ki jih lahko naredimo je, da lahko dodate oblazinjenje. Oblazinjenje pravi, koliko prostora mora pustiti na vsaki strani. Torej, recimo, da želim povedati 10 pik na vsaki strani. In bom seciral, da v sekundi. ALLISON BUCHHOLTZ-AU: Vse te stvari tukaj se bodo predvsem v pikslih za preostali del seminarja. Boste videli, da ima nekaj prostora okoli njega, kajne? Torej, kaj ne vidite, tu je tam Ta nevidna vrste oblazinjenja na vsaki strani, ki pravi, podobno, OK, imate škatlo content-- 

ALLISON BUCHHOLTZ-AU: Želite samo dvigni vpogleda element? 

TOMAS Reimers: Ja, to je dobra ideja. ALLISON BUCHHOLTZ-AU: Prav tako se mi zdi, da pregledajo element dober način da ugotovimo, če je nekaj dogaja narobe, zgodi nekaj nepričakovanega, pregledovanja oznak in videli, kaj to je, kot je prepisana koristno. 

TOMAS Reimers: Torej nisem prepričan če lahko vi vidite to barvo. Lahko? Boste videli to oblazinjenje od vrste roba. In potem vidiš dejanske Vsebnost v modri, kajne? Tako da je zelo Osnove modela box. Imate vsebine. Potem imate oblazinjenje. 

OBČINSTVO: Zakaj ne samo uporabite polje znotraj the-- 

ALLISON BUCHHOLTZ-AU: Right. Saj to je samo izbiro element prav zdaj. 

TOMAS Reimers: Yup. Druge stvari. Torej, kaj je govoril o tem oblazinjenje ukaz za sekundo. Torej, v CSS, meritve morajo imeti enoto. Torej, najprej moraš znesek. Torej, v tem primeru smo dejal 10. In potem naslednji ena smo rekel je pik, px. Drugih, ki so morda imeli, so stvari, kot centimetrov, palcev. Lahko naredite stvari všeč, kar je 10 centimetrov? In to se dogaja, da je smešno. 

ALLISON BUCHHOLTZ-AU: Oh, fant. 

OBČINSTVO: Vau. 

TOMAS IN ALLISON: Ja. TOMAS Reimers: Tako, da je vse oblazinjenje. Jaz bom šel nazaj na pik. 

ALLISON BUCHHOLTZ-AU: pik ponavadi, kot, standarda. Ko pogledaš na veliko spletnih straneh, večinoma delajo v pikslih. TOMAS Reimers: Torej boste videli bodisi pixels-- druge tiste, ki jih vidite je em, ki je eden em je enaka višini pisave ki ga trenutno uporabljate. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS Reimers: To je dober način za povedati, podobno, hočem toliko prostora kot moj pisave je ob. ALLISON BUCHHOLTZ-AU: Ali ne veš, da je. Ti se naučijo nekaj novega vsak dan. TOMAS Reimers: Obstaja Veliko meritev v CS. Predlagam, da jih poiščete. Za vse vaše primere, mislim, točk mora biti zadostna. In oni tudi kaj boste videli v večini primerov, podpisan na spletu. Torej bomo pustite na pik. 

Prav tako lahko, bi moral tako say-- oblazinjenje kompleti vse od blazinicama. Prav tako lahko naredite nekaj podobnega "Padding-top" samo set-- ALLISON BUCHHOLTZ-AU: Mogoče bomo dobili naše "zdravo" hrbet. TOMAS Reimers: --to samo nastavite oblazinjenje na vrhu in nič drugega. Torej štirje ukazi so oblazinjenje-top, padding-bottom, padding-left, in oblazinjenje-desno. 

ALLISON BUCHHOLTZ-AU: Enako kot bi pričakovali za škatlo. 

TOMAS Reimers: Ja. Nič preveč nor tam. Ali to smiselno? Tako, da je oblazinjenje. Grem, da nastavite vse na blazinici nazaj na 10. In potem grem, da se premaknete na meji. 

Torej, kaj je meja, je meja je čuden ukaz. To traja vrste treh stvari naenkrat. Torej, najprej je, kako velik želijo, da so meritve. Spet sem z samo pik. In zadnja stvar, ki sem Naj dodam, da meritve je ena stvar, ki ne potrebuje enoto je 0. To je pravzaprav napačna dati 0 enoto, saj 0 0 čez cm, pik, centimetrov, karkoli. Vse to samo pomeni 0, kajne? Torej, najprej si mu dal meritev. 

Potem si ga dal slog. Tako bom rekel "trdna". In bomo govorili o tem, kaj to pomeni. In potem na koncu, si ga dal barvo. Tako bom rekel "črno". In to so vse stvari, ki smo jih sedaj videla, razen za stil, ampak bomo govorili o tem. Torej ste vi videli meritve, in ste videli barve. In kaj se zgodi, je, da smo dobili to lepo črna meja okoli njega, kajne? Vi vidite, kako je to naredil? 

OBČINSTVO: Ja. 

TOMAS Reimers: Cool. Torej, kaj je to? Torej, najprej, to je en piksel. To je samoumevno dovolj, kajne? Všeč mi je, da je debela en piksel. Ali bi bilo en piksel, vendar sem Povečano, tako da je malo bolj kot to. 

ALLISON BUCHHOLTZ-AU: In imamo to smešno ločljivost TV. 

TOMAS Reimers: Ja. Lahko bi bilo večje, manjši, karkoli. Torej, tukaj je dva-pixel meja. Boste videli, da je dvakrat debel. Naslednja stvar, ki jo imate, je barva. To ni zanimivo. Ne bom govoril O, da, res. 

ALLISON BUCHHOLTZ-AU: Ampak stil morda samo malo zanimivo. 

TOMAS Reimers: Ja. Torej slogu, obstaja nekaj tisti, da vidim uporablja pogosto. Prvi je trdna, naslednjič je pikčasta, in zadnja je črtkano. In tukaj se nizajo. Boste videli, da oni kup pik, kajne? Dober način, da nekako dobili lepo mejo dogaja, črtice so prav tako zelo priljubljena. 

ALLISON BUCHHOLTZ-AU: In potem seveda, jaz sem prepričani, obstaja veliko drugih stilov, ki jih lahko dobite. In imamo veliko niz Povezave na koncu za vaju da vrsta seznanijo z vsebino in poglej več kul CSS. 

TOMAS Reimers: In potem Zadnja stvar, smo govorili o box modeli resnično hitro. Oh, in potem meja, točno tako oblazinjenje, imate tudi stvari, kot so meja levo, border-desno, border-top, meji-bottom, ki vam omogočajo, priti na določeno mejo. Torej, tukaj je samo meja levo opredeljeni. Ali je to smiselno? 

ALLISON BUCHHOLTZ-AU: To je kul način, da se poudari stvari ali dodajanje Meje med različnimi elementi. TOMAS Reimers: Absolutno. Tako, da je naša meja. In zadnja marža. Marže, kot polnilo razen to ni within-- ALLISON BUCHHOLTZ-AU: To je ne okoli elementa ampak dejansko okoli celotnega polje, ki smo jih videli. 

TOMAS Reimers: Ja. Allison je dejal popolnoma. To ni, kot je, v notranjosti element, to je okrog celotnega prostora. To pomeni, da stvari, kot so ozadje ne uporablja. In to je v bistvu pravi, podobno, ne želim ničesar pri tem veliko prostora za mene. Tako kot imamo tukaj stopnja 10 pik. Torej nič v 10 pik mora biti zraven mene. To je vrsta njenih Prostor vendar nekako ni. Tako da je zelo Osnove modela box. Ali to smiselno? Kul, kul. ALLISON BUCHHOLTZ-AU: Awesome. Zdaj mislim, da smo pravkar imamo kul virov da vam bomo sprejeti fantje z zelo hitro. In bomo tudi actually--, imamo internet še? 

TOMAS Reimers: Recimo, vidim, če lahko odprete up-- Naj samo videti, če sem lahko dobite internet hitro medtem Allison govori o ničemer Allison želi govoriti. ALLISON BUCHHOLTZ-AU: Torej basically-- jaz ne vem, kaj lahko povem na tej točki. Vendar so nekateri res dobri viri. To so tisti, ki Tomas in sem uporabil in da dejansko uporablja za prep za to. W3Schools je tista, ki vas Fantje so se morali obravnavati prej. Priporočamo ga za Veliko stvari z CSS. Vem, da sem jo priporočam moj oddelek ves čas. 

Ena od velikih stvari, da ji vam omogoča, da vrste nered s CSS in glej spremembe sprašuje v tem, podobno, dvojno okno ogledati, da ima. Tako vam ni treba skrbeti za vzpostavitvijo lastne spletne strani, oziroma vzpostavitve vhost v vašem lokalni aparat in lokalnega gostitelja, in dobili vse te stvari dela. To je vključena pravica v stran. 

In to je to malo izkušnje, ki jih lahko iti skozi, da se naučijo Več o selektorjev, ali spoznati manipuliranja vaš pisave, ali ozadje ali sliko. In imaš ti pretočni rezultati, ki jih ne bi bilo treba storiti vse drugi prep delo za. Zato ljubim W3Schools. To je čudovito. Ti delajo? 

TOMAS Reimers: Ja. Ne, to ni. Hočeš poskusiti in znova zagnati računalnik? Ali želimo to-- 

ALLISON BUCHHOLTZ-AU: Mislim, dobro, to bo tudi na spletu. Vsi diapozitivi bo na spletu. Tako da sem zelo priporočam delaš ti. 

To je super, saj prav kot goljufija stanja. To je samo vse osnovne ukaze, ki jih imate. To je super, ko ste prvič začenjajo svojo spletno stran. Saj morda ne boste želijo priti v vse real gnjidama kašaste oblikovanje težkih stvari. Samo morate formatirati na način, da nekako smiselno in volje storiti za čas bivanja. In če si zares želite da se v njem, vem To je, kot eden izmed Najljubše reference Tomáš je. Mi smo ga uporabljali za prep, in to je čudovito. To razvijalca Mozille. 

TOMAS Reimers: Torej Mozilla so ljudje, ki naredijo Firefox. In to je samo njihova razvijalec reference, kar mislim, da je super. In ima čudovit Seznam virov. Tako smo have-- 

ALLISON BUCHHOLTZ-AU: In potem je bila nazadnje beležka ko poskušate design vaše spletne strani, navdih od stvari da misliš, da so lepe. Pregledovanje element, pregled izvorno kodo lahko zelo koristno Za poskuša ugotoviti, kako stil svojo spletno stran. 

Pogosto se počutim kot najboljši Tako, poleg poskusov, je samo pogledati stvari, ki so precej. Se mi zdi, da je res težko, da samo nekako oblikovati stvari na svoje, zlasti na začetku. Torej, poglejte na spletnih straneh da boste uživali gledaš. Ugotovimo, kaj naredi jim privlačna za vas. In potem vas prosimo, da poskušali posnemati to. 

TOMAS Reimers: Right. Tudi kot spletne strani kot je ta, lahko vidite tam je definitivno div na vrhu. In potem imaš še en div znotraj tukaj, ki je CSS Awesomeness. In potem imaš kup povezav tukaj. Če ste res samo pregledajo Elementi, ki jih je mogoče razvrstiti po začeli videti, kaj storiti, spletne strani izgledal in kako lahko jaz ponovno, da če bom želel. Ali to smiselno? Tako da imamo samo tri minute levo. Torej vprašanja? Kateri od njih? Da. 

OBČINSTVO: Za barve pravokotnik, kako bi se have-- če si ne želijo gre čez celo stran, bi ki ste jih naredili, da gredo čez samo polovica stran ali samo besedilo? 

TOMAS Reimers: Ja, absolutno. Torej, vidim pravzaprav. Imam dve zamisli. Torej, najprej si Lahko uporabite tudi odstotno. 

OBČINSTVO: Res? 

ALLISON BUCHHOLTZ-AU: Torej nekaj, poiskati je relativno pozicioniranje. To je nekaj, kar smo nimajo časa, da bi dobili v, ampak to je nekaj, kar definitivno Priporočamo, vidva preverjanje ven. 

TOMAS Reimers: Torej odstotki. In videli, kako nam je uspelo samo 50% širine? ALLISON BUCHHOLTZ-AU: Če vam dejansko vedo, število slikovnih pik, ste lahko bolj natančni, da je tako. Lahko dren okrog z njim. Ampak 50%. Če smo bili, da spremenite velikost naše brskalnik da bi bilo manjše. 

TOMAS Reimers: No, to je v bistvu 50% zdaj, mislim. To je 50%, in potem stopnja je bil dodan, da. CSS ima veliko zvijačami. Torej, zdaj je to 50% širine strani. Ampak ne pozabite, da imate 10 pik vzletelo iz vsake strani. Torej, če ste bili, da se premaknete, da proti levi rob brskalnika, potem bi bilo videti, kot 50%. Še enkrat, kot sem rekel, lahko CSS biti veliko ugibati-in-check. Tako kot si mislite kaj je dogaja, da se obnašajo v eno smer, vendar se obnaša popolnoma drugačen način. 

ALLISON BUCHHOLTZ-AU: In ste pravkar dobili pametnejši, in ki ste jo pravkar dobil boljše intuicija za njo, ko se premikate naprej. 

TOMAS Reimers: In postane slabše in slabše. Torej, to je res samo dirko. 

ALLISON BUCHHOLTZ-AU: To je super spodbudni. Želimo jim, da rad CSS. 

TOMAS Reimers: CSS je super. Ne pozabite, da. Druga vprašanja? 

ALLISON BUCHHOLTZ-AU: ena stvar. Kaj drugega? Cool. 

TOMAS Reimers: Awesome. 

ALLISON BUCHHOLTZ-AU: No, če vas Fantje imate vprašanja kasneje, smo vedno na voljo, kot na običajno. Verjetno boste videli nekaj od nas za končne projekte in definitivno na hackathon. 

TOMAS Reimers: Absolutno. In na sejmu. 

ALLISON BUCHHOLTZ-AU: In na sejmu. Oh. 

TOMAS Reimers: Veselite vidim vse vaše awesome-- 

ALLISON BUCHHOLTZ-AU: Bomo videli, vse vaše super spletnih strani da bo lepo. TOMAS Reimers: Vedno lahko glej, podobno, spletne strani ki je imel, kot je, dobro CSS in nato kot tisti, ki niso poskušali narediti CSS. ALLISON BUCHHOLTZ-AU: Tudi drugi stvar, še ena stvar, da preuči se zaženejo. Torej Bootstrap je super. 

TOMAS Reimers: Google, da če you-- 

ALLISON BUCHHOLTZ-AU: Google to. To je čudovito. Boste ljubezen. In sedaj, ko imate osnovno razumevanje CSS, da bomo lahko veliko bolj smiselno. Super. Hvala, fantje. 

TOMAS Reimers: Najlepša hvala.