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

HTML Contenido(estructura)

Contenido(estructura)

Diseño(presentación)

JavaScript

Interactividad(comportamiento)

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>

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

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

Introducción a CSS en XHTML

Introducción a CSS

Unidad 02 Introducci n a CSS Parte 01

Introducción a CSS - Universidad de Sevilla › cursos › bd › temas › BD-Tema-10.pdfestandarizados y para los archivos CSS su valor siempre es text/css. href: indica la URL

Manual css

7HRS DISEÑO WEB DURACIÓN INTRODUCCIÓN A LA · • Etiquetas HTML y semántica • Estructura CSS • Enlace de Archivos HTML/CSS • introducción JS y enlace con documento 3-

Introducción a La Maquetación Con CSS

Tecnologías Web para la presentación CSS CSS

P 4 CSS. INTRODUCCIÓN DE ESTILO EN SITIOS WEB › cu › jearansa › 1112 › ficheros › Practica04IN… · desplazados a hojas CSS, así que uno de nuestros objetivos al usar

Introducción a los Frameworks CSS

Spirit APS (Adjustable Positioning System... Spirit APS (Adjustable Positioning System ) Asiento de auto Patente EE.UU. No. 636,190S CSS-2400S CSS-2400M CSS-2400L CSS-2401M CSS-2401L

Parte 2 manual de crisis css

Curso HTML y CSS, parte 1

Manual de CSS, hojas de estilo - Instituto Wienerwiener.edu.pe/manuales/2do-ciclo/PROGRAMACION-WEB/manual-css.… · Tu mejor ayuda para aprender a hacer webs Introducción a las

Hojas de estilo. CSS En la parte de XHTML hemos comentado muchas veces que podemos cambiar el aspecto de una página web mediante CSS (Cascading Style.

Introducción HTML y CSS

Tema 11: CSS - anmoman.files.wordpress.com · Capitulo 1. Introducción 1.1. ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación

CSS: ordenar un CSS - RUA: Principalrua.ua.es/dspace/bitstream/10045/26459/1/CSS - Ordenar un CSS.pdf · CSS Introducción al desarrollo web CSS: ordenar un CSS Sergio Luján Mora

CSS: ordenar un CSS - Ordenar un … · CSS Introducción al desarrollo web CSS: ordenar un CSS Sergio Luján Mora Departamento de Lenguajes y Sistemas Informáticos

INDICE Introducción Que es CSS? Sobre CSS3 Formas de usar CSS3 Ventajas Caracteristicas.