Hojas de Estilo en cascada, CSS

Es3los
CSS

Unidad
3

Asignatura
“Diseño
y
Desarrollo
Mul3media
para
la
Educación”

Profesorado
de
Informá3ca
-‐
Ins3tuto
Normal
de
Enseñanza
Técnica

Gabriela
Pérez
Caviglia

hIp://crea3vecommons.org/licenses/by-‐nc-‐nd/3.0/

¿Qué
es
CSS
?

Lenguaje
de
Es3los

Controlar
el
aspecto
de
los
documentos
HTML

Separa
los
contenidos
de
su
presentación

La
especiﬁcación
oﬁcial
se
encuentra
en
hIp://www.w3.org

Funcionamiento
básico

<html>

<head>

<3tle>Ejemplo
de
es3los
sin
CSS</3tle>

</head>

<body>

<h1><font
color=”red”
face=”Arial”
size=”5”>Titular
de
la
página</font></h1>

<p><font
color=”gray”
face=”Verdana”
size=”2”>Un
párrafo
de
texto
no
muy
largo.

</font></p>

</body>

</html>

Funcionamiento
básico

<html>

<head>

<3tle>Ejemplo
de
es3los
con
CSS</3tle>

<style
type=“text/css”>

h1
{

color:red;
U3lizando
CSS
se

font-‐family:Arial;
pueden
establecer

font-‐size:20px;
los
mismos
es3los

}

p
{
más
eﬁcientemente

color:gray;

font-‐family:Verdana;

font-‐size:12px;

}

</style>

</head>

<body>

<h1>Titular
de
la
página</h1>

<p>Un
párrafo
de
texto
no
muy
largo.</p>

</body>

</html>

Como
incluir
CSS
en
XHTML

1)
Podemos
deﬁnirlos
en
la
cabecera
del
documento
XHTML
con
la
e3queta

<style
type=“text/css”>

es$los

</style>

2)
Podemos
vincular
una
hoja
de
es3los
externa,
del
formato:
mi_hoja.css
en

este
caso
usaremos
para
vincular
la
hoja
la
e3queta
XHTML
<link>
es
el
método

más
conveniente.

index.html
es3los.css

<html>

<head>
h1
{

color:red;

<link
rel=”stylesheet”
type=”text/css”

font-‐family:Arial;

href=“es3los.css”
media=”screen”
/>

font-‐size:20px;

}

<3tle>Ejemplo
de
es3los
con
CSS</3tle>
p
{

</head>

color:gray;

<body>

font-‐family:Verdana;

<h1>Titular
de
la
página</h1>

font-‐size:12px;

<p>Un
párrafo
de
texto
no
muy
largo.</p>
}

</body>

</html>

Como
incluir
CSS
en
XHTML

rel:
indica
el
3po
de
relación
que
existe
entre
el
recurso
enlazado
y
la
página

HTML.
Para
los
archivos
CSS,
siempre
se
u3liza
el
valor
stylesheet

type:
indica
el
3po
de
recurso
enlazado.
Sus
valores
están
estandarizados
y
para

los
archivos
CSS
su
valor
siempre
es
text/css

href:
indica
la
URL
del
archivo
CSS
que
con3ene
los
es3los.

media:
indica
el
medio
en
el
que
se
van
a
aplicar
los
es3los
del
archivo
CSS.

(pantalla,
impreso,
disposi3vo)

Como
incluir
CSS
en
XHTML

3)
El
úl3mo
método
para
incluir
es3los
CSS
en
documentos
HTML
es
el
peor
y
el

menos
u3lizado,
ya
que
3ene
los
mismos
problemas
que
la
u3lización
de
las

e3quetas.

<html>

<head>

<3tle>Ejemplo
de
es3los
sin
CSS</3tle>

</head>

<body>

<h1><font
color=”red”
face=”Arial”
size=”5”>Titular
de
la
página</font></h1>

<p
style=”color:
black;
font-‐family:
Verdana;”>Un
párrafo
de
texto
no
muy
largo.

</font></p>

</body>

</html>

Sintaxis

Regla:
es
cada
uno
de
los
es3los
que
componen
una
hoja
de
es3los
CSS,
se
encuentra

conformada
por
“selectores”,
un
símbolo
de
“llave
de
apertura”
({),
otra
parte

denominada
“declaración”
y
por
úl3mo,
un
símbolo
de
“llave
de
cierre”
(}).

Selector:
indica
el
elemento
o
elementos
HTML
a
los
que
se
aplica
la
regla.

Declaración:
especifica
los
es3los
que
se
aplican
a
los
elementos,
puede
estar

compuesta
por
1
o
más
propiedades.

Propiedad:
caracterís3ca
que
se
modifica
en
el
elemento
seleccionado.

Valor:
establece
el
nuevo
valor
de
la
caracterís3ca
modificada
en
el
elemento

Selectores
básicos

Regla
CSS
=
selector
+
declaración

Indica
a
quién
hay
que
Indica
que
hay
que
hacer

hacérselo

Selectores
universales

Se
u3liza
para
aplicar
a
todos
los
elementos
de
una
página
las
declaraciones,
por

ejemplo:

*
{

margin:
0;

padding:
0;

}

Selector
de
3po
o
e3queta

Selecciona
todos
los
elementos
de
la
página
cuya
e3queta
HTML
coincide
con
el

valor
del
selector.

Por
ejemplo
selecciona
todos
los
párrafos
de
la
página:

p
{

h1
{

h1
{

h1,
h2,
h3
{

...

color:
red;

color:
#8A8E27;

color:
#8A8E27;

}

}

font-‐weight:
normal;

font-‐weight:
normal;

h2
{

font-‐family:
Arial,
Helve3ca,
sans-‐serif;

font-‐family:
Arial,

color:
blue;

}

Helve3ca,
sans-‐serif;

}

h2
{

}

color:
#8A8E27;

h1
{
font-‐size:
18px;
}

font-‐weight:
normal;

h2
{
font-‐size:
16px;
}

font-‐family:
Arial,
Helve3ca,
sans-‐serif;

h3
{
font-‐size:
14px;
}

}

h3
{

color:
#8A8E27;

font-‐weight:
normal;

font-‐family:
Arial,
Helve3ca,
sans-‐serif;

}

Selector
descendientes

Selecciona
los
elementos
que
se
encuentran
dentro
de
otros
elementos.
Un

elemento
es
descendiente
de
otro
cuando
se
encuentra
entre
las
e3quetas
de

apertura
y
de
cierre
del
otro
elemento.

<p>

p
span
{
color:
red;
}

<span>texto1</span>

</p>

<h1><span>texto2</span></h1>

CSS
html

Selector
de
clase

Es
cuando
queremos,
por
ejemplo
aplicar
los
es3los
solo
a
un
párrafo
en

par3cular,
por
ejemplo
queremos
destacar
el
primero:

<body>

<body>

<p>Lorem
ipsum
dolor
sit
amet...</p>

<p
class=“destacado”>Lorem
ipsum
dolor
sit

<p>Nunc
sed
lacus
et
est
adipiscing
amet...</p>

accumsan...</p>

<p>Nunc
sed
lacus
et
est
adipiscing

<p>Class
aptent
taci3
sociosqu
ad
litora...</p>

accumsan...</p>

</body>

<p>Class
aptent
taci3
sociosqu
ad
litora...</p>

</body>

html
html

.destacado
{
color:
red;
}

CSS

Selector
de
clase

El
selector
de
clase
puede
aplicarse
en
dis3ntos
contextos,
por
ejemplo:

<body>

<p
class=”destacado”>Lorem
ipsum
dolor
sit
amet...</
p>

<p>Nunc
sed
lacus
et
<a
href=”#”
class=”destacado”>est
adipiscing</a>

accumsan...</p>

<p>Class
aptent
taci3
<em
class=”destacado”>sociosqu
ad</em>
litora...</p>

</body>

html

.destacado
{
color:
red;
}

CSS

Selector
de
ID

El
selector
de
ID
permite
seleccionar
un
elemento
de
la
página
a
través
del
valor

de
su
atributo
id.
En
html
el
valor
del
atributo
id
no
se
puede
repe3r
en
dos

elementos
diferentes
de
una
misma
página.

Para
la
sintaxis
de
los
selectores
de
id
en
CSS
se
u3liza
el
símbolo
de
numeral
(#)

<div
id=”contenido”>
#contenido

<p>Primer
párrafo</p>
{
width:200px;
height:200px;

</div>
border:2px
doIed;
background-‐color:
red;
}

html
CSS

Combinación
de
selectores

CSS
permite
la
combinación
de
uno
o
más
Jpos
de
selectores
para
restringir
el

alcance
de
las
reglas
CSS.

selecciona
aquellos
elementos
(puede
ser

.aviso
.especial
{
...
}

cualquiera)
con
un
class=”especial”
que
se

encuentren
dentro
de
cualquier
elemento

con
un
class=”aviso”.

solamente
selecciona
aquellos
elementos
de

div.aviso
span.especial
{
...
}

3po
<span>
con
un
atributo
class=”especial”

que
estén
dentro
de
cualquier
elemento
de

3po
<div>
que
tenga
un
atributo
class=”aviso”

La
combinación
de
selectores
puede
adoptar
formas
complejas.

Unidades
de
Medida
y
Colores

Unidad
de
medida

Las
medidas
en
CSS
se
emplean,
entre
otras,
para
definir
la
altura,
anchura
y

márgenes
de
los
elementos
y
para
establecer
el
tamaño
de
letra
del
texto.

Unidades
rela3vas

Son
más
flexibles
que
las
unidades
absolutas
porque
se
adaptan
más
fácilmente

a
los
diferentes
medios.

em,
(no
confundir
con
la
e3queta
<em>
de
HTML)
rela3va
respecto
del
tamaño

de
letra
empleado.
Aunque
no
es
una
definición
exacta,
el
valor
de
1em
se

puede
aproximar
por
la
anchura
de
la
letra
M
(“eme
mayúscula”)
del
3po
y

tamaño
de
letra
que
se
esté
u3lizando

ex,
rela3va
respecto
de
la
altura
de
la
letra
x
(“equis
minúscula”)
del
3po
y

tamaño
de
letra
que
se
esté
u3lizando

px,
(píxel)
rela3va
respecto
de
la
resolución
de
la
pantalla
del
usuario

Unidad
de
medida

Unidades
rela3vas

Las
unidades
absolutas
deﬁnen
las
medidas
de
forma
completa,
ya
que
sus

valores
reales
no
se
calculan
a
par3r
de
otro
valor
de
referencia,
sino
que
son

directamente
los
valores
indicados.

in,
del
inglés
“inches”,
pulgadas
(1
pulgada
son
2.54
cenxmetros)

cm,
cenxmetros

mm,
milímetros

pt,
puntos
(1
punto
equivale
a
1
pulgada/72,
es
decir,
unos
0.35
milímetros)

pc,
picas
(1
pica
equivale
a
12
puntos,
es
decir,
unos
4.23
milímetros)

Colores

Los
colores
en
CSS
se
pueden
indicar
de
cinco
formas
diferentes:
palabras
clave,

colores
del
sistema,
RGB
hexadecimal,
RGB
numérico
y
RGB
porcentual.

Palabras
claves
y
el
RGB
hexadecimal
son
los
más
usados
y
los
que

desarrollaremos.

Palabras
clave

CSS
deﬁne
17
palabras
clave
para
referirse
a

los
colores
básicos.
Las
palabras
se

corresponden
con
el
nombre
en
inglés
de

cada
color:

aqua,
black,
blue,
fuchsia,
gray,
green,
lime,

maroon,
navy,
olive,
orange,
purple,
red,

silver,
teal,
white,
yellow

Colores

RGB
Hexadecimal

En
el
sistema
decimal
conocemos
10
símbolos
numéricos,
el
sistema

hexadecimal
u3liza
también
seis
letras
(de
la
A
a
la
F)
para
representar
los

números.
De
esta
forma,
en
el
sistema
hexadecimal,
después
del
9
no
va
el
10,

sino
la
A.
La
letra
B
equivale
al
número
11,
la
C
al
12,
la
D
al
13,
la
E
al
14
y
la
F
al

número
15.

Los
que
hacemos
es
determinar
el
valor
RGB
del
color
original

Por
ejemplo
R
=
71,
G
=
98,
B
=
176

Se
transforman
esos
valores
a
hexadecimal
mediante
una
operación

matemá3ca,
lo
que
nos
da:
R
=
47,
G
=
62,
B
=
B0

Se
unen
esos
valores
y
en
ese
orden
y
se
les
añade
el
preﬁjo
#.
De
esta
forma,
el

color
del
ejemplo
anterior
es
#4762B0
en
formato
RGB
hexadecimal.

P
{
color:
#4762B0;}

Tipograza

CSS
define
numerosas
propiedades
para
modificar
la
apariencia
del
texto.

Atributos:

color:

color
de
letra
u3lizado
ej.
h1
{
color:
#B1251E;
}

font-‐family:

3po
de
letra
u3lizadoo
familia
3pográfica
para
ej:
p
{font-‐family:

Arial,
Helve3ca,
sans-‐serif;
}

font-‐size:
tamaño
de
la
letra
y
medida
(como
las
vistas)
o
sino
mediante

palabras
claves:
xx-‐small,
x-‐small,
small,
medium,
large,
x-‐large,
xx-‐large.

p
{font-‐size:
12px;
}

font-‐style:
es3lo
de
la
letra
u3lizada
para
el
texto
normal,
italic,
etc.
ej:
h1
{font-‐
style:
italic}

p
{
color:
#4762B0;}

Tipograza

También
deﬁne
otros
atributos
para
el
conjunto
de
texto:

Atributos:

text-‐align:
alineación
del
contenido
del
elemento,
le7,
right,
etc.

line-‐height:
altura
de
línea
de
los
elementos
normal,
<numero>,
<medida>

text-‐decoraJon:

decoración
del
texto
(subrayado,
tachado,
parpadeante,
etc.)

text-‐transform:
Transforma
el
texto
original
(a
mayúsculas,
a
minúsculas,
etc.)

verJcal-‐align:
determina
la
alineación
ver3cal
de
los
contenidos
de
un
elemento

leYer-‐spacing:
permite
establecer
el
espacio
entre
las
letras
que
forman
las
palabras
del

texto

word-‐spacing:
Permite
establecer
el
espacio
entre
las
palabras
que
forman
el
texto

Pseudo
clases

CSS
también
permite
aplicar
diferentes
es3los
a
un
mismo
enlace
en
función
de
su

estado.
De
esta
forma,
es
posible
cambiar
el
aspecto
de
un
enlace
cuando
por
ejemplo
el

usuario
pasa
el
ratón
por
encima
o
cuando
el
usuario
pincha
sobre
ese
enlace.

:link,
aplica
es3los
a
los
enlaces
que
apuntan
a
páginas
o
recursos
que
aún
no
han
sido

visitados
por
el
usuario.

:visited,
aplica
es3los
a
los
enlaces
que
apuntan
a
recursos
que
han
sido
visitados

anteriormente
por
el
usuario.

:hover,
aplica
es3los
al
enlace
sobre
el
que
el
usuario
ha
posicionado
el
puntero
del

ratón.

:acJve,
aplica
es3los
al
enlace
que
está
pinchando
el
usuario.
Los
es3los
sólo
se
aplican

desde
que
el
usuario
pincha
el
botón
del
ratón
hasta
que
lo
suelta,
por
lo
que
suelen
ser

unas
pocas
décimas
de
segundo.

a:hover
{
text-‐decora3on:
underline}

Viñetas

En
primer
lugar,
el
valor
none
permite
mostrar
una
lista
en
la
que
sus
elementos
no

con3enen
viñetas,
números
o
letras.

El
resto
se
dividen
en
tres
3pos:
gráﬁcos,
numéricos
y
alfabéJcos.

Los
valores
gráﬁcos
son
disc,
circle
y
square
y
muestran
como
viñeta
un
círculo
relleno,

un
círculo
vacío
y
un
cuadrado
relleno
respec3vamente.

Los
valores
numéricos
están
formados
por
decimal,
decimal-‐leading-‐zero,
lower-‐roman,

upper-‐roman,
armenian
y

georgian.

Por
úl3mo,
los
valores
alfanuméricos
se
controlan
mediante
lower-‐la3n,
lower-‐alpha,

upper-‐la3n,
upper-‐alpha
y
lower-‐greek.

Viñetas

list-‐style-‐image:
Permite
reemplazar
las

viñetas
por
una
imagen

Tablas
es3los
básicos

Bordes

Por
defecto
las
tablas
se
muestran
así:

Pero
en
CSS
disponemos
de
la
propiedad

border-‐collapse
que
nos
permite
uniﬁcar
los

bordes
dobles

Para
las
tablas
aplican
la
pseudo
clase
:hover,

que
permite
por
ejemplo
realizar
el
efecto
de

que
una
ﬁla
cambie
de
color
al
pasar
sobre

ella.

Hojas de Estilo en cascada, CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Hojas de Estilo en cascada, CSS

Similar a Hojas de Estilo en cascada, CSS (20)

Último

Último (20)

Hojas de Estilo en cascada, CSS