PDF de programación - HTML Dinámico

Imágen de pdf HTML Dinámico

HTML Dinámicográfica de visualizaciones

Publicado el 5 de Junio del 2020
90 visualizaciones desde el 5 de Junio del 2020
106,4 KB
31 paginas
Creado hace 19a (02/02/2001)
Creación y uso de Hojas de Estilo

Definición de Hojas de Estilo con la etiqueta <STYLE>
Definición de Hojas de Estilo en Ficheros Externos
Definición de Clases de Estilo
Definición de Estilos Individuales con Nombre
Uso de Criterios de Selección Contextual
Especificación de Estilos para Elementos Individuales
Combinando Hojas de Estilo


Propiedades de Formato de Elementos de Bloque

Formato de Bloques: Introducción y Ejemplos
Márgenes
Bordes
Separadores
Herencia de Propiedades de Formato de Bloque


Manual de Referencia de Hojas de Estilo

Comentarios en las Hojas de Estilo
Nuevas etiquetas HTML
Nuevos atributos para las etiquetas HTML
RADs


DHTML


1

Nuevas propiedades de objetos JavaScript


Propiedades de las Hojas de Estilo

Unidades



Creación y hojas de Estilo


Definición de Hojas de Estilo con la etiqueta <STYLE>

Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head> ... </head>. La
etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegúrate de utilizar <style> antes de <body>. Cuando use <style> podrá
especificar el atributo type para indicar que tipo de sintaxis se va a emplear. Los dos posibles son "text/css" y "text/javascrip". EL valor por defecto es
"text/css". El siguiente ejemplo define una hoja de estilo que especifica que todos los títulos de nivel 4 serán en mayúsculas y azules, y todos los
bloques en cursiva y rojos:

Sintaxis CSS

<head>
<style type="text/css">
h4 {text-transform: uppercase; color: blue;}
blockquote {font-style: italic; color: red;}
</style>
</head>
<body>
...
</body>

Sintaxis JavaScript

<head>
<style type="text/javascript">
tags.h4.textTransform = "uppercase"
tags.h4.color = "blue"
tags.blockquote.fontStyle = "italic"
tags.blockquote.color = "red"
</style>
</head>
<body>
RADs


DHTML


2

...
</body>

Uso de la hoja de estilo

<h4>Este titulo es azul y esta en mayúsculas.</h4>
<blockquote>Este bloque en cursiva es rojo.<blockquote>

Resultado del ejemplo

ESTE TITULO ES AZUL Y ESTA EN MAYÚSCULAS.
Este bloque en cursiva es rojo.
Definición de Hojas de Estilo en Ficheros Externos

Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y después enlazarlos. Las ventajas de este método son que
podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo así definida como en un patrón que pudiera
aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un
enlace al fichero con el estilo en cada página.

La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la
etiqueta <style>. He aquí un ejemplo:

Sintaxis CSS

/* hoja de estilo externa estilo.html */
all.BOLDBLUE {color: blue; font-weight: bold;}
h1 {line-height: 18pt;}
p {color: yellow;}
/* fin de fichero */

Sintaxis JavaScript

/* hoja de estilo externa estilo.html */
tags.BOLDBLUE.all.color = "blue";
tags.BOLDBLUE.all.fontWeight = "bold";
tags.h1.lineHeight = "18pt";
tags.p.color = "yellow";
/* fin de fichero */

Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el siguiente ejemplo:

Sintaxis CSS

<head>
<title>El titulo</title>
<link rel = stylesheet type = "text/css" href = "estilo.html">
RADs


DHTML


3

</head>

Sintaxis JavaScript

<head>
<title>El titulo</title>
<link rel = stylesheet type = "text/javascript" href = "estilo.html">
</head>



Definición de Clases de Estilo

Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del
documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho
estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas
veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el
efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML,
primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.

Sintaxis CSS

<style type="text/css">
all.GREENBOLD {color: green; font-weight: bold;}
</style>

Sintaxis JavaScript

<style type="text/javascript">
classes.GREENBOLD.all.color = "green";
classes.GREENBOLD.all.fontWeigth = "bold";
</style>

Uso de la hoja de estilo

<h3 class=GREENBOLD>Este titulo es muy verde</h3>
<p class=GREENBOLD>
Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para
cualquier elemento HTML.
</p>
<blockquote class=GREENBOLD>
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los
bloques resalten del resto de la página.
</blockquote>

Resultado del ejemplo
RADs


DHTML


4


Este titulo es muy verde

Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML.

Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques
resalten del resto de la página.



Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden
contener tampoco operadores como: -, +, *, /, %,. Cuando se definen clases de estilo se puede especificar a qué elementos se podrán aplicar dicha
clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla. En el siguiente ejemplo se crea una clase de estilo amarillo
que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.

Sintaxis CSS

<style type="text/css">
all.amarillo {color: yellow; font-weight: bold;}
p.rojo {color: red; font-weight: bold;}
blockquote.rojo {color: red; font-weight: bold;}
</style>

Sintaxis JavaScript

<style type="text/javascript">
tags.amarillo.all.color = "yellow";
tags.amarillo.all.fontWeight = "bold";
tags.rojo.p.color = "red";
tags.rojo.p.fontWeight = "bold";
tags.rojo.blockquote.color = "red";
tags.rojo.blockquote.fontWeight = "bold";
</style>

Uso de la hoja de estilo

<p class="rojo">Este párrafo es rojo.</p>
<p>Este párrafo es del color por defecto, porque no utiliza la clase rojo</p>
<blockquote class="rojo">Este bloque usa la clase rojo.</blockquote>
<h4 class="rojo">
Este título intenta usar la clase rojo, pero no le está permitido
</h4>
<p class="amarillo">Este párrafo es amarillo</p>
<h4 class="amarillo">
Este título es amarillo porque usa la clase amarillo
</h4>
RADs


DHTML


5


Resultado del ejemplo

Este párrafo es rojo.

Este párrafo es del color por defecto, porque no utiliza la clase rojo

Este bloque usa la clase rojo.

Este título intenta usar la clase rojo, pero no le está permitido
Este párrafo es amarillo

Este titulo es amarillo porque usa la clase amarillo

Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizará la primera. Por ejemplo, en el siguiente código
un párrafo intenta usar las clases rojo y amarillo. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.

Ejemplo:

<p class="rojo" class="amarillo">Otro párrafo rojo.</p>

Resultado:

Otro párrafo rojo.


Definición de Estilos Individuales con Nombre

Se pueden crear estilo
  • Links de descarga
http://lwp-l.com/pdf17710

Comentarios de: HTML Dinámico (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad