investigación de los Avances tecnológicos del siglo XXI
Fundamentos de CSS
1. Para que sirve el CSS?
Cascading Style Sheet
(«Hoja de estilos en cascada»)
2. Funcionamiento básico
Antes de CSS
<!DOCTYPE html>
<html>
<head></head>
<body>
<p><font color="gray" face="Verdana" size="2">
Primer párrafo a formatear
</font></p>
<p><font color="gray" face="Verdana" size="2">
Segundo párrafo a formatear
</font></p>
</body>
</html>
3. Funcionamiento básico
Después de CSS
<!DOCTYPE html>
<html>
<head>
<style>
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<p>Primer párrafo a formatear</p>
<p>Segundo párrafo a formatear</p>
</body>
</html>
4. Beneficios del CSS
• Separar la presentación del contenido.
• Código mas “limpio”. Mas legible.
• Rehusó del código. Se escribe menos.
• Control de la presentación de muchos
documentos desde una única hoja de estilo.
• Aplicación de diferentes presentaciones a
diferentes tipos de medios (pantalla, impresión,
etc.)
5. Incluir CSS en los elemento HTML
Como incluir CSS
<!DOCTYPE html >
<html>
<head></head>
<body>
<p style="color: black; font-family: Verdana;">
Un párrafo de texto.
</p>
</body>
</html>
6. Incluir CSS en el mismo documento HTML
Como incluir CSS
<!DOCTYPE html >
<html>
<head>
<style>p{ color: black; font-family: Verdana; } </style>
</head>
<body>
<p>Un párrafo de texto. </p>
</body>
</html>
7. Incluir CSS en otro documento
Como incluir CSS
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" />
</head>
<body>
<p>Un párrafo de texto. </p>
</body>
</html>
8. Sintaxis básica
Digamos que queremos un fondo rojo
Usando HTML
Usando CSS
<body bgcolor="#FF0000">
body {background-color: #FF0000;}
9. Regla CSS
• Selector: Define a que elemento o grupo de
elementos a los que se aplica le regla.
• Propiedad: Identifica el aspecto visual a
modificar.
• Valor: Específica que estilo se le va a aplicar a
la propiedad
10. Sintaxis de CSS
Todas las reglas CSS tienen la misma sintaxis:
Los comentarios son
Delimitados por /* … */
selector {
propiedad1:valor;
propiedad2:valor;
..
propiedadN:valor;
}
/* encabezados nivel 1 */
h1 {
font-size: 42px;
color: pink;
font-family: ‘Arial';
}
11. Tipos de Selectores CSS
• Selector de Elemento: h2{}
• Selector de Clase: .miClase{}
• Selector de Identificador: #esteId{}
12. Selector de Elemento CSS
Si se desea poner varias reglas hay que sepáralas
por el caracter “;”.
O de forma mas clara
p{color: blue;text-align:center}
p{
color: blue;
text-align:center
}
13. Selector de Elemento CSS
Se pueden aplicar a múltiples selectores
div, p, a{
color: blue;
text-align:center
}
14. Todos los Tipos de Selectores
Tipos de Selectores
h2{
font-size:24px;
}
.azul{
color:blue;
}
#alerta{
background-color:red;
color:white;
}
16. Ejemplos de selectores
*
Devuelve
todos
los
elementos
h2
Devuelve
cualquier
elemento
<h2>
.azul
Devuelve
todos
los
elementos
de
la
clase
“azul”
#azul
Devuelve
todos
los
elementos
del
elemento
<azul>
h2.azul
Devuelve
cualquier
elemento
<h2>
de
la
clase
“azul”
h2#azul
Devuelve
cualquier
elemento
<h2>
con
el
iden<ficador
“azul”
sec<on,
h2
Devuelve
cualquier
elemento
<h2>
y
<sec<on>
sec<on
h2
Devuelve
cualquier
elemento
<h2>
que
este
dentro
de
un
<sec<on>
sec<on
>
h2
Devuelve
cualquier
elemento
<h2>
que
este
dentro
e
inmediatamente
debajo
del
elemento
<sec<on>
sec<on
+
h2
Devuelve
cualquier
elemento
<h2>
inmediatamente
posterior
al
elemento
padre
<sec<on>
sec<on
~
h2
Devuelve
cualquier
elemento
<h2>
posterior
al
elemento
padre
<sec<on>
17. Selector CSS *
<!DOCTYPE html>
<html>
<head>
<style>*{background-color:yellow;}</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
18. Selector CSS de Elemento
<!DOCTYPE html>
<html>
<head>
<style>p{background-color:yellow;} </style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
19. Selector CSS de Clase
<!DOCTYPE html>
<html>
<head>
<style>.intro {background-color:yellow;} </style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
20. Selector CSS de Identificador
<!DOCTYPE html>
<html>
<head>
<style>#firstname{ background-color:yellow;} </style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
21. Selector CSS elemento, elemento
<!DOCTYPE html>
<html>
<head>
<style>h1,p{background-color:yellow;}</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
22. Selector CSS elemento elemento
<!DOCTYPE html>
<html>
<head>
<style>div p{background-color:yellow;}</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
23. Selector CSS elemento > elemento
<!DOCTYPE html>
<html>
<head>
<style> div>p {background-color:yellow;}</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div>
<p>My best friend is Mickey.</p>
24. Selector CSS elemento + elemento
<!DOCTYPE html>
<html>
<head>
<style> div+p{ background-color:yellow; } </style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
26. 26
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */{ font: 1em/1.3 Arial, Helvetica,
sans-serif; }
/* Todos los parrafos de la pagina */{ color: #555; }
/* Todos los párrafos contenidos en #primero */{ color: #336699; }
/* Todos los enlaces la pagina */{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */{ background:
#FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */{ font-weight: bold; }
</style>
</head>
hEp://librosweb.es/css/capitulo_15.html
27. 27
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent
blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non
facilisis molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum
enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec
porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet
est velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh
vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at
metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient
montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet.
Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em
class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis
lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
28. Selectores de atributos
Input[type]
Selecciona
cualquier
<input>
con
el
atributo
type
Input[foo~=“red”]
Selecciona
cualquier
<input>
donde
el
atribuEo
foo
contenga
un
valor
llamado
red
Input[type^=“sub”]
Selecciona
cualquier
<input>
con
el
atributo
type
que
comience
con
“sub”
Input[type$=“mit”]
Selecciona
cualquier
<input>
con
el
atributo
type
que
termine
con
“mit”
Input[type*=“ubmit”]
Selecciona
cualquier
<input>
con
el
atributo
type
que
contenga
con
“ubmit”
Input[type|=“en”]
Selecciona
cualquier
<input>
con
el
atributo
type
que
<ene
exactamente
“en”
o
comienza
con
“en-‐”
32. Selector CSS [atributo^=value]
<!DOCTYPE html>
<html>
<head>
<style> div[class^="test”]{background:#ffff00;}</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
33. Selector CSS [atributo$=value]
<!DOCTYPE html>
<html>
<head>
<style> div[class$="test”]{background:#ffff00;}</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
34. Selector CSS [atributo*=value]
<!DOCTYPE html>
<html>
<head>
<style>div[class*="test”]{background:#ffff00;}</style>
</head>
<body>
<div class="test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="firs_test_last">The third div element.</div>
<p class="test">This is some text in a paragraph.</div>
</body>
</html>
35. Herencia y Cascada
35
La herencia y la cascada mecanismo de cascada CSS
gobierna como los navegadores aplican estas reglas de
estilo.
• La herencia HTML determina cuales propiedades de
estilos se heredan de su padres.
http://www.w3.org/TR/CSS21/propidx.html
• El mecanismo de cascada determina como son
aplicados las propiedades de los estilos cuando
aparecen conflictos de reglas para los elementos.
hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade
hEp://mosaic.uoc.edu/ac/le/es/m6/ud2/
36. Herencia
36
• Cuando se establece el valor de una propiedad
CSS en un elemento, sus elementos
descendientes heredan de forma automática el
valor de esa propiedad.
• Porque es útil?
• Cómo funciona?
• Forzar la herencia. “inherit”
42. Cascada
42
Determinar todas las declaraciones que se aplican al
elemento para el medio CSS seleccionado.
El método seguido por CSS para resolver las colisiones de
estilos se muestra a continuación:
• Importancia: palabra clave !important.
• Especificidad: Ordenar las declaraciones según lo
específico que sea el selector. Cuanto más genérico es
un selector, menos importancia tienen sus
declaraciones.
• Orden de la Fuente: Ordenar las declaraciones según
su origen (CSS de navegador, de usuario o de
diseñador). Si después de aplicar las normas anteriores
existen dos o más reglas con la misma prioridad, se
aplica la que se indicó en último lugar.
hEp://www.w3.org/community/webed/wiki/Inheritance_and_cascade
43. Importancia
43
Las declaraciones contrapuestas se aplicarán en
el orden siguiente:
• Hojas de Estilo de User agent
• Declaraciones normales en hojas de estilo de
usuario
• Declaraciones normales en hojas de estilo de
autor
• Declaraciones importantes en hojas de estilo de
usuario
• Declaraciones importantes en hojas de estilo de
autor
45. Especificidad
45
La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El
componente "a" es el más distintivo y el "d", el que menos.
• El componente "a" es bastante sencillo: es 1 para una declaración
en un atributo style; si no, es 0.
• El componente "b" es el número de selectores de id en el selector
(los que empiezan con #).
• El componente "c" es el número de selectores de atributo, incluidos
los selectores de clase y pseudoclases.
• El componente "d" es el número de tipo de elementos y
pseudoelementos del selector.
46. p {
color: cyan;
}
Probemos esto
46
style.css
<body>
<h1>Título</h1>
<p>Un párrafo de texto.</p>
<p>Un segundo párrafo de texto.</p>
</body>
Inherit.htm
Agreguemos
esto
a
los
archivos
y
recarguemos
47. #special {
background-color: red;
color: yellow;
}
Probemos esto
47
style.css
<body>
<h1>Título</h1>
<p id="special" >Un párrafo de texto.</p>
<p>Un segundo párrafo de texto.</p>
</body>
Inherit.htm
Agreguemos
esto
a
los
archivos
y
recarguemos
48. p {
background-color: yellow;
color: black;
}
Orden de fuente
48
style.css
Agreguemos
esto
al
final
del
archivo
y
recarguemos
Si
dos
declaraciones
afectan
al
mismo
elemento,
<enen
la
misma
importancia
y
la
misma
especificidad,
la
señal
dis<n<va
final
es
el
orden
en
las
fuentes.
La
declaración
que
se
ve
más
adelante
en
las
hojas
de
es<lo
"ganará"
a
las
anteriores.
49. Question
49
¨ Include all rules for each element in the <style> attribute of the
element.
¨ Include the rules for each page in a <style> element in the <head>
element.
¨ Write the rules for the whole site in one or more style sheets and
reference them by using a <style> element in the <head> element of
each page.
¨ Write the rules for the whole site in one or more style sheets and
reference them by using a <link> element in the <head> element of
each page.
¨ Write the rules for the whole site in one or more style sheets and
reference them by using a <stylesheet> element in the <head>
element of each page.
What
is
the
best
way
to
apply
CSS
rules
to
HTML
elements
that
occur
in
several
different
pages?
