Slogovne predloge CSS

Ta delitev med strukturalno logiko in vizualno logiko je na poti da bo dobila svojo uskladitev z pomočjo slogovnih predlog (CSS). Slogovne predloge ponujajo popolni nadzor nad značkami, odstavki, seznami in drugimi elementi. Na primer, če želimo znački h3 določiti, da naj bo "12-point Arial bold", ji lahko to določimo v slogovno predlogi. Na ta način lahko obdržimo logičo uporabo HTML stukturnih značk brez žrtvovanja grafičnega dizajna in fleksibilnosti.

Ob pisanju tega besedila vsi najbolj popularni spletni brskalniki nudijo nedosledno in nepopolno podporo slogovnim predlogom. Čeprav vsi sodobni brskalniki kot so Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator in drugi podpirajo CSS, je interpretacija različna. Najbolj očitno se to vidi pri na primer lastnosti obrob (margin) v slogovnih predlogah, ki jih vsak brskalnik drugače izvaja. Standartne značke HTML opisujejo samo stavek katerega oklepajo. Z slogovnimi predlogami lahko oblikujemo bolj ustrezne robove in deklaracijo oblike. Trenutno Netscape brskalnik doda oblikovano širino roba k standardnem robu, medtem ko Internet Explorer enostavno uporablja širino ki je nastavljena v slogovnih predlogah. Konec koncev bo ostalo uporabnih le kopica lastnosti, preden se ne bo uvedel nek trden red v tolmačenju lastnosti, saj je vedno več spletnih brskalnikov (Mozilla Firefox, Opera...) in vsak slogovne predloge tolmači po svoje.

Screen shot: English 2-3 page in Internet Explorer and Netscape Navigator

In kaj naredimo, če se zavedamo prednosti ohraniti strukturo, pa vseeno želimo oblikovati stran, ki je atraktivna in funkcionalna dovolj, da bi zavzela in obdržala občinstvo? Naredimo kompromis! Na straneh, ki jih oblikujemo uporabljamo izbrane možnosti, da lahko stran predstavimo čim bolje oblikovano in izpopolnjeno brez da bi preveč posegali v HTML strukturo. Ne uporabljamo lastniških značk, ki bi jih podpiral samo en spletni brskalnik. Naš pristop do tipografije z poudarkom na vizualno oblikovanje ne omejuje stukturalne čistosti. Kjerkoli je mogoče uporabljamo "čisti" HTML, da opišemo strukturo dokumenta in CSS, da definiramo vizualni načrt. Ne prizadevamo si dobiti popolni nadzor in strnjenost na strani, ampak namesto tega osvojimo neko določeno odstopanje med posamezni spletnimi brskalniki.

Prednosti CSS

To tukaj ni priročnik za HTML, and covering the full design implications of Cascading Style Sheets is well beyond the scope of this chapter. If you are not using CSS to manage the graphic design of your Web site, however, you should at least be planning a transition to CSS technology within the next year.

Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites:

Separation of content and design. CSS gives site developers the best of both worlds: content markup that reflects the logical structure of the information and the freedom to specify exactly how each HTML tag will look.
Efficient control over large document sets. The most powerful implementations of CSS will allow site designers to control the graphic "look and feel" of thousands of pages by modifying a single master style sheet document.

Style sheets provide greater typographic control with less code. Using plain HTML, you need to define the physical properties of an element such as the <H1> tag each time you use it.

<h1 align="center"><font face="Verdana, Helvetica, Arial, sans-serif"
size="6" color="gray">Section heading</font> </h1>

Ko se določi te lastnosti z uporabo CSS, ena sama definicija ali kot se reče v CSS pravilo (rule) vpliva na vsak element<h1> v celotnem dokumentu, ki je povezan s slogovno predlogo.

h1
{
text-align: center;
font-size: 16pt;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: gray
}

In addition, style sheets offer more formatting options than plain HTML tags and extensions. For example, interline spacing, or leading, can be controlled using style sheets, as can such text properties as letterspacing and background color. And fortunately the text formatting properties are implemented well enough across browsers to be used with some consistency.

How style sheets work

Style sheets are not new. Every graphic Web browser (even back to Mosaic 1.0) has incorporated style sheets. It just wasn't possible to modify the fixed styles that browsers used to determine, for example, exactly how H1 headers look on the screen. The fundamental idea behind CSS is to let site authors and users determine the size, style, and layout details for each standard HTML tag.

If you have ever used the "styles" features of a page layout or word processing program, you will understand the basic idea behind CSS. The styles feature of a word processor is used to determine exactly how your titles, subheadings, and body copy will look, and then the copy is formatted when you apply a style to each element. Once all the copy has been styled, you can change the look of each occurrence of every element simply by changing the style information. CSS works in the same way, except that with CSS you can set up one master style sheet that will control the visual styling of every page in your site that is linked to the master style sheet:

Gor e-gradiva Oblikovanje Tipografija Čitljivost

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje