[Powered by Google Translate] [CSS]
[Jozèf Ong - Inivèsite Harvard]
[Sa a se CS50. - CS50.TV]
>> Jodi a nou pral pale de CSS oswa kaskad Dra Style.
>> Se konsa, ki sa egzakteman se CSS?
Oke, kite la kraze CSS la tèm desann nan 2 pati:
Kaskad ak Fèy Style.
Kaskad se yon ti jan ti kras pi plis konplèks, epi 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 a nan yon paj wèb,
chanje ki jan paj wèb la estetik sanble.
Sa vle di tout bagay soti nan font la nan tèks la ki pwezante nan kontni an nan paj an
lòt bagay fre tankou fè kwen ki sou 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 nan HTML?
Pran sit sa a pòv-ap chèche mwen jis te ekri.
Si Rob te fè yon gade nan sit sa a kounye a, li ta pwobableman di yon bagay tankou,
"Wow! Entwodiksyon mwen an sanble terib. Jozèf, ou se yon designer terib."
"Sèvi ak default Times font la? Helvetica se konsa pi byen."
>> Se konsa, sa ki ka gen wout la pi senp pou aplike pou manier nan Rob vle a?
Anpil yo nan 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 nan nou ta vle chanje
ki te swiv pa yon kolon ki te swiv pa valè a nouvo sou pwopriyete a ak virgules yon nan fen an.
Pou egzanp, kite a di Rob vle yon fwontyè nwa alantou entwodiksyon li yo.
Nou premye mete atribi nan 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 a nan fwontyè a,
ak koulè a ​​nan fen an detèmine ki sa koulè fwontyè a an 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:
style = "font-family: Helvetica; background-koulè: ble; kouvèti: 5px;"
Virgules an dènye se aktyèlman si ou vle, men moun ki konn kenbe l nan pou dedomajman pou konsistans la.
>> Nou pral eksplike sove kèk nan pi fre ak pi 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
pwal 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 jan de manier aliye manier.
Style a eleman se, byen, nan liy ak tag a kòmanse.
>> Pou jan ki vrèman renmen yo òganize,
ou ta ka kòmanse resevwa yon ti kras peeved nan fason lèd sa a tout moun sanble.
Imajine si ou te fè sa a 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 baliz HTML yo
soti nan CSS stil yo lè yo lè l sèvi avèk yon bagay yo rele CSS seleksyon.
Seleksyon CSS yo te itilize yo chwazi eleman yo ki deklarasyon yo ap aplike.
Yon seleksyon manm CCELL konbine avèk yon lis CSS deklarasyon souvan refere yo kòm yon règ CSS.
Règ sa yo ta dwe mete ant balises ouvè epi 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 etikèt style nan seksyon an tèt nan HTML nou an.
Next, seleksyon manm CCELL la.
Nou pral kòmanse nan lè l sèvi avèk youn nan seleksyon yo ki pi senp, senbòl nan 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
lè ou tape senbòl la regle ki te swiv pa ID div a, piye.
Koulye a, deklarasyon yo.
Nou ajoute aparèy òtopedik louvri, epi 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 nan aliye lèd.
>> Koulye a, sa ki si nou te vle chwazi andedan kay la H1 a Intro Rob a?
Ou ta ka panse, "Se pou la mete yon ID sou li epi 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 melanje seleksyon senp.
Pou egzanp, ka yon karaktè blan ka itilize kòm yon combinator
ou presize tout tan nan 1 seleksyon k ap viv andedan nan yon lòt seleksyon manm CCELL.
Sa ki son yon anpil plis konplike pase sa li aktyèlman se.
Isit la nan yon egzanp.
Nou pral tape # piye, ajoute yon espas, epi swiv li ak yon H1,
yon lòt seleksyon manm CCELL senp yo te rele yon seleksyon manm CCELL tag ki chwazi kalite eleman
tankou div oswa paragraf yo.
Espas ki la konbine seleksyon 2 nou an senp, k ap aplike tout deklarasyon CSS
ak aparèy òtopedik yo Curly ak etikèt H1 ki viv andedan nan eleman an ak id = "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.
>> Genyen ladan yo 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 rl,
e ki espesifye chemen ki mennen nan dosye a ak atribi rèf m 'yo.
Koulye a, baliz 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 gen ladan yo ki senp seleksyon ID
ak tag seleksyon tankou sa ki nou jis te wè
kòm byen ke klas seleksyon pou chwazi eleman ki gen yon klas sèten,
atribi seleksyon pou chwazi eleman nan atribi lòt tankou kalite = "radyo"
pou entrées bouton radyo, ak pseudoselectors tankou hover epi konsantre
pou di egzakteman kisa manier lè entèraksyon renmen mousing sou plis pase yon eleman rive.
>> Combinators an komen enkli blan pou tout timoun
ak vigil yo distenge seleksyon.
Gen lòt ki ou ka rankontre gen ladan yo flèch la pou timoun yo dirèk sèlman,
tild la pou tout frè ak sè ki rive apre 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 entènèt bay
epi ekri CSS pi plis efikasite.
Ak jis yon koup nan liy nan CSS ou wè m 'sezisman isit la,
Mwen ka byen vit fè yon bagay tankou sa a sanble yon bagay tankou sa a.
>> Mwen Jozèf, ansanm ak sa a se CS50.
>> [CS50.TV]
>> En, kote mwen kòmanse?
Kite m 'fè sa san - [ri] Okay.
Ajoute yon - Kite m 'chanje sa Libellés.
Ooh. Sorry.