320 likes | 752 Vues
NSWI142 – Web Applications. Lecture 3 – CSS (Part 1) Martin Nečaský , Ph.D. necasky @ksi.mff.cuni.cz. 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
E N D
NSWI142 – Web Applications Lecture 3 – CSS (Part 1) Martin Nečaský, Ph.D. necasky@ksi.mff.cuni.cz Web Applications (NSWI142 ), Lecture 3
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
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
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
CSS Lecture Content • CSS2.1 • Basics • Examples Web Applications (NSWI142 ), Lecture 3
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
CSS Hello World (2/2) h1 { color:red; } • CSS style saying that H1 headings will be red • h1is a selector – selects HTML elements affected by the following style • Syntax: <selector> { property1: value1; property2: value2; } Web Applications (NSWI142 ), Lecture 3
CSS – How to add to a web page • Sometimes appropriate: • To the HTML head add: <style> • <style type="text/css">…</style> • Content of the element is the stylesheet itself • 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 stylesheets • For various media, browsers, … • Not recommended: Inline style • <p style="font-size: 5pt;" >…</p> Web Applications (NSWI142 ), Lecture 3
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
CSS and (X)HTML • idand classattributes 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: <pclass="blue">…</p> • In CSS we will exploit the div and span elements Web Applications (NSWI142 ), Lecture 3
(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
Selectors (1/5) – classes and IDs example1_id_class.html Web Applications (NSWI142 ), Lecture 3
(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: blue; } #redword{ color: red; } Web Applications (NSWI142 ), Lecture 3
(X)HTML - <div> and <span> - example XHTML: <table> <trclass="odd"> <td>1-1</td><td>1-2</td></tr> <trclass="even"><td>2-1</td><td>2-2</td></tr> <trclass="odd"> <td>3-1</td><td>3-2</td></tr> <trclass="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
Selectors (2/5) - attributes example3_striped_table_attributes.html Web Applications (NSWI142 ), Lecture 3
Selectors (3/5) – pseudo-classes • <a>when the mouse pointer is over it a:hover{ background-color: yellow; } • :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 example4_hover.html Web Applications (NSWI142 ), Lecture 3
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 THATwill 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
Selectors (5/5) – more • More selectors • * - matchesany element • E > F – matchesany F element thatis a childofan element E • E:first-child – matches element E whenitis a firstchildofitsparent • E:lang(c) – matches element E whenitis in language c • E + F – matches F element immediatelypreceded by a sibling element E example6_first_child.html example7_sibling.html Web Applications (NSWI142 ), Lecture 3
Selectorcombinationexamples • h1em { color:blue } • <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1> • Matches EM thatis a descendantof 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 beforecontentofeach <p class=„special“>content</p> • Will render the "S" of "Special!" in gold. Web Applications (NSWI142 ), Lecture 3
Properties and values • Some properties have multi-part values • border-width: 9px; • 9 pixels on all sides • border-width: 10px0px10px0px; • 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
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
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 0px0px; border-width:5px; } example9_box.html Web Applications (NSWI142 ), Lecture 3
Borders • Border • Interestingproperties: • border-width:width + units; • border-style: • [solid|dotted|double|none|dashed|hidden|groove|ridge|inset|outset]; • border-color:color Web Applications (NSWI142 ), Lecture 3
Position • position: static; • Normal placement according to content flow • Ignores top, left, right, bottom • position: relative; • Position relative to normal • Using top, left, right, bottom • position: fixed; • Position in the browser window, takes only necessary space • Using top, left, right, bottom • 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 example11_position_static.html example12_position_relative.html example10_position_fixed.html example13_position_absolute.html Web Applications (NSWI142 ), Lecture 3
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
@import rule • Importsotherstylesheets • Mustprecedeallotherrules (except @charset) @import "mystyle.css"; @import url("mystyle.css"); • Canbe media dependent @import url("fineprint.css") print;@import url("bluish.css") projection, tv; Web Applications (NSWI142 ), Lecture 3
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
Cascading • 3 sourcesofrules: Author, User, User-agent • Somerulesmaybemarked !important • body { color: black !important; } • Sort according to importance (higheris more important) • user agent declarations • user normaldeclarations • authornormaldeclarations • authorimportantdeclarations • user importantdeclarations • Sort ruleswiththesameimportance and origin by specificity • More specificselectorwilloverride more generalones • Finally, sort by specifiedorder Web Applications (NSWI142 ), Lecture 3
Counters • Usedforautomatednumbering • 2 properties • counter-increment • Incrementsspecifiedcounters by anoptionallyspecifiedvalues (default 1) • counter-reset • Setsspecifiedcounters to optionallyspecifiedvalues (default 0) BODY { counter-reset: chapter; /* Create a chaptercounterscope */ } 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
Lists • Special list properties • Applyto elementswith display: list-item • (X)HTML: <li> <ul> <ol> • list-style-type • disc | circle | square | decimal | decimal-leading-zero | lower-roman | 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 • Setswhetherthe list symbol isinsideoroutsidethe box • outside | inside Web Applications (NSWI142 ), Lecture 3
Tables • Documentlanguageelementsmustbemapped to table elementsusingthedisplayproperty (e.g. XML languages) • For HTML4: table { display: table } tr { display: table-row} thead { display: table-header-group} tbody { display: table-row-group} tfoot { display: table-footer-group} col { display: table-column} colgroup { display: table-column-group} td, th { display: table-cell } caption { display: table-caption } Web Applications (NSWI142 ), Lecture 3
Validation • How to determinewhether a style isvalid? • doesitcomplywiththe CSS2.1 standard? • http://jigsaw.w3.org/css-validator • Validates a link to a pageusing CSS • Validatesthrough a direct input ofthe CSS style3 Web Applications (NSWI142 ), Lecture 3