Transcript Cascading Style Sheets

Cascading Style Sheets
Part 3
Spring, 2008
Modified by Linda Kenney
April 21, 2008
Types of elements
• We’ve seen that elements can be categorized according
to their syntax as either container elements or empty
elements.
– It’s often useful, however, to also categorize elements
according to their general behavior.
• Block-level elements
• Replaced elements
• Inline elements
Types of elements
-- Block-level elements
• Block-level elements define blocks of text by
providing a line break at the end of their contents.
– Note that this has nothing to do with the <br /> element
we mentioned earlier.
– For example, a <p>…</p> element is a block-level
element because there is an implied line break at the end
of every paragraph.
Examples of Block level elements
Types of elements
-- Replaced elements
• Replaced elements are placeholders that
eventually get replaced with something by the
browser.
– For example, a <br /> element is a replaced element
because the browser will eventually replace it with an
actual line break.
– Others?
Types of elements
-- Inline elements
• Inline elements are elements that modify or mark
their contents in some way without implying a line
break at the end.
– For example, an <em>…</em> element is an inline
element because it can be used to selectively emphasize
portions of a block (such as a paragraph) without forcing
the block to end.
Examples of Inline elements
Types of elements (cont.)
– For the most part, block-level and inline
elements will be container elements and
replaced elements will be empty elements.
– What’s the difference?
• Block level elements may be contained
only within other block level elements.
• Inline elements may be contained within
other inline elements or within block level
elements.
• Replaced elements may be contained
within block level elements.
CSS tools for block level elements
• Give a block of text height or width
• Create padding
• Move the block to any location on the
web page.
Setting a width
<style type="text/css">
body {
font-family: Verdana;
}
.attentiongrab {
width: 50%;
font-weight: bold;
}
</style>
See:
http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/ex
amples/01_setting_a_width/width.html
Setting a height
<style type="text/css">
#mainnavigation {
background-color: #FFCC33;
color: navy;
font-weight: bold;
width: 200px;
height: 300px;
}
</style>
http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/02_setting_a_height/h
eight.html
• What happens when the navigation items
are too big to fit into the space allowed?
• Check with IE and Firefox
The box model
•
Every element within a Web page is contained within a box.
–
–
–
–
The element itself occupies the content area of this box.
The content area is surrounded by optional padding.
The padding is surrounded by an optional border.
And the border is surrounded by an optional margin (Determines the empty
space between the element and adjacent elements).
CSS Properties for Borders
• border-width
• border-style
• border-color
Setting the width of borders
• The simplest way to set the width of a box’s
border is to use the border-width property.
– This property can accept one to four space-separated
values.
• If there is only one value, it will be used for all four borders.
• If there are two values, the first will be used for the top and
bottom borders and the second will be used for the left and
right borders.
• If there are three values, the first will be used for the top, the
second will be used for the left and right, and the third will be
used for the bottom.
• If there are four values, they will be used for the top, right,
bottom and left, respectively.
– TRBL (pronounced “trouble”) is a common mnemonic
border-width
• The values may be length values or any of the
three keywords: thin, medium or thick.
– The default value is medium.
border-style
• The border-style property is used to
control the appearance of a box’s border.
– It can accept one to four space separated
values.
• The values are interpreted and applied as they are
for the border-width property.
• There are nine valid keyword values.
– They are dotted, dashed, solid, double, groove, ridge,
inset, outset and none.
– The default is none, so the borders of a box will remain
invisible until this property is set to something else.
border-color
• By default, an element’s foreground color
is used as the color of its box’s border.
– To set a different color for the border, use the
border-color property.
• It can accept one to four space-separated color
values, which are interpreted and applied as they
are for the border-width property.
• There are also properties for controlling
each side of the border separately.
– border-top-width (or –style or –color)
– border-right-width (or –style or –color)
– border-bottom-width (or –style or –color)
– border-left-width (or –style or –color)
Shorthand properties for
borders
• There are several shorthand properties to
simplify more common border settings.
– The most general is the border property,
which can be used to set the width, color
and/or style of all four sides of the border
simultaneously.
• Simply list the desired width, style and/or color
values separated by spaces as the value of the
border property.
– There are also separate shorthand properties
for setting the width, color and/or style of each
side of a border.
• They are border-top, border-right, borderbottom and border-left.
• For each, simply list the desired width, style and/or
color value in a space-separated list as its value.
Examples
• See Border Examples:
http://pubpages.unh.edu/~ltv6/cis599/sampl
es/chapter4/
Setting box padding
• The area between a box’s content area and its
border is the box’s padding.
– By default, the width of this padding is 0.
– The simplest way to set a box’s padding is to use the
padding property.
• This property can accept one to four space-separated values.
– Those values may be length values or percentages.
– They are interpreted and applied as above.
– There are also properties for controlling each
side of the padding separately.
•
•
•
•
padding-top
padding-right
padding-bottom
padding-left
– The padding of a box is filled with the same
background color or image as the element’s
content area.
• Padding example:
http://pubpages.unh.edu/~ltv6/cis599/sampl
es/chapter4/examples/04_padding/paddin
g.html
margins
• margin specifies how much space should
exist outside the border.
– This property can accept one to four spaceseparated values.
margins (cont.)
– There are also properties for controlling each
side of the margin separately.
• They are margin-top, margin-right, marginbottom and margin-left.
– The margin of a box is always transparent.
– The top and bottom margins of adjacent
elements are “collapsed”.
• Only the larger of the two is used, the other is
ignored.
• Margin Example:
http://pubpages.unh.edu/~ltv6/cis599/sampl
es/chapter4/examples/05_margins/margin
s.html
CSS Positioning Properties
See absolute.htm (more CSS examples)
• Absolute
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content
{position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
}
– Use to precisely
specify the exact
pixel location of an
element in the
browser window
• see absolute positioning 2 in Chapter 4
• See box1 and box2 in more CSS
examples
CSS Positioning Properties
See relative.htm (more CSS examples)
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
• Relative
– Use to slightly
change the location
of an element in
relation to where it
would otherwise
appear
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p { font-family:Arial,sans-serif;
}
#yls {float:right;
margin: 5px;
border: solid;
}
CSS Positioning
Properties (3)
• Float
– Elements that
seem to “float" on
the right or left side
of either the
browser window or
another element
are often
configured using
the float property.
Content flows
around floated
element.
clear float effect
<style type="text/css">
p { font-family:Arial,sans-serif;
}
.rightfloat {float:right;
margin:5px;
clear: right;
border:solid;
}
</style>
The clear property
• When the float property is used to float
elements to the left or right, it’s possible that you
will want some elements to be prohibited from
wrapping beside those floated elements.
– Use the clear property to prohibit floated elements
from appearing beside an element.
• The clear property can accept one of four keyword
values.
– A value of left prohibits floating elements from appearing
to the left of the element.
– A value of right prohibits floating elements from
appearing to the right of the element.
– A value of both prohibits floating elements from
appearing on either side of the element.
– The default value, none, allows floating elements to
appear on either side of the element.
img.figure
img.portrait
h1, h2, h3, h4
{float: left;}
{float: right;}
{clear: both;}
• See float.htm in More CSS examples
• See float2a.htm in More CSS examples
• See float2.htm in More CSS examples
• http://pubpages.unh.edu/~ltv6/cis599/sam
ples/chapter4/examples/08_floated_positio
ning/floated_positioning_1.html
• http://pubpages.unh.edu/~ltv6/cis599/sam
ples/chapter4/examples/08_floated_positio
ning/floated_positioning_2.html
Controlling list item markers
• List items are traditionally preceded by a
marker of some sort. CSS offers
properties to control these markers.
– The list-style-image property is used to
specify an image that should be displayed as
a list item marker.
– Its value must be either a URL in functional notation or
the keyword none
– list-style-image:url(myimage.gif)
Controlling list item markers (cont.)
– The list-style-type property is used to specify
more traditional list item markers.
– Its value may be one of the following nine keyword
values: disc, circle, square, decimal, upper-alpha,
lower-alpha, upper-roman, lower-roman and none.
– If list-style-image is also specified with a value other
than none, the image will be used in place of the
specified list-style-type, if it is available.
Controlling list item markers
(cont.)
– The list-style-position property is used to specify
how the marker is displayed in relation to the list
items.
– Its value may be either inside or outside.
» The default value is outside, which leaves the marker
hanging out to the left of the list item text
» A value of inside causes the marker to move into the list,
acting almost like an indentation
Controlling list item markers (cont.)
– The list-style property is a shorthand property that
can accept a space separated list consisting of up to
one value from each of the previously mentioned listrelated properties.
• Each of these properties is applicable to any
element whose display property has a value of
list-item and they are all inherited
• They are therefore applicable to <li> elements, but are most
commonly applied to <ol> and <ul> elements and inherited
by the <li> elements they contain.
• Go over examples – Developing the home
page
• http://pubpages.unh.edu/~ltv6/cis599/sam
ples/chapter4/
Project Web Site (bubbleunder.com) files
number 1
CSS:
p, h1, h2, ul { border: 1px solid red; }
Project Web Site (bubbleunder.com) files
number 2
body {
font-family: Verdana, Helvetica, Arial, sansserif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
border: 4px solid navy;
}
Project Web Site (bubbleunder.com) files
number 3
#navigation {
width: 180px;
border: 1px dotted navy; }
Project Web Site (bubbleunder.com) files
number 4
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7DA5D8;
}
Project Web Site (bubbleunder.com) files
number 5
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
}
Project Web Site (bubbleunder.com) files
number 6
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;}
Project Web Site (bubbleunder.com) files
number 7
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
Project Web Site (bubbleunder.com) files
number 8
h2, ul {
margin-top: 15px;
}
/* Styles added to demonstrate margins */
#header, #sitebranding, #tagline, #navigation, #bodycontent
{
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
Project Web Site (bubbleunder.com) files
number 9
body {
font-family: Verdana, Helvetica, Arial, sansserif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}
Project Web Site (bubbleunder.com) files
number 10
h1 {
…
margin: 0;
}
#tagline p {
…
margin: 0;
}
Project Web Site (bubbleunder.com) files
number 11
#navigation, #bodycontent, #header
{
position: absolute;
}
Project Web Site (bubbleunder.com) files
number 12
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
Project Web Site (bubbleunder.com) files
number 13
#bodycontent {
left: 200px;
}
Project Web Site (bubbleunder.com) files
number 14
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent { top: 107px; }
#bodycontent { left: 200px; }
#header {
width: 100%;
}
Project Web Site (bubbleunder.com) files
number 15
• Look at on your own.
Project Web Site (bubbleunder.com) files
number 16
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 6.54em;
}
Project Web Site (bubbleunder.com) files
number 17
img.feature {
float: right;
margin: 10px;
}
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img class="feature" src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us! You've passed
your underwater navigation skills and successfully found your way to
the start point - or in this case, our home page.</p>
</div>
Project Web Site (bubbleunder.com) files
number 18
li {
font-size: small;
list-style-type: none;
}