[Powered by Google Translate] [CSS] [Joseph Ong - Ollscoil Harvard] Is é [seo CS50. - CS50.TV] 

Inniu beidh muid ag caint faoi CSS nó Stílbhileoga Cascáideacha. 

Mar sin, cad é go díreach CSS? Bhuel, a ligean ar briseadh an CSS téarma síos i 2 chuid: Cascáideacha agus Stílbhileoga. Cascáidiú bhfuil beagán níos casta, agus tá sé rud éigin beidh muid ag clúdach i gceann eile físeáin. Ach do starters, Stílbhileoga leideanna mór ar an méid a dhéanann CSS. Tá sé stíleanna cuirtear le HTML ar leathanach gréasáin, atá ag athrú conas Breathnaíonn an leathanach gréasáin aesthetically. Ciallaíonn sé seo gach rud ó an cló ar an téacs ar an suíomh an t-ábhar ar an leathanach chun rudaí fionnuar eile ar nós a dhéanamh ar an choirnéal de bhosca chothromú nó scáthanna cur leis an téacs. Is féidir leat a dhéanamh fiú rudaí dÚsachtach cosúil le rudaí a dhéanamh bheochan ar an scáileán. 

Mar sin, conas is féidir linn úsáid a bhaint as CSS le HTML? Tóg an suíomh seo droch-lorg a scríobh mé díreach. Má bhí Rob chun breathnú ar an suíomh anois, bhfuigheadh ​​sé a rá dócha rud éigin cosúil le, "Wow Breathnaíonn! Mo a thabhairt isteach uafásach. Joseph, tá tú dearthóir uafásach." "Ag baint úsáide as an réamhshocraithe Times cló? Tá Helvetica sin i bhfad níos fearr." 

Mar sin, d'fhéadfadh a bheith cad é an bealach is simplí a chur i bhfeidhm an styling Rob ag iarraidh? An leor bealach is soiléire de na daoine a scríobh ar dtús CSS Bhí a chur cad tugaimid dearbhuithe stíl an gceart sin sa ghné féin baint úsáide as an tréith stíl HTML. Maidir le dearbhú stíl comhdhéanta ach an eilimint HTML mhaoin CSS ba mhaith linn a athrú ina dhiaidh sin ag colon le leanúint ag an luach nua na maoine agus leathstad ag an deireadh. Mar shampla, a rá a ligean ar Rob mian le teorainn dubh thart ar a thabhairt isteach. Chuir muid ar dtús leis an tréith stíl ar div Rob s anseo ansin taobh istigh Sleachta dúbailte a chur le dearbhú CSS: "Teorann: dubh soladach 1px;" Tagraíonn an picteilín 1 do leithead na teorann, tagraíonn an solad leis an stíl na teorann, agus go gcinnfidh an dath ag an deireadh cad é an teorainn ar dath. 

Más mian linn stíleanna éagsúla ar gné, scríobh na dearbhuithe in ord. Mar shampla, más mian le Rob a téacs header i Helvetica le cúlra gorm agus spás níos mó ar fud an téacs, is féidir linn é seo a dhéanamh: stíl = "font-teaghlaigh: Helvetica; cúlra-dath: gorm; stuála: 5px;" Is é an leathstad deireanach i ndáiríre roghnach, ach daoine a choinneáil de ghnáth é i le comhsheasmhacht ar mhaithe. 

Beidh muid ag míniú a shábháil ar roinnt de na with agus níos casta airíonna CSS do dhuine eile físeáin. Má tá tú rud éigin i gcuimhne, Googling ach an éifeacht is mian leat leanúint ag CSS Beidh is dócha a thabhairt duit torthaí maith go leor. Is é an rud cool go bhfuil CSS go leor leathan, mar sin tá odds má tá aon rud is mian leat a dhéanamh - laistigh de bharr - Is féidir le CSS a dhéanamh is dócha é. Tugaimid den chineál seo styling styling inlíne. Tá an stíl eilimint, go maith, ag teacht leis an chlib tús. 

Do folks atá ag iarraidh i ndáiríre a bheith eagraithe, go dtiocfadh leat tosú ag fáil beagán peeved ar conas messy seo Breathnaíonn go léir. Samhlaigh má bhí tú é seo a dhéanamh le haghaidh gach gné ar an leathanach, móide anois do HTML agus CSS go bhfuil measctha agus cluttered go léir. Oll-, ceart? Chun seo a shocrú, thosaigh daoine sa deireadh ag teacht ar a scaradh a gcuid HTML marcáil as styling n-CSS trí úsáid a bhaint rud ar a dtugtar unused CSS. Unused CSS a úsáidtear a roghnú gnéithe a dearbhuithe sin i bhfeidhm. Tá roghnóir mar aon le liosta de na dearbhuithe CSS dá minic mar riail CSS. Bheadh ​​na rialacha seo a chur idir oscailte agus gar clibeanna stíl HTML, go minic i gceannas ar an doiciméad. 

Tá sé i bhfad níos éasca a fheiceáil le sampla, mar sin a ligean ar tús a chur le a chruthú simplí CSS riail. Gcéad dul síos, a ligean ar chur clibeanna stíl sa rannóg ceann dár HTML. Next, an roghnóir. Beidh muid tús a chur amach trí úsáid a bhaint ceann de na roghnóirí simplí, an tsiombail hash, a roghnaíonn gné HTML ag a tréith ID. Sa chás seo beidh muid ag roghnaigh an div gur ionann tabhairt isteach Rob ar ag clóscríobh an tsiombail hash le leanúint ag an div ID, Rob. Anois, na dearbhuithe. Chur againn braces oscailte agus dlúth agus aistriú ár n-dearbhuithe inlíne níos luaithe ar an div Rob ar taobh istigh de na braces, athnuachan, agus, fionnuar, tá votepage Rob ar fós teorann dubh timpeall air lúide an ugliness inlíne messy. 

Anois, cad má bhíomar ag iarraidh a roghnú an taobh istigh h1 de votepage Rob Fir? D'fhéadfá smaoineamh, "Déanaimis a chur ar ID ar é agus ansin ár stíleanna níos luaithe bhogadh." Go n-oibríonn, ach CSS tá bealaí eile ligean ar cíos agat gnéithe a roghnú trí úsáid a bhaint cad tugaimid combinators a mheascadh roghnóirí simplí. Mar shampla, is féidir le carachtar spás bán a úsáid mar combinator a shonrú ar gach cás de 1 roghnóir go beo taobh istigh de eile roghnóir. Sin fuaimeanna a lán níos casta ná mar atá sé i ndáiríre. Seo sampla. Déanfaimid cineál # Rob, spás a chur, agus é a leanúint le h1, eile roghnóir simplí a dtugtar roghnóir tag a roghnaíonn cineálacha na n-eilimintí cosúil le divs nó míreanna sin. Déanann an spás ar ár 2 roghnóirí simplí, ag cur gach dearbhú CSS agus na braces gcuach chun clibeanna a chur h1 a mhaireann taobh istigh den eilimint le id = "Rob". Just a chur ina luí leat go n-oibríonn sé, beidh mé an dath an chló a athrú go bán, athnuachan, agus is é sin, breathnú, header Rob s anois bán. 

Obair seo go léir a théann chun a thaispeáint go trí úsáid a bhaint rialacha ionad stíleanna inlíne féidir linn a fháil cód i bhfad níos glaine. Go deimhin, má thosaíonn an bloc stíl fáil beagán mór, Is féidir liom a tharraingt fiú na stíleanna amach i gcomhad éagsúil ar fad. 

Go mbeadh an comhad seo nua mar CSS sa doiciméad seo beidh mé a úsáid ach chlib nasc HTML ar. Anseo tá mé ag rá go bhfuil mé ag nascadh le bileog stíle seachtrach, an tréith Deirge, agus ag sonrú an cosán chun an comhad le mo tréith href. Anois mo HTML marcáil agus CSS eagraithe nicely i gcomhaid go hiomlán ar leith, a bhfuil beagnach i gcónaí ar an mbealach is fearr dearthóirí ag obair le HTML agus CSS. 

I gcás go bhfuil tú wondering, tá na roghnóirí simplí roghnóirí ID roghnóirí tag agus cosúil leis na cinn a chonaic muid díreach roghnóirí rang chomh maith le roghnú eilimintí le rang áirithe, roghnóirí tréith le haghaidh eilimintí roghnú le tréithe eile cosúil le cineál = "raidió" d'ionchuir cnaipe raidió, agus pseudoselectors cosúil le ainlíonn agus fócas a shonrú styling nuair mhaith idirghníomhaíochtaí mousing thar gné tarlú. 

Áirítear ar na combinators coitianta spás bán do gach leanbh agus camóga do roghnóirí idirdhealú. Daoine eile is féidir leat teacht san áireamh an arrow do leanaí go díreach amháin, an tilde do gach deartháireacha a tharlaíonn tar éis an eilimint, agus an comhartha móide le haghaidh an siblín 1 a thagann díreach tar éis an eilimint. 

A chur le chéile roghnóirí agus combinators, is féidir leat a leathnú an réimse styling is féidir leat a bhaint amach ar leathanach gréasáin áirithe agus scríobh CSS níos éifeachtaí. Le cúpla ach de línte CSS fheiceann tú ag clóscríobh dom a chur anseo, Is féidir liom a dhéanamh go tapa rud éigin mar seo cuma mhaith rud éigin mar seo. 

Tá mé Joseph, agus tá sé seo CS50. 

[CS50.TV] 

Uh, nuair is féidir liom tosú? Lig dom a dhéanamh gur gan - [gáirí] Maith go leor. Cuir - Lig dom a athrú fhoclaíocht. Ooh. Tá brón orm.