CSS

1. CSS Jussi Pohjolainen Tampere University of Applied Sciences

2. CSS •  CSS is a stylesheet language used to describe the presenta>on of a document wri@en in markup language •  Usually used with (x)html •  Deﬁning fonts, colors and layout •  Separates document content and presenta>on

3. Some History •  CSS1 spec ﬁnished 1996, it took three years before browsers supported CSS1 •  2000 IE 5.0 for Mac was the ﬁrst browser to fully support CSS1 •  => CSS Filtering •  S>ll hundreds of bugs in browsers

4. CSS Versions •  CSS1 –  W3C Recommenda>on 1996 –  Typography, fonts, text alignment –  No layout and design •  CSS2 –  W3C Recommenda>on 1998 –  Layout, style sheets could be imported, selectors –  Revision to CSS2 -‐> CSS2.1 •  CSS3 –  Several speciﬁca>ons: modules –  Not ready yet, four modules are published under recommenda>on: media queries, namespaces, selectors level 3, Color –  Some func>onality already implemented in browsers

5. Rendering Engines h@p://www.quirksmode.org/css/contents.html

6. <blink> again!? •  April 3rd, 2013 Google launches Blink, a fork of the WebKit browser engine –  h@p://www.chromium.org/blink •  Apple and Google will have their own implementa>ons of WebKit… •  Mozilla and Samsung collabora>ng on new web browser engine –  h@p://blog.mozilla.org/blog/2013/04/03/mozilla-‐and-‐ samsung-‐collaborate-‐on-‐next-‐genera>on-‐web-‐ browser-‐engine/

7. Before CSS •  Presenta>on was part of the document structure: <h2 align="center"> <font color="red" size="+4" face="Times New Roman, serif"> <i>Usage of CSS</i> </font> </h2> •  Many problems…

8. Using CSS •  Structure is clear: <h2>Usage of CSS</h2> •  Presenta>on is clear: h2 { text-align: center; color: red; font: italic large "Times New Roman", serif; }

9. CSS Possibili>es •  Colors, fonts, layout, sizes, borders.. •  Possible to do diﬀerent css – ﬁles for prin>ng, mobile devices, desktop computers. •  See –  h@p://www.csszengarden.com/

10. Linking CSS to Web Document <html> <head> <title>Page</title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> </head> <body> <h1>Title</h1> <p>paragraph</p> </body> </html>

11. Media Types <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> </head> <body> <h1>Title</h1> <p>paragraph</p> </body> </html>

12. Linking •  Linking to external CSS –  <link rel="stylesheet" type="text/css" href="/ style.css" media="screen"> •  The same using @import rule and "internal" style sheet –  <style type="text/css"> –  @import url(/style.css); –  </style>

13. Internal CSS •  To use internal: –  <style type="text/css" media="screen,projec>on"> –  ⋮ CSS rules… –  </style> •  And to use inline –  <ul style="font-‐size:120%; color:#060"> –  ⋮ list items… –  </ul>

14. CSS3 Media Queries •  Media Queries is CSS3 extension –  <link rel="stylesheet" type="text/css" href="/ style.css" media="handheld and (min-‐width: 20em)">

15. CSS3 Media Queries

16. <!DOCTYPE html> <html> <head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)"> body { background-color: RGB(255,0,0); } </style> <script type="text/javascript"></script> </head> <body> The content </body> </html>

17. General Syntax /* A sample style sheet */ @import url(base.css); // at-rule h2 { // rule-set color: #666; font-weight: bold; }

18. CSS Rule Sets •  CSS rule sets –  selector declara>on •  Example: –  h1 { color: blue; } •  h1 = selector •  color: blue; = declara>on

19. Selectors •  Element (h1) •  Class (.important) •  Class (h1.important) •  ID (#important) •  Contextual (h1 p) •  Pseudo (a:link)

20. Element •  XHTML: <h1>Title</h1>! •  Css: h1 {! color: RGB(255,0,0);! }!

21. Class •  XHTML: <h1 class="tarkea">Otsikko</h1>! <p>Tässä tekstiä ja tämä <span class="tarkea">erityisen tärkeää tekstiä</span></p>! <p class="tarkea">Ja tämä vasta tärkeää onkin</p>! •  Css: .tarkea {! color: RGB(255,0,0);! }!

22. Class •  Css: h1.tarkea {! color: RGB(255,0,0);! }!

23. ID •  XHTML: <h1 id="paaotsikko">Otsikko</h1>! •  Css: #paaotsikko {! color: RGB(255,0,0);! }!

24. Contextual •  XHTML: <ul>! <li>Porkkana</li>! </ul>! •  Css: ul li{! color: RGB(255,0,0);! }! •  This is diﬀerent! •  h1, p{! color: RGB(255,0,0);! }!

25. Pseudo •  Example: <a href="http://www.tamk.fi/">TAMK</a>! ! a:link { color: red; }! a:visited { color: blue; }! a:active { color: lime; }! a:hover { color: green; }!

26. Font-‐family •  sans-‐serif, example: Helve>ca •  serif, example: Times •  cursive, example: Zapf-‐Chancery •  fantasy, example: Impact •  monospace, example: Courier •  Example: –  font-‐family: verdana, arial, sans-‐serif

27. font-‐style, font-‐weight •  Font-‐style –  normal (default), italic, oblique –  example: •  font-‐style: italic; •  Font-‐weight: –  normal, bold, bolder, lighter, 100, 200 ... 900 –  normal = 400 –  bold = 700 –  bolder and lighter

28. Lengths and Units •  The value type for many CSS proper>es is speciﬁed as <length>. •  Can be rela>ve or absolute •  Rela>ve units –  em – current font size (1 em) –  ex – x height of the current font (heigth of char x) –  px – pixels, considered as rela>ve since no ﬁxed physical measure •  Absolute units –  mm, cm, in, pt, pc

29. font-‐size •  And even more: –  font-size: x-small; /* absolute */ –  font-size: larger; /* relative */ –  font-size: 12pt; /* unit of length */ –  font-size: 80%; /* percentage */

30. Colors color: red; color: rgb(255,0,0); color: #FF0000; color: #F00; // CSS3 rgba(0, 160, 255, 0.2)

31. Background •  Background color: –  background-‐color: #C0C0C0; •  Background image: –  background-‐image: url("marble.gif"); –  Repeat •  repeat (default): repeat both direc>ons •  repeat-‐x: repeat horizontally •  repeat-‐y: repeat ver>cally •  no-‐repeat: no repeat –  background-‐a@achment: ﬁxed | scroll •  Is the image s>ll or does it move when scrolling

32. Background Image Posi>on background-position: right top; /* right upper-corner */ background-position: 100% 0%; /* right upper-corner */ background-position: 100%; /* right upper-corner */ background-position: center bottom;/* center bottom */ background-position: 50% 100%; /* center bottom */ background-position: 100%; /* right top */ background-position: 50% 10px; /* center 10 pixels from top */

33. Text Features •  word-‐spacing •  le@er-‐spacing •  text-‐decora>on –  underline –  overline –  line-‐through –  blink

34. Text Features •  ver>cal-‐align –  baseline, middle, sub, super, text-‐top, text-‐bo@om, top, bo@om, prosenxluku •  text-‐transform –  capitalize, uppercase, lowercase •  text-‐align –  ley, right, center, jus>fy •  text-‐indent •  line-‐height

35. CASCADE, SPECIFICITY AND INHERITANCE

36. Cascade // What now? h1 { background-color: rgb(100,100,100); } h1 { color: rgb(255,0,0); }

37. Cascade // And now? h1 { background-color: rgb(100,100,100); } h1 { background-color: rgb(255,0,0); }

38. Process of Resolu>on 1.  For a given property, find all declara>ons that apply to a specific element. 2.  Sort the declara>ons according to their levels of importance, and origins. –  !important statement –  origin? user-‐agent css, author css (link), user css 3.  Sort declara>ons with the same level of importance and origin by selector specificity. –  h@p://reference.sitepoint.com/css/specificity 4.  Finally, if declara>ons have the same level of importance, origin, and specificity, sort them by the order in which they’re specified; the last declara>on wins.

39. Inheritance •  Pass proper>es from parent to child •  CSS div { font-size: 20px; } •  HTML <div> <p> This <em>sentence</em> will have a 20px <a href="#">font-size</a>. </p> </div>

40. LAYOUT AND FORMATTING

41. XHTML Related CSS Elements •  You can group XHTML – page using div and span elements •  div and span elements do not do anything, unless they are connected to css •  xhtml: –  <p>Text text text <span class="important">text text</span>. Text text text.</p> •  CSS: –  span.important { color: RGB(255,0,0); }

42. span and div? •  By using div, you can divide xhtml – page in to logical pieces. The posi>on of these are deﬁned in CSS –  Example: naviga>on, header, footer, contents •  Span is used to give layout for text

43. span and div <div class="header"> <h1>Title</h1> </div> <div class="contents"> <p>Contents: <span class="highlight">this is different</span></p> </div> <div class="footer"> <p>Copyright 2008</p> </div>

44. Layout Basics •  XHTML page is divided into “boxes” by using the div-‐element •  Box consists of –  Width –  Padding –  Border –  Marginal

45. CSS Box Model

46. CSS Box Model p.leipateksti { border: 1px solid black; }

47. CSS Box Model p.leipateksti { border: 1px solid black; width: 50%; }

48. CSS Box Model p.leipateksti { border: 1px solid black; padding: 20px; }

49. CSS Box Model p.leipateksti { border: 1px solid black; margin: 20px; }

50. Features •  Margins –  margin-top –  margin-bottom –  margin-left –  margin-right –  All together: margin •  Padding –  padding-‐top –  padding-‐bo@om –  padding-‐ley –  padding-‐right –  All together: padding

51. Features •  Borders –  border-top-width –  border-bottom-width –  border-right-width –  border-left-width –  border-width –  border-color –  border-style (none, dotted, solid, double, groove, ridge, inset, outset) •  Combina>ons –  border-top –  border-right –  border-bottom –  border-left •  All together –  border

52. Features •  width •  height •  float (none, left, right)

53. h1 { Example font-family: Arial, Helvetica, sans-serif; color: RGB(0,0,255); background-color: RGB(200,200,200); border: 2px dotted RGB(0,0,0); padding: 10px; text-align: center; }

54. Posi>oning •  PosiJon property is used to define whether box is absolute, rela>ve, sta>c or fixed –  staJc – default value –  relaJve – box can be offset (top, right, bo@om, ley) –  absolute – pulls the box out of normal flow, can be placed anywhere (top, right, bo@om, ley) –  fixed – like absolute, but when scrolling stays in the same place

55. <!DOCTYPE html> <html> <body> <head> <>tle> <nav id="navigation"> <ul> Title <li><a href="this.html">This</a></li> </>tle> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> <meta charset="UTF-‐8"> </ul> <style type="text/css" media="screen"> </nav> #navigaJon { posiJon: absolute; <section id="content"> top: 0; <h1>Title</h1> leT: 0; <p>Text text.</p> width: 200px; </section> </body> } </html> #content { margin-‐leT: 200px; } </style> <script type="text/javascript"></script> </head>

56. Floa>ng •  Problem in previous example is that there is now way to determine when absolute box ends –  How to put footer below these boxes? •  Use ﬂoaJng box –  Floa>ng a box will shiy it to the right or ley of a line, with surrounding content ﬂowing around it.

57. HTML <nav id="navigation1"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </nav> <nav id="navigation2"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </nav> <section id="content"> <h1>Title</h1> </section> <footer> <p>kk</p> </footer>

58. CSS #navigation1 { border: 1px solid black; float: left; width: 200px; } #navigation2 { border: 1px solid black; float: right; width: 200px; } #content { border: 1px solid black; margin: 0 200px; } footer { border: 1px solid black; }

59. Result

60. Clear •  If you don't want next box to wrap around the ﬂoa>ng objects, use clear –  clear: ley –  clear: right –  clear: both •  Let's add –  footer { –  border: 1px solid black; –  clear: both; –  }

61. Result

62. Example: Layout using divs <html> <head><title>Otsikko</title></head> <body> <!– whole page inside one div --> <div id="wholepage"> </div> </body> </html>

63. Example: Layout <html> <head><title>Otsikko</title></head> <body> <div id="wholepage"> <div id="header"> <!– Title --> </div> <div id="navigation"> <!– Navigation --> </div> <div id="contents"> <!– Contents --> </div> <div id="footer"> <!– Footer --> </div> </div> </body> </html>

64. Example: Layout #wholepage { width: 100%; background-color: RGB(255,255,255); color: RGB(0,0,0); border: 1px solid RGB(100,100,100); } ! !

65. Example: Layout #header { padding: 10px; background-color: RGB(220,220,220); border-bottom: 1px solid RGB(100,100,100); } #navigation { float: left; width: 160px; margin: 0; padding: 10px; } !

66. Example: Layout #contents { margin-left: 200px; border-left: 1px solid RGB(100,100,100); padding: 10px; max-width: 600px; } #footer { padding: 10px; color: RGB(100,100,100); background-color: RGB(220,220,220); border-top: 1px solid RGB(100,100,100); clear: both; } !

67. Result

68. SOME CSS3 EXAMPLES

69. <!DOCTYPE html> <html> <head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="screen"> #roundCorners { border: 5px solid #8b2; background: #fc0; padding: 20px; border-radius: 0px 10px 30px 50px; box-shadow: 15px 15px 3px 5px #999; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); } </style> <script type="text/javascript"></script> </head> <body> <section id="roundCorners"> The content </section> </body> </html>

70. A@ribute selectors •  abbr[title] { border-bottom: 1px dotted #ccc } •  input[type=text] { width: 200px; } •  [this^=that] will match a the value of an attribute (“this”) that begins with something (“that”) •  [this$=that] will match a the value of an attribute (“this”) that ends with something (“that”) •  [this*=that] will match a the value of an attribute (“this”) that contains with something (“that”), be it in the beginning, middle, or end.

71. <!DOCTYPE html> <html> <head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="screen"> a:link { transition: all .5s ease 0; font-size: 1em; color: hsl(36,50%,50%); } a:hover { color: hsl(36,100%,50%); font-size: 2em; } </style> <script type="text/javascript"></script> </head> <body> <section> <a href="">The content</a> </section> </body> </html>

72. #moldme { position:absolute; top:50%; left:50%; margin:-150px 0 0 -150px; width: 300px; height: 300px; background: hsl(36,100%,50%); // only in webkit (transform: is standard) -webkit-transform: rotate(-10deg); -webkit-transform: skew(20deg,10deg); background: linear-gradient(orange, red); }

CSS

Esté a ler uma amostra.

Confira estes a seguir

CSS

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a CSS (20)

Mais de Jussi Pohjolainen (20)

Mais recentes (20)

CSS