[Powered by Google Translate] [CSS] [Joseph Ong - Prifysgol Harvard] [Mae hyn yn CS50. - CS50.TV] 

Heddiw, byddwn yn siarad am CSS neu Cascading Style Sheets. 

Felly, beth yn union yw CSS? Wel, gadewch i ni dorri'r term CSS lawr yn 2 ran: Cascading Style Sheets a. Rhaeadru yn ychydig yn fwy cymhleth, ac mae'n rhywbeth y byddwn yn ymdrin mewn 'n fideo arall. Ond ar gyfer dechreuwyr, Taflenni Arddull fawr iawn awgrymiadau ar yr hyn y CSS yn ei wneud. Mae'n ychwanegu arddulliau at HTML o dudalen we, newid sut y mae'r dudalen we esthetaidd edrych. Mae hyn yn golygu popeth o ffont y testun i'r lleoliad y cynnwys ar y dudalen i bethau oer eraill fel gwneud y corneli o flwch crwn neu ychwanegu cysgodion i destun. Gallwch hyd yn oed wneud pethau gwirion fel gwneud i bethau animeiddio ar y sgrin. 

Felly, sut yr ydym yn defnyddio CSS gyda HTML? Cymerwch y safle gwael yr olwg wyf newydd ei ysgrifennu. Os Rob yn edrych ar y safle hwn ar hyn o bryd, roedd e yn ôl pob tebyg yn dweud rhywbeth fel, "Wow! Cefais fy nghyflwyno yn edrych yn ofnadwy. Joseph, rydych chi'n ddylunydd ofnadwy." "Mae defnyddio'r Times diofyn ffont? Helvetica mor llawer gwell." 

Felly, yr hyn a allai fod yn ffordd symlaf i wneud cais yr arddull a Rob eisiau? Ddechrau Ysgrifennodd y ffordd fwyaf amlwg llawer o bobl CSS oedd rhoi yr hyn a alwn datganiadau dull cywir yn y elfen ei hun ddefnyddio'r briodoledd arddull HTML. Mae datganiad arddull syml, yn cynnwys eiddo CSS yr elfen HTML, rydym eisiau newid yna colon ac yna'r gwerth newydd yr eiddo a'r hanner colon ar y diwedd. Er enghraifft, gadewch i ni ddweud Rob eisiau border du am ei gyflwyniad. Rydym yn rhoi y priodoledd arddull cyntaf ar div Rob yma Yna, y tu mewn dyfynodau dwbl yn rhoi datganiad CSS: "Border: 1PX solet du;" Mae'r 1 picsel yn cyfeirio at led y ffin, y solid yn cyfeirio at arddull y ffin, a lliw ar y diwedd yn penderfynu pa liw y ffin yn. 

Os ydym am arddulliau lluosog ar elfen, ysgrifennu datganiadau hyn yn eu trefn. Er enghraifft, os Rob am ei destun header mewn Helvetica gyda chefndir glas a mwy o le o gwmpas y testun, gallwn wneud hyn: arddull = "font-deulu: Helvetica, cefndir-lliw: glas; padding: 5px;" Mae'r colon olaf mewn gwirionedd yn ddewisol, ond mae pobl fel arfer yn cadw i mewn er mwyn cysondeb ar. 

Byddwn yn arbed esbonio rhai o'r eiddo CSS oerach ac yn fwy cymhleth ar gyfer fideo arall. Os oes gennych chi rywbeth mewn golwg, dim ond Googling yr effaith rydych am ddilyn gan CSS Mae'n debyg y bydd yn rhoi canlyniadau 'n bert da. Y peth oera yw bod CSS yn eithaf eang, felly groes yn os oes unrhyw beth rydych am ei wneud - o fewn rheswm - Yn ôl pob tebyg y gall CSS wneud hynny. Rydym yn galw'r math hwn o steilio steilio unol. Mae arddull elfen yw, yn dda, yn unol â'r tag dechrau. 

Ar gyfer Folks sydd yn wir yn hoffi cael eu trefnu, efallai y byddwch yn dechrau cael ychydig yn digio ar sut anniben hyn i gyd yn edrych. Dychmygwch pe bai'n rhaid i chi wneud hyn ar gyfer pob elfen ar y dudalen, a nawr eich HTML a CSS i gyd yn gymysg ac yn anniben. Gross, dde? I atgyweiria hon, mae pobl yn y pen draw dechreuodd ddal ymlaen i wahanu eu HTML markup gan eu steilio CSS drwy ddefnyddio rhywbeth a elwir detholwyr CSS. Detholwyr CSS yn cael eu defnyddio i ddewis elfennau y datganiadau yn cael eu cymhwyso. Ei Cyfeiriodd dewisydd ynghyd â rhestr o ddatganiadau CSS aml fel rheol CSS. Byddai'r rheolau hyn yn cael eu rhoi rhwng tagiau HTML arddull agor a chau, yn aml yn y pen y ddogfen. 

Mae'n llawer haws i weld ag enghraifft, felly gadewch i ni ddechrau drwy greu rheol CSS syml. Yn gyntaf, gadewch i ni roi tagiau arddull yn yr adran pennaeth ein HTML. Nesaf, bydd y dewisydd. Byddwn yn dechrau i ffwrdd gan ddefnyddio un o'r detholwyr symlaf, y symbol hash, sy'n dewis elfen HTML gan ei priodoledd adnabod. Yn yr achos hwn byddwn yn dewis y div sy'n cynrychioli cyflwyniad Rob yn drwy deipio y symbol hash ddilyn gan ID y div yn, rob. Nawr bod y datganiadau. Ychwanegu ein bresys agor a chau a symud ein datganiadau inline cynharach ar div Rob tu mewn bresys hyn, adnewyddu, ac, yn oer, mae gan intro Rob border du o'i gwmpas heb y hylltra inline anniben. 

Nawr, beth os oeddem am i ddewis y tu mewn h1 o intro Rob? Efallai y byddwch yn meddwl, "Gadewch i ni roi ID arno ac yna symud ein arddulliau cynharach." Sy'n gweithio, ond mae CSS wedi ffyrdd eraill o adael i chi ddewis elfennau drwy ddefnyddio yr hyn a alwn combinators i gymysgu ddetholwyr syml. Er enghraifft, gall cymeriad gofod yn cael ei ddefnyddio fel Combinator i nodi pob enghraifft o 1 dewisydd sy'n byw tu mewn dewisydd arall. Mae hynny'n swnio'n llawer mwy cymhleth nag y mae mewn gwirionedd. Dyma enghraifft. Byddwn yn teipio # ddwyn, ychwanegu gofod, a dilyn gyda h1, dewisydd syml arall o'r enw detholydd tag sy'n dewis mathau o elfennau fel divs neu baragraffau. Mae'r gofod yn cyfuno ein 2 detholwyr syml, cymhwyso'r holl ddatganiadau CSS a'r braces cyrliog i tagiau h1 sy'n byw tu mewn i'r elfen gyda id = "rob". Dim ond i argyhoeddi chi fod yn gweithio, 'n annhymerus' newid lliw ffont i wyn, adnewyddu, ac, edrych, peniad Rob yn wyn yn awr. 

Mae'r holl waith hwn yn mynd i ddangos bod drwy ddefnyddio rheolau yn hytrach na o arddulliau inline gallwn gael cod llawer glanach. Mewn gwirionedd, os yw hyn yn bloc arddull yn dechrau mynd ychydig yn fawr, Allaf hyd yn oed dynnu arddulliau hyn allan i mewn i ffeil wahanol yn gyfan gwbl. 

I gynnwys y ffeil newydd fel CSS yn y ddogfen hon 'n annhymerus' jyst arfer tag HTML yn gyswllt. Yma, rwy'n dweud wrtho fy mod yn cysylltu mewn dalen arddull allanol, priodoledd rel, ac yn nodi'r llwybr at y ffeil gyda fy priodoledd href. Nawr fy HTML markup a CSS yn cael eu trefnu 'n glws mewn ffeiliau gwbl ar wahân, sydd bron bob amser yn y ffordd orau dylunwyr yn gweithio gyda HTML a CSS. 

Rhag ofn eich bod yn rhyfeddu, y detholwyr syml yn cynnwys detholwyr ID a dewiswyr tag fel y rhai yr ydym yn unig yn gweld yn ogystal â dewiswyr dosbarth ar gyfer dewis elfennau gyda dosbarth penodol, dewiswyr priodoledd ar gyfer dewis elfennau gan nodweddion eraill megis math = "radio" ar gyfer mewnbynnau botwm radio, a pseudoselectors fel hofran a chanolbwyntio ar gyfer nodi steilio pan rhyngweithio hoffi mousing dros elfen digwydd. 

Mae'r combinators cyffredin yn cynnwys gofod ar gyfer pob plentyn ac atalnodau i wahaniaethu detholwyr. Mae eraill efallai y byddwch yn dod ar draws gynnwys y saeth ar gyfer plant uniongyrchol yn unig, y tilde ar gyfer yr holl frodyr a chwiorydd sy'n digwydd ar ôl yr elfen, ac yr arwydd plws ar gyfer y 1 brawd neu chwaer sy'n dod yn syth ar ôl yr elfen. 

Drwy gyfuno'r dewiswyr a combinators, gallwch ehangu yr amrywiaeth o steilio y gallwch ei gyflawni ar dudalen ar y we a roddir ac ysgrifennu CSS fwy effeithlon. Gyda dim ond ychydig o linellau o CSS byddwch yn fy ngweld teipio yma, Gallaf wneud yn gyflym rhywbeth fel hyn yn edrych fel rhywbeth fel hyn. 

Rwy'n Joseph, ac mae hyn yn CS50. 

[CS50.TV] 

Uh, sut mae dechrau arni? Gadewch i mi wneud hynny heb - [chwerthin] Iawn. Ychwanegu - Gadewch i mi newid y geiriad. Ooh. Mae'n ddrwg gennym.