>> [Tónlist spila]
ALLISON BUCHHOLTZ-AU: Svo við erum í rauninni bara að fara
að gefa þér samdráttur CSS, vegna þess að við vitum
að það var ekki fjallað í öllum liðum.
Og við viljum virkilega að ganga úr skugga um að þú krakkar hafa þetta tól til ráðstöfunar,
vegna þess að það hefur getu til að gera vefsíður þínar líta miklu fallegri.
>> Og ef þú ert að byggja upp vef, þá þú vilt sennilega að gera það nokkuð.
Ég meina, þú þarft ekki að, en ég vil benda henni. [Hlátur]
Ef þú vilt að notendur til að nota það, þú gætir vilja til að gera það svolítið [inaudible].
Þannig að við erum að fara að reyna að gefa þér bara sumir undirstöðu verkfæri og skilningur,
þannig að þegar þú ferð út og þú ert rannsaka hluti um CSS,
það er ekki heill gibberish, eins CSS stundum að vera.
>> TOMAS Reimers: Já.
Allison sagði það nokkuð vel.
Svo ég giska á fyrsta sem við ætti að byrja með er það sem er CSS?
Svo er CSS ógnvekjandi.
CSS--
>> ALLISON BUCHHOLTZ-AU: Það er nafn málstofu okkar.
>> TOMAS Reimers: Já.
Það er mjög mikilvægt að þú skilur að með því þá.
Ef þú tekur aðeins í burtu einn hlutur, er það að CSS ef ógnvekjandi.
Tvö er CSS stendur fyrir Cascading Style Sheets.
Svo á kjarna þess, CSS er stíl blaði, sem þýðir
það gerir þér kleift að stíla á vefsíðu.
Og þá hvað það þýðir, það er leið til að bæta við stíl á vefsíður þínar.
Svo með stíl, er átt við allt það er ekki structural--
svo hlutir eins litum, bakgrunni myndir, landamæri, eins og, padding,
framlegð.
Við munum tala um hvað allt sem þýðir í smá.
>> Þannig að við höfum bara farið á undan og opnaði bæði af þeim upp í gedit.
Svo er þetta index.html.
Og þetta er main.css.
Svo main.css hefur ekkert.
ALLISON BUCHHOLTZ-AU: No stíl svo langt.
TOMAS Reimers: Ekkert.
Og eins og þú munt sjá, það er mjög ljót síða.
ALLISON BUCHHOLTZ-AU: Það er bara látlaus.
TOMAS Reimers: Já.
Já, er það ekki ljótt, það er bara lægstur.
Og þá hér höfum index.html.
Og svo fyrir a fljótur ágrip af HTML, Allison,
þú vilt bara tala um síðuna?
>> ALLISON BUCHHOLTZ-AU: Já.
Svo augljóslega, höfum við HTML okkar tag, sem bara nöfn HTML skrá.
Við höfum haus okkar hér, með CSS Awesomeness, which-- ef þú ferð til baka.
Hvar er það?
>> TOMAS Reimers: Oh.
Já, getur þú séð.
ALLISON BUCHHOLTZ-AU: Og taka haus
er þetta flipann haus rétt upp hér.
Og svo "Halló, heimur!" er textinn sem við höfum bara
birta á vefnum síðu, sem is-- fara til baka.
Back.
Sem er bara í líkama okkar here-- á texta.
Einnig, eitt við tilkynningar, ef þú lítur hér,
Tomas kveikt upp þessum tveir frá skyggnu okkar.
Svo lengi sem þú hefur allt þrír af þessum, þú ert fínn.
Þeir geta verið í hvaða röð þeir vilja.
Hvað er mikilvægast er bara að þú hefur hvert þessara þriggja hlutum.
>> TOMAS Reimers: Cool.
Bæta við læknir tegund?
ALLISON BUCHHOLTZ-AU: Já.
TOMAS Reimers: Já.
Cool.
ALLISON BUCHHOLTZ-AU: Apparently, MISC-kerfið mínir líkar ekki við mig.
TOMAS Reimers: Oh, gefa okkur sek bara en Allison skiptir út mic hennar.
Svo já.
Þannig að við höfum aðalsíðu okkar.
Það er góður af unstyled.
Við höfum ekki mikið.
Við höfum bara grundvallaratriðum texta.
Við höfum stílblað.
Við höfum titilinn.
Svo bara berum úrbeinað þættir gera vefsíðu.
>> Svo þaðan, við skulum tala um hvað CSS er
og hvað það lítur út eins og allt það.
Svo fyrir that--
ALLISON BUCHHOLTZ-AU: Aftur til stóð.
TOMAS Reimers: Aftur til skyggnur.
Og Allison getur tekið yfir.
>> ALLISON BUCHHOLTZ-AU: Woo.
OK.
Svo í CSS skrá þína, þú ert að fara að hafa
a einhver fjöldi af þessum hlutum sem kallast selectors.
Það verður bara að vera á grundvöllur CSS skrá.
Það er bara að fara að vera hellingur og hellingur af þessu.
Svo val.
Þetta er bara almenn líffærafræði.
Við erum að fara að fara í gegnum dæmi, vegna þess að ef þú krakkar aldrei
horfði kafla mína, mér finnst eins hlutum í abstrakt
í raun ekki skynsamleg.
Það hjálpar alltaf að sjá dæmi.
>> Þannig að við höfum sumir val.
Það er að fara að vera einhver auðkenni fyrir það sem við viljum stíl til að eiga við.
Og þá getum við haft eitthvað setja reglur og gildi.
Svo selectors sem þú gætir séð gæti verið eitthvað eins og líkama,
eða málsgrein með P, eða haus, eða hvað,
hvað sem þú vilt HTML tög til að vera.
>> Þannig að í þessu tilfelli höfum við líkamann.
Og við höfum einhverja reglu, sem samsvarar
að hvað þinn stíll á við.
Þannig að í þessu tilfelli, höfum við bakgrunnslit og letur þyngd.
Þannig að þetta er að fara að breyta bakgrunn neitt
innan hvaða líkami í HTML skjalið okkar.
Og það er að fara að gefa það þetta ljósblár gildi.
>> Svo það er að fara að gera bakgrunnur ljós blár.
Og þá er allt innan líkama fara að hafa þyngd leturs feitletrað.
Svo það er bara að fara að bold er allur texti okkar.
Og þetta er bara eitt val.
En þú gætir hafa mjög margir af þessum.
Og eins og við erum að fara að sýna síðar, svolítið meira í hvernig
að verk og fleiri dæmi þar.
Nokkuð sem þú vilt bæta við?
>> TOMAS Reimers: Nei
Allison fékk það.
Við erum bara að fara að skera upp dæmi hér á síðuna okkar dæmi.
Svo skulum við taka í raun þetta.
Það er fullkominn.
Þannig að ég ætla bara að fara að afrita og líma þessi réttur í main.css skrá okkar.
Og ég ætla að vista það.
Og þá munum við keyra það.
Svo hlið minnispunktur, einn af mest svekkjandi hlutir
er ef þú vistar ekki skrá og þá þú, eins og endurhlaða síðunni,
og eins, hvers vegna er ekki breyting að gerast?
Það gerist.
Svo hér við sáum að við gert okkar website ljós blár bakgrunnur
og sumir feitletruð texta.
>> Ég ætti líka að nefna, ef þig krakkar hafa spurningar um neitt
við erum að gera, þá endilega frjáls til stöðva okkur og spyrja okkur.
Við erum algerlega tilbúin að reitnum spurningum.
>> ALLISON BUCHHOLTZ-AU: Vitanlega, með CSS, allt byggir á sjálfu sér.
Þannig að ef eitt ekki skynsamleg núna, við
vil ekki að að fen þig niður síðar.
>> TOMAS Reimers: Svo skulum konar kryfja þetta.
Svo þú vilt að byrja með val hér?
>> ALLISON BUCHHOLTZ-AU: Já.
Eins og ég var að segja áður, líkami er bara val okkar hér.
Þannig að ef við förum aftur yfir til index-- Ah okkar.
>> TOMAS Reimers: Sem ég lokað bara.
Gefðu mér annað.
Svo skrá, opna, index.html.
ALLISON BUCHHOLTZ-AU: Cool.
Svo ef þú tekur eftir hérna, við hafa þessar líkami tags, ekki satt?
Svo val samsvarar bara að Merki sem við erum að tala um.
Svo líkama hérna.
Svo það sem við erum að segja er everything-- getum við farið aftur?
Ég vildi að ég gæti bara eins snerta skjáinn.
Það myndi vera svo miklu sætari.
>> Svo nokkuð innan þá líkami tags, sem við sáum
var bara, eins og textinn, og líkaminn almennt
vísar til, eins og, bakgrunni.
Ef þú vilt alltaf að breyta bakgrunni,
það er að fara að vera í líkamanum tag.
Bara hefur þessi gilda um þá.
>> Þannig að ef við vorum að fara til index.html and-- raun,
getum við haft eitthvað utan líkamans?
Ef við höfðum, eins og a fótur eða eitthvað, myndi það ekki um þetta.
En allt innan þessi líkami merki er að fara
að verða fyrir áhrifum af þessum líkama val sem við höfum gert.
Svo ef þú varst að slá eitthvað annað there--
>> TOMAS Reimers: Við skulum aka að heimili.
Þannig að ef við hefðum div-- svo er bara annað merki sem þú getur haft.
Ég ætla að loka henni.
Eða við skulum gera þetta lið.
Svo p stendur fyrir mgr.
Og innan þeirri málsgrein.
Og þá segi ég: "Þetta er texti."
Cool.
Og svo ég gerði þessi regla gilda um a málsgrein í stað líkamans.
Þú munt sjá hvernig það á aðeins við nýstofnað lið, hægri,
ekki allt hlutur.
Er að skynsamleg?
>> ALLISON BUCHHOLTZ-AU: Svo er þetta allt líkami,
en nú val okkar bara samsvarar málsgrein.
Þannig að við höfum bara djörf og blár fyrir þetta tiltekna málsgrein,
vegna þess að þetta er það eina sem sem er umlukið inni í p merkinu.
>> TOMAS Reimers: Er að skynsamleg konar hvernig hlutirnir þjappa aðra hluti?
ALLISON BUCHHOLTZ-AU: Einnig, bara að segja, eins og einn af the bestur lifnaðarhættir
að virkilega fá þægilegri með CSS er bara að gera hlutina eins og þetta,
bara að reyna það út.
Það er mjög einfalt að slá eitthvað út, högg hressa, og sjá hvað gerist.
Og eins og með flest CS, tilraunir getur oft
leiða til mun betri innsæi skilning.
Jafnvel meira svo en okkur bara, eins, að tala við þig.
>> TOMAS Reimers: Absolutely 100% sammála á þeim tímapunkti.
Þannig að ef við förum aftur til þessa, við skulum byrja krufningu nákvæmlega hvað þessir tveir gera.
Þannig að við höfum tvær reglur um þetta.
Svo er sá fyrsti bakgrunnslit.
Og þú sérð að við höfum sett það jafnt í gildi, ljósblátt.
>> Svo í CSS, CSS er tegund af mjög laus um hvernig
þú ert að fá að skilgreina lit.
Svo er hægt að skilgreina þá með nafni.
Þú getur líka gert eitthvað eins og "rauður".
Og þá ef við förum aftur til þessa, þú munt sjá að bakgrunnur er rauður.
Þú getur líka fengið really-- Ég held að þú getur fengið mjög skapandi með þetta,
getur þú ekki?
>> ALLISON BUCHHOLTZ-AU: I held að þú getur notað álög.
Getur þú ekki?
>> TOMAS Reimers: Já.
Svo er hægt að nota álög.
En ég er að hugsa nafn-vitur.
Eru ekki þarna?
ALLISON BUCHHOLTZ-AU: Þú getur gert alveg nokkrar.
Nánast eins og flest litum sem þú getur name-- eins, ég held að lax er einn.
>> TOMAS Reimers: Við ætlum að reyna lax.
ALLISON BUCHHOLTZ-AU: I held Chartreuse er þar.
TOMAS Reimers: Já.
Sjá?
Svo er hægt að fá ansi skapandi.
>> ALLISON BUCHHOLTZ-AU: Þú gæti fengið nokkuð skapandi.
Eins og, ef hægt er að hugsa um að nafn lit, það er líklega þar.
Ef þú vilt virkilega fínn smáatriði, þú getur farið álög.
>> TOMAS Reimers: Já.
Svo sextánskur.
Ef þið muna þetta aftur úr gamla PSET þínu, Image batna,
þú krakkar þurfti að takast á með þessum álög gildi.
Og svoleiðis til að ágrip hvað það er, hex hefur þrjú gildi geymdar í það.
Svo það er í hópum tveggja þrepum.
Fyrstu tvær tákna rauða gildi.
The second einn táknar græna gildi.
Og síðasta er blár?
>> Svo FF gerist að tákna a sextánskur 255.
Svo þú ert 255 rauður, 255 grænn og 0 fyrir blá.
Og gildi á bilinu 0 og 255.
>> Áhorfendur: Hægri.
Svo í raun gætum við leit internetið fyrir hvaða lit sem við viljum,
og bera kennsl á raunverulega þekkt lit litróf greiða,
og þá gátum við sett það í?
ALLISON BUCHHOLTZ-AU: Einmitt.
Svo þú ert nánast fulla stjórn yfir litum sem þú vilt í CSS.
Erum við að fara að tala um bakgrunnsmyndir seinna?
Eða viljum við gera það?
>> TOMAS Reimers: Já.
Algjörlega.
Svo fyrst, bara til að sýna að rauður og grænn er gulur.
Og ef þú þarft einhver hjálp við að finna þetta, þú
getur Google eitthvað eins og "Litaplokkari."
ALLISON BUCHHOLTZ-AU: Oh, það er svo gott.
Ég elska Litaplokkari.
>> TOMAS Reimers: colorpicker.com er gott dæmi.
Og hér, munt þú sjá að þú hefur a fullur Photoshop-eins Litaplokkari.
>> ALLISON BUCHHOLTZ-AU: Mm-HM.
Einnig kaldur hlutur er þú er hægt að búa litaval
þannig að þú þarft ekki, eins, rekst litum.
TOMAS Reimers: Og þá hér er hex gildi hér.
Svo þú getur alltaf fundið á netinu í grundvallaratriðum staðir til að fá álög gildi frá.
Það er ekki að raða um það bara, eins og við sjá liti heimsins í tölum.
Það er meira að við förum á netinu og finna hvaða lit sem við viljum,
og síðan taka tölu niður.
Vegna þess að það er bara mjög auðvelt leið til að tilvísun hlutina í CS.
>> ALLISON BUCHHOLTZ-AU: Og þá er það also--
Ég gleymi nákvæmlega nafnið á staðnum.
En það er örugglega, ég hugsa, eitthvað frá Adobe
sem býr litaval fyrir þig, sem er mjög flott, því þú
definitely-- það er stundum erfitt að reikna út,
ó, ef ég vil nota þennan lit, hvað gæti verið annar gagnlegur einn
að nota annars staðar á síðuna mína til að, eins, gera það gott og samhangandi.
>> TOMAS Reimers: Allison er að tala um einn af Adobe heitir Kuler, held ég.
Það er K-U-L-E-R.
ALLISON BUCHHOLTZ-AU: Ég held það.
Ég er nokkuð viss um að er einn.
>> TOMAS Reimers: Uppáhalds mitt er alltaf verið Color Scheme Designer.
>> ALLISON BUCHHOLTZ-AU: Ooh.
>> TOMAS Reimers: Hver er now--
>> ALLISON BUCHHOLTZ-AU: Ah, þetta er fallegt.
>> TOMAS Reimers: Og þú geta í raun að segja, eins og,
Ég vil þremur litum við hliðina á hvor aðra.
Og þá skulum gera eitthvað gott.
Og þá er hægt að fá dæmi hvað sem kann að virðast.
Og svo ef þú sveima yfir einhverju þá gefur það þér álög gildi.
>> Svo bara eins og góð leið til að byrja hugsa um litaval
eða hvaða liti í viðbót gæti farið vel saman.
Vegna þess að það má furðu ekki eins auðvelt að ná eins og þú heldur.
Og þá er annar kaldur hlutur Ég hef alltaf fundið um þessa síðu
er ef þú högg Dæmi, verður það sýna hvað dæmi vefsíðu
getur litið eins og með að litasamsetningu.
Engu að síður.
>> Aftur til the raunverulegur CSS.
ALLISON BUCHHOLTZ-AU: En vitanlega, við vita þessir tilvísanir gæti verið gagnlegt.
TOMAS Reimers: Nei, þeir örugglega geta vera hjálpsamur.
Svo seinni reglu, Allison?
>> ALLISON BUCHHOLTZ-AU: Já.
Önnur regla er bara samsvarar letur okkar.
Svo er letur þyngd bara góður of-- svo að þyngd myndi
vera ef þú vilt bara, eins og, eðlileg eða, eins og þynnri letur,
eða í þessu tilfelli, eins og, bold.
Ég gleymi.
Hvað er ef þú vildir it-- er a þynnri einn en bara, eins og, eðlilegt?
TOMAS Reimers: Ég er ekki í raun vita ef það er þynnri einn.
ALLISON BUCHHOLTZ-AU: ég gleymi.
Svo letur þyngd við venjulega bara nota fyrir bold.
Ef þú vilt virkilega fá inn það, við erum að fara að sýna þér.
W3Schools hefur allt öðruvísi hlutir sem þú getur gert fyrir letur.
En í grundvallaratriðum, ef þú vilt alltaf til að breyta neinu um letur,
það er alltaf að fara að vera, eins, font-eitthvað.
Svo það verður eins, font-family ef þú ert reyna að breyta í raun gerð.
Það verður font-stíl ef þér langar að gera það eins og cursive,
eða skáletrun, eða whatnot.
Eða jafnvel font-lit, ef við vildum að breyta því.
>> TOMAS Reimers: Yup.
Svo þú getur breytt því.
Og svoleiðis bara að ágrip nú, svo þú getur
sjá að við höfum val upp hér.
Við höfum þessar hrokkið axlabönd.
Og þá höfum við reglur afmarkast með semikommum.
Er að skynsamleg?
Já?
Cool.
Þannig að ef það er good--
>> ALLISON BUCHHOLTZ-AU: Back.
TOMAS Reimers: Við skulum tala sérstaklega um hvaða selectors við höfum.
'Cause núna höfum við konar bara sýnt tags.
En þið gætu séð það plausible.
Segjum að þú ert með tvær málsgreinar á síðunni og þú
vilja til vera fær til stíl einni en ekki annan,
þú ert ekki bara að takmarka sjálfur að þurfa að nota mismunandi raunverulegan HTML
merki til að gefa þeim mismunandi stíl.
>> Þannig að við að hafa þrjú helstu tegundir selectors.
ALLISON BUCHHOLTZ-AU: Já.
Þannig að við höfum tag, sem er hvað við höfum verið að tala um núna.
Svo er það svona eins og líkamanum eða p.
Og þá höfum við flokk sem er þegar við skilgreinum það í CSS skrá okkar,
það er alltaf að fara að vera punktur, hvað þú vilt að nafn bekknum þínum til að vera.
Og þetta getur sótt til margra hluta.
>> Segjum að þú ert fimm málsgreinum og tveir af þremur þeirra
þarf að vera stíll sama, þú vildi beita bekknum til þess.
Og þetta er bara leiðin sem við gerum það.
Við munum gefa ykkur dæmi um þar sem þetta í raun sýnir sig.
En ef þú hefðir kannski sumir merki p, eftir það, myndir þú skrifa,
flokki jafngildir hvað sem flokkum þú vilt eiga.
Svo hvað flokki selectors sem við viljum að gilda um þessa tilteknu málsgrein,
við gátum bara skrifa svona.
Auðvitað, ég held dæmi mun gera það miklu meira steypu.
>> Hinn við höfum er persónuskilríki, sem við tákna
með kjötkássa eða pund eða hashtag.
TOMAS Reimers: Octothorpe.
ALLISON BUCHHOLTZ-AU: Octothorpe.
Það virkar líka.
Og þetta ætti í raun að vera einstakt.
Þeir ættu einungis við um eitt á síðuna þína.
Svo hvort sem er a sérstakur málsgrein, eða einhver atriði í lista eða hvað,
þetta ætti að vera einstakt.
Og á sama hátt sem við bara segja eins, class = "class1 class2,"
þetta getur bara verið persónuskilríki af hvað við höfum.
TOMAS Reimers: Já.
Svo skulum við tala örugglega um dæmi hér.
Og ég ætla bara að fara að kafa beint aftur inn í kóðann.
Svo skulum líta á HTML okkar.
Og svo við núna hafa eina málsgrein.
Þetta er texti.
Ég ætla bara að fara að breyta það. "Þetta er texta 1."
Og þá erum við að fara að hafa a "Þetta er texti 2."
>> ALLISON BUCHHOLTZ-AU: Second einn.
TOMAS Reimers: Yup.
Þannig að við höfum nú "Þetta er texti 2," ekki satt?
Og við erum að fara að sjá að ef við endurhlaða á síðunni, hvað við erum að fara að finna
er að við ætlum að find--
ALLISON BUCHHOLTZ-AU: Ooh.
TOMAS Reimers: Já.
Við erum að fara að finna "Þetta er textinn 1, "og" Þetta er texti 2. "
>> ALLISON BUCHHOLTZ-AU: Og út yndisleg gulur litur.
>> TOMAS Reimers: Og þú munt sjá að val okkar núna,
sem gildir til p, eða málsgreinar, hefur áhrif á bæði af þeim,
vegna þeirra beggja mæta ástand sem þeir eru bæði p tag.
Það gerir samtals vit.
Svo spurningin er, vel, hvað ef við vildum bara fá einn?
Svo nákvæmlega eins Allison var að segja, höfum við tvær aðrar leiðir til að gera það.
Ég ætla að byrja með persónuskilríki.
>> ALLISON BUCHHOLTZ-AU: Við skulum byrja með persónuskilríki.
>> TOMAS Reimers: Og bæði þeirra eru eiginleikar.
Svo eiginleika eru í HTML.
Og hvað þeir eru er eitthvað sem þú bætir
inni í merkinu sem er aðskilið frá heiti merkisins.
Svo er hægt að hafa margar eigindir.
Já?
>> ALLISON BUCHHOLTZ-AU: Ég var bara að fara að segja frá dæmi þitt frá PSET 7,
ef einhver ykkar reyna að samræma hlutir til miðju,
þú gætir hafa notað "Texti align = center."
Og þú tekið það sennilega ætti að hafa miðju
texta eða siglingar bar þitt.
Svo er það bara líka eiginleiki að þú gætir verið kunnugt.
TOMAS Reimers: Það er fullt eiginleika sem þú munt sjá.
Já.
Eins gott vísan til PSET 7.
Við höfum id.
Þú getur einnig haft flokki, hluti eins og þetta.
Ein tag getur haft marga eiginleika.
Svo byrja með id, við skulum þykjast vér langar að hafa persónuskilríki of-- ég veit ekki.
Við munum kalla það sérstakt, vegna þessa, við erum
fara að gera bold, og undirstrikun og hvað.
ALLISON BUCHHOLTZ-AU: Það er ætla að vera frábær sérstakt.
TOMAS Reimers: Þannig að þetta einn, höfum við id Special.
Svo leið að velja það, þá er, í main.css, frekar en að hafa p tag,
þú #special, OK?
Og það velur hlutur með id sérstakt.
Er þetta skynsamleg fyrir alla?
Áhorfendur: Já.
TOMAS Reimers: Cool.
Svo nú ef við förum aftur, við munum see-- Úpps.
Já.
Við munum sjá að það bara velur einn með id sérstakt.
Já?
Hljómar flott.
Já.
>> Áhorfendur: Getur eitthvað hafa að eigindi bæði flokki og id?
>> TOMAS Reimers: Já.
Áhorfendur: OK.
Og hvað þá gerist ef þú gefur þá það nokkrar reglur í CSS sem átök?
TOMAS Reimers: Algjörlega.
Við erum örugglega að fara að tala um það.
Svo nákvæmlega hvað þú varst að fá á, getur þú einnig að hafa námskeið.
Svo skulum þykjast ég hafði þrjár málsgreinar og ég
langaði til að stíla fyrsta tveir en ekki þriðja.
Jæja, fyrsta hugmyndin getur verið, vel, ég gæti bara gefa seinni kenni.
En þú getur ekki, vegna þess að kenni, nákvæmlega eins Allison var að segja,
þarf að vera einstakt.
>> Þannig að í stað þess að kenni, hvað þú getur notað er hægt að nota bekknum.
Og class-- hvað það gerir þú að gera er í rauninni að segja,
þetta tilheyrir sem hluti af hóp.
Í þessu tilfelli, hópnum okkar heitir Special.
Og það sem við erum að fara að gera þá er við erum að fara að say-- frekar en pund,
við erum að fara að nota punkt.
OK?
Athugið að pund og punktur aðeins til í CSS skrá,
ekki innan HTML.
ALLISON BUCHHOLTZ-AU: Já.
Mikilvægur munur.
>> TOMAS Reimers: Ég hef hafði svo mikið baráttu,
því að ég setti kjötkássa í HTML og þá bara fannst heimskur í langan tíma.
Sjá hvernig það velur bæði af sjálfur með þeim flokki?
Cool.
>> Nú, það getur haft mörg námskeið.
Segjum að ég vildi gera fyrst tveir hafa bakgrunn af gulum
og seinni tveir hafa letur lit blár.
OK.
Ég í raun ekki vita hvers vegna ég myndi langar að gera það, en ég get.
>> ALLISON BUCHHOLTZ-AU: Gæti ekki mælt það fyrir vefsvæðið þitt.
En með tilliti til okkar, munum það gera.
>> TOMAS Reimers: Það er ekki góð litasamsetningu.
ALLISON BUCHHOLTZ-AU: Jæja, gulur og blár eru mínar hár litir skóla.
Ég veit ekki, þó.
TOMAS Reimers: Allison er hár skólinn hafði mikil litasamsetningu.
[Hlátur]
Svo þá það sem við getum kallað er þetta Við skulum kalla this-- þannig að við höfum sérstakt
og við höfum Pretty.
Ég legg til, fyrir þetta, þú nota miklu meira lýsandi nöfn.
ALLISON BUCHHOLTZ-AU: Já, myndi ég kalla þetta, eins og, gulur eða blár.
>> TOMAS Reimers: Við erum ekki virkilega að gera alvöru heimasíðu,
sem er ástæða þess að við erum ekki að gera það.
En ef þú raunverulega hafði alvöru vefsíðu, þú
gæti hafa, eins og grein haus, grein efni, fyrsta orðið,
Svona hlutir, sem leyfa þú að vera miklu meira lýsandi.
Þetta eru í raun bara eins og breytum.
Þeir ættu að vera heitir á þann hátt þar sem þú getur, like-- já, eins og svo.
Perfect.
>> Svo bakgrunnslit.
Og þá erum við að fara að say-- svo leið til að breyta lit er bara "lit".
Og við erum að fara að gera það blátt.
Það er svalt.
Svo nú höfum við Fyrstu tveir hafa sérstakt.
Næsti er að fara að hafa "class = falleg."
ALLISON BUCHHOLTZ-AU: Og þá munt þú langar að bæta við "nokkuð" til miðju einn.
TOMAS Reimers: Yup.
Og þá að miðju einn, að bæta við "nokkuð," hvað gerist
er þú ert bara pláss.
Svo bekknum eigindi er pláss aðskilin lista
af öllum flokkum sem gilda um þessi merki.
OK?
Það er ekki eins og þetta tilheyrir einhvers konar sérstökum flokki sem kallast
"Sérstakt, rúm, falleg."
Það tilheyrir tveimur classes-- sérstakt og falleg.
Já?
Cool.
>> Og þá ef við lítum á hvað gerist, við erum
fara að sjá að fyrsta einn hefur gulur bakgrunnur, svartur texti.
Second one--
>> ALLISON BUCHHOLTZ-AU: --has bold gulur bakgrunnur með bláum texta.
Og síðasta okkar hefur bara blár texti sem við úthlutað henni.
>> TOMAS Reimers: Cool?
Hvernig selectors vinna?
Awesome.
>> ALLISON BUCHHOLTZ-AU: Viljum við tala um átökin nú þá?
>> TOMAS Reimers: Svo já.
Algjörlega.
Svo gerist það ef þér hafa átök, ekki satt?
Við skulum láta þá fyrstu setur upp eitthvað like--
ALLISON BUCHHOLTZ-AU: Kannski þetta breytir bakgrunn?
TOMAS Reimers: Já.
Þannig að við erum að fara að gera "fallegri" breyta bakgrunn laxi.
ALLISON BUCHHOLTZ-AU: Þú ert bara með allur the mikill litir dag, Tomas.
TOMAS Reimers: Já.
Þar sem ég fann út að ég get nota lax sem alvöru lit.
Þannig að við erum bara að fara að gera það.
Ég held líka Sunset er alvöru litur.
Áhorfendur: Sunset er alvöru litur?
ALLISON BUCHHOLTZ-AU: Við skulum reyna það.
TOMAS Reimers: Eftir þessa kynningu bara vegna þess að ef það boðberi upp,
Ég vil ekki að vera kembiforrit.
Þannig að við vitum lax er alvöru litur.
Svo allir getspár á hvað er að fara að gerast?
>> ALLISON BUCHHOLTZ-AU: Allir hugmynd?
>> Áhorfendur: [inaudible].
>> TOMAS Reimers: Já.
Svo þú got það nákvæmlega rétt.
Í grundvallaratriðum, það tekur síðasta regla að það var gefið.
>> ALLISON BUCHHOLTZ-AU: Svo er þetta þar Cascading kemur til framkvæmda.
>> TOMAS Reimers: Svo man hvernig við hafði það Cascading Style Sheets?
Svo eftir að við svona meina að við höfum fullt af reglum
sem gilda ofan á hvor aðra, og þeir geta einnig hunsa hvert annað.
>> ALLISON BUCHHOLTZ-AU: Svo hvað er neðst
hefur forgang hvað er efst.
Þú gætir hafa reglur sem alveg negate eitthvað fyrirfram.
Það er líka hvers vegna þú vilt vera varkár þegar þú ert stíl,
svo þú ert ekki að búa til reglur sem þú ert bara alveg hnekkir.
>> TOMAS Reimers: Eða kannski þú vil að skrifa reglur.
>> ALLISON BUCHHOLTZ-AU: Eða kannski þú.
Já.
>> TOMAS Reimers: Þykjast þú ert a flokki sem gildir flesta hluti,
en við skulum segja að þú viljir breyta bakgrunnslit rautt og letur
þyngd að bold fyrir flest hluti, en fyrir einn,
þú vilt bara bakgrunnslit að vera rautt en þú vilt allar aðrar
eiginleika, getur þú gert eitthvað eins og "font-weight = eðlilegt,"
sem myndi þá losa að djörf breyting.
Já?
Aftur, besta leiðin, held ég Allison segir að það, er bara æfa.
>> ALLISON BUCHHOLTZ-AU: Tilraunir.
>> TOMAS Reimers: Practice, æfa, æfa, og tilraun.
Ég þekki fullt af fólki sem finnst CSS er bara fullt af giska-og-stöðva
í lok dagsins, þar sem ef þú vilt gera something-- eins,
þú ert með gróft hugmynd, en þú samt líklega þurfa
að reyna það út að ganga úr skugga um þú veist hvað það lítur út.
>> Áhorfendur: Þegar þú ert að sækja flokkar, fleiri en eitt
til sömu málsgrein eða kafla, gerir það
Sama hvaða röð þú getur slá þá inn í gæsalöppum?
>> TOMAS Reimers: Nei, alls ekki.
>> ALLISON BUCHHOLTZ-AU: Það sem skiptir máli er röð innan CSS stíll lak þinn.
Áhorfendur: Gætirðu endurtaka spurningu?
TOMAS Reimers: Oh.
ALLISON BUCHHOLTZ-AU: Innan flokki, þegar þú ert að gefa flokkum
eitthvað í HTML, gerir það máli hvaða röð þeir eru í?
Það skiptir ekki máli í röð.
Það sem skiptir máli er röð af flokki selectors innan CSS þinn,
innan stíll lak þinn.
>> TOMAS Reimers: Sound gott?
>> ALLISON BUCHHOLTZ-AU: Lovely.
>> TOMAS Reimers: Og þá við erum að fara að halda áfram to--
ALLISON BUCHHOLTZ-AU: Hvað höfum við næst?
Ég gleymi.
Oh, við höfum bara dæmi.
En við höfum konar gert þeim.
Við höfum gert dæmi á flugu.
>> TOMAS Reimers: Við fáum að sameina selectors fljótlega.
>> ALLISON BUCHHOLTZ-AU: Oh, fáum við að sameina selectors.
TOMAS Reimers: Svo sumir dæmi er að við höfum
# Dog-- pund, eða hashtag, eða octothorpe, eða hvað
þú vilt hringja that-- skarpur.
>> ALLISON BUCHHOLTZ-AU: Sharp hundur.
>> TOMAS Reimers: Síðan sem þú ert .pets.
Eitthvað hefur id hundur, það er bara einn hundur á síðunni.
Eitthvað hefur id köttur, það er aðeins einn köttur.
Það geta margir gæludýr á síðunni.
Þess vegna höfum við gaf það bekkjum.
Þú ert dæmi um p.
Og þá svo einn af síðasta dæmi, sem
er eitthvað sem við höfum ekki talað um, er það sem gerist þegar þú sameina þær.
Svo p.pets.
>> Svo fyrir það, við skulum fara aftur til númer og kynna another-- já.
Svo aftur hér.
>> ALLISON BUCHHOLTZ-AU: I finnst eins og þetta er really--
eins bara að horfa í gegnum dæmi er í raun leið til að læra þetta.
Svo er það sem við erum að gera.
>> TOMAS Reimers: Svo skulum þykjast vér aðeins vilja til að velja texta 2, rétt?
Þannig að við getum örugglega ekki gera það með persónuskilríki.
Jæja, við gerum það með að persónuskilríki, en það þýðir ekki að hafa persónuskilríki.
Ég gæti bætt einn, en við skulum þykjast að ég vildi ekki að bæta við einum
eða það hefur þegar eitthvað annað.
Ég get ekki gert það með það.
The tag er örugglega ekki einsdæmi, ekki satt?
Og hvorki er í bekknum.
En þú getur sameinað þetta.
Segjum að við vildum gera eitthvað sem gildir aðeins um hluti sem
hafa bekknum sérstakt og sem hafa bekknum falleg.
>> Svo hvað þú getur gert er í main.css, þú getur sagt, við skulum fyrst að eyða þessu.
Þú getur sameinað þessi.
Svo þú getur gert .special.
Engin rúm.
Bara .special.pretty.
Hvað það þýðir er eitthvað sem er bæði sérstakt og falleg.
Er að skynsamleg?
Og ef við förum hér, hvað þú ert að fara að sjá
er þessi regla á aðeins við um second einn, sem hefur bæði af þeim.
Og þú getur gert það fyrir fullt af hlutum.
Þú getur say-- skulum þykjast Ég vildi bara
að gera hluti sem hafa bekknum nokkuð og sem eru einnig lið tag.
Svo p.pretty.
Við skulum láta sem ég hafði eitthvað frekar á tag líkamanum.
OK?
Ég get keyrt þetta og ég má sjá að það er bara
fara að eiga við hluti sem eru málsgreinar með bekknum falleg.
Og þú getur sameinað þessi, grundvallaratriðum, eins og margir eins og þú vilt.
Svo þú getur bara sett þá saman.
Er að skynsamleg?
ALLISON BUCHHOLTZ-AU: Svo af þessu tagi er meira gagni
þegar Tomas var að segja áðan, kannski þú ert með mjög flókinn vef,
og þú hefur nú þegar mikið reglna þessara skrifað,
og þú þarft bara að sameina tvö undan.
Eins stað þess að skrifa í heild Ný val og breyta því þar,
þú getur bara sameina þá þar sem það skarast.
>> TOMAS Reimers: Eða þú gæti fundið out-- stundum
það er einn flokkur sem gerir lit Leturgerðin er eins blátt,
og það er annar flokkur sem gerir bakgrunnur blár.
Og það bara virkar ekki.
Svo þú skrifar sérstakt tilfelli, þar sem, like-- en ef það hefur bæði, hvað þú ert
að fara að gera er að þú ert að fara að gera þetta einn þetta litbrigði af bláum lit
og þetta þetta önnur litbrigði af bláum.
Ekki satt?
>> ALLISON BUCHHOLTZ-AU: Good fyrir þeim tegundum undantekningum.
TOMAS Reimers: Svo til hugsa um vandamál
sem gæti komið upp þegar þú sameina þær.
Cool.
Svo aftur að kynningu okkar.
ALLISON BUCHHOLTZ-AU: Við erum næstum þarna.
TOMAS Reimers: Og það hefur hætt tengingu.
ALLISON BUCHHOLTZ-AU: Oh, nr.
ALLISON BUCHHOLTZ-AU: CS á skrifstofu, internet fer niður.
Ó, kaldhæðni.
>> TOMAS Reimers: Svo sem betur fer, getum við kynna án þess að internetið, held ég,
vegna þess að við höfum öll skyggnur hér.
Svo skulum við tala um tengsl tags.
ALLISON BUCHHOLTZ-AU: Hægri.
Svo bara svona að fara burt af því Tomas sagði,
þetta er bara önnur leið til að gera það.
Þannig að við höfum sumir foreldri selector með barn val.
Svo í þessu dæmi hér, við höfum sumir líkami með bekknum valstiku, flokkur hnappinn.
Ah.
>> TOMAS Reimers: Oh, því miður.
>> ALLISON BUCHHOLTZ-AU: Og grundvallaratriðum, hvað þetta þýðir
er að velja öll börn, eins og allar þessar tegundir af selectors,
innan þessa foreldri val.
Og þeir eru einir það er alltaf að fara að eiga við.
Ég veit ekki hvort þér hafa betri leið of--
TOMAS Reimers: Svo ég giska á leið til að hugsa
um þetta er að muna áður en hvernig við tegund af eins setja þá saman.
Og þá þýðir að einn þáttur sem passar öllum.
Hvað þetta er að segja er ég vilt þú að passa allt
innan some-- ég vil þú að finna val.
Og þá innan það, ég vil þú að passa nýja hluti.
Ekki satt?
Svo í CSS, það er allt um svona að vera fær um að passa þessa hluti.
Og þú getur prófað að passa atriði innan annarra liða.
>> Svo skulum raunverulega gera dæmi, og við teljum að munum skýra.
Svo skulum þykjast við höfum sérstakt, sérstakt falleg, hvað sem er.
Og þá höfum við tengil, OK?
Svo man, a er tengill.
Það er ekki að fara að fara neitt.
Og við erum að fara að gefa það bekknum tengilinn, held ég.
Við skulum gefa það á class-- gefa mér hugmynd.
ALLISON BUCHHOLTZ-AU: Cool.
TOMAS Reimers: Coo-- skulum fara það bekknum falleg.
Hvers vegna ekki?
>> ALLISON BUCHHOLTZ-AU: OK.
TOMAS Reimers: Svo núna Pretty Things
eru að fara að gera bakgrunn blár, litur laxi.
Það er vit í.
Og ef við gerum this--
>> ALLISON BUCHHOLTZ-AU: Viltu bæta texta
svo tengil maeta?
TOMAS Reimers: Það væri góð hringja.
ALLISON BUCHHOLTZ-AU: 'Cause rétt nú erum við bara að fá ekkert.
TOMAS Reimers: Þannig að þetta er tengill.
"Þetta er tengill."
Oh, og þetta er að fara að vera annar hlekkur.
Við skulum gefa það í bekknum "kúl."
Þú ert rétt.
Cool.
Svo núna erum við að fara að grípa þetta.
Við erum að fara að kasta einn.
Við höfum einn í sérstakt tag, og við líka
eru að fara að hafa einn í nokkuð merkinu.
Og núna það sem við erum að fara að gera er að við erum að fara að gera cool--
hvað við viljum að hún geri?
ALLISON BUCHHOLTZ-AU: Getum við gert það stærri?
TOMAS Reimers: Við skulum gefa það a landamæri.
ALLISON BUCHHOLTZ-AU: Við gætum landamæri.
TOMAS Reimers: Já.
Þannig að við erum að fara að gera eitthvað eins, landamæri is-- og við erum
að fara að útskýra þetta allt í annað.
Fyrir now--
>> ALLISON BUCHHOLTZ-AU: Til kassi líkan.
TOMAS Reimers: En nú erum við bara að fara að gefa það a landamæri.
Svo hvað það þýðir er að þú ert fara að sjá þessa tengla.
Og þú ert að fara að sjá að þeir hafa þessi, eins og ljótu svartur landamæri, sem
er kaldur.
>> ALLISON BUCHHOLTZ-AU: Vefsíða okkar er svo falleg.
>> TOMAS Reimers: Já.
Vefsíða okkar er ógnvekjandi.
Svo þessir tveir eru tenglar, og þeir birtast.
Nú skulum þykjast I aðeins vildi gera þetta
ef það var ekki í einhverju sem hafði bakgrunn laxi.
Svo muna að þessu hefur bakgrunn á laxi,
vegna þess að það er í flokki falleg.
>> En við viljum að segja að aðeins kólnar sem eru í bekknum sérstakt, ekki í flokki
falleg, ættu að hafa strikin.
Jæja, hvað þú getur gert er að má segja, .special, rúm, .cool.
Og hvað það er að gera, þegar þú heldur um það, er það í rauninni að segja,
OK, finna mér allt sem passar sérstakt.
Þá innan þessara tags, finna mér allt sem er flott.
ALLISON BUCHHOLTZ-AU: Svo önnur leið sem gæti verið gott að hugsa um þetta,
færa það aftur til C, er bara eins og the hugmynd af umfangi.
Svo þegar þú ert sumir val, eins og þær
að við höfum verið að vinna í áður en þetta, allt á vefsíðu þinni, öllum HTML
er innan gildissviðs þinni, ekki satt?
En þegar við höfum þetta sambönd foreldra og barns,
það er eins og ef þú ert að minnka niður þar þú ert að leita að tilteknum stað,
eins og ef, eins og við erum að leita innan a sérstakur virka staðinn
af öllu skrá okkar.
Áhorfendur: Svo með það í huga, myndi það hafa máli ef við hefðum changed--
ALLISON BUCHHOLTZ-AU: The röð?
Áhorfendur: --the bekknum í CSS að .cool, rúm, .special?
ALLISON BUCHHOLTZ-AU: Já, vegna þess að þá
myndi segja, umfang það til allt sem hefur kaldur,
og þá líta á hvaða has-- Ég meina, eins og, í þessu tilfelli,
Ég held ekki að það hefði breytt því.
>> TOMAS Reimers: Ef við hefðum sagt hvað?
Því miður.
>> ALLISON BUCHHOLTZ-AU: Ef við svigrúm henni að kólna og þá
leita að hlutum úr sérstökum, það væri sama, reyndar.
>> TOMAS Reimers: Þannig að það myndi ekki vera.
>> ALLISON BUCHHOLTZ-AU: Það væri ekki?
Oh, ó vel.
Ég er rangt.
>> TOMAS Reimers: Svo ástæðan það er different-- sameiginlegt mistake--
er það núna bara Tengillinn er kaldur, ekki satt?
Ég giska Spurning mín krakkar er, hvað á þessari síðu er mætt með .cool?
Það eru tvær merkingar hér, ekki satt?
Hver er þetta og þetta.
Bæði passa flott.
Ekkert annað er.
Svo ef þú segir, .cool, rúm, .special, hvað þú ert að fara að segja er,
innan þessara tags, hvað er sérstakt?
ALLISON BUCHHOLTZ-AU: Hm.
Það er það sem it-- rétt.
Vegna þess að það er eins og bara eitthvað hér.
>> TOMAS Reimers: Svo það velur ekkert.
>> ALLISON BUCHHOLTZ-AU: Rétt við sérstakt, við erum á þessum merkjum hér.
>> TOMAS Reimers: Þeir og þeir.
Áhorfendur: OK.
Svo þessir merki frá skástrik?
>> TOMAS Reimers: Já.
Er að skynsamleg?
Hvernig það er í grundvallaratriðum reyna að þrengja gildissvið.
ALLISON BUCHHOLTZ-AU: Já.
Ég held það er líklega Auðveldasta leiðin til að hugsa um það.
>> TOMAS Reimers: Svo við fundum þetta, og Okkur fannst þetta bæði Viðburður sérstakt.
Og þá spyrjum við, innan þessir krakkar, hvað er kaldur?
Og innan þessa einu, kaldur þessa manns.
Innan þessa einn, ekkert er svalt.
Svo er þetta eina merki sem enn.
>> ALLISON BUCHHOLTZ-AU: Nauðsynlegt kaldur er bara innan þessara a tags þar.
TOMAS Reimers: Einmitt.
Og hvað er sérstakt innan þá?
Ekkert.
Nú, það sem ég mun segja er ef það var ekkert pláss,
þú ert að spyrja hvað er flott og special-- eða hvað er falleg og sérstök, ekki satt?
Ef þú segir .special.pretty, það er sama og .pretty.special.
>> Vegna þess að það að fjarlægja rúm er spyrja er, þegar þú segir .special,
þú ert að spyrja, OK, hver sjálfur ert sérstakur?
Og þá af þeim, sem sjálfur ert líka falleg,
sem er sama, málfræðilega, sem spyrja, hvað er falleg,
og þá af þeim, hvað er líka sérstakt?
Ekki satt?
Það er munurinn á hvað er í hvað er.
Áhorfendur: OK.
TOMAS Reimers: Já.
Awesome.
Svo með það í huga then--
>> ALLISON BUCHHOLTZ-AU: Ég held síðast okkar Málið er (í fínum BRITISH Hreim)
kassi líkan.
>> TOMAS Reimers: The box-- [chuckles] Ég elska hvernig Allison segir að.
Þannig að kassi líkan hlutur.
>> ALLISON BUCHHOLTZ-AU: Bara kassi, ég ætla að kassi líkan þínum.
TOMAS Reimers: Svo skulum við tala um það.
Svo núna við höfum eytt miklum tíma að tala um selectors.
Með því að nú eru þið sennilega, eins og, Meistarar selectors-- þú veist,
hvernig á að nákvæmlega velja efni sem þú vilt vinna á skjánum þínum.
>> Svo nú er spurningin, hvernig nákvæmlega getur þú vinna það?
Svo ég held að flestum undirstöðu leið til að hugsa um það
er vel, hvað nákvæmlega er liður í CSS?
Við höfum eytt miklum tíma að tala um, hvað er tag,
eða hvað er the undirstöðu framsetning á merkinu?
>> Góð leið til að hugsa um sem er, hvaða form er lax?
Hvaða form er, eins og er lax-lituðum bakgrunni?
>> Áhorfendur: Það er rétthyrningur.
>> TOMAS Reimers: Það er rétthyrningur, ekki satt?
>> ALLISON BUCHHOLTZ-AU: Var ekki bragð spurning.
[Hlátur]
>> TOMAS Reimers: Ekki reyna að plata ykkur svona seint.
Þannig að við höfum þetta rétthyrningur.
Og tag er p, ekki satt?
Svo gefur það okkur gott trú að ákvæðið
er táknuð sem rétthyrningur, að minnsta amk í huga vafranum, sem
það er.
>> ALLISON BUCHHOLTZ-AU: Ég meina, vafrar eru yfirleitt rétthyrnd,
svo það er vit í.
>> TOMAS Reimers: Hugmyndin hér er að öll af merkjunum innan CSS
eiga fulltrúa sem rétthyrningur.
Og hvert rétthyrningur hefur fjórum hlutar samkvæmt CSS, OK?
Þú hefur í raun efni.
Það er þar sem textinn liggur.
>> ALLISON BUCHHOLTZ-AU: Kannski myndin.
>> TOMAS Reimers: Já.
Þú hefur padding, sem er bara einhvers konar hvítt rúm.
Síðan sem þú ert með landamæri.
Og þá verður þú framlegð, sem er hvítt rúm utan þess.
Svo sem gerir ekkert vit að einhver, þannig að við erum
fara að tala um það fyrir a second.
Svo hérna, hvað við erum að fara að gera er að við erum að fara að búa til nokkrar Divs, OK?
Afsakið mig á meðan I--
>> ALLISON BUCHHOLTZ-AU: Mér finnst eins og við ættum að setja sætur mynd í.
>> TOMAS Reimers: Við ákveðið að.
>> ALLISON BUCHHOLTZ-AU: Mér finnst eins og allir
gæti notið góðs af a sætur mynd, er allur.
>> TOMAS Reimers: Getum við allt njóta góðs af a--
>> Áhorfendur: Já, viss.
TOMAS Reimers: OK, flott.
Svo við ættum að setja sætur mynd í somewhere.
ALLISON BUCHHOLTZ-AU: Mér líður eins og sætur kanína gæti verið gagnlegt núna.
TOMAS Reimers: Jú.
ALLISON BUCHHOLTZ-AU: End vikunnar.
Hafa eitthvað adorab--
>> TOMAS Reimers: Hvernig lota kettlingur?
>> ALLISON BUCHHOLTZ-AU: A kettlingur virkar líka.
>> TOMAS Reimers: Cool, því það er staður fyrir það.
Það heitir PlaceKitten.
ALLISON BUCHHOLTZ-AU: Það er frábært.
TOMAS Reimers: Já.
ALLISON BUCHHOLTZ-AU: Bara fyrir, eins og, Pláss myndir í vefsíðuna þína.
TOMAS Reimers: Mm-HM.
Það er líka PlacePuppy.
Og það er PlaceBacon.
>> ALLISON BUCHHOLTZ-AU: PlaceBacon?
Really?
>> TOMAS Reimers: Oh, eigum við ekki hafa internet hér.
>> ALLISON BUCHHOLTZ-AU: [groans]
Sorglegt.
TOMAS Reimers: Annars Ég myndi sýna ykkur
hvernig á að setja myndir í vefsíðuna þína.
Við erum að fara að reyna að fá þetta vinna áður en við verðum að fara.
En nú erum við bara fara að tala í litum þá.
Við viljum að setja myndir af kittens--
>> ALLISON BUCHHOLTZ-AU: Við gerðum.
>> TOMAS Reimers: --the internet er niður í bili að vera.
Þannig að við höfum tvær Divs, og við erum að fara að gefa þeim tvo auðkenni.
Við erum að fara að kalla það "Fyrst" og "second."
Svo id = "fyrst."
Og við erum að fara að gefa þeim tvo liti.
Svo hvernig gera við að velja eitthvað með id "fyrsta"?
ALLISON BUCHHOLTZ-AU: Dot eða kjötkássa?
Áhorfendur: Sharp.
TOMAS Reimers: Sharp, fullkominn.
Sharp, kjötkássa, hvað we--
>> ALLISON BUCHHOLTZ-AU: Fullt af hlutum til að kalla það.
>> TOMAS Reimers: OK.
Við erum að fara að setjast á hashtag, og það er það sem við erum að fara að fara með.
OK?
>> ALLISON BUCHHOLTZ-AU: hashtag.
>> TOMAS Reimers: Svo hashtag fyrst.
>> ALLISON BUCHHOLTZ-AU: Svo þú getur kvak sem seminar--
hashtag CSS, hashtag kaldur.
TOMAS Reimers: hashtag awesomeness.
ALLISON BUCHHOLTZ-AU: Hashtag Æðisleikastuðull, já.
TOMAS Reimers: OK.
Þannig að við höfum "fyrsta" og "annað".
Svo fyrst, við erum að fara að hafa a litur rauður.
ALLISON BUCHHOLTZ-AU: Uh, ristill.
TOMAS Reimers: Yup.
ALLISON BUCHHOLTZ-AU: Ég ætla að þinn blettur-afgreiðslumaður.
TOMAS Reimers: Allison fékk mér.
Background-litur blue--
>> TOMAS Reimers: Purple!
>> TOMAS Reimers: Purple.
ALLISON BUCHHOLTZ-AU: Já.
Uppáhalds liturinn minn Purple, og við höfum ekki notað það enn.
>> TOMAS Reimers: Violet.
ALLISON BUCHHOLTZ-AU: Violet.
Það virkar.
>> TOMAS Reimers: Þannig að við erum fara að hafa tvær Divs.
Þeir eru að fara að vera algerlega tóm.
Við ættum líklega að hafa einhvern texta.
Svo "fyrsta" er að fara að vera "HELLO."
Og "annað" mun say--
>> ALLISON BUCHHOLTZ-AU: Goodbye.
>> Áhorfendur: - "WORLD."
Halló, bless.
ALLISON BUCHHOLTZ-AU: Ég sá þá á tónleikum hinn viku.
TOMAS Reimers: The Beatles?
ALLISON BUCHHOLTZ-AU: Fyrir reals.
Þeir eru ekki það mikill.
Ég er ekki eins og það.
>> TOMAS Reimers: Við höfum "Halló" og "bless."
Og aftur, CSS er bara æðisleg, vegna þess að það færir liti okkar.
Ekki þarf að jafnvel áhyggjur af því að þær eru til.
Þeir gera.
>> ALLISON BUCHHOLTZ-AU: Þeir eru.
>> TOMAS Reimers: Svo CSS ég held hefur 255 orð til að tala um litinn.
Ef þú er að hugsa um lit utan þá 255, eins og ég mun vera hrifinn.
ALLISON BUCHHOLTZ-AU: Já.
Ég held að þú krakkar geta haft bara koma í rétt eftir.
>> TOMAS Reimers: Svo hér, þú munt sjá að við höfum tvo kassa
rétt ofan á hvor aðra, ekki satt?
HELLO og bless.
>> ALLISON BUCHHOLTZ-AU: Það er ekki pláss á milli.
Þeir eru bara smooshed rétt ofan á hvern annan.
>> TOMAS Reimers: Svo það fyrsta sem Ég held að við ættum að tala um
er skulum say-- einnig já.
Svo CSS táknar hann sem eins konar kassa.
Og eins og kassa, þeir hafa efni.
Og efni núna er eins konar Hello eða bless og það er það.
OK?
>> Svo einn af the fyrstur hlutur þú getur gert er að þú getur bætt padding.
Padding segir hversu mikið pláss það ætti að fara á hvorri hlið.
Svo skulum segja að ég vil segja 10 punktar á hverri hlið.
Og ég mun kryfja það í annað.
ALLISON BUCHHOLTZ-AU: Allir þessir hlutir hér
eru að fara að vera að mestu leyti í dílar fyrir the hvíla af námskeiðinu.
Þú ert að fara að sjá að það hefur sumir rúm í kringum það, ekki satt?
Svo hvað þú sérð ekki hér er að það er þetta ósýnilega konar padding
á hvorri hlið, sem segir, eins og, OK, þú kassi af content--
>> ALLISON BUCHHOLTZ-AU: Viltu bara að draga upp að skoða frumefni?
>> TOMAS Reimers: Já, það er góð hugmynd.
ALLISON BUCHHOLTZ-AU: Einnig finnst mér að skoða frumefni er góð leið
að reikna út ef eitthvað er að fara rangt, eitthvað óvænt gerist,
eftirlitsmaður merkin og sjá hvað það er eins og plága er gagnlegt.
>> TOMAS Reimers: Svo ég er ekki viss ef þú krakkar geta séð þennan lit.
Getur þú?
Þú munt sjá þetta padding á einhverskonar brún.
Og þá sérðu í raun efni í bláum, ekki satt?
Svo er það mjög Grunnurinn af kassi líkan.
Þú hefur efni.
Síðan sem þú ert padding.
>> Áhorfendur: Hvers vegna ekki bara nota kassann inni the--
>> ALLISON BUCHHOLTZ-AU: Hægri.
Vegna þess að það er bara að velja þátturinn núna.
>> TOMAS Reimers: Yup.
Aðrir hlutir.
Svo skulum við tala um það padding stjórn fyrir a second.
Svo í CSS, mælingar þurfa að hafa einingu.
Svo fyrst þú ert magn.
Svo í þessu tilfelli höfum við sagt 10.
Og svo næsta einn við höfum sagt er dílar, px.
Aðrar þær sem þú gætir hafa er hluti eins sentimetrar cm.
Þú getur gert hlutina eins, hvað er 10 cm?
Og það er að fara að vera fáránlegt.
>> ALLISON BUCHHOLTZ-AU: Oh, drengur.
>> Áhorfendur: Whoa.
>> TOMAS AND ALLISON: Já.
TOMAS Reimers: Svo er það allt padding.
Ég ætla að fara aftur til dílar.
>> ALLISON BUCHHOLTZ-AU: Punktar hafa tilhneigingu til að vera, eins og staðall.
Þegar þú horfir á a einhver fjöldi af websites, þeir vinna að mestu í dílum.
TOMAS Reimers: Svo þú ert að fara að sjá annaðhvort pixels-- hinna sem þú sérð
er Em, sem er eitt em er jöfn hæð í letur
sem þú ert að nota.
>> ALLISON BUCHHOLTZ-AU: Mm.
TOMAS Reimers: Það er góð leið til að segja, eins, ég vil eins mikið pláss og letur minn
er að taka.
ALLISON BUCHHOLTZ-AU: Fékk ekki vita það.
Þú lærir eitthvað nýtt á hverjum degi.
TOMAS Reimers: There ert a mikið af mælingum í CS.
Ég legg til að þú horfir þá upp.
Í öllum tilvikum þínum, held ég punktar ætti að nægja.
Og þeir eru líka hvað þú ert að fara að sjá
í flestum dæmum gert á netinu.
Þannig að við munum láta það á dílar.
>> Þú getur einnig ætti ég say-- svo padding setur allt á paddings.
Þú getur líka gert eitthvað eins og "Padding-top" bara set--
ALLISON BUCHHOLTZ-AU: Kannski við munum fá okkar "halló" aftur.
TOMAS Reimers: --to bara láta padding efst og ekkert annað.
Svo fjórum skipanir eru padding-toppur, padding-bottom, padding-vinstri,
og padding-right.
>> ALLISON BUCHHOLTZ-AU: Rétt eins og þú vildi búast við kassa.
>> TOMAS Reimers: Já.
Ekkert of brjálaður þarna.
Er að skynsamleg?
Svo það er padding.
Ég ætla að setja allar að paddings aftur til 10.
Og þá er ég að fara að fara á landamærunum.
>> Svo er það landamæri er landamæri er skrýtið stjórn.
Það tekur konar þremur hlutum í einu.
Svo fyrsta er hversu stór þú vil það að vera eins mælingu.
Aftur, ég er bara að nota punkta.
Og það síðasta sem ég ætti að bæta við mælingum
er einn hlutur sem þarf ekki eining er 0.
Það er í raun rangt að gefa 0 eining,
því 0 er 0 yfir tommur, dílar, sentimetrar, hvað sem er.
Það þýðir bara 0, ekki satt?
Svo fyrst þú gefa það mælingu.
>> Síðan sem þú gefa það í stíl.
Þannig að ég ætla að segja "solid".
Og við munum tala um hvað það þýðir.
Og þá loks, þú gefa það a litinn.
Þannig að ég ætla að segja "svartur."
Og þetta eru allt hlutir sem við höfum nú séð áður, nema fyrir stíl,
en við munum tala um það.
Svo þú krakkar hafa séð mælingar, og þú hefur séð liti.
Og það sem gerist er að við fáum þetta ágætur svartur landamæri kringum það, ekki satt?
Þú krakkar sjá hvernig við gerðum það?
>> Áhorfendur: Já.
>> TOMAS Reimers: Cool.
Svo er það það?
Svo fyrst af öllu, er það einn pixla.
Það er sjálfgefið nóg, ekki satt?
Eins er það einn pixla þykkur.
Eða það væri einn pixla, en ég er aðdregna í, svo það er a lítill hluti fleiri
en það.
>> ALLISON BUCHHOLTZ-AU: Og við höfum þetta fáránlegt upplausn TV.
>> TOMAS Reimers: Já.
Þú getur gert það stærri, minni, hvað sem er.
Svo hér er tveggja punkta landamæri.
Þú munt sjá að það er tvisvar sinnum eins og þykkur.
Næsta sem þú þarft er litur.
Það er ekki áhugavert.
Ég ætla ekki að tala um það, í raun.
>> ALLISON BUCHHOLTZ-AU: En stíl gæti verið bara smá áhugavert.
>> TOMAS Reimers: Já.
Svo stíl, það eru nokkrar sjálfur að ég sé að nota almennt.
Fyrstur er solid, næsta einn er dotted og hljóp á síðasta manns.
Og hér er dotted.
Þú munt sjá að þeir eru fullt af punktum, ekki satt?
Góð leið til að raða í fá gott landamæri fara, eru bandstrik líka nokkuð vinsæll.
>> ALLISON BUCHHOLTZ-AU: Og svo auðvitað, ég er
viss um að það eru fullt annað stíll sem þú getur fengið.
Og við höfum mikið safn af tenglar í lok fyrir ykkur
að eins konar lesa og líta á fleiri flott CSS.
>> TOMAS Reimers: Og þá the síðastur hlutur, við erum
fara að tala um kassi líkan raunverulegur fljótur.
Oh, og þá landamæri, nákvæmlega eins og padding,
þú ert líka hluti eins border-vinstri, border-hægri, border-toppur,
border-botn, sem leyfa þér að fá á tilteknum landamærunum.
Svo er hér bara landamerkin vinstri skilgreind.
Er að vit?
>> ALLISON BUCHHOLTZ-AU: Það er svalt leið til að leggja áherslu á hluti eða bæta
línur milli ólíkra þátta.
TOMAS Reimers: Algjörlega.
Svo er það landamæri okkar.
Og framlegð á síðasta manns.
Eins padding framlegðarstig félagsins nema það er ekki within--
ALLISON BUCHHOLTZ-AU: Það er ekki um frumefni þinni
en í raun um allt kassi sem við höfum verið að sjá.
>> TOMAS Reimers: Já.
Allison sagði það fullkomlega.
Það er ekki, eins og, Inni þáttur, það er um allan reitinn.
Það þýðir hluti eins bakgrunnur eiga ekki við það.
Og það segir í rauninni, eins, ég vil ekki neitt
í þessu mikið pláss fyrir mig.
Svo eins og hér höfum við framlegð af 10 punktar.
Svo ekkert innan 10 punktar ætti að vera við hliðina á mér.
Það er góður af sínum rúm en konar ekki.
Svo er það mjög Grunnurinn af kassi líkan.
Er að skynsamleg?
Cool, flott.
ALLISON BUCHHOLTZ-AU: Awesome.
Svo nú held ég að við bara hafa flott auðlindir okkar
að við munum taka ykkur í gegnum mjög fljótt.
Og við munum actually-- vel, höfum við internetið enn?
>> TOMAS Reimers: Við skulum sjá hvort ég get opnað up--
láttu mig sjá bara ef ég er hægt að fá internetið fljótt
en Allison talar um neitt Allison vill að tala um.
ALLISON BUCHHOLTZ-AU: Svo basically-- ég ekki
veit hvað ég get sagt á þessum tímapunkti.
En þetta eru nokkrar virkilega góðar leiðir.
Þetta eru þau sem Tomas og ég hef notað
og að við í raun er notað til að prep fyrir þetta.
W3Schools er eitt sem þú krakkar ættu að hafa séð áður.
Við mælum með það fyrir a fullt af hlutum með CSS.
Ég veit að ég mæli með því að kafla minn allan tímann.
>> Einn af the mikill hlutur er að það gerir þér kleift að konar skipta sér af CSS
og sjá breytingarnar samstundis í þessu,
eins, tveggja glugga skoða að það hefur.
Svo þú þarft ekki að hafa áhyggjur af setja upp eigin vefsíðu þína,
eða setja upp vhost í þínum sveitarfélaga tæki og heimamaður gestgjafi,
og fá öll þessi efni vinna.
Það er fellt rétt á henni.
>> Og það hefur þessi litla lærdóm sem þú getur
fara í gegnum til að læra meira um selectors,
eða læra um notfæra þinn letur, eða bakgrunnur eða mynd.
Og þú hefur þessar tafarlaus niðurstöður sem þú
þarft ekki að gera eitthvað önnur o.fl. vinna fyrir.
Svo ég elska W3Schools.
Það er stórkostlegur.
Er það að vinna?
>> TOMAS Reimers: Já.
Nei, það er ekki.
Viltu mig til að reyna og endurræsa tölvuna mína?
Eða viljum við to--
>> ALLISON BUCHHOLTZ-AU: Ég meina, Jæja, þetta mun einnig vera á netinu.
Öll skyggnur mun vera online.
Svo ég bara mæli með að gera þetta.
>> Þetta er frábært og bara eins svindlari lak.
Það er bara allar helstu skipanir sem þú hefur.
Það er frábært þegar þú ert fyrst byrjun út á vefsvæðið þitt.
Vegna kannski ekki langar til að komast í alla
alvöru snotur sendinn hönnun þungur efni.
Þú þarft bara að sníða það á þann hátt þannig vit og vilja
gera að sinni.
Og ef þú vilt virkilega að fá inn í það, ég veit
þetta er, eins og, einn af Uppáhalds tilvísanir Tómas er.
Við vorum að nota það til fs, og það er stórkostlegur.
Það er Hönnuður frá Mozilla.
>> TOMAS Reimers: Svo Mozilla eru fólk sem gerir Firefox.
Og það er bara eigin verktaki þeirra tilvísun, sem ég held er ógnvekjandi.
Og hefur það yndislegt Listi yfir auðlindum.
Þannig að við have--
>> ALLISON BUCHHOLTZ-AU: Og þá er síðast huga
þegar þú ert að reyna að hanna vefsíðu þinni,
draga innblástur frá hlutum sem þú telur eru nokkuð.
Eftirlitsmaður frumefni, eftirlitsmaður kóðann
getur verið frábær gagnlegt fyrir að reyna að reikna út
hvernig á að stíll eigin vefsvæði.
>> Oft, mér finnst eins og best leið, að auki tilraunir,
er bara að horfa á hlutir sem eru falleg.
Mér finnst það er mjög erfitt að bara konar hönnun hlutina á eigin spýtur,
sérstaklega í upphafi.
Svo skaltu líta á vefsíður að þú njótir að horfa á.
Reikna út hvað gerir þá sætt sig við þig.
Og þá ekki hika við að reyna endurtaka það.
>> TOMAS Reimers: Hægri.
Jafnvel eins og vefsíður eins og þetta, getur þú séð
það er örugglega a div efst.
Og þá verður þú annað div innan hér, sem er CSS awesomeness.
Og þá þú hafa a fullt af tenglum hér.
Ef þú virkilega bara skoða þættir, getur þú flokkað af
byrja að sjá hvað vefsíður líta út eins og hvernig get ég
endurskapa að ef ég vildi.
Er að skynsamleg?
Þannig að við höfum aðeins þrjár mínútur eftir.
Svo spurningum?
Allir af þeim?
Já.
>> Áhorfendur: Fyrir lit rétthyrningur, hvernig myndi þér
have-- ef þú vilt ekki að það fara yfir alla síðuna, gæti
þú hefur gert það að fara yfir aðeins helmingur síðu eða bara texta?
>> TOMAS Reimers: Já, algerlega.
Svo láta mig sjá í raun.
Ég hef tvær hugmyndir.
Svo fyrst af öllu, þú Einnig er hægt að nota percents.
>> Áhorfendur: Really?
>> ALLISON BUCHHOLTZ-AU: Svo eitthvað að líta upp er miðað staðsetning.
Það er eitthvað sem við hafa ekki tíma til að komast inn,
en það er eitthvað sem ég örugglega mæli með að þú krakkar að skoða.
>> TOMAS Reimers: Svo percents.
Og sjá hvernig við gert það bara 50% af breidd?
ALLISON BUCHHOLTZ-AU: Ef þig reyndar veit fjölda punkta,
þú getur verið nákvæmari þannig.
Þú getur fiðla kring með það.
En 50%.
Ef við værum að búa vafra okkar, það myndi gera það minna.
>> TOMAS Reimers: Jæja, það er grundvallaratriðum 50% núna, held ég.
Það er 50%, og þá framlegð hefur verið bætt við það.
CSS hefur a einhver fjöldi af einkennileg tilviljun.
Svo núna er þetta 50% af síðu breidd.
En mundu að þú hefur 10 punktar tekið burt frá hvorri hlið.
Þannig að ef þú varst að fara að gegn vinstri brún af the flettitæki,
þá myndi líta út eins og 50%.
Aftur, eins og ég sagði, CSS getur vera a einhver fjöldi af giska-og-stöðva.
Eins held þú eitthvað er fara að haga sér á einn veg,
en það hegðar sér allt öðruvísi hátt.
>> ALLISON BUCHHOLTZ-AU: Og þú færð bara betri,
og þú færð bara betra innsæi fyrir það eins og þú fara eftir.
>> TOMAS Reimers: Og það versnar og verri.
Svo það er í raun bara kapp.
>> ALLISON BUCHHOLTZ-AU: Það er frábær uppörvandi.
Við viljum að þær eins og CSS.
>> TOMAS Reimers: CSS er ógnvekjandi.
Mundu að.
Aðrar spurningar?
>> ALLISON BUCHHOLTZ-AU: The einn hlutur.
Eitthvað annað?
Cool.
>> TOMAS Reimers: Awesome.
>> ALLISON BUCHHOLTZ-AU: Jæja, ef þú krakkar hafa einhverjar spurningar síðar,
við erum alltaf til staðar eins og á venjulega.
Þú munt sennilega sjá sumir af okkur fyrir lokaverkefni
og örugglega á hackathon.
>> TOMAS Reimers: Algjörlega.
Og á gangvirði.
>> ALLISON BUCHHOLTZ-AU: Og á gangvirði.
Oh.
>> TOMAS Reimers: Hlakka til sjá öll awesome-- þína
>> ALLISON BUCHHOLTZ-AU: Við munum sjá allar ógnvekjandi vefsíður þínar
sem mun vera fallegur.
TOMAS Reimers: Þú getur alltaf sjá, eins og, vefsíður
sem hafði, eins og, gott CSS og þá eins og þeir sem ekki reyna að gera CSS.
ALLISON BUCHHOLTZ-AU: Einnig, annar hlutur, eitt í viðbót til að líta inn
er Bootstrapping.
Svo er Bootstrap mikill.
>> TOMAS Reimers: Google að ef you--
>> ALLISON BUCHHOLTZ-AU: Google það.
Það er stórkostlegur.
Þú munt elska það.
Og núna þegar þú ert a undirstöðu-skilningur af CSS,
það mun gera a einhver fjöldi meira vit.
Awesome.
Takk, krakkar.
>> TOMAS Reimers: Þakka þér svo mikið.