Introducción a CSS Parte - 1

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

http://www.facebook.com/wwwj2cl










http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.linkedin.com/jorgellanten










http://www.twitter.com/jorgellanten










http://www.youtube.com/jorgellanten










mailto:[email protected]?subject=Enviado%20desde%20presentaci%C3%B3n%20de%20SlideShare










HTML


HTML Contenido(estructura)


HTML

CSS

Contenido(estructura)


HTML

CSS


Diseño(presentación)


HTML

CSS

JavaScript




HTML

CSS

JavaScript



Interactividad(comportamiento)


HTML+

CSS


HTML = CONTENIDO “QUÉ”

CSS = PRESENTACIÓN “CÓMO”


HTML = CONTENIDO “HOOOLA, LES QUIERO DECIR QUE BLABLA BLA”

CSS = PRESENTACIÓN“OK, ESO VA CON TEXTO ROJO Y 2 PX DE MARGEN”


HTML DICE:

“ESO ES UN TÍTULO 1”“AHÍ TIENE QUE IR UNA IMAGEN”“ESO ES UN PÁRRAFO”“ESO ES UN LISTADO”


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>


CSS DICE:“ESO VA CON ARIAL”“ESTA PARTE VA EN NEGRITA Y BORDE ROJO”“ESE LINK VA SUBRAYADO”“ESA CAJA VA A LA IZQUIERDA”


CSS DICE:font-family: arial;font-weight: bold; border: 1px solid red;text-decoration: underline;float: left;


Formas de agregar estilos CSS



Inline: Dentro de la misma etiqueta HTML


<p style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #F00">este es un párrafo</p>




<p style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #F00">este es un párrafo</p>



este es un párrafo


Formas de agregar

estilos CSS


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>


Formas de agregar

estilos CSS


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


Introducción a CSS Parte - 1

Documents

Transcript of Introducción a CSS Parte - 1