1 / 12

A really fairly simple guide to: mobile browser-based application development (part 2, CSS)

A really fairly simple guide to: mobile browser-based application development (part 2, CSS). Chris Greenhalgh G54UBI / 2011-02-21. Content. CSS Inline styles Common CSS properties Style-sheets Simple CSS Selectors

takara
Télécharger la présentation

A really fairly simple guide to: mobile browser-based application development (part 2, CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A really fairly simple guide to:mobile browser-based application development (part 2, CSS) Chris Greenhalgh G54UBI / 2011-02-21 Chris Greenhalgh (cmg@cs.nott.ac.uk)

  2. Content • CSS • Inline styles • Common CSS properties • Style-sheets • Simple CSS Selectors Note: you can skip CSS to begin with, and come back to it if and when you need to polish the appearance of you page/application Chris Greenhalgh (cmg@cs.nott.ac.uk)

  3. CSS • Cascading Style Sheets (CSS) is a (set of) standard(s) for specifying the detailed appearance of web pages • CSS has two main parts: • Ways to select elements within the page (document), i.e. “selectors” • Ways to specify the appearance of those elements, i.e. “properties” Chris Greenhalgh (cmg@cs.nott.ac.uk)

  4. Inline styling • CSS properties can be specified directly for individual HTML elements using the style attribute (see next slide) • Pro: • Simple and direct – no seletors • Con: • Must be specified separately for each element • Although by default child elements will inherit some properties, e.g. font Chris Greenhalgh (cmg@cs.nott.ac.uk)

  5. Inline CSS http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body> <h1>Hello</h1> • <p style="font-size: 10"> Some 10-point text, <b>Bold</b> </p> </body></html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  6. Some common CSS properties • background-color, color • E.g. “rgb(255,0,0)” is red • 255/255 red, 0/255 green, 0/255 blue = “#ff0000” = “red” • text-align • centre / right / justify • font-family • serif / sans-serif / monospace • font-size • 10px (pixels), 10pt (point) • border-style • solid, dotted, dashed, … • border-width • width, height • pt, px, … , %, auto, inherit • min-width, max-width, min-height, max-height • position • fixed, relative, absolute • left, right • visibility • hidden (still takes up space) • display • none, inline, block Chris Greenhalgh (cmg@cs.nott.ac.uk)

  7. Stylesheets • An external “stylesheet” is specified using a <link> element in the HTML file header: • <link rel="stylesheet" href="HelloCSS.css" type="text/css"/> • The stylesheet contains a list of entries: • selector{properties } • The properties are applied to all document element(s) matching the corresponding selector Chris Greenhalgh (cmg@cs.nott.ac.uk)

  8. Using Stylesheets • Pros • A single stylesheet specifies appearance for a whole page or site • No duplication of style properties per element • Faster, more concise, easier to be consistent, easier to update • Separation of concerns: all styling done in stylesheet • Cons • Extra file, extra download: if lost then styling lost Chris Greenhalgh (cmg@cs.nott.ac.uk)

  9. Main selector types • Element name • E.g. “p” • Applies to all elements of that name • Element class • E.g. “.CLASS” • Applies to all elements with that “class” attribute • Takes priority over element selector • Element ID • E.g. “#ID” • Applies to the single element with that “id” attribute • Takes priority over element and class selector /* All paragraph elements, */ p { font-family: serif; font-size: 14pt; border-style: solid; border-width: thin; } /* elements with class 'sans' */ .sans { font-family: sans-serif; } /* element with id 'Alice' */ #Alice { color: fuchsia; border-width: thick; font-family: monospace; } Chris Greenhalgh (cmg@cs.nott.ac.uk)

  10. A Simple CSS Example in Use http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloCSS.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hello</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="HelloCSS.css" type="text/css"/> </head> <body> <p>A paragraph.</p> <p>Another paragraph.</p> <p class="sans">Paragraph with class sans</p> <p class="sans">Another paragraph with class sans</p> <p class="sans" id="Alice">Paragraph with class sans and id Alice.</p> </body> </html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  11. Conclusions • CSS is used to specify appearance of the HTML elements and content • Can be specific “inline” per element • Usually specified in a separate Style sheet • You should now be able to • Specify basic styling for an HTML file, both inline and using a stylesheet Chris Greenhalgh (cmg@cs.nott.ac.uk)

  12. Other resources • The WWW Consortium CSS working group, http://www.w3.org/Style/CSS/ • CSS 2.1 specification, http://www.w3.org/TR/CSS2/ • CSS 3 is still being standardised, but many parts of it can be used already • Online tutorials, e.g. • http://www.w3schools.com/ Chris Greenhalgh (cmg@cs.nott.ac.uk)

More Related