Está en la página 1de 28

Taller de Nuevas Tecnologas

Introduccin a CSS

Lic. Dela Lisandro


ldelia@lidi.info.unlp.edu.ar

Aspectos visuales de los elementos HTML


En los comienzos del HTML, los diseadores de pginas web

utilizaban elementos HTML especiales para modificar los aspectos


visuales de los elementos de las pginas. Ejemplo:
<html>
<head>
<title>Ejemplo de estilos (la forma incorrecta)</title>
</head>
<body>
<h1>
<font color="red" face="Arial" size="5">
Titulo de la pgina
</font>
</h1>
<p>
<font color="gray" face="Verdana" size="2">
Un prrafo de texto no muy largo.
</font>
</p>
</body>
</html>

Aspectos visuales de los elementos HTML


En los comienzos del HTML, los diseadores de pginas web

utilizaban elementos HTML especiales para modificar los aspectos


visuales de los elementos de las pginas. Ejemplo:
<html>
<head>
<title>Ejemplo de estilos (la forma incorrecta)</title>
</head>
<body>
<h1>
<font color="red" face="Arial" size="5">
Titulo de la pgina
</font>
</h1>
<p>
<font color="gray" face="Verdana" size="2">
Un prrafo de texto no muy largo.
</font>
</p>
</body>
</html>

Aspectos visuales de los elementos HTML


Por qu es incorrecto utilizar <font> y sus atributos

color, face, size, etc ?


Para la W3C qued obsoleto (deprecated)

Aspectos visuales de los elementos HTML


Por qu es incorrecto utilizar <font> y sus atributos

color, face, size, etc ?


Si una pgina tiene 40 elementos HTML, darle formato a

todos ellos implica utilizar 40 elementos <font>.


Si el sitio web entero est compuesto por 50 pginas
diferentes, se utilizaran 2000 elementos <font>.
Si utilizamos 3 atributos por etiqueta <font> estaramos
utilizando 6000 atributos !!!

Y si con el tiempo queremos cambiar el diseo de

todo el sitio (fuentes, colores, bordes, etc) ?

CSS Cascading Style Sheets


En 1995, el W3C decidi apostar por el desarrollo y

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

Por qu usar CSS?


Permite separar el contenido de un documento de su

representacin
Facilita el trabajo de equipo
Cdigo ms claro

Beneficios en la indexacin de buscadores

Esto evita la duplicacin de cdigo


Hace el mantenimiento del sitio ms simple
Usar el mismo contenido con diferentes estilos para

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

La forma bsica de definir un estilo es:

Selector universal
Selecciona todos los elementos de una pgina
Suele emplearse con otros selectores (lo veremos ms
adelante)
* { color: red }

Selector de tipo o etiqueta


Selecciona todos los elementos de la pgina cuya etiqueta
HTML coincide con el valor del selector
h1{ color: red }
h2, h3, h4 { color: green }

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,

sin importar el nivel de profundidad en el que se encuentre.


La sintaxis formal es: selector1 selector2 .. selectorN

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

.warning{ color: red; font-weight: normal; }


<p class=warning>Atencin .. </p>
<h1 class=warning>Pgina de error</h1>
Es posible aplicar los estilos de varias clases CSS sobre un mismo

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

para producir diferentes reglas

/* Todos los elementos de tipo "p" con atributo class=warning" */


p.warning { ... }
/* Todos los elementos con atributo class="warning" que estn dentro
de cualquier elemento de tipo "p" */
p .warning { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo class="warning" de la pgina */
p, .warning { ... }

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, se prefija el valor del atributo id con un numeral (#)


#slogan{ text-align: center; margin-top: 10px; }
<p id=slogan>El slogan de la compaia</p>

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

valor del atributo.


a{
display: inline-block;
height: 32px;
width: 32px;
}
a[href^="http://facebook"]{
background: url(facebook.png);
}
<a href="http://facebook.com/InfoUNLP">Enlace</a>

Selectores
Selector de atributos [atributo$=valor]
Selecciona elementos que tengan definido un atributo y cuyo valor

termine como se indica.


a{
display: inline-block;
height: 32px;
width: 32px;
}
a[href$=pdf"]{
background: url(extensionpdf.png);
}
<a href=archivo.pdf">Enlace</a>

Selectores
Selector de atributos [atributo*=valor]
Selecciona elementos que tengan definido un atributo y cuyo valor

incluya parte de lo declarado en la regla.


a{
display: inline-block;
height: 32px;
width: 32px;
}
a[href*=ch"]{
background: url(extensionpdf.png);
}
<a href=archivo.pdf">Enlace</a>

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

<! index.html -->


<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>

Herencia de estilos resolucin de


colisiones
/* styles.css */
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<! index.html -->
<p id="especial">...</p>
- Cuanto ms especfico sea un selector, ms importancia tiene

su regla asociada
- Si son iguales de especficos, se considera la ltima regla
indicada

También podría gustarte