[Ag seinm ceoil] 

DOUG LLOYD: Mar sin a ligean ar ghlacadh amháin níos mó físeán chun labhairt faoi theanga amháin níos mó. An uair seo beidh muid ag labhairt faoi CSS. Mar sin, CSS, atá gearr do Cascáideacha Stílbhileoga, Is teanga eile a úsáidimid nuair gréasáin a thógáil. Smaoineamh air mar seo. Má tá HTML cad a úsáid againn a eagrú an ábhar a ba mhaith linn a chur ar ár leathanach, Is CSS an uirlis a úsáid againn go ginearálta a shaincheapadh conas a fhéachann ár láithreáin ghréasáin, agus conas an taithí úsáideora i ndáiríre is é, idirghníomhú lenár láithreán gréasáin. 

Cosúil le HTML, CSS is Ní teanga cláir. Ní chuireann sé loighic. Ní chuireann sé athróg. Ní chuireann sé aon saghas sin sreabhadh rudaí a bhaineann go ndéanann C. Tá sé ina teanga styling. Agus is é a error deas simplí, agus díreach síos conas na gnéithe ar ár leathanach bhfuil HTML áirithe Ba cheart na heilimintí a mhodhnú. Chun na críche sin, más rud é nach bhfuil tú fós faire ár físeán ar HTML, nó cur amach acu HTML go ginearálta, tú B'fhéidir gur mhaith a chur le breathnú ar sin an chéad, mar gheall ar an plé ar CSS ag dul ag brath ar eolas éigin acu ar HTML. 

Mar sin, tá anseo i ndáiríre stílbhileog CSS simplí. Fiú má riamh atá tú cláraithe leis an CSS roimh, Tá mé cinnte go leor is féidir leat a dhéanamh amach go díreach cad a dhéanann an stílbhileog. Cad a dhéanann sé? Bhuel, i bhfeidhm ar an comhlacht ar ár ngréasán leathanach, rud idir clibeanna comhlacht ar ár HTML, agus leagann sé an dath cúlra den leathanach a gorm. Bhuel, tá sé ina stílbhileog-simplí. Tá sé i ndáiríre an-an duine teanga chairdiúil, CSS. Mar sin, fiú má tá tú riamh a úsáidtear é roimh, d'fhéadfaí tú a buille faoi thuairim is dócha cad a rinne sin. Go deimhin, má táimid ag luchtú leathanach, i gcás ina Bhí leabaithe an stílbhileog bhealach, an dath cúlra ár leathanach bheadh a bheith gorm, agus nach bhfuil an caighdeán bán. 

Mar sin, conas is féidir linn a thógáil stílbhileoga? Bhuel ar dtús, ní mór dúinn a roghnóir aithint. Sa sampla seo caite, Bhí go roghnóir comhlacht. Ansin, ní mór dúinn oscailte brace curly, agus táimid ag dul go dtí tús a shainiú stílbhileog don roghnóir. I idir na braces gcuach, táimid ag ach tá liosta de eochair péirí luach. Ba é an péire luach roimhe dath cúlra leathstad gorm, ach d'fhéadfaí linn a dhéanamh níos mó agus níos mó de na. D'fhéadfá a bhfuil rudaí éagsúla a chur i bhfeidhm leis chlib, an comhlacht sin roghnóir. Gach ceann acu Tá scartha le leathstad, agus tugaimid gach ceann acu dearbhú, dearbhú CSS. Nuair a bhíonn muid ag déanamh le gach linn a styling ag iarraidh iarratas a dhéanamh leis an chlib áirithe, ní mór dúinn ach chatach deiridh brace go dtí deireadh an stílbhileog, agus táimid ag déanamh a shainiú an stílbhileog don roghnóir áirithe. 

Cad iad roinnt airíonna CSS coitianta? Bhuel, b'fhéidir gur mhaith leat a chur teorainn timpeall ar rud éigin. Sin, is féidir leat a rá, teorann, bheadh ​​do eochair, agus ansin go mbeadh do na luachanna bheith, cad a stíl, dath, agus leithead ba mhaith leat é a bheith. Mar sin, d'fhéadfadh an stíl a bheith soladach líne, líne dotted, líne dashed, líne iomaire, bheadh ​​ag teacht wavy. B'fhéidir gur mhaith leat a bheith acu air a bheith gorm nó dubh nó glas. B'fhéidir gur mhaith leat é a bheith 1 nó 2 nó 10 pixel leathan. Is féidir leat a shonrú ar gach ceann de na rudaí. B'fhéidir gur mhaith leat a shocrú ar an cúlra dath do leathanach ar bhealach ar leith. Chonaic muid cheana féin go bhfuil, ag leagan an cúlra de chuid an chomhlachta a bheith gorm. 

Ansin, is féidir leat é a úsáid focal eochair, mar sin tá dathanna áirithe CSS atá tógtha isteach é, gorm, glas, dubh, dathanna an-simplí a fhios againn. Ach is féidir leat a shonrú freisin ar aon dath heicsidheachúlach go mhaith leat. Chun cuimhne gur féidir le dathanna a aithint le sraith de trí uimhir heicsidheachúlach 0-255, rg agus b, an dearg, glas, agus gorm a chomhdhéanann í. Agus mar sin is féidir linn a shonrú dath ar bith is mian linn a trí, seachas úsáid a bhaint gorm nó glas nó dubh, ag baint úsáide as punt agus ansin sé dhigit de heicsidheachúlach, agus go mbeadh a thabhairt dúinn an dath sé dhigit. Mar sin, go bhfuil an dath cúlra. 

Tá an tulra againn freisin dath, a bhfuil de ghnáth ag dul a bheith ar an téacs ar do leathanach. Agus d'fhéadfaí tú a dhéanamh dul céanna go le focal eochair agus nó sé heicsidheachúlach dhigit. Mar sin, is féidir leat a shonrú ar aon dath tú Ba mhaith le haghaidh an téacs ar do leathanach aghaidh ar leith dath cúlra, suas thuas. Is féidir leat freisin agus déileáil le cló, agus an bealach téacs Tá a rinneadh ar an leathanach. 

Mar sin, is féidir leat athrú ar do clómhéid. Is féidir leat é a úsáid eochairfhocail, mar shampla breise, breise beag, nó xx beag, nó trí mheán, mór, agus mar sin de. Is féidir leat é a úsáid pointí seasta, 10 pointe, 12 pointe, agus mar sin de. Is féidir leat é a úsáid céatadáin, 80%, 20%, nuair atá 100% an cló réamhshocraithe méid, atá ag dul de ghnáth chun a bheith rud éigin cosúil le 11 nó 12 pointí. Nó is féidir leat bonn fiú sé amach an chlómhéid is déanaí. Má scríobh tú ach rud éigin agus tá a fhios agat cad ba mhaith leat go bhfuil do é a bheith níos lú, ach níl a fhios agat go díreach cén méid tú iarraidh é a bheith, go maith, is féidir leat ach a rá, clómhéid níos lú. Agus beidh sé bonn as an, ach suas thuas, tá sé méid an chló. Agus is féidir leat a fháil níos lú nó níos mó. Mar sin níl a lán de éagsúla bealaí a shonrú clómhéid. 

Is féidir leat a shonrú freisin cad teaghlach cló mian leat. Má tá tú ar leith ainm, níl ar bhealach i CSS-- nach bhfuil muid ag dul chun labhairt faoi sé here-- cló an-sonrach a shainiú agus leabú isteach i do leathanach. Is féidir leat úsáid a bhaint freisin ainmneacha cineálach. Níl a lán de na clónna sábháilte gréasáin atá réamh-sainmhínithe in CSS. Agus má tá tú i d'úsáideoir de Microsoft Oifig sa 20 bliain anuas, bhfuil tú eolach is dócha a lán de na clónna sábháilte gréasáin cheana, Times New Roman, Arial, Courier Nua, Georgia, Tahoma, Verdana, agus mar sin de. Glacfar a mheas go léir gréasáin clónna sábháilte. Agus ar ndóigh,, mar chuid de na cúis tháinig siad chun bheith bhí a bheidh le húsáid chun web-- gach leathanach Bhí rochtain ar an réamhshocraithe a shocraítear na gclónna le serifs éagsúla, agus tá sé seo go léir stuif cló ní beidh muid ag dul isteach, ach tá siad seo de ghnáth inrochtana i do CSS, fiú amháin mura bhfuil tú a shainiú ar shlí eile na clónna. Ar deireadh, is féidir leat a chur ar chomhréim do téacs, in ionad é a bheith, de réir réamhshocraithe, ailínithe ar an taobh clé, d'fhéadfaí tú sé ailíniú leis an gceart, nó d'fhéadfaí tú a chur ar chomhréim dírithe é, nó údar ionas gur bhuail sé an dá corrlaigh. Mar sin, siúd go léir roghanna is féidir leat é a úsáid a athrú ar conas mar a bhreathnaíonn do téacs cosúil le, agus conas tá sé ar taispeáint ar do leathanach. 

Nach bhfuil do chuid roghnóirí a bheith clibeanna amháin. Chonaic muid cheana tag comhlacht roghnóir, agus tag roghnóir Ní breathnú díreach mar sin. Ainm duit a tag, agus ansin tú stílbhileog don chlib shainmhíniú. Ach is féidir leat a dhéanamh freisin rud éigin dtugtar roghnóir ID. Breathnaíonn an roghnóir ID leor den chineál céanna. Ach faoi deara, go anois nach bhfuil mé ag baint úsáide as clib HTML, tá mé ag baint úsáide as, sa chás seo, #unique, nó hash ar leith. Má tá tú chun cuimhne as ár físeán ar HTML, labhair muid faoi ​​conas is féidir clibeanna bhfuil tréithe. 

Agus go bhfuil feidhm ag tréith amháin go leor i bhfad gach tags HTML, ach ní raibh muid labhairt faoi, Is rud ar a dtugtar clib ID. Mar sin, bheadh ​​an CSS ar leith ach amháin maidir le tag HTML go bhfuil le haitheantas an-sonrach, go atá tú ainmnithe. Mar sin, má tá tú áit éigin i do chód, áit éigin i do chomhad HTML, tag agus tú a shonrú mar an tréith leis chlib, Ionann le haitheantas ar leith, seo stílbhileog ar leith Beidh feidhm aige ach amháin anseo i idir go chlib leis an ID de uathúil. 

Is féidir leat a dhéanamh freisin rud éigin dtugtar roghnóir ranga. Mar sin, chomh maith le bheith ID tréithe, is féidir leat freisin add a tréith rang chun clibeanna HTML. Agus nuair a úsáideann tú tréith ranga, is féidir é a chur i bhfeidhm chun tags il. Mar sin, má tá tú rudaí éagsúla go Tá chineál céanna, b'fhéidir gur mhaith leat a rá, tag oscailte blah, blah, blah, blah, is ionann rang mac léinn. Agus ansin seo go háirithe Bheadh ​​feidhm ag stílbhileog gach tag a bhfuil a rang is mac léinn. Sa chás seo, ba mhaith linn a leagtar ar an dath cúlra buí, agus ba mhaith linn a leagtar teimhneacht, a Is tag ní raibh muid labhairt faoi, ach amháin dhéileálann le cé chomh trédhearcach Tá rud éigin, go 70%, sa chás seo. 

Níl dhá rogha stílbhileoga scríbhneoireachta. Is féidir leat iad a scríobh go díreach isteach i do HTML trí na stílbhileoga i idir clibeanna stíl. Agus iad siúd clibeanna stíl dul taobh istigh de na clibeanna ceann de do leathanach gréasáin. An bealach b'fhéidir níos fearr a dhéanamh tá sé a scríobh comhad .css ar leith, agus ansin nascadh isteach i do dhoiciméadú ag baint úsáide as clibeanna nasc. Clibeanna Nasc, arís, tá difriúil ó hipearnasc, má tá tú chun cuimhne as ár físeán HTML. Agus tá clibeanna nasc conas a tarraingt i gcomhaid ar leithligh. Sé saghas cosúil comhionann an #include do chláir gréasáin. 

Mar sin, a ligean ar ghlacadh le breathnú ar table.HTML. Má tá tú chun cuimhne as ár Físeán HTML, thaispeáin mé sampla de an- iolrú simplí tábla gur fhéach deas gránna, agus b'fhéidir níl ar bhealach a dhéanamh níos fearr é le CSS, a dhéanamh breathnú sé i ndáiríre níos mó cosúil le iolraithe tábla, nó rud éigin nach bhfuil bhfostú go díreach le chéile gan aon roinn iarbhír idir na sraitheanna agus colúin. Mar sin, a ligean ar ceann ar aghaidh go dtí CS50 IDE, agus a chur le breathnú ar conas is féidir CSS, saghas, tweak cad a thosaigh muid le roimh, agus é a dhéanamh ar rud éigin a lán níos fearr. 

Mar sin, tá muid i CS50 IDE anois, agus más rud é neamhchoitianta, beidh orainn a tharraingt suas sa tábla go leathanach HTML. Table.HTML bunúsach ach Sainmhíníonn an t-ábhar de multiple-- bhí sé ceaptha a bheith tábla ceithre ag ceithre iolrú. Tá sé deas simplí. Agus ba mhaith linn a cheapann go mbeadh sé breathnú maith go leor eagraithe. Ach i ndáiríre, nuair a réamhamharc táimid ag an leathanach seo, feicimid go bhfuil sé de chineál ar gránna, ceart? Is léir ní mór dúinn sraitheanna agus colúin anseo. Tá de chineál éigin scaradh. Ach nach bhfuil sé ina scaradh brí. Nach bhfuil muid ag dul go hiarbhír i bhfad ró-eolais anseo. Agus níl aon scaradh idir na sraitheanna agus colúin i dtéarmaí rialacha cothrománacha nó ingearach. D'fhéadfadh muid a dhéanamh is dócha seo cuma beagán beagán níos fearr. Mar sin, a ligean ar iarracht. Mar sin, tá mé ag dul a dhúnadh ar an cluaisín suas anseo. Agus tá mé ag dul a dhúnadh mo table.HTML, agus tá mé leagan eile anseo ar a dtugtar table2.HTML. Beidh muid ag oscailt suas. Is é an comhlacht ar an leathanach go leor i bhfad mar an gcéanna, ach tá d'athraigh mé beagán ag an mbarr. Agus beidh mé scrollú suas anseo. Fógra go an am seo, tá mé ag baint úsáide as clibeanna stíl leabaithe. Tá mé oscail tag stíl, agus tá mé anois saineofar stílbhileog CSS díreach taobh istigh de é. Tá mé stílbhileog a deir, tábla. Sin mo roghnóir tag. Níl mé ag baint úsáide as ponc nó hash, a ba mhaith liom a bheith ag déanamh má mé Ba ag baint úsáide as ID nó roghnóir ranga. Tá mé tábla here-- tag roghnóir. Tá an stíl ag dul go dtí le gach chlib tábla. Cosúil Ba mhaith liom a chur ar ceann picteilín leathan, teorann gorm soladach, taobh istigh mo tábla. Sin fuaimeanna cosúil go mbeadh sé is dócha le cuidiú leis an scéal, ceart? Táimid ag dul a bheith acu rudaí a breathnú ar a lán níos fearr. Mar sin, tá an fhíneáil seo. Stíle, tá mé díreach tar éis leabaithe mo stílbhileog i anseo. Tá sé cinnte bhealach inghlactha chun é a dhéanamh. A ligean ar a fheiceáil cad Breathnaíonn seo cosúil. Mar sin, beidh mé ag dul ar ais síos anseo, agus Feicfidh mé a réamhamharc ar mo table2.HTML. Bhuel, ní go maith cad a bhí mé, ach tá sé go díreach cad a d'iarr muid le haghaidh. Dúirt muid go bhfuil an stíl dul chun iarratas a dhéanamh ár tábla. Tá ár tábla anois picteilín amháin leathan, teorainn gorm soladach timpeall air. Nach bhfuil muid ag dul go hiarbhír ag na cealla tábla. Táimid ag dul go díreach ag an tábla. Mar sin, d'oibrigh CSS. Tá sé tar éis i bhfeidhm ar Stílbhileog go dtí ár tábla. Ach ní raibh a dhéanamh go leor cad a bhí muid é a dhéanamh. Conas is féidir linn a fháil a dhéanamh cad ba mhaith linn é a dhéanamh? 

Bhuel, a ligean ar ghlacadh le breathnú ar amháin níos mó leagan den in table3.HTML. Mar sin, tá mé ag dul díreach tar éis a dhúnadh na tabs. Tá mé ag dul chun dul ar ais thar anseo go dtí mo comhad crann, agus oscailt suas table3.HTML. Arís, tá sé ag dul chun breathnú go leor den chineál céanna anseo ag an tús. Ach fógra, an uair seo, seachas úsáid a bhaint stílbhileog leabaithe ceart i ann, Tá mé ag dul chun nasc i stílbhileog ag baint úsáide as an chlib nasc. Mar sin, tá mé ag nascadh cosúil i stílbhileog dtugtar tables.CSS, agus is ionann seo go maith stílbhileog means-- ach go maith, cad é an comhad seo i gcomparáid leis an méid a Tá mé doing-- is stílbhileog go bhfuil mé ag baint úsáide as do mo leathanach. Mar sin, más mian liom a fheiceáil cad Tá mé ag déanamh leis an CSS anseo, Gá dom dul oscailte table.CSS comhad chomh maith. Mar sin, beidh muid ag dul ar ais thar anseo arís go dtí ár crann comhad. Níl table.CSS. Beidh muid pop sé ar oscailt. Anois, tá muid ag feiceáil beagán den CSS. Réir dealraimh, tá mé cúpla de rudaí ag dul ar anseo. Ba mhaith liom cosúil a chur cúig picteilín leathan, teorann dearg soladach, thart ar mo tábla. Tá a fhios againn cheana féin go bhfuil go bhfuil ag dul chun dul go díreach ar an imlíne. Chonaic muid go bhfuil i table2.HTML. Le gach as a chéile, mé cosúil ag iarraidh a shonrú go bhfuil an airde a chéile 50 pixel ard. Mar sin, le haghaidh gach as a chéile, cuimhnigh go bhfuil an méid a dhéanann an chlib tr, Tá mé ag déanamh sé 50 pixel ard. 

Ar deireadh, tá mé an comment. Agus is é seo conas a dhéanamh linn tuairimí i CSS. Tá sé an-chosúil bloc a urghabháil Tuairimí error réalta Slais. Gach an téacs is mian leat. Níl aon Slais Slais cé sa CSS. Chun tuairimí inlíne gearr, ní mór dúinn seo a úsáid bhformáid ar leith anseo. Tá sé cosúil Tá mé ag déanamh lán rudaí i mo clibeanna td. Cuimhnigh tags td, nó tábla sonraí, a bhfuil i ndáiríre ach na colúin taobh istigh de ár sraitheanna, agus is cosúil i gcás gach píosa sonraí i mo tábla, ba mhaith liom a shocrú ar an dath cúlra a a bheith dubh, an dath a bheith bán, Tá dath dath tulra. Mar sin, tá sé seo ag dul a bheith an téacs ar mo leathanach. Ba mhaith liom cló mór, 22 pointe cló, agus ba mhaith liom é a bheith ar an teaghlach cló, Georgia. Mar sin, ní mé ag dul a Tá an cló réamhshocraithe. Tá mé ag dul a shonrú tSeoirsia, a Is é ceann de na clónna sábháilte gréasáin go atá feicthe againn roimh. Ba mhaith liom mo téacs a ailíniú go lárnach, i lár an bhosca, Níl mé ag iarraidh é a bheith fágtha ailínithe nó ceart ailínithe. Agus ba mhaith liom mo leithead colún a bheith 50 pixel leathan chomh maith. A ligean ar ghlacadh le breathnú ar cad Breathnaíonn seo cosúil, agus a fheiceáil má tá sé seo b'fhéidir feabhas. Mar sin, tá mé ag dul chun dul go dtí table3.HTML, a Áirítear cuimhne, table.CSS mar nasc, agus beidh orainn réamhamharc air. Sin a lán níos fearr, ceart? Tá sé seo ag tosú i ndáiríre chun breathnú ar lán níos mó cosúil le tábla iolraithe. Tá mé go teorainn dearg thart ar mo tábla ach anois Mé a shonraítear freisin go tá gach sraith 50 pixel leathan, nó tá sé 50 pixel tall-- leithscéal Is me-- gach colún 50 pixel leathan. Na sonraí i ngach colún, agus gan ach na sonraí, tá chúlra dubh. Mar sin tá sin an fáth iad siúd Tá línte bána ann. Mar gheall ar an spás i idir gach ceann de na cealla, nach bhfuil sé teorainn i agus de féin, tá sé ach Níl mé ach ag líonadh an cealla, a iarbhír Déanann na teorainneacha an tábla, a cosúil raibh ann go léir chomh maith, sé Bhí línte bán díreach tanaí. Anois tá siad le feiceáil. Anois pop siad amach ar an scáileán. Agus mar sin tá sé seo an-simplí stílbhileog go bhfuil mé i bhfeidhm, agus anois tá mo tábla a lán níos mó cosúil le tábla ceithre ag ceithre iolrú, seachas ina praiseach díreach jumbled, i gcás ina tá gach rud soiléir sraitheanna agus colúin, ach ní Super eagraithe go maith. Táimid ag i ndáiríre ach scratching an dromchla ar cad is féidir leat a dhéanamh le CSS anseo. Fortunately an doiciméadú CSS Is deas simplí. Feicfidh tú úsáid a bhaint as roinnt dá tréithe, go cóir go minic. Na cinn labhair muid faoi níos luaithe i físeán seo. Tá roinnt go bhfuil tú Ní bheidh is dócha a úsáid go léir. Agus sin fíneáil, freisin. Ach tá a fhios go díreach, go bhfuil a lán de na doiciméid amach ann. Mar sin, fiú amháin más rud é nach raibh muid a chlúdach gach rud, bhfuil tú ag cinnte nach bhfuil fágtha ar do chuid féin. Ach tá CSS i ndáiríre spraoi chun triail. Agus ba mhaith liom a spreagadh go láidir duit a imirt ar fud le do leathanaigh ghréasáin, agus a fheiceáil conas is féidir leat iad a dhéanamh cuma agus mothú chun feabhas a chur ar an úsáideoir taithí ar cuairt ar do leathanach. Tá mé Doug Lloyd. Is é seo an CS50.