haber

Uçak bileti

- Avtor: -primož- 09.10.09

Naučite se osnove CSSja

CSS je kratica za Cascading Style Sheets. Prekrivni slogi po slovensko. S CSSjem določamo obliko spletne strani oz. brskalnikom povemo, kako prikazati HTML oznake.

CSS kodo pišemo v CSS datoteko, ki ima končnico .css. To datoteko nato uvozimo v HTML dokument s pomočjo vrstice

,kjer v href="/ " vpišemo pot do CSS datoteke. To vrstico vstavite v glavo HTML dokumenta.

Druga dva načina uvoza CSSja v HTML si lahko ogledate v vodiču: uvoz CSSja v HTML.

CSS koda ima obliko:

Izbirnik { lastnost: vrednost }

Izbirnik: - Ponavadi predstavlja HTML oznako
- namesto oznake lahko vpišemo class (.) ali ID (#), s katerima poimenujemo določen stil

Lastnost: - barva, velikost, ozadje, obrobe, itd.

Vrednost: Določimo barvo, določimo velikost, določimo ozadje, itd.

Več lastnosti med seboj ločimo s podpičjem ( ; ).

Primer 1 – z oznakami:

Za celotno stran bo ozadje svetlo modro. Celotna stran bo vsebovala rdeče besedilo.

CSS koda:

body {
background: #bdeaff;
color: #FF0000;
}

HTML koda

<html>
<head>

<link rel="stylesheet" type="text/css" href="/style.css" />

</head>
<body>
Besedilo
</body>
</html>

PRIKAZ zgornje kode

Primer 2 – class:

CSS koda

.vsebina {
background: #bdeaff;
color: #FF0000;
}

HTML koda:

<html>
<head>

<link rel="stylesheet" type="text/css" href="/style.css" />

</head>
<body class="vsebina">
Besedilo
</body>
</html>

PRIKAZ zgornje kode

Primer 3 – ID:

CSS koda

#vsebina {
background: #bdeaff;
color: #FF0000;
}

HTML koda

<html>
<head>

<link rel="stylesheet" type="text/css" href="/style.css" />

</head>
<body id="vsebina">
Besedilo
</body>
</html>

PRIKAZ zgornje kode

Kakšna je razlika med class in ID?

ID ( # ) določa točno določen element spletne strani in je lahko na spletni strani uporabljen le enkrat. Class ( . ) ni specifičen in ga lahko uporabite na večih elementih na spletni strani.

Primer 4 – class in ID:

CSS koda

#ena {
background: #bdeaff;
height: 200px;
}

.dva {
Color:#FF0000;
}

HTML koda

<html>
<head>

<link rel="stylesheet" type="text/css" href="/style.css" />

</head>
<body>

<div id="ena">
Besedilo
Besedilo
Besedilo
Besedilo
</div>

</body>
</html>

PRIKAZ class in ID skupaj

Komentarji

Komentarji so pri CSSju zelo pomembni. Poleg vaše CSS kode si vedno pišite še komentarje, da boste kasneje vedeli, čemu koda služi.

Komentarji se začnejo z /* in končajo z */. Kar je med /* in */ brskalniki ne upoštevajo.

Primer 5 – kometarji:

CSS koda

/* GLAVNI MENI */

.meni {
color: #FF0000;
}

HTML koda:

<html>
<head>

<link rel="stylesheet" type="text/css" href="/style.css" />

</head>
<body>


Besedilo


</body>
</html>

PRIKAZ zgornje kode

Dedovanje

Če ste si ogledali vodič uvoz CSS kode v HTML veste, da je več načinov vključevanja CSSja v HTML. Pri tem je pomembno dedovanje. Največ veljave ima CSS vpisan direktno v oznako HTML dokumenta. Za njim ima največ veljave CSS vpisan v glavo HTML dokumenta. Najmanj veljave pa ima CSS v zunanji CSS datoteki.

Se pravi: Če boste povsod določili barvo besedila se bo upoštevala tista barva, ki je določena v sami oznaki (npr. ).

Zaključek: CSS vam prihrani veliko časa, saj z eno datoteko nadzirate izgled celotne strani. Poleg tega je vaš HTML dokument veliko lepše formiran in se v njem lažje znajdete. Priporočam vam še, da si preberete vodič CSS namigi, da se poslužujete teh namigov in da čim več uporabljate CSS na vaših spletnih straneh. S časom ga boste vzljubili Very Happy .

Komentiraj:

Sorodni vodiči
CSS senca za besedilo Zaobljeni robovi s CSSjem Prosojnost slike s CSSjem Poseben CSS za Internet Explorer Flyout meni	CSS ozadje Velike črke, male črke in velika začetnica s CSSjem Display: none in Visibility: hidden CSS Osnove CSS Povečava slike

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

haber

Uçak bileti

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči