Post on 18-Nov-2014
description
CSS - !
Profesor Jorge Llantén B.Diseñador Gráfico Publicitario
www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13
HTML
jueves, 12 de septiembre de 13
HTML Contenido(estructura)
jueves, 12 de septiembre de 13
HTML
CSS
Contenido(estructura)
jueves, 12 de septiembre de 13
HTML
CSS
Contenido(estructura)
Diseño(presentación)
jueves, 12 de septiembre de 13
HTML
CSS
JavaScript
Contenido(estructura)
Diseño(presentación)
jueves, 12 de septiembre de 13
HTML
CSS
JavaScript
Contenido(estructura)
Diseño(presentación)
Interactividad(comportamiento)
jueves, 12 de septiembre de 13
HTML+
CSS
jueves, 12 de septiembre de 13
HTML = CONTENIDO “QUÉ”
CSS = PRESENTACIÓN “CÓMO”
jueves, 12 de septiembre de 13
HTML = CONTENIDO “HOOOLA, LES QUIERO DECIR QUE BLABLA BLA”
CSS = PRESENTACIÓN“OK, ESO VA CON TEXTO ROJO Y 2 PX DE MARGEN”
jueves, 12 de septiembre de 13
HTML DICE:
“ESO ES UN TÍTULO 1”“AHÍ TIENE QUE IR UNA IMAGEN”“ESO ES UN PÁRRAFO”“ESO ES UN LISTADO”
jueves, 12 de septiembre de 13
HTML DICE:
“ESO ES UN TÍTULO 1”“AHÍ TIENE QUE IR UNA IMAGEN”“ESO ES UN PÁRRAFO”“ESO ES UN LISTADO”
<h!><img><p><ul>
jueves, 12 de septiembre de 13
CSS DICE:“ESO VA CON ARIAL”“ESTA PARTE VA EN NEGRITA Y BORDE ROJO”“ESE LINK VA SUBRAYADO”“ESA CAJA VA A LA IZQUIERDA”
jueves, 12 de septiembre de 13
CSS DICE:font-family: arial;font-weight: bold; border: 1px solid red;text-decoration: underline;float: left;
jueves, 12 de septiembre de 13
Formas de agregar estilos CSS
jueves, 12 de septiembre de 13
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
jueves, 12 de septiembre de 13
<p style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #F00">este es un párrafo</p>
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
jueves, 12 de septiembre de 13
<p style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #F00">este es un párrafo</p>
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
este es un párrafo
jueves, 12 de septiembre de 13
Formas de agregar
estilos CSS
jueves, 12 de septiembre de 13
Formas de agregar
estilos CSS
Dentro del <head>jueves, 12 de septiembre de 13
Formas de agregar
estilos CSS
Dentro del <head>
<!doctype html><html><head><meta charset="UTF-8"><title>Documento sin título</title> <style type="text/css">p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #F00;}</style></head><body><p>este es un párrafo</p></body></html>
jueves, 12 de septiembre de 13
Formas de agregar
estilos CSS
jueves, 12 de septiembre de 13
Formas de agregar
estilos CSS
Llamándo a un archivo CSS con los estilosjueves, 12 de septiembre de 13
<!doctype html><html><head><meta charset="UTF-8"><title>Documento sin título</title> <link href="estilos.css" rel="stylesheet" type="text/css"></head><body><p>este es un párrafo</p></body></html>
Formas de agregar
estilos CSS
Llamándo a un archivo CSS con los estilosjueves, 12 de septiembre de 13
CSS
HTML HTML HTML HTML
Forma más óptima de trabajar estilos CSS
jueves, 12 de septiembre de 13