[MIZIK jwe] 

Doug Lloyd: Se konsa, kite a pran yon sÃ¨l plis videyo pale sou yon sÃ¨l lang plis. Fwa sa a, nou pral pale sou CSS. Se konsa, CSS, ki se kout pou Kaskad Dra Style, se yon lÃ²t lang nou itilize lÃ¨ konstwi sit entÃ¨nÃ¨t. Reflechi sou li tankou sa a. Si HTML se sa nou itilize yo Ã²ganize nan kontni nou vle mete yo sou paj nou an, CSS se zouti a ke nou jeneralman itilize yo Customize ki jan sit nou an gade, ak ki jan eksperyans nan itilizatÃ¨ reyÃ¨lman se, kominike avÃ¨k sit entÃ¨nÃ¨t nou an. 

Menm jan ak HTML, CSS se pa yon lang programmation. Li pa gen lojik. Li pa gen varyab. Li pa gen nenpÃ²t ki sÃ²t de ki koule bagay ki gen rapÃ² ke C fÃ¨. Li se yon lang manier. Apre sa, sentaks li yo se trÃ¨ senp, ak jis dekri ki jan eleman ki nan nou an paj gen sÃ¨ten HTML eleman yo ta dwe modifye. Pou sa ka fÃ¨t, si ou pa gen ankÃ² ap gade videyo nou an sou HTML, oswa ou se abitye avÃ¨k HTML jeneralman, ou ka vle pran yon gade nan ki premye, paske sa a diskisyon sou CSS ki pral depann de kÃ¨k konesans nan HTML. 

Se konsa, isit la nan yon reyÃ¨lman senp stylesheet CSS. Menm si ou te pa janm pwograme ak CSS anvan, Mwen se trÃ¨ asire w ou kapab konnen ki ekzakteman ki sa stylesheet sa a fÃ¨. Ki sa sa fÃ¨? Oke, aplike nan kÃ² a nan wÃ¨b nou an paj, tout bagay ant Tags kÃ² sou HTML nou an, epi li kouche la koulÃ¨ background nan ki paj nan ble. Oke, li nan yon stylesheet trÃ¨ senp. Li nan aktyÃ¨lman trÃ¨ imen lang amikal, CSS. Se konsa, menm si ou pa janm te itilize li anvan, pwobableman ou te kapab devine kisa ki te fÃ¨ sa. An reyalite, si nou chaje yon paj, kote stylesheet sa a te entegre yon jan kanmenm, koulÃ¨ a ââbackground nan paj nou an ta gen ble, epi yo pa blan an estanda. 

Se konsa, kouman nou bati feuilles? Oke premye, nou dwe idantifye yon seleksyon. Nan dÃ¨nye egzanp lan, ki seleksyon te kÃ². LÃ¨ sa a, nou gen yon louvri Curly atÃ¨l, epi nou ap ale nan kÃ²manse defini nan stylesheet pou sa seleksyon. Nan ant aparÃ¨y Ã²topedik yo Curly, nou jis gen yon lis ki gen valÃ¨ kle pÃ¨. Koup la valÃ¨ anvan te koulÃ¨ background virgules ble, men nou ta ka fÃ¨ pi plis ak plis nan sa yo. Ou te kapab gen plizyÃ¨ bagay k ap aplike ak sa yo ki tag, ke kÃ² seleksyon. Chak youn nan yo se separe pa yon virgules, epi nou rele chak youn nan yo yon deklarasyon, yon deklarasyon CSS. LÃ¨ nou ap fÃ¨ ak tout sa nou nan manier vle aplike ak sa yo ki tag patikilye, nou jis gen yon Curly fÃ¨men mete sipÃ² nan fen stylesheet a, epi nou ap fÃ¨ defini stylesheet nan pou sa seleksyon an patikilye. 

Site kÃ¨k pwopriyete CSS komen? Oke, petÃ¨t ou vle mete yon fwontyÃ¨ alantou yon bagay. Se konsa, ou ka di, fwontyÃ¨, ki ta ka kle ou, ak LÃ¨ sa a valÃ¨ ou ta dwe, sa ki style, koulÃ¨, ak lajÃ¨ ou vle li yo dwe. Se konsa, style la te kapab fÃ¨ yon solid liy, yon liy pwentiye an, yon liy an tirÃ¨, yon liy Ridge, ki ta dwe liy tranble. PetÃ¨t ou vle genyen li gen ble oswa nwa oswa vÃ¨t. PetÃ¨t ou vle li nan dwe 1 oswa 2 oswa 10 piksÃ¨l lajÃ¨. Ou ka presize tout nan bagay sa yo. PetÃ¨t ou vle yo mete background nan koulÃ¨ nan paj ou nan yon fason patikilye. Nou deja wÃ¨ jan, mete nan jan nou koumanse nan kÃ² a yo dwe ble. 

LÃ¨ sa a, ou ka itilize yon mo kle, se konsa CSS gen sÃ¨ten koulÃ¨ ki yo bati nan li, ble, vÃ¨t, nwa, yon koulÃ¨ trÃ¨ senp nou konnen. Men, ou ka tou presize nenpÃ²t EgzagÃ²n koulÃ¨ ki ou ta renmen. Sonje byen, koulÃ¨ kapab idantifye pa yon seri twa chif EgzagÃ²n ki ant 0 a 255 nan, RG ak b, wouj, vÃ¨t, ak ble eleman. Se konsa, nou ka presize nenpÃ²t koulÃ¨ nou vle pa, olye pou yo lÃ¨ l sÃ¨vi avÃ¨k ble oswa vÃ¨t, oubyen nwa, lÃ¨ l sÃ¨vi avÃ¨k liv ak LÃ¨ sa a sis chif nan EgzagÃ²n, ak ki ta ban nou koulÃ¨ a ââsis chif. Se konsa, sa a, se koulÃ¨ a ââbackground. 

Nou genyen tou premye plan an koulÃ¨, ki se nÃ²malman pral fÃ¨ tÃ¨ks la nan paj ou yo. Epi ou te kapab Menm jan an tou fÃ¨ sa ak pawÃ²l Bondye kle yo ak oswa sis EgzagÃ²n chif. Se konsa, ou ka presize nenpÃ²t koulÃ¨ ou vle pou tÃ¨ks la nan paj ou kont yon patikilye koulÃ¨ background, moute pi wo a. Ou kapab tou chanje epi fÃ¨ fas ak font, ak tÃ¨ks nan fason se rann nan paj la. 

Se konsa, ou kapab chanje gwosÃ¨ font ou yo. Ou kapab sÃ¨vi ak kle mo, tankou siplemantÃ¨, siplemantÃ¨ ti, oswa xx piti, oswa mwayen, gwo, ak sou sa. Ou kapab sÃ¨vi ak pwen fiks, 10 pwen, 12 pwen, ak sou sa. Ou kapab sÃ¨vi ak pousantaj, 80%, 20%, kote 100% se font la default gwosÃ¨, ki se nÃ²malman ale nan gen yon bagay tankou 11 oswa 12 pwen. Ou, ou ka menm baz li koupe a ki pi resan font size la. Si ou jis te ekri yon bagay e yo ou konnen sa ou vle se pou li nan dwe pi piti, men ou pa konnen ekzakteman ki sa gwosÃ¨ ou vle li nan dwe, byen, ou ka jis di, font size pi piti. Epi li pral koupe nan baz la, jis moute pi wo a, li nan font size. Epi ou ka jwenn ki pi piti oswa ki pi gwo. Se konsa, gen nan yon anpil nan diferan fason ou presize font size. 

Ou ka presize tou sa fanmi font ou vle. Si ou gen yon patikilye Non, gen nan yon fason nan CSS-- nou pa ap ale nan pale sou sa isit lan-- yo defini yon font trÃ¨ espesifik ak Afiche l 'nan paj ou yo. Ou kapab tou itilize non jenerik. Genyen yon anpil nan sit entÃ¨nÃ¨t ki an sekirite polis ke yo pre-defini nan CSS. Men, si ou se yon itilizatÃ¨ nan Microsoft Biwo nan 20 dÃ¨nye ane yo, w ap pwobableman abitye avÃ¨k yon anpil nan sa yo sou sit polis san danje deja, Times New Roman, aryal, Courier New, Georgia, Tahoma, Verdana, ak sou sa. Moun sa yo ki, yo tout konsidere kÃ²m entÃ¨nÃ¨t polis ki an sekirite. Ak aktyÃ¨lman, yon pati nan la Rezon ki fÃ¨ yo rive yo dwe te yo dwe itilize fÃ¨ web-- chak paj te gen aksÃ¨ a default sa a mete nan polis ak divÃ¨s kalite anpatman, ak tout bagay sa a font bagay nou pa pral jwenn nan, men sa yo yo anjeneral aksesib nan CSS ou, menm si ou pa fÃ¨ sa otreman defini polis yo. Anfen, ou ka aliman tÃ¨ks ou, olye pou yo li ke yo te, pa default, ki aliyen sou bÃ² goch la, ou te kapab aliman li nan bÃ² dwat la, oswa ou ta ka fÃ¨ aliman li santre, oswa jistifye konsa ke li frape tou de marges. Se konsa, sa yo se tout opsyon ou ka itilize chanje sa tÃ¨ks ou sanble, ak ki jan li a parÃ¨t sou paj ou yo. 

Seleksyon ou pa fÃ¨ sa gen yo dwe Tags sÃ¨lman. Nou deja wÃ¨ yon tag kÃ² seleksyon, ak tag seleksyon gade jis tankou sa. Ou non yon tag, ak LÃ¨ sa a ou defini yon stylesheet pou sa tag. Men, ou ka tou fÃ¨ yon bagay rele yon seleksyon ID. Yon seleksyon ID sanble trÃ¨ menm jan an. Men, remake, ke kounye a mwen pa lÃ¨ l sÃ¨vi avÃ¨k yon tag HTML, mwen lÃ¨ l sÃ¨vi avÃ¨k, nan ka sa a, #unique, oswa Hash inik. Si ou sonje soti nan nou an videyo sou HTML, nou te pale sou ki jan Tags ka gen atribi. 

Yonn atribi ki aplike bÃ¨l anpil tout Tags HTML, men nou pa t 'pale sou li, se yon bagay yo rele yon tag ID. Se konsa, sa a an patikilye ta CSS aplike sÃ¨lman nan HTML tag ki gen yon ID trÃ¨ espesifik, ke ou te rele. Se konsa, si ou gen yon kote nan kÃ²d ou a, yon kote nan dosye HTML ou a, yon tag epi ou presize kÃ²m yon atribi ak sa yo ki tag, ID egal inik, sa a stylesheet patikilye isit la ap aplike sÃ¨lman nan ant ki tag ak ID a nan inik. 

Ou kapab tou fÃ¨ yon bagay rele yon seleksyon klas la. Se konsa, nan adisyon a gen ID atribi, ou kapab tou ajoute yon atribi klas yo Tags HTML. Men, lÃ¨ ou sÃ¨vi ak yon atribi klas, li kapab aplike nan plizyÃ¨ Tags. Se konsa, si ou gen plizyÃ¨ bagay ki yo menm jan an, petÃ¨t ou vle di, louvri tag bla, bla, bla, bla, klas egal elÃ¨v yo. LÃ¨ sa a, sa a an patikilye stylesheet ta aplike bay chak tag ki gen klas se elÃ¨v yo. Nan ka sa a, nou ta mete nan koulÃ¨ background jÃ²n, epi nou ta mete stupidity, ki se yon tag nou pa t 'pale sou, men jis kontra avÃ¨k ki jan transparan yon bagay ki, a 70%, nan ka sa a. 

Genyen de opsyon pou ekri style. Ou ka ekri yo dirÃ¨kteman nan HTML ou pa mete yo feuilles nan ant Tags style. Ak moun ki Tags style ale andedan nan etikÃ¨t yo tÃ¨t nan paj entÃ¨nÃ¨t ou an. Fason ki petÃ¨t plis pi pito fÃ¨ li se yo ekri yon dosye .css ki apa a, ak LÃ¨ sa a lyen l 'nan ou dokimante lÃ¨ l sÃ¨vi avÃ¨k Tags lyen. Tags Link, ankÃ², yo diferan de Des, si ou sonje soti nan videyo nou an yon HTML. Ak Tags lyen yo ki jan nou rale nan dosye apa a. Li sÃ²t de tankou sa ki egal a # enkli nan pou pwogram entÃ¨nÃ¨t. 

Se konsa, kite a pran yon gade nan table.html. Si ou sonje soti nan nou an HTML videyo, mwen te montre yon egzanp sou yon trÃ¨ miltiplikasyon senp tab ki te bÃ¨l lÃ¨d, e petÃ¨t gen nan yon fason yo fÃ¨ l 'pi bon ak CSS, fÃ¨ li aktyÃ¨lman gade plis tankou yon miltiplikasyon tab, oswa yon bagay ke se pa sa jis kole ansanm ki pa gen okenn divizyon aktyÃ¨l ant ranje yo ak kolÃ²n yo. Se konsa nou tÃ¨t sou nan CS50 IDE, ak pran yon gade nan ki jan CSS kapab, sÃ²t de, ajiste ki sa nou te kÃ²manse avÃ¨k anvan, , epi fÃ¨ li yon bagay yon anpil pi byen. 

Se konsa, nou ap nan CS50 IDE kounye a, epi si abitye, nou pral rale moute nan sa a tab ki HTML paj. Table.html fondamantalman jis defini sa ki nan yon multiple-- li te sipoze la yon kat pa kat tab miltiplikasyon. Li trÃ¨ senp. Apre sa, nou ta panse ke li ta gade trÃ¨ byen Ã²ganize. Men, an reyalite, lÃ¨ nou preview paj sa a, nou wÃ¨ ke li nan kalite lÃ¨d, dwa? KlÃ¨man nou gen ranje ak kolÃ²n isit la. Gen kÃ¨k sÃ²t de separasyon. Men, li la pa yon separasyon ki gen sans. Nou ap aktyÃ¨lman ap resevwa pa twÃ²p enfÃ²masyon isit la. Apre sa, gen nan pa gen separasyon ant ranje yo ak kolÃ²n nan tÃ¨m nan rÃ¨g orizontal oswa vÃ¨tikal. Nou te kapab pwobableman fÃ¨ sa-a gade yon ti jan ti kras pi byen. Se konsa nou eseye. Se konsa, mwen pral fÃ¨men tab sa a moute isit la. Apre sa, mwen pral yo fÃ¨men table.html mwen, epi mwen te gen yon lÃ²t vÃ¨syon isit la rele table2.HTML. Nou pral louvri ki yo. KÃ² a nan paj la se bÃ¨l anpil, nan menm men mwen te chanje yon ti kras nan tÃ¨t la. Apre sa, mwen pral woulo liv moute isit la. Remake tan sa a, mwen se lÃ¨ l sÃ¨vi avÃ¨k embedded tags style. Mwen te louvri yon tag style, ak mwen se kounye a defini yon stylesheet CSS jis andedan nan li. Mwen gen yon stylesheet ki di, tab. Sa a seleksyon tag mwen. Mwen pa lÃ¨ l sÃ¨vi avÃ¨k dot oswa regle, ki mwen ta dwe ap fÃ¨ si mwen te lÃ¨ l sÃ¨vi avÃ¨k yon ID oswa yon seleksyon klas la. Mwen gen yon tag seleksyon tab isit lan--. Sa a style ki pral aplike nan chak tag tab. Aparamman mwen vle mete yon yon sÃ¨l pixel lajÃ¨, solid fwontyÃ¨ ble, andedan tab mwen. Sa son tankou li ta pwobableman ede sitiyasyon an, dwa? Nou ap ale nan gen bagay sa yo gade yon pi bon anpil. Se konsa, sa a se amann. Estilitikman, Mwen te jis embedded stylesheet m 'ki nan isit la. Li nan sÃ¨tÃ¨nman yon fason akseptab fÃ¨ li. Ann wÃ¨ sa ki sa a sanble. Se konsa, mwen pral ale tounen desann isit la, ak Mwen pral pral preview table2.HTML mwen. Oke, sa a, se pa byen ki sa mwen te vle, men li se ekzakteman ki sa nou te mande pou. Nou te di ke sa a style se ale nan aplike nan tablo nou an. Tablo nou an kounye a gen yon pixel yon sÃ¨l lajÃ¨, solid fwontyÃ¨ ble fÃ¨ wonn li. Nou ap aktyÃ¨lman ap resevwa pa a selil yo tab. Nou ap jis ap resevwa sou tab la. Se konsa, CSS te travay. Li te gen aplike yon stylesheet sou tab nou an. Men, pa t 'byen fÃ¨ ki sa nou te vle li fÃ¨. Ki jan nou jwenn yo fÃ¨ ki sa nou vle l 'bay fÃ¨? 

Oke, kite la pran yon gade nan yon sÃ¨l plis vÃ¨syon an sa a nan table3.HTML. Se konsa, mwen jis ale nan fÃ¨men onglÃ¨ sa yo. Mwen pral tounen sou isit la yo mwen ranpli pye bwa, ak louvri moute table3.HTML. Yon fwa ankÃ², li k ap pase yo gade bÃ¨l menm jan isit la nan konmansman an. Men, avi, fwa sa a, olye pou yo lÃ¨ l sÃ¨vi avÃ¨k yon stylesheet embedded dwat nan la, Mwen pral fÃ¨ rapÃ² ant nan yon stylesheet lÃ¨ l sÃ¨vi avÃ¨k tag nan lyen. Se konsa, mwen aparamman ki lye ak nan yon stylesheet rele tables.CSS, ak byen sa a egal stylesheet jis means-- byen, ki sa ki dosye sa a relatif nan sa Mwen se doing-- se yon stylesheet ke mwen se lÃ¨ l sÃ¨vi avÃ¨k pou paj m 'yo. Se konsa, si mwen reyÃ¨lman vle wÃ¨ sa ki M ap fÃ¨ ak CSS la isit la, Mwen bezwen ale louvri ki table.CSS depoze kÃ²m byen. Se konsa, nou pral tounen sou isit la ankÃ² nan pye bwa dosye nou yo. Genyen table.CSS. Nou pral pÃ²p li louvri. Koulye a, nou ap wÃ¨ yon ti kras nan CSS la. Aparamman, mwen gen yon koup de bagay sa yo ap pase sou isit la. Mwen aparamman vle mete yon senk pixel lajÃ¨, solid fwontyÃ¨ wouj, bÃ² tab mwen. Nou deja konnen ke ki k ap pase jis ale sou perimÃ¨t la. Nou te wÃ¨ ke nan table2.HTML. AvÃ¨k chak ranje, mwen aparamman vle presize ki wotÃ¨ nan ranje se 50 piksÃ¨l segondÃ¨. Se konsa, pou chak ranje, sonje se sa ki tag a tr fÃ¨, M 'ap fÃ¨ li 50 piksÃ¨l segondÃ¨. 

Anfen, mwen gen kÃ²mantÃ¨ sa a. LÃ¨ sa a se ki jan nou fÃ¨ kÃ²mantÃ¨ nan CSS. Li nan trÃ¨ menm jan ak arete blÃ²k kÃ²mantÃ¨ sentaks zetwal koupe. Tout tÃ¨ks la ou vle. Gen nan pa gen koupe koupe menm si nan CSS. Pou kÃ²mantÃ¨ kout aliye, nou gen yo sÃ¨vi ak fÃ²ma sa a an patikilye isit la. Li sanble ke m ap fÃ¨ yon anpil nan bagay sa yo nan Tags td m 'yo. Sonje Tags td, oswa tab done, ki reyÃ¨lman yo se jis kolÃ²n yo andedan nan ranje nou an, ak aparamman pou chak moso nan done nan tablo m 'yo, mwen vle yo mete koulÃ¨ a ââbackground gen nwa, koulÃ¨ a ââyo dwe blan, koulÃ¨ se koulÃ¨ premye plan. Se konsa, sa a pwal tÃ¨ks la nan paj m 'yo. Mwen vle gwo font, 22 pwen font, e mwen vle li nan dwe nan fanmi an font, Georgia. Se konsa, mwen pa pwal gen font la default. Mwen pral presize Georgia, ki se youn nan moun sou sit polis san danje ke nou te wÃ¨ anvan. Mwen vle tÃ¨ks mwen yo dwe ki aliyen santralman, nan mitan an nan bwat la, Mwen pa vle li nan dwe kite ki aliyen oswa dwa ki aliyen. Apre sa, mwen vle lajÃ¨ kolÃ²n mwen yo dwe 50 piksÃ¨l lajÃ¨ kÃ²m byen. Se pou nou pran yon gade nan ki sa sa a sanble, ak wÃ¨ si sa a se petÃ¨t yon amelyorasyon. Se konsa, mwen pral pou yo ale nan table3.HTML, ki sonje, gen ladan table.CSS kÃ²m yon lyen, epi n ap preview li. Sa se yon anpil pi bon, dwa? Sa a se aktyÃ¨lman kÃ²manse gade yon anpil plis tankou yon tab miltiplikasyon. Mwen gen ki fwontyÃ¨ wouj alantou tab mwen men kounye a Mwen menm mwen te te espesifye ki chak ranje se 50 piksÃ¨l lajÃ¨, oswa li la 50 piksÃ¨l tall-- eskiz mele l chak kolÃ²n se 50 piksÃ¨l lajÃ¨. Done yo nan chak kolÃ²n, epi sÃ¨lman done yo, te gen yon nwa jan nou koumanse. Se konsa, Se poutÃ¨t sa moun liy blan yo se a. Paske espas ki la nan ant tout nan selil sa yo, li pa yon fwontyÃ¨ an ak tÃ¨t li, li nan jis M 'ap sÃ¨lman ranpli nan la selil, ki aktyÃ¨lman fÃ¨ fwontyÃ¨ ki separe nan tablo a, ki aparamman t egziste tout ansanm, li te liy jis mens blan. Koulye a, yo ap vizib. Koulye a, yo pÃ²p nan sou ekran an. Se konsa, sa a se yon trÃ¨ senp stylesheet ke mwen te aplike, e kounye a, tab mwen sanble yon anpil plis tankou yon tab kat pa kat miltiplikasyon, olye pou yo jis yon dezÃ²d melanje, kote tout bagay se byen klÃ¨ ranje ak kolÃ²n, men se pa super byen Ã²ganize. Nou ap vrÃ¨man jis grate sifas la nan sa ou kapab fÃ¨ avÃ¨k CSS isit la. Erezman dokiman an CSS se trÃ¨ senp. Ou pral sÃ¨vi ak plizyÃ¨ nan li yo atribi figi, san patipri souvan. Yo menm ki nou te pale de pi bonÃ¨ nan videyo sa a. Gen plizyÃ¨ ke ou pwobableman pa pral sÃ¨vi ak tout. Epi sa a, amann, tou. Men, jis konnen, ke gen nan yon anpil nan dokiman yo deyÃ². Se konsa, menm si nou pa t 'kouvri tout bagay, w ap sÃ¨tÃ¨nman pa kite sou pwÃ²p ou yo. Men, CSS se reyÃ¨lman plezi fÃ¨ eksperyans avÃ¨k yo. Apre sa, mwen ta fÃ²tman ankouraje w yo jwe otou ak paj wÃ¨b ou, ak wÃ¨ kÃ²man ou ka fÃ¨ yo gade epi yo santi yo amelyore itilizatÃ¨ a eksperyans nan vizite paj ou yo. Mwen se Doug Lloyd. Sa a se CS50.