The Art of CSS

Post on 15-Feb-2017

43 views 1 download

Transcript of The Art of CSS

THE ART OF CSSBECAUSE IT CAN BE A MESS

PRISCILACNG

WHENEVER THERE A CHANGE IN VIEW INWEBPAGE THAT IS CSS CHANGE THATEFFECTS POSITION, WIDTH ORANYTHING ELSE, THE GEOMETRY OFELEMENTS AND ALL THE OTHERELEMENTS AFFECTED IS CALCULATED BYTHE BROWSER. THIS PROCESS ISKNOWN AS REFLOW

REFLOWONCE THE REFLOW IS DONE THEBROWSER PAINTS THE AFFECTED PARTON THE SCREEN THIS IS KNOWN ASREPAINT

REPAINT

LAYOUT DISPLAYFLOATPOSITION

"THE MOST IMPORTANT PROPERTY FORCONTROLLING LAYOUT. EVERY ELEMENTHAS A DEFAULT DISPLAY VALUEDEPENDING ON WHAT TYPE OF ELEMENTIT IS. THE DEFAULT FOR MOST ELEMENTSIS USUALLY BLOCK OR INLINE"

THE PROPERTYDISPLAY

THE PROPERTYDISPLAY

FLEXBOX

GRID

"THE FLOAT CSS PROPERTY SPECIFIESTHAT AN ELEMENT SHOULD BE TAKENFROM THE NORMAL FLOW AND PLACEDALONG THE LEFT OR RIGHT SIDE OF ITSCONTAINER, WHERE TEXT AND INLINEELEMENTS WILL WRAP AROUND IT"

THE PROPERTYFLOAT

THE PROPERTY FLOAT

"THE POSITION CSS PROPERTY CHOOSESALTERNATIVE RULES FOR POSITIONINGELEMENTS, DESIGNED TO BE USEFUL FORSCRIPTED ANIMATION EFFECTS."

THE PROPERTYPOSITION

THE PROPERTY POSITION

SELECTORS CSS COMBINATORSPSEUDO-CLASSESPSEUDO-ELEMENTS

"A COMBINATOR IS SOMETHING THATEXPLAINS THE RELATIONSHIP BETWEENTHE SELECTORS"

CSSCOMBINATORS

CSS COMBINATORS

"PSEUDO-CLASS IS A KEYWORD ADDED TOSELECTORS THAT SPECIFY A SPECIAL STATE OFTHE ELEMENT. A PSEUDO-CLASS ALWAYSCONSISTS OF A "COLON" ( : ) FOLLOWED BY THENAME OF THE PSEUDO-CLASS AND OPTIONALLYBY A VALUE BETWEEN PARENTHESES."

PSEUDOCLASSES

PSEUDO CLASSES

PSEUDO CLASSES

PSEUDO CLASSES

PSEUDO CLASSES

"PSEUDO-ELEMENTS ARE LIKE VIRTUALELEMENTS THAT WE CAN TREAT AS REGULARHTML ELEMENTS. A PSEUDO-ELEMENT ISMADE OF TWO COLONS (: : ) FOLLOWED BYTHE NAME OF THE PSEUDO-ELEMENT."

PSEUDOELEMENTS

PSEUDO ELEMENTS

UNITSEMREMVH/VW

UNITS

REAL LIFEEXAMPLE

A FRIENDLYWARNING

http://bit . ly/2kFALWdhttp://bit . ly/2ldmoF8http://bit . ly/2l93zabhttp://bit . ly/2kDoGkchttp://bit . ly/2l8SSEC

https://mzl. la/1O9wNfHhttp://bit . ly/2k0xEsphttp://bit . ly/2loxpr8

https://mzl. la/2kx3YzZhttp://bit . ly/2k83naY

- REFERENCES -

MERCIET À BIENTÔT

PRISCILACNG