[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [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 CSS term i lawr i 2 rhan: Rhaeadru a Dalennau. Rhaeadru yn ychydig yn fwy cymhleth, ac mae'n rhywbeth y byddwn yn ymdrin yn fideo arall. Ond i ddechrau, Taflenni Arddull awgrymiadau yn fawr iawn ar yr hyn CSS yn ei wneud. Mae'n ychwanegu arddulliau i HTML o dudalen we, newid sut y dudalen we yn esthetaidd yn edrych. Mae hyn yn golygu popeth o ffont y testun i leoliad y cynnwys ar y dudalen i bethau cŵl eraill fel gwneud y corneli o focs crwn neu ychwanegu cysgodion i'r testun. Gallwch hyd yn oed wneud pethau gwirion fel gwneud pethau animeiddio ar y sgrin. 

Felly, sut rydym 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 dylunydd ofnadwy." "Gan ddefnyddio 'r ball Times ffont? Helvetica yn gymaint gwell." 

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

Os ydym am arddulliau lluosog ar elfen, ysgrifennwch y datganiadau hyn yn eu trefn. Er enghraifft, os yw Rob am ei destun pennawd yn 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 hanner colon olaf mewn gwirionedd yn ddewisol, ond mae pobl fel arfer yn cadw i mewn er mwyn cysondeb yn. 

Byddwn yn arbed esbonio rhai o'r oerach ac yn fwy cymhleth eiddo CSS gyfer fideo arall. Os oes gennych chi rywbeth mewn golwg, dim ond Googling yr effaith rydych am ei ddilyn gan CSS mae'n debyg y bydd yn rhoi i chi 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 - Gall CSS debygol o wneud hynny. Rydym yn galw y math hwn o steilio steilio inline. Mae arddull elfen yn, wel, yn unol â'r tag cychwyn. 

Ar gyfer Folks sydd yn wirioneddol yn hoffi i gael ei drefnu, efallai y byddwch yn dechrau cael ychydig yn digio ar sut y llanast hyn i gyd yn edrych. Dychmygwch os bu'n rhaid i chi wneud hyn ar gyfer pob elfen ar y dudalen, yn ogystal 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 CSS steilio drwy ddefnyddio rhywbeth o'r enw dewiswyr CSS. Dewiswyr CSS yn cael eu defnyddio i ddewis elfennau y mae datganiadau yn cael eu cymhwyso. Mae detholydd ynghyd â rhestr o ddatganiadau CSS Cyfeirir yn aml at hyn fel rheol CSS. Byddai'r rheolau hyn yn cael eu rhoi rhwng tagiau arddull agor a chau HTML, 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, mae'r dewisydd. Byddwn yn dechrau drwy ddefnyddio un o'r dewiswyr symlaf, y symbol hash, sy'n dewis elfen HTML gan ei priodoledd ID. Yn yr achos hwn byddwn yn dewis y div sy'n cynrychioli Rob Cyflwyniad drwy deipio y symbol hash ddilyn gan ID y div, yn rob. Nawr bod y datganiadau. Rydym yn ychwanegu braces agor a chau a symud ein datganiadau inline cynharach ar Rob div tu mewn hyn braces, adnewyddu, ac, yn oer, Rob intro dal i fod â border du o'i gwmpas heb y hagrwch inline anniben. 

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

Mae'r holl waith hwn yn mynd i ddangos, trwy ddefnyddio rheolau yn hytrach na arddulliau inline gallwn gael cod llawer glanach. Yn wir, os yw hyn yn floc yn null y dechrau mynd braidd yn fawr, Gallaf hyd yn oed dynnu arddulliau hyn allan i ffeil wahanol yn gyfan gwbl. 

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

Yn achos yr ydych chi'n rhyfeddu, y dewiswyr syml yn cynnwys dewiswyr ID ddewiswyr tag ac fel y rhai rydym yn jyst yn gweld dewiswyr dosbarth yn ogystal ag ar gyfer dewis elfennau gyda dosbarth penodol, dewiswyr priodoledd ar gyfer dewis elfennau gan nodweddion eraill megis teip = "radio" ar gyfer mewnbynnau botwm radio, a pseudoselectors fel hofran ac yn canolbwyntio ar gyfer nodi steilio pan fydd rhyngweithio yn hoffi mousing dros elfen yn digwydd. 

Mae'r combinators cyffredin yn cynnwys gofod ar gyfer pob plentyn ac atalnodau i wahaniaethu detholwyr. Eraill y gallech ddod ar eu traws yn cynnwys y saeth i blant 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 brawd neu chwaer 1 sy'n dod yn union ar ôl yr elfen. 

Drwy gyfuno'r detholwyr a combinators, gallwch ehangu ystod y steilio gallwch chi ei gyflawni ar dudalen ar y we a roddir ac ysgrifennu CSS yn fwy effeithlon. Gydag 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, ble ydw i'n dechrau? Gadewch i mi wneud hynny heb - [chwerthin] Iawn. Ychwanegwch - Gadewch i mi newid y geiriad. Www. Mae'n ddrwg gennym.