CSS Fundamentos: Estructura, Presentación e Interactividad

CSS - 1
Profesor Jorge Llantén B.
Diseñador Gráﬁco Publicitario
www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13

HTML

HTML
Contenido
(estructura)

HTML
CSS
Contenido
(estructura)

HTML
CSS
Contenido
(estructura)
Diseño
(presentación)

HTML
CSS
JavaScript
Contenido
(estructura)
Diseño
(presentación)

HTML
CSS
JavaScript
Contenido
(estructura)
Diseño
(presentación)
Interactividad
(comportamiento)

HTML
+
CSS

HTML = CONTENIDO
“QUÉ”
CSS = PRESENTACIÓN
“CÓMO”

HTML = CONTENIDO
“HOOOLA, LES QUIERO DECIR QUE BLA
BLA 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”
<h1>
<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;
ﬂoat: 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>

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
Llamándo a un archivo CSS con los estilos

<!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 estilos

CSS
HTML HTML HTML HTML
Forma más óptima de trabajar estilos CSS

CSS Fundamentos: Estructura, Presentación e Interactividad

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie CSS Fundamentos: Estructura, Presentación e Interactividad

Ähnlich wie CSS Fundamentos: Estructura, Presentación e Interactividad (20)

Mehr von Jorge Llanten

Mehr von Jorge Llanten (20)

CSS Fundamentos: Estructura, Presentación e Interactividad