CSS3

El nombre hojas de estilo en cascada viene del inglés CASCADING STYLE SHEETS,
del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un
documento estructurado escrito en HTML o XML (y por extensión en XHTML).

¿Para qué sirve el CSS3?

El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo
permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera
de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la
CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen.
CSS es un lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de
las fuentes, tamaños de elemento, con css podemos establecer diferentes reglas que
indicarán como debe presentarse un documento. Podemos indicar propiedades como el
color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica, también se puede dar
forma a otras cosas que no sean letras, como colores de fondo de una pagina, tamaños de un
elemento (por ejemplo el alto y el ancho de una tabla.

características principales de css3

1. Atributo gradiente de colores en borde con CSS y Firefox: Posibilidad de definir el un
gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de
Firefox.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes
redondeados, a través del atributo border-radius, que define la curvatura que debe tener el
borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página
tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.
4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se
incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras que
son demasiado largas y no caben enteras por la anchura de una caja.
6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el
navegador se encargue de producir texto multicolumna, es decir, que maquete directamente
el texto en varias columnas sin tener que hacer nosotros nada.
7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3 harán
posible la utilización de imágenes como bordes de los elementos de la página, sin código
HTML especial, simplemente con hojas de estilo.
8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-shadow.
Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes,
Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor
exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin
permite decidir la posición de la imagen de fondo con respecto al borde, padding o el
contenido del elemento.
11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3
overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando
sobrepasa los límites de un contenedor en la horizontal o vertical.
12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales
características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en
una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos en
los textos con CSS y el atributo text-shadow.
Ventajas y desventajas de css3
Se obtiene un mayor control de la presentación del sitio al poder tener todo el código CSS
reunido en uno, lo que facilita su modificación.
Al poder elegir el archivo CSS que deseamos mostrar, puede aumentar la accesibilidad ya
que podemos asignarle un código CSS concreto a personas con deficiencias visuales, por
ejemplo. Esto lo detecta el navegador web.
Conseguimos hacer mucho más legible el código HTML al tener el código CSS aparte
(Siempre que no usemos estilos en línea, claro está).
Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando
(versión impresa, versión móvil, leída por un sintetizador de voz…) o dejar que el usuario
elija.
Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio al juntar todas
las imágenes en una.
Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias
técnicas (bordes redondeados, sombra en el texto, sombra en las cajas, etc.) sin necesidad
de usar un editor gráfico.
Desventajas
Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación vertical de
capas, las sombras, los bordes redondeados…
El uso de las tablas nos permitía crear diseños complejos de forma mucho más sencilla que
utilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.
A veces, dependiendo del navegador (Acid tests), la página que ha sido maquetada con CSS
puede verse distinta (Aunque, si hemos seguido los estándares web de forma correcta, el
problema es del navegador).
Aplicaciones o usos de css3
1. Botones y HTML: Mostramos algunas insuficiencias del HTML en el diseño de
formularios y en concreto en el retoque de botones de envío de formularios.
2. Botones y CSS: Explicamos las mejoras que pueden obtenerse por el uso de hojas de
estilo en la creación de formularios y, más concretamente, los botones de envío.
3. Botones e imágenes: Como podemos mejorar los botones con el uso de imágenes en
lugar de botones de submit corrientes.
4. Botones, CSS y tablas: Vamos a mejorar los botones normales, que al hacer click hacen
efecto de pulsación, con imágenes a los lados para mejorar su aspecto.
5. Botones, imágenes y eventos: Para que los botones de imagen no ignoren los eventos de
teclado, vamos a utilizar una función Javascript.
6. Botones, tablas y eventos: Ampliamos el ejemplo anterior para que el texto de los
botones se pueda editar fácilmente, sin perder en presentación.
Importancia de su uso en determinados problemas o en ciertos sistemas
El CSS nos permite controlar los estilos de nuestros elementos HTML, en realidad con el
HTML definimos la estructura de la web & con el CSS todo lo demás - o sea colores,
fuentes, ubicación & todo lo que se va a mostrar de nuestra web.
Formas de aplicar CSS a una página HTML
1. Dentro de la etiqueta HTML – controlando solo la etiqueta – por ejemplo - p
{color:red;text-align:center;}.
2. Dentro del archivo HTML (dentro de la zona HEAD) – controlando solamente este
archivo -
<style>p {color:red;text-align:center;}</style>.
3. Creando un archivo exterior .css, controlando todos los archivos web del sitio usando
la etiqueta para aplicar los estilos - <link rel=”stylesheet” type=”text/css” href=”theme.css”
/>- esto va dentro del HEAD de nuestra pagina p {color:red;text-align:center;} – los estilos
los aplicamos en el archivo externo css.

CSS3 considerado tecnología de punta o moderna

Las nuevas características de CSS nos permiten añadir efectos de animación a la mayoría
de elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es compatible
con los navegadores WebKit -incluyendo Safari, Safari para iOS y Chrome- y Firefox. Está
previsto que Internet Explorer, a partir de su versión 10, también tenga soporte para este
tipo de animaciones. Debido a que la tecnología es relativamente nueva, se debe añadir un
prefijo con el motor del navegador. En nuestro caso, los ejemplos los realizaremos con los
prefijos webkit y moz.
Artículos científicos y ponencias realizados sobre CSS3
http://www.lawebera.es/comunidad/articulos/diseno-paginas-web/css/novedades-css3.php
En este articulo se resume las novedades más importantes y explicaré brevemente en que
consiste eso que llaman el CSS3.
http://www.lawebera.es/como-hacer/ejemplos-css/especificidad-hojas-de-estilo-css.php
Se debe tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de
controlarlo.
 Sintaxis para la Creación de Reglas CSS
La sintaxis básica es:
Selector { propiedad: valor; }
Donde:
 Selector: indica el elemento HTML al cual se aplicaran las reglas.
 Propiedad: se refiere al estilo del objeto indicado en selector que será
afectado.
 Valor: hace referencia al valor que tendrá la propiedad.

h1{align: left;}

CSS permite varias declaraciones en una misma regla,

tomando en cuenta esto la regla se podría escribir así:
h1{align: left; color: #ff0000;}
otra forma:
h1
{
align: left;
color: #ff0000;
}

Si lo que desea es asignar la misma regla a varios selectores

se puede escribir así:
h1,h2,h3,p{align: left; color: #ff0000;}
Font permite asignar más de un valor
p {Font: Arial 14 #ff0000;}

APLICAR ESTILOS CSS A UN DOCUEMTO HTML

Para aplicar estilos a un documento HTML, existen
diferentes formas de hacerlo.

ESTILO EN LINEA
Consiste en asignar el estilo dentro de las etiquetas de el
atributo

style.
<!doctype html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>APLICAR ESTILOS CSS</title>
</head>

<body>
<h1 style="font-size: 40px;color: #F7060A">UNION ESFUERZO Y
DEMOCRACIA</h1>
</body>
</html>
 ESTILOS EMBEBIDOS
Consiste en asignar estilo en la cabecera del documento
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12vo INFORMATICA</title>
<style>
p
{
font-size: 20px;
text-align: center
}
</style>
</head>

<body>
<h1>INUED</h1>

<p>Es una empresa dedicada a la educaci&oacute;n</p>

<p><strong>UNI&Oacute;N</strong> significa Uni&oacute;n Esfuerzo y
Democracia</p>
<p>Es una empresa dedicada a la educaci&oacute;n de jovenes promesas en
Honduras que lleva mucho pero mucho tiempo al servicio del pueblo ayudando y formando
estudaintes con calidad y formando los mejores alumnos. </p>
</body>
</html>
 ESTILOS A TRAVES DE UN ARCHIVO EXTERNO

<LINK REL=StyleSheet HREF= “estilo1=.css” /> }

LINK REL
Especifica la relación entre docuemto alctual y el documento
vinculado.
HREF
Especifica el archivo con el cual estamos vinculando el
documento actual.
StyleSheet
Valor del atributo rel que indica que estamos
relacionándonos con una hoja de estilos.