Embed Size (px)
Citation preview
3.2 Cascading Style Sheets
2
Positioning Elements
• Normally, elements are laid out on the page in the order that they are defined in the XHTML document
• position property – better control over page layout– position=absolute
• removes element from the normal flow
• positions it based on specified distance from the top, left, right or bottom margin of its parent element
– position=relative• keeps element in the normal flow
• offsets them by the specified top, left, right or bottom value
3
Overlapp Depth
• z-index property – layers overlapping elements– an element with higher z-index value is
displayed in front of elements with lower z-index values
4
Element Types
• Block-level elements– displayed on their own line– have virtual boxes around them
• <p>, <h1> through <h6>, <div>
• Inline-level elements– do not change the flow of the document
• <img>, <a>, <strong>, <em>, <span>
5
Grouping Elements
• Create a section element that– can be marked with id attribute
• this mark can be referenced later on
– can have CSS rules applied to
• <span>– inline-level grouping element
• <div> – block-level grouping element
6
Background
• Block-level elements can have color or an image as background– property background-color: see last lecture
– property background-image: URL of the image
– property background-position• position on the page: e.g., values top, bottom, center, right • individually or in combination vertical and horizontal
– property background-repeat: tiling
• values repeat, repeat-x, repeat-y, no-repeat
– property background-attachment:
• whether image moves when page is scrolled
• values fixed or scroll,
7
Element Dimensions
• properties height and width– set element's size– values can be relative or absolute
• Attention– content may exceed the given size
• make it large enough to fit
– property overflow=scroll• adds scrollbars if the text overflows
8
Text Alignment
• property text-align– values center, left, right
9
Box Model and Text Flow
• The box model defines the virtual box of block-level elements– box model defines space surrounding each element– padding
• the distance between the element’s edge and the content inside• properties padding-top, padding-right, padding-left, padding-bottom
– margin• the distance between the element’s edge and any outside text• properties margin-top, margin-right, margin-left, margin-bottom
– border property
• When an element is moved out of the normal flow, other content in the document will flow around it
10
Box Model
11
CSS Drop-Down Menu
• :hover pseudoclass – styles applied to an element when the mouse
cursor is over it
• display property – decides if an element is displayed as a block
element, inline element, or not rendered at all (none)
12
Menu Rendered
13
Menu: Body<body>
<div class = "menu">Menu
<a href = "#Home">Home</a>
<a href = "#News">News</a>
<a href = "#Articles">Articles</a>
<a href = "#Blog">Blog</a>
<a href = "#Contact">Contact</a>
</div>
</body>
14
Menu: CSS<style type = "text/css">
body { font-family: arial, sans-serif }
div.menu { font-weight: bold;
color: white;
border: 2px solid #225599;
text-align: center;
width: 10em;
background-color: #225599 }
div.menu:hover a { display: block }
div.menu a { display: none;
border-top: 2px solid #225599;
background-color: white;
width: 10em;
text-decoration: none;
color: black }
div.menu a:hover { background-color: #dfeeff }
</style>
15
Media Types
• CSS media types – allow to define different layouts for different
kinds of displays– screen: computer screen– print: when for printed– handheld: mobile Internet devices– aural: for text-to-speech– braille: for printing in braille
16
Media Types: Form
• @media all – block of style rules for all media types – enclosed in {}
• @media print – block of style rules for print – enclosed in {}
• etc.
17
Guidelines
• Pages with light text on dark background colors use a lot of ink when printed (and are hard to read), especially on a black-and-white printer. Use the print media type with black text on white background
• While sans-serif fonts look better on a screen, serif fonts look better on paper. Use the print media type to display sans-serif font on screen and serif font when it is printed.
![Advanced XHTML & CSS Part 3 - Simon Fraser University · CSS rules Inheritance “is a way of propagating [cascading] property values from parent elements to their children.” --](https://img.pdfslide.net/doc/110x75/5fc68ef6fb02d714856ee7e9/advanced-xhtml-css-part-3-simon-fraser-university-css-rules-inheritance.jpg)
