Vefforritun - Lokapróf - Css

Front 1

Hvað er CSS?

Back 1

CSS er style sheet language semlýsir framsetningu á skjali skrifuðu í markup language, t.d. HTML, XHTML, XML. CSS er hannað til að aðskilja efni frá útliti.

Front 2

Hver staðlar CSS?

Back 2

W3C.

Front 3

Hvernig tengjum við HTML og CSS, hvernig er æskilegt og hvernig á ekki að gera það?

Back 3

Í æskilegri röð: 1.' link rel="stylesheet href="..." ' í ' head ' - viðhöldum algjörum aðskilnaði. <2. ' style ' blokk í HTML skjali, helst í ' head ' - ekki alveg jafn hreint en aðskiljum þó frá markup. <3.style attribute á element - alls ekki æskilegt þar sem við erum að binda útlit við element í markup.

Front 4

Hvernig eru CSS reglur skilgreindar?

Back 4

Reglusett saman stendur af komma aðgreindum selectorum og skilgreiningar blokk. Skilgreiningarblokkir skilgreinast af { og } og innihalda enga eða fleiri yfirlýsingar aðgreindar með ;. Yfirlýsing byrjar á nafni eigindis, tvípunkti og gildi eigindis.

Front 5

Hvað eru @ reglur?

Back 5

@reglur senda reglur til CSS túlks t.d. @import sem innifelur annað CSS skjal. @media sem skilgreinir að ákveðnar reglur eigi við ákveðna gerð efnis, t.d. bara prent.

Front 6

Hvað er shorthand?

Back 6

Skilgreining í einni yfirlýsingu fyrir mörg gildi með svipaða virkni.

Front 7

Hvernig geta gildi litið út í CSS?

Back 7

Heiltölur og rauntölur (með punkt, td 1.2), prósentum, þá sem hlutfall (td af stærð foreldris eða gefnu gildi vafra), Strengir (td "this is a 'string'" og "this is a \"string\""), litir (lykilorð:black,white... og hex, RGB, HSL og HSLA).

Front 8

Hvernig vinnum við með lengdir í CSS?

Back 8

Í nákvæmum einingum (in,cm,mm,pt,pc,px) eða hlutfallslegum einingum (em og ex. 1 em = skilgreind breidd í pt(t.d. 12pt) á letri nema þegar stærð leturs er skilgreint, þá stærð foreldris. 1 ex = hæðin á x í leturgerð)

Front 9

Hvað eru selectors?

Back 9

Selectors eru notaðir til að skilgreina eitthvað ákveðið í CSS. Klasar eru valdnir með '.', id attribute: '#', gervi-klasa eða -element: ':', class attribute: '[ og ]', heiti á element t.d. p, öll element með '*' (ekki æskilegur, getur verið hægur). Hægt er að tengja saman selectors með bili, > eða +. Bil þýðir að seinna er innan fyrra, einhversstaðar í tré. > er strangt barn. + er systkini.

Front 10

Hvað eru gervielement og gerviklasar?

Back 10

Gervielement eru element sem eru utan skilgreiningar skjals, t.d. :before/:after - element sem er fyrir framan/aftan það sem skilgreint er, :first-letter - fyrsti stafur elements, :first- line - fyrsta lína elements. Gerviklasar eru klasar sem eru notaðir þar sem nafn, attribute eða efni er ekki nægjanlegt, þeir geta verið dýnamískir, t.d. :first-child - fyrsta barn elements, :focus - element sem er í fókus hjá notanda.

Front 11

Hvað er eðlilegt flæði (normal flow)?

Back 11

Block - element sem eru sniðin sjónrænt sem blokkir(td málsgreinar) sem fylla upp í breidd foreldris. < Inline - element sem forma ekki blokkir heldur er efni dreift í línur. < display eigindi stillir hvernig element hegðar sér, t.d. block, inline, inline-block, list-item, none.

Front 12

Hvernig notum við staðsetningu (position) í CSS?

Back 12

position eigindi stillir hvernig element hegðar sér. Þá getum við sagt til um hvar við viljum hafa elementið.

Front 13

Hver er munurinn á static, relative, absolute og fixed?

Back 13

static - eðlilegt flæði, relative - hlutfallslegt í eðlilegu flæði, absolute - skilgreinum algjörlega hvar box birtist, fixed - skilgreinum útfrá glugga hvar box er fast.

Front 14

Hvað er float?

Back 14

float er CSS staðsetningar eiginleiki. Skilgreint með float:left,right eða none. Ekki í eðlilegu flæði, heldur er boxi 'fleytt' til hægri eða vinstri m.v. línu sem það er í. Ef það er ekki nóg lárétt pláss er boxi ýtt niður þar til það kemst fyrir.

Front 15

Hvað er clearfix?

Back 15

Sett af CSS reglum sem neyðir foreldri sem er með börn með float að ná yfir öll börnin.

Front 16

Hvernig virkar þriðja víddín í CSS?

Back 16

Liggja á z-ás, ræðst af stacking order, eigum við með z-index: n; sem setur stacking order eftir okkar höfði.

Front 17

Hvernig virkar box módelið?

Back 17

Það er box sem liggur í kringum hvert HTML element. Leyfir okkur að bæta border, padding og margin á elementið.

Front 18

Hvað eru margin, padding og border?

Back 18

padding kemur utan um contentið sjálft og stækkar sjálft elementið, t.d. button. border kemur utan um content eða padding ef þ.e. til staðar. Margin ýtir öðrum elementum frá og kemur utan um content og padding, border ef þ.e. til staðar. Vídd boxs er: vídd + left&right margin + left&right border + left&right padding. Hæð boxs er: hæð + top&bottom margin + top&bottom border + top&bottom padding.

Front 19

Hvernig virkar box-sizing í tengslum við boxið?

Back 19

content-box; - sjálfgefið gildi, allt tekið með í reikninginn, border-box; - aðeins margin er tekið með í reikninginn.

Front 20

Hvað er sértækni (specificity)?

Back 20

Specificity er þegar browserinn ákveður hvaða CSS eiginleika eru mikilvægastir fyrir elementið og munu þar með vera settir á. Reiknað sértækni gildi fyrir hvern selector sem er á forminu (a,b,c,d) þs a=1 ef style á elementi en ekki í reglu annars 0, b = fjöldi id skilgreininga, c= fjöldi annarra attribute'a og gervi-klasa, d = fjöldi elementa og gervi-elementa. Gildinu er svo skeytt saman í tölu sem er sértækni.

Front 21

Hvað er cascade?

Back 21

"flóðið". Allar skilgreiningar fyrir element fundnar og raðað eftir: < 1.Skilgreiningum user agents (yfirleitt vafri) < 2. Skilgreiningum notanda (ef til) < 3. Skilgreiningum höfundar (yfirleitt vefs) < 4. Skilgreiningum höfundar merkt með !important. < 5. Skilgreiningum notanda merkt með !important < 6. Raðað eftir sértækni < 7. Raðað í skilgreiningar röð þar sem seinna skilgr vinnur.

Front 22

Hvernig eru gildi reiknuð í CSS?

Back 22

Skilgreint gildi: Ef flóðið gefur okkur gildi þá notum við það, annars erft gildi, annars upphafsgildi. Reiknað gildi: reiknað úr hlutfallslegum gildum eins langt og hægt er, t.d. hlutfallsleg breitt m.v. foreldri. Notað gildi: fáum nákvæm gildi úr öllum (leyst úr háðum gildum). Raungildi: gildi notað við birtingu, t.d. þarf að rúna tölur að einhverjum aukastaf.

Front 23

Hvað er CSS3?

Back 23

Nýjasta útgáfa af CSS, mikið af eftirsóttum nýjungum. Þróað í einingum svo það verður aldrei CSS4.

Front 24

Hvað eru shim, polyfill og fallbacks?

Back 24

Shim (shiv) er virkni sem er stungið inn og veitir virkni frá nýju API í gömlu umhverfi. Polyfill er kóði eða plugin sem veitir þér aðgang að virkni sem þú grf að vafrinn bjóði uppá þeas shim fyrir vafra API. Fallback er þegar við skilgreinum gildi sem við erum viss um að allir styðji en yfirskrifum síðan.

Front 25

Hvað eru vafraforskeyti?

Back 25

Meðan vafri er ekki með fullkominn stuðning við staðal eru vafraforskeyti (vendor prefixes) oft notuð til að bjóða upp á stuðning (-moz-column-count, -webkit-animation, -ms-transition).

Front 26

Hvernig vinnum við með letur í CSS?

Back 26

font-family skilgreinir hvaða leturgerð við viljum nota (í röð: font-family: helvetiva, arial, sans-serif;). font-style: italic - skásetur letur eða normal. font-variant: smallcaps; - setur "rétt" all caps á texta. Getum hlaðið inn leturgerðum með @font-face og notað eins og annað letur. Þurfum letur í mismunandi formum fyrir mismunandi vafra. Notum með fallback á letur sem við treystum. font-weight - setur þyngd leturs, viljum yfirleitt bold. font-size - setur stærð leturs. line-height - setur hæð línu (hlutfall af leturstærð).

Front 27

Hvernig vinnum við með texta í CSS?

Back 27

text-transform - styrir hvort texti sé aðeins í hástöfum (uppercase), lágstöfum (lowercase) eða fyrsti stafur í hverju orði í hástöfum (capitalize). text-decoration - stýrir strikun gegnum texta (underline, overline, line-through). text-shadow setur skugga á letur (text-shadow: offset-x | offset-y | blur-radius | color).

Front 28

Hvernig vinnum við með bakrunn í CSS?

Back 28

background - stillir bakgrunn á element. background-color - setur lit á bakgrunn, sjálfgefið gildi er gegnsætt(transparent). background-image - setur mynd á bakgrunn eftir slóð. background-repeat: segir til um hvernig bakgrunnurinn endurtekur sig (repeat, repeat-x, repeat-y). background-position - skilgreinir hvar myndir birtist. background-attachment skilgreinir hvernig bakgrunnur hagar sér í skrolli (scroll eða fixed(fastur)). shorthand( background: [color] [image] [repeat] [attachment] [postion]).

Front 29

Hvað er CSS reset?

Back 29

Hver vafri stillir sitt user agent stylesheet, CSS reset setur öll element í núllstöðu

Front 30

Hvernig virka id og class með CSS?

Back 30

Hægt er að stíla sérstakt id og class í HTML með því að setja #id í reglu eða .class

Front 31

Hvað er responsive web design?

Back 31

Skalanleg vefhönnun. Byggir á: sveigjanlegu umbroti (byggðu á grind), sveigjanlegum myndum og miðlum, CSS media queries.

Front 32

Hvað er mobile first?

Back 32

Hugmyndafræði að best sé að byrja á að hanna vefinn út frá minnstu skjástærð fyrst og vinna sig svo upp. (progressive enhancement)

Front 33

Hvað er graceful degradation?

Back 33

Byggjum fyrir ákveðna upplifun sem krefst nýrrar tækni. Brotnum tignarlega niður og gefum síðri upplifun í eldri tækni. Þ.e. byrjum flókið og lögum okkur niður.

Front 34

Hvað er progressive enhancement?

Back 34

Byrjum með upplifun sem krefst minnstu mögulegrar tækni. Bætum virkni við eins og stuðningur er til staðar. Byrjum einfalt og vinnum okkur upp.

Front 35

Hvað er sveigjanleg grind?

Back 35

Notum hlutfallsleg gildi, ekki nákvæm.

Front 36

Hvernig reiknum við gildi fyrir responsive?

Back 36

target/context = result. Notum því % eða em.

Front 37

Hvað eru media queries?

Back 37

Ákveðnir brotpunktar í hönnun og breytum flæði, stillum með media queries.

Front 38

Hvað eru CSS pre-processors?

Back 38

CSS er ekki með breytur, föll, aðgerðir eða slíkt. Er verið að þróa lausnir sem bæta svona virkni við - preprocessors.

Front 39

Hvað eru CSS frameworks?

Back 39

t.d. bootstrap CSS.