introducción a css parte - 1
DESCRIPTION
Presentación para mis alumnos de Diseño del Instituto Profesional Los Leones (Santiago - Chile) sobre los estilos CSS (parte 1)TRANSCRIPT
![Page 1: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/1.jpg)
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
![Page 2: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/2.jpg)
HTML
jueves, 12 de septiembre de 13
![Page 3: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/3.jpg)
HTML Contenido(estructura)
jueves, 12 de septiembre de 13
![Page 4: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/4.jpg)
HTML
CSS
Contenido(estructura)
jueves, 12 de septiembre de 13
![Page 5: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/5.jpg)
HTML
CSS
Contenido(estructura)
Diseño(presentación)
jueves, 12 de septiembre de 13
![Page 6: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/6.jpg)
HTML
CSS
JavaScript
Contenido(estructura)
Diseño(presentación)
jueves, 12 de septiembre de 13
![Page 7: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/7.jpg)
HTML
CSS
JavaScript
Contenido(estructura)
Diseño(presentación)
Interactividad(comportamiento)
jueves, 12 de septiembre de 13
![Page 8: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/8.jpg)
HTML+
CSS
jueves, 12 de septiembre de 13
![Page 9: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/9.jpg)
HTML = CONTENIDO “QUÉ”
CSS = PRESENTACIÓN “CÓMO”
jueves, 12 de septiembre de 13
![Page 10: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/10.jpg)
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
![Page 11: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/11.jpg)
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
![Page 12: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/12.jpg)
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
![Page 13: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/13.jpg)
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
![Page 14: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/14.jpg)
CSS DICE:font-family: arial;font-weight: bold; border: 1px solid red;text-decoration: underline;float: left;
jueves, 12 de septiembre de 13
![Page 15: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/15.jpg)
Formas de agregar estilos CSS
jueves, 12 de septiembre de 13
![Page 16: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/16.jpg)
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
jueves, 12 de septiembre de 13
![Page 17: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/17.jpg)
<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
![Page 18: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/18.jpg)
<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
![Page 19: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/19.jpg)
Formas de agregar
estilos CSS
jueves, 12 de septiembre de 13
![Page 20: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/20.jpg)
Formas de agregar
estilos CSS
Dentro del <head>jueves, 12 de septiembre de 13
![Page 21: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/21.jpg)
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
![Page 22: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/22.jpg)
Formas de agregar
estilos CSS
jueves, 12 de septiembre de 13
![Page 23: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/23.jpg)
Formas de agregar
estilos CSS
Llamándo a un archivo CSS con los estilosjueves, 12 de septiembre de 13
![Page 24: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/24.jpg)
<!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
![Page 25: Introducción a CSS Parte - 1](https://reader034.vdocuments.pub/reader034/viewer/2022042713/546d92d0af795976298b5415/html5/thumbnails/25.jpg)
CSS
HTML HTML HTML HTML
Forma más óptima de trabajar estilos CSS
jueves, 12 de septiembre de 13