17.6.2015jaana holvikivi1 cascading style sheets css - cascading style sheets language cascading...
Post on 20-Dec-2015
257 views
TRANSCRIPT
18.04.23 Jaana Holvikivi 1
Cascading Style Sheets
CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for
adding style (e.g. fonts, colors, spacing) to Web documents
designed for HTML in 1996 CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (working drafts) browser support (better than for XSL)
CSS1 IE5 onwards, Firefox, etc. CSS level 2 IE8, Firefox, Opera http://www.w3schools.com/css/css_reference.asp
own syntax
18.04.23 Jaana Holvikivi 2
CSS rules CSS style rules:
Each rule starts with a tag name followed by a list of style properties bracketed
by { and } tag name defines the element Each style property starts with the property's name,
then a colon and lastly the value for this property. When there is more than one style property in the list, you need to use a semicolon between each of them
• property : value• property – i.e. font-size• value – i.e. 16 pt'
h2 {font-size: 16pt; font-weight:bold} latest rule is valid
18.04.23 Jaana Holvikivi 3
Using inline styles
<html><!-- Exercise 1: inline style -->
<head><title>XML - Inline Styles</title></head><body><p>This text does not have any style applied to it.</p><!-- The style attribute allows you to declare inline --><!-- styles. Separate multiple styles with a semicolon. --><p style = "font-size: 20pt">This text has the <em>font-size</em>style applied to it, making it 20pt.</p>
<p style = "font-size: 20pt; color: #0000ff">This text has the<em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p></body></html>
18.04.23 Jaana Holvikivi 4
Internal styles
<html><!-- Exercise 2: internal style --><head><title>XML: introduction to CSS </title>
<!-- Declaring a style in the header section --><style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif }
p { font-size: 14pt }.special { color: blue }
</style></head>
<body><!-- This class attribute applies the .blue style --><h1 class = "special">Main heading</h1><p> For st etc.
18.04.23 Jaana Holvikivi 5
External styles
<html><head>
<title> Linking an external style sheet </title><link rel = "stylesheet" type = "text/css" href = "style4.css"></head>
<body>
/* Example: style4.css *//* External style sheet */a.nodec { text-decoration: none; }a:hover { text-decoration: underline;
color: red;background-color: #ccffcc; }
li em { color: red; font-weight: bold; }ul { margin-left: 2cm; }
18.04.23 Jaana Holvikivi 6
Some points of CSS examples
in HTML: <span style =”clear: right”>here a non-floating part of
text is started. Span is used to delimit a text area for exceptional formatting.</span>
div defines a separate paragraphdiv {text-align: center; margin-bottom: 1em}
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.
in CSS: em refers to the relative size of text
18.04.23 Jaana Holvikivi 7
Cascading Style Sheets
<body>
<div>
<b>
<h1> <p>
Inheritance
18.04.23 Jaana Holvikivi 8
Inheritance
<style type="text/css"> body {color : red} h1 {color : blue} p {font-family: helvetica, arial, sans-serif; padding: 2px} </style>
18.04.23 Jaana Holvikivi 9
Text boxes
padding: 2pt 3 pt 4pt 5pt between frame and content
margin: 2px 3px 4px 5px between boxes (order: top, right, bottom, left) margin-left, margin-right, etc.
width: 50%; height: auto size of image
float: left /* right */ (makes the box float) clear: both /* left, right*/ (no floating)
18.04.23 Jaana Holvikivi 10
Text boxes
block
inline
page
content
margins
block
border
margin
padding
18.04.23 Jaana Holvikivi 11
How the browser sets priority for style definitions
Styles declared as important by the page creator {color : red !important }
Styles declared as important by the user Normal styles by the page creator Normal styles by the user Default styles by the browser if there are no user styles
18.04.23 Jaana Holvikivi 12
External information : Pseudo-classes and pseudo-elements
normally CSS styles are based on HTML tags and attributes. Sometimes it is not sufficient.
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
Anchor pseudo-class: Links (LINK) are VISITED or ACTIVE Example:
a:link {color : red} a:visited {color : blue} a:active {color : white}
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it.
18.04.23 Jaana Holvikivi 13
Some pseudo-elements
P.INITIAL:FIRST-LETTER {font-size : 200 %} P.INITIAL:FIRST-LINE {text-transform : uppercase} The :first-child pseudo-class matches an element that is
the first child of some other element.
18.04.23 Jaana Holvikivi 14
Using CSS on HTML pages
Generalized use Write style definitions to fit several pages, preferably
the entire site. If you need page specific styles, use the STYLE attribute inside the document.
Scalability Avoid using absolute values for font size, margins,
etc. Users can have very different browsers, screen resolutions, window sizes, etc. Use relative measures.
18.04.23 Jaana Holvikivi 15
Using CSS on HTML pages
Test the styles with different browser versions, Design your pages to work also without style sheet
support Browsers behave and render pages in non-standard
ways! Select fonts with care
people may not have all nice fonts on their PC Don’t push it too far!
Not every single element and attribute needs a pre-set value.
18.04.23 Jaana Holvikivi 16
XML and CSS
calling an external CSS from an XML-document <?xml-stylesheet href="my.css" type="text/css“?>
HTML: CSS refers to standard tags (<p> is paragraph, <em> inline text)
XML: you need to explicitly define block elements, inline elements, etc.
18.04.23 Jaana Holvikivi 17
XML and CSS
display: block paragraph {display: block}
display: inline name {display:inline}
display: none element is hidden
display: list-item
18.04.23 Jaana Holvikivi 18
XML and CSS2 example
<?xml-stylesheet type="text/css" href="bach.css"?><article> <headline>Fredrick the Great meets Bach
</headline> <author>Johann Nikolaus Forkel</author> <para> One evening, just as he was getting his <instrument>flute</instrument> ready and his
musicians were assembled, an officer brought him a list of the strangers who had arrived.
</para> </article>
18.04.23 Jaana Holvikivi 19
XML and CSS2 example
article, headline, author, para { display: block }headline { font-size: 1.3em }author { font-style: italic }article, headline, author, para { margin: 0.5em }instrument { display: inline }
18.04.23 Jaana Holvikivi 20
XML and CSS: internal styles and images
internal styles in XML<?xml-stylesheet type="text/css"
href="#internalstyles" ?> picture reference
<style id="internalstyles">logo_img {background-image:url(mylogo.jpg); width: 125px;height:110 px; position: relative}
</style><logo_img/><p>Welcome to our institute!</p>
18.04.23 Jaana Holvikivi 21
XML and Cascading Style Sheets: Examples
sidebars and tables<?xml-stylesheet type="text/css" href="#internalstyles"?><style id =”internalstyles”>
style {display : none}document {display : block}heading {display : block; font-size:24pt;}p {display : block; font-family: Arial; position:relative;}sidebar {display : block; float: right; border:inset 3pt;
background-color:#C0C0FF;}sidebar heading{display : block; font-size: 18pt;}sidebar p{display:block; font-size: 10pt;}</style>
18.04.23 Jaana Holvikivi 22
XML and CSS: Lists
<!–- example.css -->employees {display:block; visibility:visible;}employee {display:list-item;list-style-type:disc}lastName {display : inline; font-size:12pt;}firstName {display : inline; font-size:12pt;}salary {display : none;}
18.04.23 Jaana Holvikivi 23
XML and CSS: tables
tables have poor browser support (Mozilla only) <!– table.css -->
employees {display:table;}employee {display:table-row;}firstName {display : table-cell;}lastName {display : table-cell;}title {display : table-cell;} salary {display : table-cell;}
18.04.23 Jaana Holvikivi 24
Encoding: ASCII
0 1 0 0 0 0 0 1 AA
Encoding
“A” is represented by this bit pattern1 byte= 8 bits
“A” is represented by this bit pattern1 byte= 8 bits
18.04.23 Jaana Holvikivi 25
ASCII -character setCharacter ASCII Code Character ASCII Code
A 100 0001 0 011 0000B 100 0010 1 011 0001C 100 0011 2 011 0010D 100 0100 3 011 0011E 100 0101 4 011 0100F 100 0110 5 011 0101G 100 0111 6 011 0110H 100 1000 7 011 0111I 100 1001 8 011 1000J 100 1010 9 011 1001K 100 1011 Space 010 0000L 100 1100 . 010 1110M 100 1101 ( 010 1000N 100 1110 + 010 1011O 100 1111 & 010 0110P 101 0000 $ 010 0100Q 101 0001 * 010 1010R 101 0010 ) 010 1001S 101 0011 ; 011 1011T 101 0100 , 010 1100U 101 0101 - 101 1111V 101 0110 ? 011 1111W 101 0111 : 011 1010X 101 1000 = 011 1101Y 101 1001
Character ASCII Code Character ASCII CodeA 100 0001 0 011 0000B 100 0010 1 011 0001C 100 0011 2 011 0010D 100 0100 3 011 0011E 100 0101 4 011 0100F 100 0110 5 011 0101G 100 0111 6 011 0110H 100 1000 7 011 0111I 100 1001 8 011 1000J 100 1010 9 011 1001K 100 1011 Space 010 0000L 100 1100 . 010 1110M 100 1101 ( 010 1000N 100 1110 + 010 1011O 100 1111 & 010 0110P 101 0000 $ 010 0100Q 101 0001 * 010 1010R 101 0010 ) 010 1001S 101 0011 ; 011 1011T 101 0100 , 010 1100U 101 0101 - 101 1111V 101 0110 ? 011 1111W 101 0111 : 011 1010X 101 1000 = 011 1101Y 101 1001
18.04.23 Jaana Holvikivi 26
ASCII American Standard Code for Information Exchange
7 bit 2 7 = 128 8 bit 28 = 256 , including control characters ANSI, ISO Latin-1: 8 bit codes Unicode (IBM, Microsoft, Sun) 16 bit encoding: 216 = 65 536 ISO 10646 four bytes
Encoding standards
18.04.23 Jaana Holvikivi 27
White space
space, linefeed, tabulators character Unicode valuetab #x9newline #xAcarriage return #xDspace #x20
linefeed in different OSs:MacOS CRUnix LFWindows CR LF
18.04.23 Jaana Holvikivi 28
White space
space, linefeed, tabulators HTML simply ignores XML: in principle white space is kept normalization:
spaces between elements removed line breaks are replaced by space spaces from beginning and end of a block are
removed quotations around literals are removed entity references are replaced by corresponding
character strings if you wish to keep the white space:
white-space: pre /* normal, nowrap */
18.04.23 Jaana Holvikivi 29
CSS2 extensions
CSS2 includes CSS1 plus extensions: location of an element book * title { ...} /* sub-elements of book element */ book > title { ...} /* title-child-elements of book-
element title + para { ... } /* para-elements which follow the
title-element */ para: first-child { ...} /* para-element’s 1. child */
18.04.23 Jaana Holvikivi 30
CSS2 extensions
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content note:before {content:"NOTE: "; font-weight:bold} note:after {content:"!!!"}
18.04.23 Jaana Holvikivi 31
CSS2 extensions :before and :after
example: <STYLE>
P.Juliet {font-style:italic;}P.Juliet:before {content: ”Juliet: ”;color:red;}P.Romeo {font-style:bold;}P.Romeo:before {content: ”Romeo: ”;color:blue;}</STYLE><P class=”Romeo”>Hark! What light on yonder window
breaks?></P><P class=”Juliet”> Romeo? Romeo? Wherefore art thou,
Romeo?></P>
18.04.23 Jaana Holvikivi 32
CSS2 extensions
reference to attribute value title:before { content: attr(author) } course:after { content: "(" attr(for:) ")" }
element selection based on an attribute value para[security] { ...} /*attribute exists */ para[security="secret"] { ...} para[keywords~="css"] { ...} /* one of the values
is css */ [security="secret"] { ... } /* all elements with
attribute security and value secret */
18.04.23 Jaana Holvikivi 33
CSS2 extensions media
aural: sound @media aural {
document{play-during:url(backgroundmusic.mp3) repeat mix;}title {voice-family:’Elvis’ male;volume:medium;}}
@media visual @media braille @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @page