>> [Muzikos grojimo]
ALLISON Buchholtz-AS: Taigi mes iš esmės tik vyksta
suteikti jums suniokota CSS, nes mes žinome,
kad ji nebuvo taikoma visose sekcijas.
Ir mes tikrai norime įsitikinti, kad jūs vaikinai turi šį įrankį savo žinioje,
nes ji turi galimybę, kad jūsų tinklapis atrodo daug gražiau.
>> Ir jei jūs sukurti svetainę, tada jūs tikriausiai norite, kad ji gana.
Aš turiu galvoje, jūs neturite, bet aš siūlau ją. [Juokiasi]
Jei norite, kad vartotojai jį naudoti, jums gali noriu, kad ji šiek tiek [nesigirdi].
Taigi mes ketiname išbandyti ir duoti jums tiesiog keletas pagrindinių įrankių ir supratimas,
kad, kai jūs einate ir jūs tiriant dalykų apie CSS,
tai nėra baigti svaičiojimas, kaip CSS kartais būtų.
>> TOMAS REIMERS: Taip.
Allison sakė, kad gana gerai.
Taigi, manau, pirmas dalykas, kurį turėtų prasidėti yra tai, kas atitinka CSS?
Taigi CSS yra nuostabus.
CSS--
>> ALLISON Buchholtz-AS: Tai mūsų seminaro pavadinimą.
>> TOMAS REIMERS: Taip.
Tai tikrai svarbu, kad Jūs suprantate, kad tada.
Jei tik atims vieną dalykas, tai, kad CSS, jei nuostabus.
Du yra CSS stendai Kaskadiniai stiliai.
Taigi jos branduolys, CSS stilių, o tai reiškia,
jis leidžia jums stiliaus tinklalapį.
Ir tada, ką tai reiškia, tai būdas pridėti stilių į savo svetaines.
Taigi pagal stilių, mes turime omenyje viską kad ne taip structural--
taip tokie dalykai kaip spalvos, fonas vaizdai, sienos, kaip, apdaila,
maržos.
Mes kalbame apie tai, ką visa tai reiškia šiek tiek.
>> Taigi mes tiesiog nuėjo į priekį ir atidaryti tiek iš tų, sudaryta gedit.
Taigi tai yra index.html.
Ir tai main.css.
Taigi main.css nieko.
ALLISON Buchholtz-AS: Nėra stilius iki šiol.
TOMAS REIMERS: Nėra.
Ir kaip jūs pamatysite, kad tai tikrai negraži svetainėje.
ALLISON Buchholtz-AS: Tai tiesiog.
TOMAS REIMERS: Taip.
Taip, tai nėra negraži, tai tik minimalistinis.
Ir tada čia mes turime index.html.
Ir dėl to greitai Priminti HTML, Allison,
norite tiesiog pasikalbėti apie puslapį?
>> ALLISON Buchholtz-AS: Taip.
Taigi akivaizdu, kad mes turime HTML žymeles, kurios tik pavadinimai HTML byla.
Mes turime antraštę čia su CSS Nuostabumo, which-- jei grįžti.
Kur tai yra?
>> TOMAS REIMERS: O.
Taip, jūs galite pamatyti.
ALLISON Buchholtz-AS: Ir pastebėsite antraštę
tai skirtukas antraštės dešinėje čia.
Ir tada "Sveikas, pasauli!" yra tekstas, kad mes turime tik
rodyti internete puslapis, kuris is-- grįžti.
Atgal.
Kuris yra tik mūsų kūno here-- paprastą tekstą.
Be to, vienas dalykas, pastebėsite, jei peržvelgsite čia
Tomas įjungtas iki jų du iš mūsų skaidrę.
Taigi, kaip ilgai, kaip jūs turite visus trys iš jų, jūs gerai.
Jie gali būti bet kokia tvarka jie nori.
Kas svarbiausia yra tik tai, kad jūs turite kiekvieną iš šių trijų dalykų.
>> TOMAS REIMERS: cool.
Pridėti doc tipą?
ALLISON Buchholtz-AS: Taip.
TOMAS REIMERS: Taip.
Nemokama.
ALLISON Buchholtz-AS: Matyt, Mano mikrofonai nepatinka man.
TOMAS REIMERS: O, mums sek tik o Allison persijungia iš jos mikrofoną.
Taigi taip.
Taigi, mes turime pagrindinį puslapį.
Tai tipo unstyled.
Neturime daug.
Mes tiesiog turime iš esmės tekstą.
Mes turime stiliaus lapą.
Mes turime titulą.
Taigi tik plikas be kaulų komponentai padaryti svetainę.
>> Taigi iš ten, tegul kalbėti apie tai, ką CSS
ir kaip jis atrodo ir visa tai.
Taigi that--
ALLISON Buchholtz-AS: Grįžti į skaidres.
TOMAS REIMERS: Atgal į skaidres.
Ir Allison gali perimti.
>> ALLISON Buchholtz-AS: Woo.
Gerai.
Taigi jūsų CSS failą, jūs ketinate turėti
Šių dalykų vadinamas selektoriai.
Tai bus tik pagrindas savo CSS failą.
Tai tiesiog bus daug ir daug iš jų.
Taigi selektorius.
Tai tik bendras anatomija.
Mes ketiname eiti per pavyzdžiai, nes jei jus vaikinai niekada
stebėjo mano skyrių, manau, panašių dalykų abstrakčiai
neturi prasmės.
Jis visada padeda pamatyti pavyzdžius.
>> Taigi, mes turime tam tikrą valdiklį.
Tai ketina būti kai kurie identifikatorius ką mes norime stilius taikyti.
Ir tada mes galime turėti bet nustatyti taisykles ir vertybes.
Taigi selektoriai, kad jūs galite pamatyti gali būti kažkas panašaus į kūną,
arba dalis su P, arba antraštė, ar kas,
kas norite, kad jūsų HTML žymes būti.
>> Taigi, šiuo atveju, turime kūną.
Ir mes turime tam tikrą taisyklę, kuris tai atitinka
į tai, ką jūsų stilius taikoma.
Taigi, šiuo atveju, turime fono spalva ir šrifto svorio.
Taigi, tai ketina keisti nieko fonas
per bet kurį kūno žymę mūsų HTML failą.
Ir jis ketina duoti tai šis šviesos mėlyna vertė.
>> Taigi jis ketina padaryti fonas šviesiai mėlyna.
Ir tada nieko per organizme yra teks šrifto svorio drąsus.
Taigi tai tik ketina drąsus visi mūsų tekste.
Ir tai tik viena selektorius.
Tačiau jums gali turėti labai daug.
Ir kaip mes ketiname parodyti vėliau, šiek tiek daugiau į tai, kaip
kad darbai ir daugiau pavyzdžių ten.
Viskas, ką jūs norite pridėti?
>> TOMAS REIMERS: Ne
Allison gavo jį.
Mes tiesiog ketiname sumažinti iki pavyzdys čia mūsų pavyzdyje svetainėje.
Taigi leiskite tikrųjų į tai.
Tai tobula.
Taigi, aš tik ketina kopijuoti ir įklijuoti kad teisė į mūsų main.css failą.
Ir aš ruošiuosi jį išsaugoti.
Ir tada mes ją paleisti.
Taigi šalutinis dėmesį, vienas iš labiausiai varginantis dalykų
yra, jei jūs neturite išsaugoti failą, ir tada jums, kaip, perkraukite puslapį,
ir kaip, kodėl nėra pokytis vyksta?
Taip atsitinka.
Taigi čia mes pamatėme, kad mes padarėme mūsų svetainė šviesiai mėlyna fonas
ir kai paryškinti tekstą.
>> Taip pat norėčiau paminėti, jei jūs vaikinai turite klausimų apie viską
mes darome, prašome teisę sustabdyti mumis ir kreipkitės į mus.
Mes visiškai pasirengęs prie lauko klausimus.
>> ALLISON Buchholtz-AS: Akivaizdu, kad su CSS, viskas remiasi pati.
Taigi, jei vienas dalykas nėra prasmės dabar mes
nenoriu, kad į pelkė tave vėliau.
>> TOMAS REIMERS: tad rūšies perpjauti tai.
Taigi jūs norite pradėti su selektorių čia?
>> ALLISON Buchholtz-AS: Taip.
Kaip jau sakiau anksčiau, kūno yra tik mūsų selektorių čia.
Taigi, jei mes einame atgal per mūsų index-- ah.
>> TOMAS REIMERS: Kuris Aš tiesiog uždarytas.
Duok man sekundę.
Taigi failą, Atidaryti, index.html.
ALLISON Buchholtz-AS: cool.
Taigi, jei pastebėjote čia, mes turi šias kūno žymes, tiesa?
Taigi selektorių tik atitinka žodžius, kad mes kalbame apie.
Taigi kūno čia.
Taigi, ką mes pasakyti, everything-- galime grįžti?
Norėčiau tik kaip palieskite ekraną.
Tai būčiau tiek daug aušintuvas.
>> Taigi nieko per tuos kūno žodžius, kuriuos mes matėme
buvo tik, kaip, tekstas, ir apskritai kūnas
nurodo, kaip, fone.
Jei kada nors norėsite keisti foną,
kad ketina būti kūno žyma.
Tiesiog turi šias taisykles taiko jiems.
>> Taigi, jei mes eiti į index.html and-- tikrųjų,
mes galime turėti kažką išorėje organizme?
Jei mes turėjo, kaip, apačia arba kažkas, ji nebūtų taikoma ši.
Bet nieko per šie kūno žymės vyksta
turėti įtakos šio organo selektoriaus, kad mes padarėme.
Taigi, jei jums buvo įvesti kažkas there--
>> TOMAS REIMERS: Leiskite vairuoti tą namą.
Taigi, jei mes turėjome div-- kad yra tik dar žymė galite turėti.
Aš ruošiuosi jį uždaryti.
Arba padarykime tai dalis.
Taigi p stendai dalį.
Ir per tą dalį.
Ir tada aš sakau: "Tai yra tekstas".
Nemokama.
Ir tada aš padariau ši taisyklė taikoma vietoj kūno dalis.
Jūs pamatysite, kaip ji taikoma tik Naujai suformuota dalis, į dešinę,
ne visa tai.
Ar tai prasminga?
>> ALLISON Buchholtz-AS: Taigi visa tai kūnas,
bet dabar mūsų selektorių tik atitinka punkte.
Taigi mes tiesiog drąsus ir mėlyna šiuo konkrečiu dalį,
nes tai yra vienintelis dalykas, kad yra uždara per p tag.
>> TOMAS REIMERS: Ar tai prasminga rūšiuoti kaip viskas piliulę kitų dalykų?
ALLISON Buchholtz-AS: Taip, tiesiog pasakyti, kaip vienas iš geriausių būdų
tikrai gauti patogi su CSS yra tiesiog daryti tai, ko, kaip šis,
tiesiog jį išbandyti.
Tai labai paprasta rašyti kažką iš, paspauskite Atnaujinti, ir pamatyti, kas atsitiks.
Ir kaip su dauguma CS, eksperimentavimas gali dažnai
sukelti daug geriau intuityvus supratimas.
Net labiau nei mums tiesiog, patinka, kalbėtis su jumis.
>> TOMAS REIMERS: Absoliučiai 100% sutinku šiuo klausimu.
Taigi, jei mes einame atgal į tai, pradėkime Sekcijiniai ką šie du padaryti.
Taigi, mes turime dvi taisykles tai.
Taigi pirmasis yra fono spalva.
Ir pamatysite, kad mes jį lygus vertei, šviesiai mėlyna.
>> Taigi CSS, CSS yra tarsi labai laisvi, kaip
jums leidžiama nustatyti spalvą.
Taigi jūs galite nustatyti juos pagal pavadinimą.
Jūs taip pat galite padaryti ką nors panašaus į "raudona".
Ir tada, jei mes einame atgal į tai, Jūs pamatysite, kad fonas yra raudona.
Jūs taip pat galite gauti really-- manau jus gali gauti gana kūrybingi su šiuo,
tu negali?
>> ALLISON Buchholtz-AS: Aš manote, kad galite naudoti HEX.
Ar ne taip?
>> TOMAS REIMERS: Taip.
Taigi, galite naudoti HEX.
Bet aš galvoju, vardas išmintingas.
Ar ne ten?
ALLISON Buchholtz-AS: Jūs galite tai padaryti labai nedaug.
Beveik kaip ir dauguma spalvų, kad jūs gali name-- kaip, manau, lašišos yra vienas.
>> TOMAS REIMERS: Mes gonna pabandyti lašiša.
ALLISON Buchholtz-AS: Aš manau Chartreuse yra ten.
TOMAS REIMERS: Taip.
Žr?
Taigi galite gauti gana kūrybingi.
>> ALLISON Buchholtz-AS: Jūs gali gauti gana kūrybingi.
Kaip, jei jūs galite galvoti apie spalva, tai tikriausiai ten.
Jei tikrai norite gerai detalė, galite eiti hex.
>> TOMAS REIMERS: Taip.
Taigi šešioliktainis.
Jei vaikinai prisiminti šią atgal iš seno PSET, Vaizdo Atkurti,
vaikinai turėjo spręsti Šių HEX vertybes.
Ir tarsi Priminti kas tai yra, HEX turi tris reikšmes išsaugotus jį.
Taigi, tai grupėse du etapus.
Pirmieji du atstovauti raudoną vertę.
Antrasis yra žalia vertė.
Ir paskutinis yra mėlynas?
>> Taigi FF atsitinka atstovauti šešioliktainis 255.
Taigi jūs turite 255 raudonos, 255 žalia ir 0 mėlyna.
Ir vertės svyruoja tarp 0 ir 255.
>> AUDITORIJA: Teisė.
Taigi, iš esmės, mes galime ieškoti dėl bet kokios spalvos norime internetas,
ir nustatyti iš tiesų-nežinoma spalva spektras Combo,
ir tada mes galime įdėti jį?
ALLISON Buchholtz-AS: Būtent.
Taigi jūs turite gana daug visiškai kontroliuoti daugiau spalvų norite per CSS.
Ar mes ketiname kalbėti apie fono paveikslėlius vėliau?
Arba mes norime tai padaryti?
>> TOMAS REIMERS: Taip.
Absoliučiai.
Taigi, pirmiausia, tiesiog parodyti, kad raudona ir žalia yra geltonos spalvos.
Ir jei jums reikia šiek tiek padėti rasti tai, jūs
"Google" gali kažką kaip "Color Picker".
ALLISON Buchholtz-AS: O, tai taip gera.
Aš myliu Color Picker.
>> TOMAS REIMERS: colorpicker.com yra geras pavyzdys.
Ir čia, jūs pamatysite, kad jūs turite pilnas Photoshop kaip Color Picker.
>> ALLISON Buchholtz-AS: MM-hm.
Be to, kietas dalykai jums gali generuoti spalvų schemas
kad jūs neturite, kaip, Avarija spalvas.
TOMAS REIMERS: Ir tada čia hex vertė čia.
Taigi jūs visada galite rasti internete esmės vietos gauti šešioliktainį vertę.
Tai ne rūšiuoti, kad tik, kaip mes pamatyti pasaulio spalvas numerius.
Tai daugiau, kad mes rasti internete ir sužinoti, kokia spalva norime,
o tada imtis numerį žemyn.
Kadangi tai tik tikrai paprasta būdas nuoroda dalykų CS.
>> ALLISON Buchholtz-AS: Ir tada ten also--
Aš pamiršti tikslaus pavadinimo svetainėje.
Bet tikrai, aš manau, ką nors iš "Adobe"
kuris generuoja spalvų schemas už jus, kuris yra tikrai cool, nes jūs
definitely-- tai kartais sunku išsiaiškinti,
oh, jei noriu naudoti šią spalvą, kas gali būti dar viena naudinga vienas
naudoti kitur mano svetainę, patinka, kad ji graži ir darni.
>> TOMAS REIMERS: Allison kalba apie vienas Adobe Kuler vadinamas, manau.
Tai K-U-L-E-R.
ALLISON Buchholtz-AS: Manau, kad taip.
Aš esu gana įsitikinęs, kad tai viena.
>> TOMAS REIMERS: Mano mėgstamiausia yra visada buvo Spalvų schema Designer.
>> ALLISON Buchholtz-AS: Ooh.
>> TOMAS REIMERS: Kuris yra now--
>> ALLISON Buchholtz-AS: Ak, tai gražus.
>> TOMAS REIMERS: Ir jūs iš esmės gali pasakyti, kaip,
Noriu tris spalvas viena šalia kitos.
Ir tada darykime kažką gražaus.
Ir tada jūs galite gauti pavyzdį kas, kad gali atrodyti.
Ir tada, jei jūs Pakimba virš bet juos, ji suteikia jums hex vertę.
>> Taigi tiesiog kaip geras būdas pradėti galvoti apie spalvų schemos
arba kokios spalvos į svetainę gali gerai eiti kartu.
Kadangi, kad gali būti stebėtinai ne taip lengva pasiimti, kaip jūs manote.
Ir tada kitas kietas dalykas Aš visada rasti apie šią svetainę
tai, jei paspausite pavyzdžiai, jis bus parodyti, ką pavyzdį svetainę
gali atrodyti naudojant šią spalvų schemą.
Bet kokiu atveju.
>> Atgal į faktinę CSS.
ALLISON Buchholtz-AS: Bet, žinoma, mes žino šios nuorodos gali būti naudingos.
TOMAS REIMERS: Ne, jie tikrai gali būti naudingas.
Taigi antrąjį taisyklė, Allison?
>> ALLISON Buchholtz-AS: Taip.
Antroji taisyklė yra tik atitinkantis mūsų šriftu.
Taigi šrifto svoris yra tik rūšies of-- taip svoris būtų
, jei norite tiesiog, kaip, normalus arba, kaip, plonesni šriftai,
arba šiuo atveju, kaip, paryškinti.
Aš pamirštu.
Kas, jei norite it-- ten plonesnis vienas ne tik, kaip, normalu?
TOMAS REIMERS: Aš ne iš tikrųjų žinoti, jei yra plonesnis vienas.
ALLISON Buchholtz-AS: Aš pamiršti.
Taigi šrifto svorio mes paprastai tik naudoti paryškinti.
Jei norite gauti tikrai į tai, kad mes ketiname parodyti jums.
W3Schools turi visas skirtingas dalykų, kuriuos galite padaryti šriftus.
Bet iš esmės, jei jūs kada nors norite nieko keisti apie šriftu,
ji visada bus, kaip, šrifto kažką.
Taigi tai bus panašiai, font-family jei esate bando pakeisti faktinį tipą.
Tai bus font-style, jei jums nori padaryti jį kaip kursyvu,
ar kursyvu arba Papuošalą.
Arba net šrifto spalvą, jei norėjome pakeisti.
>> TOMAS REIMERS: Yup.
Taigi jūs galite tai pakeisti.
Ir tarsi tik Priminti dabar, todėl jūs galite
matyti, kad mes turime selektorių čia.
Mes turime šiuos vingiuotus skliaustus.
Ir tada mes turime taisykles aptverti kabliataškiais.
Ar tai prasminga?
Taip?
Nemokama.
Taigi, jei tai yra good--
>> ALLISON Buchholtz-AS: Atgal.
TOMAS REIMERS: Pakalbėkime specialiai apie kokios selektoriai turime.
"Priežastis dabar mes rūšiuoti tiesiog parodė žymes.
Tačiau vaikinai gali matyti patikimas.
Tarkime, jūs turite dvi pastraipas puslapyje ir jums
nori, kad būtų galima stiliumi vienas, bet ne kitos,
jūs ne tik nori apriboti save turi naudoti kitokį faktinį HTML
žymės suteikti jiems skirtingus stilius.
>> Taigi, mes turime tris pagrindinius tipų selektoriai.
ALLISON Buchholtz-AS: Taip.
Taigi, mes turime žymeles, o tai, ką mes jau kalbame apie dabar.
Taigi, kad tipo kaip savo kūno ar p.
Ir tada mes turime klasę, kuri yra kai mes ją apibrėžti mūsų CSS failą,
ji visada bus dot, nepriklausomai nuo Jūs norite, kad būtų jūsų klasės pavadinimas.
Ir tai gali būti taikoma keliems dalykų.
>> Tarkime, jūs turite penkis punktus ir du iš jų trijų
reikia grupuotės pats, Jums bus taikoma klasę į jį.
Ir tai tik taip, kaip mes tai padaryti.
Mes padėsime jums pavyzdžiu jei tai iš tikrųjų rodo.
Bet jei jūs turėjo gal šiek tiek tegus p, po to, jums reikės rašyti,
klasė lygi neatsižvelgiant klases norite kreiptis į jį.
Taigi nepriklausomai nuo klasės selektoriai, kad mes norime taikyti šią konkrečią dalį,
galėtume tiesiog parašyti, kaip šis.
Žinoma, aš manau, kad pavyzdį bus daug konkretesnis.
>> Kita turime yra numeris, kurį mes pažymėti
su maišos ar svarą ar hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON Buchholtz-AS: Octothorpe.
Tai irgi veikia.
Ir tai iš tikrųjų turėtų būti unikalus.
Jos turėtų būti taikomos tik vienas dalykas, į savo puslapį.
Taigi, ar tai specifinė dalis, arba kai kurie sąrašo elementą, ar kas,
tai turėtų būti unikalus.
Ir tuo pačiu būdu, kad mes tiesiog pasakyti, kaip, class = "grupė 1 Class2"
tai gali būti tiesiog id ką turime.
TOMAS REIMERS: Taip.
Taigi leiskite tikrai kalbame apie pavyzdžių čia.
Ir aš tik ketina pasinerti tiesiai atgal į kodą.
Taigi pažvelkime į mūsų HTML.
Ir taip mes dabar turime vieną punktą.
Tai tekstas.
Aš tik ketina keisti tai. "Tai yra tekstas 1."
Ir tada mes ketiname turi "Tai tekstas 2."
>> ALLISON Buchholtz-AS: antrasis.
TOMAS REIMERS: Yup.
Taigi dabar mes turime "Tai tekstas 2", tiesa?
Ir mes ketiname pamatyti, kad jei mes perkraukite puslapis, ką mes ketiname rasti
yra mes gonna find--
ALLISON Buchholtz-AS: Ooh.
TOMAS REIMERS: Taip.
Mes ketiname rasti "Tai tekstas 1 "ir" Tai tekstas 2. "
>> ALLISON Buchholtz-AS: Ir iš miela geltona spalva.
>> TOMAS REIMERS: Ir pamatysite kad mūsų selektorių dabar,
kuri taikoma p s, arba pastraipas, paveikia abu iš jų,
nes abu patenkinti sąlyga, kad jie abu p tag.
Tai turi prasmę.
Taigi klausimas yra gerai, kas jei mes norėjome gauti tik vieną?
Taigi lygiai taip pat kaip Allison buvo sakydamas: mes turime dvi kitų būdų, kaip tai padaryti.
Aš ruošiuosi pradėti id.
>> ALLISON Buchholtz-AS: Pradėkime id.
>> TOMAS REIMERS: Ir tiek iš jų yra atributai.
Taigi atributai egzistuoja HTML.
Ir ką jie yra kažkas, kad jūs įtraukiate
žymės viduje, kuris yra atskirti nuo tegus vardu.
Taigi jūs galite turėti kelis atributus.
Taip?
>> ALLISON Buchholtz-AS: Aš tik ketina pasakyti, iš jūsų, pavyzdžiui iš PSET 7
jei kas nors iš jūsų bando suderinti viskas iki centro,
jums gali tekti naudoti "Tekstas align = centrą."
Ir jūs pastebėjote, tikriausiai jis toks ir turėjo centre
Jūsų tekstas arba jūsų naršymo juostoje.
Taigi, kad tik taip atributas kad jums gali būti susipažinę su.
TOMAS REIMERS: Yra krūva požymių, kad jums pamatyti.
Taip.
Kaip gera nuoroda į PSET 7 d.
Mes turime ID.
Jūs taip pat gali turėti klasė, tokie dalykai kaip šis.
Vieno tegus gali turėti daug atributus.
Taigi pradedant id, tegul apsimeta mes nori turėti ID of-- aš nežinau.
Mes jį vadiname ypatinga, nes tai viena, mes
ketina padaryti drąsus, ir pabrėžti ir ką.
ALLISON Buchholtz-AS: Tai viskas bus super ypatinga.
TOMAS REIMERS: Taigi šis vienas, mes turime id ypatingas.
Taigi, būdas pasirinkti, kad, tuomet, yra į main.css, o ne turėti p žymeles,
jūs # special, gerai?
Ir tai parenka dalykas su id ypatingas.
Ar tai prasminga visiems?
AUDITORIJA: Taip.
TOMAS REIMERS: cool.
Taigi dabar, jei mes einame atgal, mes see-- šūksniais.
Taip.
Pamatysime, kad ji tik parenka vienas su id ypatingas.
Taip?
Skamba gerai.
Taip.
>> AUDITORIJA: Ar kas nors turi priskirti tiek klasėje ir id?
>> TOMAS REIMERS: Taip.
AUDITORIJA: Gerai.
Ir kas tada atsitiks, jei tada duoti tai keletas CSS, kad konfliktas taisyklės?
TOMAS REIMERS: Absoliučiai.
Mes tikrai vyksta kalbėti apie tai.
Taigi, ką jūs gaunate ne, jūs taip pat gali turėti pamokas.
Taigi tegul apsimeta turėjau trys punktai ir aš
norėjau stiliaus pirmasis du, bet ne trečią.
Na, jūsų pirmasis idėja gali būti gerai, aš gali tiesiog suteikti antrasis id.
Bet jūs negalite, nes id, lygiai taip pat kaip Allison buvo sakydamas:
turi būti unikalus.
>> Taigi vietoj id, ką galima naudoti yra, galite naudoti klasę.
Ir class-- ką jis leidžia Jums reikia padaryti, tai iš esmės teigia,
šis priklauso, kaip grupės dalis.
Šiuo atveju, mūsų grupė vadinama ypatinga.
Ir tai, ką mes ketiname daryti, tada yra mes ketiname say-- nei svarą,
mes ketiname naudoti tašką.
Gerai?
Ir pastebėsite, kad svaro ir taškas egzistuoja tik CSS failą,
nepatenka į HTML.
ALLISON Buchholtz-AS: Taip.
Svarbus skirtumas.
>> TOMAS REIMERS: Turiu turėjo tiek daug kovos,
nes aš įdėti maišos į HTML ir tada tiesiog jaučiau kvaila ilgą laiką.
Pažiūrėkite, kaip jis atrenka abu tie su tos klasės?
Nemokama.
>> Dabar, ką gali turėti kelis užsiėmimus.
Tarkime, aš norėjau, kad pirmasis du turėti geltoname fone
ir antrieji du turėti šrifto spalva mėlyna.
Gerai.
Aš tikrai nežino, kodėl aš nori tai padaryti, bet aš galiu.
>> ALLISON Buchholtz-AS: Might ne rekomenduojama jį savo interneto svetainėje.
Bet mūsų tikslais, jis bus daryti.
>> TOMAS REIMERS: Tai ne geras spalvų schemą.
ALLISON Buchholtz-AS: Na, geltona ir mėlyna yra mano vidurines mokyklas spalvos.
Aš nežinau, nors.
TOMAS REIMERS: Allison s aukštos mokykla turėjo didelę spalvų schemą.
[Juokas]
Taigi, ką mes galime skambinti tai Pavadinkime this-- todėl mes turime specialų
ir mes turime gana.
Aš siūlau, už tai, jūs naudojate daug aprašomosios pavadinimai.
ALLISON Buchholtz-AS: Taip, aš norėčiau vadinu tai, kaip, geltona arba mėlyna.
>> TOMAS REIMERS: Nesame tikrai padaryti tikrą svetainę,
kuris yra, kodėl mes ne daro.
Bet jei jūs iš tikrųjų turėjo realią svetainę, jūs
gali turėti, pavyzdžiui, straipsnis antraštė, Straipsnis turinį, pirmasis žodis,
dalykų, pavyzdžiui, kad, leidžiantys Jums bus daug daugiau aprašomojo pobūdžio.
Tai yra tikrai kaip kintamųjų.
Jie turi būti pavadintas tokiu būdu, kur galite, like-- taip, kaip toks.
Puikiai.
>> Taigi fono spalva.
Ir tada mes ketiname say-- taip būdas pakeisti spalvą yra tiesiog "spalva".
Ir mes ketiname padaryti mėlyna.
Štai atvėsti.
Taigi dabar mes turime Pirmieji du yra ypatinga.
Kitas vienas ketina turi "class = gana."
ALLISON Buchholtz-AS: Ir tada jūs norite pridėti "gana" į vidurinę vienas.
TOMAS REIMERS: Yup.
Ir tada į vidurinę vieną, pridėti "gana", kas atsitinka,
yra tiesiog turėti erdvę.
Taigi klasės atributas yra erdvės atskirtos sąrašas
visų klasių kurios taikomos toje žyma.
Gerai?
Tai ne taip, kaip tai vienas priklauso kai specialios klasės tipo vadinamas
"Ypatinga, erdvė, gana."
Jis priklauso dviejų classes-- ypatingas ir gana.
Taip?
Nemokama.
>> Ir tada, jei mes žiūrime ne tai, kas vyksta, mes
ketiname pamatyti, kad pirmasis turi geltoname fone, juodas tekstas.
Antra one--
>> ALLISON Buchholtz-AS: --Name drąsūs geltoname fone su mėlynu tekstu.
Ir paskutinis mūsų tik vienas turi mėlyna tekstas, kad mes, priskirtas prie jo.
>> TOMAS REIMERS: Kietos?
Kaip selektoriai dirbti?
Nuostabus.
>> ALLISON Buchholtz-AS: Ar mes norime kalbėti apie konflikto metu tada?
>> TOMAS REIMERS: Taigi taip.
Absoliučiai.
Taigi, kas atsitinka, kai jūs turėti konfliktą, tiesa?
Tarkime, kad pirmasis nustato kažką like--
ALLISON Buchholtz-AS: Gal tai vienas keičia fono?
TOMAS REIMERS: Taip.
Taigi mes ketiname padaryti "gana" pakeisti į lašišų fone.
ALLISON Buchholtz-AS: Jūs tiesiog su visi didieji spalvos šiandien Tomas.
TOMAS REIMERS: Taip.
Nes aš sužinojau, aš galiu naudoti lašišą kaip tikra spalva.
Taigi mes tik ketina tai padaryti.
Aš taip pat manau, saulėlydis yra tikra spalva.
AUDITORIJA: Saulėlydis realus spalva?
ALLISON Buchholtz-AS: Pabandykime ją.
TOMAS REIMERS: Po šio demo tik todėl, kad, jei jis sujaukia,
Aš nenoriu būti derinimo.
Taigi mes žinome, lašišos yra tikra spalva.
Todėl bet spėlionės apie kas nutiks?
>> ALLISON Buchholtz-AS: Bet idėja?
>> Auditorija: [nesigirdi].
>> TOMAS REIMERS: Taip.
Taigi jūs turite jį visiškai teisus.
Iš esmės, tai užima paskutinė taisyklė, kad jis buvo priimtas.
>> ALLISON Buchholtz-AS: Taigi tai yra kur pakopinių įsigaliojimo.
>> TOMAS REIMERS: Taigi prisiminti, kaip mes turėjo, kad pakopinių stilių?
Taigi, kad mes rūšies reiškia kad mes turime taisyklių krūva
kurioje taikyti ant kito viršaus, ir jie taip pat gali pakeisti viena kitą.
>> ALLISON Buchholtz-AS: Taigi nepriklausomai s apačioje
pakeis kokia yra viršuje.
Jūs galite turėti taisykles, kurios visiškai paneigti kažką iš anksto.
Štai kodėl jūs norite būti atsargūs, kai jūs stilius,
todėl jūs ne sukurti taisykles, kurios jūs tik visiškai privalomais.
>> TOMAS REIMERS: gal ar norite perrašyti taisykles.
>> ALLISON Buchholtz-AS: O gal jūs darote.
Taip.
>> TOMAS REIMERS: Apsimesti turite klasė, kuri taikoma ir daugelis dalykų,
bet tarkim norite pakeisti fono spalva raudona ir šrifto
svoris paryškinti dauguma dalykų, bet vienas,
jūs tik norite fono spalvą būti raudonas, bet norite, kad visi kiti
NT, galite ką nors padaryti kaip "font-weight = normalus"
kuri tada anuliuoti tą drąsų kaita.
Taip?
Vėlgi, geriausias būdas, manau, Allison pareiškė, kad ji yra tik praktika.
>> ALLISON Buchholtz-AS: eksperimentavimas.
>> TOMAS REIMERS: Praktika, praktika, praktika, ir eksperimentuoti.
Žinau daug žmonių, kurie mano, CSS yra tik atspėti-ir-Check daug
tuo dienos pabaigoje, kur, jei norite padaryti something-- patinka,
jūs turite idėją, tačiau Jūs vis dar tikriausiai reikia
jį išbandyti, kad įsitikinti, žinote, kaip jis atrodo.
>> AUDITORIJA: Kai jūs kreipiatės klases, daugiau nei vienas
į toje pačioje dalyje ar skyriuje, daro
nesvarbu kokia tvarka jūs galite įrašykite juos į kabutes?
>> TOMAS REIMERS: Ne, ne visi.
>> ALLISON Buchholtz-AS: Kokie klausimai yra per savo CSS stiliaus lapo tvarka.
AUDITORIJA: Gal galėtumėte pakartoti klausimą?
TOMAS REIMERS: O.
ALLISON Buchholtz-AS: Per klasė, kai jūs suteikiant klasės
kažką į HTML, daro tai svarbu, kokia tvarka jie į?
Nesvarbu užsakymą.
Svarbu tai, kad siekiant klasė selektoriai per savo CSS,
per savo stilių.
>> TOMAS REIMERS: Garso gera?
>> ALLISON Buchholtz-AS: Gražus.
>> TOMAS REIMERS: Ir tada mes ketiname toliau to--
ALLISON Buchholtz-AS: Ką mes turime toliau?
Aš pamirštu.
Oi, mes tiesiog turime pavyzdžių.
Bet mes rūšies padaryta tiems.
Mes padarėme pavyzdžius skristi.
>> TOMAS REIMERS: Gauname, kad sujungti selektoriai greičiau.
>> ALLISON Buchholtz-AS: O, mes turime sujungti selektoriai.
TOMAS REIMERS: Taigi kai pavyzdžiai yra mes turime
# Dog-- svaras arba grotelėmis, arba Octothorpe, ar kas
norite skambinti that-- aštrus.
>> ALLISON Buchholtz-AS: Sharp šuo.
>> TOMAS REIMERS: Tada jūs turite .pets.
Kažkas turi šunų ID, yra tik vienas šuo puslapyje.
Kažkas turi id katė, ten tik vienas katinas.
Gali būti daug augintiniai puslapyje.
Štai kodėl mes davė, kad klases.
Jūs turite P pavyzdys.
Ir tada taip, viena iš Paskutinis pavyzdys, kuris
yra kažkas, ką mes ne kalbėjo apie, kas atsitinka, kai jūs juos sujungti.
Taigi p.pets.
>> Taigi, kad grįžkime prie kodą ir įvesti another-- taip.
Taigi vėl čia.
>> ALLISON Buchholtz-AS: Aš jaustis kaip tai really--
kaip tik ieško per pavyzdžių yra tikrai būdas sužinoti tai.
Taigi tai, ką mes darome.
>> TOMAS REIMERS: Taigi tegul apsimeta mes tik norite pasirinkti teksto 2, tiesa?
Taigi mes tikrai negali padaryti, kad su id.
Na, mes galime padaryti, kad su id, tačiau ji neturi ID.
Galėčiau pridėti dar vieną, bet tegul apsimeta kad aš nenorėjau pridėti vieną
ar jis jau turi ką nors kita.
Aš negaliu padaryti, kad su tuo.
Žymė yra tikrai ne vienintelis, tiesa?
Ir nei yra klasė.
Bet jūs galite suderinti šiuos dalykus.
Tarkime, mes norėjome padaryti kažką kuri taikoma tik dalykų, kurie
turi klasės specialiųjų ir kurios klasės gana.
>> Taigi, ką jūs galite padaryti, yra main.css, galite pasakyti, tegul pirmas ištrinti.
Galite derinti jų.
Taigi jūs galite padaryti .special.
Nėra vietos.
Tiesiog .special.pretty.
Ką tai reiškia, kad yra kažkas, kuris yra tiek ypatingas ir gana.
Ar tai prasminga?
Ir jei mes einame čia ką jūs ketinate pamatyti
yra ši taisyklė taikoma tik antrasis, kuri turi tiek iš tų.
Ir jūs galite padaryti, kad daug dalykų.
Galite say-- tegul apsimesti, aš tik norėjau
daryti dalykus, kurių klasę gana ir kuris taip pat yra dalis žymė.
Taigi p.pretty.
Tarkime, kad turėjau kažkas gana TAG kūno.
Gerai?
Galiu paleisti tai ir aš matome, kad tai tik
ketina kreiptis į dalykus, kurie punktai su klasės gana.
Ir jūs galite sujungti šias, Iš esmės, kaip daugelis, kaip jūs norite.
Taigi, galite tiesiog įdėti juos kartu.
Ar tai prasminga?
ALLISON Buchholtz-AS: Taigi tai kokios yra daugiau naudingas
kai Tomas sakė anksčiau, gal turite labai sudėtingą svetainę,
ir jūs jau turite daug Šių taisyklių raštu,
ir jums tiesiog reikia sujungti du iš anksčiau.
Kaip vietoj raštu visumą Naujas selektorių ir jį pakeisti ten,
galite tiesiog sujungti juos kur sutampa.
>> TOMAS REIMERS: Arba jūs gali rasti out-- kartais
ten viena klasė, kuri daro Šrifto spalva kaip mėlyna,
ir ten dar klasė, kuri daro fono mėlyna.
Ir tai tiesiog neveiks.
Taigi rašote ypatingas atvejis, kur, like-- bet jei jis turi tiek, ką jūs
ketina padaryti, tai jūs ketinate padaryti šį vieną tokį mėlyną atspalvį
ir tai vienas tai kitas atspalvis mėlyna.
Teisė?
>> ALLISON Buchholtz-AS: Geras tiems išimčių rūšių.
TOMAS REIMERS: Taigi, norint galvoti apie problemas
kad gali kilti, kai jūs juos sujungti.
Nemokama.
Taigi atgal į mūsų pristatymas.
ALLISON Buchholtz-AS: Mes beveik ten.
TOMAS REIMERS: Ir tai sustojo prijungti.
ALLISON Buchholtz-AS: O, ne.
ALLISON Buchholtz-AS: CS ne biuro, interneto krinta.
Oi, ironija.
>> TOMAS REIMERS: Taigi, laimei, mes galime pateikti be interneto, manau,
nes mes turime visas skaidres čia.
Taigi pakalbėkime apie santykiai žymes.
ALLISON Buchholtz-AS: Teisė.
Taigi tiesiog rūšies vyksta nuo to, ką pasakė Tomas
tai tik dar vienas būdas tai padaryti.
Taigi, mes turime tam tikrą tėvų selektorius su vaikų selektorių.
Taigi, šiame pavyzdyje čia, mes kai korpusas su klasės naršymo juostoje, mygtuko klasė.
Ak.
>> TOMAS REIMERS: Oi, atsiprašau.
>> ALLISON Buchholtz-AS: Ir iš esmės, ką tai reiškia
yra pasirinkti visus vaikams, pavyzdžiui, visų šių parinktuvams rūšių,
per šį patronuojančios selektorių.
Ir tie, kurie vieninteliai tai kada nors taikyti.
Aš nežinau, jei jūs turi geresnį būdą of--
TOMAS REIMERS: Taigi aš atspėti, kaip galvoti
apie tai prisiminti prieš tai, kaip mes tarsi juos kartu.
Ir tada tai reiškia, kad vienas elementas kurie atitinka visus šiuos.
Ką tai sako, aš noriu jums suderinti viską
per some-- Noriu jums rasti rankenėlę.
Ir tada per, kad aš noriu jums atitiktų naujus dalykus.
Teisė?
Taigi CSS, svabiausia rūšiuoti galėtų atitikti šiuos elementus.
Ir jūs galite pabandyti suderinti straipsniai, kaip kitų daiktų.
>> Taigi leiskite tikrųjų pavyzdį, ir mes manome, kad jums paaiškinti.
Taigi tegul apsimeta turime ypatingą, ypatingą gana nepriklausomai.
Ir tada mes turime ryšį, gerai?
Taigi nepamirškite, yra ryšys.
Jis nesiruošia niekur eiti.
Ir mes ketiname suteikti jai klasė nuorodą, I guess.
Leiskite pateikti jį į class-- man idėją.
ALLISON Buchholtz-AS: cool.
TOMAS REIMERS: Coo-- tegul eiti tai klasei gana.
Kodėl gi ne?
>> ALLISON Buchholtz-AS: Gerai.
TOMAS REIMERS: Taigi dabar gana dalykai
ketinate padaryti foną mėlyna, fono spalva lašišos.
Tai turi prasmę.
Ir jei mes darome this--
>> ALLISON Buchholtz-AS: Ar norite pridėti tekstą
taip pat interneto nuorodą iš tikrųjų rodo?
TOMAS REIMERS: Tai Būtų gerai skambutis.
ALLISON Buchholtz-AS: "Priežastis teisė dabar mes tiesiog gonna get nieko.
TOMAS REIMERS: Taigi tai yra ryšys.
"Tai yra ryšys."
Oh, ir tai vyksta yra dar viena nuorodą.
Leiskite jai suteikti klasė "kietas".
Jūs teisus.
Nemokama.
Taigi dabar mes ketiname patraukti tai.
Mes ketiname mesti vieną.
Mes turime vieną ypatinga žymė, ir mes taip pat
ketinate turėti vieną gana žyma.
Ir dabar ką mes ketiname padaryti, tai mes ketiname padaryti cool--
ką mes norime, kad ji daryti?
ALLISON Buchholtz-AS: Ar mes galime padaryti didesni?
TOMAS REIMERS: Leiskite jam suteikti sieną.
ALLISON Buchholtz-AS: Mes galime sienos.
TOMAS REIMERS: Taip.
Taigi mes ketiname daryti kažką kaip, sienų is-- ir mes
ketina paaiškinti visa tai per sekundę.
Dėl now--
>> ALLISON Buchholtz-AS: į lauką modelį.
TOMAS REIMERS: Bet dabar, mes tik ketina suteikti jai sieną.
Taigi, ką tai reiškia, jūs esate ketiname pamatyti šias nuorodas.
Ir jūs ketinate pamatyti, kad jie turi šie, kaip, negraži juoda sienos, kuri
yra kietas.
>> ALLISON Buchholtz-AS: Mūsų svetainė yra toks gana.
>> TOMAS REIMERS: Taip.
Mūsų svetainė yra awesome.
Taigi šie du dalykai yra nuorodos ir jie atrodo.
Dabar galime apsimesti I tik norėjau tai padaryti
jeigu jis nebuvo per kažką kuri turėjo lašišos fone.
Taigi nepamirškite, kad šis turi lašišos fone,
nes tai klasei gana.
>> Bet mes norime pasakyti, kad tik atvėsina kuris yra klasės specialus, ne klasėje
gražus, turi turėti tą sieną.
Na, ką jūs galite padaryti, tai jūs galima sakyti, .special, erdvės, .cool.
Ir ką tai daro, kai jūs manote apie tai, ar jis iš esmės sakydamas,
Gerai, suraskite man viską kuris atitinka ypatinga.
Tada tose žymeles, raskite man viskas, kas gerai.
ALLISON Buchholtz-AS: Taigi dar vienas būdas kad gali būti gera galvoti apie tai,
pareikšti jį atgal į C, yra kaip ir taikymo sritį idėja.
Taigi, kai jūs turite kai kurie selektorių, kaip ir tuos,
kad mes dirbame jau prieš tai, visą savo tinklalapį, visi jūsų HTML
per savo taikymo sritį, tiesa?
Bet kai mes turime tai tėvų ir vaikų santykiai,
tai taip, jei jūs susiaurinimo, kur Jūs ieškote tam tikroje konkrečioje vietoje,
tarsi, kaip, mes ieškome per o specifinė funkcija
visos mūsų failą.
AUDITORIJA: Taigi atsižvelgdamas į tai, būtų tai jau nerūpėjo, jei mes turėjome changed--
ALLISON Buchholtz-AS: užsakymas?
AUDITORIJA: --Draugai klasė CSS į .cool, erdvė, .special?
ALLISON Buchholtz-AS: Taip, nes tada
sakyčiau, apimtis jį viskas, kas turi atvėsti,
ir tada pažvelgti, kas has-- I reiškia, kaip, šiuo atveju,
Aš nemanau, kad tai būtų pakeitęs.
>> TOMAS REIMERS: Jei mes pasakė, ką?
Atsiprašau.
>> ALLISON Buchholtz-AS: jei mes sritis, kad ji atvėsti ir tada
ieškoti dalykų iš ypatinga, tai būtų ta pati, iš tikrųjų.
>> TOMAS REIMERS: Taigi ji negali būti.
>> ALLISON Buchholtz-AS: jis ne?
Oi, oi gerai.
Aš esu neteisus.
>> TOMAS REIMERS: Taigi priežastis tai different-- bendra mistake--
yra tai, kad dabar tik ryšys yra kietas, tiesa?
Manau, mano klausimas jums vaikinai yra kas Šiame puslapyje yra suderinta .cool?
Yra du žodžius čia, tiesa?
Kuris tai vienas ir šis.
Abi rungtynės kietas.
Jokia kita daro.
Taigi, jei jūs sakėte, .cool, erdvė, .special, ką jūs ketinate pasakyti,
per šias žymeles, kas yra ypatinga?
ALLISON Buchholtz-AS: Hm.
Štai ką it-- dešinę.
Nes tai kaip tik kažką čia.
>> TOMAS REIMERS: Taigi jis atrenka nieko.
>> ALLISON Buchholtz-AS: kadangi su ypatinga, mes per šias žymeles čia.
>> TOMAS REIMERS: Tie ir tie.
AUDITORIJA: Gerai.
Taigi tie žymes nuo laivapriekio velniop?
>> TOMAS REIMERS: Taip.
Ar tai prasminga?
Kaip tai iš esmės bando susiaurinti taikymo sritį.
ALLISON Buchholtz-AS: Taip.
Manau, kad tai tikriausiai Paprasčiausias būdas galvoti apie tai.
>> TOMAS REIMERS: Taigi, mes nustatėme, kad šis ir mes radome tai tiek derinama ypatinga.
Ir tada mes klausia, per šie vaikinai, kas gerai?
Ir per šį vieną, tai vienas kietas.
Per šį vieną, nieko kietas.
Taigi, tai yra tik tag, kad išlieka.
>> ALLISON Buchholtz-AS: kadangi kietas yra tik šiose po žymės ten.
TOMAS REIMERS: Būtent.
Ir kas ypatinga per tuos?
Nieko.
Dabar, ką aš pasakysiu yra jei ten buvo ne erdvė,
Jūs esate klausia, kas kietas ir special-- ar kas gana ir ypatinga, tiesa?
Jei pasakyti .special.pretty, tai pati, kaip .pretty.special.
>> Nes tai, ką pašalinti erdvę yra klausia, kai jūs sakote .special,
Jūs esate klausia, gerai, kurie iš jų yra ypatinga?
Ir tada iš tų, kurie iš jų yra taip pat gražus,
kuris yra tas pats, gramatiškai, kaip klausia, kas gražus,
ir tada iš tų, kas taip pat ypatingas?
Teisė?
Tai skirtumas kas per kas.
AUDITORIJA: Gerai.
TOMAS REIMERS: Taip.
Nuostabus.
Taigi atsižvelgdamas į tai then--
>> ALLISON Buchholtz-AS: Manau, mūsų paskutinis dalykas yra (išgalvotas britišku akcentu)
dėžutės modelis.
>> TOMAS REIMERS: box-- [Chuckles] Aš myliu kelią Allison sako, kad.
Taigi langelį modelio dalykas.
>> ALLISON Buchholtz-AS: Tiesiog dėžutė, Aš būsiu tavo dėžutė modelis.
TOMAS REIMERS: Taigi pakalbėkime apie tai.
Taigi dabar mes praleido daug laiko kalbėti apie selektoriai.
Iki šiol, vaikinai tikriausiai, panašiai, meistrai selectors-- žinote,
kaip tiksliai pasirinkti turinį, norite manipuliuoti ekrane.
>> Taigi dabar klausimas, kaip tiksliai galite manipuliuoti?
Taigi, manau, svarbiausias būdas galvoti apie tai
yra gerai, kas tiksliai yra CSS elementas?
Mes praleido daug laiko kalbame apie, tai, kas yra žyma,
ar kas yra svarbiausias atstovavimas žymos?
>> Geras būdas galvoti apie tai yra, kokios formos yra lašišos?
Kas forma, kaip, lašišos spalvos fone?
>> AUDITORIJA: Tai stačiakampis.
>> TOMAS REIMERS: Tai stačiakampis, tiesa?
>> ALLISON Buchholtz-AS: Nebuvo apgauti klausimas.
[Juokas]
>> TOMAS REIMERS: Ne bando apgauti jus vaikinai tai vėlai.
Taigi, mes turime šį stačiakampį.
Ir tag p, tiesa?
Taigi, kad suteikia mums gera tikėjimas, kad dalis
vaizduojamas kaip stačiakampis, ne bent iš naršyklės omenyje, kuri
ji yra.
>> ALLISON Buchholtz-AS: Aš turiu galvoje, naršyklės paprastai stačiakampio formos,
todėl prasminga.
>> TOMAS REIMERS: Idėja yra tai, kad visi per CSS žymės
yra vaizduojamas kaip stačiakampis.
Ir kiekvienas stačiakampis turi keturias dalys pagal CSS, gerai?
Jūs turite realią turinį.
Štai kur slypi teksto.
>> ALLISON Buchholtz-AS: Galbūt jūsų nuotrauka.
>> TOMAS REIMERS: Taip.
Turite padding, kuris yra tik kai tarpas natūra.
Tada jūs turite sieną.
Ir tada jūs turite maržą, kuri balta erdvė už tai.
Taigi, kad nėra jokios prasmės visiems, todėl mes
ketiname kalbėti apie tai sekundę.
Taigi čia, ką mes ketiname daryti yra mes ketiname sukurti keletą DIV-ų, gerai?
Atsiprašau, o I--
>> ALLISON Buchholtz-AS: aš jaučiuosi kaip turėtume mielas vaizdą.
>> TOMAS REIMERS: Mes tikrai turėtų.
>> ALLISON Buchholtz-AS: Jaučiu, kaip visiems
galėtų pasinaudoti mielas vaizdas, yra viskas.
>> TOMAS REIMERS: Ar mes galime visi iš a-- nauda
>> AUDITORIJA: Taip, tikrai.
TOMAS REIMERS: Gerai, gerai.
Taigi, mes turime įdėti mielas nuotrauką kažkur.
ALLISON Buchholtz-AS: aš jaučiuosi kaip mielas triušelis gali būti naudinga dabar.
TOMAS REIMERS: Žinoma.
ALLISON Buchholtz-AS: pabaiga savaitę.
Ar kažką adorab--
>> TOMAS REIMERS: Kaip bijau kačiukas?
>> ALLISON Buchholtz-AS: Kačiukas irgi veikia.
>> TOMAS REIMERS: Cool, nes ten už tai svetainė.
Tai vadinama PlaceKitten.
ALLISON Buchholtz-AS: Tai puiku.
TOMAS REIMERS: Taip.
ALLISON Buchholtz-AS: Tiesiog, kaip, Placeholder vaizdai Jūsų svetainėje.
TOMAS REIMERS: MM-hm.
Taip pat PlacePuppy.
Ir ten PlaceBacon.
>> ALLISON Buchholtz-AS: PlaceBacon?
Tikrai?
>> TOMAS REIMERS: O, mes neturime turėti prieigą prie interneto čia.
>> ALLISON Buchholtz-AS: [dejuoja]
Tragiška.
TOMAS REIMERS: Priešingu atveju, Norėčiau parodyti jums, vaikinai
Kaip įdėti nuotraukas į savo svetainę.
Mes ketiname bandyti gauti tai darbo, kol mes turime eiti.
Bet dabar, mes tiesiog ketiname kalbėti spalvų tada.
Mes norime įdėti nuotraukas kittens--
>> ALLISON Buchholtz-AS: Mes padarėme.
>> TOMAS REIMERS: --Draugai internetą nustatytos metu viduryje.
Taigi, mes turime du DIV-ų, ir mes ketina suteikti jiems du adresus.
Mes ketiname jį vadiname "Pirmasis" ir "antrasis".
Taigi id = "pirmas".
Ir mes ketiname suteikti jiems dvi spalvas.
Taigi, kaip mes pasirinkti kažką su iš "pirmasis" id?
ALLISON Buchholtz-AS: Dot arba maišos?
AUDITORIJA: Sharp.
TOMAS REIMERS: Sharp tobula.
Sharp maišos, nepriklausomai we--
>> ALLISON Buchholtz-AS: Daug dalykų, kuriuos vadina jį.
>> TOMAS REIMERS: Gerai.
Mes ketiname atsiskaityti hashtag ir kad tai, ką mes ketiname eiti su.
Gerai?
>> ALLISON Buchholtz-AS: hashtag.
>> TOMAS REIMERS: Taigi grotelėmis pirmasis.
>> ALLISON Buchholtz-AS: Taigi galite Čivināšana seminar--
grotelėmis CSS, grotelėmis kietas.
TOMAS REIMERS: hashtag Nuostabumo.
ALLISON Buchholtz-AS: Hashtag Nuostabumo, taip.
TOMAS REIMERS: Gerai.
Taigi, mes turime "pirmasis" ir "antrasis".
Taigi, pirmiausia, mes ketiname turėti fono spalva raudona.
ALLISON Buchholtz-AS: Uh, storosios žarnos.
TOMAS REIMERS: Yup.
ALLISON Buchholtz-AS: Aš būsiu tavo vietoje, tikrintuvas.
TOMAS REIMERS: Allison "gavo mane.
Background-spalva blue--
>> TOMAS REIMERS: Violetinė!
>> TOMAS REIMERS: Violetinė.
ALLISON Buchholtz-AS: Taip.
Purple mano mėgstamiausia spalva, ir mes dar naudojo.
>> TOMAS REIMERS: Violetinė.
ALLISON Buchholtz-AS: Violetinė.
Tai veikia.
>> TOMAS REIMERS: Taigi mes teks du DIV-ų.
Jie bus visiškai tuščia.
Mes tikriausiai turėtų turėti tam tikrą tekstą.
Taigi "pirmasis" bus "labas".
Ir "antroji" bus say--
>> ALLISON Buchholtz-AS: Sudie.
>> AUDITORIJA: - "pasaulyje".
Sveiki, sudie.
ALLISON Buchholtz-AS: Mačiau juos į koncertą kitą savaitę.
TOMAS REIMERS: "The Beatles"?
ALLISON Buchholtz-AS: Dėl Reals.
Jie ne tai, kad didelis.
Man nepatinka tai.
>> TOMAS REIMERS: Turime "Labas" ir "Goodbye".
Ir vėl, CSS yra tiesiog nuostabus, nes jis pripažįsta savo spalvas.
Nereikia net nerimauti, kad jie egzistuoja.
Jie.
>> ALLISON Buchholtz-AS: jie egzistuoja.
>> TOMAS REIMERS: Taigi CSS manau turi 255 žodžiai kalbėti apie spalvą.
Jei galite galvoti apie spalvą ribų tie 255, kaip, aš būsiu sužavėtas.
ALLISON Buchholtz-AS: Taip.
Manau vaikinai gali turėti tiesiog būna iškart po.
>> TOMAS REIMERS: Taigi čia pamatysite turime dvi dėžės
tiesiai ant kito viršaus, teisę?
Sveiki atsisveikinti.
>> ALLISON Buchholtz-AS: Nėra erdvė tarp jų.
Jie tiesiog smooshed tiesiai ant kito viršaus.
>> TOMAS REIMERS: Taigi pirmas dalykas, Manau, turėtume kalbėti apie
yra tegul taip pat say-- taip.
Taigi CSS atstovauja juos kaip rūšies dėžes.
Ir, kaip dėžės, jie turi turinį.
Ir turinys dabar yra tarsi HELLO arba sudie ir viskas.
Gerai?
>> Taigi vienas iš pirmųjų dalykų, kurį galite padaryti, tai galite pridėti padding.
Apmušalas sako, kiek vietos ji turėtų palikti kiekvienoje pusėje.
Taigi leiskite pasakyti, kad aš noriu pasakyti 10 taškų kiekvienoje pusėje.
Aš perpjauti, kad per sekundę.
ALLISON Buchholtz-AS: Visi šie dalykai čia
ketinate būti daugiausia taškų dėl seminaro poilsio.
Jūs ketinate pamatyti, kad jis turi kai aplink jį erdvė, tiesa?
Taigi, ką jūs nematote čia yra ten tai nematomas rūšiuoti išklojimui
kiekvienoje pusėje, kurioje teigiama, kaip, Gerai, jūs turite savo dėžutę content--
>> ALLISON Buchholtz-AS: Ar norite tiesiog atsigriebti tikrinti elementą?
>> TOMAS REIMERS: Taip, tai gera idėja.
ALLISON Buchholtz-AS: Taip, manau, kad apžiūrėti elementas yra geras būdas
išsiaiškinti, jei kas nors vyksta negerai, kažkas netikėto nutinka,
tikrinti etiketes ir pamatyti, ką tai kaip perrašyti yra naudinga.
>> TOMAS REIMERS: Taigi, aš nesu įsitikinęs, jei jus vaikinai galite pamatyti šią spalvą.
Ar galite?
Pamatysite šį padding ant krašto rūšiuoti.
Ir tada pamatysite tikrasis kiekis mėlyna, tiesa?
Taigi, kad labai pagrindai dėžutės modelis.
Turite turinį.
Tada jūs turite padding.
>> AUDITORIJA: Kodėl ne jūs tiesiog naudoti langelį viduje the--
>> ALLISON Buchholtz-AS: Teisė.
Nes jis tiesiog pasirinkdami elementas dabar.
>> TOMAS REIMERS: Yup.
Kiti dalykai.
Taigi pakalbėkime apie tai apdaila komandą sekundę.
Taigi CSS, matavimai reikia turėti vienetą.
Taigi, pirmiausia turite sumą.
Taigi šiuo atveju, mes pasakė 10.
Ir tada šalia vienas mes sakė yra taškų, px.
Kitos tuos, kurie jums gali turėti, yra dalykų, pavyzdžiui, centimetrais, coliais.
Jūs galite daryti tai, ko norite, kas 10 cm?
Ir tai bus juokinga.
>> ALLISON Buchholtz-AS: Oi, berniukas.
>> AUDITORIJA: Oho.
>> TOMAS IR ALLISON: Taip.
TOMAS REIMERS: Taigi, kad viskas apdaila.
Aš ruošiuosi grįžti į pikselių.
>> ALLISON Buchholtz-AS: Pikseliai linkę būti, pavyzdžiui, standarto.
Žiūrėdami daug svetainių, jie dažniausiai dirba pikselių.
TOMAS REIMERS: Taigi jūs einate pamatyti arba pixels-- kitus tie, kuriuos matote
yra em, kuri yra viena iš EM lygus šrifto aukščio
kurį šiuo metu naudojate.
>> ALLISON Buchholtz-AS: mm.
TOMAS REIMERS: Tai geras būdas pasakyti, kaip, noriu tiek pat vietos, kaip mano šriftu
yra atsižvelgiant.
ALLISON Buchholtz-AS: Ar nežinote, kad.
Jūs išmoksite kažką naujo kiekvieną dieną.
TOMAS REIMERS: Yra daug matavimų CS.
Aš siūlau jums surasti juos.
Dėl visų jūsų atvejais, manau, taškų turėtų būti pakankamas.
Ir jie taip pat tai, ką jūs ketinate pamatyti
pavyzdžiuose dauguma daroma internetu.
Taigi mes palikti jį tuo pikselių.
>> Jūs taip pat gali turėčiau say-- taip apdaila rinkiniai visi iš paddings.
Jūs taip pat galite padaryti kažką panašaus "Padding-top" tiesiog set--
ALLISON Buchholtz-AS: Gal mes gauti mūsų "labas" atgal.
TOMAS REIMERS: --to tiesiog nustatyti apdaila viršuje ir nieko daugiau.
Taigi keturi komandos padding-top, apdaila dugno, apdaila kairę,
ir padding-dešinę.
>> ALLISON Buchholtz-AS: Kaip galite tikėtis už dėžutę.
>> TOMAS REIMERS: Taip.
Nieko pernelyg kvailai ten.
Ar tai prasminga?
Taigi tai yra apdaila.
Aš ruošiuosi nustatyti visi kad paddings atgal į 10.
Ir tada aš ruošiuosi pereiti prie sienos.
>> Taigi, kas siena yra sienos yra keista komanda.
Tai užtrunka rūšiuoti trijų dalykų vienu metu.
Taigi pirmasis yra kaip didelis jums noriu, kad ji būtų kaip matavimo.
Vėlgi, aš tik naudojant taškų.
Ir paskutinis dalykas, kurį aš Reikia pridurti, kad matavimų
yra vienas dalykas, kuris nereikia vienetas yra 0.
Tai tikrai neteisinga, duoti 0 A vienetą,
nes 0 yra 0 visoje colių, taškų, centimetrais, nesvarbu.
Visa tai tiesiog reiškia 0, tiesa?
Taigi, pirmiausia jūs suteikiate jai matavimą.
>> Tada jūs suteikiate jai stilių.
Taigi, aš ruošiuosi pasakyti "kietas".
Ir mes kalbame apie tai, ką tai reiškia.
Ir tada galiausiai, jūs suteikiate jai spalvą.
Taigi, aš ruošiuosi pasakyti "juoda".
Ir tai yra viskas, mes dabar matęs, išskyrus stiliaus,
bet mes kalbame apie tai.
Taigi jūs vaikinai mačiau matavimus, ir jūs matėte spalvas.
O kas atsitinka, yra mes gauname tai gražus juodos sienos aplink jį, ar ne?
Jūs vaikinai pamatyti, kaip mes padarėme, kad?
>> AUDITORIJA: Taip.
>> TOMAS REIMERS: cool.
Taigi, kas tai yra?
Taigi, visų pirma, tai vienas pikselis.
Štai akivaizdu pakankamai, tiesa?
Kaip, tai vienas pikselis storio.
Arba tai būtų vienas pikselis, bet aš Mastelis, todėl šiek tiek daugiau
kad ne.
>> ALLISON Buchholtz-AS: Ir mes turime tai juokinga rezoliucija televizija.
>> TOMAS REIMERS: Taip.
Jūs galite padaryti tai didesnė, mažesnis, nesvarbu.
Taigi čia dviejų taškų sienos.
Pamatysite, kad tai dvigubai storesnis.
Kitas dalykas, kurį turime, yra spalva.
Tai nėra įdomu.
Nesiruošiu kalbėti apie tai, tikrai.
>> ALLISON Buchholtz-AS: Bet stilius gali būti tik šiek tiek įdomu.
>> TOMAS REIMERS: Taip.
Taigi stilių, yra keletas iš jų kad matau naudojamas dažnai.
Pirmasis kietas, šalia One punktyras, o paskutinis yra punktyrinės.
Ir čia yra punktyras.
Jūs pamatysite, kad jie iš taškų krūva, tiesa?
Geras būdas rūšiuoti gauti gražus sieną vyksta, brūkšnelių, taip pat gana populiarus.
>> ALLISON Buchholtz-AS: Ir tada, žinoma, aš
įsitikinęs, kad yra daug kitų stilius, kad jūs galite gauti.
Ir mes turime didelį rinkinį ryšiai už jus vaikinai pabaigoje
į rūšies žiūrinėti ir ieškoti daugiau cool CSS.
>> TOMAS REIMERS: Ir tada Paskutinis dalykas, mes
ketiname kalbėti apie dėžutė modeliai nekilnojamojo greitai.
Oh, ir tada sienos, lygiai taip pat kaip išklojimui,
jūs taip pat turite dalykų, pavyzdžiui, sienos kairėje, border-right, border-top,
border-bottom, kuris leidžia jums gauti tam tikru sienos.
Taigi čia tik sienos paliko apibrėžtas.
Ar tai prasminga?
>> ALLISON Buchholtz-AS: Tai kietas būdas pabrėžti dalykus arba pridėti
linijos tarp skirtingų elementų.
TOMAS REIMERS: Absoliučiai.
Taigi, kad mūsų sienos.
Ir paskutinis marža.
Marža lyg apdaila išskyrus tai ne within--
ALLISON Buchholtz-AS: Tai ne aplink savo elementą
bet iš tikrųjų aplink visą dėžutė, kad mes matome.
>> TOMAS REIMERS: Taip.
Allison sakė, kad puikiai.
Tai nėra, kaip viduje savo elementas, tai aplink visą dėžutę.
Tai reiškia, kad tokie dalykai kaip background netaikoma į jį.
Ir ji iš esmės teigia, patinka, aš nenoriu nieko
Šioje daug vietos man.
Taigi, kaip čia mes turime 10 taškų skirtumą.
Taigi nieko per 10 taškų turėtų būti šalia manęs.
Štai kokios jos vietos, bet kokios ne.
Taigi, kad labai pagrindai dėžutės modelis.
Ar tai prasminga?
Cool, kietas.
ALLISON Buchholtz-AS: Nuostabus.
Taigi, dabar aš manau, kad mes tiesiog turime šaunių išteklius
kad mes priimsime jus vaikinai per labai greitai.
Ir mes taip pat actually--, mes turime internetą dar?
>> TOMAS Reimers: Leiskite pamatyti, jei aš galiu atidaryti up--
leiskite man tiesiog pamatyti, jei aš galima gauti internetu greitai
o Allison pasakoja apie viską Allison nori kalbėti apie.
ALLISON Buchholtz-AS: Taigi basically-- aš ne
žino, ką dar galiu pasakyti šiuo klausimu.
Bet tai tik keletas tikrai geras ištekliai.
Tai yra tie, kurie Tomas ir aš naudojamas
ir kad mes iš tikrųjų naudojamas prep už tai.
W3Schools yra vienas, kad jums vaikinai turėjo matęs.
Rekomenduojame jį daug dalykų, kurių CSS.
Aš žinau, aš rekomenduoju jį mano skyriuje visą laiką.
>> Vienas iš svarbiausių dalykų yra tai, kad leidžia jums rūšies netvarka su CSS
ir pamatyti pakeitimus akimirksniu, tai,
kaip, dukart langas peržiūrėti, kad ji turi.
Taigi jūs neturite jaudintis sukurti savo tinklalapį,
arba steigti VHOST jūsų vietos prietaisas ir vietinio kompiuterio,
ir gauti visi, kad kita darbo.
Jis yra integruotas į dešinę per puslapį.
>> Ir ji tai tiek pamokos, kad galite
pereiti mokytis daugiau apie selektoriai,
arba sužinoti apie manipuliuoti jūsų šrifto, ar fonas arba įvaizdį.
Ir jūs turite tai tekančio rezultatai, kad jūs
neturi daryti bet kitas prep darbas.
Taigi, aš myliu W3Schools.
Tai Pasakų.
Ar tai veikia?
>> TOMAS REIMERS: Taip.
Ne, tai ne.
Ar norite man pabandyti ir perkraukite savo kompiuterį?
Arba mes norime to--
>> ALLISON Buchholtz-AS: Aš turiu galvoje, gerai, tai taip pat bus internete.
Visos skaidrės bus internete.
Taigi aš tiesiog labai rekomenduoju daryti tai.
>> Tai puiku, kaip tik kaip apgauti lape.
Tai tiesiog visi pagrindinė komandas, kad jūs turite.
Tai puiku, kai esate pirmasis pradedate savo svetainėje.
Nes gal ne nori patekti į visas
nekilnojamojo Kasdieniai smėlinis dizainas sunkiųjų daiktų.
Jums tiesiog reikia formatuoti taip, kad šios rūšies prasmę ir valią
padaryti šiuo metu.
Ir jei jūs tikrai norite gauti į jį, aš žinau,
tai yra, pavyzdžiui, vienas iš Tomas mėgstamos nuorodos.
Mums buvo naudojant jį prep, ir tai Pasakų.
Tai iš Mozilla Kūrėjas.
>> TOMAS REIMERS: Taigi Mozilla yra žmonės, kurie Firefox.
Ir tai tik jų pačių kūrėjas nuoroda, kuri, manau, yra nuostabus.
Ir tai yra nuostabu sąrašas išteklius.
Taigi, mes have--
>> ALLISON Buchholtz-AS: Ir tada paskutinė pastaba yra
kai bandote sukurti savo svetainę,
semtis įkvėpimo iš dalykų kad jūs manote yra gana.
Tikrinimas elementą, tikrinti kodą
gali būti itin naudinga bando išsiaiškinti,
kaip stiliaus savo svetainę.
>> Dažnai jaučiuosi kaip geriausias būdas, be to, eksperimentavimo,
tiesiog pažvelgti į dalykų, kurie yra gana.
Manau, tai tikrai sunku tiesiog rūšies dizainas dalykų savo,
ypač iš pradžių.
Taigi, prašome pažvelgti į interneto svetaines kad jums patinka žiūri.
Išsiaiškinti, ką daro jiems patrauklūs jums.
Ir tada nedvejodami pabandyti ir atkartoti, kad.
>> TOMAS REIMERS: Teisė.
Net kaip interneto svetainėse kaip šis, jūs galite pamatyti
ten tikrai viršuje div.
Ir tada jūs turite kitą per div čia, o tai atitinka CSS Nuostabumo.
Ir tada jūs turite nuorodų krūva čia.
Jei tikrai tik patikrinti elementai, galite rūšiuoti
pradėsite matyti ką svetaines atrodo, ir kaip aš galiu
atkurti, kad jei aš norėjau.
Ar tai prasminga?
Taigi, mes turime tik tris minutes pradžią.
Taigi klausimų?
Bet iš jų?
Taip.
>> AUDITORIJA: Dėl spalvos stačiakampis, kaip jūs
have-- jei tu nenori vyksta per visą puslapį, galima
jūs turite tai eiti per tik pusė puslapio ar tiesiog teksto?
>> TOMAS REIMERS: Taip, absoliučiai.
Taigi leiskite man pamatyti realiai.
Turiu dvi idėjas.
Taigi, visų pirma, jūs Taip pat galite naudoti procentų.
>> AUDITORIJA: Tikrai?
>> ALLISON Buchholtz-AS: Taigi kažkas ieškoti yra santykinė pozicija.
Tai kažkas, kad mes neturi laiko gauti į,
bet tai, ką aš tikrai Rekomenduojame vaikinai patikrinti.
>> TOMAS REIMERS: Taigi procentų.
Ir pamatyti, kaip mes padarėme ją tiesiog 50% pločio?
ALLISON Buchholtz-AS: Jei jums iš tikrųjų žino pikselių skaičių,
galite tiksliau kad taip.
Jūs galite dėlioti su juo.
Bet 50%.
Jei mes dydį mūsų naršyklę, tai, kad jis mažesnis.
>> TOMAS REIMERS: Na, tai Iš esmės 50% dabar, manau.
Tai 50%, tada marža buvo pridėta, kad.
CSS turi Photoshop aikštelė.
Taigi dabar tai 50% puslapio plotį.
Bet atsiminkite, kad jūs turite 10 pikselių nuimti iš kiekvienos pusės.
Taigi, jei jums buvo perkelti, kad prieš paliktas kraštas naršyklėje,
tada jis būtų atrodo kaip 50%.
Vėlgi, kaip ir sakiau, CSS būti iš atspėti-ir-Check daug.
Kaip, manote, kad kažkas yra ketina elgtis vienaip,
bet jis elgiasi visiškai kitaip.
>> ALLISON Buchholtz-AS: Ir jūs tik gauti protingesni,
ir jūs tiesiog gauti geriau intuicija jai, kaip jums judėti į priekį.
>> TOMAS REIMERS: Ir tai gauna blogiau ir blogiau.
Taigi, tai tikrai tik varžybos.
>> ALLISON Buchholtz-AS: Tai super vilčių.
Mes norime, kad jie patinka CSS.
>> TOMAS REIMERS: CSS yra nuostabus.
Atminkite, kad.
Kiti klausimai?
>> ALLISON Buchholtz-AS: vienas dalykas.
Kitoks?
Nemokama.
>> TOMAS REIMERS: Nuostabus.
>> ALLISON Buchholtz-AS: Na, jei jums vaikinai turite kokių nors klausimų vėliau,
mes visada prieinama, kaip už įprastą.
Jūs tikriausiai pamatyti keletą mums galutinių projektų
ir tikrai ne hackathon.
>> TOMAS REIMERS: Absoliučiai.
Ir mugėje.
>> ALLISON Buchholtz-AS: Ir mugėje.
O.
>> TOMAS REIMERS: Laukiame matau visus savo awesome--
>> ALLISON Buchholtz-AS: Pamatysime visi jūsų awesome svetainių
kad bus gražus.
TOMAS REIMERS: Jūs visada galite pamatyti, kaip, svetaines
kurie turėjo, kaip, gerą CSS ir tada kaip tie, kurie nebandė daryti CSS.
ALLISON Buchholtz-AS: Taip, dar dalykas, dar vienas dalykas, pažvelgti į
yra Bootstrapping.
Taigi Bootstrap yra puikus.
>> TOMAS REIMERS: "Google", kad jei you--
>> ALLISON Buchholtz-AS: "Google" ji.
Tai Pasakų.
Jums patiks jį.
O dabar, kad jūs turite bazinį supratimą apie CSS,
jis bus padaryti daug daugiau prasmės.
Nuostabus.
Ačiū, vaikinai.
>> TOMAS REIMERS: Labai ačiū.