Ir a contenido


Elias G.

Alta: 26 mar 2009
Offline Último activo: oct 18 2010 05:54
-----

Temas que he empezado

Lista de imagenes en CSS

18 octubre 2010 - 04:43

En este tutorial haremos un ejemplo de lista con imagenes siguiendo la estructura siguiente en HTML:

<HTML>

<head>

</head>
<body>
  <ul>
  <li>
  <a><img></img></a>
  </li>
  </ul>
</body>

</HTML>

luego de tener esto listo (con su <a> con su enlace especificado y <img> con su direccion de la imagen a elegir) para proceder en caso de que la lista sea horizontal aplicamos lo siguiente:

ul li{
display:inline;
}

o podemos usar:

ul li{
float:left;}

para la vertical simplemente quitamos el list-style poniendola none para asi no aparezcan con la bolita que viene por default.

CSS - pseudo-elements

30 septiembre 2010 - 07:17

la sintaxis de los pseudo-elements es la siguiente:
selector:pseudo-element {property:value;}

Los pseudo-elements se pueden usar tambien con clases de CSS:
selector.class:pseudo-element {property:value;}

El :first-line Pseudo-element

pseudo CSS class de "primera línea" pseudo-elemento se utiliza para añadir un estilo especial a la primera línea de un texto.

En el siguiente ejemplo los formatos navegador la primera línea de texto en el elemento de enfoque de acuerdo con el estilo de la "primera línea" pseudo-elemento (cuando el navegador se rompe la línea, depende del tamaño de la ventana del navegador):

Ejemplo
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

CSS - Display property

29 septiembre 2010 - 05:46

La propiedad display es compatible con todos los principales navegadores.

Nota: No hay versiones de Internet Explorer (IE8 incluyendo) el apoyo a los valores de propiedad "inline-table", "run-in", "mesa", "table-caption", "table-cell", "table-column", " table-column-grupo "," table-row ", o" table-row-grupo ".
Ejemplo de declaracion
p.inline
{
display:inline;
}

Definición y uso

La propiedad de presentación especifica el tipo de caja de un elemento debe generar.

Lista de diferentes propiedades Display

  • none: The element will generate no box at all
  • block: The element will generate a block box (a line break before and after the element)
  • inline: The element will generate an inline box (no line break before or after the element). This is default
  • inline-block: The element will generate a block box, laid out as an inline box
  • inline-table: The element will generate an inline box (like <table>, with no line break before or after)
  • list-item: The element will generate a block box, and an inline box for the list marker
  • run-in: The element will generate a block or inline box, depending on context
  • table: The element will behave like a table (like <table>, with a line break before and after)
  • table-caption: The element will behave like a table caption (like <caption>)
  • table-cell: The element will behave like a table cell
  • table-column: The element will behave like a table column
  • table-column-group: The element will behave like a table column group (like <colgroup>)
  • table-footer-group: The element will behave like a table footer row group
  • table-header-group: The element will behave like a table header row group
  • table-row: The element will behave like a table row
  • table-row-group: The element will behave like a table row group
  • inherit: Specifies that the value of the display property should be inherited from the parent element

CSS - :lang Pseudo-class

29 septiembre 2010 - 05:26

El: lang pseudo-class permite definir reglas especiales para distintos idiomas.
Note: El Internet Explorer 8 (o posteriores) soporta el :lang pseudo-class si especifican el <!DOCTYPE>.

En el siguiente ejemplo, el: lang clase define las comillas para q los elementos con lang = "no":
<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Ejemplo de declaracion de HTML <!DOCTYPE>

28 septiembre 2010 - 05:11

Un documento HTML con un doctype de XHTML 1.0 Transitional:

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

<body>
The content of the document......
</body>

</html>

Definición y uso

La declaración de tipo de documento debe ser lo primero en un documento HTML, antes de la etiqueta <html>.

La declaración de tipo de documento no es una etiqueta HTML, sino que es una instrucción para el navegador web acerca de qué versión del lenguaje de marcado se escribe la página de in

La declaración de tipo de documento se refiere a una definición de tipo de documento (DTD). El DTD especifica las reglas para el lenguaje de marcas, de modo que los navegadores pueden hacer que el contenido correctamente.

Doctypes disponible en las Recomendaciones del W3C

HTML 4.01 Strict

Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentación o en desuso (como fuente). Marcos no están permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentación y obsoletos (como fuente). Marcos no están permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Este DTD es igual a HTML 4.01 Transitional, pero permite la utilización de los contenidos de marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentación o en desuso (como fuente). Marcos no están permitidos. El margen de beneficio también se debe escribir como XML bien formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentación y obsoletos (como fuente). Marcos no están permitidos. El margen de beneficio también se debe escribir como XML bien formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Este DTD es igual a XHTML 1.0 Transitional, pero permite la utilización de los contenidos de marcos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Este DTD es igual a XHTML 1.0 Strict, pero le permite añadir módulos (por ejemplo, para proporcionar apoyo de rubí para los idiomas de Asia Oriental).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Tecnología y soporte por web hosting