Handleiding Kompozer 07 (pagina 22 van 58) (Engels)

606646

Verklein

Vergroot

Pagina terug

1/58

Pagina verder

KompoZer User Guide — 17 December 2007 Based on version 0.7.10 22

4 Style and stylesheets

4.1 Introduction to style

The use of styles is already well established in word

processing and desk top publishing. In web site design

it assumes an even more important role and can

control almost every aspect of presentation.

Styles in HTML documents should comply with

the requirements of the W3C style specifications.

These are detailed in ‘Cascading Style Sheets, level

2 Revision 1 CSS2.1 Specification’ which is available

at http://www.w3.org/TR/CSS21/.

A full introduction and many useful referenc-

may be found at

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

4.1.1 Power of styles

Styles specify how particular elements on a page

appear on the screen, in print or whatever. This guide

limits itself to on-screen considerations. By ‘elements’

we mean parts of the page structure, typically head-

ings and paragraphs, but also stretching to many

others including tables, bulleted and numbered lists

etc. In fact most HTML ‘Tags’ may be specified though

the same style may be applied to several.

Style may typically define such aspects of presenta-

tion as the font face, size and variant, the font colour,

the background colour, whether an element is to be

aligned right, centre or left, whether spaced away from

other elements, surrounded by a border and, if so,

what type or colour. Elements may be given an abso-

lute position relative to the page (which allows ele-

ments to overlap). Elements such as paragraphs,

tables and images are considered to exist within boxes

or blocks and the sizes of these boxes may be specified.

Note You can see the outlines of the blocks by

selecting ‘View – Block outline’.

4.1.2 Classes

As well as allowing you to specify the style of

elements it is possible to define styles and apply them

selectively to only some elements. This is done

through ‘Classes’ – a ‘Class’ is just a style that can be

applied as and when you choose.

‘Classes’ are applied to ‘Tags’ (a marker attached to

an element). The element to which the class is applied

appears in the format defined by the class. Other

similar elements without the class applied appear in

the default format i.e. either the default specified by

the browser or the style that the user has defined for

the corresponding element.

On the status bar KompoZer shows classes along

with the tag to which they are applied.

4.1.3 Using style

4.1.3.1 Inline style

Within a page styles may be used in three ways.

These ways can be mixed and matched as you wish.

The first, easiest and crudest is to define a style for the

nonce, there and then. Such a style is listed in the

code (in Source view) with the tag to which it applies

(using the structure ‘style = …’ if you look at the code).

Don't worry KompoZer hides all this from you.

If you have another item with the same style this

code must be repeated. This bloats the page. This is

known as an ‘inline style’. For the most part KompoZer

users do not have to be concerned with this method

although KompoZer will sometimes use it without you

knowing.

4.1.3.2 Internal style

The second way to use a style is to embed a list of

style definitions within the HEAD section of a page.

(These definitions are referred to as ‘style rules’ or just

‘rules’)

These rules may be of one of two sorts. The first

sort applies to all elements of a particular type (e.g. p,

h1, table) the second is the class as discussed above.

Note If you look at the HTML source code you

will see a structure like <p class=

"mynicepara"> when the class ‘mynicepara’

has been applied. The corresponding code

where no class is applied is <p>. If you look at

the structure of the style sheet for a class you

will see the class name preceded by a dot (full

stop) e.g. ".mynicepara" while a generally ap-

plied style will look like ‘p’. Generally applied

styles must, of course, carry the name of the

element to which they apply whereas a class can

have any name you like to give it. To help

maintain the site it is good to give it a name that

describes its function NOT the resulting appear-

ance.

4.1.3.3 External style – Linked sheets

While the first two methods are valid and have their

uses, the third is the preferred method specifically

because it is economical, reuses the same styles for

many pages and helps in achieving consistency of

appearance right across a complete web site. The

method uses an external style sheet which is ‘Linked’

to a page, or to several pages (though each page must

include the linking information for itself).

An external style sheet contains the same list of

rules which would otherwise have been included in the

internal list referred to above. (It is actually a simple

text document such as you could construct using a

text editor like Windows® Notepad.) The file is usually

located in the same folder (directory) as the page to

which it is linked (though it can be elsewhere) and has

the extension ‘css’.

How does a page know to use this style sheet? A

line of code which, KompoZer will insert for you in the

head section of your page, will see to this.

The code looks like <link rel="stylesheet"

type="text/css" href="mystylesheet.css>

4.1.3.4 Cascading stylesheets

You may wonder – if you have an external style

sheet, perhaps internal rules and inline styles will

there be confusion? This is where the cascading comes

in. Your browser should first use whatever its default

style would be. If it finds a matching style in an

external sheet it should use that instead, it should

then look at internal styles and, if any coincide with

anything it is planning to use that should override

them. Lastly inline styles prevail.

Kompozer 07 Handleiding

Hulp nodig? Stel uw vraag in het forum

Misbruik melden

Product:

Spelregels forum

Abonneren

Ontvang uw handleiding per email

Stel vragen via chat aan uw handleiding

Andere handleiding(en) van Kompozer 07

Uw handleiding is per email verstuurd. Controleer uw email

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

U heeft geen emailadres opgegeven

Uw vraag is op deze pagina toegevoegd

Info