Professional Documents
Culture Documents
Introduccin a CSS
estandarizacin de CSS
A finales de 1996, se publica la primera recomendacin
oficial, conocida como CSS nivel 1
El 12 de mayo de 1998, se publica la segunda
recomendacin oficial, conocida como CSS nivel 2
CSS 2.1 estuvo en borrador desde el 2004, y recin se
oficializ el 7 de junio de 2011.
En paralelo al desarrollo de la rama CSS 2, desde el ao
1999 se desarrolla la rama CSS 3, pero dividida en
mdulos.
Actualmente hay ms de 50 mdulos publicados, pero
solo algunos pocos estn publicados como
recomendaciones oficiales
representacin
Facilita el trabajo de equipo
Cdigo ms claro
diferentes propsitos
Optimizacin de los tiempos de carga y de trfico en el
servidor
Las pginas pueden reducir su tamao entre un 40% y 60%
Reduccin de los tiempos de carga del sitio en el navegador.
El navegador guarda en cach el css
Se reduce el volumen de trfico de nuestro servidor.
Definicin de estilos
Opcin 1) Incluir CSS en los elementos HTML. Ejemplo:
<html>
<head>
<title>Ejemplo de estilos</title>
</head>
<body>
<h1 style="color: red; font-family: Arial; font-size: 24px" >
Titulo de la pgina
</h1>
<p style="color: gray; font-family: Verdana; font-size: 13px">
Un prrafo de texto no muy largo.
</p>
</body>
</html>
Definicin de estilos
Opcin 2) Incluir CSS en el documento HTML. Ejemplo:
<html>
<head>
<title>Ejemplo de estilos</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: 24px }
p { color: gray; font-family: Verdana; font-size: 13px }
</style>
</head>
<body>
<h1>
Titulo de la pgina
</h1>
<p>
Un prrafo de texto no muy largo.
</p>
</body>
</html>
Definicin de estilos
Opcin 3) Incluir CSS en un archivo a parte. Ejemplo:
<html>
<head>
<title>Ejemplo de estilos</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
/* Archivo styles.css */
<h1>
h1 {
color: red;
Titulo de la pgina
font-family: Arial;
</h1>
font-size: 24px
<p>
}
Un prrafo de texto no muy largo.
p{
</p>
color: gray;
</body>
font-family: Verdana;
</html>
font-size: 13px
}
Selectores
selector {
atributo: valor;
atributo: valor;
.
Selector universal
Selecciona todos los elementos de una pgina
Suele emplearse con otros selectores (lo veremos ms
adelante)
* { color: red }
Selectores
Selectores mltiples
Se aplican mismos estilos a selectores diferentes
La sintaxis formal es: selector1, selector2, .. selectorN
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Selectores
Selectores descendentes
Selecciona los elementos que se encuentran dentro de otros elementos,
p span {
color: red;
}
<p>
...
<span>texto1</span>
...
<a href="">
texto2 <span>texto3</span>
</a>
...
</p>
Selectores
Selectores descendentes (continuacin)
Se puede restringir el alcance del selector descendente combinndolo con
el selector universal. El siguiente ejemplo, muestra los dos enlaces de color
rojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se
muestra de color rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Selectores
Selector CLASS
Selecciona cualquier elemento que tenga como atributo class el nombre
del selector.
Para que el navegador no confunda este selector con otros tipos de
selectores, se prefija el valor del atributo class con un punto (.)
elemento
<p class=warning especial>Atencin .. </p>
Selectores
Selector CLASS (continuacin)
A veces, es necesario restringir el alcance del selector class.
Se puede combinar este selector con los que vimos previamente
Selectores
Selector ID
Selecciona un nico elemento de la pgina, a travs del atributo id.
Para que el navegador no confunda este selector con otros tipos de
Selectores
Selector de hijos
Similar al selector descendente, pero aplica solo al elemento hijo
directo.
p>a{
font-weight: bolder;
}
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Selectores
Selector adyacente
Selecciona elementos que se encuentran justo a continuacin de otros.
h2 {
color: green;
}
h1 + h2 {
color: red
}
<h1>Titulo1</h1>
<h2>Subttulo</h2>
...
<h2>Otro subttulo</h2>
...
Selectores
Selector de atributos [atributo=valor]
Selecciona elementos en funcin de sus atributos y/o valores de esos
atributos.
input{
background: white;
}
input[type="text"]{
border: 2px solid #D667C2;
}
input[type="password"]{
border: 2px dashed #71D1AF;
}
input[type="submit"]{
border: 2px dotted #D1CE71;
}
<input type="text">
<input type="password">
<input type="submit">
Selectores
Selector de atributos [atributo^=valor]
Selecciona elementos en funcin de un atributo y como comienza el
Selectores
Selector de atributos [atributo$=valor]
Selecciona elementos que tengan definido un atributo y cuyo valor
Selectores
Selector de atributos [atributo*=valor]
Selecciona elementos que tengan definido un atributo y cuyo valor
Selectores
Selector pseudo-clases
Selecciona elementos que tengan cierto estado especfico.
La sintaxis formal es: selector:pseudo-class
a{
color: red;
}
a:visited {
color: green;
}
<a href=http://www.info.unlp.edu.ar">Enlace</a>
Selectores
Selector pseudo-clases (continuacin)
Listado de pseudo-clases.
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
Herencia de estilos
Cuando se establece el valor de una propiedad CSS en un
elemento, sus elementos descendientes heredan de forma
automtica el valor de esa propiedad.
/* styles.css */
body { color: blue; font-family: Arial; }
<! index.html -->
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
Herencia de estilos
Se puede sobrescribir los valores heredados
estableciendo de forma explcita otro valor para la
propiedad que se hereda.
/* styles.css */
body { color: blue; font-family: Arial; }
h1 { font-family: Verdana; }
p { color: red; }
su regla asociada
- Si son iguales de especficos, se considera la ltima regla
indicada