Modulo1parte2ver2 140505061829-phpapp02

Para que sirve el CSS?
Cascading Style Sheet
(«Hoja de estilos en cascada»)

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>

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>

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.)

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>

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>

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>

Sintaxis básica
Digamos que queremos un fondo rojo
Usando HTML
Usando CSS
<body bgcolor="#FF0000">
body {background-color: #FF0000;}

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

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';
}

Tipos de Selectores CSS
•  Selector de Elemento: h2{}
•  Selector de Clase: .miClase{}
•  Selector de Identificador: #esteId{}

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
}

Selector de Elemento CSS
Se pueden aplicar a múltiples selectores
div, p, a{
color: blue;
text-align:center
}

Todos los Tipos de Selectores
Tipos de Selectores
h2{
font-size:24px;
}
.azul{
color:blue;
}
#alerta{
background-color:red;
color:white;
}

Selectores compuestos
Tipos de Selectores
h2.azul{
font-size:24px;
}
h2.alerta{
background-color:red;
color:white;
}

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<ﬁcador
“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>

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>

Selector CSS de Elemento
<!DOCTYPE html>
<html>
<head>
<style>p{background-color:yellow;} </style>
</head>
<body>
<div>
</div>
</body>
</html>

Selector CSS de Clase
<!DOCTYPE html>
<html>
<head>
<style>.intro {background-color:yellow;} </style>
</head>
<body>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
</body>
</html>

Selector CSS de Identificador
<!DOCTYPE html>
<html>
<head>
<style>#firstname{ background-color:yellow;} </style>
</head>
<body>
<div class="intro">
</div>
</body>
</html>

Selector CSS elemento, elemento
<!DOCTYPE html>
<html>
<head>
<style>h1,p{background-color:yellow;}</style>
</head>
<body>
<div>
<p>My name is Donald.</p>
</div>
</body>
</html>

Selector CSS elemento elemento
<!DOCTYPE html>
<html>
<head>
<style>div p{background-color:yellow;}</style>
</head>
<body>
<div>
<h2>My name is Donald</h2>
</div>
</body>
</html>

Selector CSS elemento > elemento
<!DOCTYPE html>
<html>
<head>
<style> div>p {background-color:yellow;}</style>
</head>
<body>
<div>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div>

Selector CSS elemento + elemento
<!DOCTYPE html>
<html>
<head>
<style> div+p{ background-color:yellow; } </style>
</head>
<body>
<div>
</div>
<p>I will not be styled.</p>
</body>
</html>

Selector CSS elemento ~ elemento
<!DOCTYPE html>
<html>
<head>
<style> p~ul{background:#ff0000;} </style>
</head>
<body>
<div>A div element.</div>
<ul><li>Coffee</li></ul>
<p>The first paragraph.</p>
<ul> <li>Coffee</li></ul>
<h2>Another list</h2>
<ul><li>Coffee</li></ul>
</body>
</html>

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
<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>

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-‐”

Selector CSS [atributo]
<!DOCTYPE html>
<html>
<head>
<style>a[target]{background-color:yellow;}</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org"
target="_top">wikipedia.org</a>
</body>
</html>

Selector CSS [atributo~=value]
<!DOCTYPE html>
<html>
<head>
<style>[title~=flower]{border:5px solid yellow;}</style>
</head>
<body>
<p>The image with the title attribute containing the word "flower" gets a
yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150"
height="113" />
<img src="img_flwr.gif" title="flowers" width="224" height="162" />
<img src="landscape.jpg" title="landscape" width="160" height="120" />
</body>
</html>

Selector CSS [atributo|=value]
<!DOCTYPE html>
<html>
<head><style>[lang|=en]{background:yellow;}</style></
head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<body>
</html>

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>

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="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>

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="firs_test_last">The third div element.</div>
<p class="test">This is some text in a paragraph.</div>
</body>
</html>

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/

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”

Herencia
37
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=utf-8">
<title>Herencia</title>
</head>
<body>
<h1>Título</h1>
<p>Un párrafo de texto.</p>
</body>
</html> inherit.html

html {font: 75% Verdana,sans-serif;} style.css

Herencia
38
<link rel="stylesheet" type="text/css" media="screen"
href="styles.css">
inherit.html

html {font: 75% Verdana,sans-serif;}
html {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 75%;
line-height: normal;
font-family: Verdana,sans-serif;
}
style.css

75%
de
16
pixels
es
12
pixels

Equivale
a

Herencia
39
h1 {
font-size: 300%;
}
inherit.html

Forzar la Herencia
40
p {background: inherit;}
style.css

Forzar la Herencia
41
style.css

<ul id="nav">
<li><a href="/">Inicio</a></li>
<li><a href="/news/">Noticias</a></li>
<li><a href="/products/">Productos</a></li>
<li><a href="/services/">Servicios</a></li>
<li><a href="/about/">Sobre nosotros</a></li>
</ul>
Inherit.htm

#nav {
background: blue;
color: white;
margin: 0;
padding: 0;
}
#nav li {
display: inline;
margin: 0;
padding: 0 0.5em;
border-right: 1px solid;
}
#nav li a {
color: inherit;
text-decoration: none;
}

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

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

Especificidad
44
hEp://www.jaso^.org/Blog/post/Tu-‐es<lo-‐gana-‐a-‐mi-‐es<lo-‐Especiﬁcidad-‐en-‐reglas-‐
CSS.aspx

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.

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

#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

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.

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.
reference them by using a <link> element in the <head> element of
each page.
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
diﬀerent
pages?

Modulo1parte2ver2 140505061829-phpapp02

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Destacado

Destacado (15)

Similar a Modulo1parte2ver2 140505061829-phpapp02

Similar a Modulo1parte2ver2 140505061829-phpapp02 (20)

Último

Último (20)

Modulo1parte2ver2 140505061829-phpapp02