Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
NSWI142 – Web Applications Lecture 3 – CSS (Part 1) Martin Nečaský, Martin Kruliš Web Applications (NSWI142 ), Lecture 3 1 CSS • Style and appearance is no longer a part of (X)HTML • CSS is used for that • CSS – Cascading Style Sheets – (X)HTML contains data to display – CSS says how to display it • CSS sources: http://www.w3schools.com/css/ http://www.w3.org/Style/CSS/ Web Applications (NSWI142 ), Lecture 3 2 CSS Levels • Instead of versions – Each level extends and refines the previous one • CSS Level 1 – CSS1 specification obsolete – CSS Level 1: features from CSS1 in CSS2.1 syntax • CSS Level 2 – CSS2 became W3C Recommendation before there was a „Candidate Recommendation“ stage - many problems over time – CSS Level 2 Revision 1 (CSS2.1) created, obsoleted CSS2, Defines CSS Level 2 • • W3C Recommendation 07 June 2011 CSS Level 3 – – – – Modular instead of a monolithic document Core: CSS2.1 Modules add/replace features of CSS2.1 Each module levels individually (Selectors Level 4 before Line Module Level 3) • current status: http://www.w3.org/standards/techs/css#w3c_all Web Applications (NSWI142 ), Lecture 3 3 CSS Profiles • Not all implementations will implement all functionality defined in CSS. – CSS Mobile Profile 2.0 – CSS Print Profile 1.0 – CSS TV Profile 1.0 Web Applications (NSWI142 ), Lecture 3 4 CSS Lecture Content • CSS2.1 – Basics – Examples Web Applications (NSWI142 ), Lecture 3 5 CSS Hello World (1/2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a composer. </BODY> </HTML> CSS: h1 { color: red; } Web Applications (NSWI142 ), Lecture 3 6 CSS Hello World (2/2) h1 { color: red; } • CSS style saying that H1 headings will be red • h1 is a selector – selects HTML elements affected by the following style • Syntax: <selector> { property1: value1; property2: value2; } Web Applications (NSWI142 ), Lecture 3 7 CSS – How to add to a web page 1. Sometimes appropriate: – – – To the HTML head add: <style> <style type="text/css">…</style> Content of the element is the style sheet itself 2. Better: External style – – – – – One style for multiple web pages A separate file, e.g. style.css To the HTML head add: <link> <link rel="stylesheet" href="style.css"/> Possibly multiple style sheets • For various media, browsers, … 3. Not recommended: Inline style – <p style="font-size: 5pt;" >…</p> Web Applications (NSWI142 ), Lecture 3 8 Example body { background-color: green; font-weight: bold; color: white; } • This time we specify a style for the whole <body> • The style is inherited – E.g. <p> elements inside <body> styled like this unless overwritten Web Applications (NSWI142 ), Lecture 3 9 CSS and (X)HTML • id and class attributes can be specified for each (X)HTML element – One id uniquely identifies ONE specific element – One class can be assigned to MULTIPLE elements • These (X)HTML attributes are commonly used for CSS styles (and other things – JavaScript, …) • Using CSS we can say: – „heading with id="xy" will be red“ – „each element with class="blue" will be blue • Example: <p class="blue">…</p> • In CSS we will exploit the div and span elements Web Applications (NSWI142 ), Lecture 3 10 (X)HTML - <div>, <span> Block and inline elements • <div> and <span> are elements without HTML meaning • But they can have id and class attributes • They are used for specifying various web page and text parts for formatting • There are 2 visual types of (X)HTML elements according to CSS – Block • • • • Takes up all available width Followed by a newline <div>, <h1>, <p>, <ul>, <ol>, <li>, … This behavior can be forced by display: block; even for inline elements – Inline • • • • Takes up only necessary width Not followed by a newline <span>, <i>, <b>, <img>, <input>, … This behavior can be forced by display: inline; even for block elements Web Applications (NSWI142 ), Lecture 3 11 Selectors (1/5) – classes and IDs elements with class="blue" .blue { color: blue; } the element with id="red" #red { color: red; } example1_id_class.html Web Applications (NSWI142 ), Lecture 3 12 (X)HTML - <div> and <span> - example XHTML: <div class="blue"> <p>This is my blue paragraph</p> <p>Red <span id="redword">word</span> </p> </div> CSS: div.blue color: } #redword color: } { blue; { red; Web Applications (NSWI142 ), Lecture 3 13 (X)HTML - <div> and <span> - example XHTML: <table> <tr class="odd"> <td>1-1</td><td>1-2</td></tr> <tr class="even"><td>2-1</td><td>2-2</td></tr> <tr class="odd"> <td>3-1</td><td>3-2</td></tr> <tr class="even"><td>4-1</td><td>4-2</td></tr> </div> CSS: tr.odd { background-color: white; } tr.even { background-color: grey; } example2_striped_table.html Web Applications (NSWI142 ), Lecture 3 14 Selectors (2/5) - attributes elements with a title attribute [title] { color: blue; } elements with an attribute with a specific value type="text" [type=text] { color: blue; } [alt~=myTitle] { color: red; } elements with an attribute with a specific value alt="myTitle" in a space separated list elements with an attribute with a specific value alt="myTitle" in a "-" separated list [lang|=cs] { color: blue; } example3_striped_table_attributes.html Web Applications (NSWI142 ), Lecture 3 15 Selectors (3/5) – pseudo-classes • <a> when the mouse pointer is over it a:hover { background-color: yellow; example4_hover.html } • :visited – visited link • :link – unvisited link • :active – when the user activates the element • :hover – when the mouse pointer is over it – Works with multiple elements, not just <a> • :focus – when an element has focus Web Applications (NSWI142 ), Lecture 3 16 Selectors (4/5) – pseudo-elements • :first-line – p:first-line { text-transform: uppercase } – <P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence.</P> – THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several … • :first-letter • :before, :after – Insert content before resp. after the actual content example5_first_line.html Web Applications (NSWI142 ), Lecture 3 17 Selectors (5/5) – more • More selectors – * - matches any element – E > F – matches any F element that is a child of an element E – E:first-child – matches element E when it is a first example6_first_child.html child of its parent – E:lang(c) – matches element E when it is in language c – E + F – matches F element immediately preceded by a sibling element E example7_sibling.html Web Applications (NSWI142 ), Lecture 3 18 Selector combination examples • h1 em { color:blue } – <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1> – Matches EM that is a descendant of H1 • div p *[href] – matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV • p.special:before {content: "Special! "} p.special:first-letter {color: #ffd800} – Generates „Special!“ text before content of each <p class=„special“>content</p> – Will render the "S" of "Special!" in gold. Web Applications (NSWI142 ), Lecture 3 19 Properties and values • Some properties have multi-part values • border-width: 9px; – 9 pixels on all sides • border-width: 10px 0px 10px 0px; – Order: top, right, bottom, left – Top and bottom 10 pixels, left and right none • Units – Absolute: px, pt, pc, in, cm, mm – Relative: em, ex – No space between value and unit! • font-size: 12pt; example8_border.html Web Applications (NSWI142 ), Lecture 3 20 Colors • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow • numerical – red, green, blue - rgb(123,123,123) – 0-255 – #ffffff – hexadecimal http://www.w3.org/TR/CSS21/syndata.html#color-units Web Applications (NSWI142 ), Lecture 3 21 Box model • CSS based on a box model • Each element has – – – – Margin – distance from border to another box Border Padding – between border and main content Content – the content of the element itself div { margin: 10px 0px 0px 0px; border-width: 5px; } example9_box.html Web Applications (NSWI142 ), Lecture 3 22 Borders • Border • Interesting properties: – border-width: width + units; – border-style: • [solid|dotted|double|none|dashed|hidden|groove |ridge|inset|outset]; – border-color: color Web Applications (NSWI142 ), Lecture 3 23 Position 1. position: static; – Normal placement according to content flow – Ignores top, left, right, bottom 2. position: relative; – Position relative to normal – Using top, left, right, bottom 3. example11_position_static.html example12_position_relative.html position: fixed; example10_position_fixed.html – Position in the browser window, takes only necessary space – Using top, left, right, bottom example13_position_absolute.html 4. position: absolute; – Absolute in the content of the parent, takes only necessary space – Using top, left, right, bottom – Possible overlays of multiple elements • z-index: -1; • Larger the z-index means more in front Web Applications (NSWI142 ), Lecture 3 24 Floating float: right; float: left; • Element floats left or right • Content floats around it • Suitable for example for navigation box on the left • Or for an image with text around it example14_float.html Web Applications (NSWI142 ), Lecture 3 25 @import rule • Imports other stylesheets – Must precede all other rules (except @charset) @import "mystyle.css"; @import url("mystyle.css"); • Can be media dependent @import url("fineprint.css") print; @import url("bluish.css") projection, tv; Web Applications (NSWI142 ), Lecture 3 26 Inheritance • body { font-size: 10pt } h1 { font-size: 130% } • <BODY> <H1>A <EM>large</EM> heading</H1> </BODY> • 'font-size' for H1 element will have the computed value '13pt‚ – (130% times 10pt, the parent's value) • the computed value of 'font-size' is inherited – the EM element will have the computed value '13pt' as well. • If the user agent does not have the 13pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '12pt'. Web Applications (NSWI142 ), Lecture 3 27 Cascading • 3 sources of rules: Author, User, User-agent • Some rules may be marked !important – body { color: black !important; } • Sort according to importance (higher is more important) 1. 2. 3. 4. 5. user agent declarations user normal declarations author normal declarations author important declarations user important declarations • Sort rules with the same importance and origin by specificity – More specific selector will override more general ones • Finally, sort by specified order Web Applications (NSWI142 ), Lecture 3 28 Counters • • Used for automated numbering 2 properties – counter-increment • Increments specified counters by an optionally specified values (default 1) – counter-reset • Sets specified counters to optionally specified values (default 0) BODY { counter-reset: chapter; /* Create a chapter counter scope */ } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Web Applications (NSWI142 ), Lecture 3 example15_counters.html 29 Lists • Special list properties – Apply to elements with display: list-item • (X)HTML: <li> <ul> <ol> – list-style-type • disc | circle | square | decimal | decimal-leading-zero | lowerroman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit – list-style-image • ul { list-style-image: url("http://png.com/ellipse.png") } – list-style-position • Sets whether the list symbol is inside or outside the box • outside | inside Web Applications (NSWI142 ), Lecture 3 30 Tables • Document language elements must be mapped to table elements using the display property (e.g. XML languages) • For HTML4: table tr thead tbody tfoot col colgroup td, th caption { { { { { { { { { display: display: display: display: display: display: display: display: display: table } table-row } table-header-group } table-row-group } table-footer-group } table-column } table-column-group } table-cell } table-caption } Web Applications (NSWI142 ), Lecture 3 31 Validation • How to determine whether a style is valid? – does it comply with the CSS2.1 standard? • http://jigsaw.w3.org/css-validator – Validates a link to a page using CSS – Validates through a direct input of the CSS style3 Web Applications (NSWI142 ), Lecture 3 32