Resum de CSS bàsic, segons l'assignatura Llenguatges i Estàndards Web, del Grau Multimèdia de la UOC.

1. CSS
ESTILS DE TEXT
PROPIETAT VALORS
Font-famity cursive, fantasy, monospace, sans-serif,
serif
Font-size xx-small, x-small, small, medium, large,
x-large, xx-large (o també amb px o em)
Font-style italic, normal, oblique
Font-variant normal, small-caps
Font-weignt bold, normal
Line-height Normal ( o també 1em, 1,5em, 4em...)
Text-align center, justify, left, right
Text-decoration line-through, none, overline, underline
Text-transform capitalize, lowercase, none, uppercase
White-space normal, nowrap, pre, pre-line, pre-wrap
color Es pot posar blue, black... o també #f00
IMATGES
PROPIETAT DEFINICIÓ DESCRIPCIÓ
Backround- Estableix el color de fons És més habitual fer servir la notació hexadecimals.
color També s’inclouen els valors transparent o
inherit.
Image Indica la ruta o URL de la Per exemple: url(foto.png)
imatge de fons S’ha de posar sempre url seguida i sense espais, de
la imatge entre parèntesi
Repeat Indica en quina direcció s’ha Els valors són:
de repetir la imatge de fons repeat, repeat-x, repeat-y i no-repeat
Attachment Defineix el comportament de Les imatges poden desplaçar-se amb el contingut o
la imatge de fons quan l’usuari quedar-se fitxes a la pantalla de visualització. Els
desplaça valors són: scroll, fixed i inherit
Position Indica al navegador on Els valors vàlids inclouen length (en píxels),
col·locar la imatge de fons percentatges (de l’amplada de l’element) i les
paraules clau: top, right, botton, left i
center. Es poden mesclar percentatges i píxels,
però no paraules clau amb píxels o percentatges.
Background La propietat abreujada que es Les propietats sempre s’haurien d’indicar en el
pot fer servir per descriure mateix ordre:
tota la resta de propietats 1 – Color
d’una línia 2 – url
3 – repeat
4 – attachment
5 – horizontal-position
6 – vertical-position
Exemple:
Background: green url(logo.gif) no-repeat
left top;

2. TIPUS DE CURSOR
PROPIETAT: VALOR EQUIVAL A...
cursor: pointer; Una má
cursor: help; Un interrogant
cursor: progress; Un rellotge d’arena amb un cursor
cursor: wait; Un rellotge d’arena
http://www.ignside.net/man/css/cursores.php
TIPUS DE PUNT EN LES LLISTES
PROPIETAT: VALOR EQUIVAL A...
list-style-type: square; Un quadrat
list-style-type: circle; Un punt negre
list-style-type: disc; Un cercle
list-style-type: none; Ningún punt
IMATGES COM A PIC
Si posem una classe a la llista podem establir una imatge com a pic de llista. Primer
eliminaríem el pic i desprès afegiríem la imatge amb background.
Si dintre de <ul> posem una classe “picnou”, el CSS seria així:
.picnou {
margin: 0;
padding: 0;
list-style-type: none;
}
.picnou li {
background: #fff url("icon.gif") 0 3px no-repeat;
padding: 0 0 5px 15px;
}
LLISTES HORITZONTALS COM A MENÚ
- Eliminaríem els margin i paddins de <ul>
- canviaríem l’element bloc per element en línia amb display: inline
- Aplicaríem una mica d’espaiat a la dreta dels elements de la llista perquè no toquin
#mainmenu {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline;
padding: 0 1em 0 0;
}
SUBRATLLATS
PROPIETAT: VALOR EQUIVAL A...
text-decoration: underline; Amb subratllat
text-decoration: none; Desactivar subratllat

3. ESTILS ALS ENLLAÇOS
Els enllaços sempre han d’anar en aquest ordre.
PROPIETAT: VALOR EQUIVAL A...
a:link{}
a:visited{}
a:focus{} Ja no es sol utilizar. Millor active
a:hover{} Per sobre
a:active{} Seleccionat
text-decoration: none; Desactivar les decoracions dels estats que hi
ha per defecte
Outline: thick solid #000; Contorn sòlid que no ocupa espai a l’enllaç
BORDERS, RATLLES I MARGES
PROPIETAT: VALOR VALORS EQUIVAL A...
border-bottom: 1px solid #00c; solid dotted dashed Ratlla inferior de diferents
decoracions
border-width Amplada de vora
border-style Dashed Vora de línia discontínua.
Dotted Vora de línia puntejada
Double Vora de doble línia.
Groove Relleu.
Inset Relleu.
None No hi ha vora. Equivalent a especificar una
border-width
(amplada) de zero.
Outset
Relleu.
Ridge
Solid Border amb l’efecte de profunditat
La vora és una línia contínua sense ombra
border-top Es pot canviar top
border-top-width per right, bottom o
border-top-style left
border-top-color
Margin-top -right, -borrom, -left, Col·locar espai en blanc al voltant
margin
Margin: auto; Marge (espai en blanc) segons el
valor proporcional al seu propi full
d’estil.
Margin-bottom Marge inferior
Margin-top Marge superior
Padding-top O també right,
bottom, left

4. OVERFLOW
PROPIETAT: VALORS EQUIVAL A...
overflow Visible L’element desborda la
caixa
hidden Els elements fora dels
límits de la caixa quedaran
amagats
auto Els elements fora dels
límits queden amagats
però es crearan les barres
de desplaçament que
siguin necessàries.
scroll S’incorporen barres de
desplaçament verticals i
horitzontals encara que no
calguin

5. DISPLAY
PROPIETAT: VALORS EQUIVAL A...
Display: Block, inline, none Canviar el valor del display bloc o línia
FLOAT
PROPIETAT: VALORS EQUIVAL A...
float: Left L’element flota a l’esquerra
right L’element flota a la dreta
none Es fa servir per desfer una declaració d’una altra regla
inherit L’element hereta el valor float del seu element pare
CLEAR
PROPIETAT: VALORS EQUIVAL A...
Clear: Left Garanteix que la seva caixa aparegui sota de qualsevol
caixa flotada a l’esquerra
right Garanteix que la seva caixa aparegui sota de qualsevol
caixa flotada a la dreta
both Apareix sota tots els elements flotants
none Valor per defecte
inherit Heretar
POSITION
PROPIETAT: VALORS EQUIVAL A...
position static L’element flota a l’esquerra
relative L’element flota a la dreta
absolute Es fa servir per desfer una declaració d’una altra regla
fixed L’element hereta el valor float del seu element pare

6. POSICIONAMENT ESTÀTIC
DISTÀNCIA VERTICAL ENTRE DUES CAIXES DE BLOC
margin-bottom margin-top
DISPOSICIÓ DE CAIXES EN LÍNIA
direction: ltr Direcció d’esquerra a dreta (per defecte)
direction: rtl Direcció de dreta a esquerra (idiomes àrab o hebreu)
line-height Modificar l’alçada de línia
vertical-align Controla les alineacions
vertical-align: baseline Les caixes en línia s’alineen de manera que les seves
línies de base de text queden alineades
POSICIONAMENT RELATIU
La caixa es col·loca igual que qualsevol element estàtic de bloc però es pot desplaçar
segons les rpopietats top, bottom, left i right
span {
position: relative;
top: 1em;
left: 2em;
background-color: lime;
}
En el posicionament relatiu el top: 1em i bottom: -1em són el mateix
POSICIONAMENT ABSOLUT
El posicionament absolut no té un avantpassat posicionat: El bloc contenidor és el que
s’anomena bloc contenidor inicial, que a la pràctica equival a l’element html. Això vol
dir la finestra del navegador. Significa els límits de la pàgina.
Si un element absolut està dintre d’un element relatiu, l’element relatiu fa de pare de
l’element absolut.