Css Layout Prop

Classess and IDs
In addition to setting styles based on HTML

elements, CSS allows for rules based on two
optional attributes in HTML: class and id.
Each of these can serve as the selector part of a
CSS rule and can be set on any visible HTML tag.
Using the class and id selectors will really bring
into life the <div> and <span> tags in HTML.
These two tags can be made to have nearly any
effect and presentation.
HTML
Class Attribute
The class attribute is used to define a related group of
HTML elements on a page. They may have the same
function or role, but in a CSS context, it means they
have the same style rules applied to them.
To create a class, you simply have to give it a name. A

class name can be nearly anything, but it has to be 1
word. (avoid using underlines, periods, and other non-
alphanumerical characters when naming classes).
Also note that a given HTML element can be part of 1

or more classes.
HTML
Class Attribute
Example:
In this HTML we are
<body> defining 4 classes
<div class="p1"> named: p1,q2,r3 and j4
<h2 class="q2">Class Times</h2>
<p class="r3"> Classes are timetabled every Friday from
<span class="q2 j4">9.15</span> to <span class="q2
j4">2.05</span> in MG122</p>
</div> In this example we can say that:
</body> <div> is part of the p1 class
<h2> and <span> are part of the q2 class
<p> is part of the r3 class
<span> is also part of the j4 class
CSS
Class Selector
After the classes have been defined in HTML,
they can be used as a class selector in CSS
Class selectors are indicated by a period (.)

before the name of the class:
<style type="text/css">

</style>
Applies to <span> that is part of

both q2 and j4 class
Full Embedded
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
Style and Page
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>Lecture2Classes</title>

</style>
</head>
<body>
<div class="p1">
<h2 class="q2">Class Times</h2>
<p class="r3"> Classes are timetabled every Friday from <span
class="q2 j4">9.15</span> to <span class="q2 j4">2.05</span> in
MG122</p>
</div>
</body>
</html>
Browser Display
.q2 {color:blue;}
span.q2 {font-size:large;}
p.r3 {color:green;}
HTML
ID Attribute
The HTML attribute id is similar to the class attribute it can be
set on nearly any tag and can be used as a CSS selector but it is
much more restricted.
Only 1 tag on a page can have a given id;
It must be unique within the page and is used to identify just that
element.
An ids attribute value has to begin with a letter and can be

followed by letters, numbers, periods, underlines, hyphens, or
colons; however if it is being used as a selector in CSS, it is safest to
stick to just letters and numbers.
Note: Case matters, so be consistent in the case of your id

attributes.
<p id="bigf"> This whole paragraph need to have a big font</p>
CSS
id Selector
In CSS, an id selector is indicated by a #
(hash) before the value of the id. i.e.

</style>
Selectors
Descendant
One of the most useful ways to group
selectors together is to use a descendant
selector.
A descendant, in HTML and XML, is an
element that is completely contained within
another elements content.
Movie Review
<html>
<head> Example
<title>Babe: Best Movie EVER</title>
<style type="text/css"> /* add style rules here */ </style> </head>
<body>
<div class="header"> <h2> is a descendant of the <div>
<h1>Movie Review: <cite>Babe</cite></h1>
<p>A Mini-Review by Joe H. Moviefan</p>
</div>
<div class="opinion">
<h2>The Best Movie <em>EVER</em></h2>
<p>The movie <cite>Babe</cite> was the best family movie<cite>is a descendatn
ever produced! This of the <h1> and
great movie featured talking animals, a cantankerous old<cite>
man, andissubtle-yet-Oscar-
also descendant of the <div> (its
winning special effects -- who could ask for more? The clever writing and humorous
contained
touches make this all-ages movie great for children while within
still very enjoyable by the two)
adults. What a great movie!</p>
</div>
<div class="footer">
<p>What did you think? Mail me at
<a href="mailto:joe@example.com">Joe H. Moviefan.com!</a> All of them are also
</p>
</div> descendants of the
</body>
</html>
<body>
Selectors
Descendants
Descendant selectors define rules based on where a given
tag appears within the page by combining together simple
selectors, separated by spaces.
p cite {color:white; background-color: black;}
This rule changes the color of all <cite> tags contained

within paragraphs.
The order in which the tags are listed in the style rule is
important, the outside tag must be written first. Also note
that the <cite> inside <h1> is not styled by this rule, only
the <cite> inside the <p> element.
Selectors
Descendants
It is also important to keep in mind that a descendant selector
means any descendant, not just an immediate child. This enables
you to make rules that apply to any descendant element, no matter
how deeply its nested.
You can also combine section styles (set via class and <div>) with
element-based type selectors, as well; for example the following
code changes the font face and colours of <p> tags within the
header section, but leaves the rest of the header alone, as well as
the other paragraph tags that arent contained by something with
the .header class:
.header p {font-family:verdana, sans-serill; color:white; background-

color:black;}
Pseudo Classes
A pseudo-class selector is a selector based on a set of
predefined qualities that an HTML element can possess.
These qualities function in practice similar to a class attribute
on the element.
No actual class attribute exist in the markup that correspond

to these pseudo-classes; instead, they represent some aspect
of the element to which they are applied, or even the state of
the browsers user interface relative to that element.
Pseudo Classes
The pseudo-classes in CSS are:
Pseudo Classes Description
:active Elements that have been activated (such as active
links)
:first-child The first child of an element
:focus Elements that have the focus (form fields
receiving input)
:hover Elements that are pointed at
:lang() Styles for a specific language (examples: de,en,en-
ca,en-uk,en-us,fr,jp,ru)
:link Unfollowed links
:visited Previously visited links
Pseudo Classes
Pseudo classes cant stand alone in a style rule, as classes can,
but most commonly they are used with elements as a tupe
selector:
:link {color:red;}
a:link {color:red;}
Both of these rules are valid, the former applies to any
element that happens to be a link, whereas the latter rule
covers only <a> tags.
Note that in HTML only the <a> elements are links, so the
rules mean the same thing
Pseudo Classes
Pseudo classes can be combined with real classes or even
other pseudo-classes putting them together with no spaces
between, just the . and : indicators
Example:
<a href=search.html class=nav>Search the site</a>
<a href=http://maps.google.com class=offsite>Google Maps</a>
CSS:
a:link.nav {color:cyan;}
a.offset:link {color:green;}
Example - CSS
#storytitle
{ font-family: Verdana; }
.storybody p
{ font-family: Arial; }
.storybody p:first-line
{background-color:silver;}
.storybody p:first-letter
{ font-size:xx-large; color:white;
background-color:black;
font-family:Verdana; }
Example
Browser
Fonts,
Colours and Effects
Fonts
The font properties are among the most

commonly used of the style-sheet properties.
Virtually all XHTML documents include text,
which is often used in a variety of different
situations. This creates a need for text in many
different fonts, font styles, and sizes. The font
properties allow us to specify these different
forms.
Fonts,
Colours and Effects
Colours
CSS provides two ways to define colour. The first is to use a color name,
such as green or black; the second is to use a set of three RGB values,
corresponding to the amount of Red, Green and Blue desired.
The CSS specification recognizes 17 colours:
Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white and yellow.
Most browsers accept other colour names as well, such as pink, cyan and
violet. However, until a future version of CSS adds those colours to the
official specification, its best to avoid them as there is no guarantee that
a browser will support them.
Fonts,
Colours and Effects
To specify a colour in RGB notation, you need to know how much
red, green and blue is contained in that colour. All RGB colours are
measured based on a scale from 0 to 255. They are usually counted
in hexadecimal.
CSS offers four ways to present RGB values:
Hexadecimal Notation: body {color:#CC66FF;}

Short hex Notation: body {color:#C6F;}
RGB numbers: body {color: rgb(204,102,255)
RGB percentages: body {color: rgb(80%,40%,100%}
Remember, when using colour to emphasize or present your pages,

remember to take HCI considerations into account.
Fonts,
Colours and Effects
Special Text Effects
CSS can also be used to produce text effects ranging from
decorations to drop shadows.
These can be used only on CSS elements that actually contain text;
on anything else, they have no effect.
Examples:
Text-decoration (blink, line-through, overline, underline, none, inherit)
Text-transform (capitalize, lowercase, uppercase, none, inherit)
Text-Shadow
Letter-spacing (normal, measurement, negative measurement, inherit)
Word-spacing (normal, measurement, negative measurement, inherit)
White-space(normal, nowrap, pre, pre-line, pre-wrap, inherit)
Line-height (normal, measurement, multiplier, percentage, inherit)
Fonts,
Colours and Effects
Background-Colour & Images
Background colour as well as any other colour-
related property can be set as explained before,
however there are two more property values
available to background-colour:
transparent: (Default) Whatever background already
exists, will be shown
inherit: Setting the value equal to that of the
containing box. (inherit is used widely in other
properties as well).
Background
Images
In addition to use colours as backgrounds, you
can also use images.
This is similar to using the background
attribute of HTML; the background attribute
can be set only on the <body> tag, but CSS
allows you to set a background image on any
element.
Usage:
selector {background-image: url(image.gif);}
Background-Repeat
Property
Background-repeat enables you to control
whether or not the background image tiles
across the screen.
Value Effect
repeat tile horizontally and vertically
repeat-x tile only horizontally
repeat-y tile only vertically
in-repeat display the image only once,
with no tiling.
Background-Position
Property
Background images are placed in the upper-left corner of
the element box it is styling.
Background-position can be used to change the location of
the initial image.
A background position value consists of 2 size values or
percentages: one indicating the horizontal position and the
second indicating the vertical (only one value given set the
horizontal)
If values are used (30px, 4em etc.) they indicate where the
images upper-left corner is to be placed.
If percentages are used, they indicate how far over the image
should be aligned (50% means that the center of the image
(horizontally and vertically) aligns with the center of the
element being styled.
Background-Position
Property
In addition or instead, word can also be used
in this property:
Value Effect Value Effect
size size place the image at the top center same as top
specified location
percentage percentage place the image top right corresponds to 100% 0%
proportionally
top corresponds to 50% 0% left center same as left
left corresponds to 0% 50% center center same as center
right corresponds to 100% 50% right center same as right
bottom corresponds to 50% 100% bottom left corresponds to 0% 100%
center corresponds to 50% 50% bottom center same as bottom
top left corresponds to 0% 0% bottom right corresponds to 100% 100%

Background-attachment
Property
Normally, images scroll with the rest of the page.
The background-attachment property changes
that
This property can take 3 values:
scroll (default)
fixed (location of the image is relative to the whole
page, not the element being styled)
inherit (this property is not inherited unless explicitly
stated using the inherit value.
Box Sizing
& Offsets
When laying out a page, it is not always
enough to specify only where content should
be placed. To create effective layouts, you
need to set the size of display boxes.
In HTML and CSS this is done with the height
and width attributes.
Exercise 2.8 will be used to demonstrate:
Box Sizing
& Offsets
Set these initial rules on the stylesheet
Newspaper Display
Browser tries to determine the size and placement of each box

and does not do very well
Width and Height
When a browser displays a page like the one we just created, it
determines the layout based on the space available and how large
the content is. To start correcting the problems like the size and
links box, we need to use the width and height properties.
A CSS display box has two widths: The content width and the box
width. The content width, is the width of the boxs content area; It
is the area where the boxs content exists, within the padding, the
border, and the margin; this is what is set by the width property.
The box width is the width of the entire box, including left and right
padding, the left and right border, and the left and right margin, as
well as the content width. Content and box height are determined
in the same way.
Width and Height
The CSS properties width and height are used to control the
size of the content width. To set the boxs width and
height, you need to use the padding, border and margin
values that add to the content width and height.
The values can be measurements (such as Px or em) or they

can be percentage value. (The percentage is based on the
height or width of the parent boxs content area.
Use the following CSS rules to fix the title wrapping

problem of the 3 areas (play with the values until you are
happy with the result)
Width and Height
Width & Height
Note that when a width is set in the navigation
bar, the text is forced to wrap,
also notice that with these settings, there is extra

space at the bottom of the navigation bar; the
height has been set, and the space is reserved
even if the content does not fill the space.
Also note that there is no height for the #main

<div>, so the box ends where the text ends.
Minimum and Maximum
Dimensions
Depending on the screen resolution, setting
the width and height property might render
boxes that are too small to maintain the style
desired for the content.
In order to solve this, some maximums and
minimums could be placed on the sections
allow for a more flexible design.
The CSS properties used are called min/max-
width/height.
Minimum and Maximum
Dimensions
Incorporate these in your code
Resizing Browser
Minimum Horizontal
Overflow
If a displays box height hasnt been set by the
height property, the height is calculated
automatically to take up enough room for all
the content. If the height property is set and
there is not enough space for all the text, then
the text will overflow the box
(set the height property of the #main to 128px.}.

Overflow
Overflow
In order to correct this problem, the property overflow, can
be set to something other that its default value (which is
visible and creates the overflow effect). This property can
be changed to:
auto: The browser determines what to do with the overflowing

content, choosing either scroll or visible.
Hidden: Overflowing content is clipped and not displayed.
Scroll: A scrollable box is used to provide access to all content.
Visible: The overflowing content spills out of the box
Inherit: use the value of overflow set on the containing box.
Set the overflow to auto on #main

Relative Positioning
Another way to align content is to float it. Floating
boxes move to one side or another according to the
value of the float property, and any following content
flows around them in a liquid fashion.
When a box is floated, it is positioned within it

containing boxs content section. The floating box
remains within the margin , border and padding of its
containing box; is simply moves to the right or left side
as appropriate. Any subsequent content is placed
alongside the floating box for the length of that box.
Floating Content
To stop subsequent text from flowing around a floating element, you can set
the clear property on the first element you dont want to float. This moves
that element down enough so that it doesnt wrap around the floating box.
CSS offers other ways to position boxes on the screen. A boxs location on
the screen can be set by using the position property.
A box that has been placed according to relative positioning

(position:relative) has been located relative to the position in which that
box would normally appear, modified by an offset. This offset is
designated by the top, left, right and bottom properties.
The offset property values (top, bottom, left and right) accept both
positive and negative values, percentages, inherit and automatic values.
Positive values will offset the box towards the inside (centre point of the
content box) and negative values move the box away from the middle
(towards the outside).
<html>
<head>
<title>Three Boxes in a Row</title>
.demobox {
border: 3px solid black; width: 8em;
font-family: Verdana, sans-serif;
background-color: white;
padding: 1em; margin: 0.5em; }
#mars { position: relative;
left: 5em; top: 2em; }
</style> with
</head>
<body>
<div class="demobox" id="earth">
Earth</div>
<div class="demobox" id="mars">
Mars</div>
<div class="demobox" id="jupiter">
Jupiter</div>
</body>
</html>
Absolute & Fixed
Positioning
Whenever an HTML element is included on a page, it generates a
display box; normally, these boxes are placed one after another or
within another box, based on the structure of the document and
whether the box is an inline or block box.
This is know as normal flow in the CSS specification. Whenever you

move an elements display box to a new location, you are disrupting
the normal flow to create a new layout.
The Float (clear) values for the alignment property moves the box out
of the normal order to one side or the other, and subsequent content
flows around it.
Relative positioning (position property) preserves the normal content
flow by reserving the appropriate amount of space for the relatively
positioned element, and then moving it relative to that location.
Absolute & Fixed
Positioning
There are two other types of positioning techniques that
can be used: Absolute and fixed positioning. These methods
also use the position property and the 4 offset properties
(top, left, bottom and right).
When you set the position property to absolute, you are

taking the element out of the normal flow of text and
locating it relative to another box.
This is called the containing block.
The positioning element is placed relative to this containing

block based on the offset properties.
Absolute & Fixed
Positioning
The containing block is one of the parent boxes that
contains the box being displayed but it is not necessarily
the immediate parent.
The containing block is defined as the nearest ancestor to

that box that has a position property value set on it. If none
of the boxs ancestors has a position property set, then the
containing block is the display box of the <body> tag.
The easiest way to create a containing block context is to

create a box and set is position to relative without any
offset.
Absolute Positioning
In absolute positioning, the containing block is
initially set to be the box of the <body> tag
absolutely positioned elements are placed
relative to the rest of the page.
If an ancestor box of an element is positioned
(with absolute, relative, or fixed positioning),
that positioned box becomes the new
containing block for absolute positioning.
Example
<html>
<head>
<title>Three Boxes in a Row</title>
.demobox {
border: 3px solid black; width: 8em;
font-family: Verdana, sans-serif;
background-color: white;
padding: 1em;}
#earth {
position:absolute; left:50%; bottom:50%; }
#mars {
position:absolute; right:50%; bottom:50%}
#jupiter {
position:absolute; left:-50%; bottom:100%}
</style>
</head>
<body>
<div class="demobox" id="earth">Earth</div>
<div class="demobox" id="mars">Mars</div>
<div class="demobox" id="jupiter">Jupiter</div>
</body>
</html>
Left-Right
#earth {
position:absolute; left:0%; bottom:50%; }
#mars {
position:absolute; right:0%; bottom:50%}
Notice: Mars and Earth almost touch in the center. This is

because they have values of 50% set for their right and left
values, and 50% for their top and bottom values.
However, the effects of these rules are not the same:

50% right and 50% left are two different positions
Top-Bottom
#earth { position:absolute; left:50%; bottom:50%; }
#mars { position:absolute; right:50%; top:50%}

Css Layout Prop

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css Layout Prop

Caricato da

Copyright:

Formati disponibili

Classess and IDs

In addition to setting styles based on HTML

To create a class, you simply have to give it a name. A

Also note that a given HTML element can be part of 1

Class selectors are indicated by a period (.)

Applies to <span> that is part of

An ids attribute value has to begin with a letter and can be

Note: Case matters, so be consistent in the case of your id

p cite {color:white; background-color: black;}

This rule changes the color of all <cite> tags contained

.header p {font-family:verdana, sans-serill; color:white; background-

No actual class attribute exist in the markup that correspond

The font properties are among the most

The CSS specification recognizes 17 colours:

CSS offers four ways to present RGB values:

Hexadecimal Notation: body {color:#CC66FF;}

Remember, when using colour to emphasize or present your pages,

left corresponds to 0% 50% center center same as center

right corresponds to 100% 50% right center same as right

bottom corresponds to 50% 100% bottom left corresponds to 0% 100%

center corresponds to 50% 50% bottom center same as bottom

top left corresponds to 0% 0% bottom right corresponds to 100% 100%

Browser tries to determine the size and placement of each box

The values can be measurements (such as Px or em) or they

Use the following CSS rules to fix the title wrapping

also notice that with these settings, there is extra

Also note that there is no height for the #main

(set the height property of the #main to 128px.}.

auto: The browser determines what to do with the overflowing

Set the overflow to auto on #main

When a box is floated, it is positioned within it

A box that has been placed according to relative positioning

This is know as normal flow in the CSS specification. Whenever you

When you set the position property to absolute, you are

This is called the containing block.

The positioning element is placed relative to this containing

The containing block is defined as the nearest ancestor to

The easiest way to create a containing block context is to

Notice: Mars and Earth almost touch in the center. This is

However, the effects of these rules are not the same:

Potrebbero piacerti anche