Transcript Slaids 1
#02.01 CSS
CSS tehnoloģija ļauj, izmantojot standarta
HTML valodu, gūst pilnu kontroli par HTML
elementu attēlojumu, tā skaitā :
Elementu izmēri
Elementu pozīcija
Elementu stils un krāsa
Elementu izlīdzināšana
U.c.
<i>Some text in italic</i>
Some text in italic
<i style="text-decoration:underline;fontstyle:normal;">
Some text in italic
</i>
Some text in italic
Visas timekļa lapas sadalīt pēc tipa
(teksta lapa, navigācijas lapa, komunikācijas
lapa, u.t.t)
Katrai lapas tipam tika izstrādāta loģiskā
struktūra
Katrai lapas tēmai tika izstrādāts savs CSS
fails.
Stila iepriekšdefinēšana atzīmēšanas
elementā (inline)
Stila definēšana dokumenta virsrakstā
(STYLE)
Stila faila iekļaušana no atsevišķa faila (LINK)
Stila importēšana
<h1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Pirmā līmeņa virsraksts
</h1>
<hr style="width:100px;">
STYLE elements ļauj definēt attēlošana stilu:
Standarta HTML elementiem
Klasēm (selektors “class”)
HTML-objektiem (selektors “id”)
<head>
<style>
p {color:darkred;text-align:justify;font-size:8pt;} </style>
</head>
<body>
...
<p>
Some text example for demonstating CSS definitions in
STYLE tag.
</p>
...
</body>
<link type="text/css" rel="stylesheet"
href="http://somesite.com/my_css.css">
<style>
@import:url(http://somesite.com/style.css)
a {color:cyan;text-decoration:underline;}
</style>
selector[, selector[, ...]]{attribute:value;[atribute:val
ue;...]}
selector selector [selector ...] {attribute:value;[atrib
ute:value;...]}
Selektors:
Atzīmēšanas elementa (birkas) nosaukums
Klase
Atzīmēšanas elementa ID
Attribute: elementa īpašiba (color, width, …)
Value: atribūta vērtība (10, 10px, #FF0000,
…)
<style>
.some {color:white;background-color:darkred;}
</style>
...
<p class=some>
Some text
</p>
...
<p>
This <a class=some>link</a> has format of class
“some” </p>
i, em {color:#003366,font-style:normal}
a i {font-style:normal;font-weight:bold;textdecoration:line-through}
<i>Italic</i> and this is <em>italic</em>
<a name=empty><i>link</i></a>
a.mainlink {color:darkred;textdecoration:underline;font-style:italic;}
#blue {color:#003366}
...
<a class=mainlink>base hyperlink</a>
<a class=mainlink id=blue>modified
hyperlink</a>
Bloks: <div>, rindkopa, tabula,…
Rinda: <span>, teikums, vārds,…
Height
Width
Border
Margin
Padding
Float
Clear
margin-left: L
margin-right: R
margin-top: T
margin-bottom: B
margin
margin: TBLR
margin: TB LR
margin: T LR B
margin: T B L R
padding-left: L
padding -right: R
padding -top: T
padding -bottom: B
padding
padding : TBLR
padding : TB LR
padding : T LR B
padding : T B L R
border-top-width: width
border-bottom-width: width
border-left-width: width
border-right-width: width
border-width: width
border-color: color
border-style:
none, dotted, dashed, solid, double, groove, ridge, inset,
outset
border-top: width color style
border-bottom: width color style
border-left: width color style
border-right: width color style
border: width color style
border: border-width || border-style || color
border-bottom: border-width || border-style ||
color
border-bottom-width: <value>
border-bottom-style: <stils>
border-bottom-width: thin | medium | thick |
<value>
u.t.t.
border-collapse: collapse | separate
Float: left/right/both
Clear: right/left/none/both
color: #color
background: background-attachment ||
background-color || background-image ||
background-position || background-repeat
background-attachment: fixed | scroll
background-color: krāsa
background-image: url(ceļš) | none
background-position: [проценты | значение]
| [left | center | right] || [top | center | bottom]
background-repeat: no-repeat | repeat |
repeat-x | repeat-y
font: font-style || font-variant || font-weight ||
font-size || line-height || font-family
font-family: fonta nosaukums [, fonta
nosaukums[, ...]]
font-size: abs_size | rel_size | value | percents
font-style: normal | italic | oblique
font-variant: normal | small-caps
font-weight: bold | bolder | lighter | normal |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900.