CSS Cascade Style Sheet

Introducción
CSS es un lenguaje de hojas de estilos creado

para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y
CSS – Cascade Style Sheet XHTML.
Introducción CSS es la mejor forma de separar los contenidos y

su presentación y es imprescindible para crear
páginas web complejas.
Funcionamiento Básico Funcionamiento Básico

<html >
• Antes <head>
<h1><font color="red" face="Arial" size="5">Titular de la <title>Ejemplo de estilos con CSS</title>
<style type="text/css">
página</font></h1> h1 { color: red; font-family: A rial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
• Con CSS </style>
</head>
<style type="text/css"> <body>
h1 { color: red; font-family: Arial; font-size: large; } <h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
p { color: gray; font-family: Verdana; font-size: medium; }
</body>
</style> </html>
Como Introducir CSS en un Como Introducir CSS en un documento

documento HTML HTML – Archivo Externo
– 1) Se crea un archivo de texto y se le añade solamente el siguiente
• en el mismo documento HTML contenido:
p { color: black; font-family: Verdana; }
Como en el ejemplo anterior – 2) Se guarda el archivo de texto con el nombre estilos.css Se debe
poner especial atención a que el archivo tenga extensión .css y no .txt
• en un archivo externo – 3)) En la p
página
g HTML se enlaza el archivo CSS externo mediante la
En este caso, todos los estilos CSS se incluyen en un archivo de tipo etiqueta <link>
CSS que las páginas HTML enlazan mediante la etiqueta <link>
<head>
• en los elementos HTML <title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" />
</head>
1
Como Introducir CSS en un documento
HTML – en los Ementos
Términos Básicos
• El último método para incluir estilos CSS en documentos
HTML es el peor y el menos utilizado, ya que tiene los
mismos problemas que la utilización de las etiquetas.
• eg a cada u
Regla: unoo de los
os es
estilos
os que co
componen
po e u una
a hoja
oja de es
estilos
os CSS
CSS.
Cada regla está compuesta de una parte de "selectores", un símbolo de
"llave de apertura" ({), otra parte denominada "declaración" y por último, un
símbolo de "llave de cierre" (}).
<p style="color: black; font-family: Verdana;">Un párrafo de
• Selector: indica el elemento o elementos HTML a los que se aplica la regla
texto.</p> CSS.
• Declaración: especifica los estilos que se aplican a los elementos. Está
compuesta por una o más propiedades CSS.
• Propiedad: permite modificar el aspecto de una característica del
elemento.
• Valor: indica el nuevo valor de la característica modificada en el elemento.
Sintaxis de la definición de cada

Comentarios propiedad CSS
• carácter| : el valor de la propiedad debe tomar uno y sólo uno de
El comienzo de un comentario se indica mediante los los valores indicados.
caracteres /* y el final del comentario se indica mediante <porcentaje> | <medida> | <inherit>
*/, tal y como se muestra en los siguientes ejemplos: • símbolo|| :el valor de la propiedad puede tomar uno o más valores
de los indicados y en cualquier orden.
/* Este es un
n comentario en CSS */ <color> || <estilo> || <medida>
• carácter* indica que el valor ocurre cero o más veces.
/* Este es un comentario CSS de varias lineas */ • el carácter+ indica que el valor ocurre una o más veces
• carácter{número_1, número_2} :indica que el valor ocurre al menos
tantas veces como el valor indicado en número_1 y como máximo
tantas veces como el valor indicado en número_2.
Selectores Selectores Básicos

• *Selector universal: Se utiliza para seleccionar todos los
Que hay que hacer
elementos de la página .
* { margin: 0; padding: 0; }
• Selector de tipo o etiqueta: Selecciona todos los elementos de la
página
p g cuya
y etiqueta
q HTML coincide con el valor del selector
p { ... }
solamente es necesario indicar el nombre de una etiqueta HTML (sin los

caracteres < y >)
• Encadenar:
A Quien h1, h2, h3 { … }
2
Selectores Básicos Selectores Básicos
• Selector descendente: Selecciona los elementos que • No debe confundirse el selector descendente con la
se encuentran dentro de otros elementos. Un elemento combinación de selectores:
es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento. /* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }

<p>
p span { color: red; } ... /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a
<span>texto1</span> span" */
...
<a href="">...<span>texto2</span></a> p a span em { text-decoration: underline; }
...
</p>
Selectores Básicos
• Selector de clase:
.destacado { color: red; }
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
CSS – Cascade Style Sheet
accumsan...</p>/
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
litora...</p> </body>
Selectores Avanzados
p.destacado { color: red } : restringe el selector de clase solo a los

Elemento p
Selectores Avanzados Selectores Avanzados

Selector de hijos Selector adyacente
Se trata de un selector similar al selector descendente, pero muy El selector adyacente utiliza el signo + y su sintaxis es
diferente en su funcionamiento. Se utiliza para seleccionar un
elemento que es hijo directo de otro elemento y se indica mediante el elemento1 + elemento2 { ... }
"signo de mayor que" (>):
La explicación del comportamiento de este selector no es sencilla,
sencilla ya que
En el ejemplo, el selector p > span se selecciona todos los elementos de tipo elemento2 que cumplan las dos
interpreta como "cualquier elemento siguientes condiciones:
p > span { color: blue;}
<span> que sea hijo directo de un elemento1 y elemento2 deben ser
<p><span>Texto1</span></p> elemento <p>", por lo que el primer hermanos, por lo que su elemento padre
<p><aref="#"><span>Texto2</span></a> elemento <span> cumple la condición debe ser el mismo.
</p> del selector. Sin embargo, el segundo
elemento <span> no la cumple elemento2 debe aparecer
porque es descendiente pero no es inmediatamente después de elemento1 en
hijo directo de un elemento <p>. el código HTML de la página
3
Selectores Avanzados Selectores Avanzados
Selector de atributos
Selector adyacente Los estilos del selector h1 + h2 se aplican al
[nombre_atributo], selecciona los elementos que tienen establecido el
primer elemento <h2> de la página, pero no al
atributo llamado nombre_atributo, independientemente de su valor.
segundo <h2>, ya que
El elemento padre de <h1> es <body>, el [nombre_atributo=valor], selecciona los elementos que tienen
h1 + h2 { color: red } establecido un atributo llamado nombre_atributo con un valor igual a
mismo padre que el de los dos elementos
<h2>. Así, los dos elementos <h2> cumplen valor.
l
<body> la primera condición del selector adyacente.
<h1>Titulo1</h1> [nombre_atributo~=valor], selecciona los elementos que tienen
<h2>Subtítulo</h2> El primer elemento <h2> aparece en el código establecido un atributo llamado nombre_atributo y al menos uno de
... HTML justo después del elemento <h1>, por lo los valores del atributo es valor.
<h2>Otro subtítulo</h2> ... que este elemento <h2> también cumple la
segunda condición del selector adyacente. [nombre_atributo|=valor], selecciona los elementos que tienen
</body>
Por el contrario, el segundo elemento <h2> no
establecido un atributo llamado nombre_atributo y cuyo valor es una
aparece justo después del elemento <h1>, serie de palabras separadas con guiones, pero que comienza con
por lo que no cumple la segunda condición valor. Este tipo de selector sólo es útil para los atributos de tipo lang
del selector adyacente y por tanto no se le que indican el idioma del contenido del elemento.
aplican los estilos de h1 + h2.
Agrupación de Reglas Herencia

Uno de los conceptos más característicos de CSS es la herencia de los
estilos definidos para los elementos. Cuando se establece el valor de alguna
propiedad en un elemento, todos sus descendientes heredan inicialmente
ese mismo valor.
h1 { color: red; } la etiqueta <body> tiene
h1 { color: red;
... asignado un tipo de letra Arial y
font-size: 2em; un color de letra negro. Así,
h1 { font-size: 2em; }
font family: Verdana;
font-family: todos los elementos de la página
... (salvo que se indique lo
}
h1 { font-family: Verdana; } contrario) se muestran de color
negro y con la fuente Arial.
los elementos <h1> se muestran

con otra tipografía diferente a la
heredada
los elementos <p> varían su

color respecto del color que han
heredado
Unidades de Medidas Unidades de Relativas

CSS divide todas las unidades de medida en dos grupos: •em, (no confundir con la etiqueta <em> de HTML) relativa respecto
absolutas y relativas. Las medidas relativas definen su del tamaño de letra empleado. Aunque no es una definición exacta,
valor en relación con otra medida, por lo que para obtener el valor de 1em se puede aproximar por la anchura de la letra M
("eme mayúscula") del tipo de letra que se esté utilizando
su valor real, se debe realizar alguna operación con el
valor indicado. Las unidades absolutas establecen de •ex, relativa respecto de la altura de la letra x (("equis minúscula")) del
forma completa el valor de una medida, por lo que su valor tipo de letra que se esté utilizando.
real es directamente el valor indicado.
•px, (píxel) relativa respecto de la pantalla del usuario
Si el valor es 0, la unidad de medida es opcional. Si el valor es
distinto a 0 y no se indica ninguna unidad, la medida se ignora body { font-size: 0.9em; } la medida indicada es igual al 90% del
completamente, lo que suele ser una fuente habitual de errores tamaño de letra por defecto. Si este
para los diseñadores que empiezan con CSS tamaño por defecto es 12, el valor 0.9em
body { font-size: .9em; } sería igual a 0.9 x 12 = 10.8.
4
Unidades de Absolutas Porcentajes
•in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) CSS define otra unidad de medida relativa basada en los
porcentajes. Un porcentaje está formado por un valor numérico
•cm, centímetros . seguido del símbolo % y siempre está referenciado a otra medida
•mm, milímetros
Los tamaños establecidos para los elementos
bodyy { font-size: 1em;; }
•pt, puntos (1 punto equivale a 1 pulgada/72
•pt pulgada/72, es decir
decir, unos 0
0.35
35 <h1> y <h2> mediante las reglas anteriores,
anteriores
h1 { font-size: 200%; }
milímetros) son equivalentes a 2em y 1.5em
h2 { font-size: 150%; }
respectivamente, por lo que es más habitual
•pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros) definirlos mediante em.
body { margin: 0.5in; }

h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }
Colores Colores
RGB decimal
Los colores en CSS se pueden indicar de cinco formas
diferentes: palabras clave, colores del sistema, RGB el modelo RGB( R (rojo), G (verde) y B (azul) ) consiste en definir un color
hexadecimal, RGB numérico y RGB porcentual indicando la cantidad de color rojo, verde y azul que se debe mezclar para
obtener ese color. Técnicamente, el modelo RGB es un modelo de tipo
"aditivo", ya que los colores se obtienen sumando sus componentes
Palabra Clave
Si todas las componentes
p valen 0,, el color creado es el negro
g y si todas las
componentes toman su valor máximo, el color obtenido es el blanco. En
CSS, las componentes de los colores definidos mediante RGB decimal
pueden tomar valores entre 0 y 255
La sintaxis que se utiliza para

indicar los colores es rgb() y
p { color: rgb(71, 98, 176); } entre paréntesis se indican las
tres componentes RGB, en ese
mismo orden y separadas por
comas
Colores
RGB porcentual
El funcionamiento y la sintaxis de este método es el mismo que el del RGB

decimal. La única diferencia en este caso es que el valor de las
componentes RGB puede tomar valores entre 0% y 100%
p { color: rgb(27%, 38%, 69%); }

CSS – Cascade Style Sheet
RGB hexadecimal
hexadecimal
Modelo de cajas
R = 71, G = 98, B = 176. R = 47, G = 62, B = B0.
Para obtener el color completo en
formato RGB hexadecimal, se
concatenan los valores de las
componentes RGB en ese orden y se p { color: #4762B0; }
les añade el prefijo #
5
Modelo de Cajas Box Model del CSS
Contenido (content): se trata del
Las cajas de una página se crean automáticamente. Cada vez que se inserta
contenido HTML del elemento (las palabras
una etiqueta HTML, se crea una nueva caja rectangular que encierra los
de un párrafo, una imagen, el texto de una
contenidos de ese elemento
lista de elementos, etc.)
Relleno (padding): espacio libre opcional
El modelo de cajas o "box model" es seguramente la característica más
existente entre el contenido y el borde.
importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño
Borde (border): línea que encierra
de todas las p
páginas
g web
completamente el contenido y su relleno
relleno.
Imagen de fondo (background image):
imagen que se muestra por detrás del
contenido y el espacio de relleno.
Color de fondo (background color): color
que se muestra por detrás del contenido y
el espacio de relleno.
Margen (margin): separación opcional
existente entre la caja y el resto de cajas
adyacentes.
Ancho Alto
height Altura
width Anchura
Valores <medida> | <porcentaje> | auto | inherit
Todos los elementos, salvo los elementos en línea que no sean Todos los elementos, salvo los elementos en línea que no sean
Se plica a Se aplica a
imágenes, las filas de tabla y los grupos de filas de tabla imágenes, las columnas de tabla y los grupos de columnas de tabla
Valor inicial auto Valor inicial auto
Descripción Establece la anchura de un elemento Descripción Establece la altura de un elemento
#cabecera { height: 60px; }

#lateral { width: 200px; }
<div id="cabecera">
<div id="lateral"> ...
... </div>
</div>
Margen Margen
margin-top Margen superior
margin-right Margen derecho
margin-bottom Margen inferior .destacado { margin-left: 2em; }
margin-left Margen izquierdo
<p class="destacado">Vestibulum lectus diam…
Todos los elementos, salvo margin-top y margin-

Se aplica
p a bottom que sólo se aplican a los elementos de bloque
y a las imágenes
Valor inicial 0
Establece cada uno de los márgenes horizontales y
Descripción
verticales de un elemento
6
Margen Relleno
margin Margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit padding-top Relleno superior
padding-right Relleno derecho
Todos los elementos salvo algunos casos especiales de padding-bottom Relleno inferior
Se aplica a padding-left Relleno izquierdo
elementos mostrados como tablas
Valores <medida> | <porcentaje> | inherit
Valor inicial -
Todos los elementos excepto algunos elementos de tablas
Establece de forma directa todos los márgenes de un Se aplica a
como grupos de cabeceras y grupos de pies de tabla
Descripción
elemento
Valor inicial 0
{1, 4}
• Si solo se indica un valor, todos los márgenes tienen ese valor. Descripción
Establece cada uno de los rellenos horizontales y verticales
• Si se indican dos valores, el primero seasigna al margen superior e inferior y el de un elemento
segundo se asigna a los márgenes izquierdo y derecho.
• Si se indican tres valores, el primerose asigna al margen superior, el tercero
se asigna al margen inferior y el segundo valor se asigna los márgenes
izquierdo y derecho.
• Si se indican los cuatro valores, el orden de asignación es: margen superior,
margen derecho, margen inferior y margen izquierdo.
Relleno Relleno
padding Relleno
.margen
{ margin-top: 2em; margin-right: 2em; margin-bottom: 2em;
Valores ( <medida> | <porcentaje> ) {1, 4} | inherit
margin-left: 2em; }
.relleno Todos los elementos excepto algunos elementos de

{ padding-top: 2em; padding-right: 2em; padding-bottom: 2em; Se aplica a tablas como grupos de cabeceras y grupos de pies de
padding-left: 2em; } tabla
… Valor inicial -
<pp class="relleno">Lorem ipsum
p dolor sit amet,
consectetuer adipiscing elit. Cras vitae dolor eu Establece
E bl d
de fforma di
directa todos
d llos rellenos
ll d
de llos
Descripción
enim dignissim lacinia. Maecenas blandit. Morbi mi.</p> elementos
{1, 4}
body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */
Posicionamiento y visualización Tipos de elementos

• Las propiedades width y height de lacaja (si están establecidas).
• El tipo de cada elemento HTML (elemento de bloque o elemento en línea).
• Posicionamiento de la caja (normal,relativo, absoluto, fijo o flotante).
•Las
Las relaciones entre elementos (dónde se encuentra cada elemento
elemento,
elementos descendientes, etc.)
• Otro tipo de información, como porejemplo el tamaño de las imágenes y el

tamaño de la ventana del navegador.
Los elementos en línea definidos por HTML son: a, abbr, acronym, b,
basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q,
s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML son: address,
blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr,
isindex, menu, noframes, noscript, ol, p, pre, table, ul.
7
Posicionamiento Layout
• Posicionamiento normal o estático: se trata del posicionamiento que utilizan los El diseño de las páginas web habituales se divide en bloques: cabecera,
navegadores si no se indica lo contrario. menú, contenidos y pie de página. Visualmente, los bloques se disponen
• en varias filas y columnas. Por este motivo, hace varios años la estructura
• Posicionamiento relativo: variante del posicionamiento normal que consiste en de las páginas HTML se definía mediante tablas.
posicionar una caja según el posicionamiento normal y después desplazarla El desarrollo de CSS ha permitido que se puedan realizar los mismos
respecto de su posición original. diseños sin utilizar tablas HTML
• Posicionamiento absoluto: la posición de una caja se establece de forma absoluta
respecto de su elemento contenedor y el resto de elementos de la página ignoran
la nueva posición del elemento. •Mantenimiento
• Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja •Accesibilidad
en un elemento inamovible, de forma que su posición en la pantalla siempre es la
misma independientemente del resto de elementos e independientemente de si el •Velocidad de carga
usuario sube o baja la página en la ventana del navegador.
•Semántica
• Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya
que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la
línea en la que se encuentran.
Centrar una página Centrar una página

horizontalmente horizontalmente
Centrar una página Centrar una página

verticalmente verticalmente
8
Centrar una página
Estructura o layout
verticalmente Diseño a 2 columnas con cabecera y pie de página
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se utiliza

Javascript principalmente para crear páginas web dinámicas.
Técnicamente, JavaScript es un lenguaje de programación

interpretado, por lo que no es necesario compilar los programas para
Introducción ejecutarlos. En otras palabras, los programas escritos con JavaScript
se pueden probar directamente en cualquier navegador sin necesidad
de procesos intermedios.
Cómo incluir JavaScript en Incluir JavaScript en el mismo

documentos HTML documento XHTML
• El código JavaScript se encierra entre etiquetas<script> y se incluye en
cualquier parte del documento. Aunque es correcto incluir cualquier bloque de
•Incluir JavaScript en el mismo código en cualquier zona de la página, se recomienda definir el código
JavaScript dentro de la cabecera del documento (dentro de la etiqueta
documento XHTML <head>)
•Definir
D fi i JavaScript
J S i t en un archivo
hi externo
t
•Incluir JavaScript en los elementos

XHTML
9
Definir JavaScript en un archivo Incluir JavaScript en los
externo elementos XHTML
• Las instrucciones JavaScript se puedenincluir en un archivo externo de tipo • Este último método es elmenos utilizado, ya que consiste en incluir trozos de
JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. JavaScript dentro del código XHTML de la página
Se pueden crear todos los archivos JavaScript que sean necesarios y cada
documento XHTML puede enlazar tantos archivos JavaScript como necesite.
Etiqueta noscript Sintaxis

• El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al
usuario cuando su navegador no puede ejecutar JavaScript. El siguiente •No se tienen en cuenta los espacios en
código muestra un ejemplo del uso de la etiqueta <noscript>
blanco y las nuevas líneas:
• La etiqueta <noscript> se debe incluiren el interior de la etiqueta <body>
(normalmente se incluye al principio de <body>). El mensaje que muestra •Se distinguen las mayúsculas y
<noscript>
p p puede incluir cualquier
q elemento o etiqueta
q XHTML
minúsculas:.
minúsculas:
•No se define el tipo de las variables:
•No es necesario terminar cada sentencia
con el carácter de punto y coma (;):
•Se pueden incluir comentarios:
Programación Básica
• Antes de comenzar a desarrollar programas y utilidades
con JavaScript, es necesario conocer los elementos
básicos con los que se construyen las aplicaciones :
Javascript
•Variables
Variables
•Tipos de Datos
•Operadores
Programación Básica
•Estructuras de Control de Flujos
•Funciones y propiedades Básicas de Javascript
10
Variables Tipos de Variables
Numéricas
• Las variables en JavaScript se creanmediante la palabra reservada var. De
esta forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente
manera :
Cadenas de texto
El nombre de una variable también se conoce como identificador y debe

cumplir las siguientes normas:
• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y
_ (guión bajo).
• El primer carácter no puede ser un número.
Tipos de Variables Operadores

Asignación
Arrays
Incremento y decremento
Booleanos
Operadores Operadores
Lógicos Matemáticos
Relacionales
11
Estructura de Control de flujo Estructura de Control de flujo
Estructura if While Estructura do...while
Estructura switch
Estructura for
Estructura for...in
Funciones y propiedades Funciones y propiedades

básicas de JavaScript básicas de JavaScript
Funciones útiles para cadenas de texto Funciones útiles para arrays
Funciones y propiedades
básicas de JavaScript
Funciones útiles para números
Javascript
Programación Avanzada
12
Funciones
Javascript
DOM
DOM Árbol de nodos

DOM
La creación del Document Object Model o DOM es una de las innovaciones
que más ha influido en el desarrollo de las páginas web dinámicas y de las
aplicaciones web más complejas.
DOM permite a los programadores web acceder y manipular las

páginas XHTML como si fueran documentosXML. De hecho, DOM se diseñó
originalmente para manipular de forma sencilla los documentos XML.
Tipos de nodos Acceso a un nodos

La especificación completa de DOM define 12 tipos de nodos, aunque las
páginas XHTML habituales se pueden manipular manejando solamente cuatro o
cinco tipos de nodos:
•Document, nodo raíz del que derivan todos los demás nodos del árbol.
•Element, representa cada una de las etiquetas XHTML. Se trata del único
nodo que puede contener atributos y el único del que pueden derivar otros
nodos.
•Attr, se define un nodo de este tipo para representar cada uno de los atributos
de las etiquetas XHTML, es decir, uno por cada par atributo=valor.
•Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
•Comment, representa los comentarios incluidos en la página XHTML.

Los otros tipos de nodos existentes
son DocumentType, CDataSection, DocumentFragment,Entity, EntityReference, Proc
essingInstruction y Notation.
13
Modelo de Eventos
•Modelo básico de eventos
•Modelo de eventos estándar
•Modelo de eventos de Internet Explorer
Javascript
Manejadores de eventos
• Manejadores como atributos de los elementos XHTML.

Eventos
• Manejadores como funciones JavaScript externas.
• Manejadores"semánticos".
Manejadores como atributos de los Manejadores como atributos de

elementos XHTML los elementos XHTML
Manejadores como atributos de los elementos XHTML Manejadores de eventos semánticos
<input type="button" value=“Click y verás" onclick="alert('Gracias por hacer click');" />
Manejadores de eventos como funciones externas // Función externa
function muestraMensaje()
<input type="button" value=“Click y verás" onclick="alert('Gracias por hacer click');" />
{ alert('Gracias por pinchar'); }
// Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje;
function muestraMensaje() {
alert('Gracias por pinchar');
// Elemento XHTML
}
<input id="pinchable" type="button" value="Pinchame y verás" />
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
14

CSS Cascade Style Sheet

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Cascade Style Sheet

Cargado por

Copyright:

Formatos disponibles

Introducción

CSS es un lenguaje de hojas de estilos creado

Introducción CSS es la mejor forma de separar los contenidos y

Funcionamiento Básico Funcionamiento Básico

Como Introducir CSS en un Como Introducir CSS en un documento

Sintaxis de la definición de cada

• carácter* indica que el valor ocurre cero o más veces.

Selectores Selectores Básicos

solamente es necesario indicar el nombre de una etiqueta HTML (sin los

p, a, span, em { text-decoration: underline; }

p.destacado { color: red } : restringe el selector de clase solo a los

Selectores Avanzados Selectores Avanzados

Agrupación de Reglas Herencia

los elementos <h1> se muestran

los elementos <p> varían su

Unidades de Medidas Unidades de Relativas

body { margin: 0.5in; }

La sintaxis que se utiliza para

El funcionamiento y la sintaxis de este método es el mismo que el del RGB

p { color: rgb(27%, 38%, 69%); }

Valor inicial auto Valor inicial auto

Descripción Establece la anchura de un elemento Descripción Establece la altura de un elemento

#cabecera { height: 60px; }

Todos los elementos, salvo margin-top y margin-

.relleno Todos los elementos excepto algunos elementos de

body {padding: 2em} /* Todos los rellenos valen 2em */

Posicionamiento y visualización Tipos de elementos

• El tipo de cada elemento HTML (elemento de bloque o elemento en línea).

• Posicionamiento de la caja (normal,relativo, absoluto, fijo o flotante).

• Otro tipo de información, como porejemplo el tamaño de las imágenes y el

Centrar una página Centrar una página

Centrar una página Centrar una página

JavaScript es un lenguaje de programación que se utiliza

Técnicamente, JavaScript es un lenguaje de programación

Cómo incluir JavaScript en Incluir JavaScript en el mismo

•Incluir JavaScript en los elementos

Etiqueta noscript Sintaxis

El nombre de una variable también se conoce como identificador y debe

Tipos de Variables Operadores

Funciones y propiedades Funciones y propiedades

DOM Árbol de nodos

DOM permite a los programadores web acceder y manipular las

Tipos de nodos Acceso a un nodos

•Comment, representa los comentarios incluidos en la página XHTML.

• Manejadores como atributos de los elementos XHTML.

Manejadores como atributos de los Manejadores como atributos de

// Asignar la función externa al elemento

También podría gustarte