Css

CSS
Tabla de contenido
1. CSS
2. Introduccin
i. Qu es CSS?
ii. Navegadores
iii. Funcionamiento
3. Estructura
i. Sintaxis
ii. Comentarios
4. Selectores
i. Selectores bsicos
5. Valores y unidades
i. Unidades de medida
ii. Unidades absolutas
iii. Unidades relativas
iv. Colores
6. Textos, fuentes y listas
i. Tipografas
ii. Tamao
iii. Estilos
iv. Color
v. Espacio entre letras y palabras
vi. Espacio entre renglones
vii. Alineacin del texto
viii. Decoracin y transformacin de texto
ix. Listas
7. Modelo de cajas
i. Modelo de cajas
ii. Alto y ancho
iii. Mrgenes
iv. Relleno
8. Fondos y bordes
i. Fondos
ii. Color de fondo
iii. Imagen de fondo
iv. Repeticin de imagen
v. Posicionamiento
vi. Bordes
vii. Color
viii. Estilo
9. Tipografa web
i. Tipografa web
ii. FontSquirrel Kit
iii. GoogleFonts
10. Gradientes
i. Gradientes
11. Flexbox
i. Flexbox
ii. Sintaxis
iii. Propiedades
2
CSS
12. Transiciones y transformaciones

i. Transiciones
ii. Transformaciones
13. Animaciones
i. Animaciones
14. Media queries
i. Media queries
CSS
Qu es CSS?
CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnologa desarrollada por el World Wide Web
Consortium (W3C) con el fin de separar la estructura de la presentacin.
CSS
CSS
Introduccin
Qu es CSS?
Navegadores
Funcionamiento
Introduccin
CSS
Qu es CSS?
Hoja de estilo en cascada o CSS (siglas en ingls de cascading style sheets) es un lenguaje de hojas de estilos creado
para controlar la apariencia de los documentos definidos con HTML.
Una vez creados los contenidos, se utiliza el lenguaje CSS para aplicar diseo en cada elemento: color, tamao y tipo de
letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.
1970 - Aparecen las primeras hojas de estilos.
1995 - W3C decidi apostar por el desarrollo y estandarizacin de CSS y lo aadi a su grupo de trabajo de HTML.
1996 - W3C public la primera recomendacin oficial, conocida como "CSS nivel 1".
Al da de la fecha, CSS va por el nivel 3.
Qu es CSS?
CSS
Navegadores
A la hora de armar tu propio sitio web, es imprescindible conocer el soporte de CSS en cada uno de los navegadores que
hay en el mercado.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores ms utilizados por los
usuarios:
Navegador
Motor
Google
Chrome
WebKit
Completo desde la
versin 85 del motor
Completo
Todos los selectores, pseudo-clases y

muchas propiedades
Internet
Explorer
Trident
Completo desde la
versin 7.0 del
navegador
Completo

muchas propiedades a partir de la versin
10.0 del navegador
Firefox
Gecko
Completo desde la
versin 1.0 del
navegador
Completo

muchas propiedades
Safari
WebKit
Completo desde la
versin 85 del motor
Completo

muchas propiedades
Opera
Presto
Completo desde la
versin 1.0 del
navegador
Completo

muchas propiedades
Navegadores
CSS 1
CSS 2.1
CSS 3
CSS
Funcionamiento
Existen tres maneras de agregar CSS al HTML, en lnea, dentro del archivo HTML o un archivo externo.
Dentro del archivo HTML: Con un etiqueta <style type="text/css"></style>
Dentro de la propia pgina HTML se crea una zona especial en la que se incluye toda la informacin relacionada con los
estilos de la pgina. Dicha etiqueta tiene que estar siempre dentro de la etiqueta <head> .
El principal inconveniente es que si se quiere hacer una modificacin en los estilos definidos, es necesario modificar todas
las pginas que incluyen el estilo que se va a modificar.
Archivo externo: En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML
enlazan mediante la etiqueta <link> . Un archivo de tipo CSS no es ms que un archivo simple de texto cuya extensin es
.css .
Se pueden crear todos los archivos CSS que sean necesarios.

Lo primero que hay que hacer es crear un archivo.css, esto se puede hacer desde cualquier editor de cdigo, como
Sublime o Dreamweaver.
El modo de enlazar dicho archivo dentro del HTML es mediantes la etiqueta <link> y al igual que en el ejemplo anterior,
esta debe estar dentro de la etiqueta <head> .
Ejemplo:
Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus contenidos tambin descarga los archivos CSS
externos enlazado.
La etiqueta
rel: indica el tipo de relacin que existe entre el archivo que estamos linkeando (en este caso, el archivo CSS) y la
pgina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
type: indica el tipo de archivo que estoy linkeando. Sus valores estn estandarizados y para los archivos CSS su valor
siempre es text/css.
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede
apuntar a un recurso interno o externo al sitio web.
Funcionamiento
CSS
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Ms adelante se explican en detalle los
medios CSS y su funcionamiento.
En lnea: Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy especfico para un solo elemento concreto.
Ejemplo:
Funcionamiento
CSS
Estructura
Sintaxis
Comentarios
Estructura
10
CSS
Sintaxis
La sintaxis de CSS, es bastante sencilla. Tiene tres elementos importantes. Selectores, propiedades y valores.
Cada selector, selecciona cual es el elemento/etiqueta del HTML al que se le va a estar aplicando el diseo. La
propiedad es el aspecto de ese elector, como por ejemplo, el color, el color de fondo, los mrgenes, tamaos de tipografa,
etc.
Los valores, son esos que aplicamos a cada una de estas propiedades.
Un archivo CSS, est compuesto por muchos selectores y cada selector puede tener ms de una propiedad.
Ejemplo:
El modo de escribir CSS es el siguiente:

Primero seleccionamos la etiqueta a la cual le queremos aplicar el diseo, por ejemplo p, despus abrimos una llave y
debajo escribimos la propiedad que le queremos aplicar, en nuestro caso sera font-size , justo despus de la propiedad,
escribimos : (dos puntos) y el valor, 14px . Al terminar de escribir el valor, se agrega un ; (punto y coma) y finalmente se
cierra con la llave.
A medida que empezs a agregar ms y ms pares propiedad-valor para cada selector CSS es importante que te
acuerdes de poner punto y coma (;) al final de cada lnea.
El punto y coma le indica a las CSS que es el fin de un par propiedad-valor y que es el momento de continuar con el
siguiente.
Sintaxis
11
CSS
Comentarios
Al igual que vimos en HTML, CSS tambin permite incluir comentarios entre sus reglas y estilos. Los navegadores ignoran
por completo cualquier comentario de los archivos CSS, por lo que es comn utilizarlos para estructurar de forma clara
nuestros archivos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */ , tal y
como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Es importante ver, que la sintaxis de los comentarios en CSS, es muy diferente a los del HTML.
Comentarios
12
CSS
Selectores
Selectores bsicos
Selectores
13
CSS
Selectores bsicos
Selector de etiqueta
Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo
selecciona todos los prrafos de la pgina:
p { ... }
Se pueden aplicar los mismos estilos a dos etiquetas diferentes, encadenando los selectores. En el siguiente ejemplo, los
ttulos de seccin h1 y h2 comparten los mismos estilos:
CSS permite agrupar todas las reglas individuales en una sola regla con un selector mltiple. Se pueden incluir todos los
selectores separados por una coma (,) y el resultado de la siguiente regla CSS es equivalente a las dos reglas anteriores:
Selector descendiente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se
encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos de la pgina que se encuentren dentro de un elemento
<p> :
p span { color: red; }
Selectores bsicos
14
CSS
Si el cdigo HTML de la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
Este estilo, solo se le va a aplicar a todos los elementos <span> que estn dentro de un elemento <p> , pero si en otra
parte del sitio tenemos un elemento que no est dentro de un elemento <p> , entonces este estilo no se le aplica.
Selector de clase
Si queremos aplicar estilos a un elemento en particular de nuestra pgina, el mejor modo es utilizar el atributo class de
HTML sobre ese elemento. De esta manera le podemos indicar directamente la regla CSS que le queremos aplicar.
Ejemplo:
<body>
<p>Loem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Supongamos que le queremos aplicar estilos CSS slo al primer prrafo, Cmo hacemos? El selector de tipo o etiqueta
<p> no se puede utilizar porque seleccionara todos los prrafos. El selector descendente (body p) tampoco se puede
utilizar porque todos los prrafos se encuentran en el mismo sitio. Entonces, lo que hacemos, es agregar a la etiqueta <p>
el atributo llamado class:
<body>
<p class="destacado">Loem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
En el archivo CSS, se crea una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento.
Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class
con un punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la pgina cuyo atributo class sea igual a destacado", por
lo que solamente el primer prrafo cumple esa condicin.
Este tipo de selectores se llaman selectores de clase. La principal caracterstica de este es que en una misma pgina
HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo
Ver ejemplo:
Selectores bsicos
15
CSS
Selector de ID
A veces, es necesario aplicar estilos CSS a un nico elemento de la pgina. Aunque puede utilizarse un selector de clase
para aplicar estilos a un nico elemento, existe otro selector ms eficiente en este caso
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su atributo id . Este tipo de selectores
slo seleccionan un elemento de la pgina ya que el valor del atributo id no se puede repetir en dos elementos diferentes
dentro una misma pgina.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el smbolo del
numeral ( # ) en vez del punto ( . ) como prefijo del nombre de la regla CSS:
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo prrafo (cuyo atributo id es igual a
destacado ).
Herencia
Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se
establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automtica el
valor de esa propiedad.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>
El selector body solamente establece el color de la letra para el elemento <body> . No obstante, la propiedad color es una
de las que se heredan de forma automtica, por lo que todos los elementos descendientes de <body> muestran ese
mismo color de letra. Entonces, establecer el color de la letra en el elemento <body> de la pgina implica cambiar el color
de letra de todos los elementos de la pgina.
Selectores bsicos
16
CSS
Selectores bsicos
17
CSS
Valores y unidades
Unidades de medida
Unidades absolutas
Unidades relativas
Colores
Valores y unidades
18
CSS
Unidades de medida
Las medidas en CSS se emplean, para definir la altura, anchura y mrgenes de los elementos y para establecer el tamao
de letra del texto.
Todas las medidas se indican como un valor numrico entero o decimal seguido de una unidad de medida.
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en
relacin con otra medida, por lo que para obtener su valor real, se debe realizar alguna operacin con el valor indicado.
Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el
valor indicado.
Unidades de medida
19
CSS
Unidades absolutas
Una medida indicada mediante unidades absolutas est completamente definida, ya que su valor no depende de otro valor
de referencia.
La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar, sin necesidad
de realizar clculos intermedios. El motivo de porque las unidades absolutas se usan poco es que no permiten adaptarse
al tamao de la pantalla que utilice cada usuario.
Unidades absolutas
20
CSS
Unidades relativas
La unidades relativas, a diferencia de las absolutas, no estn completamente definidas, ya que su valor siempre est
referenciado respecto a otro valor.
Las tres unidades de medida relativas ms utilizadas son:
em , relativa respecto del tamao de letra del elemento.
ex , relativa respecto de la altura de la letra x ("equis minscula") del tipo y tamao de letra del elemento.
px , (pxel) relativa respecto de la resolucin de la pantalla del dispositivo en el que se visualiza la pgina HTML.
La unidad em hace referencia al tamao en puntos de la letra que se est utilizando. Si se utiliza una tipografa de 12
puntos, 1em equivale a 12 puntos. El valor de 1ex se puede aproximar por 0.5em .
Ejemplo: p { margin: 1em; }
La regla CSS anterior indica que los prrafos deben mostrar un margen de anchura igual a 1em.
El pixel es una unidad de medida un tanto especial. La consideramos una unidad relativa porque no tiene un valor absoluto
y nico, sino que presenta variaciones segn los dispositivos.
Las pantallas suelen tener una resolucin expresada en pxeles, por ejemplo 1280 x 800 px, donde el primer valor indica el
nmero de puntos horizontales y el segundo valor el nmero de puntos verticales en que se divide la pantalla.
Unidad
Smbolo
Ejemplo
Porcentaje
#menu1 {width: 50%;}
Relativa al tamao de letra
em
#menu1 {font-size: 2.65em;}
Relativo a la x minscula
ex
#menu1 {font-size: 2.65ex;}
Pixel*
px
#menu1 {font-size: 24px;}
Unidades relativas
21
CSS
Colores
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal,
RGB numrico y RGB porcentual. Aunque el mtodo ms habitual es el del RGB hexadecimal.
Palabras clave
CSS define 17 palabras clave para referirse a los colores bsicos. Las palabras se corresponden con el nombre en ingls
de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,white, yellow
RGB decimal
El modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para
obtener ese color. La combinacin de las letras de estos tres colores en ingls es RGB y as se denomina al sistema de
construccin de colores basado en indicar la proporcin de cada uno de estos tres colores.
Por lo tanto, en el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde) y B (azul). Cada una
de las componentes puede tomar un valor entre cero y un valor mximo. La cantidad de cada color se expresa entre un
valor mnimo que es cero y un valor mximo que es 255.
El color rgb (0, 0, 0) es el negro y el color rgb (255, 255, 255) es el blanco. El color rojo ser el rgb (255, 0, 0), el verde rgb
(0, 255, 0) y el azul (0, 0, 255).
RGB porcentual
Las componentes RGB de un color tambin se pueden indicar mediante un porcentaje. El funcionamiento y la sintaxis de
este mtodo es el mismo que el del RGB decimal. La nica diferencia es que en este caso el valor de las componentes
RGB puede tomar valores entre 0% y 100%. Por tanto, para transformar un valor RGB decimal en un valor RGB
porcentual, es preciso realizar una regla de tres considerando que 0 es igual a 0% y 255 es igual a 100%.
RGB hexadecimal
Para entender el modelo RGB hexadecimal, es preciso introducir un concepto matemtico llamado sistema numrico
hexadecimal. Cuando realizamos operaciones matemticas, siempre utilizamos 10 smbolos para representar los nmeros
(del 0 al 9). Por este motivo, se dice que utilizamos un sistema numrico decimal. Entre los sistemas numricos
alternativos ms utilizados se encuentra el sistema hexadecimal, que utiliza 16 smbolos para representar sus nmeros.
Colores
22
CSS
Como slo conocemos 10 smbolos numricos, el sistema hexadecimal utiliza tambin seis letras (de la A a la F) para
representar los nmeros. De esta forma, en el sistema hexadecimal, despus del 9 no va el 10, sino la A. La letra B
equivale al nmero 11, la C al 12, la D al 13, la E al 14 y la F al nmero 15.
Para definir un color en CSS con el mtodo RGB hexadecimal se deben realizar los siguientes pasos: - Determinar las
componentes RGB decimales del color original, por ejemplo: R = 47, G = 62, B = B0 - Transformar el valor decimal de cada
componente al sistema numrico hexadecimal.
Se trata de una operacin exclusivamente matemtica, por lo que puedes utilizar una calculadora. En el ejemplo anterior,
el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0 - Para obtener el color completo en formato RGB
hexadecimal, se concatenan los valores hexadecimales de las componentes RGB en ese orden y se les aade el prefijo #.
De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.
Ejemplo: p { color: #4762B0; }
Afortunadamente, todos los programas de diseo grfico convierten de forma automtica los valores RGB decimales a sus
valores RGB hexadecimales, por lo que no tienes que hacer ninguna operacin matemtica:
Herramienta de color de Photoshop para definir los colores segn los modelos RGB, CMYK, Lab, HSB y RGB hexadecimal
Se admiten algunas variantes a la hora de definir un color hexadecimal en CSS. Un color se puede designar con solo tres
smbolos en lugar de seis. En este caso se considera que es una abreviacin de la repeticin de esos smbolos, por
ejemplo #FFF se considera abreviacin de #FFFFFF y #05F se considera abreviacin de #0055FF.
Tambin se admite el uso de letras en minsculas en lugar de letras maysculas. De este modo, #ffffff equivale a #FFFFFF
#0dab4f equivale a #0DAB4F.
Colores
23
CSS
Textos, fuentes y listas

Tipografas
Tamao
Estilos
Color
Espacio entre letras y palabras
Espacio entre renglones
Alineacin del texto
Decoracin y transformacin de texto
Listas
Textos, fuentes y listas
24
CSS
Tipografas
CSS dispone de una serie de propiedades que permiten controlar la forma en que se muestra el texto.
Entre ellas vamos a ver algunas como el tamao, el color, subrayado, interlineado, alineacin, etc.
La primera que vamos a ver es la familia tipogrfica que queremos utilizar para mostrar el texto, esta propiedad se llama
font-family .
Ejemplo: p { font-family: Arial; }

Por el momento, solo vamos a poder elegir algunas tipografas bsicas, que son las que el usuario que va a estar
navegando mi web, tengas instaladas en su computadora. Por ejemplo, Helvetica, Arial, Times new roman y Verdana.
Como no sabemos exactamente cuales tipografas tiene instaladas el usuario, podemos elegir ms de una de la siguiente
manera:
Ejemplo: p { font-family: Arial, Helvetica;}
De esta manera, el navegador probar en primer lugar con el primer tipo de letra indicado. Si el usuario la tiene instalada,
el texto se muestra con ese tipo de letra. Si el usuario no dispone del primer tipo de letra indicado, el navegador ir
probando con el resto de tipos de letra hasta que encuentre alguna fuente que est instalada en el ordenador del usuario.
Para solucionar este problema se utilizan las familias tipogrficas genricas. Cuando la propiedad font-family toma un
valor igual a sans-serif , el diseador no indica al navegador que debe utilizar la fuente Arial, sino que debe utilizar "la
fuente que ms se parezca a Arial de todas las que tiene instaladas el usuario".
Ejemplo: p { font-family: Arial, Helvetica, sans-serif;}
Tipografas
25
CSS
Tamao
La propiedad para definir el tamao se llama font-size .
Este tamao lo podemos definir con las unidades de medida relativas y absolutas que vimos anteriormente.
Continuando con el ejemplo anterior, el modo de configurar el tamao de nuestro prrafo es el siguiente:
Ejemplo:
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
De esta manera, le estamos diciendo que nuestro prrafo va a tener tipografa Arial y un tamao de 14px.
Tamao
26
CSS
Estilos
Itlica
La propiedad que nos permite elegir si queremos mostrar nuestro texto en itlica, se llama font-style. Funciona de la
misma manera que la etiqueta que vimos en HTML.
Se escribe de la siguiente manera:
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }
Negrita
Si queremos mostrar nuestro texto en negrita, la propiedad que vamos a utilizar, se llama font-weight . La palabra weight
en ingls, significa peso. En este caso, el valor para que nuestro texto se vea en negrita, se llama Bold y funciona igual
que la etiqueta <strong> del HTML.
Al ejemplo anterior, vamos a agregarle un titular h1 que queremos que siempre se muetre en negrita.
h1 { font-weight: bold; }
Estilos
27
CSS
Color
La propiedad bsica que define CSS que se utiliza para establecer el color de la letra, se llama color.
Esta propiedad utiliza ms de un valor para elegir el color del texto.
Como vimos antes en la parte de colores, uno de los modos es utilizar las palabras claves como: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,white, yellow
La desventaja de este mtodo, es que contamos con una paleta de colores bastante reducida. Es por eso que
normalmente utilizamos el mtodo del cdigo Hexadecimal. Entonces, si queremos que todos nuestros <h1> se vean del
mismo color (en este caso gris), lo escribimos de la siguiente manera:
h1 { font-weight: bold; color: #cccccc; }
Algo importante a tener en cuenta es que la propiedad color, se hereda, por lo que si queremos que todos los textos de
nuestro sitio tengan el mismo color, basta con ponerlo en la etiqueta body.
body { color: #000; }
En el ejemplo anterior, todos los elementos de la pgina muestran el mismo color de letra salvo que establezcan de forma
explcita otro color. La nica excepcin de este comportamiento son los enlaces que se crean con la etiqueta <a> . Aunque
el color de la letra se hereda de los elementos padre a los elementos hijo, con los enlaces no sucede lo mismo, por lo que
es necesario indicar su color de forma explcita:
/* Establece el mismo color a todos los elementos de la pgina salvo los enlaces */
body { color: #000; }
/* Establece el mismo color a todos los elementos de la pgina, incluyendo los enlaces */
body, a { color:#000; }
Color
28
CSS

CSS tambin permite controlar la separacin entre las letras que forman las palabras y la separacin entre las palabras
que forman los textos. La propiedad que controla la separacin entre letras se llama letter-spacing y la separacin entre
palabras se controla mediante word-spacing .
La siguiente imagen muestra la comparacin entre un texto normal y otro con las propiedades letter-spacing y wordspacing aplicadas:
Esto se elige al igual que con font-size, con una unidad de medida. Como por ejemplo el pixel (px).
Ejemplo:
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; letter-spacing: 5px; word-spacing:
10px; }
29
CSS

Siguiente en la misma lnea, tambin podemos modificar el espaciado entre rengln y rengln (interlineado). La propiedad
en este caso, se llama line-height y quiere decir, la altura de la de lnea.
Algo importante a tener en cuenta, es que a la hora de elegir el tamao de interlineado, tenemos que tener en cuenta el
tamao de tipografa que estamos utilizando, por ejemplo para una tipografa de 14px, un interlineado de 18px es
apropiado.
10px; line-height: 18px; }
30
CSS
Alineacin del texto

Una de las propiedades ms importantes con respecto al texto, es su alineacin. Podemos elegir si queremos que el texto
se vea alineado a la izquierda, a la derecha, centrado o justificado.
La propiedad que define la alineacin del texto se denomina text-align .
Los valores que utiliza CSS para definir esto, son los siguientes: la izquierda ( left ), a la derecha ( right ), centrado
( center ) y justificado ( justify ).
La siguiente imagen muestra el efecto de establecer el valor left , right , center y justify respectivamente a cada uno
de los prrafos de la pgina.
Ejemplo:
h1 { font-weight: bold; color: #cccccc; text-align: center; }
10px; line-height: 18px; text-align: left; }
En este caso, decidimos que todos nuestro ttulos H1 estn alineados al centro y todos nuestros prrafos hacia la
izquierda.
Alineacin del texto
31
CSS

Decoracin del texto
Esta propiedad, nos permite decorar el texto, la misma se llama text-decoration .
Cuando hablamos de decorar el texto, nuestras opciones son: (subrayado, tachado, parpadeante, etc.)
El valor underline subraya el texto, hay que tener cuidado donde lo queremos agregar ya que puede confundir a los
usuarios hacindoles creer que se trata de un enlace. El valor overline aade una lnea en la parte superior del texto, un
aspecto que raramente utilizado. El valor line-through muestra el texto tachado con una lnea continua, por lo que su uso
tampoco es muy habitual.
Transformacin del texto
Una de las propiedades de CSS ms desconocidas y que puede ser de gran utilidad en algunas circunstancias es la
propiedad text-transform , que puede variar de forma sustancial el aspecto del texto.
La propiedad text-transform permite mostrar el texto original transformado en un texto completamente en maysculas
( uppercase ), en minsculas ( lowercase ) o con la primera letra de cada palabra en mayscula ( capitalize ).
La siguiente imagen muestra cada uno de los posibles valores.
En nuestro ejemplo, vamos a elegir que todos los ttulos sean mostrados en mayscula.
Ejemplo:
32
CSS
h1 { font-weight: bold; color: #cccccc; text-align: center; text-transform: uppercase; }
10px; line-height: 18px; text-align: left; }
33
CSS
Listas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una vieta formada por un pequeo
crculo de color negro.
CSS define varias propiedades para controlar el tipo de vieta que muestran las listas.
La propiedad bsica es la que controla el tipo de vieta que se muestra y se denomina list-style-type .
En primer lugar, el valor none permite mostrar una lista en la que sus elementos no contienen vietas, nmeros o letras.
Se trata de un valor muy utilizado, ya que es imprescindible para los mens de navegacin creados con listas.
El resto de valores de la propiedad list-style-type se dividen en tres tipos: grficos, numricos y alfabticos.
Los valores grficos son disc , circle y square y muestran como vieta un crculo relleno, un crculo vaco y un
cuadrado relleno respectivamente.
Los valores numricos estn formados por decimal , decimal-leading-zero , lower-roman , upper-roman , armenian y
georgian .
Por ltimo, los valores alfanumricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lowergreek.
La siguiente imagen muestra algunos de los valores definidos por la propiedad list-style-type:
El siguiente ejemplo indica que no se debe mostrar ni vietas automticas ni vietas personalizadas:
ul { list-style: none }
Cuando queremos personalizar el aspecto de las vietas, se debe emplear la propiedad list-style-image, esta permite
mostrar una imagen propia en vez de una vieta automtica.
Las imgenes personalizadas se indican mediante la URL de la imagen.
Listas
34
CSS
Las reglas CSS correspondientes al ejemplo anterior se muestran a continuacin:

ul.ok { list-style-image: url("imagenes/ok.png"); }
ul.flecha { list-style-image: url("imagenes/flecha.png"); }
ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }
Listas
35
CSS
Modelo de cajas
Modelo de cajas
Alto y ancho
Mrgenes
Relleno
Modelo de cajas
36
CSS
Modelo de cajas
El modelo de caja o (box-model) es el que condiciona el diseo de las pginas web.
En HTML, todos los elementos generan una caja que los contiene, sobre la cual, actan los estilos.
Lgicamente las particularidades de cada caja varan en funcin del tipo de elemento que sea. Entonces, cada vez que se
inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
Los navegadores crean y colocan las cajas de forma automtica, pero CSS permite modificar todas sus caractersticas.
Cada una de las cajas est formada por cuatro partes.
De adentro hacia fuera, las cajas tienen contenido, padding, borde y margen.
Contenido (content): Es el contenido HTML del elemento, como los parrafos, las listas, las imgenes, etc.
Relleno (padding): Es el espacio libre (opcional) que existe entre el contenido y el borde.
Borde (border): Es la lnea que encierra el contenido y su relleno.
Margen (margin): Es el espacio libre (opcional) entre la caja y el resto de las cajas adyacentes.
Modelo de cajas
37
CSS
Alto y ancho
Por default, si no le indicamos ningn ancho especfico, el navegador va a hacer que la caja ocupe todo el ancho de la
ventana. Con respecto al alto, va a hacer que la caja ocupe el mnimo posible, por lo que el alto de la misma, va a
depender pura y exclusivamente del contenido que tenga.
Ancho
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width .
La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su
elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre.
El siguiente ejemplo establece como valor de ancho 200px para el elemento <div> caja:
#caja { width: 200px; }
<div id="caja">
...
</div>
Otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width .
La propiedad max-width define el ancho de una caja, sin darle un valor fijo. De esta manera le podemos dar un tamao de
ancho mximo, lo que significa que si la ventana del navegador se achica o se agranda, la caja tambin lo hace, pero con
un ancho mximo de tope. O sea, no se va a agrandar ms que el valor que le hayamos configurado en la propiedad maxwidth .
#caja { width: 200px; max-width: 800px; }
<div id="caja">
...
</div>
De la misma manera que definimos un ancho mximo, podemos definir un ancho mnimo. Lo que significa que la caja no
va a medir menos de lo que nosotros le hayamos configurado. Esta propiedad se llama min-width .
#caja { width: 200px; max-width: 800px; min-width: 400px; }
<div id="caja">
...
</div>
Para resumir, basndonos en el ejemplo anterior, nuestra caja no va a medir menos de 400px ni ms de 800px, dentro de
esas medidas y dependiendo del tamao de la ventana del navegador, nuestra caja es variable.
Altura
Al igual que sucede con width , la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma
como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explcitamente, se asigna el
valor auto a la altura.
Alto y ancho
38
CSS
El siguiente ejemplo establece como valor de alto 50px para el elemento <div> cabecera:
#cabecera { height: 50px; }
<div id="cabecera">
...
</div>
Otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height .
Estas dos propiedad funcionan exctamente igual que con el ancho. Nos permite definir topes mximos y mnimos en la
altura de nuestra caja.
Alto y ancho
39
CSS
Mrgenes
CSS define cuatro propiedades para controlar cada uno de los mrgenes horizontales y verticales de un elemento.
Cada una de las propiedades establece la separacin entre el borde lateral de la caja y el resto de cajas adyacentes:
Normalmente, las unidades ms utilizadas para indicar los mrgenes de un elemento son los pxeles.
Las propiedades margin-top , margin-right , margin-bottom , margin-left se utilizan para definir el ancho de los mrgenes
de cada uno de los lados del elemento por separado.
Puedes definir los 4 lados o solo aquellos que necesites.
En base a nuestro ejemplo anterior, vamos a definirle mrgenes a nuestro div caja.
#caja { width: 200px; max-width: 800px; min-width: 400px; margin-top: 5px; margin-bottom: 5px; margin-left: 10px;
margin-right: 10px; }
Adems de las cuatro propiedades que controlan cada uno de los mrgenes del elemento, CSS define una propiedad
especial que permite establecer los cuatro mrgenes de forma simultnea.
Esta propiedad se llama margin . Entonces:
1) Si slo se indica un valor, todos los mrgenes tienen ese mismo valor.
Ejemplo: margin: 5px;
En este caso, nuestra caja va a tener un margen de 5px en sus cuatro lados.
2) Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los mrgenes
izquierdo y derecho.
Ejemplo: margin: 5px 10px;
En este caso, nuestra caja va a tener un margen de 5px de arriba y de abajo y 10 px de la derecha y de la izquierda.
3) Si se indican los cuatro valores, el orden de asignacin es: margen superior, margen derecho, margen inferior y margen
izquierdo.
Ejemplo: margin: 5px 10px 12px 15px;
Mrgenes
40
CSS
En este caso, nuestra caja va a tener un margen de 5px de arriba, 10px de la derecha, 12px de abajo y 15px de la
izquierda.
Mrgenes
41
CSS
Relleno
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un
elemento.
Cada una de estas propiedades establece la separacin entre el contenido y los bordes laterales de la caja del elemento:
Al igual que con los mrgenes, CSS tambin define una propiedad llamada padding para establecer los cuatro rellenos de
un elemento de forma simultnea.
Entonces, podemos escribir cada relleno por separado, definiendo su ubicacin:
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
O podemos escribir los cuatro juntos con la propiedad padding por s sola:
padding: 5px 10px 12px 15px;
Relleno
42
CSS
Fondos y bordes
Fondos
Color de fondo
Imagen de fondo
Repeticin de imagen
Posicionamiento
Bordes
Color
Estilo
Fondos y bordes
43
CSS
Fondos
Unos de los atributos ms utilizados es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen.
Este solamente se visualiza en el rea ocupada por el contenido y su relleno.
Para establecer un color o imagen de fondo en la pgina entera, se debe establecer un fondo al elemento <body> .
CSS define cinco propiedades para establecer el fondo de cada elemento ( background-color , background-image ,
background-repeat , background-attachment , background-position )
Fondos
44
CSS
Color de fondo
La forma de indicar el color de fondo de una etiqueta desde CSS es con la propiedad background-color . Como valor,
podemos utilizar uno de los colores predeterminados, escribiendo simplemente la palabra, por ejemplo green o podemos
utilizar el sistema hexadecimal, escribiendo el cdigo de color.
Ejemplo:
body { background-color: #F5F5F5; }
Color de fondo
45
CSS
Imagen de fondo
No solo podemos aplicar color, sino que adems podemos aplicar una imagen como fondo de una etiqueta. La propiedad a
utilizar, en este caso, es background-image .
Las imgenes de fondo se indican a travs de su URL, que puede ser absoluta o relativa. Suele ser recomendable crear
una carpeta de imgenes que se encuentre en el mismo directorio que los archivos CSS y que almacene todas las
imgenes utilizadas en el diseo de las pginas.
CSS nos permite establecer de forma simultnea un color y una imagen de fondo. De hecho, es recomendable aplicar
ambas, ya que si por alguna razn, no se muestra la imagen de fondo, vamos a poder ver el color.
Ejemplo:
body { background-image: url("imagenes/fondo.jpg") }
Algo importante a tener en cuenta, son los formatos de imgenes que podemos utilizar para el fondo. Los mismos son:
JPG, PNG o GIF. En todos los casos, tienen que estar en modo RGB.
Imagen de fondo
46
CSS
Repeticin de imagen
Normalmente, el navegador tiende a repetir la imagen de fondo como si fuera un mosaico. Cuando queremos tener un
fondo con lneas horizontales o puntos, podemos utilizar una imagen pequea y hacer que la misma se repita en horizontal
y vertical. De esta manera vamos a conseguir un fondo prolijo y que se vea bien en todos los navegadores.
Para lograr esto, CSS introduce la propiedad background-repeat que permite controlar la forma de repeticin de las
imgenes de fondo.
El valor repeat indica que la imagen se debe repetir en todas direcciones. El valor no-repeat muestra una sola vez la
imagen y esta no se repite en ninguna direccin. El valor repeat-x repite la imagen slo horizontalmente y el valor repeat-y
repite la imagen solamente de forma vertical.
Ejemplo:
body { background-image: url("imagenes/fondo.jpg") repeat-x; }
En el ejemplo anterior, le estamos pidiendo que nuestra imagen fondo.jpg sea repetida de manera horizontal.
Repeticin de imagen
47
CSS
Posicionamiento
Adems de seleccionar el tipo de repeticin de las imgenes de fondo, CSS permite controlar la posicin de la imagen
dentro del fondo del elemento mediante la propiedad background-position .
En los casos que elegimos que la imagen no se repita, lo que sucede es que esta imagen se alinea con la esquina
superior izquierda de la caja. La propiedad background-position nos permite elegir la posicin de dicha imagen dentro de
la caja.
Esta propiedad puede manejarse con palabras clave, como top , bottom , center , left y right . Estas tambin se
pueden combinar. Por ejemplo podemos decir que nuestra imagen de fondo est alineada top center .
body { background-image: url("imagenes/fondo.jpg") repeat-x; background-position: top center; }
Lo que nos va a mostrar, es nuestra imagen alineada arriba al centro.

Otra opcin es utilizar nmeros, de esta manera vamos a poder indicar la coordenada exacta de la posicin de la imagen
con respecto a la caja en donde est ubicada como fondo.
El modo de escribirlo es el siguiente:
body { background-image: url("imagenes/fondo.jpg") repeat-x; background-position: 10px 20px; }
Como pueden ver en el ejemplo, tenemos dos nmeros, el primer nmero es la coordenada en X (horizontal) y el segundo
nmero es la coordenada en Y (vertical).
Posicionamiento
48
CSS
Bordes
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede
establecer su grosor, color y estilo.
El grosor de los bordes, se indica mediante una unidad de medida, como el pixel. La propiedad que utilizamos para esto,
se llama border-width .
Como ya vimos antes, podemos utilizar esta propiedad indicando especficamente a que lado le queremos aplicar el estilo,
o podemos utilizar la propiedad por s sola.
Ejemplo:
div { border-top-width: 10px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 5px; }
div { border-width: 10px; }
Si indicamos un solo valor, este se aplicar por igual a los cuatro bordes. Pero si se indican los cuatro valores, el orden de
aplicacin es superior, derecho, inferior e izquierdo.
Bordes
49
CSS
Color
Tambin podemos aplicarle color a nuestro borde. La propiedad que utilizamos es border-color . Funciona exactamente
de la misma manera que border-width , con la diferencia que para aplicarle un color debemos utilizar el cdigo
hexadecimal que vimos anteriormente.
Ejemplo:
div { border-top-color: #CC0000; border-right-color: #CCC; border-bottom-color: #00FF00; border-left-color: #CCC; }
Color
50
CSS
Estilo
En este caso, CSS no da varias opciones. El estilo de nuestro borde puede ser punteado, slido, con rayas, doble, etc.
Para poder seleccionar que estilo queremos, debemos utilizar uno los valores que CSS ya tiene definido.
Los valores son: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Los mismos se ven a de la siguiente manera:
Para establecer de forma simultnea los estilos de todos los bordes de una caja, utilizamos la propiedad llamada borderstyle.
Ejemplo:
div { border-top-style: dashed; border-right-style: double; border-bottom-style: dotted; border-left-style: solid; }
Al igual que sucede con los mrgenes y los padding, CSS define una serie de propiedades de tipo"shorthand" que
permiten establecer todos los atributos de los bordes de forma simultnea. Esta propiedad global se llama border .
Ejemplo:
div { border: 1px solid #cccccc; }
De esta manera le estamos diciendo que nuestra caja va a tener un borde slido, de 1px de grosor en sus cuatro lados y
de color gris.
Estilo
51
CSS
Tipografa web
Tipografa web
FontSquirrel Kit
GoogleFonts
Tipografa web
52
CSS
Tipofrafa Web
Hasta hace muy poco si queramos que nuestros diseos se vieran ms o menos igual para todos los usuarios haba que
conformarse con las fuentes que ya sabamos que estaban instaladas en la mayora de los ordenadores.
CSS creo una regla llamada @font-face que enlaza directamente al archivo de una tipografa que esta subida a un
servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografa.
A continuacin vers los servicios mas usados.
Tipografa web
53
CSS
FontSquirrel Kit
Si no queremos usar nuestras propias fuentes FontSquirrel nos ofrece cientos de tipografas libres de derecho que no ser
necesario convertir, porque se nos permite descargar el Kit o el paquete con todos los archivos y el cdigo necesario.
Link: http://www.fontsquirrel.com/fonts
FontSquirrel Kit
54
CSS
GoogleFonts
Un servicio de Google para implementar @font-face, donde se puede elegir entre 500 tipografas distintas. La gran
ventaja, es que te proporcionan un cdigo que debemos incluir en nuestro archivo css y de esta manera no es necesario
que la tipografa est alojada en nuestro propio servidor.
Link: http://www.google.com/fonts/
Como hacer para incorporar una Googlefont a nuestro sitio?
1) Ingresamos a http://www.google.com/fonts/
En la columna de la derecha se muestra el nmero de fuentes disponibles, el buscador interno y diversos filtros. En la
zona central de la pgina vemos el listado de fuentes y una muestra.
Cuando encontremos la tipografa que nos guste, se debe hacer clic en la opcin Quick-use que hay en la parte inferior del
cuadro. Tras esto, se muestra una pgina, donde se indican los pasos a seguir para usarla:
1. Elegir el estilo deseado. Tambin se informa del impacto que tiene la fuente seleccionada en la carga de la pgina.
2. Elegir el juego de caracteres que deseamos.
3. Incluir en nuestro sitio web la fuente.
4. Especificar que queremos aplicar la fuente en los elementos deseados de un sitio web. Hacemos uso de CSS.
GoogleFonts
55
CSS
Por ejemplo, si decidimos usar la fuente Euphoria Script, creada por Sabrina Lpez, incluiremos la siguiente lnea de
cdigo dentro del elemento <head> del documento HTML.
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
Con esto ya hemos incluido de alguna forma la fuente Euphoria Script en nuestro sitio web. Ahora, podremos aplicarla a
los elementos que deseemos mediante la propiedad font-family de CSS, como se muestra en el siguiente ejemplo, que
aplica esta fuente al elemento <h1> .
h1 { font-family: 'Euphoria Script', cursive; }
Esta es la manera ms utilizada para agregar fuentes a nuestro sitio web.
GoogleFonts
56
CSS
Gradientes
Gradientes
Gradientes
57
CSS
Gradientes
CSS3 ha agregado la opcin de crear gradientes (fondos en degrad) sin la necesidad de usar imgenes.
Los gradientes en CSS son de dos tipos: lineales ( linear-gradient ) o radiales ( radial-gradient ). En el gradiente lineal, la
transformacin de color va avanzando lnea a lnea, mientras que en el radial, la transformacin de color se produce
debido a que sucesivos crculos concntricos van cambiando de color.
La propiedad que utilizamos para realizar gradientes lineales, se llama linear-gradient y esta se agrega al atributo
background , que ya vimos con anterioridad.
Esta propiedad maneja dos opciones de parmetros, podemos elegir el punto de inicio o sea si queremos que lo aplique
arriba, abajo, a la derecha o a la izquierda de nuestra caja o podemos elegir los grados de inclinacin que queremos que
tenga nuestro gradiente.
Los puntos de inicio pueden ser top , right , left o bottom .
Entonces, supongamos que queremos aplicarle a nuestra caja un gradiente que va de negro a gris desde la parte de arriba
de la misma. La sintaxis sera la siguiente:
div { background: linear-gradient (to top, #000, #ccc) }
Si lo que queremos es aplicar un gradiente de 90, entonces la sintaxis sera as:

div { background: linear-gradient (90deg, #000, #ccc) }
Algunas cosas a tener en cuenta, la propiedad linear-gradient no genera un color de fondo, sino una imagen sin
dimensiones especficas, esta se va a adaptar automticamente para cubrir todo el espacio disponible.
Por otro lado, no todos los navegadores soportan esta propiedad.
Gradientes
58
CSS
Flexbox
Flexbox
Sintaxis
Propiedades
Flexbox
59
CSS
Flexbox
El objetivo de FlexBox es crear un modelo de caja o contenedor optimizado para los distintos dispositivos.
Lo que caracteriza un diseo flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor
posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el
espacio libre, o los comprime para evitar que rebasen el rea prevista.
Flexbox
60
CSS
Sintaxis
Para comenzar a trabajar con las propiedades Flexbox, primero tenemos que establecer el contenedor Flexible o Flex
Container, para que todos los contenidos interiores, se comporten flexiblemente.
Esto lo hacemos con la propiedad display y el valor Flex. display: flex;
Para que podamos entender mejor, veamos la siguiente imagen:
Flex container: Es el contenedor principal flexible

Flex items: Son los hijos directos del flex container y automticamente se vuelven items flexibles.
Main axis: Es el eje principal que atraviesa el elemento flex container horizontalmente y va de izquierda a derecha en su
flujo normal comenzando con start y terminando en el end main.
Cross axis: Es el eje vertical que atraviesa el elemento, el eje transversal y tambin consta de un start y end, va de arriba
a abajo del elemento.
Sintaxis
61
CSS
Propiedades
Flex-direction: Con flex-direction, vamos a poder establecer la direccin de los flex tems en el eje principal dentro del flex
container. Podemos cambiar su orden, colocarlos en disposicin de columnas e invertirlos en cualquier eje.
Flex-wrap: A veces cuando utilizamos las caractersticas Flexbox de CSS3 y el contenido es ejecutado en un viewport
pequeo el contenido que es flexible tratara de ajustarse y algunas veces este tendera a salirse de su contendor principal,
de su flex container.
Con flex-wrap vamos a controlar esta situacin, si el contenido es mucho para mostrarse en una sola lnea, en el eje
principal, esta propiedad utilizara el eje transversal para reordenar los tems flexibles.
Justify-content: Esta propiedad nos va a permitir controlar la alineacin de los elementos flexibles en el main axis o eje
principal.
Propiedades
62
CSS
Transiciones y transformaciones
Transiciones
Transformaciones
Transiciones y transformaciones
63
CSS
Transiciones
Las transiciones permiten controlar la velocidad a la que se van a modificar las propiedades de un elemento inclusive se
pueden aplicar curvas de aceleracin permitiendo de esta forma crear animaciones.
Transiciones
64
CSS
Transformaciones
Las transformaciones CSS ofrecen la posibilidad de modificar el desplazamiento, escala, rotacin, sesgo de elementos y
en combinacin con las transiciones nos permite crear animaciones css modificando gradualmente sus propiedades.
De las transformaciones de CSS3 en 2D, las ms usadas son:
Rotate: Rotate te permite rotar un elemento dndole un ngulo de giro en grados.
Scale: Scale te permite escalar un elemento, toma valores positivos y negativos y se le pueden poner decimales.
Translate: Translate nos permite trasladar un elemento a la vez en el eje de las X y de las Y, dndole las coordenadas
iniciales y finales.
Trasladar: Esta propiedad de CSS3 no hace propiamente una transicin, sino que hace que un elemento pase de
estar en una posicin a estar en otra. Con las transiciones y las animaciones de CSS3 vamos a poder darle un efecto
visual de movimiento.
Ejemplo:
transform: translate(10px, 20px);
Rotacin: Se puede aplicar tanto a elemento inline como a elementos de bloque.
.ejemplo { transform: rotate (45deg); }
Los grados se marcan en positivo si el elemento se rota en el sentido de las agujas del reloj y en negativo si es al revs.
Por defecto, el punto de referencia que toma como eje para hacer la rotacin es el centro, pero tambin se puede
especificar otro punto.
Escalar: Otro punto interesante va a ser escalar un elemento con CSS3.
Transformaciones
65
CSS
Si el valor es positivo, el elemento se hace ms grande, y si es negativo se hace ms pequeo.
Transformaciones
66
CSS
Animaciones
Animaciones
Animaciones
67
CSS
Animaciones
Una animacin tiene lugar en el tiempo, con lo que vamos a tener que tomar diferentes puntos dentro de un fragmento de
tiempo para especificar que sucede en cada uno de ellos. Es lo que se llaman keyframes. Para los que ya han trabajado
en Flash u otros programas de animacin ya conocen el concepto. En cada keyframe podemos introducir un cambio y la
suma de estos cambios es lo que va a dar lugar a la animacin final.
Para indicar la duracin de una animacin utilizaremos la propiedad animation-duration .
La velocidad de la animacin estar gestionado por la propiedad animation-timing-function .
Tambin en las animaciones de CSS3 podemos especificar un tiempo de espera antes de iniciar la animacin con la
propiedad animation-delay .
Con la propiedad animation-direction podremos indicarle que la propiedad se haga en sentido inverso al habitual, es
decir, que empiece por el final.
Para aprender ms sobre esto, pueden ver http://daneden.github.io/animate.css/
Animaciones
68
CSS
Media queries
Media queries
Media queries
69
CSS
Media queries
Los media types permiten indicar una serie de estilos que se aplicarn segn el tipo del medio, en algunas pginas, al ver
el cdigo fuente, nos encontramos algo como lo siguiente en su head
Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de
expresiones relacionadas con las caractersticas del dispositivo desde el cual se accede a la web. Las media queries dan
como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no.
Ejemplo:
@media (max-width: 600px) { }
Este sencillo ejemplo tiene una media query que significa lo siguiente:
Cuando el ancho de la pantalla tenga un ancho menor a 600px lees el cdigo encerrado dentro de las llaves que abren y
cierran la media querie.
Ejemplo:
body { background: green; }
@media (max-width: 600px) { body { background: red; } }
Esto har que el fondo de la web sea verde, pero cuando la pantalla sea menor a 600px el fondo ser rojo.
Las posibilidades y combinaciones son muchas y su uso est generalizado. Bootstrap o Foundation son slo dos ejemplos
de frameworks CSS que basan todo su funcionamiento en las media queries, lo que nos permite tener webs adaptables.
Al igual que hay varios media types, las media queries tienen varias expresiones a utilizar, las ms interesantes para el
responsive design son:
orientation: permite tomar por valores landscape o portrait lo que significa que la orientacin sea horizontal o vertical,
o sea, landscape si la ventana es ms ancha que alta y portrait si es ms alta que ancha.
resolution: Permite las variantes min-resolution y max-resolution . El valor que toma es la densidad de la pantalla en
valor de puntos por pulgada (dpi) o en puntos por pixel (dppx). Su uso principal es para cambiar los background de
imgenes segn el dispositivo sea de alta resolucin (como los retina display, iphone, ) o normal para que no se
carguen ms datos de los necesarios.
width: El alto del dispositivo. Se permiten las variantes min-width y max-width . Es la principal expresin para el
responsive design.
Media queries
70

Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css

Caricato da

Copyright:

Formati disponibili

CSS

12. Transiciones y transformaciones

Todos los selectores, pseudo-clases y

Todos los selectores, pseudo-clases y

Todos los selectores, pseudo-clases y

Todos los selectores, pseudo-clases y

Todos los selectores, pseudo-clases y

Se pueden crear todos los archivos CSS que sean necesarios.

El modo de escribir CSS es el siguiente:

p span { color: red; }

Si el cdigo HTML de la pgina es el siguiente:

#menu1 {width: 50%;}

Relativa al tamao de letra

#menu1 {font-size: 2.65em;}

#menu1 {font-size: 2.65ex;}

#menu1 {font-size: 24px;}

Textos, fuentes y listas

Textos, fuentes y listas

Ejemplo: p { font-family: Arial; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }

body { color: #000; }

Espacio entre letras y palabras

Espacio entre letras y palabras

Espacio entre renglones

Espacio entre renglones

Alineacin del texto

Alineacin del texto

Decoracin y transformacin de texto

Decoracin y transformacin de texto

h1 { font-weight: bold; color: #cccccc; text-align: center; text-transform: uppercase; }

Decoracin y transformacin de texto

Las reglas CSS correspondientes al ejemplo anterior se muestran a continuacin:

ul.flecha { list-style-image: url("imagenes/flecha.png"); }

ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }

#caja { width: 200px; max-width: 800px; }

Lo que nos va a mostrar, es nuestra imagen alineada arriba al centro.

div { border-width: 10px; }

Esta es la manera ms utilizada para agregar fuentes a nuestro sitio web.

Si lo que queremos es aplicar un gradiente de 90, entonces la sintaxis sera as:

Flex container: Es el contenedor principal flexible

Rotacin: Se puede aplicar tanto a elemento inline como a elementos de bloque.

.ejemplo { transform: rotate (45deg); }

Si el valor es positivo, el elemento se hace ms grande, y si es negativo se hace ms pequeo.

@media (max-width: 600px) { body { background: red; } }

Potrebbero piacerti anche