Fundamentos de CSS

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?

Fundamentos de CSS

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Fundamentos de CSS

Más de Nicolas Navarro Rincón

Fundamentos de CSS