HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header

haber

-

Uçak bileti

-  Avtor: -primož-    13.10.09
CSS kode 1               
CSS vodiči
css kode, kodaSpoznajte osnovne CSS kode

V tem vodiču boste spoznali osnovne CSS kode, ki bi jih moral poznati vsak, ki se ukvarja z izdelavo spletnih strani. To je prvi del vodiča, ki ima dva dela. Prvi del bo zajemal bolj splošne kode, drugi del pa se bo osredotočil na oblikovanje teksta.


CSS kode po poglavjih:



1. Border - obroba


border: ; nadzira velikost obrobe, stil obrobe in pa barvo obrobe. Border lahko uporabite skoraj povsod, na divih, slikah, iframeih, besedilu, itd.

Posamezne stranice lahko obrobljamo z border-left, border-right, border-top, border-bottom.


CSS koda

.obroba {
border: 5px solid #FF0000;
}

.obroba2 {
border-right: 15px solid #FF0000;
}

 

HTML koda:

<html>
<head>

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

</head>
<body>
<img src="/mmlogo.png" class="obroba"><br><br>
<img src="/mmlogo.png" class="obroba2">
</body>
</html>

PRIKAZ border: ;

Seznam različnih vrst obrob si lahko ogledate v vodiču: Obrobe.

2. Width & Height


width: ; nadzira širino, height: ; pa višino HTML elementa. S tema dvema kodama lahko nadzirate dive, slike, iframee, celice v tabeli itd.

CSS koda

.velik {
height: 400px;
width: 400px;
border: 1px solid #FF0000;
}

 

HTML koda

<html>
<head>

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

</head>
<body>
<div class="velik"></div>
</body>
</html>

 

PRIKAZ width: ; in height: ;

 

3. Padding – notranji rob


S padding: ; določamo prazen prostor okoli HTML elementa (do obrobe). Padding sem poimenoval notranji rob glede na obrobo. Margin je zunanji rob, glede na obrobo. Po paddingu si oglejte še margin, kjer sta obe kodi lepše grafično prikazani.

 

CSS koda

img {
border: 5px solid #FF0000;
}

.padding {
padding: 20px;
}

.padding2 {
padding: 5px;
}

 

HTML koda

<html>
<head>

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

</head>
<body>
<img src="/mmlogo.png" class="padding"><br><br>
<img src="/mmlogo.png" class="padding2">

</body>

</html>


PRIKAZ padding: ;

 

*padding lahko zapišete tudi tako: padding: 20px 0 9px 11px;
20px – zgornji notranji rob
0 – desni notranji rob
9px – spodnji notranji rob
11px – levi notranji rob

 

4. Margin – zunanji rob


margin: ; nadzira prazen prostor okoli HTML elementa (od obrobe).

 

CSS koda

img {
border: 5px solid #FF0000;
}

.margin {
margin: 20px;
}

.margin2 {
margin: 0 100px 9px 11px;
}

HTML koda: poglej kodo

PRIKAZ margin: ;


*lahko uporabljate tudi negativne vrednosti npr. margin: 10px -30px 5px -1px;

 

 

5. Padding + Border + Margin


prikaz_padding_margin

 

 

6. Background – ozadje


background: ; nadzira barvo ozadja, sliko za ozadje, položaj slike v ozadju, ponavljanje slike. O ozadju je spisan podroben vodič, ki si ga lahko ogledate tukaj: CSS Ozadje.

Tukaj vam bom pokazal le css kodo za barvo ozadja:

 

CSS koda

.ozadje {
background: #3399FF;
height: 400px;
width: 400px;
}

 

HTML koda

<html>
<head>

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

</head>
<body>
<div class="ozadje"></div>
</body>
</html>

PRIKAZ background: ;

Zaključek: V tem vodiču ste spoznali osnovne CSS kode, ki so nujno potrebne pri vstavljanju razrezanega dizajna v HTML kodo. Vse te kode (margin, padding, border, background) vam bodo prišle zelo prav, zato je dobro, če jih dodobra preizkusite. Vaja dela mojstra!

Drugi del vodiča: CSS kode 2


Komentiraj:
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."
 
Sorodni vodiči

Moje-Mesto.com

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

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi