Post on 21-Dec-2015
Cascading Style
SheetsPart three
Marko Boonhttp://www.win.tue.nl/~marko/
cursusCSS
Positioning
• Margins• Padding• Dimensions• Positioning• Layers and Visibility• Pseudo-Classes• Connection to JavaScript
Part 3
Margins
Property Values
margin-leftmargin-rightmargin-topmargin-bottom
autolength%
Margins define the space around elements.
Margins - Example
body { margin-top:10px; margin-bottom:10px; margin-left:10%; margin-right:auto;}
Padding
Property Values
padding-leftpadding-rightpadding-toppadding-bottom
length%
Padding defines the space between theelement border and the element content.
Padding - Example
td { padding-left:3px; padding-right:3px; padding-top:3px; padding-bottom:3px;}
Padding, Margin and Border shortcutstd { padding-left:1px; padding-right:2px; padding-top:3px; padding-bottom:4px;}
Also applies to:• border-color• border-width• margin
td { padding:3px 2px 4px 1px;}
Dimensions
Property Values
heightwidth
autolength%
line-height normalnumberlength%
Dimensions - Example
body { line-height:1.5;}img { width:60%; border-width:1px; border-style:solid;}
Positioning
Property Values
float left, rightnone
position staticabsoluterelative
Positioning (position = absolute/relative)Property Values
leftrighttopbottom
auto%length
Positioning - Example
<img src="leftupper.jpg" style= "position:absolute;left:5px;top:5px">
<img src="rightupper.jpg" style= "position:absolute;right:5px;top:5px">
Layers and Visibility
Property Values
z-index autonumber
visibility visiblehidden
clip autorect(top right bottom left )
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:blue; position:relative;z-index:5"></span>
Necessary! Otherwisez-index is disregarded!
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:red"></span>
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50"></span>
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50"></span>
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50; z-index:4"></span>
Layers and Visibility - Example 1
<span style="width:200;height:100; background-color:red; position:relative;left:-100;top:50; z-index:4"></span>
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red">Text</span>
Text
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red; visibility:hidden">Text</span>
Text
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red; visibility:hidden">Text</span>
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red;">Text</span>
Text
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red; position: absolute; clip:rect(25 175 75 25">Text</span>
TextClipping needsabsolute position!(but no top, left, …)
Layers and Visibility - Example 2
<span style="width:200;height:100; background-color:red; position: absolute; clip:rect(25 175 75 25">Text</span>
Text
Pseudo-Classes
Used in CSS to add different effects to some selectors, or to a part of some selectors
Pseudo-Classes
selector:pseudo-class { property:value;}
Pseudo-Classesa { text-decoration:none; color:blue;}a:hover { text-decoration:underline; color:blue;}
Other pseudo-classes: a:active a:visited
How to link JavaScript to StyleSheets
Any HTML tag that has an ID, is an object inJavaScript.
<p id="par1">Text</p>HTML:
JavaScript:
p = document.getElementById("par1")
Every HTML object in JavaScript, has thestyle property. This property, which is anobject itself, enables you to use any CSSstyle command:
CSS: border-width, font-sizeJavaScript: borderWidth, fontSizeetc.
How to link JavaScript to StyleSheets
Example of CSS in JavaScript:
<p style="position:relative;left:0"
id="par1">
Some text in a paragraph. </p>
p = document.getElementById("par1");
indent = parseInt(p.style.left);
p.style.left = indent + 10;
Content of the tags P, DIV, SPAN, H2 etc. can be changed in the following way:als volgt gewijzigd worden:<div id="div1">Text </div>
p = document.getElementById("div1");
p.innerHTML = "New text";
How to link JavaScript to StyleSheets
There is a method that returns all elementswith a given tag name:
pArray =
document.getElementsByTagName("p");
for (i = 0; i < pArray.length; i++)
pArray[i].style.left = 10;
How to link JavaScript to StyleSheets
Example: Menus1. Create the menus in a 2 × n table
File Edit Help
Example: Menus2. Add an invisible span
(visibility=hidden) in every lower table cell. Give each span a unique id.File Edit Help
Example: Menus3. Add a table in each span,containing
the menu items.
File Edit Help
Open
Save
Save As
Close
Copy
Cut
Paste
Index
Contents
About
Example: Menus4. Add JavaScript event handlers to the
menus:<a href='javascript:clickMenu(0)' onmouseover='overMenu(0)'>File Edit Help
Open
Save
Save As
Close
Copy
Cut
Paste
Index
Contents
About
Example: Menus5. Add JavaScript event handlers to the
spans:
File Edit Help
Open
Save
Save As
Close
Copy
Cut
Paste
Index
Contents
About
Example: Menus5. Add JavaScript event handlers to the
spans:<span id='menu0'
style='position:absolute; visibility:hidden' onmouseover='overMenu(0)' onmouseout='outMenu(0)'>
Example: Menus
5. Add event handlers to the menu items:<a href='javascript:clickMenuItem(0, 0)'>Open</a>File Edit Help
Open
Save
Save As
Close
Copy
Cut
Paste
Index
Contents
About
Example: Menus
6. Write the JavaScript code:function clickMenu(n) {}
function clickMenuItem(n, m) { outMenu(n); // whatever you want to do // e.g. open a new page}
Example: Menus
6. Write the JavaScript code:function overMenu(n) { hideMenus(); m = document.getElementById("menu"+n); m.style.visibility="visible"; }
function outMenu(n) { m = document.getElementById("menu"+n); m.style.visibility="hidden"; }
Example: Menus
Result in an HTML file:• Click here if you downloaded
everything on your local disk• Click here if you have an Internet connection
Warnings
• almost none of this works in Netscape 4
• there can (and will) always be little differences between Netscape 6+ and Internet Explorer
Test everything in multiple browsers!