>> [Muusika mängib]
ALLISON Buchholtz-AU: Nii me põhiliselt lihtsalt läheb
teile hooletussejäetud CSS, sest me teame,
et ta ei ole kaetud kõigis osades.
Ja me tõesti tahad teha kindel, et teil kutid on seda tööriista teie käsutuses,
sest tal on võime teha oma veebilehed vaadata palju ilusam.
>> Ja kui sa oled hoone veebilehel, siis sa ilmselt tahad teha see ilus.
Ma mõtlen, et sa ei pea, aga ma soovitan seda. [Naerab]
Kui soovite, et kasutajad seda kasutada, võite tahan teha natuke [kuuldamatu].
Nii et me läheme proovida ja teile lihtsalt mõned põhilised tööriistad ja mõistmist,
nii et kui sa minema ja sa oled uurides asju CSS,
see ei ole täielik jama, nagu CSS mõnikord olla.
>> TOMAS Reimers: Jah.
Allison ütles, et see päris hästi.
Nii et ma arvan, et esimene asi, mida me peaks algama ongi CSS?
Nii CSS on fantastiline.
CSS--
>> ALLISON Buchholtz-AU: Ongi nimi meie seminar.
>> TOMAS Reimers: Jah.
See on tõesti oluline, et saate aru, et selleks ajaks.
Kui teil on ainult ära võtta ühe asi, see, et CSS kui awesome.
Kaks on CSS tähistab Cascading Style Sheets.
Nii keskmes, CSS on style sheet, mis tähendab,
see võimaldab teil stiil veebilehel.
Ja siis, mida see tähendab, et see on võimalus lisada stiilis oma veebilehed.
Nii stiili all mõistame kõike see pole structural--
nii asjad värvid, taust pildid, piiride, nagu, polster,
marginaale.
Me räägime sellest, mida kõik, mis tähendab natuke.
>> Nii oleme lihtsalt läinud edasi ja avada need mõlemad üles gedit.
Nii et see on index.html.
Ja see on main.css.
Nii main.css pole midagi.
ALLISON Buchholtz-AU: No stiilis siiani.
TOMAS Reimers: Puudub.
Ja nagu te näete, et see on kole kohas.
ALLISON Buchholtz-AU: See on lihtsalt tavaline.
TOMAS Reimers: Jah.
Jah, see ei ole kole, see on lihtsalt minimalistlik.
Ja siis on meil siin index.html.
Ja nii kiire sulgege HTML, Allison,
tahad lihtsalt rääkida lehel?
>> ALLISON Buchholtz-AU: Jah.
Nii et ilmselt on meil HTML tag, mis lihtsalt nimed HTML faili.
Meil on päis siin, CSS Awesomeness, misjärjekorras kui sa lähed tagasi.
Kus see on?
>> TOMAS Reimers: Oh.
Jah, näed.
ALLISON Buchholtz-AU: Ja teate kaudu
on selle kaardi kaudu õigus siin.
Ja siis "Hello, world!" on teksti, et meil on lihtsalt
väljapanek veebis lehekülg, mis on-- tagasi minna.
Tagasi.
Kumb on lihtsalt meie keha siin-- lihttekstina.
Ka üks asi teate, kui te vaatate siin
Tomas sisse up need kaks meie slide.
Nii kaua, kui teil on kõik need kolm, sa oled hea.
Nad võivad olla mis tahes, et nad tahavad.
Mis on kõige olulisem just seda teil on kõik need kolm asja.
>> TOMAS Reimers: Cool.
Lisa doc tüüp?
ALLISON Buchholtz-AU: Jah.
TOMAS Reimers: Jah.
Külm.
ALLISON Buchholtz-AU: Ilmselt minu mikrofoni ei meeldi mulle.
TOMAS Reimers: Oh, anna meile sec lihtsalt samas Allison lülitub välja oma mikrofon.
Nii et jah.
Nii et meil on meie peamine lehel.
See on selline unstyled.
Meil ei ole palju.
Me peame lihtsalt põhimõtteliselt teksti.
Meil on stiili lehed.
Meil on pealkiri.
Nii lihtsalt paljaste konditustatud komponentide teha veebilehel.
>> Nii sealt, olgem rääkida, mida CSS on
ja kuidas see välja näeb ja kõike seda.
Nii selle--
ALLISON Buchholtz-AU: Tagasi slaidid.
TOMAS Reimers: Tagasi slaidid.
Ja Allison on võimalik üle võtta.
>> ALLISON Buchholtz-AU: Woo.
OK.
Nii et teie CSS faili sa lähed on
Palju neid asju nimetatakse valijad.
See oleks lihtsalt alusel oma CSS faili.
See on lihtsalt saab olema palju, palju neid.
Nii valijat.
See on lihtsalt üldine anatoomiat.
Me läheme läbi näited, sest kui sa poisid kunagi
vaatasin minu jagu, ma tunnen nagu asju abstraktselt
tõesti ei mõtet.
See aitab alati näha näiteid.
>> Nii et meil on mõned valijat.
See saab olema mõned tunnus mida me tahame stiilis pöörduda.
Ja siis me saame mingit reeglid ja väärtused.
Nii valijad, et võite näha võiks olla midagi sellist keha,
või lõike P, või päis, või mis iganes,
mida iganes sa tahad oma HTML olema.
>> Nii et kui meil keha.
Ja meil on mõned reeglina mis vastab see
mida teie stiil seostub.
Nii et kui meil taustavärvi ja fondi paksuseks.
Nii et see on muutu taustal midagi
mis tahes body meie HTML faili.
Ja see annan see see helesinine väärtus.
>> Nii et see läheb teha taust helesinine.
Ja siis midagi jooksul keha on läheb on fondi paksuseks julge.
Nii, et see lihtsalt läheb julge kõik meie teksti.
Ja see on vaid üks valijat.
Aga te oleksite väga paljud neist.
Ja kui me ei kavatse näidata hiljem natuke rohkem sellest, kuidas
et tööd ja rohkem näiteid seal.
Midagi, mida soovite lisada?
>> TOMAS Reimers: No.
Allison sain aru.
Me lihtsalt läheb tükeldada Näiteks siin meie näiteks kohas.
Nii saab tegelikult seda.
See on täiuslik.
Nii et ma lähen lihtsalt kopeeri ja kleebi et otse meie main.css.
Ja ma lähen salvestada.
Ja siis me käivitada.
Nii pool tähele, üks Kõige masendav asju
on, kui sa ei Faili salvestamiseks ja siis, nagu, laadige leht,
ja nagu, miks ei ole muutus toimub?
See juhtub.
Nii et siin me nägime, et tegime veebisait helesinine taust
ja mõned rasvases kirjas teksti.
>> Tahaksin ka mainida, kui te poisid on küsimusi midagi
me teeme, palun võtke tasuta lõpetada ja küsi meilt.
Oleme täiesti nõus väljale küsimustele.
>> ALLISON Buchholtz-AU: Ilmselgelt on CSS, kõik põhineb ise.
Nii et kui üks asi ei mõtet nüüd oleme
ei taha, et raba sind hiljem.
>> TOMAS Reimers: Nii lähme selline lahkama seda.
Nii et ärge te soovite alustada valitavad siin?
>> ALLISON Buchholtz-AU: Jah.
Nagu ma ütlesin enne, body on lihtsalt meie valijat siin.
Kui me läheme tagasi üle meie index-- ah.
>> TOMAS Reimers: Milline ma lihtsalt suletud.
Anna mulle teine.
Nii Fail, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Nii et kui te märkate siin, me on need keha sildid, eks?
Nii valijat lihtsalt vastab sildid, mis me räägime.
Nii keha siin.
Mida me tahame öelda, everything-- saame minna tagasi?
Ma soovin, et saaksin lihtsalt nagu puudutage ekraani.
Oleks nii palju jahedam.
>> Nii midagi neis keha sildid, mis me nägime
oli lihtsalt, nagu, teksti, ja keha üldiselt
viitab, nagu, tausta.
Kui sa kunagi tahad muuta tausta,
et saab olema ka body.
Just on need reeglid kohaldamine.
>> Nii et kui me olime minna index.html and-- tegelikult,
me saame midagi väljaspool keha?
Kui meil oleks nagu, jalus või midagi, siis ei kehti see.
Aga midagi jooksul Nende keha silte läheb
mõjutab see organ valijat, et oleme teinud.
Nii et kui sa olid tüüpi midagi muud there--
>> TOMAS Reimers: lähme sõidame, et kodus.
Nii et kui meil oli div-- nii see on lihtsalt üks tag saab olla.
Ma lähen sulgeda.
Või teeme seda lõiku.
Nii p tähistab lõikes.
Ja selles lõigus.
Ja siis ma ütlen: "See on tekst."
Külm.
Ja siis ma tegin seda reeglit kohaldatakse lõikes asemel keha.
Näete, kuidas seda kohaldatakse ainult vastmoodustatud lõikes, paremale,
ei kogu asi.
Kas on mõtet?
>> ALLISON Buchholtz-AU: Nii et see on kõik keha,
aga nüüd meie valijat lihtsalt vastab lõikes.
Nii et me lihtsalt julge ja sinine selle konkreetse lõigu
sest see on ainus asi, mis on ümbritsetud p tag.
>> TOMAS Reimers: Kas on mõtet omamoodi kuidas asjad endasse muud asjad?
ALLISON Buchholtz-AU: Ka lihtsalt öelda, nagu, üks parimaid viise
et tõesti rahul CSS on lihtsalt teha asju nagu see,
lihtsalt proovida.
See on väga lihtne kirjutada midagi välja lüüa Värskenda ja vaata, mis juhtub.
Ja nagu enamik CS, eksperimenteerimine võib sageli
kaasa palju parem intuitiivne mõistmine.
Seda enam, et kui meist lihtsalt, nagu, räägin sinuga.
>> TOMAS Reimers: Absoluutselt 100% nõus selles küsimuses.
Kui me läheme tagasi selle, alustame Anatoomilised täpselt, mida need kaks teha.
Nii et meil on kaks reeglit selle kohta.
Nii esimene on tausta värvi.
Ja te näete, et me oleme määratud selle võrdne väärtus, helesinine.
>> Nii CSS, CSS on omamoodi väga lahtine, kuidas
sa oled lubatud määratleda värvi.
Nii saab määratleda neid nimepidi.
Võite teha ka midagi "punane".
Ja siis kui me läheme tagasi selle, näete, et taust on punane.
Samuti saate really-- Ma arvan, et sa võite üsna loominguline seda,
ei saa sa oled?
>> ALLISON Buchholtz-AU: I arvad, et saad kasutada hex.
Kas pole?
>> TOMAS Reimers: Jah.
Nii saate hex.
Aga ma olen mõelnud nimi tark.
Kas pole seal?
ALLISON Buchholtz-AU: Seda saab teha üsna vähe.
Päris palju nagu enamik värve, mis sa saab name-- nagu ma arvan, lõhe on üks.
>> TOMAS Reimers: Oleme ürita lõhe.
ALLISON Buchholtz-AU: I arvan chartreuse on olemas.
TOMAS Reimers: Jah.
Vaata?
Nii saad päris loominguline.
>> ALLISON Buchholtz-AU: Sa võib saada päris loominguline.
Like, kui sa ei mõtle värvi nime, see on ilmselt seal.
Kui sa tõesti tahad trahvi detail, võid minna hex.
>> TOMAS Reimers: Jah.
Nii kuueteistkümnendsüsteemis.
Kui te poisid mäletavad seda tagasi vanast pset, Image taastuda
kutid pidi tegelema Nende hex väärtusi.
Ja omamoodi sulgege, mis see on, hex on kolm väärtused salvestatakse see.
Nii et see on kahekaupa sammuga.
Esimesed kaks moodustavad punase väärtus.
Teine tähistab roheline väärtus.
Ja viimane on sinine?
>> Nii FF juhtub esindama kuueteistkümnendsüsteemis 255.
Nii et teil on 255 punane, 255 roheline ja 0 sinine.
Ja väärtuste vahemikus 0 kuni 255.
>> Sihtrühm: Right.
Nii et sisuliselt me ​​võiks otsida Internetis tahes värvi me tahame,
ja selgitada tegelikult-tuntud värvispektri combo,
ja siis me võiks panna selle?
ALLISON Buchholtz-AU: Täpselt.
Nii et teil on päris palju täielikku kontrolli üle värvid, mida lähemal CSS.
Kas me räägime taustapilte hiljem?
Või kas me tahame seda teha?
>> TOMAS Reimers: Jah.
Absoluutselt.
Nii et esimene, vaid näidata, et punane ja roheline on kollane.
Ja kui teil on vaja mõned aidata leida seda, siis
saab Google midagi nagu "värvivalimisdialoogi."
ALLISON Buchholtz-AU: Oh, see on nii hea.
Ma armastan Värvivalija.
>> TOMAS Reimers: colorpicker.com on hea näide.
Ja siin, näete, et teil on täis Photoshop-like värvivalimisdialoogi.
>> ALLISON Buchholtz-AU: Mm-hm.
Samuti lahedaid asju sa oled võib tekitada värvilahendusi
nii et sa ei pea, nagu, minnes värve.
TOMAS Reimers: Ja siis siin on hex väärtus siin.
Nii saad alati leida online põhimõtteliselt kohti saada hex väärtus.
See ei ole mingisugune, et just nagu me vaata värvid maailma numbrid.
See on rohkem, et me minna online ja leida, mis värvi me tahame,
ja siis võta number alla.
Sest see on lihtsalt väga lihtne viis viide asju CS.
>> ALLISON Buchholtz-AU: Ja siis on also--
Ma unustan täpset nime kohas.
Aga seal on kindlasti, ma arvan, midagi Adobe
mis tekitab värvilahendusi teile, mis on väga lahe, sest sa
definitely-- on mõnikord raske aru saada,
oh, kui ma tahan kasutada seda värvi, milline võiks olla veel üks kasulik üks
kasutada mujal oma saidi, nagu, oleks kena ja sidus.
>> TOMAS Reimers: Allison räägib ükshaaval Adobe nimetatakse Kuler, ma arvan.
See on K-U-L-E-R.
ALLISON Buchholtz-AU: Ma arvan küll.
Ma olen päris kindel, et see üks.
>> TOMAS Reimers: Minu lemmik on alati olnud Color Scheme Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS Reimers: Milline on now--
>> ALLISON Buchholtz-AU: Ah, see on ilus.
>> TOMAS Reimers: Ja sa võib põhimõtteliselt öelda, nagu,
Ma tahan kolme värvi üksteise kõrval.
Ja siis teeme midagi ilusat.
Ja siis saad näiteks mida see tunduda.
Ja siis, kui te hover üle ükskõik neid, see annab sulle hex väärtus.
>> Nii lihtsalt on hea viis alustada mõtlema värvilahendusi
või mis värvi veebilehel võib minna ka koos.
Kuna see võib olla üllatavalt ei ole nii lihtne valida, kui sa arvad.
Ja siis teine ​​lahe asi Olen alati leidnud selle saidi
on kui vajutad näited, siis see näidata, mida näiteks veebilehel
tunduda kasutades, et värvilahendus.
Igatahes.
>> Tagasi tegelik CSS.
ALLISON Buchholtz-AU: Aga loomulikult, me tean, et need viited võivad olla kasulikud.
TOMAS Reimers: Ei, nad Kindlasti võib olla kasulik.
Nii Teine reegel, Allison?
>> ALLISON Buchholtz-AU: Jah.
Teine reegel on lihtsalt vastab meie font.
Nii font kaal on lihtsalt selline of-- nii kaal oleks
kui sa tahad lihtsalt, nagu, normaalne või, nagu, õhem fondid,
või antud juhul, nagu, julge.
Ma unustan.
Mis siis, kui sa tahtsid it-- on olemas õhem ühe kui lihtsalt nagu normaalne?
TOMAS Reimers: Ma tegelikult ei tea, kas seal on õhem üks.
ALLISON Buchholtz-AU: ma unustan.
Nii fondi paksuseks me tavaliselt lihtsalt kasutada julge.
Kui sa tahad saada tõesti arvesse see, me ei kavatse näidata teile.
W3Schools on kõik erinevad asju, mida saate teha fonte.
Aga põhimõtteliselt, kui sa kunagi tahad muuta midagi font,
see on alati saab olema, nagu, font-midagi.
Nii saad nagu, font-family kui sa oled püüab muuta tegelik tüübist.
See oleks font-style, kui te tahad teha see nagu kursiivis,
või kaldkirjas või tühi-tähi.
Või isegi font-color, kui tahtsime seda muuta.
>> TOMAS Reimers: Jah.
Nii et sa ei saa seda muuta.
Ja omamoodi lihtsalt sulgege nüüd, nii et saate
näha, et meil valijat siin.
Meil on need looksulg.
Ja siis on meil reeglid piiritletud semikoolonid.
Kas on mõtet?
Jah?
Külm.
Nii et kui see on good--
>> ALLISON Buchholtz-AU: Back.
TOMAS Reimers: Räägime konkreetselt umbes millist valijad oleme.
Sest just nüüd me oleme omamoodi lihtsalt näidanud sildid.
Aga kutid ei näe ta usutav.
Ütle, et teil on kaks lõiku lehel ja te
soovite, et oleks võimalik stiili üks, kuid mitte teiste,
sa ei lihtsalt tahan piirata ennast on kasutada erinevaid tegelik HTML
sildid, et anda neile erinevaid stiile.
>> Nii et meil on kolm põhilist tüüpi lülitid.
ALLISON Buchholtz-AU: Jah.
Nii et meil on silt, mis on see, mida oleme rääkinud just nüüd.
Nii et see on selline nagu keha või p.
Ja siis on meil klassis, mis on Kui me defineerime seda meie CSS faili
see on alati saab olema dot olenemata soovite nime oma klassi olema.
Ja see ei kehti mitu asja.
>> Ütle, et on viis punktid ja kaks kolmest neist
tuleb stiilis sama, sa kehtiks klassi ta.
Ja see on just nii me seda teeme.
Anname teile näide kui see tegelikult näitab üles.
Aga kui sul oleks võib-olla mõned tag p, pärast seda, siis oleks kirjutada,
klassi võrdub iganes klassides soovite rakendada seda.
Mida iganes klassi lülitid, mida me tahame taotleda selle konkreetse lõigu
me võiks lihtsalt kirjutada niimoodi.
Muidugi, ma arvan, et näiteks teeb palju konkreetsem.
>> Teine on meil on id, mida me tähistame
koos hash või naela või hashtag.
TOMAS Reimers: Octothorpe.
ALLISON Buchholtz-AU: Octothorpe.
See töötab ka.
Ja see peaks tõesti olema unikaalne.
Nad tuleks kohaldada üksnes üks asi lehel.
Nii et kas see on eraldi lõik, või mõne Loendi elemendi või mis iganes,
see peaks olema unikaalne.
Ja samamoodi, et me lihtsalt öelda, nagu, class = "Klass1 class2"
see võib olla ainult id iganes oleme.
TOMAS Reimers: Jah.
Nii saab kindlasti rääkida umbes näited siin.
Ja ma lihtsalt sukelduda otse tagasi koodi.
Nii vaatame meie HTML.
Ja nii me just nüüd on üks punkt.
See on tekst.
Ma lihtsalt muuta see. "See on tekst 1."
Ja siis me läheme on "See on tekst 2."
>> ALLISON Buchholtz-AU: teine.
TOMAS Reimers: Jah.
Nii on meil nüüd "See on tekst 2" eks?
Ja me näeme, et kui me uuesti Lehe mida me leiame
on me saame find--
ALLISON Buchholtz-AU: Ooh.
TOMAS Reimers: Jah.
Me leiame "See on Teksti 1 "ja" See on tekst 2. "
>> ALLISON Buchholtz-AU: Ja välja armas kollane värv.
>> TOMAS Reimers: Ja te näete et meie valijat kohe,
mida kohaldatakse P või punktid, mõjutab nii neist,
kuna mõlemad vastavad tingimusel, et nad on nii p tag.
See teeb kokku mõttes.
Seega on küsimus selles, noh, mis Kui me tahtsime ainult saada üks?
Nii täpselt nagu Allison ütles, meil on kaks võimalust seda teha.
Ma lähen alustada id.
>> ALLISON Buchholtz-AU: Alustame id.
>> TOMAS Reimers: Ja nii Nende atribuudid.
Nii atribuudid olemas HTML.
Ja mida nad on midagi, mida sa lisada
sees tag, mis on eraldi tag nimi.
Nii saab olla mitu atribuute.
Jah?
>> ALLISON Buchholtz-AU: Ma lihtsalt lähen öelda, teie näite pset 7,
kui keegi teile püüdma viia asju keskus,
sa võisid kasutada "Text align = center."
Ja te olete märganud, et tõenäoliselt oleks tsentreeritud
oma teksti või teie navigation bar.
Nii et lihtsalt ka atribuudi et võite olla tuttav.
TOMAS Reimers: Seal on hunnik atribuutide et näete.
Jah.
Nagu hea viide pset 7.
Meil on id.
Te saate ka klassi asjad niimoodi.
Ühe tag võib olla palju atribuute.
Nii algab id, olgem teeselda me tahtnud id of-- ma ei tea.
Me nimetame seda erilist, sest see, et me oleme
kavatseb teha julgeid ja rõhutada, ja mida iganes.
ALLISON Buchholtz-AU: See on saab olema super erilist.
TOMAS Reimers: Nii et see üks, meil on id erilist.
Nii, kuidas valida, et siis on in main.css asemel on p tag,
sa #special, OK?
Ja mis valib asi id erilist.
Kas see mõtet kõigile?
Sihtrühm: Jah.
TOMAS Reimers: Cool.
Nüüd, kui me tagasi minna, me see-- whoops.
Jah.
Me näeme, et see ainult valib üks id erilist.
Jah?
Kõlab lahe.
Jah.
>> Sihtrühm: Kas midagi on omistada nii klassi ja id?
>> TOMAS Reimers: Jah.
Sihtrühm: OK.
Ja mis siis juhtub, kui sa siis anna see teatud eeskirjadest CSS, et konflikt?
TOMAS Reimers: Absoluutselt.
Me kindlasti läheb rääkida sellest.
Nii täpselt, mida sa ei saada at, saab ka klassi.
Nii saab teeselda, ma pidin kolm lõiku ja I
tahtsin stiilis esimene kaks, kuid mitte kolmanda.
Noh, teie esimene mõte võib olla, noh, ma võiks lihtsalt anda teine ​​id.
Aga sa ei saa, sest id, täpselt nagu Allison ütles,
See peab olema unikaalne.
>> Nii et selle asemel id, mida saab kasutada on, saab kasutada klassis.
Ja class-- mida see võimaldab sul teha on põhimõtteliselt öelda,
see kuulub osana grupp.
Sel juhul meie grupp nimetatakse Special.
Ja see, mida me teeme, siis on me ei kavatse say-- mitte nael
me ei kavatse kasutada dot.
OK?
Ja teate, et naela ja dot eksisteerivad üksnes CSS faili
ei kuulu HTML.
ALLISON Buchholtz-AU: Jah.
Tähtis vahet.
>> TOMAS Reimers: Mul on oli nii palju vaeva,
sest panin hash HTML ja siis lihtsalt tundsin loll pikka aega.
Vaata, kuidas see valib mõlemad need, kellel selle klassi?
Külm.
>> Nüüd on asjad võib olla mitu klassi.
Oletame, et ma tahtsin teha esimene kaks on taust kollane
ja kaks on värvi sinine.
OK.
Ma tõesti ei tea, miks ma tahaks taha seda teha, aga saan.
>> ALLISON Buchholtz-AU: pruugi soovitatav see oma veebilehel.
Aga meie eesmärkidel, siis teen.
>> TOMAS Reimers: See ei ole hea värvilahendus.
ALLISON Buchholtz-AU: Noh, kollane ja sinine on minu keskkooli värve.
Ma ei tea küll.
TOMAS Reimers: Allison kõrge Koolis oli väga värvilahendus.
[NAER]
Niisiis, mida me nimetame seda Kutsume see-- nii et meil on Special
ja meil on ilus.
Pakun, et see, mida kasutate palju kirjeldavad nimed.
ALLISON Buchholtz-AU: Jah, ma tahan nimetame seda, nagu kollane või sinine.
>> TOMAS Reimers: Me ei ole tõesti tegemist tõelise veebilehel,
mistõttu me ei tee seda.
Aga kui sa tegelikult oli tõeline veebilehel, siis
Võib-olla, nagu, artikli päis, artikli sisu, esimene sõna,
asju, mis võimaldavad sul olema palju kirjeldav.
Need on tõesti nagu muutujaid.
Nad peaksid olema nimetatud viisil, kus saad, like-- jah, kui selline.
Perfect.
>> Nii taustavärvi.
Ja siis me läheme say-- nii kuidas muuta värvi on lihtsalt "värvi."
Ja me ei kavatse teha see sinine.
See on lahe.
Nüüd on meil Esimesed kaks on eriline.
Järgmisena läheb on "class = ilus."
ALLISON Buchholtz-AU: Ja siis saate tahan lisada "päris" keskel üks.
TOMAS Reimers: Jah.
Ja siis keset üks, lisada "päris" Mis juhtub
on sul lihtsalt ruumi.
Nii klassi atribuut on tühikutega eraldatult
kõikide klasside mis kehtivad et tag.
OK?
See ei ole selline, nagu see kuulub mingi eriline klassi, mida nimetatakse
"Special, kosmos, ilus."
See kuulub kaks classes-- eriline ja ilus.
Jah?
Külm.
>> Ja siis kui me vaatame kell, mis juhtub, me oleme
näeme, et esimene on kollasel taustal, must tekst.
Teiseks one--
>> ALLISON Buchholtz-AU: --has julge kollasel taustal sinine tekst.
Ja meie viimane lihtsalt on sinine tekst, mida me talle pandud.
>> TOMAS Reimers: Lahedad?
Kuidas valijad toimib?
Awesome.
>> ALLISON Buchholtz-AU: Kas me tahame rääkida konflikti nüüd siis?
>> TOMAS Reimers: Nii et jah.
Absoluutselt.
Mis juhtub, kui te on vastuolus, eks?
Teeskleme esimene loob midagi like--
ALLISON Buchholtz-AU: Maybe see muudab tausta?
TOMAS Reimers: Jah.
Nii et me kavatseme teha "päris" Taustal lõhe.
ALLISON Buchholtz-AU: Sa oled lihtsalt koos kõik suured värvid täna Tomas.
TOMAS Reimers: Jah.
Kuna sain teada saan kasuta lõhe reaalse värvi.
Nii et me ainult kavatse teha.
Ma arvan ka Sunset on tõeline värvi.
Sihtrühm: Sunset on tõeline värv?
ALLISON Buchholtz-AU: Proovime seda.
TOMAS Reimers: Pärast seda demo lihtsalt sellepärast, et juhul, kui see messide up,
Ma ei taha olla silumine.
Seega me teame lõhe on tõeline värvi.
Seega igasugused oletused kohta mis juhtub?
>> ALLISON Buchholtz-AU: Iga mõte?
>> Sihtrühm: [kuuldamatu].
>> TOMAS Reimers: Jah.
Nii et sa pead seda täpselt õige.
Põhimõtteliselt, see võtab viimane reegel, et see anti.
>> ALLISON Buchholtz-AU: Nii et see on kus kuhjuvate jõustumist.
>> TOMAS Reimers: Nii mäletan, kuidas me oli, et kaskaadlaadistike?
Nii et, et me mingi tähenda et meil on hunnik reeglid
mida kohaldatakse peal üksteist, ja samuti võivad nad esmajärguline üksteisega.
>> ALLISON Buchholtz-AU: Nii olenemata tema allosas
alistab kõike, mis on top.
Sa oleks võinud reeglid, mis täielikult tühista midagi ette.
See on ka põhjus, miks sa tahad olla ettevaatlik, kui sa oled stiil,
nii et sa ei luua reeglid, sa oled lihtsalt täielikult tühistab.
>> TOMAS Reimers: Või äkki ei taha kirjutada reeglid.
>> ALLISON Buchholtz-AU: Või äkki sa teed.
Jah.
>> TOMAS Reimers: Teeskle teil on klassi, mis kehtib enamiku asju,
aga oletame, et soovite muuta taustavärvi punane ja font
kaalu julge enamiku asju, kuid üks,
tahad ainult taustavärvi olema punane aga soovite kõik muud
omadused, mida võiks teha midagi nagu "font-weight = normaalne,"
mida siis undo, et julge muutusi.
Jah?
Jällegi on parim viis, ma arvan Allison ütles, et see on lihtsalt harjutada.
>> ALLISON Buchholtz-AU: katsetamist.
>> TOMAS Reimers: Praktika, praktika Praktikas ja katsetada.
Ma tean palju inimesi, kes arvavad, CSS on lihtsalt palju vist-ja-kontrolli
lõpus päeval, kui siis, kui mida sa teha tahad midagi-- nagu,
teil on töötlemata idee, kuid sa ikka ilmselt vaja
seda proovida, et veenduda sa tead, kuidas see välja näeb.
>> Sihtrühm: Kui sa oled kohaldades klassidesse, rohkem kui üks
Samast punktist või sektsiooni, kas see
Ükskõik mis selleks saab kirjuta need jutumärgid?
>> TOMAS Reimers: Ei, üldse mitte.
>> ALLISON Buchholtz-AU: Oluline on Et teie CSS stiili lehed.
Sihtrühm: Kas sa küsimust korrata?
TOMAS Reimers: Oh.
ALLISON Buchholtz-AU: Jooksul klassi, kui sa oled andes klasside
et midagi HTML, ei see oluline, mis järjekorras nad on?
Ei ole oluline, et.
Oluline on järjekorras klassi valijad teie CSS,
jooksul oma stiili lehel.
>> TOMAS Reimers: Sound hea?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS Reimers: Ja siis me ei kavatse jätkata mina--
ALLISON Buchholtz-AU: Mis meil edasi?
Ma unustan.
Oh, meil on lihtsalt näited.
Aga me oleme omamoodi teha neid.
Oleme teinud näiteid sõita.
>> TOMAS Reimers: Saame ühendada valijad kiiresti.
>> ALLISON Buchholtz-AU: Oh, saame ühendada valijad.
TOMAS Reimers: Nii mõned näited on meil
# Dog-- nael või hashtag, või octothorpe, või mis iganes
soovite helistada selle-- terav.
>> ALLISON Buchholtz-AU: Sharp koer.
>> TOMAS Reimers: Siis on .pets.
Midagi id koer, seal on ainult üks koer lehel.
Midagi id kass, seal on ainult üks kass.
See võib olla mitmeid lemmikloomad lehel.
Sellepärast me andsime selle klassi.
Sul on näide sellest, lk.
Ja seejärel nii üks Viimane näide, mis
on midagi, mida me ei rääkinud, on see, mis juhtub, kui sa neid kombineerida.
Nii p.pets.
>> Nii et lähme tagasi kood ja tutvustada another-- yeah.
Nii siia tagasi.
>> ALLISON Buchholtz-AU: I tunne, nagu see on really--
nagu lihtsalt otsides näiteid on tõesti võimalus õppida seda.
Nii et see, mida me teeme.
>> TOMAS Reimers: Nii saab teeselda, me tahan ainult, et valida teksti 2, eks?
Nii et me ei saa kindlasti teha, et id.
Noh, me võiksime teha, et id, kuid see ei pea id.
Ma võiksin lisada, kuid olgem teeselda et ma ei taha lisada
või see on juba midagi muud.
Ma ei saa seda teha, et.
Tag ei ​​ole kindlasti ainulaadne, eks?
Ja samuti ei ole klassis.
Aga sa võid ühendada need asjad.
Oletame, et me tahtsime teha midagi mis puudutab ainult asju, mis
on klassi eriline ja mis on klassi ilus.
>> Nii, mida saate teha on main.css, sa ei saa öelda, lähme esimese kustutada.
Võite ühendada need.
Nii saad teha Spetsiaalne.
No ruumi.
Just .special.pretty.
Mida see tähendab midagi mis on nii eriline ja ilus.
Kas on mõtet?
Ja kui me läheme siia, mida sa lähed, et näha
on see reegel kehtib ainult teine, mis on need mõlemad.
Ja seda saab teha, et palju asju.
Võite say-- olgem teeselda Tahtsin ainult
teha asju, mis on klassi päris ja mis on ka lõik tag.
Nii p.pretty.
Teeme näo, et ma pidin midagi päris sildi keha.
OK?
Ma saan käivitada see ja ma näeme, et see on ainult
läheb kohaldata asju, mis on lõigud klassi ilus.
Ja saate ühendada need, Ühesõnaga, nii palju kui tahad.
Nii saate lihtsalt panna neid koos.
Kas on mõtet?
ALLISON Buchholtz-AU: Nii selline on kasulikum
kui Tomas ütles varem, võib-olla sul on väga keeruline veebilehel,
ja sul on juba palju Nende eeskirjade kirjutatud,
ja sa lihtsalt vaja ühendada kaks varem.
Nagu asemel kirjalikult kogu uus valijat ja muutes seda seal,
võite lihtsalt ühendada neid, kus see kattub.
>> TOMAS Reimers: Või siis Võib juhtuda, out-- mõnikord
seal on üks klass, mis muudab fonti värvi nagu sinine,
ja seal on teine ​​klass, mis teeb taust sinine.
Ja see lihtsalt ei toimi.
Nii et sa kirjutada erijuhtum, kus like-- aga kui see on nii, siis mis sa oled
lähen tegema, on sa lähed teha see üks selle sinise toon
ja see üks selle teise sinise toon.
Õigus?
>> ALLISON Buchholtz-AU: Hea neile erinevaid erandeid.
TOMAS Reimers: Nii et mõtle probleeme
mis võivad tekkida, kui te neid omavahel kombineerida.
Külm.
Nii tagasi meie esitlus.
ALLISON Buchholtz-AU: Me oleme peaaegu kohal.
TOMAS Reimers: Ja peatunud ühendamist.
ALLISON Buchholtz-AU: Oh, ei.
ALLISON Buchholtz-AU: CS juures office, internet loojub.
Oh, iroonia.
>> TOMAS Reimers: Nii Õnneks võime esitada ilma internet, ma arvan,
sest meil on kõik slaidid siin.
Nii räägime suhe sildid.
ALLISON Buchholtz-AU: Right.
Nii lihtsalt selline läheb off, mida Tomas ütles,
see on lihtsalt üks viis seda teha.
Nii et meil on mõned vanema valijat lapsega valijat.
Nii et selles näites siin, meil on mõned kere klassi navriba, klass nuppu.
Ah.
>> TOMAS Reimers: Oh, vabandust.
>> ALLISON Buchholtz-AU: Ja Põhimõtteliselt, mida see tähendab
on valida kõik lapsed, nagu kõik need mitmesugused lülitid,
selles vanema valijat.
Ja need on ainsad see on kunagi kehti.
Ma ei tea, kui te on parem of--
TOMAS Reimers: Ma arvan võimalus mõelda
sellest on meeles pidada, enne kui me omamoodi nagu neid koos.
Ja siis see tähendab, et üks element mis sobib kõigi nende.
Mida see ütleb on, ma tahan, et sa vasta kõik
jooksul some-- ma tahan Teil leida valijat.
Ja siis selles, ma tahan teil mängu uusi asju.
Õigus?
Nii CSS, see kõik on umbes omamoodi on võimalik sobitada neid punkte.
Ja te võite proovida sobitada objektide muud teemad.
>> Nii saab tegelikult teha näiteks ja me arvame, et tulen selgitada.
Nii saab teeselda, meil on eriline, erilist päris, mida iganes.
Ja siis on meil link, OK?
Seega pidage meeles, on seos.
Ta ei kavatse kuhugi minna.
Ja me ei kavatse anda talle klassi link, ma arvan.
Anname ta class-- mulle idee.
ALLISON Buchholtz-AU: Cool.
TOMAS Reimers: COO- olgem mine selle klassi ilus.
Miks mitte?
>> ALLISON Buchholtz-AU: OK.
TOMAS Reimers: Nii kohe päris asju
ei kavatse teha tausta sinine, tausta värvi lõhe.
See on mõtet.
Ja kui me teeme see--
>> ALLISON Buchholtz-AU: Kas soovite teksti lisada
nii hüperlingi tegelikult näitab üles?
TOMAS Reimers: See Oleks hea kõne.
ALLISON Buchholtz-AU: "Põhjus õigus Nüüd me lihtsalt saame midagi.
TOMAS Reimers: Nii et see on link.
"See on link".
Oh, ja see läheb olla üks lüli.
Anname see klass "cool."
Sul on õigus.
Külm.
Nii praegu me ei kavatse rüütama see.
Me läheme viska üks.
Meil on üks erisildi, ja me ka
ei kavatse on üks päris tag.
Ja just nüüd, mida me ei kavatse tegema, on me kavatseme teha cool--
Mida me tahame seda teha?
ALLISON Buchholtz-AU: Kas me teeme seda suurem?
TOMAS Reimers: Anname see piir.
ALLISON Buchholtz-AU: Võiksime piiri.
TOMAS Reimers: Jah.
Nii et me teeme midagi nagu, piirivalve on-- ja me oleme
läheb selgitada seda kõike teise.
Sest now--
>> ALLISON Buchholtz-AU: kasti mudel.
TOMAS Reimers: Aga nüüd, me oleme lihtsalt annan selle piiri.
Nii et mida see tähendab, et sa oled näeme neid linke.
Ja sa lähed, et näha, et neil on Nende, nagu, kole mustad ääred, mis
on lahe.
>> ALLISON Buchholtz-AU: Meie kodulehel on nii ilus.
>> TOMAS Reimers: Jah.
Meie veebileht on fantastiline.
Nii et need kaks on lingid ja nad ilmuvad.
Nüüd teeselda I ainult tahtsin seda teha
kui see ei olnud jooksul midagi mis oli tausta lõhe.
Seega pidage meeles, et see üks on taust lõhe
sest see on klassi ilus.
>> Aga me tahame öelda, et ainult jahutab mis klassis eriline, mitte klassis
ilus, peaks olema, et piiri.
Noh, mida saate teha, on teil võib öelda, Spetsiaalne, ruumi, .cool.
Ja mida see teeb, kui te arvate, sellest, kas see on põhimõtteliselt öelda,
OK, leida mulle kõik mis sobib erilist.
Siis nendes sildid, leida mulle kõike, mis on lahe.
ALLISON Buchholtz-AU: Nii muul viisil mis võib olla hea mõelda seda,
viia see tagasi C, on nagu idee ulatust.
Nii et kui teil on Valija, nagu need
et me oleme töötanud enne seda, kogu oma veebilehel, on kõik teie HTML
jääb oma reguleerimisala, eks?
Aga kui meil on need vanema ja lapse suhted,
see on sama kui sa kitsendades kus otsite konkreetse koha,
justkui nagu me otsitavat jooksul spetsiifilist funktsiooni asemel
Meie kogu toimikule.
Sihtrühm: Nii seda silmas pidades, oleks see on Olulised kui meil oleks changed--
ALLISON Buchholtz-AU: Selleks?
Sihtrühm: --the klassi CSS et .cool, ruumi, Iseloomulikud?
ALLISON Buchholtz-AU: Jah, sest siis
ütleksin, ulatus see kõik, mis on cool,
ja siis vaatame, mida has-- Ma mõtlen, nagu käesoleval juhul,
Ma ei usu, et see oleks muutnud.
>> TOMAS Reimers: Kui me oleksime ütles mida?
Vabandust.
>> ALLISON Buchholtz-AU: Kui me ulatus see jahtuda ja seejärel
otsida asju välja eriline, oleks sama, tegelikult.
>> TOMAS Reimers: Nii ei oleks.
>> ALLISON Buchholtz-AU: See ei oleks?
Oh, oh well.
Olen eksinud.
>> TOMAS Reimers: Nii põhjus see on erinevalt-- ühise mistake--
on see, et just nüüd ainult link on lahe, eks?
Ma arvan, et minu küsimus teile poisid on, mis sellel leheküljel on kaasnenud .cool?
On kaks sildid siin, eks?
Milline on see üks ja see üks.
Mõlemad vastavad lahe.
Miski muu ei.
Nii et kui sa ütlesid, .cool, kosmos, Spetsiaalne, mida sa lähed öelda,
jooksul neid silte, mis on eriline?
ALLISON Buchholtz-AU: Hm.
Seda it-- õigus.
Sest see on nagu lihtsalt midagi siin.
>> TOMAS Reimers: Nii valib ta midagi.
>> ALLISON Buchholtz-AU: arvestades koos erilist, me oleme nendes sildid siin.
>> TOMAS Reimers: Need ja need.
Sihtrühm: OK.
Nii et need sildid kaldkriipsuga?
>> TOMAS Reimers: Jah.
Kas on mõtet?
Kuidas see on põhimõtteliselt püüab piiratud ulatust.
ALLISON Buchholtz-AU: Jah.
Ma arvan, et see on ilmselt Lihtsaim viis mõelda.
>> TOMAS Reimers: Nii leidsime selle, ja Leidsime selle nii sobitada erilist.
Ja siis palume jooksul need kutid, mis on lahe?
Ja selle ühe, see on lahe.
Selle üks, midagi on lahe.
Nii et see on ainus märgis, mis jääb.
>> ALLISON Buchholtz-AU: arvestades cool on vaid nendes sildid seal.
TOMAS Reimers: Täpselt.
Ja mis erilist nendes?
Mitte midagi.
Nüüd, mida ma ütlen on kui ei olnud ruumi,
sa küsida, mida on lahe ja special-- või mis on ilus ja erilist, eks?
Kui te ütlete .special.pretty, mis on sama .pretty.special.
>> Sest see, mis eemaldades ruumi küsib on, kui sa ütled Spetsiaalne,
küsite, OK, millised on eriline?
Ja seejärel nende, mis need on ka ilus,
mis on sama, grammatiliselt, kui küsitud, mis on ilus,
ja siis need, mis on ka eriline?
Õigus?
See on vahe Mis jooksul, mis on.
Sihtrühm: OK.
TOMAS Reimers: Jah.
Awesome.
Nii seda silmas pidades then--
>> ALLISON Buchholtz-AU: Ma arvan, et meie viimase asi on (väljamõeldud Briti aktsent)
box mudel.
>> TOMAS Reimers: box-- [chuckles] Mulle meeldib, kuidas Allison ütleb, et.
Nii box mudel asi.
>> ALLISON Buchholtz-AU: Lihtsalt on box, ma tulen teie box mudel.
TOMAS Reimers: Nii räägime sellest.
Nii praegu oleme kulutanud palju aega rääkinud valijad.
Nüüdseks kutid on ilmselt, nagu, meistrid selectors-- sa tead,
kuidas täpselt valida sisu soovite manipuleerida ekraanile.
>> Nüüd on küsimus selles, kuidas täpselt saab manipuleerida seda?
Nii et ma arvan, et kõige elementaarsem kuidas mõelda, et
on hästi, mida täpselt on osa CSS?
Me oleme kulutanud palju aega räägi, mis on tag,
või milline on kõige elementaarsem esindatuse tag?
>> Hea võimalus mõelda see tähendab, et mis kuju on lõhe?
Mis kujuga on, nagu, lõhevärvi taustal?
>> Sihtrühm: See on ristkülik.
>> TOMAS Reimers: See on ristkülik, eks?
>> ALLISON Buchholtz-AU: Ei olnud konksuga küsimus.
[NAER]
>> TOMAS Reimers: Ei taha trikk kutid seda hilja.
Nii et meil on selle ristküliku.
Ja silt on p, eks?
Nii et see annab meile hea veendumust, et lõikes
on esindatud täisnurga vähemalt meeles brauser, mis
see on.
>> ALLISON Buchholtz-AU: Ma mõtlen, brauserid on tavaliselt ristkülikukujuline,
seega on mõistlik.
>> TOMAS Reimers: Idee on siin et kõik sildid CSS
Esindatud on nii ristküliku.
Ja iga ristküliku on neli osad vastavalt CSS, OK?
Sul on tegelik sisu.
See, kui tekst asub.
>> ALLISON Buchholtz-AU: Võib-olla oma pilt.
>> TOMAS Reimers: Jah.
Sul on polster, mis on lihtsalt mingi tühja ruumi.
Siis on piiri.
Ja siis on marginaal, mis valge ruum väljaspool seda.
Nii et ei ole mõtet kellelegi, nii et me oleme
hakka rääkima, et teine.
Nii siin, mida me teeme on me kavatseme luua mõned divs, OK?
Vabandust, kui I--
>> ALLISON Buchholtz-AU: Ma tunnen me peaks tegema armas pilt.
>> TOMAS Reimers: Me kindlasti peaks.
>> ALLISON Buchholtz-AU: Ma tunnen, et kõik
võiks kasu armas pilt, on kõik.
>> TOMAS Reimers: Kas me kõik kasu a--
>> Sihtrühm: Jah, kindlasti.
TOMAS Reimers: OK, lahe.
Nii et me peaks tegema armas pilt kusagil.
ALLISON Buchholtz-AU: Ma tunnen armas jänku võib olla kasulik just nüüd.
TOMAS Reimers: Sure.
ALLISON Buchholtz-AU: nädala lõpus.
Kas midagi adorab--
>> TOMAS Reimers: Kuidas hooaeg kassipoeg?
>> ALLISON Buchholtz-AU: Kassipoeg töötab ka.
>> TOMAS Reimers: Cool, sest seal on saidil eest.
Seda nimetatakse PlaceKitten.
ALLISON Buchholtz-AU: See on tore.
TOMAS Reimers: Jah.
ALLISON Buchholtz-AU: Lihtsalt, nagu, kohatäide pilte oma kodulehel.
TOMAS Reimers: Mm-hm.
Seal on ka PlacePuppy.
Ja seal on PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Kas tõesti?
>> TOMAS Reimers: Oh, me ei internetiühendus siin.
>> ALLISON Buchholtz-AU: [oigeid]
Traagiline.
TOMAS Reimers: Muidu Ma näitan sulle, poisid
kuidas panna pilte oma kodulehel.
Me läheme üritavad seda tööpäeva enne me peame minema.
Aga nüüd, me oleme lihtsalt hakka rääkima värvid siis.
Tahame panna pilte kittens--
>> ALLISON Buchholtz-AU: Me tegime.
>> TOMAS Reimers: --the internet maha hetkel on.
Nii et meil on kaks divs, ja me oleme annan neile kahele IDd.
Me läheme seda kutsuda "Esimese" ja "teise".
Nii id = "esimene".
Ja me ei kavatse anda neile kaks värvi.
Niisiis, kuidas me valida midagi ID-of "esimene"?
ALLISON Buchholtz-AU: Dot või hash?
Sihtrühm: Sharp.
TOMAS Reimers: Sharp, täiuslik.
Sharp, hash, olenemata we--
>> ALLISON Buchholtz-AU: Palju asju nimetada seda.
>> TOMAS Reimers: OK.
Me läheme arveldada hashtag ja see on, mida me ei kavatse minna.
OK?
>> ALLISON Buchholtz-AU: hashtag.
>> TOMAS Reimers: Nii hashtag esimene.
>> ALLISON Buchholtz-AU: Nii saate piiksuma seminar--
hashtag CSS, hashtag lahe.
TOMAS Reimers: hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, jah.
TOMAS Reimers: OK.
Nii et meil on "esimene" ja "teine".
Nii et esimene, me ei kavatse olla taustavärvi punane.
ALLISON Buchholtz-AU: Uh, jämesooles.
TOMAS Reimers: Jah.
ALLISON Buchholtz-AU: Ma tulen teie spot-kontrollija.
TOMAS Reimers: Allison ju mind.
Taust-värvi sinise--
>> TOMAS Reimers: Purple!
>> TOMAS Reimers: Purple.
ALLISON Buchholtz-AU: Jah.
Purple on mu lemmik värv, ja me ei ole seda veel.
>> TOMAS Reimers: Violet.
ALLISON Buchholtz-AU: Violet.
See toimib.
>> TOMAS Reimers: Nii et me läheb on kaks divs.
Nad tahavad olla täiesti tühi.
Me peaksime ilmselt mingit teksti.
Nii "esimene" saab olema "tere."
Ja "teine" on say--
>> ALLISON Buchholtz-AU: Goodbye.
>> Sihtrühm: - "maailma."
Tere, hüvasti.
ALLISON Buchholtz-AU: Ma nägin neid kontserdi teisel nädalal.
TOMAS Reimers: The Beatles?
ALLISON Buchholtz-AU: For reaalarvud.
Nad ei ole nii suur.
Mulle ei meeldi see.
>> TOMAS Reimers: Meil ​​on "Tere" ja "hüvasti."
Ja veel, CSS on lihtsalt fantastiline, kuna see kajastab meie värve.
Sa ei pea isegi muretsema, et nad on olemas.
Nad teevad.
>> ALLISON Buchholtz-AU: need on olemas.
>> TOMAS Reimers: Nii CSS Ma arvan, et on 255 sõna rääkida värvi.
Kui sa ei mõtle värvi väljaspool neid 255, nagu ma oleks üllatunud.
ALLISON Buchholtz-AU: Jah.
Ma arvan, et te poisid võivad olla lihtsalt tulevad peale.
>> TOMAS Reimers: Nii et siin, näete meil on kaks kasti
otse üksteise peale, eks?
Tere ja hüvasti.
>> ALLISON Buchholtz-AU: Ei ole ruumi vahel.
Nad lihtsalt smooshed otse üksteise peale.
>> TOMAS Reimers: Nii et esimene asi Ma arvan, et me peaksime rääkima
on olgem ka say-- yeah.
Nii CSS esindab neid omamoodi kastid.
Ja nagu karbid, neil on sisu.
Ja sisu just nüüd on omamoodi HELLO või GOODBYE ja ongi kõik.
OK?
>> Nii et üks esimesi asju, mida saab teha, on teil võimalik lisada padding.
Täidis ütleb, kui palju ruumi see peaks jääma kummalgi küljel.
Ütleme, et ma tahan öelda 10 pikslit kummalgi küljel.
Ja ma lahkama, et teises.
ALLISON Buchholtz-AU: Kõik need asjad siin
hakkavad olema enamasti pikslit ülejäänud seminar.
Sa lähed, et näha, et see on ruumi ümber, eks?
Nii et mida sa ei näe siin seal see nähtamatu omamoodi polster
mõlemal küljel, mis ütleb, nagu, OK, kui olete oma kasti content--
>> ALLISON Buchholtz-AU: Kas soovid lihtsalt tõmba kontrollida element?
>> TOMAS Reimers: Jah, see on hea mõte.
ALLISON Buchholtz-AU: Ka leian et kontrollida element on hea võimalus
aru saada, kui midagi on kavatse vale, midagi ootamatut juhtub,
kontrollimise sildid ja nähes, mida see on nagu kirjutatakse, on kasulik.
>> TOMAS Reimers: Nii ma ei ole kindel kui kutid saavad näha seda värvi.
Kas sa?
Näete polster on omamoodi serv.
Ja siis näete tegelikku Sisu sinine, eks?
Nii et väga põhitõdesid box mudel.
Sul on sisu.
Siis on polster.
>> Sihtrühm: Miks sa lihtsalt ei kasutada kasti sees the--
>> ALLISON Buchholtz-AU: Right.
Sest see on lihtsalt valides element kohe.
>> TOMAS Reimers: Jah.
Muud asjad.
Nii räägime, et polster käsu teine.
Nii CSS mõõtmised olema üksus.
Nii et kõigepealt pead summa.
Nii et kui oleme öelnud 10.
Ja siis järgmise me oleme öelnud, on pikslid, px.
Muu need, mida sa võib-olla on asjad sentimeetrit, tolli.
Seda saab teha asju, mis on 10 tolli?
Ja see saab olema naeruväärne.
>> ALLISON Buchholtz-AU: Oh, poiss.
>> Sihtrühm: Vau.
>> Tomas ALLISON: Jah.
TOMAS Reimers: Nii et kõik polster.
Ma lähen tagasi pikslit.
>> ALLISON Buchholtz-AU: pikslid kipuvad olema, nagu, standard.
Kui te vaatate palju veebisaite, nad enamasti töötavad pikslit.
TOMAS Reimers: Nii et sa lähed, et näha kas pixels-- teisi ones näed
on em, mis on üks em on võrdne kõrgus font
mis sa praegu kasutad.
>> ALLISON Buchholtz-AU: Mm.
TOMAS Reimers: See on hea võimalus öelda, nagu ma tahan nii palju ruumi kui minu font
võtab.
ALLISON Buchholtz-AU: Ei tea seda.
Sa õppida midagi uut iga päev.
TOMAS Reimers: On palju mõõtmisi CS.
Ma soovitan teil vaadata neid.
Kõigi oma juhtudel, ma arvan pikslit peaks olema piisav.
Ja nad on ka see, mida sa lähed, et näha
enamikel näited teha võrgus.
Nii me jätta seda pikslit.
>> Võite ka, ma peaks say-- nii polster komplekti kõik pehmendused.
Võite teha ka midagi sellist "Padding-top" lihtsalt set--
ALLISON Buchholtz-AU: Maybe me jõuame meie "HELLO" tagasi.
TOMAS Reimers: --to loojus polster peal ja ei midagi muud.
Nii neli käsud on padding-top, padding-bottom, padding-vasakule,
ja polster-paremale.
>> ALLISON Buchholtz-AU: Just nagu sa eeldaks kasti.
>> TOMAS Reimers: Jah.
Midagi liiga hull seal.
Kas on mõtet?
Nii et on polster.
Ma lähen seada kõik pehmendused tagasi 10.
Ja siis ma lähen edasi liikuda piiri.
>> Mis piiri on border on imelik käsk.
See võtab omamoodi kolme asja korraga.
Nii et esimene on, kui suur sa tahan olla nagu mõõtmine.
Jällegi, ma kasutan ainult pikslit.
Ja viimane asi, mida ma peaks lisama mõõtmised
on üks asi, mis ei vaja seade on 0.
See on tegelikult vale anda 0 üksus,
sest 0 on 0 üle tolli, pikslit, sentimeetrit, mis iganes.
See kõik tähendab lihtsalt 0, eks?
Nii et kõigepealt annad talle mõõtmine.
>> Siis annad stiilis.
Nii et ma ütlen "solid".
Ja me räägime, mida see tähendab.
Ja siis lõpuks annad talle värvi.
Nii et ma ütlen "must".
Ja need on kõik asjad, mida me oleme nüüd näinud, välja arvatud stiili,
aga me räägime sellest.
Nii kutid näinud mõõtmisi, ja sa oled näinud värve.
Ja mis juhtub on me saame selle kena musta raami ümber, eks?
Kutid, kuidas me tegime seda?
>> Sihtrühm: Jah.
>> TOMAS Reimers: Cool.
Mis see on?
Nii esiteks, see on üks piksel.
See on iseenesestmõistetav, eks?
Like, see on üks pixel paks.
Või oleks üks piksel, aga ma olen suumitud, nii et see on natuke rohkem
kui see.
>> ALLISON Buchholtz-AU: Ja meil on see naeruväärne resolutsioon TV.
>> TOMAS Reimers: Jah.
Võite teha seda suurem, väiksemad, mis iganes.
Nii et siin on kaks-pixel piiri.
Näete see on kaks korda nii paks.
Järgmine asi, sa pead on värviga.
See ei ole huvitav.
Ma ei hakka rääkima sellest, tõesti.
>> ALLISON Buchholtz-AU: Aga stiil võib olla natuke huvitav.
>> TOMAS Reimers: Jah.
Nii stiilis, on vähe ones et ma näen, mida tavaliselt kasutatakse.
Esimene neist on tahke kõrval üks punktiir, ja viimane on katkendliku.
Ja siin on punktiir.
Sa näed, et nad hunnik dots, eks?
Hea võimalus omamoodi saada kena piiri läheb, kriipsud on ka päris populaarne.
>> ALLISON Buchholtz-AU: Ja siis muidugi, ma olen
kindel, et seal on palju muid stiile, et saad.
Ja meil on suur hulk lingid lõpus kutid
et selline tutvuma ja vaata veel jahe CSS.
>> TOMAS Reimers: Ja siis Viimane asi, me oleme
hakka rääkima box mudelid reaalne kiire.
Oh, ja siis piiri täpselt nagu polster
teil ka asjad border-vasakule, border-right, border-top,
border-bottom, mis võimaldab teil saada konkreetsel piiri.
Nii et siin on lihtsalt piiri vasakule määratletud.
Kas see on mõistlik?
>> ALLISON Buchholtz-AU: See on lahe kuidas rõhutada asju või lisada
read eri elemente.
TOMAS Reimers: Absoluutselt.
Nii et meie piiri.
Ja viimane marginaal.
Varu on nagu polster välja arvatud see ei within--
ALLISON Buchholtz-AU: See on ei ümber oma element
kuid tegelikult ümber kogu kast, mis me oleme näinud.
>> TOMAS Reimers: Jah.
Allison ütles ta suurepäraselt.
See ei ole nagu, sees element, see on ümber kogu kasti.
See tähendab, et asjad taust ei kehti see.
Ja see põhimõtteliselt ütleb, nagu, ma ei taha midagi
Selles palju ruumi minu jaoks.
Nii nagu meil on siin varu 10 pikslit.
Nii midagi 10 pikslit peaks olema minu kõrval.
See on omamoodi oma ruumi, kuid sellist ei ole.
Nii et väga põhitõdesid box mudel.
Kas on mõtet?
Cool, lahe.
ALLISON Buchholtz-AU: Awesome.
Nüüd ma arvan, et me lihtsalt on meie cool vahendid
et me võtame teiega läbi väga kiiresti.
Ja me actually-- hästi, Kas meil on internet veel?
>> TOMAS Reimers: Olgem kas ma saan avada up--
Lubage mul näha, kas ma saan internet kiiresti
samas Allison räägib midagi Allison tahab rääkida.
ALLISON Buchholtz-AU: Nii basically-- ma ei
tea, mida muud ma ei saa öelda sel hetkel.
Aga need on vaid mõned tõesti head vahendid.
Need on need, mis Tomas ja olen kasutanud
ja et me tegelikult kasutatud prep seda.
W3Schools on üks, mida poisid oleks näinud.
Soovitame seda palju asju CSS.
Ma tean, et ma soovitan seda minu sektsioonis kogu aeg.
>> Üks suuri asju on see, et võimaldab teil mingi jama CSS
ja näha muutusi silmapilkselt selles,
nagu topeltklõps akna vaadata, et tal on.
Nii et sa ei pea muretsema luua oma veebilehe,
või luua vhost oma kohaliku seadme ja kohaliku peremehe
ja saavad kõik see kraam töö.
See on integreeritud õige lehekülje sees.
>> Ja see on neid vähe õppetunde, mida saab
läbida õppida rohkem valijad,
või õppida manipuleerides oma font või tausta või pildi.
Ja sa pead neid hetkeline tulemusi, mida
ei pea tegema muud muud prep töö.
Ma armastan W3Schools.
See on vapustav.
Kas see töötab?
>> TOMAS Reimers: Jah.
Ei, see ei ole.
Kas sa tahad, et ma püüan ja taaskäivitage arvuti?
Või kas me tahame mina--
>> ALLISON Buchholtz-AU: Ma mõtlen, Noh, see on ka internetis.
Kõik slaidid on võrgus.
Nii et ma lihtsalt soovitan teeme need.
>> See on suurepärane, kui lihtsalt nagu petma lehte.
See on lihtsalt kõik põhilised käsud, et teil on.
On tore, kui sa oled esimene alustavad oma kodulehel.
Sest võib-olla te ei taha sattuda kõik
tõeline Asja tuum disain rasked asjad.
Sa lihtsalt vaja vormindada viisil sellist mõtet ja tahet
teha praegu.
Ja kui sa tõesti tahad sattuda, siis ma tean
see on, nagu üks Tomas lemmik viited.
Olime kasutades seda prep, ja see on vapustav.
See Arendaja Mozilla.
>> TOMAS Reimers: Nii Mozilla on inimesed, kes teevad Firefox.
Ja see on lihtsalt oma arendaja viide, mis minu arvates on fantastiline.
Ja see on imeline allikate loetelu.
Nii et me have--
>> ALLISON Buchholtz-AU: Ja siis viimane noot on
kui sa üritad disaini oma veebilehel,
inspiratsiooni ammutama asju mis on teie arvates ilus.
Ülevaatus element, kontrollimise lähtekoodi
võib olla super abivalmis proovida välja nuputada
kuidas stiilis oma kodulehel.
>> Tihti ma tunnen kõige paremini Muide, lisaks eksperimenteerimist
lihtsalt vaadata asju, mis on ilus.
Ma leian, et see on tõesti raske lihtsalt omamoodi kujundada asju ise,
eriti alguses.
Nii et palun vaadata veebilehed et sulle meeldib vaadata.
Joonis välja, mida teeb neid Sulle huvipakkuv.
Ja siis julgelt proovida ja korrata seda.
>> TOMAS Reimers: Right.
Isegi nagu veebilehed niimoodi, näete
seal on kindlasti div ülaosas.
Ja siis on veel üks div jooksul siin, mis on CSS Awesomeness.
Ja siis on hunnik linke siin.
Kui sa tõesti lihtsalt kontrollida elemente, saate sortida kohta
alustada näha, mida teha veebilehed nägema ja kuidas ma saan
uuesti, et kui ma tahtsin.
Kas on mõtet?
Nii on meil vaid kolm minutit aega.
Nii on küsimusi?
Kõiki neid?
Jah.
>> Sihtrühm: For värvi ristkülik, kuidas te
have-- kui sa ei taha seda läheb kogu lehekülje, võib
Te olete teinud minna üle ainult pool lehte või teksti?
>> TOMAS Reimers: Jah, absoluutselt.
Nii et lubage mul näha tegelikult.
Mul on kaks ideed.
Nii kõigepealt, siis saab kasutada ka protsentides.
>> Sihtrühm: Kas tõesti?
>> ALLISON Buchholtz-AU: Nii midagi otsida on suhteline positsioneerimine.
See on midagi, mida me ei ole aega sattuda,
aga see on midagi, mida ma kindlasti Soovitame poisid end välja.
>> TOMAS Reimers: Nii protsentides.
Ja kuidas me tegime seda vaid 50% laiusest?
ALLISON Buchholtz-AU: Kui te tegelikult teavad pikslite arvu,
võite olla täpsem, et viis.
Võite viiul ringi ta.
Kuid 50%.
Kui olime suurust meie brauseris See muudaks väiksem.
>> TOMAS Reimers: Noh, see on põhimõtteliselt 50% praegu, ma arvan.
See on 50% ja seejärel marginaal on lisatud, et.
CSS on palju quirks.
Nii praegu on see 50% lehe laius.
Kuid pidage meeles, et sa pead 10 pikslit maha võetud igast küljest.
Nii et kui sa olid liikuda, et vastu vasakust servast brauseris
siis näeks 50%.
Jällegi, nagu ma ütlesin, CSS saab olla palju vist-ja-kontrolli.
Like, sa arvad midagi on läheb käituda ühel viisil,
kuid see käitub täiesti teistmoodi.
>> ALLISON Buchholtz-AU: Ja sa saad targemaks,
ja sa saad paremini intuitsiooni see nagu te liikuda mööda.
>> TOMAS Reimers: Ja saab halvemaks.
Nii et see on tõesti ainult välimuse.
>> ALLISON Buchholtz-AU: See on super julgustav.
Me tahame, et nad tahaksid CSS.
>> TOMAS Reimers: CSS on fantastiline.
Pea seda meeles.
Muud küsimused?
>> ALLISON Buchholtz-AU: üks asi.
Veel midagi?
Külm.
>> TOMAS Reimers: Awesome.
>> ALLISON Buchholtz-AU: Noh, kui sa poisid on küsimusi hiljem
me oleme alati saadaval iga tavaline.
Sa ilmselt näha mõnda USA lõplikuks projektid
ja kindlasti on hackathon.
>> TOMAS Reimers: Absoluutselt.
Ja messil.
>> ALLISON Buchholtz-AU: Ja messil.
Oh.
>> TOMAS Reimers: Ootan näidata kogu oma awesome--
>> ALLISON Buchholtz-AU: Me näeme kõik oma awesome veebilehed
mis on ilus.
TOMAS Reimers: Te võite alati vaata, nagu, veebilehed
kes oli, nagu, hea CSS ja seejärel nagu need, kes ei ürita CSS.
ALLISON Buchholtz-AU: Ka teine asi, üks asi veel uurida
on Bootstrapping.
Nii Bootstrap on suur.
>> TOMAS Reimers: Google, et kui sina--
>> ALLISON Buchholtz-AU: Google seda.
See on vapustav.
Sa armastad seda.
Ja nüüd, et teil on põhiteadmised CSS,
see saab teha palju rohkem mõtet.
Awesome.
Aitäh, poisid.
>> TOMAS Reimers: Tänan sind nii palju.