introducción a css
DESCRIPTION
Breve introduccion a CSSTRANSCRIPT
-
Taller de Nuevas Tecnologas Introduccin a CSS
Lic. Dela Lisandro [email protected]
-
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:
Ejemplo de estilos (la forma incorrecta)
Titulo de la pgina
Un prrafo de texto no muy largo.
-
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:
Ejemplo de estilos (la forma incorrecta)
Titulo de la pgina
Un prrafo de texto no muy largo.
-
Aspectos visuales de los elementos HTML
Por qu es incorrecto utilizar y sus atributos
color, face, size, etc ?
Para la W3C qued obsoleto (deprecated)
-
Aspectos visuales de los elementos HTML
Por qu es incorrecto utilizar y sus atributos
color, face, size, etc ?
Si una pgina tiene 40 elementos HTML, darle formato a
todos ellos implica utilizar 40 elementos .
Si el sitio web entero est compuesto por 50 pginas
diferentes, se utilizaran 2000 elementos .
Si utilizamos 3 atributos por etiqueta 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:
Ejemplo de estilos
Titulo de la pgina
Un prrafo de texto no muy largo.
-
Definicin de estilos
Opcin 2) Incluir CSS en el documento HTML. Ejemplo:
Ejemplo de estilos
h1 { color: red; font-family: Arial; font-size: 24px }
p { color: gray; font-family: Verdana; font-size: 13px }
Titulo de la pgina
Un prrafo de texto no muy largo.
-
Definicin de estilos
Opcin 3) Incluir CSS en un archivo a parte. Ejemplo:
Ejemplo de estilos
Titulo de la pgina
Un prrafo de texto no muy largo.
/* Archivo styles.css */
h1 {
color: red;
font-family: Arial;
font-size: 24px
}
p {
color: gray;
font-family: Verdana;
font-size: 13px
}
-
Selectores 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 }
selector { atributo: valor;
atributo: valor;
.
}
-
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;
}
...
texto1
...
texto2 texto3
...
-
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; }
Enlace
Enlace
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:
p * a { color: red; }
Enlace
Enlace
-
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; }
Atencin ..
Pgina de error
Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento
Atencin ..
-
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; }
El slogan de la compaia
-
Selectores
Selector de hijos Similar al selector descendente, pero aplica solo al elemento hijo
directo.
p > a {
font-weight: bolder;
}
Enlace
Enlace
-
Selectores
Selector adyacente Selecciona elementos que se encuentran justo a continuacin de otros.
h2 {
color: green;
}
h1 + h2 {
color: red
}
Titulo1
Subttulo
...
Otro subttulo
...
-
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;
}
-
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);
}
Enlace
-
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);
}
-
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);
}
-
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;
}
-
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; }
Titular de la pgina
Un prrafo de texto no muy largo.
-
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; }
Titular de la pgina
Un prrafo de texto no muy largo.
-
Herencia de estilos resolucin de colisiones
- Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada
- Si son iguales de especficos, se considera la ltima regla indicada
/* styles.css */
p { color: red; }
p#especial { color: green; }
* { color: blue; }
...