CSS - Fundamentos (v. 2014) http://www.xpert.co/cursos-adobe/html5-css3.htm
Marlon Ceballos -‐ @adobexpert
Adobe Community Professional / Adobe Cer;fied Instructor
Adobe Consulting Adobe Consulting
www.xpert.co
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe
Consulting
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Conceptos básicos de CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es CSS • Cascading Style Sheets (Hojas de es;lo en cascada) • Las hojas de es;lo describen la presentación de lenguajes como HTML, XHTML y SVG, entre otros.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Historia de CSS • • • •
CSS 1.0: 1996 CSS 2.0: 1998 CSS 2.1: 2004 CSS 3.0: En progreso (desde 2001).
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sobre los es8los CSS • Las hojas de es;lo son una colección de reglas CSS • Los es;los son aplicados en el orden en que son encontrados (cascada) • Los es;los CSS generalmente están contenidos en archivos externos. www.xpert.co Adobe
Consulting
CSS main.css
CERTIFIED INSTRUCTOR
Design Master / Web Master
Herencia body {font-‐family: Times;} p {color: #F00;} !
= Texto
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Diferencias en los navegadores
WebKit*
WebKit
Gecko
Presto*
Trident
* A par;r de la versión 28 de Chrome y 15 de Opera, estos navegadores usarán el motor Blink de Google.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Importante!
Los elementos HTML -enen es-los CSS por defecto cuyos valores no necesariamente son iguales en los diferentes navegadores.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Ubicación de los es8los CSS • Externos: como archivo externo (recomendado) • Embed: dentro de la e;queta Head – Sobre-‐escribe el anterior (generalmente) • Inline: como atributo – Sobre-‐escribe los anteriores (generalmente).
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Orden de aplicación (cascada) CSS main.css
p {color: #F00;}
HTML index.htm
<head> <style> p {color: #0F0;} </style> </head>
HTML
<p style=“color: #00F”> Este es un texto </p>
index.htm www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Es8los inline
HTML
<p style=“color: #F00”>Este es un texto</p> !
index.htm
• Se aplican mediante el atributo style • Su uso no es muy recomendado.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Es8los embed
HTML index.htm
<head> <style> p {color: #F00;} </style> </head>
www.xpert.co Adobe
Consulting
• Se crean mediante la e;queta style dentro del head.
CERTIFIED INSTRUCTOR
Design Master / Web Master
Es8los externos
CSS
p {color: #F00;}
HTML
main.css
<head> <link href="main.css" rel="stylesheet"/> </head>
index.htm
• La forma más recomendada. www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Ventajas es8los externos CSS
HTML
HTML
HTML
www.xpert.co Adobe
Consulting
HTML
HTML
CERTIFIED INSTRUCTOR
Design Master / Web Master
Ventajas es8los externos CSS desktop.css
CSS tablet.css
CSS mobile.css
HTML
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis  CSS
p {font-family: Arial; color: #F00}
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis CSS
p {font-family: Arial; color: #F00} Selector Declaración
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis  CSS
p {font-family: Arial; color: #F00} Propiedad Valor
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis  CSS p {font-family: Arial; color: #F00} p{ }
font-family: Arial; color: #F00; www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Herramientas
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Selectores  CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Selectores CSS • Los selectores permiten “seleccionar” los elementos HTML a los que queremos aplicar reglas CSS.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Element selectors (Tag selectors) • Modifica elementos basados en las e;quetas HTML (body, p, ul, etc) • Se aplican de forma automá;ca !
p {color: #F00;}
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Class selectors • • • •
Se pueden usar las veces que sean necesarias Deben aplicarse de forma manual Sobre-‐escribe los element selectors si están en conflicto Su nombre inicia con un punto !
.rojo {color: #F00;}
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
ID selectors • • • • •
Se pueden usar una sola vez dentro de un archivo HTML Deben aplicarse de forma manual Suelen representar áreas de contenido Sobre-‐escribe los element y class selectors si están en conflicto Su nombre inicia con el símbolo numeral (#) !
#rojo {color: #F00;} www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Descended selectors • Dreamweaver los llama Compound selectors • Sobre-‐escriben los anteriores selectors !
div .rojo {color: #F00;}
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Selector universal y combinaciones • Selector universal * {color: #F00;} • Especificar elementos p.rojo {color: #F00;} • Agrupar selectores p, div, h1.rojo {color: #F00;}
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recomendaciones para nombres • No usar espacios ni símbolos • CSS es case-‐sen;;ve • Nombres cortos pero descrip;vos.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recomendaciones generales • Estructura HTML simple • Estructura HTML consistente • Planificación de es;los a usar.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Modelo de caja (Box Model)
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Box  model Margin Padding
Contenido Border
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Usos de margin y padding • • • • •
Todos los elementos HTML son una caja El padding separa el borde de la caja de su contenido El margin separa elementos entre si El margin se colapsa ver;calmente El valor auto para margin usualmente permite centrar horizontalmente.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis • • • •
padding/margin: 10px 5px 8px 2px; padding/margin: 10px 5px 8px; padding/margin: 10px 5px; padding/margin: 10px;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Bordes • border-‐top-‐width: 1px; • border-‐top-‐color: #F00; • border-‐top-‐style: none | hidden | doqed | dashed | solid | double | groove | ridge | inset | outset.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Bordes border-‐top-‐width: 1px; border-‐top-‐color: #F00; border-‐top-‐style: solid; border-‐right-‐width: 1px; border-‐right-‐color: #F00; border-‐right-‐style: solid;
border-‐boqom-‐width: 1px; border-‐boqom-‐color: #F00; border-‐boqom-‐style: solid; border-‐ler-‐width: 1px; border-‐ler-‐color: #F00; border-‐ler-‐style: solid;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Bordes • border-‐top: 1px #F00 solid; border-‐right: 1px #F00 solid; border-‐boqom: 1px #F00 solid; border-‐ler: 1px #F00 solid; !
• border: 1px #F00 solid;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Color de fondo
background: #F00; / background-‐color: #F00;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Imágenes de fondo • • • •
background-‐image: url(ruta-‐imagen); background-‐color: #F00; background-‐repeat: repeat | repeat-‐x |repeat-‐y |no-‐repeat | inherit background-‐posi;on: horizontal ver;cal; – porcentaje | valor | ler | center | right | top | center | boqom | inherit.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Shorthand nota8on
background: #F00 url(ruta-‐imagen) no-‐repeat ler top;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Layout básico
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Posicionamiento de elementos
posi;on: sta;c | rela;ve | absolute | fixed | inherit
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
sta8c • posi;on: sta;c • Es el valor por defecto • Los elementos son parte del flujo del documento.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
rela8ve • posi;on: rela;ve • Los elementos son parte del flujo del documento • Se pueden usar las propiedades top, lef, right, boqom.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
absolute • • • •
posi;on: absolute Los elementos NO son parte del flujo del documento Se pueden usar las propiedades top, lef, right, boqom La posición es calculada a par;r del parent más cercano que NO sea “sta;c”.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
fixed • • • •
posi;on: fixed Los elementos NO son parte del flujo del documento Se pueden usar las propiedades top, lef, right, boqom La posición es calculada a par;r del viewport.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Orden de apilamiento • Los elementos a los cuales se le especifica un valor de posi;on queda sobre los elementos a los cuales no se les especifica • El orden de apilamiento se puede modificar con la propiedad z-‐ index.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
float & clear
float: none | ler | right | inherit !
clear: none | ler | right | both | inherit.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Trabajar con texto
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Propiedades para fuentes • font-‐family: nombreFuente; • font-‐size: tamaño; • font-‐weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit; • font-‐style: normal | italic | oblique | inherit • font-‐variant: normal | small-‐caps | inherit
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Propiedades para fuentes • • • • •
text-‐transform: capitalize | uppercase | lowercase | none | inherit; text-‐decora;on: underline | overline | line-‐through | blink | inherit; line-‐height: normal | <number> | <length> | <percentage> color: #F00; background-‐color: #F00;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Shorthand nota8on • font: font-‐weight font-‐style font-‐variant font-‐size/line-‐height font-‐ family; • Sintaxis mínima: font: font-‐size font-‐family;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Otras propiedades • • • •
text-‐align: ler | right | center | jus;fy | inherit; leqer-‐spacing: normal | <length> | inherit; word-‐spacing: normal | <length> | inherit; text-‐indent: <length> | <percentage> | inherit;
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Trabajar con color
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Propiedades para color • border-‐color • background-‐color • color
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Keywords • hqp://www.w3.org/wiki/CSS/Proper;es/color/keywords • www.xper.co/kwdcss
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Hexadecimal • 3 pares de valores (rojo/verde/azul) • 256 posibles valores por cada color 00 -‐ FF
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
RGB • 3 valores (rojo/verde/azul) • 256 posibles valores por cada color 0 -‐ 255
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Gracias!
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentación (y otras)
www.xper.co/presenta
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Design Master / Web Master