[CHWARAE CERDDORIAETH] 

DOUG LLOYD: Felly gadewch i ni gymryd un yn fwy fideo i siarad am un iaith fwy. Y tro hwn byddwn yn siarad am y CSS. Felly CSS, sydd yn fyr am Rhaeadru Taflenni Arddull, yw iaith arall a ddefnyddiwn wrth lunio gwefannau. Meddyliwch am y peth fel hyn. Os HTML yw'r hyn yr ydym yn eu defnyddio i drefnu'r cynnwys yr ydym am ei roi ar ein tudalen, CSS yw'r offeryn yr ydym yn gyffredinol yn defnyddio i addasu sut mae ein gwefannau yn edrych, a sut y mae profiad y defnyddiwr 'n sylweddol yw, yn rhyngweithio â'n gwefan. 

Yn debyg i HTML, CSS yw Nid yw iaith raglennu. Nid oes ganddo rhesymeg. Nid oes ganddo newidynnau. Nid oes ganddo unrhyw fath o hynny llif pethau cysylltiedig y C yn ei wneud. Mae'n iaith steilio. Ac mae ei gystrawen yn eithaf syml, a dim ond yn disgrifio sut mae'r elfennau o'n dudalen wedi HTML penodol Dylai elfennau gael eu haddasu. I'r perwyl hwnnw, os nad oes gennych eto gwylio ein fideo ar HTML, neu sy'n anghyfarwydd â HTML yn gyffredinol, yr ydych efallai y byddant am gymryd golwg ar hynny yn gyntaf, oherwydd y drafodaeth hon y CSS yn mynd i ddibynnu ar peth gwybodaeth o HTML. 

Felly, dyma 'n sylweddol arddull CSS syml. Hyd yn oed os ydych erioed wedi rhaglennu gyda CSS o'r blaen, Rwy'n eithaf siwr y gallwch chyfrif i maes union beth arddull hwn yn ei wneud. Beth mae'n ei wneud? Wel, cymhwyso at y corff ein gwefan dudalen, popeth rhwng tagiau corff ar ein HTML, ac mae'n gosod y lliw cefndir y dudalen i las. Wel, mae'n arddull syml iawn. Mae'n mewn gwirionedd yn ddynol iawn iaith gyfeillgar, CSS. Felly hyd yn oed os nad ydych erioed wedi ei ddefnyddio o'r blaen, Mae'n debyg y gallech ddyfalu beth wnaeth hynny. Yn wir, os ydym llwytho dudalen, lle arddull hwn wreiddio rhywsut, y lliw cefndir ein dudalen byddai fod yn las, ac nid y gwyn safonol. 

Felly sut rydym yn adeiladu arddull? Wel yn gyntaf, mae'n rhaid i ni nodi detholydd. Yn yr enghraifft olaf, y detholydd gorff yn. Yna, mae gennym agored Brace cyrliog, ac rydym yn mynd i ddechrau diffinio'r arddull ar gyfer y dewisydd. Yn rhwng y braces cyrliog, rydym yn oes gen restr o barau gwerth allweddol. Mae'r pâr Gwerth blaenorol yn lliw cefndir hanner colon glas, ond gallem wneud mwy a mwy o'r rhain. Gallech gael pethau lluosog sy'n gwneud cais at y tag, hynny corff dewisydd. Mae pob un ohonynt yn cael ei gwahanu gan hanner colon, ac rydym yn galw pob un ohonynt datganiad, datganiad CSS. Pan rydym yn ei wneud gyda'r holl steilio ydym am wneud cais i'r tag penodol, rydym yn unig yn cael cyrliog cau Brace i roi terfyn ar yr arddull, ac rydym yn ei wneud diffinio'r arddull ar gyfer y detholwr penodol. 

Beth yw rhai eiddo CSS cyffredin? Wel, efallai y byddwch am roi border o gwmpas rhywbeth. Felly rydych yn gallu dweud, ar y ffin, byddai hynny'n eich allweddol, ac yna byddai eich gwerthoedd fod, pa arddull, lliw, a lled yr ydych am iddo fod. Felly gallai yr arddull fod yn solid llinell, llinell doredig, llinell doredig, llinell crib, a fyddai'n llinell donnog. Efallai eich bod am gael ei fod yn las neu'n du neu wyrdd. Efallai eich bod am iddo fod 1 neu 2 neu 10 picsel o led. Gallwch nodi pob un o'r pethau hynny. Efallai eich bod am osod y cefndir lliw eich dudalen mewn ffordd benodol. Rydym eisoes yn gweld bod, gan osod y cefndir i'r corff fod yn las. 

Yna gallwch ddefnyddio gair allweddol, felly CSS Mae lliwiau penodol sy'n cael eu hadeiladu i mewn iddo, glas, gwyrdd, du, lliwiau syml iawn y gwyddom. Ond gallwch hefyd nodi unrhyw lliw hecs y byddech yn ei hoffi. Dwyn i gof y gall lliwiau yn cael eu nodi gan set o dri rhif hecs 0-255, rg a b, mae'r cydran coch, gwyrdd, a glas. Ac felly y gallwn bennu unrhyw liw yr ydym am yn ôl, yn hytrach na defnyddio glas neu wyrdd neu'n ddu, gan ddefnyddio bunt ac yna chwe digid o hecs, a fyddai'n rhoi i ni y lliw chwe digid. Felly dyna y lliw cefndir. 

Mae gennym hefyd y blaendir lliw, sydd fel arfer yn mynd i fod yn destun eich tudalen. A allech chi wneud hynny yn yr un modd gyda gair allweddol a neu chwech hecs digid. Felly, gallwch nodi unrhyw liw yr ydych eisiau ar gyfer destun eich tudalen yn erbyn arbennig lliw cefndir, i fyny uchod. Gallwch hefyd newid ac ymdrin gyda ffont, a'r modd testun ei rendro ar y dudalen. 

Felly, gallwch newid eich maint y ffont. Gallwch ddefnyddio geiriau allweddol, megis ychwanegol, ychwanegol bach, neu xx bach, neu gyfrwng, mawr, ac yn y blaen. Gallwch ddefnyddio bwyntiau sefydlog, 10 pwynt, 12 pwynt, ac yn y blaen. Gallwch ddefnyddio canrannau, 80%, 20%, lle mae 100% yw'r ffont rhagosodedig maint, sydd fel arfer yn mynd i fod yn rhywbeth fel 11 neu 12 o bwyntiau. Neu gallwch hyd yn oed seilio 'i off o'r maint y ffont mwyaf diweddar. Os ydych newydd ei ysgrifennu rhywbeth a ydych yn gwybod yr hyn yr ydych ei eisiau yw iddi fod yn llai, ond nid ydych yn gwybod beth yw maint yr ydych yn union am iddo fod, yn dda, byddwch yn gallu dim ond dweud, maint y ffont llai. A bydd yn seilio oddi ar y, dim ond i fyny uchod, mae'n maint y ffont. A gallwch gael llai neu fwy. Felly mae llawer o wahanol ffyrdd o bennu maint y ffont. 

Gallwch hefyd benodi beth teulu ffont ydych ei eisiau. Os oes gennych penodol enw, mae 'na ffordd CSS-- Nid ydym yn mynd i siarad am y peth Yma-- i ddiffinio ffont penodol iawn ac ymgorffori i mewn i'ch tudalen. Gallwch hefyd ddefnyddio enwau generig. Mae llawer o ffontiau diogel ar y we sy'n cael eu cyn-ddiffinio yn CSS. Ac os ydych yn ddefnyddiwr o Microsoft Swyddfa yn y 20 mlynedd diwethaf, Mae'n debyg eich bod yn gyfarwydd â llawer o'r rhain ffontiau diogel ar y we eisoes, Times New Roman, Arial, Negesydd Newydd, Georgia, Tahoma, Verdana, ac yn y blaen. Mae'r rhai i gyd yn cael eu hystyried ar y we ffontiau yn ddiogel. Ac mewn gwirionedd, yn rhan o'r daethant reswm i fod oedd i gael ei ddefnyddio i wneud web-- bob tudalen Roedd mynediad at ball hwn yn gosod o ffontiau gyda gwahanol serifs, ac mae hyn i gyd stwff ffont ni fyddwn yn mynd i mewn, ond mae'r rhain fel arfer hygyrch yn eich CSS, hyd yn oed os nad ydych yn ei wneud diffinio'r ffontiau fel arall. Yn olaf, gallwch alinio eich testun, yn hytrach ei fod, yn ddiofyn, cyd-fynd i'r chwith, gallech alinio i'r dde, neu fe allech chi alinio ei ganoli, neu gyfiawnhau fel ei fod yn taro y ddau ymylon. Felly, y rhai yn cael eu holl opsiynau y gallwch eu defnyddio i newid yr hyn eich testun yn edrych fel, a sut mae'n cael ei arddangos ar eich tudalen. 

Nid yw eich dewiswyr yn ei wneud rhaid i ni fod tagiau yn unig. Rydym eisoes yn gweld tag corff dewiswr, ac dewisydd tag ddim yn edrych yn union fel hynny. Rydych yn enwi tag, ac yna rydych ddiffinio arddull ar gyfer y tag. Ond gallwch hefyd wneud rhywbeth a elwir yn detholydd adnabod. Mae detholydd ID edrych yn eithaf tebyg. Ond yn sylwi, sydd bellach dydw i ddim yn defnyddio tag HTML, Im 'yn arfer, yn yr achos hwn, #unique, neu hash unigryw. Os cofiwch gan ein 'n fideo ar HTML, buom yn siarad am sut y gall tagiau gael priodoleddau. 

Ac un nodwedd sy'n berthnasol i 'n bert lawer pob tag HTML, ond doedden ni ddim yn siarad am y peth, yn rhywbeth a elwir tag adnabod. Felly, byddai hyn CSS arbennig berthnasol yn unig i HTML tag sydd wedi ID penodol iawn, eich bod wedi enwi. Felly os oes gennych rywle yn eich cod, yn rhywle yn eich ffeil HTML, tag a chi pennu fel nodwedd i'r tag, ID hafal unigryw, mae hyn yn arddull arbennig Bydd yma dim ond yn berthnasol yn y canol bod tag gyda'r ID unigryw o. 

Gallwch hefyd wneud rhywbeth a elwir yn detholydd dosbarth. Felly, yn ogystal â bod ID priodoleddau, gallwch hefyd ychwanegu priodoledd dosbarth i tagiau HTML. A phan fyddwch yn defnyddio priodoledd dosbarth, gellir ei gymhwyso i tagiau lluosog. Felly os oes gennych nifer o bethau y yn debyg, efallai eich bod am ei ddweud, blah tag agored, blah, blah, blah, dosbarth hafal myfyrwyr. Ac yna mae hyn arbennig Byddai arddull wneud cais i bob tag y mae eu dosbarth yn fyfyrwyr. Yn yr achos hwn, byddem yn gosod y lliw cefndir i melyn, a byddem yn gosod dywyllach, a oedd yn yw tag doedden ni ddim yn siarad am, ond dim ond yn ymdrin â sut dryloyw rhywbeth yw, i 70%, yn yr achos hwn. 

Mae dau ddewis ar gyfer arddull ysgrifennu. Gallwch eu ysgrifennu yn uniongyrchol i mewn i'ch HTML drwy osod y arddull rhwng tagiau arddull. A thagiau arddull y rhai yn mynd y tu mewn o y tagiau pennaeth eich tudalen we. Y ffordd efallai yn fwy dewisol i'w wneud y mae i ysgrifennu ffeil .css ar wahân, ac yna gysylltu i mewn i'ch dogfennu ddefnyddio tagiau cyswllt. Tagiau Link, unwaith eto, yn cael eu yn wahanol i hypergysylltiadau, os cofiwch oddi ein fideo yn HTML. A thagiau cyswllt yn sut yr ydym tynnu mewn ffeiliau ar wahân. Mae'n fath o fel yr hyn sy'n cyfateb y #include ar gyfer rhaglennu ar y we. 

Felly, gadewch i ni edrych ar table.HTML. Os cofiwch gan ein HTML fideo, yr wyf yn dangos enghraifft o iawn lluosi syml tabl a oedd yn edrych 'n bert hyll, ac efallai mae ' ffordd i'w gwneud yn well gyda CSS, i'w gwneud yn mewn gwirionedd yn edrych fwy fel lluosi bwrdd, neu rywbeth nad yw'n cael ei sownd at ei gilydd yn unig heb unrhyw rhaniad gwirioneddol rhwng y rhesi a'r colofnau. Felly gadewch i ni ben ar at CS50 IDE, ac yn edrych ar sut y gall CSS, rhyw fath o, tweak yr hyn rydym yn dechrau gyda blaen, a'i wneud yn rhywbeth llawer gwell. 

Felly rydym yn yn CS50 IDE erbyn hyn, ac os anghyfarwydd, byddwn yn tynnu i fyny yn hyn tabl y dudalen honno HTML. Table.HTML y bôn jyst yn diffinio'r cynnwys o multiple-- yr oedd i fod i fod yn tabl pedwar gan bedwar lluosi. Mae'n eithaf syml. A byddem yn meddwl y byddai'n edrych drefnu'n eithaf da. Ond mewn gwirionedd, pan fyddwn yn rhagolwg y dudalen hon, gwelwn ei fod yn fath o hyll, dde? Yn amlwg mae gennym rhesi a cholofnau yma. Mae rhyw fath o wahanu. Ond nid yw'n gwahaniad ystyrlon. Nid ydym yn ei gael mewn gwirionedd gormod o wybodaeth yma. A does dim gwahaniad rhwng y rhesi a cholofnau mewn termau o reolau llorweddol neu'n fertigol. Mae'n debyg y gallem wneud hyn edrych ychydig yn well. Felly gadewch i ni geisio. Felly, yr wyf i'n mynd i gau y tab hwn i fyny yma. Ac yr wyf i'n mynd i gau fy table.HTML, ac mae gen i fersiwn arall yma Gelwir table2.HTML. Byddwn yn agor bod hyd. Mae corff y dudalen hon yn 'n bert lawer yr un fath, ond rwyf wedi newid ychydig bach ar y brig. A byddaf sgrolio i fyny yma. Sylwch fod yr amser hwn, rwy'n ddefnyddio tagiau arddull wreiddio. Rydw i wedi agor tag arddull, ac rwy'n awr diffinio steil CSS ychydig y tu mewn ohono. Mae gen i arddull sy'n dweud, bwrdd. Dyna fy dewisydd tag. Dydw i ddim yn defnyddio dot neu hash, y byddwn yn ei wneud os byddaf Roedd gan ddefnyddio ID neu detholydd dosbarth. Mae gen i dabl Yma-- dewisydd tag. Mae'r arddull yn mynd i yn gymwys i bob tag bwrdd. Mae'n debyg yr wyf am roi un picsel o led, ar y ffin glas solet, y tu mewn fy mwrdd. Mae hynny'n swnio fel y byddai'n fwy na thebyg helpu'r sefyllfa, dde? Rydym yn mynd i gael pethau edrych yn llawer gwell. Felly mae hyn yn iawn. Arddull, rwyf wedi dim ond gwreiddio fy arddull yn fan hyn. Mae'n bendant yn ffordd dderbyniol i wneud hynny. Gadewch i ni weld beth mae hyn yn edrych fel. Felly, byddaf yn mynd yn ôl i lawr yma, ac 'N annhymerus' Bydd rhagolwg fy table2.HTML. Wel, nid yw hynny'n hollol beth roeddwn eisiau, ond mae'n union yr hyn y gofynnodd yr ydym am. Rydym yn dweud bod y dull hwn yn mynd i wneud cais i ein bwrdd. Erbyn hyn mae gan ein bwrdd o un picsel eang y ffin glas, solid o'i gwmpas. Nid ydym yn ei gael mewn gwirionedd yn y celloedd y tabl. Rydym yn dim ond mynd wrth y bwrdd. Felly gweithiodd CSS. Mae wedi cymhwyso taflen arddull at ein bwrdd. Ond nid oedd yn eithaf yn ei wneud yr hyn yr ydym am ei wneud. Sut ydym yn cael i wneud yr hyn yr ydym am iddo ei wneud? 

Wel, gadewch i ni edrych ar un yn fwy Fersiwn o hyn yn table3.HTML. Felly Im 'jyst yn mynd i gau tabiau hyn. Rydw i'n mynd i fynd yn ôl dros yma at fy ffeil coed, ac yn agor i fyny table3.HTML. Unwaith eto, mae'n mynd i edrych yn bert tebyg yma ar y dechrau. Ond rhybudd, y tro hwn, yn hytrach na defnyddio dalen steil hymgorffori i'r dde i mewn 'na, Rydw i'n mynd i gysylltu mewn arddull gan ddefnyddio'r tag ddolen. Felly rwy'n yn ôl pob golwg yn cysylltu mewn arddull a elwir yn tables.CSS, ac yn dychwelyd dda hon arddull unig yw-- yn dda, beth yw ffeil hwn gymharu â beth Rwy'n doing-- yn arddull fy mod ddefnyddio ar gyfer fy dudalen. Felly os Fi 'n sylweddol am weld beth Rwy'n gwneud gyda'r CSS yma, Angen i mi fynd yn agored bod table.CSS ffeil hefyd. Felly, byddwn yn mynd yn ôl dros yma unwaith eto at ein coeden ffeil. Mae table.CSS. Byddwn yn pop ar agor. Nawr rydym yn gweld ychydig o'r CSS. Mae'n debyg, mae gen i gwpl o bethau yn digwydd yma. Rwyf yn ôl pob golwg yn awyddus i roi pump picsel o led, border coch solet, o amgylch fy mwrdd. Rydym eisoes yn gwybod bod hynny'n mynd i ddim ond mynd ar y perimedr. Gwelsom hynny yn table2.HTML. Gyda mhob rhes, yr wyf yn yn ôl pob golwg yn awyddus i bennu bod uchder rhes yn 50 picsel uchel. Felly, ar gyfer pob rhes, cofiwch dyna beth y tag tr ei wneud, Im 'yn ei gwneud yn 50 picsel uchel. 

Yn olaf, mae gennyf y sylw hwn. Ac mae hyn yw sut yr ydym yn gwneud sylwadau yn CSS. Mae'n debyg iawn i atafaelu bloc Sylwadau seren slaes chystrawen. Mae'r holl y testun rydych ei eisiau. Does dim slaes slaes er yn CSS. Ar gyfer sylwadau unol fyr, rydym wedi i ddefnyddio'r fformat penodol yma. Mae'n edrych fel fy mod yn gwneud yn llawer o bethau yn fy tagiau td. Cofiwch tagiau TD, neu dabl data, sydd mewn gwirionedd yn unig y colofnau tu mewn ein rhesi, ac i bob golwg ar gyfer pob darn o ddata yn fy bwrdd, yr wyf am i osod y lliw cefndir i fod yn ddu, y lliw i fod yn wyn, lliw yn lliw blaendir. Felly, mae hyn yn mynd i fod destun fy dudalen. Rwyf am ffont mawr, 22 pwyntio ffont, ac yr wyf am ei fod o'r teulu ffont, Georgia. Felly, nid wyf ddim yn mynd i yn cael y ffont rhagosodedig. Rydw i'n mynd i bennu Georgia, a oedd yn yn un o'r rhai we ffontiau diogel ein bod ni wedi ei weld o'r blaen. Rwyf am fy testun i gyd-fynd yn ganolog, yng nghanol y blwch, Nid wyf am iddo gael ei adael alinio neu alinio i'r dde. Ac yr wyf am i fy lled y golofn i fod yn 50 picsel o led hefyd. Gadewch i ni edrych ar beth mae hyn yn edrych fel, i weld os yw hyn yn bosib yn welliant. Felly, yr wyf i'n mynd i fynd i table3.HTML, a oedd yn dwyn i gof, yn cynnwys table.CSS fel cyswllt, a byddwn yn rhagolwg ei. Mae hynny'n llawer gwell, dde? Mae hyn mewn gwirionedd yn dechrau edrych yn llawer mwy fel tabl lluosi. Mae gen i fod ffin coch o amgylch fy mwrdd ond erbyn hyn Rwyf hefyd wedi nodi y pob rhes yn 50 picsel o led, neu ei fod yn 50 picsel tall-- esgus me-- pob colofn yn 50 picsel o led. Mae'r data ym mhob colofn, a dim ond y data, gefndir du. Felly dyna pam y rhai llinellau gwyn yno. Oherwydd bod y gofod yn rhwng yr holl gelloedd hynny, Nid ei fod yn ffin yn ac o ei hun, 'i' jyst Im 'dim ond llenwi'r celloedd, sydd mewn gwirionedd yn gwneud y ffiniau y tabl, a oedd yn mae'n debyg yn bodoli ar hyd, mae'n Roedd llinellau gwyn yn unig tenau. Nawr maen nhw'n weladwy. Erbyn hyn maent pop i ffwrdd ar y sgrin. Ac felly mae hyn yn syml iawn arddull yr wyf wedi gwneud cais, ac yn awr fy mwrdd yn edrych yn llawer mwy tebyg tabl pedwar gan bedwar lluosi, yn hytrach na dim ond llanast blêr, lle popeth yn rhesi a cholofnau yn glir, ond drefnu'n nid super dda. Rydym yn wir yn unig crafu'r wyneb o'r hyn y gallwch ei wneud gyda'r CSS yma. Yn ffodus y ddogfennaeth CSS yn eithaf syml. Byddwch yn defnyddio sawl un o'i priodoleddau, yn deg yn aml. Y rhai yr ydym yn siarad am yn gynharach yn y fideo hwn. Mae sawl bod chi Mae'n debyg na fydd yn defnyddio pob. Ac mae hynny'n iawn, hefyd. Ond dim ond yn gwybod, bod yna llawer o ddogfennau i maes 'na. Felly hyd yn oed os nad oeddem yn cwmpasu popeth, Yn sicr, nid ydych yn gadael ar eich pen eich hun. Ond mae CSS yn llawer o hwyl i arbrofi gyda. A byddwn yn eich annog yn gryf i chwarae o gwmpas gyda eich tudalennau gwe, a gweld sut y gallwch eu gwneud edrych ac yn teimlo i wella'r defnyddiwr profiad o ymweld eich tudalen. Rwy'n Doug Lloyd. Mae hyn yn CS50.