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

Sa lá atá inniu beidh muid ag caint faoi CSS nó Stílbhileoga Cascáideacha. 

Mar sin, cad é go díreach CSS? Bhuel, a ligean ar bhriseadh an téarma CSS síos ina 2 chuid: Cascáideacha agus Stílbhileoga. Is cascáideacha le beagán níos casta, agus tá sé rud éigin beidh orainn a chlúdach i físeán eile. Ach do starters, Stílbhileoga leideanna go mór ar cad a dhéanann CSS. Cuireann sé stíleanna chun an HTML ar an leathanach gréasáin, athrú conas Breathnaíonn an leathanach gréasáin aesthetically. Ciallaíonn sé seo gach rud ó an cló 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 an bosca chothromú nó scáthanna a chur le 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 láithreán droch-lorg Scríobh mé díreach. Má bhí Rob chun breathnú ar an suíomh seo ceart anois, ba mhaith sé a rá dócha rud éigin cosúil le, "Wow Breathnaíonn! Mo thabhairt isteach uafásach. Joseph, tá tú dearthóir uafásach." "Ag baint úsáide as an réamhshocraithe Times cló? Is Helvetica sin i bhfad níos fearr." 

Mar sin, cad a d'fhéadfadh a bheith ar an bealach is simplí a chur i bhfeidhm ar an styling Rob ag iarraidh? Is é an bealach is soiléire go leor de na daoine a scríobh ar dtús CSS Bhí a chur ar cad glaoch dearbhuithe stíl ceart againn sa eilimint féin ag baint úsáide as an tréith stíl HTML. Is éard atá dearbhú stíl simplí ar an eilimint HTML ar 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 ligean le rá Rob mian le teorainn dubh thart ar a thabhairt isteach. Chuir muid ar dtús leis an tréith stíl ar div Rob anseo ansin taobh istigh Sleachta dúbailte a chur ar dearbhú CSS: "Teorann: 1px soladach dubh;" Tagraíonn an 1 picteilín ar leithead an teorainn, tagraíonn an solad ar an stíl na teorann, agus go gcinnfidh an dath ag an deireadh cad é dath an teorainn sin. 

Más mian linn stíleanna éagsúla ar gné, scríobh na dearbhuithe i seicheamh. Mar shampla, más mian Rob chuid téacs header i Helvetica le cúlra gorm agus níos mó spáis 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 ar mhaithe le comhsheasmhacht ar. 

Beidh muid ag míniú a shábháil roinnt de na hairíonna CSS with agus níos casta do físeán eile. Má tá tú rud éigin i gcuimhne, ach Googling an éifeacht is mian leat leanúint ag CSS Beidh a thabhairt duit torthaí is dócha maith go leor. Is é an rud is iontaí 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 é. Iarraimid 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 Breathnaíonn seo go léir. Samhlaigh dá mbeadh ort é seo a dhéanamh le haghaidh gach gné ar an leathanach, móide anois do HTML agus CSS go léir measctha lena chéile, agus cluttered. Comhlán, ceart? A shocrú seo, thosaigh daoine ar deireadh thiar ag teacht ar a n-scaradh HTML marcáil as a n-CSS styling trí úsáid a bhaint as rud ar a dtugtar unused CSS. Unused CSS a úsáidtear chun eilimintí a bhfuil dearbhuithe a chur i bhfeidhm a roghnú. Tá roghnóir in éineacht le liosta de na dearbhuithe CSS dá minic mar riail CSS. Bheadh ​​na rialacha seo a chur idir clibeanna stíl oscailte agus gar HTML, go minic i an ceann an doiciméad. 

Tá sé i bhfad níos éasca a fheiceáil le sampla, mar sin a ligean ar tús a chruthú riail shimplí CSS. 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 ag tosú amach ag baint úsáide as ceann de na roghnóirí simplí, an tsiombail hash, a roghnaíonn ghné HTML ag a tréith ID. Sa chás seo, beidh orainn a roghnaigh an div gur ionann thabhairt isteach Rob ag clóscríobh an tsiombail hash le leanúint ag an div ID, Rob. Anois, na dearbhuithe. Cuir muid braces oscailt agus a dhúnadh agus athrú ár n-dearbhuithe inlíne níos luaithe ar an div Rob taobh istigh de na braces, athnuachan, agus, fionnuar, tá votepage Rob fós teorainn 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? D'fhéadfá smaoineamh, "Déanaimis a chur ar ID ar é agus ansin bogadh ar ár stíleanna níos luaithe." Go n-oibríonn, ach CSS Tá bealaí eile a ligean duit a roghnú eilimintí trí úsáid a bhaint as rud ar a dtugaimid combinators a mheascadh roghnóirí simplí. Mar shampla, is féidir le carachtar spás bán a úsáid mar Combinator a shonrú gach cás de 1 roghnóir go beo taobh istigh de roghnóir eile. Sin fuaimeanna i bhfad níos casta ná mar atá sé i ndáiríre. Seo sampla. Déanfaimid cineál # Rob, add a spás, agus é a leanúint le H1, Roghnóir simplí eile ar a dtugtar roghnóir tag a roghnaíonn cineálacha na n-eilimintí cosúil le divs nó míreanna. Nascann an spás ar ár 2 roghnóirí simplí, ag cur gach dearbhú CSS agus na braces gcuach chun clibeanna H1 go beo taobh istigh den eilimint leis id = "Rob". Just a chur ina luí ort go n-oibríonn sé, beidh mé an dath cló a athrú go bán, athnuachan, agus, breathnú, tá header Rob bán anois. 

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

Chun seo a áireamh comhad nua mar CSS sa cháipéis seo beidh mé a úsáid ach chlib nasc HTML ar. Anseo tá mé ag insint dó go bhfuil mé ag nascadh le bileog stíle sheachtrach, an tréith Deirge, agus sonrófar 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, atá 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 agus roghnóirí tag cosúil leis na cinn a chonaic muid díreach chomh maith le roghnóirí rang le haghaidh eilimintí le rang áirithe a roghnú, roghnóirí tréith le haghaidh eilimintí roghnú ag tréithe eile cosúil le cineál = "raidió" le haghaidh ionchuir cnaipe raidió, agus pseudoselectors cosúil le hover agus díriú do shonrú styling nuair mhaith idirghníomhaíochtaí mousing os cionn gné tarlú. 

Áirítear ar na combinators coitianta spás bán do gach leanbh agus camóga chun idirdhealú a roghnóirí. I measc daoine eile is féidir leat teacht ar an arrow do pháistí 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 1 sibling a thagann díreach tar éis an eilimint. 

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

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

[CS50.TV] 

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