Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,

Similar presentations


Presentation on theme: "CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,"— Presentation transcript:

1 CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University in Prague, Czech Republic

2 CSS Statements

3 Syntax  CSS style sheet consists of statements of two kinds  rule set selector { property-name-1: property-value-1; … property-name-N: property-value-N; }  {…}

4 Sample Rule Set div { padding: 10px; background-color: lightblue; border: 2px solid blue; }

5 Sample "print-basic.css" print { div { padding: 10px; background-color: lightblue; border: 2px solid blue; }

6 Namespace At-Rule  namespaces may be declared  externally in document which uses style sheet e.g. XML document using well-know XML namespace mechanisms  internally in the style svg "http://www.w3.org/2000/svg";

7 CSS MEDIA queries

8 Media Queries  W3C Candidate Recommendation 27 July 2010  allows styling single web page for different devices, e.g.  printer  tablet/phone (landscape, portrait)  low resolution laptop  …

9 Media Queries  where you can use media query?  media at-rule CSS statements inside at-rule are applied only to specified media  media attribute of link element in HTML CSS statements in linked CSS file are applied only to specified media  import at-rule imported CSS statements are applied only to specified media

10 Media Queries and ( ) and … and ( )

11 Media Queries and ( ) and … and ( )  media – stands for media type  screen  print  braile  projection  tv  …  all

12 Media Queries and ( ) and … and ( )  feature-name: value  allowed features:  width value – length width of display area of output device  height value – length height of display area of output device  orientation value – landscape or portrait orientation of display area of output devide  …  most of them (e.g. width, height ) may be supplemented with min- and max- prefix (to avoid )

13 Media Queries /* iPad landscape all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) { /* statements */ } css_12.html

14 CSS Selectors

15 Selectors  selector is chain of one or more sequences of simple selectors separated by combinators S0 C1 S1 … Cn Sn  where  S0, …, Sn are sequences of simple selectors  C1, …, Cn are combinators (whitespace, >, +, ~ )  “algorithm”: if (n==0) then return each element selected by Sn else return each element selected by Sn which is in the relationship specified by Cn to an element selected by S0 C1 S1 … C(n-1) S(n-1)

16 Selectors  sequence of simple selectors is chain of simple selectors that are not separated by combinator S0S1…Sn  where S0, …, Sn are simple selectors  “algorithm”:  if (n==0) return each element selected by Sn  else return each element selected by S0…S(n-1) which is also selected by Sn  simple selector is one of the following:  type selector, universal selector, attribute selector, class selector, ID selector, pseudo-class and pseudo-element

17 Selectors – Few Examples  two simple selectors separated by + combinator div + div  three simple selectors separated by > combinator ol#topMenu > li.menuItem[label$="navigation"] > a  two simple selectors separated by whitespace combinator tr:last-child td:not(:first-child):not(:last-child)

18 Combinators  whitespace combinator: A B  specifies descendant relationship  selects all elements selected by B which are descendants of any element selected by A  > combinator: A > B  specifies child relationship  selects all elements selected by B which are child of any element selected by A  + combinator: A + B  specifies adjacent sibling relationship  selects all elements selected by B which have same parent as and immediately follow any element selected by A  ~ combinator: A ~ B  specifies sibling relationship  selects all elements selected by B which have same parent as and follow (not necessarily immediately) any element selected by A

19 Type Simple Selector E { … }  elements with name E in document tree Do you know the concept of XML namespaces?

20 Type Simple Selector and Namespaces ns|E { … }  elements with name E from namespace with declared prefix ns *|E { … }  elements with name E from any namespace or without namespace |E { … }  only elements without namespace E { … } ↔ *|E if no default namespace ↔ dns|E if default namespace has prefix dns

21 Type Simple Selector and Namespaces  see css_03.xml

22 Universal Simple Selector * { … }  all elements in document tree

23 Universal Simple Selector and Namespaces ns|* { … }  all elements from namespace with declared prefix ns *|* { … }  all elements |* { … }  all elements without namespace * { … } ↔ *|* if no default namespace ↔ dns|* if default namespace has prefix dns

24 Universal Simple Selector  see css_04.xml  see css_04,5.xml

25 Attribute Simple Selector [att] { … }  all elements with att attribute (whatever value) [att=val] { … }  all elements with att attribute with value val [att~=val] { … }  all elements with att attribute with value being a sequence of (white space separated) words containing word val

26 Attribute Simple Selector [att^=val] { … }  all elements with att attribute with value starting with val  nothing if val is empty [att$=val] { … }  all elements with att attribute with value ending with val  nothing if is empty val [att*=val] { … }  all elements with att attribute with value containing one or more occurrences of val  nothing if val is empty [att|=val] { … }  all elements with att attribute with value val or with value starting with val followed by ‘ - ’ (intended primarily, but not only, to matching language codes)

27 Attribute Simple Selector  see css_05.html

28 Attribute Simple Selector and Namespaces [ns|att] { … }  all elements with att attribute from namespace with declared prefix ns [*|att] { … }  all elements with attribute att from any namespace or without namespace [|att] { … }  all elements with attribute att without namespace  XML notes:  default namespace does not apply to attributes  attribute gains namespace of its element

29 Class and ID Simple Selector.val { … } ↔ [class~=val]  all elements having class attribute with value being a sequence of (white space separated) words containing word val #val { … } ↔ [idattr=val]  all elements having ID-attribute with value val  ID-attribute ( idattr ) may be given explicitly (e.g. by DTD or XSD) or implicitly (e.g. HTML ID attribute)

30 Class and ID Selector  see css_06.html

31 Pseudo-Classes :pseudo-class  all XML elements which belong to pseudo- class with name pseudo-class  dynamic pseudo-classes  classify elements on characteristics which cannot be deduced from document tree  structural pseudo-classes  classify elements on their structural relationships which are not covered by other kinds of simple selectors

32 Dynamic Link Pseudo-Classes :link  links that have not yet been visited :visited  links that have been already visited

33 Dynamic User Action Pseudo-Classes :hover  elements being designated with pointing device by user :active  elements being activated by user :focus  elements having focus

34 Dynamic User Action Pseudo-Classes  see css_07.html

35 Dynamic Target Pseudo-Class :target  link target elements  applied when link is “activated” by user TEXT TEXT TEXT

36 Power of Pseudo-Classes Can you make “switching panels” with CSS? css_08.html Can you make “switching panels” with CSS? css_08.html

37 Structural Pseudo-Classes :nth-child(an+b)  all elements whose position in the list of all elements with the same parent can be counted with an+b  where a and b are fixed integers (positive, negative, 0 ) given by CSS developer  n means ‘iteration variable’ (0,1,2,…)  first element within its parent has position 1, non-element nodes (text nodes) are not counted  special values odd and even  examples: :nth-child(2n+0) – positions 2, 4, 6, …, i.e. even elements :nth-child(2n+1) – positions 1, 3, 5, …, i.e. odd elements :nth-child(8n+1) – positions 1, 9, 17, … :nth-child(even) = :nth-child(2n+0) :nth-child(odd) = :nth-child(2n+1)

38 Structural Pseudo-Classes :nth-child(an+b)  b may be 0 : :nth-child(3n+0) – positions 3, 6, 9, … :nth-child(3n) – shortcut for :nth-child(3n+0)  b may be negative: :nth-child(5n-1) – positions 4, 8, 12, …  a may be 0 : :nth-child(0n+5) – each fifth element within its parent :nth-child(5) – shortcut for :nth-child(0n+5)  a may be negative:  only positive positions which can be counted by an+b target elements :nth-child(-n+3) – positions 1,2,3

39 Structural Pseudo-Classes :nth-last-child(an+b)  all elements whose position FROM THE END in the list of all elements with the same parent can be counted with an+b  examples: :nth-last-child(-n+2) – last two elements in each parent

40 Structural Pseudo-Classes Can you make the following “chess-board” with CSS :nth- child, :nth-last-child ?

41 Structural Pseudo-Classes  see css_09.html

42 Structural Pseudo-Classes :nth-of-type(an+b), :nth-last-of-type(an+b)  variants of previous which consider only elements with the same type as the object element :first-child = :nth-child(1) :last-child = :nth-last-child(1) :first-of-type = :nth-of-type(1) :last-of-type = :nth-last-of-type(1) :only-child = :first-child:last-child  but lower specificity :only-of-type = :first-of-type:last-of-type  but lower specificity :empty  elements without children  only child elements, text, CDATA and entity references count

43 Negation Pseudo-Class :not(PS)  all elements which do not correspond to pseudo-class PS

44 Negation Pseudo-Class Can you make the following “chess-board” (only the boundary rows and columns are white)?

45 Negation Pseudo-Class  see css_10.html

46 Pseudo-Elements :first-letter :first-line

47 Pseudo-Elements :before :after  intended for generated content  generated content is content which does not come from document tree  e.g. numbered list or numbering chapters  generated content is specified by content property with value:  string  uri  counter  attr(X)  … and special values for generating quotes

48 Pseudo-Elements  see css_11.html

49 CSS Cascading

50 Cascading  every element in document tree must have value for every property that applies to target media type  three different sources of style sheets:  author web developer who creates style sheets and associates them with documents  user user agent may allow users to specify their own style information (e.g. “everything bigger”)  user agent default style sheets of user agent which allow displaying non-styled elements (e.g. default HTML or default XML)

51 Cascading  cascade assigns weight to each property in each style sheet statement (1 is lowest weight): 1.user agent properties 2.user properties 3.author properties 4.author important properties 5.user important properties  if element in document tree may have more values for the same property the one with highest weight is applied  important properties are those followed by !important keyword

52 Cascading  if element in document tree may have more values for the same property with the same cascading weight select the one with the highest specificity  specificity of property declaration in statement is counted on the base of the following three values:  A = 1 if declaration is in style att, 0 otherwise  B = number of ID selectors in statement selector  C = number of class selectors, attribute selectors and pseudo-classes in statement selector  D = number of type selectors and pseudo-elements in statement selector  (universal selector is ignored)  specificity = ABCD

53 Cascading td (B=0, C=0, D=1  specificity 0001) td:hover (B=0, C=1, D=1  specificity 0011) td:nth-child(-n+2) (B=0, C=1, D=1  specificity 0011) tr:nth-child(2n) td:nth-child(2n+1) (B=0, C=2, D=2  specificity 0022) /* almost winner */ tr:nth-child(2n) td:nth-child(2n+1) { background-color: black; } /* looser */ td:nth-child(-n+2) { background-color: orange; } /* beats all */ td:hover { background-color: pink !important; }

54 Inheritance  if element does not have property value it may inherit it from its parent in document tree  Not all properties are inherited  in general  text related properties are inherited (e.g. color, font )  box related properties are not inherited (e.g. border, float )  keyword inherit  property is inherited (even if it is not inherited by default) *{ border: inherit; }

55 Thanks for your attention


Download ppt "CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,"

Similar presentations


Ads by Google