>> [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.