domingo, 19 de junio de 2016
Introducción a CSS3
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión enXHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales con el elemento «style» o en cada etiqueta particular mediante el atributo «style».
Limitaciones
Algunas limitaciones que se encuentran en el uso del CSS hasta la versión CSS2.1, vigente, pueden ser:
- Los selectores no pueden usarse en orden ascendente según la jerarquía del DOM (hacia padres u otros ancestros) como se hace mediante XPath
La razón que se ha usado para justificar esta carencia por parte de la W3C, es para proteger el rendimiento del navegador, que de otra manera, podría verse comprometido. XSLT soporta en la actualidad un mayor número de sistemas operativos. Así mismo, también es mejor para trabajar con la mayoría de buscadores de Internet. - Dificultad para el alineamiento vertical; así como el centrado horizontal se hace de manera evidente en CSS2.1, el centrado vertical requiere de diferentes reglas en combinaciones no evidentes, o no estándares.
- Ausencia de expresiones de cálculo numérico para especificar valores (por ejemplo
margin-left: 10% – 3em + 4px;).
Un borrador de la W3C para CSS3, proponecalc()para solventar esta limitación. - Las pseudo-clases dinámicas (como
:hover) no se pueden controlar o deshabilitar desde el navegador, lo que las hace susceptibles de abuso por parte de los diseñadores en banners, o ventana emergentes.
Ventajas
Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) son:
- Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
- Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.
- Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prácticas necesarias para el control del diseño (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.
• Introducción al HTML5
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
Etiquetas
Etiqueta
|
Atributos de la etiqueta
|
Comentarios
|
<!-- -->
|
Estándar o ninguno
| |
<!DOCTYPE>
|
Estándar o ninguno
| |
<a>
|
href | target | rel | hreflang | media | type
|
Atributo Añadido: media
Atributo cambiado: Target
|
<abbr>
|
title
| |
Etiqueta Eliminada
| ||
<address>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<area>
|
Estándar o ningunos
| |
<article>
|
Atributos globales
|
Nueva etiqueta
|
<aside>
|
Atributos globales
|
Nueva etiqueta
|
<audio>
|
autobuffer | autoplay | controls | loop | src
|
Nueva etiqueta
|
<b>
|
Atributos globales
|
Etiqueta cambiada
|
<base>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<bdo>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<blockquote>
|
Estándar o ninguno
| |
<body>
|
Estándar o ninguno
| |
<br>
|
Estándar o ninguno
| |
<button>
|
Estándar o ninguno
| |
<canvas>
|
height | width
|
Nueva etiqueta
|
<caption>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<cite>
|
Atributos globales
|
Etiqueta cambiada
|
<code>
|
Estándar o ninguno
| |
<col>
|
Estándar o ninguno
| |
<colgroup>
|
Estándar o ninguno
| |
<datalist>
|
Atributos globales
|
Nueva etiqueta
|
<dd>
|
Estándar o ninguno
| |
<del>
|
Estándar o ninguno
| |
<details>
|
open
|
Nueva etiqueta
|
<dialog>
|
Atributos globales
|
Nueva etiqueta
|
Etiqueta eliminada
| ||
<div>
|
Estándar o ninguno
| |
<dfn>
|
Estándar o ninguno
| |
<dl>
|
Estándar o ninguno
| |
<dt>
|
Estándar o ninguno
| |
<em>
|
Estándar o ninguno
| |
<embed>
|
height | src | type | width
|
Nueva etiqueta
|
<fieldset>
|
Estándar o ninguno
| |
<figure>
|
Atributos globales
|
Nueva etiqueta
|
Etiqueta eliminada
| ||
<footer>
|
Atributos globales
|
Nueva etiqueta
|
<form>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
Etiqueta eliminada
| ||
<h1>... <h6>
|
Estándar o ninguno
| |
<head>
|
Estándar o ninguno
| |
<header>
|
Atributos globales
|
Nueva etiqueta
|
hgroup se añadió a la especificación HTML5, pero ahora está obsoleta.4Usar <header>
| ||
<hr>
|
Ninguno
|
Etiqueta cambiada
|
<html>
|
Estándar o ninguno
| |
<i>
|
Ninguno
|
Etiqueta cambiada
|
<iframe>
|
Estándar o ninguno
| |
<img>
|
Estándar o ninguno
| |
<input>
|
accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width
|
Etiqueta cambiada: Añadidos 13 elementos a type
|
<ins>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<kbd>
|
Estándar o ninguno
| |
<label>
|
Estándar o ninguno
| |
<legend>
|
Estándar o ninguno
| |
<li>
|
Estándar o ninguno
| |
<link>
|
Estándar o ninguno
| |
<mark>
|
Atributos globales
|
Nueva etiqueta
|
<map>
|
Estándar o ninguno
| |
<menu>
|
Estándar o ninguno
| |
<meta>
|
Estándar o ninguno
| |
<meter>
|
high | low | max | min | optimum | value
|
Nueva etiqueta
|
<nav>
|
Atributos globales
|
Nueva etiqueta
|
Etiqueta eliminada
| ||
<noscript>
|
Estándar o ninguno
| |
<object>
|
Estándar o ninguno
| |
<ol>
|
Estándar o ninguno
| |
<optgroup>
|
Estándar o ninguno
| |
<option>
|
Estándar o ninguno
| |
<output>
|
form
|
Nueva etiqueta
|
<p>
|
Estándar o ninguno
| |
<param>
|
Estándar o ninguno
| |
<pre>
|
Estándar o ninguno
| |
<progress>
|
max | value
|
Nueva etiqueta
|
<q>
| ||
<ruby>
|
cite
|
Nueva etiqueta
|
<rp>
|
Atributos globales
|
Nueva etiqueta
|
<rt>
|
Atributos globales
|
Nueva etiqueta
|
Etiqueta eliminada
| ||
<samp>
|
Estándar o ninguno
| |
<script>
|
Estándar o ninguno
| |
<section>
|
cite
|
Nueva etiqueta
|
<select>
|
Estándar o ninguno
| |
<small>
|
Atributos globales
|
Etiqueta Cambiada
|
<source>
|
media | src | type
|
Nueva etiqueta
|
<span>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<strong>
|
Estándar o ninguno
| |
<style>
|
Estándar o ninguno
| |
<sub>
|
Estándar o ninguno
| |
<sup>
|
Estándar o ninguno
| |
<table>
|
Estándar o ninguno
| |
<tbody>
|
Estándar o ninguno
| |
<td>
|
Estándar o ninguno
| |
<textarea>
|
Estándar o ninguno
| |
<tfoot>
|
Estándar o ninguno
| |
<th>
|
Estándar o ninguno
| |
<thead>
|
Estándar o ninguno
| |
<time>
|
datetime | pubdate
|
Nueva etiqueta
|
<title>
|
Estándar o ninguno
| |
<tr>
|
Estándar o ninguno
| |
Etiqueta eliminada
| ||
<u>
|
Define texto que debe tener un estilo diferente del texto normal5
| |
<ul>
|
Estándar o ninguno
| |
<var>
|
Estándar o ninguno
| |
<video>
|
src | poster | autobuffer | autoplay | loop | controls | width | height
|
Nueva etiqueta
|
Suscribirse a:
Entradas (Atom)