>> [CHWARAE CERDDORIAETH]
ALLISON BUCHHOLTZ-PA: Felly rydym yn jyst yn mynd yn y bôn
i roi dirywio i chi o CSS, oherwydd gwyddom
nad oedd yn cynnwys yn yr holl adrannau.
Ac rydym yn wir eisiau gwneud yn siŵr eich bod yn guys yn cael yr offeryn hwn ar gael i chi,
oherwydd ei fod wedi y gallu i wneud eich gwefannau edrych yn llawer prettier.
>> Ac os ydych yn adeiladu gwefan, yna mae'n debyg y byddwch eisiau ei wneud yn 'n bert.
Yr wyf yn golygu, nid oes rhaid i chi, ond byddwn yn awgrymu ei fod. [Chwerthin]
Os ydych am i ddefnyddwyr ei ddefnyddio, byddwch efallai am ei gwneud yn ychydig yn [Anghlywadwy].
Felly, rydym yn mynd i geisio rhoi i chi yn unig rhai offer a dealltwriaeth sylfaenol,
felly pan fyddwch yn mynd allan ac rydych yn ymchwilio pethau am CSS,
nid yw'n cwblhau gibberish, fel CSS weithiau fod.
>> TOMAS REIMERS: Yeah.
Dywedodd Allison ei fod yn eithaf da.
Felly, yr wyf yn dyfalu y peth cyntaf i ni Dylai ddechrau gyda beth yw CSS?
Felly CSS yn awesome.
CSS--
>> ALLISON BUCHHOLTZ-PA: Dyna enw ein seminar.
>> TOMAS REIMERS: Yeah.
Mae'n bwysig iawn bod eich bod yn deall bod erbyn hynny.
Os ydych ond yn cymryd i ffwrdd un beth, mae'n yr CSS os awesome.
Mae dau yn CSS yn sefyll am Rhaeadru Taflenni Arddull.
Felly, wrth ei wraidd, CSS yw dalen arddull, sy'n golygu
mae'n eich galluogi i arddull tudalen ar y we.
Ac yna beth mae hynny'n ei olygu, ei fod yn ffordd i ychwanegu at eich arddull gwefannau.
Felly gan arddull, rydym yn golygu popeth nid yw hynny'n structural--
felly pethau fel lliwiau, cefndir delweddau, borderi, fel, padin,
ymylon.
Byddwn yn siarad am yr hyn i gyd mae hynny'n golygu mewn ychydig.
>> Felly, rydym wedi mynd yn ei flaen yn unig a Agorwyd y ddau o'r rheiny i fyny yn gedit.
Felly mae hyn yn index.html.
Ac mae hyn yn main.css.
Felly main.css wedi unrhyw beth.
ALLISON BUCHHOLTZ-PA: Dim arddull hyd yn hyn.
TOMAS REIMERS: Dim.
Ac fel y gwelwch, mae'n safle 'n sylweddol hyll.
ALLISON BUCHHOLTZ-PA: Dim ond plaen.
TOMAS REIMERS: Yeah.
Yeah, nid yw'n hyll, 'i' jyst finimalaidd.
Ac yna dyma ni wedi index.html.
Ac felly am cyflym ailadrodd o HTML, Allison,
rydych am i ddim ond siarad am y dudalen?
>> ALLISON BUCHHOLTZ-PA: Yeah.
Felly yn amlwg, yr ydym wedi ein HTML tag, a dim ond enwau ffeiliau HTML.
Rydym wedi ein header yma, gyda CSS Awesomeness, ac-- os byddwch yn mynd yn ôl.
Ble yw hynny?
>> TOMAS REIMERS: Oh.
Yeah, gallwch weld.
ALLISON BUCHHOLTZ-PA: Ac yn sylwi ar y pennawd
yw hyn header tab dde i fyny yma.
Ac yna "Helo, byd!" yn y testun sydd gennym yn unig
arddangos ar y we dudalen, sy'n yw-- mynd yn ôl.
Back.
Sydd ychydig yn ein corff Yma-- testun plaen.
Hefyd, mae un peth i sylwi, os edrychwch yma,
Tomas troi i fyny rhain dau o'n sleid.
Felly, cyn belled â bod gennych yr holl tri o'r rhain, rydych yn iawn.
Gallant fod ym mha bynnag drefn y maent am.
Beth sy'n bwysicaf yn unig yw hynny mae gennych bob un o'r rhai tri pheth.
>> TOMAS REIMERS: Cool.
Ychwanegu math doc?
ALLISON BUCHHOLTZ-PA: Yeah.
TOMAS REIMERS: Yeah.
Cool.
ALLISON BUCHHOLTZ-PA: Mae'n debyg, Nid yw fy mics yn hoffi i mi.
TOMAS REIMERS: O, yn rhoi sec i ni yn unig tra Allison switshis allan ei meic.
Felly yeah.
Felly, rydym wedi ein prif dudalen.
Mae'n fath o unstyled.
Nid oes gennym lawer.
Rydym yn unig wedi bôn testun.
Mae gennym y dalen arddull.
Mae gennym y teitl.
Felly, dim ond noeth-esgyrn cydrannau yn gwneud gwefan.
>> Felly oddi yno, gadewch i ni siarad am yr hyn CSS yw
a'r hyn y mae'n edrych fel a hynny i gyd.
Felly, ar gyfer that--
ALLISON BUCHHOLTZ-PA: Yn ôl i'r sleidiau.
TOMAS REIMERS: Yn ôl at y sleidiau.
A gall Allison gymryd drosodd.
>> ALLISON BUCHHOLTZ-PA: Woo.
OK.
Felly, yn eich ffeil CSS, ydych yn mynd i gael
mae llawer o'r pethau hyn a elwir yn detholwyr.
Bydd hynny yn unig fydd y sail eich ffeil CSS.
Dim ond ei fod yn mynd i fod llawer a llawer o'r rhain.
Felly dewisydd.
Mae hyn yn unig y anatomeg cyffredinol.
Rydym yn mynd i fynd drwy enghreifftiau, oherwydd os nad ydych guys
gwylio fy adran, yr wyf yn teimlo fel bethau yn y haniaethol
peidiwch wir yn gwneud synnwyr.
Mae bob amser yn helpu i weld yr enghreifftiau.
>> Felly, mae gennym rai dewisydd.
Mae hynny'n mynd i fod rhywfaint dynodwr i yr hyn yr ydym am i'r arddull i wneud cais i.
Ac yna gallwn gael unrhyw set o reolau a gwerthoedd.
Felly dewiswyr y gallech weld allai fod yn rhywbeth fel corff,
neu baragraff â P, neu pennawd, neu beth bynnag,
beth bynnag yr ydych am i'ch tagiau HTML i fod.
>> Felly, yn yr achos hwn, rydym wedi corff.
Ac mae gennym rai rheol, y mae hyn yn cyd-fynd
i hyn y mae eich steil yn berthnasol i.
Felly, yn yr achos hwn, rydym wedi lliw cefndir a phwysau ffont.
Felly, mae hyn yn mynd i newid y cefndir o unrhyw beth
o fewn unrhyw tag gorff o'n ffeil HTML.
Ac mae'n mynd i roi mae hwn yn werth glas golau.
>> Felly, mae'n mynd i wneud y glas golau cefndir.
Ac yna unrhyw beth o fewn corff yn mynd i gael bwysau ffont beiddgar.
Felly, 'i' jyst yn mynd i beiddgar ein holl destun.
Ac mae hyn yn unig yw un dewisydd.
Ond gallai fod gennych lawer iawn o'r rhain.
Ac wrth i ni yn mynd i ddangos yn ddiweddarach, ychydig bach mwy i sut
bod gwaith a mwy o enghreifftiau yno.
Unrhyw beth rydych am ei ychwanegu?
>> TOMAS REIMERS: Na
Allison got it.
Rydym yn jyst yn mynd i dorri i fyny yn enghraifft yma ar ein safle esiampl.
Felly, gadewch i ni mewn gwirionedd yn cymryd hyn.
Mae'n berffaith.
Felly, Im 'jyst yn mynd i gopïo a gludo yr hawl honno i mewn i'n ffeil main.css.
Ac yr wyf i'n mynd i'w achub.
Ac yna byddwn yn rhedeg.
Nodyn Felly ochr, un o'r rhan fwyaf o bethau rhwystredig
yw os nad ydych yn cadw ffeil, a yna rydych, fel, ail-lwytho'r dudalen,
ac fel, pam nad yw y newid yn digwydd?
Mae'n digwydd.
Felly dyma gwelsom ein bod yn gwneud ein Gwefan gefndir glas golau
a rhywfaint o destun bolded.
>> Dylwn hefyd grybwyll, os ydych guys gennych gwestiynau am unrhyw beth
rydym yn ei wneud, mae croeso rhad ac am ddim i roi'r gorau i ni a gofynnwch i ni.
Rydym yn gwbl barod i gae cwestiynau.
>> ALLISON BUCHHOLTZ-PA: Yn amlwg, gyda CSS, mae popeth yn adeiladu ar ei hun.
Felly, os nad yw un peth yn gwneud gwneud synnwyr yn awr, yr ydym yn
ddim eisiau bod i gors chi i lawr yn nes ymlaen.
>> TOMAS REIMERS: Felly gadewch i ni math o ddyrannu hwn.
Felly, ydych chi eisiau dechrau gyda'r detholydd yma?
>> ALLISON BUCHHOLTZ-PA: Yeah.
Fel yr oeddwn yn ei ddweud o'r blaen, y corff yn unig yw ein dewisydd yma.
Felly, os ydym yn mynd yn ôl dros at ein AH index--.
>> TOMAS REIMERS: Pa Fi jyst gau.
Rhoi ail mi.
Felly File, Agored, index.html.
ALLISON BUCHHOLTZ-PA: Cool.
Felly, os ydych yn sylwi yma, rydym yn rhaid i tagiau corff hyn, dde?
Felly, y detholydd yn unig yn cyfateb i y tagiau yr ydym yn sôn amdano.
Felly gorff i'r dde yma.
Felly, beth yr ydym yn ei ddweud yw everything-- allwn ni fynd yn ôl?
Yr wyf yn dymuno gallwn jyst fel cyffwrdd y sgrin.
Byddai'n llawer oerach.
>> Felly unrhyw beth o fewn y rhai tagiau corff, a welodd yr ydym
yn unig oedd, fel, y testun, a'r corff yn gyffredinol
yn cyfeirio at, fel, y cefndir.
Os ydych chi erioed wedi eisiau newid y cefndir,
sy'n mynd i fod mewn tag corff.
Dim ond mae gan y rheolau hyn yn berthnasol iddynt.
>> Felly, pe baem yn mynd i index.html ac-- mewn gwirionedd,
gallwn gael rhywbeth y tu allan i'r corff?
Os ydym wedi, fel, yn troedyn neu rhywbeth, ni fyddai'n berthnasol i hyn.
Ond mae unrhyw beth o fewn tagiau corff yma yn mynd
gael eu heffeithio gan y corff hwn detholydd yr ydym wedi gwneud.
Felly, os ydych yn teipio rhywbeth arall there--
>> TOMAS REIMERS: Gadewch i ni yrru y cartref.
Felly, pe bai gennym div-- felly dyna dim ond tag arall y gallwch ei gael.
Rydw i'n mynd i gau.
Neu gadewch i ni wneud hyn paragraff.
Felly p yn sefyll am paragraff.
Ac o fewn y paragraff hwnnw.
Ac yna yr wyf yn dweud, "Mae hwn yn destun."
Cool.
Ac yna yr wyf yn gwneud y rheol hon yn berthnasol i paragraff yn hytrach na'r corff.
Byddwch yn gweld sut y mae'n berthnasol yn unig i y paragraff sydd newydd ei ffurfio, ar y dde,
Nid yw'r holl beth.
A yw hynny'n gwneud synnwyr?
>> ALLISON BUCHHOLTZ-PA: Felly, mae hyn i gyd yn gorff,
ond erbyn hyn mae ein dewisydd yn unig cyfateb i'r paragraff.
Felly, rydym yn unig wedi beiddgar a glas am y paragraff hwn penodol,
gan mai dyma'r unig beth sy'n cael ei hamgáu o fewn y tag t.
>> TOMAS REIMERS: A yw hynny'n gwneud synnwyr didoli o sut mae pethau'n crynhoi pethau eraill?
ALLISON BUCHHOLTZ-PA: Hefyd, dim ond i ddweud, fel, yn un o'r ffyrdd gorau
i wir yn gyfforddus gyda CSS yw dim ond gwneud pethau fel hyn,
jyst roi cynnig arni.
Mae'n syml iawn i deipio rhywbeth allan, taro Refresh, a gweld beth sy'n digwydd.
Ac fel gyda'r rhan fwyaf CS, Gall arbrofi yn aml
yn arwain at lawer gwell dealltwriaeth reddfol.
Hyd yn oed yn fwy felly na ni yn unig, fel, yn siarad â chi.
>> TOMAS REIMERS: Yn hollol 100% yn cytuno ar y pwynt hwnnw.
Felly, os ydym yn mynd yn ôl at hyn, gadewch i ni ddechrau dyrannu yn union beth dau rhain yn ei wneud.
Felly, mae gennym ddau rheolau ar hyn.
Felly, yr un cyntaf yn lliw cefndir.
A ydych yn gweld ein bod wedi gosod ei cyfartal i werth, glas golau.
>> Felly, yn CSS, CSS yn didoli o llac iawn am sut
yn caniatáu i chi i ddiffinio lliw.
Fel y gallwch eu diffinio yn ôl enw.
Gallwch hefyd wneud rhywbeth fel "coch."
Ac yna os ydym yn mynd yn ôl at hyn, byddwch yn gweld bod y cefndir yn goch.
Gallwch hefyd gael really-- Rwy'n credu eich yn gallu cael 'n bert greadigol â hyn,
Ni allwch chi?
>> ALLISON BUCHHOLTZ-PA: I meddwl y gallwch chi ddefnyddio hecs.
Ni Allwch chi?
>> TOMAS REIMERS: Yeah.
Felly, gallwch ddefnyddio hecs.
Ond dw i'n enw-ddoeth meddwl.
A does?
ALLISON BUCHHOLTZ-PA: Gallwch chi wneud eithaf ychydig.
'N bert lawer fel y rhan fwyaf liwiau sy'n eich Gall name-- fel, yr wyf yn meddwl eog yn un.
>> TOMAS REIMERS: Rydym yn eog ceisiwch gonna.
ALLISON BUCHHOLTZ-PA: I yn meddwl chartreuse yw mewn 'na.
TOMAS REIMERS: Yeah.
Gweler?
Fel y gallwch gael 'n bert greadigol.
>> ALLISON BUCHHOLTZ-PA: Chi Gallai gael 'n bert greadigol.
Fel, os gallwch chi feddwl am y Enw lliw, mae'n fwy na thebyg mewn 'na.
Os ydych wir eisiau iawn fanylion, gallwch fynd hecs.
>> TOMAS REIMERS: Yeah.
Felly hecsadegol.
Os ydych yn guys yn cofio nôl hon gan eich hen PSET, Image Adfer,
oedd gennych guys i ddelio gyda gwerthoedd hecs hyn.
Ac yn fath o ailadrodd yr hyn i hynny yw, Mae hecs tri gwerth ei storio ynddo.
Felly mae'n mewn grwpiau o ddau hicyn.
Mae'r ddau gyntaf yn cynrychioli'r gwerth coch.
Mae'r ail un yn cynrychioli gwerth gwyrdd.
Ac mae'r un olaf yn las?
>> Felly FF fydd yn digwydd i gynrychioli yn hecsadegol 255.
Felly, mae gennych 255 o goch, 255 gwyrdd, a 0 ar gyfer glas.
Ac mae gwerthoedd yn amrywio rhwng 0 a 255.
>> GYNULLEIDFA: Iawn.
Felly y bôn, gallem chwilio rhyngrwyd ar gyfer unrhyw liw yr ydym ei eisiau,
ac adnabod y gwirionedd-hysbys lliw combo sbectrwm,
ac yna gallem ei roi i mewn?
ALLISON BUCHHOLTZ-PA: Yn union.
Felly, rydych wedi 'n bert lawer reolaeth lwyr dros y lliwiau rydych eisiau fewn CSS.
A ydym yn mynd i siarad am delweddau cefndir yn ddiweddarach?
Neu a ydym am wneud hynny?
>> TOMAS REIMERS: Yeah.
Yn hollol.
Felly yn gyntaf, dim ond i ddangos bod coch a gwyrdd yn felyn.
Ac os ydych angen rhywfaint o helpu ddod o hyd hyn, byddwch yn
Gall Google rhywbeth fel "dewisiwr lliw."
ALLISON BUCHHOLTZ-PA: O, mae mor dda.
Rwyf wrth fy modd Lliw Picker.
>> TOMAS REIMERS: colorpicker.com yn enghraifft dda.
Ac yma, byddwch yn gweld eich bod wedi craen casglu lliw Photoshop-debyg llawn.
>> ALLISON BUCHHOLTZ-UA: Mm-EM.
Hefyd, mae'r pethau oer ydych chi Gall gynhyrchu cynlluniau lliw
fel nad oes gennych, fel, gwrthdaro lliwiau.
TOMAS REIMERS: Ac yna dyma y hecs gwerth i fyny yma.
Felly, gallwch chi bob amser yn dod o hyd ar-lein yn y bôn llefydd i gael y gwerth hecs o.
Dyw hi ddim yn didoli o hynny yn union, fel, yr ydym gweld y lliwiau y byd mewn niferoedd.
Mae'n fwy ein bod yn mynd ar-lein a dod o hyd pa liw yr ydym am,
ac yna cymerwch y rhif i lawr.
Oherwydd mai dim ond hawdd iawn ffordd i gyfeirnodi pethau yn CS.
>> ALLISON BUCHHOLTZ-PA: Ac yna mae also--
Yr wyf yn anghofio yr union enw'r safle.
Ond mae bendant, yr wyf yn yn meddwl, rhywbeth o Adobe
sy'n cynhyrchu cynlluniau lliw ar eich cyfer, sydd yn 'n sylweddol oera, oherwydd eich bod
definitely-- 'i' weithiau galed i chyfrif i maes,
oh, os ydw i eisiau defnyddio lliw hwn, yr hyn a allai fod yn un ddefnyddiol arall
i'w defnyddio mewn mannau eraill ar fy safle i, fel, yn ei gwneud yn braf ac yn gydlynol.
>> TOMAS REIMERS: Allison yn siarad am un gan Adobe o'r enw Kuler, yr wyf yn meddwl.
Mae'n K-U-L-E-R.
ALLISON BUCHHOLTZ-UA: Yr wyf yn credu hynny.
Rwy'n eithaf siwr dyna'r un.
>> TOMAS REIMERS: Fy hoff ganddo bod yn Dylunydd Cynllun Lliw bob amser.
>> ALLISON BUCHHOLTZ-PA: Ooh.
>> TOMAS REIMERS: Pa yn now--
>> ALLISON BUCHHOLTZ-PA: Ah, mae hyn yn hardd.
>> TOMAS REIMERS: A ydych yn yn y bôn yn gallu ei ddweud, fel,
Rwyf am tri lliw nesaf at ei gilydd.
Ac yna gadewch i ni wneud rhywbeth neis.
Ac yna gallwch gael enghraifft o'r hyn a allai fod yn edrych fel.
Ac yna os ydych yn hofran dros unrhyw un nhw, mae'n rhoi gwerth hecs chi.
>> Felly, yn union fel ffordd dda o ddechrau meddwl am cynlluniau lliw
neu pa liwiau mewn gwefan allai fynd yn dda gyda'i gilydd.
Oherwydd y gall hynny fod yn syndod Nid yw mor hawdd i ddewis wrth i chi feddwl.
Ac yna y peth oer eraill Rwyf bob amser wedi dod o hyd am y wefan hon
yw os byddwch yn taro Enghreifftiau, mae'n chi helpu dangos beth enghraifft wefan
Gallai edrych fel defnyddio'r cynllun lliwiau.
Beth bynnag.
>> Yn ôl i'r CSS gwirioneddol.
ALLISON BUCHHOLTZ-PA: Ond yn amlwg, rydym yn gwybod y gallai cyfeiriadau hyn fod yn ddefnyddiol.
TOMAS REIMERS: Na, maent yn yn bendant fod yn ddefnyddiol.
Felly, yr ail rheol, Allison?
>> ALLISON BUCHHOLTZ-PA: Yeah.
Yr ail reol yn unig sy'n cyfateb i'n ffont.
Felly pwysau ffont yn unig fath o- felly byddai'r pwysau
fod os ydych am gyfiawn, fel, arferol neu, fel, ffontiau deneuach,
neu yn yr achos hwn, fel, beiddgar.
Yr wyf yn anghofio.
Beth yw'r os ydych eisiau iddo-- yno un deneuach na dim ond, fel, normal?
TOMAS REIMERS: Nid wyf yn ei wneud mewn gwirionedd yn gwybod os oes un deneuach.
ALLISON BUCHHOLTZ-UA: Yr wyf yn anghofio.
Pwysau Felly ffont rydym fel arfer dim ond defnyddio ar gyfer print trwm.
Os ydych chi eisiau mynd i mewn i 'n sylweddol hynny, rydym yn mynd i ddangos i chi.
W3Schools Mae gan holl wahanol pethau y gallwch eu gwneud i ffontiau.
Ond yn y bôn, os ydych chi erioed wedi eisiau i newid unrhyw beth am ffont,
mae bob amser yn mynd i fod, fel, font-rhywbeth.
Felly bydd yn cael ei debyg, font-deulu os ydych chi'n ceisio newid y math gwirioneddol.
Bydd yn font-arddull os ydych yn am ei gwneud yn fel rhedol,
neu italig, neu whatnot.
Neu hyd yn oed font-liw, os roeddem eisiau newid hynny.
>> TOMAS REIMERS: Yup.
Fel y gallwch newid hynny.
Ac yn fath o yn unig i ailadrodd yn awr, felly gallwch
gweld bod gennym y detholydd i fyny yma.
Mae gennym bresys cyrliog hyn.
Ac yna mae gennym reolau amffinio gan hanner colon.
A yw hynny'n gwneud synnwyr?
Yeah?
Cool.
Felly, os yw hynny'n good--
>> ALLISON BUCHHOLTZ-PA: Back.
TOMAS REIMERS: Gadewch i ni siarad yn benodol am yr hyn y math o ddewiswyr sydd gennym.
'Achos ar hyn o bryd rydym wedi math o ychydig ddangosir tagiau.
Ond fe allech chi guys yn ei weld gredadwy.
Dywedwch fod gennych ddau baragraff ar dudalen a'ch
am fod yn gallu i arddull un ond nid y llall,
nad ydych eisiau i gyfyngu eich hun i gael i ddefnyddio gwahanol HTML gwirioneddol
tagiau i roi arddulliau gwahanol iddynt.
>> Felly mae gennym dri sylfaenol mathau o ddetholwyr.
ALLISON BUCHHOLTZ-PA: Yeah.
Felly mae gennym tag, sef yr hyn rydym wedi bod yn siarad am ar hyn o bryd.
Felly dyna fath o fel eich corff neu t.
Ac yna mae gennym ddosbarth, sef pan fyddwn yn ei ddiffinio yn ein ffeil CSS,
mae bob amser yn mynd i gael ei dot, beth bynnag ydych am enw eich dosbarth i fod.
A gall hyn fod yn berthnasol i bethau lluosog.
>> Dywedwch fod gennych bum baragraffau a dau o'r tri ohonynt
Mae angen styled yr un fath, byddech yn gwneud cais i ddosbarth iddo.
Ac mae hyn yn dim ond y ffordd yr ydym yn ei wneud.
Byddwn yn rhoi enghraifft o chi lle mae hyn mewn gwirionedd yn dangos i fyny.
Ond os oedd gennych efallai rhywfaint o tag p, ar ôl iddo, byddech yn ysgrifennu,
dosbarth yn dychwelyd beth bynnag dosbarthiadau ydych am wneud cais iddo.
Felly, beth bynnag detholwyr dosbarth yr ydym am i wneud cais i'r paragraff hwn penodol,
gallem jyst ysgrifennu fel hyn.
Wrth gwrs, yr wyf yn meddwl yn enghraifft yn ei gwneud yn llawer mwy cadarn.
>> Yr un arall sydd gennym yw id, yr ydym yn dynodi
gyda hash, neu punt, neu hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON BUCHHOLTZ-PA: Octothorpe.
Sy'n gweithio, hefyd.
A dylai hyn yn un 'n sylweddol yn unigryw.
Dylent yn berthnasol i un peth ar eich tudalen.
Felly, a yw hynny'n paragraff penodol, neu ryw eitem mewn rhestr, neu beth bynnag,
dylai hyn fod yn unigryw.
Ac yn yr un modd yr ydym newydd yn dweud, fel, class = "class2 Dosbarth 1,"
Gall hyn yn unig fod id o beth bynnag sydd gennym.
TOMAS REIMERS: Yeah.
Felly, gadewch i ni yn bendant yn siarad am enghreifftiau yma.
Ac Im 'jyst yn mynd i ddeifio yn syth yn ôl i mewn i'r cod.
Felly, gadewch i ni edrych ar ein HTML.
Ac felly rydym ar hyn o bryd gennym un paragraff.
Mae hyn yn destun.
Im 'jyst yn mynd i addasu hynny. "Mae hyn yn destun 1."
Ac yna rydym yn mynd i cael "Mae hyn yn destun 2."
>> ALLISON BUCHHOLTZ-PA: Ail un.
TOMAS REIMERS: Yup.
Felly mae gennym bellach "Mae hyn yn destun 2," yn iawn?
Ac rydym yn mynd i weld bod os ydym yn ail-lwytho y dudalen, yr hyn yr ydym yn mynd i ddod o hyd i
yw ein bod yn gonna find--
ALLISON BUCHHOLTZ-PA: Ooh.
TOMAS REIMERS: Yeah.
Rydym yn mynd i ddod o hyd i "Mae hyn yn destun 1, "ac" Mae hwn yn destun 2. "
>> ALLISON BUCHHOLTZ-PA: A lliw melyn allan hyfryd.
>> TOMAS REIMERS: A byddwch yn gweld bod ein detholydd ar hyn o bryd,
sy'n berthnasol i p, neu'r paragraffau, yn effeithio ar ddau ohonynt,
gan fod y ddau ohonynt yn cwrdd â'r amod eu bod eu bod yn ddau dag t.
Mae hynny'n gwneud cyfanswm o synnwyr.
Felly, y cwestiwn yw, yn dda, beth os ydym eisiau dim ond cael un?
Felly, yn union fel Allison yn ei ddweud, mae gennym ddwy ffordd arall i wneud hynny.
Dwi'n mynd i ddechrau id.
>> ALLISON BUCHHOLTZ-PA: Gadewch i ni ddechrau gyda id.
>> TOMAS REIMERS: A ddau o'r rhain yn rhinweddau.
Felly priodoleddau yn bodoli mewn HTML.
A'r hyn y maent yn ei rhywbeth yr ydych yn ychwanegu
y tu mewn i'r tag sydd yn ar wahân i'r enw tag.
Felly, gallwch gael priodoleddau lluosog.
Yeah?
>> ALLISON BUCHHOLTZ-UA: Roeddwn i'n jyst yn mynd i ddweud, o'ch enghraifft o PSET 7,
os unrhyw un ohonoch yn ceisio alinio pethau i'r ganolfan,
efallai y byddwch wedi defnyddio "Testun yn alinio = ganolfan."
A ydych yn sylwi ei fod yn ôl pob tebyg Dylai fod wedi canolbwyntio
eich testun neu eich bar llywio.
Felly dyna dim ond hefyd yn nodwedd y gallech fod yn gyfarwydd â.
TOMAS REIMERS: Mae 'na griw o briodoleddau y byddwch yn gweld.
Yeah.
Fel cyfeirio'n dda at PSET 7.
Rydym wedi id.
Gallwch hefyd gael dosbarth, pethau fel hyn.
Gall tag sengl yn cael llawer o briodoleddau.
Felly gan ddechrau gyda id, gadewch i ni rydym yn esgus yn awyddus i gael id o- Nid wyf yn gwybod.
Byddwn yn ei alw'n arbennig, gan fod hyn yn un, rydym yn
mynd i wneud beiddgar, ac tanlinellu, a beth bynnag.
ALLISON BUCHHOLTZ-PA: Mae'n gonna fod yn super arbennig.
TOMAS REIMERS: Felly hon un, mae gennym id arbennig.
Felly, y ffordd i ddewis hynny, felly, yw yn main.css, yn hytrach na chael tag p,
chi ei wneud #special, OK?
A bod yn dewis y peth gyda id arbennig.
A yw hyn yn gwneud synnwyr i bawb?
GYNULLEIDFA: Yeah.
TOMAS REIMERS: Cool.
Felly nawr os ydym yn mynd yn ôl, byddwn yn see-- whoops.
Yeah.
Byddwn yn gweld ei fod dim ond yn dewis yr un gyda id arbennig.
Yeah?
Swnio'n oer.
Ydw.
>> GYNULLEIDFA: A all rhywbeth gael priodoli y ddau ddosbarth a id?
>> TOMAS REIMERS: Ie.
GYNULLEIDFA: OK.
Ac yna beth sy'n digwydd os ydych wedyn yn rhoi mae rhai rheolau yn CSS hwnnw gwrthdaro?
TOMAS REIMERS: Yn hollol.
Rydym yn mynd yn bendant i siarad am hynny.
Felly, yn union beth rydych yn ei gael ar, gallwch hefyd gael dosbarthiadau.
Felly, gadewch i esgus fy mod wedi cael tri paragraffau ac yr wyf yn
yn awyddus i arddull y cyntaf dau ond nid yw'r trydydd.
Wel, efallai y bydd eich syniad yn gyntaf fod, yn dda, yr wyf yn Gallai dim ond rhoi id yr ail un.
Ond nid ydych yn gallu, oherwydd bod id, yn union fel roedd Allison yn dweud,
rhaid iddo fod yn unigryw.
>> Felly, yn lle id, yr hyn yr ydych yn gallu defnyddio yn gallwch ddefnyddio dosbarth.
A class-- yr hyn y mae'n caniatáu i chi ei wneud yn y bôn yn dweud,
mae hyn yn perthyn fel rhan o grŵp.
Yn yr achos hwn, mae ein grŵp yn cael ei alw'n Arbennig.
A beth ydym yn mynd i wneud wedyn yw rydym yn mynd i say-- yn hytrach na bunt,
rydyn ni'n mynd i ddefnyddio dot.
OK?
Ac yn sylwi bod y bunt a'r dot ond yn bodoli o fewn y ffeil CSS,
Nid yw o fewn y HTML.
ALLISON BUCHHOLTZ-PA: Ie.
Gwahaniaeth pwysig.
>> TOMAS REIMERS: Mae gen i Roedd cymaint o frwydr,
oherwydd fy mod yn rhoi'r hash yn y HTML a yna dim ond yn teimlo'n dwp am amser hir.
Dewch i weld sut y mae'n dewis ddau y rhai sydd â'r dosbarth hwnnw?
Cool.
>> Yn awr, gall pethau gael dosbarthiadau lluosog.
Lets 'ddeud fy mod am wneud y cyntaf dau gefndir o melyn
a'r ail dau wedi lliw ffont o las.
OK.
Dwi ddim yn gwybod pam byddwn i'n am wneud hynny, ond gallaf.
>> ALLISON BUCHHOLTZ-PA: Ni allai'r ei argymell ar gyfer eich gwefan.
Ond ar gyfer ein dibenion, bydd yn ei wneud.
>> TOMAS REIMERS: Nid yw'n cynllun lliw da.
ALLISON BUCHHOLTZ-PA: Wel, melyn a glas yw fy lliwiau ysgol uwchradd.
Nid wyf yn gwybod, er.
TOMAS REIMERS: Allison yn uchel Roedd gan yr ysgol gynllun lliw gwych.
[Chwerthin]
Felly, yna yr hyn y gallwn ei alw hyn yn Gadewch i ni alw this-- felly mae gennym Arbennig
ac mae gennym Pretty.
Awgrymaf, ar gyfer hyn, byddwch yn defnyddio enwau llawer mwy disgrifiadol.
ALLISON BUCHHOLTZ-PA: Yeah, yr wyf byddai yn galw hyn, fel, melyn neu las.
>> TOMAS REIMERS: Nid ydym yn wir yn gwneud gwefan go iawn,
a dyna pam nad ydym yn gwneud hynny.
Ond os ydych mewn gwirionedd Roedd gan wefan go iawn, chi
Efallai y bydd rhaid, fel, pennawd erthygl, cynnwys erthygl, gair cyntaf,
pethau fel hynny, sy'n caniatáu i chi fod yn llawer mwy disgrifiadol.
Mae'r rhain yn wir yn union fel newidynnau.
Dylid eu henwi mewn ffordd lle gallwch, like-- ie, fel y cyfryw.
Perffaith.
>> Felly lliw cefndir.
Ac yna rydym yn mynd i say-- felly mae'r ffordd i newid lliw yn unig yw "lliw."
Ac rydym yn mynd i'w wneud yn las.
Mae hynny'n cŵl.
Felly, yn awr mae gennym y cyntaf dau wedi arbennig.
Un Nesaf yn mynd i wedi "class = 'n bert."
ALLISON BUCHHOLTZ-PA: Ac yna wnewch chi helpu am ychwanegu "eithaf" i'r un canol.
TOMAS REIMERS: Yup.
Ac yna i'r un canol, i ychwanegu "n bert," beth sy'n digwydd
yw 'ch jyst cael gofod.
Felly y priodoledd dosbarth yn rhestr wahanu gofod-
yr holl ddosbarthiadau sy'n gymwys i'r tag.
OK?
Dyw hi ddim fel hon yn perthyn i rhyw fath o ddosbarth arbennig o'r enw
"Arbennig, gofod, 'n bert."
Mae'n perthyn i ddau classes-- arbennig a 'n bert.
Ie?
Cool.
>> Ac yna os edrychwn ar yr hyn sy'n digwydd, rydym yn
mynd i weld bod un cyntaf wedi Cefndir melyn, testun du.
Ail one--
>> ALLISON BUCHHOLTZ-PA: --has beiddgar Cefndir melyn gyda thestun glas.
Ac mae ein un olaf yn unig y mae'r testun glas yr ydym yn neilltuo i iddo.
>> TOMAS REIMERS: Cool?
Sut mae dewiswyr yn gweithio?
Awesome.
>> ALLISON BUCHHOLTZ-PA: A ydym eisiau siarad am y gwrthdaro nawr te?
>> TOMAS REIMERS: Felly yeah.
Yn hollol.
Felly beth sy'n digwydd os ydych yn fod â gwrthdaro, dde?
Gadewch i esgus yr un cyntaf yn sefydlu rhywbeth like--
ALLISON BUCHHOLTZ-PA: Efallai yr un yma yn newid y cefndir?
TOMAS REIMERS: Yeah.
Felly, rydym yn mynd i wneud "eithaf" newid y cefndir i'r eog.
ALLISON BUCHHOLTZ-PA: Rydych yn unig gyda holl liwiau gwych heddiw, Tomas.
TOMAS REIMERS: Yeah.
Gan fy mod yn dod o hyd allan y gallaf defnyddio eog fel lliw go iawn.
Felly, rydym yn unig yn mynd i wneud hynny.
Rwyf hefyd yn meddwl Sunset yn liw go iawn.
GYNULLEIDFA: Sunset 'na lliw go iawn?
ALLISON BUCHHOLTZ-PA: Gadewch i ni roi cynnig arni.
TOMAS REIMERS: Ar ôl demo hwn dim ond oherwydd rhag ofn ei fod gwneud cawl,
Dydw i ddim eisiau bod yn debugging.
Felly, rydym yn gwybod eog 'na lliw go iawn.
Felly unrhyw ddyfalu ar beth sy'n mynd i ddigwydd?
>> ALLISON BUCHHOLTZ-PA: Unrhyw syniad?
>> GYNULLEIDFA: [Anghlywadwy].
>> TOMAS REIMERS: Yeah.
Felly, rydych wedi ei gael yn union gywir.
Yn y bôn, mae'n cymryd y rheol diwethaf y cafodd ei roi.
>> ALLISON BUCHHOLTZ-PA: Felly mae hyn yn ble daw rhaeadru i rym.
>> TOMAS REIMERS: Felly cofiwch sut rydym Roedd gan fod rhaeadru dalennau arddull?
Felly gan hynny, rydym yn fath o yn ei olygu bod gennym griw o reolau
sy'n berthnasol ar ben ei gilydd, a gallant hefyd ddiystyru ei gilydd.
>> ALLISON BUCHHOLTZ-PA: Felly beth bynnag yn y gwaelod
Bydd gwrthwneud beth bynnag sydd ar y brig.
Gallech gael rheolau sy'n gwbl negyddu rhywbeth ymlaen llaw.
Dyna hefyd pam eich bod eisiau bod yn ofalus pan fyddwch chi steilio,
felly nid ydych yn creu rheolau sy'n ydych ond yn gyfan gwbl gor-redol.
>> TOMAS REIMERS: Neu efallai eich bod ddim eisiau trosysgrifo rheolau.
>> ALLISON BUCHHOLTZ-PA: Neu efallai eich bod yn ei wneud.
Ydw.
>> TOMAS REIMERS: Esgus gennych ddosbarth sy'n berthnasol i'r rhan fwyaf o bethau,
ond gadewch i ni ddweud eich bod am newid y lliw cefndir i goch a'r ffont
pwysau i beiddgar gyfer y rhan fwyaf pethau, ond ar gyfer un,
dim ond am i'r lliw cefndir i fod yn goch, ond eich bod am yr holl arall
eiddo, gallech wneud rhywbeth fel "font-pwysau = normal,"
sydd wedyn byddai'n dadwneud bod newid beiddgar.
Yeah?
Unwaith eto, y ffordd orau, rwy'n credu Dywedodd Allison iddo, dim ond ymarfer.
>> ALLISON BUCHHOLTZ-PA: Arbrofi.
>> TOMAS REIMERS: Ymarfer, ymarfer, ymarfer, ac arbrofi.
Rwy'n gwybod llawer o bobl yn meddwl CSS yn unig yw llawer o ddyfalu-a-wiriad
ar ddiwedd y dydd, lle os rydych am ei wneud something-- fel,
mae gennych syniad bras, ond byddwch yn dal yn ôl pob tebyg angen
i roi cynnig arni i wneud yn siŵr eich bod yn gwybod sut mae'n edrych.
>> GYNULLEIDFA: Pan fyddwch yn gwneud cais dosbarthiadau, yn fwy nag un
at yr un paragraff neu adran, a yw'n
waeth pa drefn y gallwch teipio i mewn i'r dyfyniadau?
>> TOMAS REIMERS: Na, dim o gwbl.
>> ALLISON BUCHHOLTZ-PA: Yr hyn sy'n bwysig yw y drefn o fewn eich dalen arddull CSS.
GYNULLEIDFA: A allech chi ailadrodd y cwestiwn?
TOMAS REIMERS: Oh.
ALLISON BUCHHOLTZ-PA: O fewn dosbarth, pan fyddwch yn rhoi dosbarthiadau
i rywbeth yn y HTML, yn ei wneud ots pa drefn maen nhw i mewn?
Nid yw o bwys y gorchymyn.
Beth sy'n bwysig yw trefn y detholwyr dosbarth o fewn eich CSS,
o fewn eich dalen arddull.
>> TOMAS REIMERS: Da Sain?
>> ALLISON BUCHHOLTZ-PA: Lovely.
>> TOMAS REIMERS: Ac yna rydym yn mynd i barhau i--
ALLISON BUCHHOLTZ-PA: Beth sydd gennym ni nesaf?
Yr wyf yn anghofio.
O, rydym yn unig rhaid i enghreifftiau.
Ond rydym wedi fath o wneud hynny.
Rydym wedi gwneud enghreifftiau ar y hedfan.
>> TOMAS REIMERS: Rydym yn cael i cyfuno y detholwyr yn fuan.
>> ALLISON BUCHHOLTZ-PA: O, rydym yn cael i gyfuno detholwyr.
TOMAS REIMERS: Felly mae rhai enghreifftiau yw gennym
# Bunt dog--, neu hashtag, neu octothorpe, neu beth bynnag
yr ydych am ei alw that-- miniog.
>> ALLISON BUCHHOLTZ-PA: ci Sharp.
>> TOMAS REIMERS: Yna mae gennych .pets.
Rhywbeth Mae gan id o gi, dim ond un ci ar y dudalen.
Rhywbeth Mae gan id o cath, dim ond un gath.
Efallai y bydd llawer o anifeiliaid anwes ar y dudalen.
Dyna pam rydym yn rhoi y dosbarthiadau.
Mae gennych enghraifft o t.
Ac yna felly un o'r enghraifft olaf, a oedd yn
yn rhywbeth nad ydym wedi siarad amdano, yw'r hyn sy'n digwydd pan fyddwch yn eu cyfuno.
Felly p.pets.
>> Felly, ar gyfer hynny, gadewch i ni fynd yn ôl at y cod a chyflwyno another-- yeah.
Felly, yn ôl yma.
>> ALLISON BUCHHOLTZ-PA: I teimlo fel hyn yn really--
fel jyst yn edrych drwy enghreifftiau sydd mewn gwirionedd yn ffordd i ddysgu hyn.
Felly dyna beth rydym yn ei wneud.
>> TOMAS REIMERS: Felly gadewch i ni rydym yn esgus Dim ond eisiau i ddewis testun 2, dde?
Felly rydym nid yn bendant yn gallu gwneud hynny gydag id.
Wel, gallem wneud hynny gyda id, ond nid oes rhaid iddo yn id.
Gallwn ychwanegu un, ond gadewch i esgus nad oeddwn am ychwanegu un
neu mae ganddo rywbeth arall yn barod.
Ni allaf wneud hynny gyda hynny.
Nid yw'r tag yn bendant yn unigryw, dde?
Ac nid yw y dosbarth.
Ond gallwch gyfuno pethau hyn.
Lets 'ddeud ein bod am wneud rhywbeth sydd ond yn berthnasol i bethau sy'n
yn cael y arbennig dosbarth ac sydd â'r dosbarth 'n bert.
>> Felly, beth y gallwch ei wneud yw mewn main.css, gallwch ddweud, gadewch i gyntaf i ddileu hyn.
Gallwch gyfuno hyn.
Felly, gallwch chi ei wneud .special.
Dim gofod.
Dim ond .special.pretty.
Beth mae hynny'n ei olygu yn rhywbeth sydd yn arbennig a 'n bert.
A yw hynny'n gwneud synnwyr?
Ac os ydym yn mynd yma, beth ydych yn mynd i weld
yw'r rheol hon yn berthnasol yn unig i'r ail un, sydd wedi ddau o'r rheiny.
A allwch chi wneud hynny am lawer o bethau.
Gallwch say-- gadewch i ni esgus fy mod yn unig eisiau
i wneud pethau sy'n cael y dosbarth 'n bert ac sydd hefyd yn tag paragraff.
Felly p.pretty.
Gadewch i esgus fy mod wedi cael rhywbeth 'n bert ar y corff tag.
OK?
Gallaf redeg hyn ac yr wyf yn gallu gweld ei fod yn unig
mynd i wneud cais i bethau sydd yn paragraffau gyda'r dosbarth 'n bert.
A gallwch gyfuno hyn, yn y bôn, gan fod llawer ag y dymunwch.
Felly, gallwch eu rhoi at ei gilydd.
A yw hynny'n gwneud synnwyr?
ALLISON BUCHHOLTZ-PA: Felly Mae'r math hwn o fwy defnyddiol
pryd, Tomas ei ddweud yn gynharach, efallai oes gennych wefan cymhleth iawn,
ac yr ydych eisoes gennych lawer rheolau hyn ysgrifenedig,
ac ch jyst angen i ni cyfuno dau o o'r blaen.
Fel yn lle ysgrifennu cyfan dewisydd newydd a newidiol yno,
gallwch gyfuno yn eu lle mae'n gorgyffwrdd.
>> TOMAS REIMERS: Neu chi Gallai ddod o hyd out-- weithiau
mae un dosbarth sy'n yn gwneud lliw ffont yn hoffi glas,
ac mae dosbarth arall sydd yn gwneud y glas cefndir.
Ac na fydd yn unig yn gweithio.
Felly, byddwch yn ysgrifennu achos arbennig, ble, like-- ond os oes ganddo ddau, yr hyn yr ydych chi'n
mynd i'w wneud yw eich bod yn mynd i yn gwneud hyn yn un cysgod yma o las
ac mae hyn yn un yma cysgod arall o las.
Iawn?
>> ALLISON BUCHHOLTZ-PA: Da ar gyfer y mathau hynny o eithriadau.
TOMAS REIMERS: Felly, er mwyn meddwl am broblemau
a allai godi pan fyddwch yn eu cyfuno.
Cool.
Felly, yn ôl at ein cyflwyniad.
ALLISON BUCHHOLTZ-PA: Rydym yn bron yno.
TOMAS REIMERS: Ac mae'n wedi rhoi'r gorau i gysylltu.
ALLISON BUCHHOLTZ-PA: O, na.
ALLISON BUCHHOLTZ-PA: CS yn y swyddfa, y rhyngrwyd yn mynd i lawr.
O, yr eironi.
>> TOMAS REIMERS: Felly yn ffodus, gallwn cyflwyno heb y rhyngrwyd, mae'n debyg,
gan fod gennym yr holl sleidiau yma.
Felly, gadewch i ni siarad am y perthynas o dagiau.
ALLISON BUCHHOLTZ-PA: Iawn.
Felly unig fath o fynd i ffwrdd o'r hyn a ddywedodd Tomas,
mae hyn yn unig ffordd arall i wneud hynny.
Felly, mae gennym rai rhiant detholydd gyda detholydd phlentyn.
Felly, yn yr enghraifft hon yma, mae gennym rai corff gyda navbar dosbarth, botwm dosbarth.
Ah.
>> TOMAS REIMERS: O, sori.
>> ALLISON BUCHHOLTZ-PA: A yn y bôn, beth mae hyn yn ei olygu
yn dewis pob un o'r plant, fel pob un o'r mathau hyn o ddetholwyr,
o fewn y rhiant dewisydd.
A'r rhai yw'r unig rai byth yn mynd i wneud cais i.
Nid wyf yn gwybod os ydych yn gael ffordd well o-
TOMAS REIMERS: Felly yr wyf yn dyfalu y ffordd i feddwl
am hyn yw cofio cyn sut rydym yn fath o hoffi eu rhoi at ei gilydd.
Ac yna mae hynny'n golygu un elfen sy'n cyfateb pob un o'r rhain.
Beth mae hyn yn ei ddweud yw, yr wyf yn am i chi i gyd-fynd popeth
o fewn some-- Rwyf am chi i ddod o hyd i dewisydd.
Ac yna o fewn hynny, yr wyf am chi i gyd-fynd pethau newydd.
Iawn?
Felly, yn CSS, mae'n ymwneud math o y gallu i gyd-fynd eitemau hyn.
A gallwch geisio cyfateb eitemau o fewn eitemau eraill.
>> Felly, gadewch i ni ei wneud mewn gwirionedd enghraifft, ac yr ydym yn meddwl y bydd hynny egluro.
Felly, gadewch i esgus gennym arbennig, arbennig 'n bert, beth bynnag.
Ac yna mae gennym gyswllt, OK?
Felly cofiwch, mae cysylltiad.
Dyw hi ddim yn mynd i fynd i unrhyw le.
Ac rydym yn mynd i roi iddo y cyswllt dosbarth, yr wyf yn dyfalu.
Gadewch i ni roi y class-- rhoi syniad i mi.
ALLISON BUCHHOLTZ-PA: Cool.
TOMAS REIMERS: Coo-- gadewch i ni mynd iddo y dosbarth 'n bert.
Pam ddim?
>> ALLISON BUCHHOLTZ-PA: OK.
TOMAS REIMERS: Felly pethau ar hyn o bryd 'n bert
yn mynd i wneud y cefndir glas, lliw cefndir o eogiaid.
Mae hynny'n gwneud synnwyr.
Ac os ydym yn ei wneud this--
>> ALLISON BUCHHOLTZ-PA: Ydych chi eisiau ychwanegu testun
felly yr hyperddolen mewn gwirionedd yn dangos i fyny?
TOMAS REIMERS: Bod fyddai galwad da.
ALLISON BUCHHOLTZ-PA: 'iawn Achos yn awr rydym yn unig gonna cael dim byd.
TOMAS REIMERS: Felly mae hwn yn ddolen.
"Mae hwn yn gyswllt."
O, ac mae hyn yn mynd i fod yn ddolen gyswllt arall.
Gadewch i ni roi y dosbarth "cool."
Rydych chi'n iawn.
Cool.
Felly, ar hyn o bryd rydym yn mynd i chrafangia hyn.
Rydym yn mynd i daflu un.
Mae gennym un yn y tag arbennig, ac rydym hefyd yn
yn mynd i gael un yn y tag 'n bert.
Ac yn hyn o bryd beth yr ydym yn mynd i wneud yw ein bod yn mynd i wneud cool--
beth ydym am iddo ei wneud?
ALLISON BUCHHOLTZ-PA: Allwn ni wneud yn fwy?
TOMAS REIMERS: Gadewch i ni roi cynnig ffin.
ALLISON BUCHHOLTZ-PA: Gallem ffinio.
TOMAS REIMERS: Yeah.
Felly, rydym yn mynd i wneud rhywbeth fel, yw-- y ffin ac rydym yn
mynd i esbonio hyn i gyd mewn eiliad.
Ar gyfer now--
>> ALLISON BUCHHOLTZ-PA: I'r model bocs.
TOMAS REIMERS: Ond am nawr, rydym yn jyst yn mynd i roi cynnig ffin.
Felly beth mae hynny'n ei olygu yw eich bod yn mynd i weld y cysylltiadau hyn.
Ac ydych chi'n mynd i weld bod ganddynt hyn, fel, borderi duon hyll, a oedd yn
yn cŵl.
>> ALLISON BUCHHOLTZ-PA: Mae ein gwefan mor bert.
>> TOMAS REIMERS: Yeah.
Mae ein gwefan yn awesome.
Felly dau rhain yn gysylltiadau, ac maent yn ymddangos.
Nawr, gadewch i esgus i mi Dim ond eisiau gwneud hyn
os nad oedd o fewn rywbeth a oedd â chefndir o eog.
Felly cofiwch fod yr un yma Mae gan gefndir o eog,
oherwydd ei fod o ddosbarth 'n bert.
>> Ond rydym yn awyddus i ddweud mai dim ond oeri sydd yn y dosbarth arbennig, nid yn y dosbarth
'n bert, dylai gael y ffin.
Wel, beth y gallwch ei wneud yw i chi gallu dweud, .special, gofod, .cool.
A beth mae hynny'n ei wneud, pan fyddwch yn meddwl am y peth, a yw'n ei ddweud yn y bôn,
OK, dod o hyd i bopeth i mi sy'n cyfateb arbennig.
Yna, o fewn y tagiau hynny, dod o hyd i mi bopeth sydd yn cŵl.
ALLISON BUCHHOLTZ-PA: Felly ffordd arall a allai fod yn dda i feddwl am hyn,
gan ddod ag ef yn ôl i C, yn yn union fel y syniad o gwmpas.
Felly, pan fyddwch yn cael rhywfaint o detholydd, fel y rhai
ein bod ni wedi bod yn gweithio am cyn hyn, eich tudalen we gyfan, eich holl HTML
o fewn eich cwmpas, dde?
Ond pan mae gennym y rhain perthynas rhiant-plentyn,
'i' fel os ydych yn culhau i lawr lle ydych yn chwilio i le penodol,
fel pe, fel, rydym yn edrych yn swyddogaeth benodol yn lle hynny
o'n ffeil gyfan.
GYNULLEIDFA: Felly, gyda hynny mewn golwg, byddai mae wedi yn bwysig pe bai gennym changed--
ALLISON BUCHHOLTZ-PA: Y gorchymyn?
GYNULLEIDFA: --Yr dosbarth mewn CSS i .cool, gofod, .special?
ALLISON BUCHHOLTZ-PA: Ie, oherwydd bryd hynny
Byddai dweud, cwmpas i popeth sydd oer,
ac yna edrych ar yr hyn has-- Yr wyf yn golygu, fel, yn yr achos hwn,
Nid wyf yn credu y byddai wedi newid hynny.
>> TOMAS REIMERS: Os ydym wedi dweud beth?
Mae'n ddrwg gennym.
>> ALLISON BUCHHOLTZ-PA: Os ydym cwmpas iddo oeri ac yna
chwilio am bethau allan o arbennig, byddai'n yr un fath, mewn gwirionedd.
>> TOMAS REIMERS: Felly ni fyddai'n.
>> ALLISON BUCHHOLTZ-PA: Ni fyddai?
O, oh yn dda.
Yr wyf yn anghywir.
>> TOMAS REIMERS: Felly y rheswm 'i' different-- mistake-- cyffredin
yw y hyn o bryd yn unig y ddolen wedi oeri, dde?
Amcana fy nghwestiwn i chi guys yw, yr hyn ar y dudalen hon yn cael ei gyfateb gan .cool?
Mae dau tagiau yma, dde?
Pa un yw hwn ac mae hyn yn un.
Mae'r ddau yn cyd-fynd yn oer.
Nid oes unrhyw beth arall yn ei wneud.
Felly, os ydych ddywedodd, .cool, gofod, .special, yr hyn yr ydych chi'n mynd i ddweud yw,
o fewn y tagiau hyn, yr hyn sy'n arbennig?
ALLISON BUCHHOLTZ-PA: EM.
Dyna beth iddo-- iawn.
Oherwydd mae fel dim ond rhywbeth yma.
>> TOMAS REIMERS: Felly mae'n dewis dim.
>> ALLISON BUCHHOLTZ-PA: Tra gyda arbennig, rydym yn o fewn y tagiau hyn yma.
>> TOMAS REIMERS: Y rhai a hynny.
GYNULLEIDFA: OK.
Felly tagiau rhai o'r blaenslaes?
>> TOMAS REIMERS: Ie.
A yw hynny'n gwneud synnwyr?
Sut mae'n bôn ceisio gyfyngu cwmpas.
ALLISON BUCHHOLTZ-PA: Yeah.
Rwy'n credu bod hynny'n fwy na thebyg y ffordd hawsaf i feddwl am y peth.
>> TOMAS REIMERS: Felly, rydym yn dod o hyd hyn, a gwelsom hyn yn y ddau cyfateb arbennig.
Ac yna rydym yn gofyn, o fewn guys hyn, beth cŵl?
Ac o fewn yr un yma, yn oer yma yn un o.
O fewn yr un yma, nid oes dim yn cŵl.
Felly dyma'r unig tag sydd ar ôl.
>> ALLISON BUCHHOLTZ-PA: Tra oer yn unig o fewn y tag yn hyn yno.
TOMAS REIMERS: Yn union.
A beth sy'n arbennig o fewn hynny?
Dim byd.
Yn awr, yr hyn y byddaf yn ei ddweud yw os nad oedd lle,
ydych yn gofyn beth sy'n oer ac yn special-- neu beth eithaf ac arbennig, dde?
Os byddwch yn dweud .special.pretty, dyna yr un fath ag .pretty.special.
>> Oherwydd yr hyn gwared ar y gofod yn ofyn yw, pan ddywedwch .special,
ydych yn gofyn, OK, pa rai sy'n arbennig?
Ac yna o'r rheiny, a oedd yn rhai hefyd yn eithaf,
sydd yr un fath, yn ramadegol, fel ofyn, beth 'n bert,
ac yna o'r rheini, beth sy'n arbennig hefyd?
Iawn?
Mae'n y gwahaniaeth o beth sydd o fewn yr hyn sydd.
GYNULLEIDFA: OK.
TOMAS REIMERS: Yeah.
Awesome.
Felly, gyda hynny mewn golwg then--
>> ALLISON BUCHHOLTZ-UA: Yr wyf yn meddwl ein ddiwethaf beth yw (YN FFANSI BRITISH Accent)
y model bocs.
>> TOMAS REIMERS: Y box-- [chuckles] Rwyf wrth fy modd y ffordd Allison yn dweud bod.
Felly mae'r model blwch peth.
>> ALLISON BUCHHOLTZ-PA: Dim ond yn cael bocs, byddaf yn eich model bocs.
TOMAS REIMERS: Felly gadewch i ni siarad am hynny.
Felly, ar hyn o bryd, rydym wedi treulio llawer o amser yn siarad am detholwyr.
Erbyn hyn, rydych guys yn ôl pob tebyg, fel, meistr o selectors-- eich bod yn gwybod,
sut i ddewis yn union y cynnwys hwnnw rydych am ei drin ar eich sgrîn.
>> Felly, yn awr y cwestiwn yw, sut yn union y gallwch ei drin hyn?
Felly, yr wyf yn dyfalu y mwyaf sylfaenol ffordd i feddwl am hynny
yn, wel, beth yn union yn elfen yn CSS?
Rydym wedi treulio llawer o amser siarad am, beth yw tag,
neu beth yw'r mwyaf sylfaenol cynrychiolaeth tag?
>> Ffordd dda i feddwl am hynny yw, pa siâp yn eog?
Pa siâp yw, fel, yr eog-lliw cefndir?
>> GYNULLEIDFA: Mae'n petryal.
>> TOMAS REIMERS: Mae'n petryal, dde?
>> ALLISON BUCHHOLTZ-PA: Nid oedd cwestiwn tric.
[Chwerthin]
>> TOMAS REIMERS: Ddim yn ceisio i twyllo chi guys hyn yn hwyr.
Felly, rydym wedi petryal hwn.
Ac mae'r tag yn p, dde?
Felly mae hynny'n rhoi i ni yn dda cred fod y paragraff
yn cael ei gynrychioli fel petryal, ar lleiaf ym meddwl y porwr, a oedd yn
y mae.
>> ALLISON BUCHHOLTZ-UA: Yr wyf yn golygu, borwyr fel arfer yn hirsgwar,
felly mae'n gwneud synnwyr.
>> TOMAS REIMERS: Y syniad yma yw bod pob un o'r tagiau fewn CSS
yn cael eu cynrychioli fel petryal.
A phob petryal wedi pedwar rhannau yn ôl y CSS, OK?
Mae gennych y cynnwys gwirioneddol.
Dyna lle mae'r testun yn gorwedd.
>> ALLISON BUCHHOLTZ-PA: Efallai eich llun.
>> TOMAS REIMERS: Yeah.
Mae gennych padin, sef dim ond rhyw fath o le gwyn.
Yna mae gennych ffin.
Ac yna mae gennych elw, a oedd yn yw gofod gwyn y tu allan i hynny.
Felly mae hynny'n gwneud unrhyw synnwyr i unrhyw un, felly rydym yn
mynd i siarad am hynny am eiliad.
Felly dde yma, yr hyn rydym yn mynd i'w wneud yn rydym yn mynd i greu rhai divs, OK?
Esgusodwch fi tra I--
>> ALLISON BUCHHOLTZ-UA: Yr wyf yn teimlo yn hoffi dylem roi darlun 'n giwt i mewn.
>> TOMAS REIMERS: Yr ydym yn bendant dylai.
>> ALLISON BUCHHOLTZ-PA: Rwy'n teimlo fel pawb
Gallai budd o darlun 'n giwt, i gyd.
>> TOMAS REIMERS: Allwn ni gyd yn elwa a--
>> GYNULLEIDFA: Yeah, yn sicr.
TOMAS REIMERS: OK, oer.
Felly, dylem roi 'n giwt llun yn rhywle.
ALLISON BUCHHOLTZ-UA: Yr wyf yn teimlo fel Efallai y bunny cute yn ddefnyddiol ar hyn o bryd.
TOMAS REIMERS: Cadarn.
ALLISON BUCHHOLTZ-PA: Diwedd yr wythnos.
Cael rhywbeth adorab--
>> TOMAS REIMERS: Sut bout a gath fach?
>> ALLISON BUCHHOLTZ-PA: Mae gath fach yn gweithio, hefyd.
>> TOMAS REIMERS: Cool, oherwydd mae 'na safle ar gyfer hynny.
Mae'n cael ei alw PlaceKitten.
ALLISON BUCHHOLTZ-PA: Mae hynny'n wych.
TOMAS REIMERS: Ie.
ALLISON BUCHHOLTZ-PA: Dim ond ar gyfer, fel, delweddau dalfan yn eich gwefan.
TOMAS REIMERS: Mm-EM.
Mae hefyd yn PlacePuppy.
Ac mae PlaceBacon.
>> ALLISON BUCHHOLTZ-PA: PlaceBacon?
Really?
>> TOMAS REIMERS: O, nid ydym yn ei wneud fynediad i'r rhyngrwyd yma.
>> ALLISON BUCHHOLTZ-PA: [griddfan]
Trasig.
TOMAS REIMERS: Fel arall, Byddwn yn dangos i chi guys
sut i roi delweddau yn eich gwefan.
Rydym yn mynd i geisio cael hyn gwaith cyn mae'n rhaid i ni fynd.
Ond am nawr, rydym yn unig mynd i siarad mewn lliwiau hynny.
Rydym am roi lluniau o kittens--
>> ALLISON BUCHHOLTZ-PA: Gwnaethom.
>> TOMAS REIMERS: --Yr rhyngrwyd yn i lawr am y tro fodolaeth.
Felly, mae gennym ddau divs, ac rydym yn mynd i roi dau IDS iddynt.
Rydym yn mynd i alw iddo "Cyntaf" a "ail."
Felly id = "yn gyntaf."
Ac rydym yn mynd i roi dau liw iddynt.
Felly sut rydym yn dewis rhywbeth gydag id o "cyntaf"?
ALLISON BUCHHOLTZ-PA: Dot neu hash?
GYNULLEIDFA: Sharp.
TOMAS REIMERS: Sharp, perffaith.
Sharp, hash, beth bynnag we--
>> ALLISON BUCHHOLTZ-PA: Mae llawer o bethau i'w alw.
>> TOMAS REIMERS: OK.
Rydym yn mynd i setlo ar hashtag, a dyna beth rydym yn mynd i fynd â hwy.
OK?
>> ALLISON BUCHHOLTZ-PA: hashtag.
>> TOMAS REIMERS: Felly hashtag yn gyntaf.
>> ALLISON BUCHHOLTZ-PA: Felly gallwch tweet yr seminar--
CSS hashtag, hashtag oer.
TOMAS REIMERS: hashtag Awesomeness.
ALLISON BUCHHOLTZ-PA: Hashtag Awesomeness, ie.
TOMAS REIMERS: OK.
Felly mae gennym "cyntaf" a "ail."
Felly gyntaf, rydym yn mynd i gael lliw cefndir o goch.
ALLISON BUCHHOLTZ-PA: Uh, colon.
TOMAS REIMERS: Yup.
ALLISON BUCHHOLTZ-PA: Byddaf yn eich fan a'r lle-gwiriwr.
TOMAS REIMERS: Allison yn got 'm.
Cefndir-lliw blue--
>> TOMAS REIMERS: Porffor!
>> TOMAS REIMERS: Porffor.
ALLISON BUCHHOLTZ-PA: Ie.
Fy hoff liw porffor, a ac nid ydym wedi ei ddefnyddio eto.
>> TOMAS REIMERS: Violet.
ALLISON BUCHHOLTZ-PA: Violet.
Mae hynny'n gweithio.
>> TOMAS REIMERS: Felly rydym yn mynd i gael dau divs.
Maent yn mynd i fod yn hollol wag.
Dylem yn ôl pob tebyg gael rhywfaint o destun.
Felly, "cyntaf" yn mynd i fod yn "HELO."
A'r "ail" Bydd say--
>> ALLISON BUCHHOLTZ-PA: Hwyl fawr.
>> GYNULLEIDFA: - "BYD."
Helo, hwyl fawr.
ALLISON BUCHHOLTZ-UA: Gwelais iddynt yn gyngerdd yr wythnos o'r blaen.
TOMAS REIMERS: Y Beatles?
ALLISON BUCHHOLTZ-PA: Ar gyfer reals.
Dydyn nhw ddim bod fawr.
Dydw i ddim yn ei hoffi.
>> TOMAS REIMERS: Mae gennym "HELO" a "hwyl fawr."
Ac eto, CSS yn unig anhygoel, oherwydd ei fod yn cydnabod ein lliwiau.
Nid oes angen i hyd yn oed poeni eu bod yn bodoli.
Maent yn gwneud.
>> ALLISON BUCHHOLTZ-PA: Maent yn bodoli.
>> TOMAS REIMERS: Felly CSS rwy'n credu mae 255 o eiriau i siarad am liw.
Os gallwch chi feddwl am liw y tu allan 255 hynny, fel, byddaf yn creu argraff.
ALLISON BUCHHOLTZ-PA: Yeah.
Yr wyf yn meddwl efallai y byddwch yn guys gael newydd ddod yn dde ar ôl.
>> TOMAS REIMERS: Felly dyma, byddwch yn gweld mae gennym ddau flwch
i'r dde ar ben ei gilydd, dde?
HELO a hwyl fawr.
>> ALLISON BUCHHOLTZ-PA: Does dim lle yn y canol.
Maent yn unig smooshed i'r dde ar ben ei gilydd.
>> TOMAS REIMERS: Felly, y peth cyntaf Amcana dylem siarad am
mae gadewch i ni hefyd say-- yeah.
Felly CSS yn eu cynrychioli fel math o flychau.
Ac fel blychau, mae ganddynt gynnwys.
Ac y cynnwys ar hyn o bryd yn fath o y HELO neu'r HWYL FAWR a dyna ni.
OK?
>> Felly, un o'r pethau cyntaf y byddwch yn Gall wneud yw y gallwch chi ychwanegu padin.
Padio yn dweud faint o le dylai adael ar bob ochr.
Felly, gadewch i ni ddweud rwyf am ei ddweud 10 picsel ar bob ochr.
A mi ddyrannu hynny mewn eiliad.
ALLISON BUCHHOLTZ-PA: Mae pob un o'r pethau hyn yma
yn mynd i fod yn bennaf mewn picseli ar gyfer gweddill y seminar.
Rydych yn mynd i weld ei fod wedi ychydig o le o'i amgylch, dde?
Felly yr hyn nad ydych yn gweld yma yw mae ' y math anweledig o padin
ar bob ochr, sy'n dweud, fel, OK, mae gennych eich bocs o content--
>> ALLISON BUCHHOLTZ-PA: Ydych chi eisiau i ddim ond tynnu i fyny yr elfen arolygu?
>> TOMAS REIMERS: Yeah, mae hynny'n syniad da.
ALLISON BUCHHOLTZ-PA: Hefyd, yr wyf yn dod o hyd bod yr elfen arolygu yn ffordd dda
at chyfrif i maes os bydd rhywbeth yn mynd o'i le, rhywbeth annisgwyl yn digwydd,
archwilio'r tagiau a gweld beth mae fel overwritten yn ddefnyddiol.
>> TOMAS REIMERS: Felly, nid wyf ddim yn siwr os gallwch chi guys yn gweld lliw hwn.
Allwch chi?
Byddwch yn gweld padin hwn ar y math o ymyl.
Ac yna byddwch yn gweld y gwir cynnwys mewn glas, dde?
Felly dyna'r iawn hanfodion y model bocs.
Mae gennych y cynnwys.
Yna, mae gennych padin.
>> GYNULLEIDFA: Pam na gwneud ydych yn unig defnyddiwch y blwch tu mewn the--
>> ALLISON BUCHHOLTZ-PA: Iawn.
Oherwydd ei fod wedi dim ond dewis yr elfen ar hyn o bryd.
>> TOMAS REIMERS: Yup.
Pethau eraill.
Felly, gadewch i ni siarad am hynny gorchymyn padin am eiliad.
Felly, yn CSS, mesuriadau Mae angen i gael uned.
Felly, cyntaf y byddwch yn cael y swm.
Felly, yn yr achos hwn, rydym wedi dweud 10.
Ac yna y nesaf rydym wedi ddweud yw picsel, px.
Rhai eraill a allai fod gennych yn pethau fel centimetrau, modfedd.
Gallwch chi wneud pethau yn hoffi, yr hyn yw 10 modfedd?
Ac mae'n mynd i fod yn chwerthinllyd.
>> ALLISON BUCHHOLTZ-PA: O, bachgen.
>> GYNULLEIDFA: Pwy yw.
>> TOMAS A ALLISON: Yeah.
TOMAS REIMERS: Felly dyna i gyd padin.
Rydw i'n mynd i fynd yn ôl i'r picsel.
>> ALLISON BUCHHOLTZ-PA: Pixels yn tueddu i fod, fel, y safon.
Pan edrychwch ar lawer o wefannau, maent yn gweithio yn bennaf mewn picseli.
TOMAS REIMERS: Felly, rydych chi'n mynd i weld naill ai pixels-- y rhai eraill a byddwch yn gweld
yn em, sy'n un em yn yn hafal i uchder y ffont
yr ydych yn ei ddefnyddio ar hyn o bryd.
>> ALLISON BUCHHOLTZ-PA: Mm.
TOMAS REIMERS: Mae'n ffordd dda o ddweud, fel, yr wyf am cymaint o le ag y mae fy ffont
yn cymryd.
ALLISON BUCHHOLTZ-PA: Ddim yn gwybod hynny.
Byddwch yn dysgu rhywbeth newydd bob dydd.
TOMAS REIMERS: Mae llawer o fesuriadau mewn CS.
Rwy'n awgrymu i chi edrych i fyny.
Ar gyfer eich holl achosion, yr wyf yn meddwl Dylai picsel fod yn ddigonol.
Ac maen nhw'n hefyd yr hyn ydych yn mynd i weld
yn y mwyafrif o enghreifftiau wneud ar-lein.
Felly, byddwn yn ei adael ar picsel.
>> Gallwch hefyd, dylwn say-- hynny setiau padin bob un o'r paddings.
Gallwch hefyd wneud rhywbeth fel "Padin-top" i ddim ond set--
ALLISON BUCHHOLTZ-PA: Efallai byddwn yn cael ein "HELO" yn ôl.
TOMAS REIMERS: --to dim ond gosod y padin ar y top a dim byd arall.
Felly y pedwar gorchmynion yn padin-uchaf, padin-gwaelod, padin-chwith,
a padin-dde.
>> ALLISON BUCHHOLTZ-PA: Yn union fel byddech yn disgwyl am flwch.
>> TOMAS REIMERS: Yeah.
Nid oes dim yn rhy crazy yno.
A yw hynny'n gwneud synnwyr?
Felly dyna yw padin.
Rydw i'n mynd i osod yr holl y paddings yn ôl i 10.
Ac yna dwi'n mynd i symud ymlaen i ffin.
>> Felly beth ffin yn ei border 'na gorchymyn' n annaearol.
Mae'n cymryd rhyw fath o dri pheth ar unwaith.
Felly, y cyntaf yw pa mor fawr i chi am iddo fod yn mesur.
Unwaith eto, rwy'n dim ond yn defnyddio picsel.
A'r peth olaf i mi Dylai ychwanegu at mesuriadau
yw'r un peth sy'n Nid oes angen uned yw 0.
Mae'n anghywir mewn gwirionedd i roi 0 uned,
oherwydd 0 yn 0 ar draws modfedd, picsel, centimetrau, beth bynnag.
Mae i gyd yn unig yn golygu 0, dde?
Felly, cyntaf y byddwch yn ei roi y mesur.
>> Yna, byddwch yn rhoi ei arddull.
Felly dw i'n mynd i ddweud "solid."
A byddwn yn siarad am yr hyn mae hynny'n ei olygu.
Ac yna yn olaf, byddwch yn rhoi ei lliw.
Felly dw i'n mynd i ddweud "du."
Ac mae'r rhain i gyd yn bethau rydym wedi weld o'r blaen yn awr, ac eithrio ar gyfer arddull,
ond byddwn yn siarad am hynny.
Felly, rydych guys wedi gweld mesuriadau, ac yr ydych wedi gweld lliwiau.
A beth sy'n digwydd yw ein bod yn cael hyn yn border du 'n glws o'i gwmpas, dde?
Rydych guys yn gweld sut y gwnaethom hynny?
>> GYNULLEIDFA: Yeah.
>> TOMAS REIMERS: Cool.
Felly beth yw hynny?
Felly, yn gyntaf oll, mae'n un picsel.
Dyna hunan-amlwg ddigon, dde?
Fel, mae'n un picsel trwchus.
Neu a fyddai'n un picsel, ond rwy'n chwyddo i mewn, felly mae'n ychydig yn fwy
na hynny.
>> ALLISON BUCHHOLTZ-PA: Ac mae gennym y teledu datrys chwerthinllyd.
>> TOMAS REIMERS: Yeah.
Gallwch ei wneud yn fwy, llai, beth bynnag.
Felly dyma ffin dwy-picsel.
Byddwch yn gweld ei fod yn ddwywaith yn fwy trwchus.
Peth nesaf y byddwch wedi ei lliw.
Dyw hynny ddim yn ddiddorol.
Dydw i ddim yn mynd i siarad am hynny, mewn gwirionedd.
>> ALLISON BUCHHOLTZ-PA: Ond mae'r arddull Efallai fod yr un ychydig yn ddiddorol.
>> TOMAS REIMERS: Yeah.
Felly arddull, mae yna ychydig rai fy mod yn gweld a ddefnyddir yn gyffredin.
Solet, un nesaf un gyntaf doredig, ac wedi chwalu'r yr un diwethaf.
Ac yma yn frith.
Byddwch yn gweld eu bod yn criw o ddotiau, dde?
Ffordd dda o fath o gael border 'n glws mynd, llinellau toriad hefyd yn eithaf poblogaidd.
>> ALLISON BUCHHOLTZ-PA: Ac yna, wrth gwrs, rwy'n
siwr bod digon eraill arddulliau y gallwch ei gael.
Ac mae gennym set mawr o cysylltiadau ar y diwedd i chi guys
i fath o ddarllen a edrych ar CSS fwy oer.
>> TOMAS REIMERS: Ac yna y peth olaf, rydym yn
mynd i siarad am y modelau blwch go gyflym.
O, ac yna ffin, yn union fel padin,
byddwch hefyd yn cael pethau fel chwith-ffin, border-dde, border-top,
border-gwaelod, sy'n caniatáu i chi i fynd ar ffin benodol.
Felly dyma dim ond y ffin chwith-ddiffiniedig.
A yw hynny'n gwneud synnwyr?
>> ALLISON BUCHHOLTZ-PA: Mae'n cŵl ffordd i bwysleisio pethau neu ychwanegu
llinellau rhwng gwahanol elfennau.
TOMAS REIMERS: Yn hollol.
Felly dyna ein ffin.
Ac ymyl y un llynedd.
Padin tebyg Ymyl yn ac eithrio nad yw'n within--
ALLISON BUCHHOLTZ-PA: Mae'n Nid yw o amgylch eich elfen
ond mewn gwirionedd o gwmpas y cyfan blwch yr ydym wedi bod yn ei weld.
>> TOMAS REIMERS: Yeah.
Dywedodd Allison mae'n berffaith.
Dyw hi ddim yn, fel, y tu mewn i'ch elfen, 'i' o amgylch y blwch cyfan.
Mae hynny'n golygu pethau fel Nid yw cefndir yn gymwys iddo.
Ac y mae'n ei ddweud yn y bôn, fel, dydw i ddim eisiau dim byd
yn hyn o le i mi.
Felly, fel yma mae gennym ymyl o 10 picsel.
Felly dim byd o fewn 10 picsel Dylai fod yn nesaf i mi.
Dyna fath o ei gofod ond math o peidio.
Felly dyna'r iawn hanfodion y model bocs.
A yw hynny'n gwneud synnwyr?
Cool, oer.
ALLISON BUCHHOLTZ-PA: Awesome.
Felly, yn awr yr wyf yn meddwl ein bod yn unig wedi ein hadnoddau oer
y byddwn yn mynd â chi guys trwy gyflym iawn.
A byddwn yn actually-- yn dda, sydd gennym y rhyngrwyd eto?
>> TOMAS REIMERS: Gadewch i ni weld os gallaf agor up--
gadewch i mi jyst weld os wyf yn Gall cael y rhyngrwyd yn gyflym
tra Allison yn siarad am unrhyw beth Allison eisiau siarad am.
ALLISON BUCHHOLTZ-PA: Felly basically-- Nid wyf yn ei wneud
yn gwybod beth arall y gallaf ei ddweud ar hyn o bryd.
Ond dyma rai adnoddau gwirioneddol dda.
Mae'r rhain yn rhai sy'n Tomas ac rwyf wedi defnyddio
a'n bod yn mewn gwirionedd a ddefnyddir i prep ar gyfer hyn.
W3Schools yn un sy'n chi Dylai guys wedi gweld o'r blaen.
Rydym yn argymell ei fod am llawer o bethau gyda CSS.
Rwy'n gwybod fy mod yn ei argymell i fy adran drwy'r amser.
>> Un o'r pethau gwych yw ei fod yn yn caniatáu i chi fath o chwarae o gwmpas gyda CSS
a gweld y newidiadau ar unwaith yn hyn,
fel, dwbl-ffenestri gweld bod ganddi.
Felly, nid oes rhaid i chi boeni am sefydlu eich tudalen ar y we eich hun,
neu sefydlu vhost yn eich peiriant lleol a llu lleol,
ac yn cael yr holl bod gweithio stwff.
Mae'n cael ei hymgorffori i'r dde o fewn y dudalen.
>> Ac mae wedi hyn ychydig gwersi y gallwch
mynd drwy i ddysgu mwy am detholwyr,
neu ddysgu am drin eich ffont, neu gefndir, neu ddelwedd.
Ac mae gennych y rhain canlyniadau y pryd sy'n eich
Nid oes rhaid i wneud unrhyw gwaith paratoi arall ar gyfer.
Felly, yr wyf wrth fy modd W3Schools.
Mae'n wych.
A yw'n gweithio?
>> TOMAS REIMERS: Yeah.
Na, nid yw'n.
Ydych chi am i mi roi cynnig a restart 'fy nghyfrifiadur?
Neu ydym ni eisiau i--
>> ALLISON BUCHHOLTZ-UA: Yr wyf yn golygu, yn dda, bydd hyn hefyd fod ar-lein.
Bydd yr holl sleidiau fod ar-lein.
Felly, Fi jyst dal argymell gwneud hyn.
>> Mae hyn yn wych fel dim ond fel taflen twyllo.
Dim ond yr holl sylfaenol gorchmynion sydd gennych.
Mae'n wych pan fyddwch chi yn gyntaf cychwyn eich gwefan.
Oherwydd efallai nad ydych yn ei wneud eisiau mynd i mewn i bob
y nitty gritty go iawn dylunio-trwm stwff.
'Ch jyst angen i chi ei fformatio mewn ffordd y math hwnnw o yn gwneud synnwyr ac ewyllys
ei wneud am y tro.
Ac os ydych wir eisiau i fynd i mewn iddo, yr wyf yn gwybod
mae hyn yn, fel, yn un o Hoff gyfeiriadau Tomas yn.
Rydym yn ei ddefnyddio i paratoi, ac mae'n wych.
Mae'n y Datblygwr o Mozilla.
>> TOMAS REIMERS: Felly Mozilla yn y bobl sy'n gwneud Firefox.
Ac mae'n dim ond eu hunain datblygwr cyfeirio, yr wyf yn meddwl yn awesome.
Ac mae ganddo gwych rhestr o adnoddau.
Felly rydym have--
>> ALLISON BUCHHOLTZ-PA: Ac yna nodyn olaf yw
pan fyddwch yn ceisio ddylunio eich gwefan,
tynnu ysbrydoliaeth o bethau eich bod yn meddwl yn eithaf.
Arolygu yr elfen, archwilio'r cod ffynhonnell
Gall fod yn ddefnyddiol super i geisio chyfrif i maes
sut i arddull eich gwefan eich hun.
>> Yn aml, yr wyf yn teimlo fel y gorau ffordd, ar wahân arbrofi,
yn unig i edrych ar pethau sy'n eithaf.
Rwy'n ei chael hi'n anodd iawn i ddim ond math o ddylunio pethau ar eich pen eich hun,
yn enwedig yn y dechrau.
Felly, os gwelwch yn dda edrychwch ar wefannau eich bod yn mwynhau edrych ar.
Chyfrif i maes beth sy'n gwneud eu apelio i chi.
Ac yna mae croeso i chi ceisio ailadrodd hynny.
>> TOMAS REIMERS: Iawn.
Hyd yn oed yn hoffi wefannau fel hyn, gallwch weld
mae bendant yn div ar y brig.
Ac yna mae gennych div arall o fewn yma, sydd yn Awesomeness CSS.
Ac yna mae gennych griw o gysylltiadau yma.
Os ydych yn wir yn unig yn arolygu elfennau, gallwch ddatrys y
dechrau gweld beth y mae gwefannau edrych, a sut y gall yr wyf yn
ail-greu, os oeddwn i eisiau.
A yw hynny'n gwneud synnwyr?
Felly, rydym dim ond tri munud sydd ar ôl.
Felly gwestiynau?
Unrhyw un ohonynt?
Ydw.
>> GYNULLEIDFA: Ar gyfer y lliw petryal, sut y byddech
have-- os nad oeddech am ei mynd ar draws y dudalen gyfan, gallai
yr ydych wedi ei gwneud yn mynd ar draws yn unig hanner y dudalen neu dim ond y testun?
>> TOMAS REIMERS: Yeah, gwbl.
Felly, gadewch i mi weld mewn gwirionedd.
Mae gen i ddau o syniadau.
Felly, yn gyntaf oll, yr ydych Gall hefyd ddefnyddio percents.
>> GYNULLEIDFA: Really?
>> ALLISON BUCHHOLTZ-PA: Felly rywbeth i chwilio am ei lleoli cymharol.
Mae'n rhywbeth yr ydym yn Nid oes gennych amser i fynd i mewn,
ond mae'n rhywbeth yn bendant argymell eich guys edrych allan.
>> TOMAS REIMERS: percents Felly.
A gweld sut yr ydym yn ei gwneud yn dim ond 50% o led?
ALLISON BUCHHOLTZ-PA: Os ydych yn mewn gwirionedd yn gwybod y nifer o picsel,
gallwch fod yn fwy manwl gywir y ffordd honno.
Gallwch chi chwarae o gwmpas ag ef.
Ond mae 50%.
Pe baem yn newid maint ein borydd, byddai'n ei gwneud yn llai.
>> TOMAS REIMERS: Wel, 'i' yn y bôn o 50% ar hyn o bryd, yr wyf yn meddwl.
Mae'n 50%, ac yna yr ymyl wedi cael ei ychwanegu at hynny.
CSS Mae gan lawer o quirks.
Felly, ar hyn o bryd mae hyn yn 50% o'r dudalen led.
Ond cofiwch fod gennych 10 picsel a gymerwyd oddi ar bob ochr.
Felly, os ydych yn symud hynny yn erbyn ymyl chwith y porwr,
yna byddai'n edrych fel 50%.
Unwaith eto, fel y dywedais, gall CSS fod yn llawer o ddyfalu-a-siec.
Fel, yn eich barn chi rhywbeth yn mynd i ymddwyn un ffordd,
ond mae'n ymddwyn yn ffordd hollol wahanol.
>> ALLISON BUCHHOLTZ-PA: A ydych yn unig yn cael gallach,
ac ch jyst cael gwell greddf ar ei gyfer wrth i chi symud ymlaen.
>> TOMAS REIMERS: Ac mae'n mynd yn waeth ac yn waeth.
Felly mae'n wirioneddol dim ond ras.
>> ALLISON BUCHHOLTZ-PA: Dyna super galonogol.
Rydym am iddynt hoffi CSS.
>> TOMAS REIMERS: CSS yn awesome.
Cofiwch fod.
Cwestiynau eraill?
>> ALLISON BUCHHOLTZ-PA: Yr un peth.
Unrhyw beth arall?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON BUCHHOLTZ-PA: Wel, os ydych yn guys gennych unrhyw gwestiynau yn nes ymlaen,
rydym yn ar gael yn unol arfer bob amser.
Mae'n debyg y byddwch yn gweld rhai o ni am brosiectau terfynol
ac yn sicr yn y hackathon.
>> TOMAS REIMERS: Yn hollol.
Ac yn y ffair.
>> ALLISON BUCHHOLTZ-PA: Ac yn y ffair.
Oh.
>> TOMAS REIMERS: Edrych ymlaen at gweld eich holl awesome--
>> ALLISON BUCHHOLTZ-PA: Cawn weld eich holl wefannau anhygoel
a fydd yn hardd.
TOMAS REIMERS: Gallwch bob amser weld, fel, y gwefannau
a oedd wedi, fel, CSS da ac yna fel y rhai nad oedd yn ceisio gwneud CSS.
ALLISON BUCHHOLTZ-PA: Hefyd, un arall peth, un peth arall i edrych i mewn
yw bootstrapping.
Felly Bootstrap yn wych.
>> TOMAS REIMERS: Google, os you--
>> ALLISON BUCHHOLTZ-PA: Google iddo.
Mae'n wych.
Byddwch wrth eich bodd.
Ac yn awr fod gennych dealltwriaeth sylfaenol o CSS,
bydd yn gwneud llawer mwy o synnwyr.
Awesome.
Diolch, guys.
>> TOMAS REIMERS: Diolch yn fawr i chi.