CSS ukazi - WordPress.com
CSS
CSS ali Cascading Style Sheets so slogovne predloge, s katerimi urejamo izgled spletnih
strani. Slogovne predloge je iznašla organizacija W3C (World Wide Web Consortium), saj so
potrebovali nove ukaze, s katerimi bi urejali izgled spletnih strani. K slogovnim predlogam
CSS so vključili jezik HTML 4.0, ki podpira več multimedijskih opcij, skriptnih jezikov, stilnih
predlog, izboljšane možnosti za tiskanje in dokumente, ki so prilagojeni uporabnikom, ki
imajo težave z vidom, sluhom, itd. .
CSS podpirajo novejše različice brskalnikov (Netscape Navigator, Internet Explorer, Opera,…).
Slogovne predloge določajo, kako so oblikovani elementi HTML. Ponavadi so shranjene v
posebnem dokumentu, zaradi lažje preglednosti. Eno zunanjo slogovno predlogo lahko
uporabite potem na vseh drugih straneh, če jih je več. Če ste že kdaj skušali spreminjati
recimo pisavo v vseh elementih HTML, potem veste, koliko truda lahko prihrani slogovna
predloga.
Slogovne predloge CSS nam omogočajo, da nadzorujemo slog strani samo preko enega
dokumenta, in to je ravno največja prednost. Ker so elementi ponavadi globalno povezani
med sabo, s spremembo le enega pravila zamenjamo na primer ozadje vseh spletnih
strani.
CSS ukaz ima 2 glavna dela: selektor in eno ali več deklaracij.
Selektor oz. izbiralnik je ponavadi element HTML, ki ga želimo oblikovati. Vsaka deklaracija
sestoji iz lastnosti in vrednosti. Lastnost je atribut, ki ga spreminjamo, in vsaka lastnost ima
vrednost.
CSS deklaracija se vedno zaključi s podpičjem in vsaka skupina deklaracij je zaključena z
zavitim oklepajem. Primer: p {color:red;text-align:center;}
Notranje stilne predloge
Vsakemu dokumentu html dodamo v glavo (head) naslednji ukaz:
<head>
<style type="text/css">
h1 {text-align:center;color:green;text-size:20;text-decoration:blink;}
</style>
<head>
Zunanje stilne predloge
Primer povezave v .html dokumentu:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Zunanjo stilno predlogo lahko zapišemo s katerikolim besedilnim urejevalnikom. Datoteka ne
sme vsebovati nobenih HTML značk in mora biti shranjena s končnico .css V ISTI MAPI!
Primer: mojstil.css
Primer .css dokumenta
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Med vrednostjo in enotami ne delajmo presledkov, saj bo ukaz zaznal le IE, ostali brskalniki
pa ne.
Komentar
/*This is a comment*/
Barva ozadja
body {background-color:#b0c4de;}
Slika ozadja
V ODSTAVKU:
p { background-image: url(smallPic.jpg); }
V NASLOVU:
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
TELO:
body{ background-image: url(smallPic.jpg);
Besedilo
Barvo lahko določimo na 3 načine:
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Poravnava
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Dekoracija
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
Podpisano, nadpisano, kapitelke
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Umik (v prvi vrstici odstavka)
p {text-indent:50px;}
Property
Description
color
Sets the color of text
direction
Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height
Sets the line height
text-align
Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent
Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi
vertical-align
white-space
word-spacing
Sets the vertical alignment of an element
Specifies how white-space inside an element is handled
Increases or decreases the space between words in a text
Črkovna družina:
p{font-family:"Times New Roman", Times, serif;}
Stil besedila:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p{font-style:italic}
Velikost besedila:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Property
font
font-family
font-size
font-style
font-variant
font-weight
Description
Sets all the font properties in one declaration
Specifies the font family for text
Specifies the font size of text
Specifies the font style for text
Specifies whether or not a text should be displayed in a small-caps
font
Specifies the weight of a font
Povezave
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Primer:
a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}
Seznami
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Slika namesto alineje
ul{list-style-image: url('sqpurple.gif');}
Property
list-style
list-style-image
Description
Sets all the properties for a list in one declaration
Specifies an image as the list-item marker
Specifies if the list-item markers should appear inside or outside the
list-style-position
content flow
list-style-type
Specifies the type of list-item marker
Tabele
Obrobe
table, th, td{border: 1px solid black;}
Višina, širina
table {width:100%;}th{height:50px;}
Poravnava besedila
td{text-align:right;}
td{height:50px;vertical-align:bottom;}
Padding
td{padding:15px;}
Barva
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}
Odstavek – ID
HTML dokument:
<p id="konec">Eden glavnih sodelavcev pri praktični pripravi in izvedbi je medijski tehnik /
medijska tehnica.</p>
CSS dokument
P#konec{font-family:Georgia;font-size:12px;font-style:italic;}
Obroba odstavka
p{border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;}
Grupiranje selektorjev
h1,h2,p{color:green;}
Medvrstične stilne predloge
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
CSS barve
Color Name
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
HEX
#F0F8FF
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#F5F5DC
#FFE4C4
#000000
Color
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGrey
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkSlateGrey
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DimGrey
DodgerBlue
FireBrick
FloralWhite
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#696969
#1E90FF
#B22222
#FFFAF0
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Grey
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSlateGrey
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#808080
#008000
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
SlateGrey
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Shades
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
Mix
© Copyright 2025