[Powered by Google Translate] [CSS] [Jozèf Ong - Inivèsite Harvard] [Sa a se CS50. - CS50.TV] 

Jodi a nou pral pale sou CSS oswa kaskad Dra Style. 

Se konsa, ki sa egzakteman se CSS? Oke, kite la kraze CSS an tèm desann nan 2 pati: Kaskad ak Dra Style. Kaskad se yon ti jan ti kras pi plis konplèks, ak li nan yon bagay nou pral kouvri nan yon lòt videyo. Men, pou kòmansè yo, Dra Style anpil sijesyon nan sa ki CSS fè. Li ajoute Styles HTML la nan yon paj entènèt, chanje ki jan paj wèb la estetik sanble. Sa vle di tout bagay soti nan font la nan tèks la pwezante a nan kontni an nan paj an lòt bagay fre tankou fè kwen yo nan yon bwat awondi oswa ajoute lonbraj la text. Ou ka menm fè bagay sa yo fou tankou fè bagay sa yo enkouraje sou ekran an. 

Se konsa, kouman nou itilize CSS ak HTML? Pran sit sa a pòv-kap mwen jis te ekri. Si Rob yo te fè yon gade nan sit sa a kounye a, li ta pwobableman di yon bagay tankou, "Wow! Entwodiksyon mwen sanble terib. Jozèf, ou se yon designer terib." "Sèvi ak default Times font la? Helvetica se konsa pi bon." 

Se konsa, sa ki ka petèt wout la ki pi senp pou aplike pou manier nan Rob vle? Anpil yo fason ki pi evidan nan moun okòmansman te ekri CSS te mete sa nou rele deklarasyon style dwat nan eleman nan tèt li lè l sèvi avèk atribi nan style HTML. Yon deklarasyon style tou senpleman konsiste de pwopriyete CSS eleman nan HTML a nou ta vle chanje swiv pa yon kolon ki te swiv pa valè nan nouvo nan pwopriyete a ak virgules yon nan fen an. Pou egzanp, kite a di Rob vle yon fwontyè nwa alantou entwodiksyon l 'yo. Nou premye mete atribi a style sou div Rob a isit la Lè sa a, andedan quotes doub mete yon deklarasyon CSS: "Fwontyè: 1px solid nwa;" Pixel nan 1 refere a lajè a nan fwontyè a, solid la refere a style la nan fwontyè a, ak koulè a ​​nan fen a detèmine ki koulè fwontyè a se. 

Si nou vle Styles plizyè sou yon eleman, ekri sa yo deklarasyon an sekans. Pou egzanp, si Rob vle tèks header l 'nan Helvetica ak yon background ble ak plis espas alantou tèks la, nou ka fè sa a: kalite = "font-fanmi: Helvetica; background-koulè: ble; padding: 5px;" Virgules an dènye se aktyèlman si ou vle, men gen moun ki konn kenbe l nan pou dedomajman pou konsistans la. 

Nou pral sove eksplike kèk nan pi fre epi plis konplèks pwopriyete yo CSS pou yon lòt videyo. Si ou gen yon bagay nan tèt ou, jis Googling efè a ou vle ki te swiv pa CSS ap pwobableman ba ou rezilta trè bon. Bagay la fre se ke CSS se trè laj, se konsa chans yo se si gen anyen ou vle fè - nan rezon ki fè - CSS ka pwobableman fè li. Nou rele sa a kalite nan manier aliye manier. Style nan eleman an se, byen, nan liy ak tag a kòmanse. 

Pou jan ki reyèlman renmen yo òganize, ou ta ka kòmanse resevwa yon ti kras peeved nan ki jan sal sa a tout sanble. Imajine si ou te gen fè sa pou chak eleman nan paj la, plis kounye a HTML ou yo ak CSS, yo tout melanje ak ankonbre. Brit, dwa? Pou repare sa a, moun ki evantyèlman te kòmanse pwan sou separe markeup HTML yo soti nan CSS stil yo lè l sèvi avèk yon bagay yo rele CSS seleksyon. Seleksyon CSS yo yo te itilize yo chwazi eleman yo ki deklarasyon yo ap aplike. Yon seleksyon konbine avèk yon lis CSS deklarasyon souvan refere yo kòm yon règ CSS. Règ sa yo t 'mete yo ant Tags ouvè ak fèmen style HTML, souvan nan tèt la nan dokiman an. 

Li nan pi fasil yo wè ak yon egzanp, Se konsa kite la kòmanse pa kreye yon senp CSS règ. Premyèman, kite a mete Tags style nan seksyon an tèt nan HTML nou an. Next, fè seleksyon yo a. Nou pral kòmanse lè l sèvi avèk youn nan seleksyon yo ki pi senp, senbòl la regle, ki chwazi yon eleman HTML pa atribi ID li yo. Nan ka sa a nou pral chwazi div a ki reprezante entwodiksyon Rob a pa sezisman senbòl regle ki te swiv pa ID div a, Rob. Koulye a, deklarasyon yo. Nou ajoute aparèy òtopedik ouvè ak fèmen ak chanjman deklarasyon pi bonè nou aliye sou div Rob a andedan nan sa yo aparèy òtopedik, rafrechir, , epi, fre, Intro Rob a toujou gen yon fwontyè nwa bò kote l 'mwens ledeur a aliye sal. 

Koulye a, sa ki si nou te vle chwazi anndan an H1 nan Intro Rob a? Ou ta ka panse, "Se pou yo mete yon ID sou li epi li lè sa a deplase Styles pi bonè nou an." Ki travay, men CSS gen lòt fason pou kite ou chwazi eleman lè l sèvi avèk sa nou rele combinators a melanje seleksyon senp. Pou egzanp, ka yon karaktè blan dwe itilize kòm yon combinator ou presize tout tan nan 1 fè seleksyon yo ki ap viv andedan nan yon lòt seleksyon. Ke son yon anpil plis konplike pase sa li aktyèlman se. Isit la nan yon egzanp. Nou pral tape # volè, ​​ajoute yon espas, epi swiv li ak yon H1, yon lòt seleksyon senp rele yon seleksyon tag ki chwazi kalite eleman tankou div oswa paragraf yo. Espas nan konbine seleksyon nou 2 senp, k ap aplike tout deklarasyon CSS ak aparèy òtopedik yo Curly ak etikèt H1 ki ap viv andedan nan eleman an ak didantite = "Rob". Jis konvenk ou ke li ap travay, mwen pral chanje koulè a ​​font ak blan, rafrechir, , epi, gade, header Rob a se kounye a blan. 

Tout moun nan travay sa a ale nan montre ke lè l sèvi avèk règ olye pou yo Styles aliye nou ka jwenn anpil cleaner kòd. An reyalite, si sa a blòk style kòmanse ap resevwa yon ti jan gwo, Mwen ka menm rale sa yo Styles soti nan yon dosye diferan tout ansanm. 

Pou gen ladan sa a ranpli nouvo kòm CSS nan dokiman sa a mwen pral jis itilize tag lyen HTML a. Isit la mwen di li ke mwen ki lye ak nan yon fèy style ekstèn, atribi nan Rel, ak ki espesifye chemen an nan dosye a ak atribi href mwen. Koulye a, markeup HTML m 'ak CSS yo òganize joliman nan dosye konplètman separe, ki se preske toujou mwayen ki konsèpteur pito travay ak HTML ak CSS. 

Nan ka w ap mande, seleksyon yo senp gen ladan seleksyon ID ak tag seleksyon tankou sa yo nou jis te wè kòm byen ke klas seleksyon pou chwazi eleman ki gen yon klas sèten, atribi seleksyon pou chwazi eleman pa atribi lòt tankou ki kalite = "radyo" pou entrain bouton radyo, ak pseudoselectors tankou hover epi konsantre pou ki espesifye manier lè entèraksyon renmen mousing sou yon eleman rive. 

Combinators an komen enkli blan pou tout timoun ak vigil yo fè distenksyon ant seleksyon. Gen lòt ki ou pouvwa rankontre gen ladan flèch la pou timoun yo dirèk sèlman, tild la pou tout frè ak sè ki rive apre yo fin eleman a, ak siy nan plis pou frè ak sè nan 1 ki vini imedyatman apre eleman an. 

By konbine sa yo seleksyon ak combinators, ou ka elaji ranje a nan manier ou kapab reyalize sou yon paj wèb yo bay epi ekri CSS pi plis efikasite. Ak jis yon koup nan liy nan CSS ou wè m 'tape isit la, Mwen ka byen vit fè yon bagay tankou sa a sanble yon bagay tankou sa. 

Mwen se Jozèf, ansanm ak sa a se CS50. 

[CS50.TV] 

Uh, kote mwen kòmanse? Kite m 'fè sa san yo pa - [ri] Okay. Ajoute yon - Kite m 'chanje sa Libellés. Ooh. M regrèt.