Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 03-css1
Document related concepts
Transcript
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
