RESTAURAR navbar
como-se-hace-loseasi

lunes, 29 de agosto de 2011

Convertir HTML a un document.write de Javascript

Pege el código HTML o Javascript en el siguiente formulario y pulse el botón "Convertir"







martes, 10 de agosto de 2010

Tabla de Colores


COLORES HTML

Los que están en negrita se pueden
escribir en lugar de los códigos.



Nombre
del color


Código
del color




Apariencia

White #FFFFFF  
Red #FF0000  
Green #00FF00  
Blue #0000FF  
Magenta #FF00FF  
Cyan #00FFFF  
Yellow #FFFF00  
Black #000000  
Aqua #70DB93  
Baker's
Chocolate
#5C3317  
Blue
Violet
#9F5F9F  
Brass #B5A642  
Bright
Gold
#D9D919  
Brown #A62A2A  
Bronze #8C7853  
Bronze II #A67D3D  
Cadet Blue #5F9F9F  
Cool
Copper
#D98719  
Copper #B87333  
Coral #FF7F00  
Corn
Flower Blue
#42426F  
Dark Brown #5C4033  
Dark Green #2F4F2F  
Dark Green
Copper
#4A766E  
Dark Olive
Green
#4F4F2F  
Dark
Orchid
#9932CD  
Dark
Purple
#871F78  
Dark Slate
Blue
#6B238E  
Dark Slate
Grey
#2F4F4F  
Dark Tan #97694F  
Dark
Turquoise
#7093DB  
Dark Wood #855E42  
Dim Grey #545454  
Dusty Rose #856363  
Feldspar #D19275  
Firebrick #8E2323  
Forest
Green
#238E23  
Gold #CD7F32  
Goldenrod #DBDB70  
Gray #C0C0C0  
Green
Copper
#527F76  
Green
Yellow
#93DB70  
Hunter
Green
#215E21  
Indian Red #4E2F2F  
Khaki #9F9F5F  
Light Blue #C0D9D9  
Light Grey #A8A8A8  
Light
Steel Blue
#8F8FBD  
Light Wood #E9C2A6  
Lime #32CD32  
Mandarian
Orange
#E47833  
Maroon #8E236B  
Medium
Aquamarine
#32CD99  
Medium
Blue
#3232CD  
Medium
Forest Green
#6B8E23  
Medium
Goldenrod
#EAEAAE  
Medium
Orchid
#9370DB  
Medium Sea
Green
#426F42  
Medium
Slate Blue
#7F00FF  
Medium
Spring Green
#7FFF00  
Medium
Turquoise
#70DBDB  
Medium
Violet Red
#DB7093  
Medium
Wood
#A68064  
Midnight
Blue
#2F2F4F  
Navy #23238E  
Neon Blue #4D4DFF  
Neon Pink #FF6EC7  
New
Midnight Blue
#00009C  
New Tan #EBC79E  
Old Gold #CFB53B  
Orange #FF7F00  
Orange Red #FF2400  
Orchid #DB70DB  
Pale Green #8FBC8F  
Pink #BC8F8F  
Plum #EAADEA  
Quartz #D9D9F3  
Rich Blue #5959AB  
Salmon #6F4242  
Scarlet #8C1717  
Sea Green #238E68  
Semi-Sweet
Chocolate
#6B4226  
Sienna #8E6B23  
Silver #E6E8FA  
Sky Blue #3299CC  
Slate Blue #007FFF  
Spicy Pink #FF1CAE  
Spring
Green
#00FF7F  
Steel Blue #236B8E  
Summer Sky #38B0DE  
Tan #DB9370  
Thistle #D8BFD8  
Turquoise #ADEAEA  
Very Dark
Brown
#5C4033  
Very Light
Grey
#CDCDCD  
Violet #4F2F4F  
Violet Red #CC3299  
Wheat #D8D8BF  
Yellow
Green
#99CC32  


CÓDIGO COLOR
#000000  
#000033  
#000066  
#000099  
#0000CC  
#0000FF  
#003300  
#003333  
#003366  
#003399  
#0033CC  
#0033FF  
#006600  
#006633  
#006666  
#006699  
#0066CC  
#0066FF  
#009900  
#009933  
#009966  
#009999  
#0099CC  
#0099FF  
#00CC00  
#00CC33  
#00CC66  
#00CC99  
#00CCCC  
#00CCFF  
#00FF00  
#00FF33  
#00FF66  
#00FF99  
#00FFCC  
#00FFFF  

CÓDIGO COLOR
#330000  
#330033  
#330066  
#330099  
#3300CC  
#3300FF  
#333300  
#333333  
#333366  
#333399  
#3333CC  
#3333FF  
#336600  
#336633  
#336666  
#336699  
#3366CC  
#3366FF  
#339900  
#339933  
#339966  
#339999  
#3399CC  
#3399FF  
#33CC00  
#33CC33  
#33CC66  
#33CC99  
#33CCCC  
#33CCFF  
#33FF00  
#33FF33  
#33FF66  
#33FF99  
#33FFCC  
#33FFFF  

CÓDIGO COLOR
#660000  
#660033  
#660066  
#660099  
#6600CC  
#6600FF  
#663300  
#663333  
#663366  
#663399  
#6633CC  
#6633FF  
#666600  
#666633  
#666666  
#666699  
#6666CC  
#6666FF  
#669900  
#669933  
#669966  
#669999  
#6699CC  
#6699FF  
#66CC00  
#66CC33  
#66CC66  
#66CC99  
#66CCCC  
#66CCFF  
#66FF00  
#66FF33  
#66FF66  
#66FF99  
#66FFCC  
#66FFFF  

CÓDIGO COLOR
#990000  
#990033  
#990066  
#990099  
#9900CC  
#9900FF  
#993300  
#993333  
#993366  
#993399  
#9933CC  
#9933FF  
#996600  
#996633  
#996666  
#996699  
#9966CC  
#9966FF  
#999900  
#999933  
#999966  
#999999  
#9999CC  
#9999FF  
#99CC00  
#99CC33  
#99CC66  
#99CC99  
#99CCCC  
#99CCFF  
#99FF00  
#99FF33  
#99FF66  
#99FF99  
#99FFCC  
#99FFFF  

CÓDIGO COLOR
#CC0000  
#CC0033  
#CC0066  
#CC0099  
#CC00CC  
#CC00FF  
#CC3300  
#CC3333  
#CC3366  
#CC3399  
#CC33CC  
#CC33FF  
#CC6600  
#CC6633  
#CC6666  
#CC6699  
#CC66CC  
#CC66FF  
#CC9900  
#CC9933  
#CC9966  
#CC9999  
#CC99CC  
#CC99FF  
#CCCC00  
#CCCC33  
#CCCC66  
#CCCC99  
#CCCCCC  
#CCCCFF  
#CCFF00  
#CCFF33  
#CCFF66  
#CCFF99  
#CCFFCC  
#CCFFFF  

CÓDIGO COLOR
#FF0000  
#FF0033  
#FF0066  
#FF0099  
#FF00CC  
#FF00FF  
#FF3300  
#FF3333  
#FF3366  
#FF3399  
#FF33CC  
#FF33FF  
#FF6600  
#FF6633  
#FF6666  
#FF6699  
#FF66CC  
#FF66FF  
#FF9900  
#FF9933  
#FF9966  
#FF9999  
#FF99CC  
#FF99FF  
#FFCC00  
#FFCC33  
#FFCC66  
#FFCC99  
#FFCCCC  
#FFCCFF  
#FFFF00  
#FFFF33  
#FFFF66  
#FFFF99  
#FFFFCC  
#FFFFFF  
¿Cómo se hace...?

Lorem Ipsum Generador



Elegir idioma:  

Cantidad de números: 
 de 
    





¿Cómo se hace...?


HTML Básico

Estructura general de un fichero HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<TITLE>Aquí va el título</TITLE>

Estilos (no son visibles)

</HEAD>

<BODY>

Cuerpo (lo que muestra la página)

</BODY>

</HTML>


Etiquetas




<Etiqueta> inicio

[.......contenido]

</Etiqueta> cierre






Etiqueta de estilo Efecto Visual
<ABBREV> Abreviatura
<ACRONYM> Acrónimo
<AU> Autor
<B> Crea texto en negrilla
<BIG> Fuente más grande

<BLINK> Texto que parpadea (solamente Netscape)
<CENTER>
Posiciona el texto o gráfico seleccionado en el centro de la página.
<CITE> Cita
<CODE> Instrucciones (código de programación)
<DEL> Muestra el texto que ha sido eliminado
<DFN> Definición de un término
<EM> Énfasis
<I> Itálicas
<INS> Texto nuevo insertado aquí
<KBD> Teclado - Muestra exactamente cómo deben escribirse los caracteres
<PERSON> Acentúa al nombre de una persona
<Q> Enmarca el texto entre comillas
<S> Tacha
<SAMP> Ejemplo
<SMALL> Fuente más pequeña
<STRONG> Convierte el texto en negrilla
<STRIKE> Tacha (igual que S)
<SUB> Subíndice
<SUP> Superíndice
<TT> Para escribir código fuente
<VAR> Nombre de la variable




Encabezados


Etiqueta Efecto visual
H1 Prueba
H2 Prueba
H3 Prueba
H4 Prueba
H5 Prueba
H6 Prueba




Atributos


Atributo Valor Efecto visual
ALIGN LEFT

RIGHT


CENTER

JUSTIFY

Texto alineado a la izquierda

Texto alineado a la derecha

Texto centrado


Texto justificado

NOWRAP   Evita que el navegador crea un salto de línea.
ID   Otorga una identificación a la etiqueta. Este atributo es especialmente útil para la programación con JavaScript
LANG   Especifica un idioma diferente
CLASS   Asigna una clase a los contenidos (para hojas de estilo)
CLEAR   Se usa cuando el texto está rodeando una imagen. Ubica el texto tan abajo de la página como sea necesario para tener un margen claro.




Párrafos


Etiqueta Atributo Efecto visual
<br/>   Salto de línea
<p> y </p>   Párrafo
<hr size=5 width=20% align=left> SIZE
WIDTH
ALIGN







Contenedores


Contenedor Efecto visual
<blockquote> y </blockquote>
Texto con indentación
<address> y </address>
Para escribir información de contacto
<note> y </note> Para escribir una nota
<fn> y </fn> Para crear una nota al pie
<banner> y </banner> Hace que un bloque de texto adopte una posición fija con relación a la página
<pre> y </pre>
Para escribir texto preformateado; manteniendo espacios, 
  saltos de líneas y tabuladores intactos 






Tablas


Atributo Etiquetas a las que se aplica Valor Efecto visual
ALIGN THEAD
TBODY
TH
TR
TD


CENTER

LEFT

RIGHT

JUSTIFY

Centrado

Izquierda


Derecha

Justificado

CAPTION TOP

BOTTOM


Arriba

Abajo

VALIGN
(alineación vertical)
THEAD
TBODY
TH
TR
TD
TOP

MIDDLE

BOTTOM


Arriba

Medio

Abajo

BORDER=n TABLE   Tamaño del borde
CELLPADDING=n TABLE   Deja n píxeles de espacio entre los contenidos de la celda y el borde
CELLSPACING=n TABLE   Grosor del espacio entre celdas
FLOAT TABLE RIGHT

LEFT


Posición del texto que sigue a </TABLE>
COLS=n TABLE   Número de columnas
FRAME

(controla los elementos individuales del marco de la tabla)

TABLE NONE

Arriba


BOTTOM

TOPBOT

SIDES

ALL

Ninguno

Arriba


Abajo

arriba de todo

A los costados

Todo

RULES

(controla los elementos de la cuadrícula de la celda)

TABLE NONE

BASIC

ROWS

COLS


ALL

Ninguno

Básica

Línea

Columna

Todo


COLSPAN THEAD
TBODY
TH
TR
TD
  Hace que las celdas desborden sobre las columnas adyacentes
ROWSPAN THEAD
TBODY
TH
TR
TD
  Hace que las celdas desborden sobre las filas adyacentes




Atributos de etiquetas FORM y tipos de entrada


Etiqueta Atributo Valor Resultado Efecto visual
<FORM> ... </FORM> METHOD POST
GET
   
ACTION   Envía a la dirección mostrada  
ENCTYPE   Especifica el tipo de código  
<INPUT> TYPE submit realiza la ACTION de la etiqueta <FORM>
text línea simple de texto cuya longitud
se especifica por el atributo SIZE
Reset Elimina el contenido del formulario
Radio botón de radio
Checkbox casilla de selección
NAME   Nombre  
SIZE   Tamaño del texto  
<TEXTAREA> ... </TEXTAREA> NAME   Casilla de texto
ROWS  
COLS  
<SELECT>

<OPTION> ... </OPTION>


</SELECT>

NAME    
MULTIPLE   Múltiples selecciones posibles
<OPTION> ... </OPTION> SELECTED Elección predeterminada  
VALUE Valor forzado  



Llamar


Por ejemplo Hipervínculo:

<A HREF="page.html" TARGET="_blank">

Valor Acción Acción
_self Muestra el destino en el mismo marco que el vínculo
_parent Muestra el destino en el marco de nivel superior siguiente
_blank Muestra el destino en una nueva ventana
_top Muestra el destino en toda la ventana del navegador


Por ejemplo JavaScript:

<SCRIPT LANGUAGE="JavaScript">

//<![CDATA[

AQUÍ-EL-CONTENIDO-DEL-SCRIPT

//]]>


</SCRIPT>

O

<script src="http://URL DEL SCRIPT.js o .txt" type="text/javascript"></script>



Por ejemplo CSS:

<style type="text/css">

AQUÍ-EL-CONTENIDO

</style>

O

<link href="http://URL DEL ARCHIVO .css" rel="stylesheet" type="text/css">


VER STILOS CSS

Por ejemplo una imagen:

<img src="http://URL DE LA IMAGEN"/>




Comentarios condicionales en Internet Explorer


El motor del Internet Explorer es capaz de reconocer dentro de un
<!-- comentario --> un condicional con el cuál indicarle hacer una acción determinada si el navegador usado es el que se especifica.
El formato es el siguiente:

<!--[if (condicional) IE (versión)]>

... código HTML ...

<![endif]-->

Donde condicional es:


  • gte : mayor o igual que
  • gt : mayor que
  • lt : menor que
  • lte : menor o igual que
  • [if IE] (nada) : todos

Y en versión podemos indicar la versión del Internet Explorer deseada. Así podrían quedar cosas como las siguientes:

Si nuestro navegador es anterior al IE6...

<!--[if lt IE 6 ]>

Tu versión de Internet Explorer es demasiado antigua.

<![endif]-->

Si nuestro navegador es superior al IE5.5 carga una hoja de estilos determinada...

<!--[if gte IE 5.500 ]>

<link rel="stylesheet" type="text/css" href="estilosIE.css">

<![endif]-->

Si nuestro navegador es IE en cualquier versión...

<!--[if IE]>

¡Estás usando Internet Explorer!

<![endif]-->




Comentarios




Son muy fáciles de poner.

Es como una etiqueta que tiene un inicio y un fin.

Todo el texto que pongas dentro está comentado, es decir, no aparecerá en la página.

Dentro de un comentario puedes meter texto o código HTML, como etiquetas.


Los comentarios en HTML:


El comentario empieza por:

<!-- y finaliza por -->

Todo lo que pongas entre esas etiquetas está comentado.



Los comentarios en CSS:

El comentario empieza por:

/* y finaliza por */

Todo lo que pongas entre esas etiquetas está comentado.


Hack CSS de los comentarios de dos barras (//)

Pero Firefox también interpreta los comentarios formados por //



// esto es un comentario



Internet Explorer simplemente ignora las dos barras y trata la línea como si fuera un código normal.




Por ejemplo tenemos este código:



h1{

   font-size: 12px;

   color: #009900;

   //font-size: 16px;

   //color: #000099;

}




Aquí hemos definido un par de estilos para la etiqueta H1.

Los dos primeros estilos son font-size:12px y color:#009900. Todos los navegadores leerán estos estilos.



Pero luego tiene otros dos estilos, que en realidad son los mismos que los anteriores, que comienzan por dos barras. Firefox y Opera, que interpretan esas dos barras como comentarios, no leerán los estilos. Internet Explorer que no tiene en cuenta las dos barras como comentarios, leerá los dos últimos estilos.



Por lo tanto, el resultado final será que

  • Todos los navegadores mostrarán los H1 con tamaño de fuente 12px y color verde.
  • Internet Explorer mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.

Tendríamos que verlo con Internet Explorer y con otros navegadores para comprobar que cambian los estilos con los que se muestra el encabezamiento H1.





Los comentarios en JAVA:

Hay tres tipos de comentarios en Java:



// Este es un comentario de una sola línea

/* Este es un comentario de una o más líneas */

/** Este es un comentario de documentación */

Todo lo que pongas entre esas etiquetas está comentado.


FLOAT en CSS


La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none.




Un valor left significa que el elemento formará un bloque que se situará a la izquierda de los elementos adyacentes. Un valor right significa que el bloque se situará a la derecha.

Un bloque 'flotante' debe tener definida su anchura, implicita o expresamente, ya que de lo contrario será tratado como no flotante

clear

clear se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el.

Sus posible valores son none, left right o both.

  • none: el elemento permite otros flotantes a ambos lados
  • left: el elemento no permite flotantes a su izquierda
  • right: el elemento no permite flotantes a su derecha
  • both: el elemento no permite flotantes a ningun lado

Ejemplos: primer bloque flotante a la derecha

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque
Código:

<div style="border: 1px dotted black; padding: 1em; font-weight: normal; width: 80%; text-align: center;">
<div style="border: 3px solid rgb(204, 204, 204); float: right; width: 50%; background-color: rgb(255, 255, 255);">primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque </div>

<div style="border: 3px solid rgb(204, 204, 204); background-color: rgb(240, 240, 240);">segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque </div>
</div>






Ejemplos: primer bloque flotante a la izquierda

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque
segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque
Código:

<div style="border: 1px dotted black; padding: 1em; font-weight: normal; width: 80%; text-align: center;">
<div style="border: 3px solid rgb(204, 204, 204); float: left; width: 50%; background-color: rgb(255, 255, 255);">primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque </div>
<div style="border: 3px solid rgb(204, 204, 204); background-color: rgb(240, 240, 240);">segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque </div></div>




Las etiquetas <SPAN> y <DIV>




En ocasiones, dentro de un mismo párrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.


La etiqueta <SPAN>

La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un párrafo.
Se puede usar con ID o con CLASS.
Su sintaxis es:

<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>

La etiqueta <DIV>

En lugar de aplicar estilos a unas pocas palabras dentro de un párrafo, esta etiqueta los aplica a un bloque de texto, que puede ser un párrafo o varios.

La sintaxis de la etiqueta DIV es:

<DIV class=important> párrafos </DIV>

Clases y Id




Diferencias entre clases e ID

La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma univoca y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.


Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.





class

Los class se definen utilizando el signo "." seguido por el mombre del identificador y luego las propiedades del estilo.

Mediante la definición de 'clases' se establecen
estilos que pueden aplicarse a cualquier selector HTML o elemento de la página. El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.

Por ejemplo:

.Piepagina { font-size: small; }



La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:


<p class="Piepagina">
<h1 class="Piepagina">

<div class="Piepagina">
<span class="Piepagina">

La clase asi definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo <p> </p>; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span

Solo una clase se puede especificar a la vez para cada etiqueta HTML.
P.miclase.miotraclase


sería inválido.
Pero si pueden establecerse clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:


h1.roja {font: 15pt/17pt; color: red;}

h1.verde {font: 15pt/17pt; color: green;}

h1.azul {font: 15pt/17pt;color: blue;}

y usar una clase u otra en la Página Web como sigue:

<h1 class="roja">Este es un encabezamiento rojo</h1>
...
<h1 class="azul">Este es azul </h1>

...
<h1 class="verde">Y este .... verde</h1>

Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.


Selector ID

Los ID se definen utilizando el signo "#" seguido por el mombre del identificador y luego las propiedades del estilo.

Mediante el atributo id podemos establecer una identidad única para un único elemento de la página. La sistaxis html sería por ejemplo <p id="menu">, donde especificamos la identidad "menu" para ese unico párrafo.

Al elemento html pueden asignarsele estilos a traves del selector id:

#menu {estilos ...}
o bien
p#menu  {estilos ...}



Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:


DIV P               { font: small sans-serif }
.rojizo H1          { color: red }
#x78y CODE          { background: blue }
DIV.notaalmargen H1 { font-size: large }

El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes. El segundo
selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'. El tercer selector
corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'. El cuarto selector corresponde
a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.


Los selectores contextuales también se pueden agrupar:


H1 B, H2 B, H1 EM, H2 EM { color: red }

que es equivalente a:


H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

Top

¿Cómo se hace...?

HTML ASCll


Número Nombre Apariencia
&#00;-&#08; - -
&#09; - space
&#10; - space
&#11;-&#31; - -
&#32; - space
&#33; - !
&#34; &quot; "
&#35; - #
&#36; - $
&#37; - %
&#38; &amp; &
&#39; - '
&#40; - (
&#41; - )
&#42; - *
&#43; - +
&#44; - ,
&#45; - -
&#46; - .
&#47; - /
&#48;-&#57; - 0 - 9
&#58; - :
&#59; - ;
&#60; &lt; <
&#61; - =
&#62; &gt; >
&#63; - ?
&#64; - @
&#65;-&#90; - A - Z
&#91; - [
&#92; - \
&#93; - ]
&#94; - ^
&#95; - _
&#96; - `
&#97;-&#122; - a - z
&#123; - {
&#124; - |
&#125; - }
&#126; - ~
&#127;-&#159; - -
&#160; &nbsp;  
&#161; &iexcl; ¡
&#162; &cent; ¢
&#163; &pound; £
&#164; &curren; ¤
&#165; &yen; ¥
&#166; &brvbar; ¦
&#167; &sect; §
&#168; &uml; ¨
&#169; &copy; ©
&#170; &ordf; ª
&#171; &laquo; «
&#172; &not; ¬
&#173; &shy; ­
&#174; &reg; ®
&#175; &macr; ¯
&#176; &deg; °
&#177; &plusmn; ±
&#178; &sup2; ²
&#179; &sup3; ³
&#180; &acute; ´
&#181; &micro; µ
&#182; &para;
&#183; &middot; ·
&#184; &cedil; ¸
&#185; &sup1; ¹
&#186; &ordm; º
&#187; &raquo; »
&#188; &frac14; ¼
&#189; &frac12; ½
&#190; &frac34; ¾
&#191; &iquest; ¿
&#192; &Agrave; À
&#193; &Aacute; Á
&#194; &Acirc; Â
&#195; &Atilde; Ã
&#196; &Auml; Ä
&#197; &Aring; Å
&#198; &AElig; Æ
&#199; &Ccedil; Ç
&#200; &Egrave; È
&#201; &Eacute; É
&#202; &Eirc; Ê
&#203; &Euml; Ë
&#204; &Igrave; Ì
&#205; &Iacute; Í
&#206; &Icirc; Î
&#207; &Iuml; Ï
&#208; &ETH; Ð
&#209; &Ntilde; Ñ
&#210; &Ograve; Ò
&#211; &Oacute Ó
&#212; &Ocirc; Ô
&#213; &Otilde; Õ
&#214; &Ouml; Ö
&#215; &times; ×
&#216; &Oslash; Ø
&#217; &Ugrave Ù
&#218; &Uacute; Ú
&#219; &Ucirc; Û
&#220; &Uuml; Ü
&#221; &Yacute; Ý
&#222; &THORN; Þ
&#223; &szlig; ß
&#224; &agrave; à
&#225; &aacute; á
&#226; &acirc; â
&#227; &atilde; ã
&#228; &auml ä
&#229; &aring; å
&#230; &aelig; æ
&#231; &ccedil; ç
&#232; &egrave; è
&#233; &eacute; é
&#234; &ecirc; ê
&#235; &euml; ë
&#236; &igrave; ì
&#237; &iacute; í
&#238; &icirc; î
&#239; &iuml; ï
&#240; &eth; ð
&#241; &ntilde; ñ
&#242; &ograve; ò
&#243; &oacute; ó
&#244; &ocirc; ô
&#245; &otilde; õ
&#246; &ouml; ö
&#247; &divide; ÷
&#248; &oslash; ø
&#249; &ugrave; ù
&#250; &uacute; ú
&#251; &ucirc; û
&#252; &uuml; ü
&#253; &yacute; ý
&#254; &thorn; þ
&#255; &yuml; ÿ
&#338; &OElig; Œ
&#339; &oelig; œ
&#352; &Scaron; Š
&#353; &scaron; š
&#376; &Yuml; Ÿ
&#710; &circ; ˆ
&#732; &tilde; ˜
&#8211; &ndash;
&#8212; &mdash;
&#8216; &lsquo;
&#8217; &rsquo;
&#8218; &sbquo;
&#8220; &ldquo;
&#8221; &rdquo;
&#8222; &bdquo;
&#8224; &dagger;
&#8225; &Dagger;
&#8240; &permil;
&#8249; &lsaquo;
&#8250; &rsaquo;
&#8364; &euro;
¿Cómo se hace...?


Char  Code Dec Char  Code Dec Char  Code Dec Char  Code Dec
&#9650; &#9792; &larr; &#8592; % &#37;
&#9658; &#9794; &uarr; &#8593; &#8240;
&#9660; &#9794; &rarr; &#8594; ¹ &sup1; &#185;
&#9668; &spades; &#9824; &darr; &#8595; ² &sup2; &#178;
&#9632; &#9828; &harr; &#8596; ³ &sup3; &#179;
&#9633; &clubs; &#9827; &#8597;
&#9635; &#9831; &#8598;
&#9636; &hearts; &#9829; &#8599;
&#9637; &#9825; &#8600;
&#9638; &diams; &#9830; &#8601;
&#9639; &#9733; × &times; &#215;
&#9640; &#9734; ÷ &divide; &#247;
&#9641; &#8962; + &#43;
&#9642; &#8470; - &#45;
&#9643; &#9742; &#8486;
&loz; &#9674; &#9743; &#8730;
&#9675; &#9832; ¼ &frac14; &#188;
&#9679; &#9756; ½ &frac12; &#189;
&#9786; &#9758; ¾ &frac34; &#190;
&#9787; &#9833; &#8531;
&#9788; &#9834; &#8532;
&euro; &#8364; &#9835; &#8539;
¢ &cent; &#162; &#9836; &#8540;
£ &pound; &#163; &#9837; &#8540;
¥ &yen; &#165; &#8224; &#8541;
¤ &curren; &#164; &#8225; &#8542;